@arbor-education/design-system.components 0.14.0 → 0.16.0

package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.d.ts

@@ -1,10 +1,104 @@
 import type { StoryObj } from '@storybook/react-vite';
+import { ColourPickerDropdown } from './ColourPickerDropdown';
+declare function ColourPickerDropdownDocsPage(): import("react/jsx-runtime").JSX.Element;
 declare const meta: {
     title: string;
     component: ({ value, onChange, hasError, disabled, id, "aria-describedBy": ariaDescribedBy, "aria-invalid": ariaInvalid }: import("./ColourPickerDropdown").ColourPickerDropdownProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            page: typeof ColourPickerDropdownDocsPage;
+        };
+    };
+    argTypes: {
+        value: {
+            description: string;
+            control: {
+                type: "color";
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        onChange: {
+            description: string;
+            action: string;
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        hasError: {
+            description: string;
+            control: "boolean";
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            description: string;
+            control: "boolean";
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        id: {
+            description: string;
+            control: "text";
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        'aria-describedBy': {
+            description: string;
+            control: "text";
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        'aria-invalid': {
+            description: string;
+            control: "boolean";
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
 };
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof ColourPickerDropdown>;
 export declare const Default: Story;
+export declare const WithCustomValue: Story;
+export declare const Disabled: Story;
+export declare const WithError: Story;
+export declare const Controlled: Story;
+export declare const InFormField: Story;
+export declare const WithFormFieldAndError: Story;
 //# sourceMappingURL=ColourPickerDropdown.stories.d.ts.map

package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColourPickerDropdown.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI;;;;CAImC,CAAC;AAE9C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC"}
+{"version":3,"file":"ColourPickerDropdown.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAY5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AA6G9D,iBAAS,4BAA4B,4CAmBpC;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFmC,CAAC;AAE9C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAoEnD,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8B7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA8BtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAwCvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAqCxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA+BzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAgCnC,CAAC"}

package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.js

@@ -1,24 +1,401 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
+import { FormField } from '../../../formField/FormField';
 import { ColourPickerDropdown } from './ColourPickerDropdown';
+// ---------------------------------------------------------------------------
+// Docs page content
+// ---------------------------------------------------------------------------
+const DESCRIPTION_INTRO = [
+    'ColourPickerDropdown is a dropdown-triggered colour picker that lets users select any colour from a',
+    'full-spectrum palette, with Hex and RGB input fields for precise entry.',
+    'Built on the [`@uiw/react-color` Sketch picker](https://uiwjs.github.io/react-color/), which provides',
+    'the colour plane, hue slider, Hex/RGB inputs, and preset swatches.',
+    'The dropdown panel renders via a Radix UI portal —',
+    '**do not place inside a container with `overflow: hidden`**.',
+    '',
+    'The trigger renders as a small circular colour swatch inside a dropdown-variant button.',
+    'Selection applies immediately — the swatch updates live as the user picks.',
+    'The panel closes on click outside or `Escape`.',
+].join('\n');
+const USAGE_GUIDANCE = [
+    '### When to use',
+    '',
+    '- Data-driven formatting where users assign a colour to a record — for example, background colours for conditional formatting bands in a marksheet.',
+    '- When users need to match a specific colour exactly by Hex or RGB value.',
+    '- When freedom of colour choice is appropriate and available colours are not predefined.',
+    '',
+    '---',
+    '',
+    '### When NOT to use',
+    '',
+    '| Situation | Use instead |',
+    '|---|---|',
+    '| Status choices ("On track / At risk / Off track") | `SelectDropdown` with named labels — colour alone is not sufficient to communicate status |',
+    '| Small fixed set of meaningful colours | `SelectDropdown` with colour swatches as option labels |',
+    '| Colour could reduce readability (e.g. text colour without contrast checks) | Constrain choices via `SelectDropdown` with an approved palette |',
+].join('\n');
+const DEVELOPER_NOTES = [
+    '### Critical usage patterns',
+    '',
+    '**`onChange` receives a `ColorResult` object, not a plain hex string.** Read the format you need:',
+    '',
+    '```tsx',
+    "import type { ColorResult } from '@uiw/color-convert';",
+    '',
+    '<ColourPickerDropdown',
+    '  value={colour}',
+    '  onChange={(result: ColorResult) => {',
+    "    const hex = result.hex;           // '#3cad51'",
+    '    const { r, g, b } = result.rgb;  // { r: 60, g: 173, b: 81 }',
+    '    setColour(hex);',
+    '  }}',
+    '/>',
+    '```',
+    '',
+    '**`id` is dual-purpose** — it sets the `name` on the hidden `<input>` (for native form submission) AND',
+    'the `id` on the trigger button (for label association via `htmlFor`).',
+    '',
+    '**`hasError` is visual-only.** It changes the trigger button\'s border colour but tells screen readers',
+    'nothing. Always pair it with `aria-invalid={true}`.',
+    '',
+    '**No alpha / transparency support** — `disableAlpha` is hardcoded. The picker never shows an opacity slider.',
+    '',
+    '**Semi-controlled pattern** — the component holds internal state via `useState`, but syncs from the',
+    '`value` prop via `useEffect`. Changing `value` externally (e.g. a form reset) will update the picker.',
+    '',
+    '**`onChange` fires on every picker interaction**, including while sliders are dragged.',
+    'If you update server state in `onChange`, consider debouncing.',
+    '',
+    '**Portal rendering** — the dropdown panel renders via a Radix UI portal outside the trigger\'s DOM subtree.',
+    'Do not place inside `overflow: hidden` or `position: relative` containers.',
+    '',
+    '---',
+    '',
+    '### Accessibility',
+    '',
+    '- The trigger button includes a visually-hidden "Toggle colour picker." label for screen readers.',
+    '- The swatch inside the trigger includes a visually-hidden "current colour: #hex" label that updates live.',
+    '- Always pair `hasError` with `aria-invalid={true}` — one is visual, one is for assistive technology.',
+    '- Use `aria-describedBy` pointing to the `id` of a `FormField.Error` element to provide the error message.',
+    '- The recommended pattern is `<FormField inputType="colourPicker" inputProps={{...}} />` — this wires `hasError`, `aria-invalid`, and `aria-describedby` automatically.',
+    '',
+    '---',
+    '',
+    '### TypeScript types',
+    '',
+    '```tsx',
+    "import type { ColorResult } from '@uiw/color-convert';",
+    "import { ColourPickerDropdown } from '@arbor-education/design-system.components';",
+    '',
+    '// Access colour values in onChange:',
+    'onChange={(result: ColorResult) => {',
+    "  const hex = result.hex;         // '#3cad51'",
+    '  const { r, g, b } = result.rgb; // { r: 60, g: 173, b: 81 }',
+    '}}',
+    '',
+    '// Type your own props using the exported namespace:',
+    'function MyField(props: ColourPickerDropdown.Props) { ... }',
+    '```',
+].join('\n');
+const RELATED_COMPONENTS = [
+    '## Related components',
+    '',
+    '[FormField](?path=/docs/components-formfield--docs) · [SelectDropdown](?path=/docs/components-formfield-inputs-selectdropdown--docs) · [Combobox](?path=/docs/components-combobox--docs)',
+].join('\n');
+const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — tweak any prop to see the story update in real time.';
+function ColourPickerDropdownDocsPage() {
+    return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Interactive example" }), _jsx(Markdown, { children: PROPS_INTRO }), _jsx(DocPrimary, {}), _jsx(Controls, {}), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
+}
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
 const meta = {
     title: 'Components/FormField/Inputs/ColourPickerDropdown',
     component: ColourPickerDropdown,
     tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: {
+            page: ColourPickerDropdownDocsPage,
+        },
+    },
+    argTypes: {
+        'value': {
+            description: [
+                'The current colour value as a hex string (e.g. `\'#3cad51\'`).',
+                'The component holds internal state but syncs from this prop via `useEffect` —',
+                'changing it externally (e.g. a form reset) will update the picker.',
+            ].join(' '),
+            control: { type: 'color' },
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: "'#3cad51'" },
+            },
+        },
+        'onChange': {
+            description: [
+                'Callback fired on every colour change (including while sliders are dragged).',
+                'Receives a `ColorResult` object — read `.hex`, `.rgb`, or `.hsl` off it.',
+            ].join(' '),
+            action: 'onChange',
+            control: false,
+            table: {
+                type: { summary: '(value: ColorResult) => void' },
+            },
+        },
+        'hasError': {
+            description: [
+                'Applies error styling (red border) to the trigger button.',
+                'Visual only — always pair with `aria-invalid` for screen-reader coverage.',
+            ].join(' '),
+            control: 'boolean',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        'disabled': {
+            description: 'When true, the trigger is non-interactive and visually muted.',
+            control: 'boolean',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        'id': {
+            description: [
+                'Dual-purpose: sets the `name` on the hidden `<input>` for native form submission AND',
+                'the `id` on the trigger button for label association via `htmlFor`.',
+            ].join(' '),
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        'aria-describedBy': {
+            description: [
+                'ID of the element describing this field (e.g. a `FormField.Error`).',
+                'Note the capital B — the component maps this to the lowercase `aria-describedby` DOM attribute.',
+            ].join(' '),
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        'aria-invalid': {
+            description: 'Marks the trigger as invalid for screen readers. Use alongside `hasError` and `aria-describedBy`.',
+            control: 'boolean',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+    },
 };
 export default meta;
+// ---------------------------------------------------------------------------
+// Helper: attach a per-story description to docs
+// ---------------------------------------------------------------------------
+const withDescription = (story, description) => ({
+    ...story,
+    parameters: {
+        ...story.parameters,
+        docs: {
+            ...story.parameters?.docs,
+            description: {
+                story: description,
+            },
+        },
+    },
+});
+// ---------------------------------------------------------------------------
+// Template components for stateful and composite stories
+// ---------------------------------------------------------------------------
+const ControlledTemplate = () => {
+    const [colour, setColour] = useState('#3cad51');
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '20rem' }, children: [_jsx(ColourPickerDropdown, { value: colour, onChange: (result) => setColour(result.hex), id: "controlled-colour" }), _jsxs("p", { style: { margin: 0, fontSize: '0.875rem', color: 'var(--color-grey-600)' }, children: ["Selected colour:", ' ', _jsx("code", { children: colour })] })] }));
+};
+const InFormFieldTemplate = () => (_jsx("div", { style: { maxWidth: '20rem' }, children: _jsx(FormField, { label: "Category colour", id: "category-colour", inputType: "colourPicker", inputProps: { value: '#3cad51' } }) }));
+const WithFormFieldAndErrorTemplate = () => (_jsx("div", { style: { maxWidth: '20rem' }, children: _jsx(FormField, { label: "Background colour", id: "background-colour", inputType: "colourPicker", errorText: "Please choose a background colour.", inputProps: { value: '#3cad51' } }) }));
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
 export const Default = {
     args: {
         value: '#3cad51',
-        onChange: (value) => { console.log(value); },
     },
-    argTypes: {
-        value: {
-            control: 'color',
-            description: 'The colour to display in the preview',
+    render: args => (_jsx("div", { style: { maxWidth: '20rem' }, children: _jsx(ColourPickerDropdown, { ...args }) })),
+};
+export const WithCustomValue = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { ColourPickerDropdown } from '@arbor-education/design-system.components';
+
+function WithCustomValueExample() {
+  return (
+    <div style={{ maxWidth: '20rem' }}>
+      <ColourPickerDropdown value="#e84393" id="highlight-colour" />
+    </div>
+  );
+}
+
+export default WithCustomValueExample;
+          `.trim(),
+            },
         },
-        onChange: {
-            action: 'changed',
-            description: 'The function to call when the colour is changed',
+    },
+    render: () => (_jsx("div", { style: { maxWidth: '20rem' }, children: _jsx(ColourPickerDropdown, { value: "#e84393", id: "highlight-colour" }) })),
+}, 'Pass any valid hex string to `value` to pre-seed the picker with a specific colour. The swatch in the trigger updates immediately.');
+export const Disabled = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { ColourPickerDropdown } from '@arbor-education/design-system.components';
+
+function DisabledExample() {
+  return (
+    <div style={{ maxWidth: '20rem' }}>
+      <ColourPickerDropdown value="#3cad51" disabled id="disabled-colour" />
+    </div>
+  );
+}
+
+export default DisabledExample;
+          `.trim(),
+            },
         },
     },
-};
+    render: () => (_jsx("div", { style: { maxWidth: '20rem' }, children: _jsx(ColourPickerDropdown, { value: "#3cad51", disabled: true, id: "disabled-colour" }) })),
+}, 'When `disabled` is true the trigger is non-interactive and visually muted. The colour swatch is still visible so the current value remains clear.');
+export const WithError = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { ColourPickerDropdown } from '@arbor-education/design-system.components';
+
+function WithErrorExample() {
+  return (
+    <div style={{ maxWidth: '20rem' }}>
+      <ColourPickerDropdown
+        value="#3cad51"
+        hasError
+        aria-invalid
+        id="colour-with-error"
+      />
+    </div>
+  );
+}
+
+export default WithErrorExample;
+          `.trim(),
+            },
+        },
+    },
+    render: () => (_jsx("div", { style: { maxWidth: '20rem' }, children: _jsx(ColourPickerDropdown, { value: "#3cad51", hasError: true, "aria-invalid": true, id: "colour-with-error" }) })),
+}, 'Both `hasError` (red border on the trigger) and `aria-invalid` (screen-reader announcement) must be set together for a complete error treatment. Neither alone is sufficient.');
+export const Controlled = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { useState } from 'react';
+import type { ColorResult } from '@uiw/color-convert';
+import { ColourPickerDropdown } from '@arbor-education/design-system.components';
+
+function ControlledExample() {
+  const [colour, setColour] = useState('#3cad51');
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '20rem' }}>
+      <ColourPickerDropdown
+        value={colour}
+        onChange={(result: ColorResult) => setColour(result.hex)}
+        id="controlled-colour"
+      />
+      <p style={{ margin: 0, fontSize: '0.875rem' }}>
+        Selected colour: <code>{colour}</code>
+      </p>
+    </div>
+  );
+}
+
+export default ControlledExample;
+          `.trim(),
+            },
+        },
+    },
+    render: () => _jsx(ControlledTemplate, {}),
+}, '`onChange` receives a `ColorResult` object — read `.hex` off it to keep your own state in sync. The selected hex value is reflected live beneath the picker.');
+export const InFormField = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { FormField } from '@arbor-education/design-system.components';
+
+function InFormFieldExample() {
+  return (
+    <div style={{ maxWidth: '20rem' }}>
+      <FormField
+        label="Category colour"
+        id="category-colour"
+        inputType="colourPicker"
+        inputProps={{ value: '#3cad51' }}
+      />
+    </div>
+  );
+}
+
+export default InFormFieldExample;
+          `.trim(),
+            },
+        },
+    },
+    render: () => _jsx(InFormFieldTemplate, {}),
+}, 'The recommended usage pattern — `FormField` with `inputType="colourPicker"` auto-wires the label, `hasError`, `aria-invalid`, and `aria-describedby`. No manual prop threading required.');
+export const WithFormFieldAndError = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { FormField } from '@arbor-education/design-system.components';
+
+function WithFormFieldAndErrorExample() {
+  return (
+    <div style={{ maxWidth: '20rem' }}>
+      <FormField
+        label="Background colour"
+        id="background-colour"
+        inputType="colourPicker"
+        errorText="Please choose a background colour."
+        inputProps={{ value: '#3cad51' }}
+      />
+    </div>
+  );
+}
+
+export default WithFormFieldAndErrorExample;
+          `.trim(),
+            },
+        },
+    },
+    render: () => _jsx(WithFormFieldAndErrorTemplate, {}),
+}, 'The full error treatment via `FormField` — setting `errorText` automatically passes `hasError`, `aria-invalid`, and `aria-describedby` to the picker. No manual prop threading required.');
 //# sourceMappingURL=ColourPickerDropdown.stories.js.map

package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColourPickerDropdown.stories.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,kDAAkD;IACzD,SAAS,EAAE,oBAAoB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;CACyB,CAAC;AAE9C,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,CAAC,KAAkB,EAAE,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;KAC1D;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,sCAAsC;SACpD;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,iDAAiD;SAC/D;KACF;CACF,CAAC"}
+{"version":3,"file":"ColourPickerDropdown.stories.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EACL,QAAQ,EACR,OAAO,IAAI,UAAU,EACrB,QAAQ,EACR,OAAO,IAAI,UAAU,EACrB,OAAO,EACP,QAAQ,EACR,KAAK,GACN,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,8EAA8E;AAC9E,oBAAoB;AACpB,8EAA8E;AAE9E,MAAM,iBAAiB,GAAG;IACxB,qGAAqG;IACrG,yEAAyE;IACzE,uGAAuG;IACvG,oEAAoE;IACpE,oDAAoD;IACpD,8DAA8D;IAC9D,EAAE;IACF,yFAAyF;IACzF,4EAA4E;IAC5E,gDAAgD;CACjD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,cAAc,GAAG;IACrB,iBAAiB;IACjB,EAAE;IACF,qJAAqJ;IACrJ,2EAA2E;IAC3E,0FAA0F;IAC1F,EAAE;IACF,KAAK;IACL,EAAE;IACF,qBAAqB;IACrB,EAAE;IACF,6BAA6B;IAC7B,WAAW;IACX,mJAAmJ;IACnJ,oGAAoG;IACpG,kJAAkJ;CACnJ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,eAAe,GAAG;IACtB,6BAA6B;IAC7B,EAAE;IACF,mGAAmG;IACnG,EAAE;IACF,QAAQ;IACR,wDAAwD;IACxD,EAAE;IACF,uBAAuB;IACvB,kBAAkB;IAClB,wCAAwC;IACxC,oDAAoD;IACpD,kEAAkE;IAClE,qBAAqB;IACrB,MAAM;IACN,IAAI;IACJ,KAAK;IACL,EAAE;IACF,wGAAwG;IACxG,uEAAuE;IACvE,EAAE;IACF,wGAAwG;IACxG,qDAAqD;IACrD,EAAE;IACF,8GAA8G;IAC9G,EAAE;IACF,qGAAqG;IACrG,uGAAuG;IACvG,EAAE;IACF,wFAAwF;IACxF,gEAAgE;IAChE,EAAE;IACF,6GAA6G;IAC7G,4EAA4E;IAC5E,EAAE;IACF,KAAK;IACL,EAAE;IACF,mBAAmB;IACnB,EAAE;IACF,mGAAmG;IACnG,4GAA4G;IAC5G,uGAAuG;IACvG,4GAA4G;IAC5G,yKAAyK;IACzK,EAAE;IACF,KAAK;IACL,EAAE;IACF,sBAAsB;IACtB,EAAE;IACF,QAAQ;IACR,wDAAwD;IACxD,mFAAmF;IACnF,EAAE;IACF,sCAAsC;IACtC,sCAAsC;IACtC,gDAAgD;IAChD,+DAA+D;IAC/D,IAAI;IACJ,EAAE;IACF,sDAAsD;IACtD,6DAA6D;IAC7D,KAAK;CACN,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,kBAAkB,GAAG;IACzB,uBAAuB;IACvB,EAAE;IACF,0LAA0L;CAC3L,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,WAAW,GAAG,6GAA6G,CAAC;AAElI,SAAS,4BAA4B;IACnC,OAAO,CACL,8BACE,KAAC,KAAK,KAAG,EACT,KAAC,QAAQ,KAAG,EACZ,KAAC,QAAQ,cAAE,iBAAiB,GAAY,EACxC,KAAC,UAAU,sCAAiC,EAC5C,KAAC,QAAQ,cAAE,WAAW,GAAY,EAClC,KAAC,UAAU,KAAG,EACd,KAAC,QAAQ,KAAG,EACZ,KAAC,UAAU,iCAA4B,EACvC,KAAC,QAAQ,cAAE,cAAc,GAAY,EACrC,KAAC,UAAU,kCAA6B,EACxC,KAAC,QAAQ,cAAE,eAAe,GAAY,EACtC,KAAC,UAAU,2BAAsB,EACjC,KAAC,OAAO,IAAC,KAAK,EAAC,EAAE,GAAG,EACpB,KAAC,QAAQ,cAAE,kBAAkB,GAAY,IACxC,CACJ,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,OAAO;AACP,8EAA8E;AAE9E,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,kDAAkD;IACzD,SAAS,EAAE,oBAAoB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE;YACJ,IAAI,EAAE,4BAA4B;SACnC;KACF;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,WAAW,EAAE;gBACX,gEAAgE;gBAChE,+EAA+E;gBAC/E,oEAAoE;aACrE,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF;QACD,UAAU,EAAE;YACV,WAAW,EAAE;gBACX,8EAA8E;gBAC9E,0EAA0E;aAC3E,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,MAAM,EAAE,UAAU;YAClB,OAAO,EAAE,KAAK;YACd,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,8BAA8B,EAAE;aAClD;SACF;QACD,UAAU,EAAE;YACV,WAAW,EAAE;gBACX,2DAA2D;gBAC3D,2EAA2E;aAC5E,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,UAAU,EAAE;YACV,WAAW,EAAE,+DAA+D;YAC5E,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,sFAAsF;gBACtF,qEAAqE;aACtE,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE;gBACX,qEAAqE;gBACrE,iGAAiG;aAClG,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF;QACD,cAAc,EAAE;YACd,WAAW,EAAE,mGAAmG;YAChH,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;KACF;CAC0C,CAAC;AAE9C,eAAe,IAAI,CAAC;AAGpB,8EAA8E;AAC9E,iDAAiD;AACjD,8EAA8E;AAE9E,MAAM,eAAe,GAAG,CAAC,KAAY,EAAE,WAAmB,EAAS,EAAE,CAAC,CAAC;IACrE,GAAG,KAAK;IACR,UAAU,EAAE;QACV,GAAG,KAAK,CAAC,UAAU;QACnB,IAAI,EAAE;YACJ,GAAG,KAAK,CAAC,UAAU,EAAE,IAAI;YACzB,WAAW,EAAE;gBACX,KAAK,EAAE,WAAW;aACnB;SACF;KACF;CACF,CAAC,CAAC;AAEH,8EAA8E;AAC9E,yDAAyD;AACzD,8EAA8E;AAE9E,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAChD,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,aACtF,KAAC,oBAAoB,IACnB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,CAAC,MAAmB,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,EACxD,EAAE,EAAC,mBAAmB,GACtB,EACF,aAAG,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,uBAAuB,EAAE,iCAE1E,GAAG,EACJ,yBAAO,MAAM,GAAQ,IACnB,IACA,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAChC,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAC/B,KAAC,SAAS,IACR,KAAK,EAAC,iBAAiB,EACvB,EAAE,EAAC,iBAAiB,EACpB,SAAS,EAAC,cAAc,EACxB,UAAU,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,GAChC,GACE,CACP,CAAC;AAEF,MAAM,6BAA6B,GAAG,GAAG,EAAE,CAAC,CAC1C,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAC/B,KAAC,SAAS,IACR,KAAK,EAAC,mBAAmB,EACzB,EAAE,EAAC,mBAAmB,EACtB,SAAS,EAAC,cAAc,EACxB,SAAS,EAAC,oCAAoC,EAC9C,UAAU,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,GAChC,GACE,CACP,CAAC;AAEF,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;KACjB;IACD,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAC/B,KAAC,oBAAoB,OAAK,IAAI,GAAI,GAC9B,CACP;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU,eAAe,CACnD;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;WAYL,CAAC,IAAI,EAAE;aACT;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAC/B,KAAC,oBAAoB,IAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,kBAAkB,GAAG,GAC1D,CACP;CACF,EACD,oIAAoI,CACrI,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU,eAAe,CAC5C;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;WAYL,CAAC,IAAI,EAAE;aACT;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAC/B,KAAC,oBAAoB,IAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,QAAC,EAAE,EAAC,iBAAiB,GAAG,GAClE,CACP;CACF,EACD,mJAAmJ,CACpJ,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU,eAAe,CAC7C;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;WAiBL,CAAC,IAAI,EAAE;aACT;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAC/B,KAAC,oBAAoB,IACnB,KAAK,EAAC,SAAS,EACf,QAAQ,8BAER,EAAE,EAAC,mBAAmB,GACtB,GACE,CACP;CACF,EACD,+KAA+K,CAChL,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU,eAAe,CAC9C;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;WAuBL,CAAC,IAAI,EAAE;aACT;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,kBAAkB,KAAG;CACrC,EACD,8JAA8J,CAC/J,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU,eAAe,CAC/C;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;WAiBL,CAAC,IAAI,EAAE;aACT;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,mBAAmB,KAAG;CACtC,EACD,0LAA0L,CAC3L,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAU,eAAe,CACzD;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;WAkBL,CAAC,IAAI,EAAE;aACT;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,6BAA6B,KAAG;CAChD,EACD,0LAA0L,CAC3L,CAAC"}

package/dist/components/formField/inputs/number/NumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/number/NumberInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiD,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEhG,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE1C,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAyHlD,CAAC;AAEF,yBAAiB,WAAW,CAAC;IAC3B,KAAY,KAAK,GAAG,gBAAgB,CAAC;CACtC"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/number/NumberInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiD,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEhG,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE1C,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAwIlD,CAAC;AAEF,yBAAiB,WAAW,CAAC;IAC3B,KAAY,KAAK,GAAG,gBAAgB,CAAC;CACtC"}

package/dist/components/formField/inputs/number/NumberInput.js

@@ -4,7 +4,7 @@ import { Icon } from '../../../icon/Icon';
 import Decimal from 'decimal.js';
 import { useEffect, useRef, useState } from 'react';
 export const NumberInput = (props) => {
-    const { hasError, className = '', disabled, onChange, defaultValue = '', step = 1, min = -Infinity, max = Infinity, disableSpinners, containerClassName, value: passedValue = '', ...rest } = props;
+    const { hasError, className = '', disabled, onChange, defaultValue = '', step = 1, min = -Infinity, max = Infinity, disableSpinners, containerClassName, value: passedValue = '', onKeyDown, ...rest } = props;
     const [value, setValue] = useState(defaultValue.toString() || passedValue.toString());
     const inputRef = useRef(null);
     useEffect(() => {
@@ -45,9 +45,21 @@ export const NumberInput = (props) => {
     const handleOnBlur = () => {
         checkOverOrUnderMaxOrMin(value);
     };
+    const handleOnKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            handleOnBlur();
+        }
+        if (e.key === 'ArrowUp') {
+            handleSpinner(step);
+        }
+        if (e.key === 'ArrowDown') {
+            handleSpinner(-step);
+        }
+        onKeyDown?.(e);
+    };
     return (_jsxs("div", { className: classNames('ds-number-input__container', {
             'ds-number-input__container--error': hasError,
             'ds-number-input__container--disabled': disabled,
-        }, containerClassName), children: [!disableSpinners && (_jsx("button", { className: "ds-number-input__spinner-button", type: "button", disabled: disabled || (Number(value) <= Number(min)), onClick: () => handleSpinner(-step), "aria-label": "Minus button", "data-testid": "minus-button", children: _jsx(Icon, { name: "minus", size: 12 }) })), _jsx("input", { ref: inputRef, type: "text", inputMode: "numeric", autoComplete: "off", pattern: "^[+\\-]?\\d+(,\\d{2})?", className: inputClasses, disabled: disabled, defaultValue: defaultValue, onChange: (e) => handleOnChange(e.currentTarget.value), onBlur: handleOnBlur, step: step, min: min, max: max, ...rest }), !disableSpinners && (_jsx("button", { className: "ds-number-input__spinner-button", type: "button", disabled: disabled || (Number(value) >= Number(max)), onClick: () => handleSpinner(step), "aria-label": "Plus button", "data-testid": "plus-button", children: _jsx(Icon, { name: "plus", size: 12 }) }))] }));
+        }, containerClassName), children: [!disableSpinners && (_jsx("button", { className: "ds-number-input__spinner-button", type: "button", disabled: disabled || (Number(value) <= Number(min)), onClick: () => handleSpinner(-step), "aria-label": "Minus button", "data-testid": "minus-button", children: _jsx(Icon, { name: "minus", size: 12 }) })), _jsx("input", { ref: inputRef, type: "text", inputMode: "numeric", autoComplete: "off", pattern: "^[+\\-]?\\d+(,\\d{2})?", className: inputClasses, disabled: disabled, defaultValue: defaultValue, onChange: (e) => handleOnChange(e.currentTarget.value), onBlur: handleOnBlur, onKeyDown: handleOnKeyDown, step: step, min: min, max: max, ...rest }), !disableSpinners && (_jsx("button", { className: "ds-number-input__spinner-button", type: "button", disabled: disabled || (Number(value) >= Number(max)), onClick: () => handleSpinner(step), "aria-label": "Plus button", "data-testid": "plus-button", children: _jsx(Icon, { name: "plus", size: 12 }) }))] }));
 };
 //# sourceMappingURL=NumberInput.js.map

package/dist/components/formField/inputs/number/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/number/NumberInput.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAA8C,MAAM,OAAO,CAAC;AAQhG,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACrD,MAAM,EACJ,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,EAAE,EACjB,IAAI,GAAG,CAAC,EACR,GAAG,GAAG,CAAC,QAAQ,EACf,GAAG,GAAG,QAAQ,EACd,eAAe,EACf,kBAAkB,EAClB,KAAK,EAAE,WAAW,GAAG,EAAE,EACvB,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,YAAY,CAAC,QAAQ,EAAE,IAAI,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC9F,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;YAC/B,QAAQ,EAAE,CAAC,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,EAAmC,CAAC,CAAC;QAC5E,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,YAAY,GAAG,UAAU,CAC7B,UAAU,EACV,iBAAiB,EACjB,SAAS,CACV,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC1C,IAAI,QAAQ,KAAK,KAAK,EAAE,CAAC;YACvB,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,wBAAwB,GAAG,CAAC,QAAgB,EAAE,EAAE;QACpD,MAAM,YAAY,GAAG,IAAI,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC;QAChD,MAAM,UAAU,GAAG,IAAI,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;QACzC,MAAM,UAAU,GAAG,IAAI,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;QAEzC,IAAI,YAAY,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;YACtC,OAAO,cAAc,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxC,CAAC;QACD,IAAI,YAAY,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,CAAC;YACzC,OAAO,cAAc,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxC,CAAC;QACD,OAAO,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,IAAqB,EAAE,EAAE;QAC9C,MAAM,YAAY,GAAG,IAAI,OAAO,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;QAC7C,MAAM,WAAW,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;QACtC,MAAM,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,QAAQ,EAAE,CAAC;QAC3D,wBAAwB,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,wBAAwB,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,CAAC,4BAA4B,EAAE;YACvD,mCAAmC,EAAE,QAAQ;YAC7C,sCAAsC,EAAE,QAAQ;SACjD,EACD,kBAAkB,CAAC,aAEhB,CAAC,eAAe,IAAI,CACnB,iBACE,SAAS,EAAC,iCAAiC,EAC3C,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,gBACxB,cAAc,iBACb,cAAc,YAE1B,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,GAAI,GACxB,CACV,EAED,gBACE,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,SAAS,EACnB,YAAY,EAAC,KAAK,EAClB,OAAO,EAAC,wBAAqB,EAC7B,SAAS,EAAE,YAAY,EACvB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,EACrF,MAAM,EAAE,YAAY,EACpB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,KACJ,IAAI,GACR,EAED,CAAC,eAAe,IAAI,CACnB,iBACE,SAAS,EAAC,iCAAiC,EAC3C,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,gBACvB,aAAa,iBACZ,aAAa,YAEzB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,GAAI,GACvB,CACV,IACG,CAEP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/number/NumberInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/formField/inputs/number/NumberInput.test.js

@@ -26,6 +26,27 @@ describe('NumberInput component', () => {
         fireEvent.click(screen.getByLabelText('Plus button'));
         expect(inputElement.value).toBe('12');
     });
+    describe('Keyboard controls', () => {
+        test('pressing Enter validates and clamps value to max', () => {
+            render(_jsx(NumberInput, { placeholder: "Enter a number", defaultValue: "5", min: 0, max: 10 }));
+            const inputElement = screen.getByPlaceholderText('Enter a number');
+            fireEvent.change(inputElement, { target: { value: '12' } });
+            fireEvent.keyDown(inputElement, { key: 'Enter' });
+            expect(inputElement.value).toBe('10');
+        });
+        test('ArrowUp increments by step', () => {
+            render(_jsx(NumberInput, { placeholder: "Enter a number", defaultValue: "10", step: 2 }));
+            const inputElement = screen.getByPlaceholderText('Enter a number');
+            fireEvent.keyDown(inputElement, { key: 'ArrowUp' });
+            expect(inputElement.value).toBe('12');
+        });
+        test('ArrowDown decrements by step', () => {
+            render(_jsx(NumberInput, { placeholder: "Enter a number", defaultValue: "10", step: 2 }));
+            const inputElement = screen.getByPlaceholderText('Enter a number');
+            fireEvent.keyDown(inputElement, { key: 'ArrowDown' });
+            expect(inputElement.value).toBe('8');
+        });
+    });
     describe('Decimal value handling', () => {
         test('handles decimal step values correctly', () => {
             render(_jsx(NumberInput, { placeholder: "Enter a number", defaultValue: "0.5", step: 0.1 }));