FormatInput

import FormatInput from '@/components/composites/FormatInput';
import Form from '@/components/ui/Form';

export default function NumericFormatsDemo() {
  return (
    <div className="mx-auto w-full max-w-md">
      <Form.Field label="Discount" htmlFor="discount">
        <FormatInput.Numeric
          id="discount"
          placeholder="0.0"
          suffix="%"
          decimalScale={1}
          allowNegative={false}
        />
      </Form.Field>
      <Form.Field label="Units in stock" htmlFor="units-in-stock">
        <FormatInput.Numeric
          id="units-in-stock"
          placeholder="0"
          thousandSeparator
          decimalScale={0}
          allowNegative={false}
        />
      </Form.Field>
    </div>
  );
}

import { useState } from 'react';
import { PiTag } from 'react-icons/pi'
import FormatInput from '@/components/composites/FormatInput';

export default function AffixDemo() {
  const [amount, setAmount] = useState<number>();
  const [weight, setWeight] = useState<number>();

  return (
    <div className="mx-auto flex w-full max-w-md flex-col gap-4">
      <div className="flex flex-col gap-2">
        <FormatInput.Numeric
          placeholder="0.00"
          prefix="$"
          thousandSeparator
          decimalScale={2}
          onValueChange={(values) => setAmount(values.floatValue)}
        />
        <span className="text-xs text-muted-foreground">
          Value: {amount ?? '—'} — the $ became part of the text
        </span>
      </div>
      <div className="flex flex-col gap-2">
        <FormatInput.Numeric
          placeholder="0"
          inputPrefix={<PiTag className="text-base text-muted-foreground" />}
          inputSuffix="kg"
          onValueChange={(values) => setWeight(values.floatValue)}
        />
        <span className="text-xs text-muted-foreground">
          Value: {weight ?? '—'} — the icon and “kg” are decoration only
        </span>
      </div>
    </div>
  );
}

import { useState } from 'react';
import FormatInput from '@/components/composites/FormatInput';

export default function StepperDemo() {
  const [seats, setSeats] = useState(1);

  return (
    <div className="mx-auto w-full max-w-md">
      <FormatInput.Numeric
        stepper
        min={1}
        max={20}
        step={1}
        value={seats}
        onValueChange={(values) => setSeats(values.floatValue ?? 1)}
      />
    </div>
  );
}

import FormatInput from '@/components/composites/FormatInput';
import Form from '@/components/ui/Form';

export default function PatternDemo() {
  return (
    <div className="mx-auto w-full max-w-md">
      <Form.Field label="Phone number" htmlFor="phone-number">
        <FormatInput.Pattern
          id="phone-number"
          format="(###) ###-####"
          mask="_"
          placeholder="(___) ___-____"
        />
      </Form.Field>
      <Form.Field label="ZIP + 4" htmlFor="zip-plus-4">
        <FormatInput.Pattern
          id="zip-plus-4"
          format="#####-####"
          mask="_"
          placeholder="_____-____"
        />
      </Form.Field>
    </div>
  );
}

import FormatInput from '@/components/composites/FormatInput';

function formatLicenseKey(value: string) {
  const clean = value
    .toUpperCase()
    .replace(/[^A-Z0-9]/g, '')
    .slice(0, 16);
  return clean.match(/.{1,4}/g)?.join('-') ?? clean;
}

function stripLicenseKey(value: string) {
  return value.replace(/[^A-Za-z0-9]/g, '');
}

export default function CustomFormatDemo() {
  return (
    <div className="mx-auto w-full max-w-md">
      <FormatInput.Custom
        placeholder="XXXX-XXXX-XXXX-XXXX"
        format={formatLicenseKey}
        removeFormatting={stripLicenseKey}
      />
    </div>
  );
}

import { useState } from 'react';
import Button from '@/components/ui/Button';
import FormatInput from '@/components/composites/FormatInput';

export default function ControlledDemo() {
  const [value, setValue] = useState(1200);

  return (
    <div className="mx-auto w-full max-w-md space-y-2">
      <FormatInput.Numeric
        prefix="$"
        thousandSeparator
        decimalScale={2}
        fixedDecimalScale
        value={value}
        onValueChange={(values) => setValue(values.floatValue ?? 0)}
      />
      <div className="flex items-center justify-between">
        <div className="text-muted-foreground">Raw value: {value}</div>
        <Button onClick={() => setValue(0)}>Reset</Button>
      </div>
    </div>
  );
}