Number Field

import { BsNumberField } from '@workspace/ui/components/Numberfield'

export function NumberFieldDemo() {
    return <BsNumberField placeholder="Enter a number" />
}

import { BsNumberField } from '@workspace/ui/components/Numberfield'

export function NumberFieldDemo() {
    return <BsNumberField placeholder="Enter a number" />
}

import { BsNumberField } from '@workspace/ui/components/Numberfield'

export function NumberFieldWithoutStepper() {
    return <BsNumberField showStepper={false} placeholder="Enter a number" />
}

import { BsNumberField } from '@workspace/ui/components/Numberfield'

export function NumberFieldCurrency() {
    return (
        <BsNumberField
            placeholder="Enter a number"
            formatOptions={{
                style: 'currency',
                currency: 'USD',
            }}
        />
    )
}

import { BsNumberField } from '@workspace/ui/components/Numberfield'

export function NumberFieldPercentages() {
    return (
        <BsNumberField
            placeholder="Enter a number"
            formatOptions={{
                style: 'percent',
            }}
        />
    )
}

import { BsNumberField } from '@workspace/ui/components/Numberfield'

export function NumberFieldUnits() {
    return (
        <BsNumberField
            placeholder="Enter a number"
            formatOptions={{
                style: 'unit',
                unit: 'inch',
            }}
        />
    )
}

import { BsNumberField } from '@workspace/ui/components/Numberfield'

export function NumberFieldMinMax() {
    return <BsNumberField minValue={0} maxValue={10} placeholder="Enter a number" />
}

import { BsNumberField } from '@workspace/ui/components/Numberfield'

export function NumberFieldDisabled() {
    return <BsNumberField defaultValue={10} isDisabled />
}

import { Label } from '@workspace/ui/components/Field'
import { BsNumberField } from '@workspace/ui/components/Numberfield'

export function NumberFieldWithLabel() {
    return (
        <div className="flex flex-col gap-2">
            <Label htmlFor="number">Age</Label>
            <BsNumberField id="number" placeholder="Enter a number" />
        </div>
    )
}

'use client'

import { useForm } from 'react-hook-form'
import { toast } from '@workspace/ui/components/Sonner'
import { z } from '@workspace/lib/validation'

import { Button } from '@workspace/ui/components/Button'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@workspace/ui/components/Form'
import { BsNumberField } from '@workspace/ui/components/Numberfield'

interface FormValues {
    age: number
}

export function NumberFieldForm() {
    const form = useForm<FormValues>()

    function onSubmit(data: FormValues) {
        toast.neutral({
            title: 'You submitted the following values',
            description: (
                <pre>
                    <code>{JSON.stringify(data, null, 2)}</code>
                </pre>
            ),
        })
    }

    return (
        <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                <FormField
                    control={form.control}
                    name="age"
                    rules={{
                        validate: z.number().min(18, 'You must be at least 18 years old').validateFn(),
                    }}
                    render={({ field }) => (
                        <FormItem>
                            <FormLabel>Age</FormLabel>
                            <FormControl>
                                <BsNumberField step={1} placeholder="Enter your age" {...field} />
                            </FormControl>
                            <FormMessage />
                        </FormItem>
                    )}
                />
                <Button type="submit">Submit</Button>
            </form>
        </Form>
    )
}