#InputNumber

import { Form, FormField, InputNumber, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function InputNumberBasic() {
  const [value, setValue] = useState<number | null>(3);
  return (
    <Form layout="vertical">
      <FormField label="Quantity">
        <InputNumber name="quantity" min={0} max={20} value={value} onChange={setValue} />
      </FormField>
      <FormField label="Price">
        <InputNumber min={0} step={0.1} precision={2} defaultValue={19.9} prefix="¥" />
      </FormField>
      <FormField label="Percentage">
        <InputNumber defaultValue={50} min={0} max={100} suffix="%" controls={false} />
      </FormField>
      <FormField label="Read only">
        <InputNumber defaultValue={12} readOnly />
      </FormField>
      <FormField label="Disabled">
        <InputNumber defaultValue={8} disabled />
      </FormField>
      <Text tone="muted">Current quantity: {value ?? 'Empty'}</Text>
    </Form>
  );
}

import { Form, FormField, InputNumber } from '@ifhover/leaf-ui';

export function Capabilities() {
  return (
    <Form layout="vertical">
      <FormField label={'Grouped amount'}>
        <InputNumber defaultValue={12345.67} precision={2} grouping prefix="$" />
      </FormField>
      <FormField label={'Exact decimal string'}>
        <InputNumber
          stringMode
          name="amount"
          defaultValue="9007199254740993.01"
          step="0.01"
          precision={2}
        />
      </FormField>
      <FormField label={'Custom percent format'}>
        <InputNumber
          defaultValue={15}
          min={0}
          max={100}
          formatter={(value) => (value == null ? '' : `${value}%`)}
          parser={(text) => text.replace('%', '')}
        />
      </FormField>
    </Form>
  );
}