diff --git a/components/shadcn-studio/input/input-41.tsx b/components/shadcn-studio/input/input-41.tsx index 4eb3d71..f3ffddd 100644 --- a/components/shadcn-studio/input/input-41.tsx +++ b/components/shadcn-studio/input/input-41.tsx @@ -1,44 +1,72 @@ 'use client' +import { useCallback, useMemo, useState } from 'react' import { MinusIcon, PlusIcon } from 'lucide-react' -import { Button, Group, Input, Label, NumberField } from 'react-aria-components' +import { Button } from '@/components/ui/button' +import { Input } from '@/components/ui/input' +import { Label } from '@/components/ui/label' + +const clamp = (value: number, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) => + Math.min(Math.max(value, min), max) const InputWithEndButtonsDemo = () => { + const [value, setValue] = useState(1024) + const minValue = 0 + + const formattedValue = useMemo(() => (Number.isFinite(value) ? value.toString() : ''), [value]) + + const handleManualChange = useCallback( + (event: React.ChangeEvent) => { + const digitsOnly = event.target.value.replace(/\D/g, '') + if (digitsOnly.length === 0) { + setValue(minValue) + return + } + const next = Number.parseInt(digitsOnly, 10) + setValue(clamp(next, minValue)) + }, + [minValue], + ) + + const handleIncrement = useCallback(() => setValue((current) => clamp(current + 1, minValue)), [minValue]) + const handleDecrement = useCallback(() => setValue((current) => clamp(current - 1, minValue)), [minValue]) + return ( - -