@maxio-com/react-ui-components 9.28.0 → 9.29.1

package/dist/skills/maxio-react/SKILL.md

@@ -42,6 +42,7 @@ Use this skill to build React components using `@maxio-com/react-ui-components`.
 - [Components / Forms / DateField](references/components-forms-datefield.md)
 - [Components / Forms / DatePicker](references/components-forms-datepicker.md)
 - [Components / Forms / DateRangePicker](references/components-forms-daterangepicker.md)
+- [Components / Forms / NumberField](references/components-forms-numberfield.md)
 - [Components / Forms / Radio Group](references/components-forms-radio-group.md)
 - [Components / Forms / SearchField](references/components-forms-searchfield.md)
 - [Components / Forms / Select](references/components-forms-select.md)

package/dist/skills/maxio-react/references/components-forms-numberfield.md

@@ -0,0 +1,246 @@
+# NumberField
+
+## Usage Guidelines
+
+### Overview
+
+NumberField lets users enter or edit a numeric value in a form, with
+optional stepper buttons to increment or decrement the value. The native
+browser spin buttons are hidden in favor of the stepper, which is off by
+default.
+
+#### When to Use
+
+- Use when users need to enter a numeric value, such as a quantity, limit, or count.
+- Use the stepper (`showStepper`) when incrementing or decrementing by a fixed step is a common interaction.
+- Use `minValue`, `maxValue`, and `step` to constrain the accepted values.
+- Use with a leading element for a compact unit or currency symbol.
+
+#### When Not to Use
+
+- Do not use for free-form text. Use TextField instead.
+- Do not use for values that are not truly numeric, such as phone numbers or postal codes. Use TextField with the appropriate `type`.
+- Do not rely on the stepper as the only way to change the value; the input must remain directly editable.
+
+### Variants
+
+| Variants | Purpose                                       | Usage notes                                                |
+| :------- | :-------------------------------------------- | :--------------------------------------------------------- |
+| `sm`     | Compact field for dense interfaces.           | Use where form density is high and labels remain readable. |
+| `md`     | Default field size.                           | Use for most forms.                                        |
+| `lg`     | Larger field for prominent form rows.         | Use sparingly when the field needs more visual emphasis.   |
+| `xl`     | Field with integrated label and helper/error. | Use when the field needs a stronger contained treatment.   |
+
+### Behavior
+
+- **Mouse and touch**: Users can place the cursor in the field, select text, and use the stepper buttons when `showStepper` is enabled.
+- **Keyboard**: Users tab to the input, type a numeric value, and use the up/down arrow keys to increment or decrement.
+- **Native spin buttons**: The underlying input renders as `type="text"` with `inputmode="numeric"` (not `type="number"`), so there is no native browser spin button. Use `showStepper` to opt into the custom stepper instead.
+- **Controlled state**: Use `value` and `onChange` when product state owns the value. Use `defaultValue` for simple uncontrolled form fields.
+- **Change timing**: `onChange` fires with a `number` when the user finishes editing (on blur, increment, or decrement), not on every keystroke.
+- **Validation**: Use `minValue`/`maxValue` for range constraints, and show `errorMessage` after users submit, blur the field, or otherwise finish interacting.
+
+### Accessibility
+
+- Provide a visible `label` whenever possible. Use `aria-label` or `aria-labelledby` only when a visible label is not available.
+- Use `description` for helper text and `errorMessage` for validation feedback.
+- Pair invalid values with `isInvalid` and an actionable `errorMessage`.
+- The stepper buttons have accessible names ("Increment"/"Decrement") by default; override them with `incrementAriaLabel`/`decrementAriaLabel` when more context is needed.
+- Do not rely on color alone to communicate validation, disabled, or read-only state.
+
+### Content
+
+- Write labels as short nouns, such as "Quantity" or "Collection limit".
+- Use helper text for constraints that prevent errors, such as the accepted range.
+- Write error messages that name the problem and recovery step, such as "Enter a number between 1 and 99."
+
+### Related
+
+- **[TextField](components-forms-textfield.md)**: use for free-form text, including numeric-looking values that are not truly numbers (phone numbers, postal codes).
+- **[TextInput](deprecated-textinput.md)**: deprecated predecessor. Use NumberField for new `type="number"` usage.
+- **[Migrating from TextInput to TextField](migration-guides-v9.md)**: prop mapping and checklist for replacing legacy TextInput usage.
+
+## React
+
+```tsx
+import { NumberField } from '@maxio-com/react-ui-components';
+```
+
+### State Management
+
+Use controlled state when product logic needs to validate, transform, save,
+or share the current value.
+
+#### Controlled
+
+```tsx
+const [value, setValue] = React.useState(1);
+
+<NumberField label="Quantity" value={value} onChange={setValue} />;
+```
+
+#### Uncontrolled
+
+```tsx
+<NumberField label="Quantity" defaultValue={1} />
+```
+
+### Stepper
+
+Enable `showStepper` to render increment and decrement buttons. Use
+`minValue`, `maxValue`, and `step` to constrain the value.
+
+```tsx
+<NumberField
+  label="Cookies to buy"
+  defaultValue={1}
+  minValue={0}
+  maxValue={99}
+  showStepper
+/>
+```
+
+## Imports
+
+```tsx
+import { Body, Grid, Icon, NumberField } from "@maxio-com/react-ui-components";
+```
+
+## Prop Types
+
+### NumberField
+
+| Prop | Type | Required | Default | Description | Source |
+| --- | --- | --- | --- | --- | --- |
+| `className` | `string` | no | - | Additional class name for the number field container | NumberFieldProps |
+| `description` | `string` | no | - | Description for the number field. It will not be visible if there is an error message. | NumberFieldProps |
+| `errorMessage` | `string` | no | - | Error message for the number field | NumberFieldProps |
+| `fullWidth` | `boolean` | no | - | Ensures the input spans the full width of its parent | NumberFieldProps |
+| `label` | `string` | no | - | Label for the number field | NumberFieldProps |
+| `leadingElement` | `ReactNode` | no | `null` | Leading element for the number field | NumberFieldProps |
+| `placeholder` | `string` | no | - | Temporary text that occupies the number field when it is empty. | NumberFieldProps |
+| `showStepper` | `boolean` | no | `false` | Shows increment and decrement stepper buttons | NumberFieldProps |
+| `size` | `"sm" \| "md" \| "lg" \| "xl"` | no | `md` | Size of the number field | NumberFieldProps |
+| `trailingElement` | `ReactNode` | no | `null` | Trailing element for the number field. Rendered alongside the stepper when `showStepper` is enabled. | NumberFieldProps |
+
+## Stories
+
+### Default
+
+Provide a visible label and use placeholder text only as an example of the
+expected value. Use controlled state when product logic needs to validate,
+transform, save, or share the current value; use defaultValue when the
+field can be read from a form submit or ref.
+
+```tsx
+const Default = () => <NumberField label="Quantity" placeholder="0" onChange={action('onChange')} />;
+```
+
+### Stepper
+
+Use the stepper when incrementing or decrementing by a fixed step is a
+common interaction, such as adjusting a quantity.
+
+```tsx
+const Stepper = () => <NumberField
+    label="Cookies to buy"
+    defaultValue={1}
+    minValue={0}
+    maxValue={99}
+    showStepper
+    onChange={action('onChange')} />;
+```
+
+### With Description
+
+Use description text for helper content that users need before typing,
+such as expected format or constraint.
+
+```tsx
+const WithDescription = () => <NumberField
+    label="Number of days in advance"
+    description="Proforma invoices are generated this many days before the due date."
+    onChange={action('onChange')} />;
+```
+
+### With Leading Element
+
+Use a leading element for compact units or currency symbols.
+
+```tsx
+const WithLeadingElement = () => <NumberField
+    label="Credit card collection limit"
+    placeholder="No limit"
+    onChange={action('onChange')}
+    leadingElement={<Icon variant="credit-card" />}
+    formatOptions={{
+      style: 'currency',
+      currency: 'GBP',
+    }} />;
+```
+
+### With Trailing Element
+
+Use a trailing element for compact units or currency symbols.
+
+```tsx
+const WithTrailingElement = () => <NumberField
+    label="Price"
+    placeholder="0.00"
+    onChange={action('onChange')}
+    trailingElement={<Body size="xs">per unit</Body>} />;
+```
+
+### Validation
+
+Use errorMessage with isInvalid so assistive technology receives invalid
+state and users get actionable validation feedback.
+
+```tsx
+const Validation = () => <NumberField
+    label="Proforma invoice start number"
+    isInvalid
+    errorMessage="Must be at least 1."
+    onChange={action('onChange')} />;
+```
+
+### Disabled
+
+Use disabled fields when the value is unavailable and users cannot act on
+it in the current context.
+
+```tsx
+const Disabled = () => <NumberField label="Quantity" isDisabled />;
+```
+
+### Read Only
+
+Use read-only fields when the value should remain selectable and readable
+but cannot be edited.
+
+```tsx
+const ReadOnly = () => <NumberField label="Account ID" value={12345} isReadOnly />;
+```
+
+### Sizes
+
+Use size to match the density and prominence of the surrounding form.
+
+```tsx
+const Sizes = (args) => (
+  <Grid gap={4}>
+    {(['sm', 'md', 'lg', 'xl'] as const).map((size) => (
+      <NumberField key={size} {...args} size={size} />
+    ))}
+  </Grid>
+);
+```
+
+### Full Width
+
+Use fullWidth in stacked forms and responsive layouts where the field
+should fill the available parent width.
+
+```tsx
+const FullWidth = () => <NumberField label="Quantity" placeholder="0" fullWidth onChange={action('onChange')} />;
+```

package/dist/temporary-typings/src/components/forms/NumberField/NumberField.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { NumberFieldProps } from './types';
+declare const NumberField: React.ForwardRefExoticComponent<NumberFieldProps & React.RefAttributes<HTMLInputElement>>;
+export default NumberField;
+//# sourceMappingURL=NumberField.d.ts.map

package/dist/temporary-typings/src/components/forms/NumberField/NumberField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/forms/NumberField/NumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAY1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,QAAA,MAAM,WAAW,2FA2GhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/temporary-typings/src/components/forms/NumberField/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './NumberField';
+export type { NumberFieldProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/temporary-typings/src/components/forms/NumberField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/forms/NumberField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

package/dist/temporary-typings/src/components/forms/NumberField/types.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';
+export interface NumberFieldProps extends Omit<AriaNumberFieldProps, 'children' | 'className'> {
+    label?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    fullWidth?: boolean;
+    description?: string;
+    errorMessage?: string;
+    leadingElement?: ReactNode;
+    trailingElement?: ReactNode;
+    showStepper?: boolean;
+    className?: string;
+    placeholder?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/temporary-typings/src/components/forms/NumberField/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/forms/NumberField/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAEtF,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,oBAAoB,EACpB,UAAU,GAAG,WAAW,CACzB;IAIC,KAAK,CAAC,EAAE,MAAM,CAAC;IAIf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAIjC,SAAS,CAAC,EAAE,OAAO,CAAC;IAIpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAIrB,YAAY,CAAC,EAAE,MAAM,CAAC;IAItB,cAAc,CAAC,EAAE,SAAS,CAAC;IAI3B,eAAe,CAAC,EAAE,SAAS,CAAC;IAI5B,WAAW,CAAC,EAAE,OAAO,CAAC;IAItB,SAAS,CAAC,EAAE,MAAM,CAAC;IAInB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/temporary-typings/src/components/forms/index.d.ts

@@ -6,6 +6,8 @@ export { default as SearchField } from './SearchField';
 export type { SearchFieldProps } from './SearchField';
 export { default as TextField } from './TextField';
 export type { TextFieldProps } from './TextField';
+export { default as NumberField } from './NumberField';
+export type { NumberFieldProps } from './NumberField';
 export { default as TextArea } from './TextArea';
 export type { TextAreaProps } from './TextArea';
 export { default as TextInput } from './TextInput';

package/dist/temporary-typings/src/components/forms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/temporary-typings/src/components/index.d.ts

@@ -29,17 +29,17 @@ import Tooltip from './Tooltip';
 import TooltipTrigger from './TooltipTrigger';
 import TopBar from './TopBar';
 import { Body, Code, Display, Heading, Label } from './Typography';
-import { Checkbox, CheckboxGroup, ComboBox, FormErrorMessage, FormHelperText, Radio, RadioGroup, SearchField, Select, TextArea, TextField, TextInput } from './forms';
+import { Checkbox, CheckboxGroup, ComboBox, FormErrorMessage, FormHelperText, NumberField, Radio, RadioGroup, SearchField, Select, TextArea, TextField, TextInput } from './forms';
 import { Chip } from './Chip';
 import { Flex } from './Flex';
 import { Grid } from './Grid';
 import { ListBox } from './ListBox';
-export { ActionList, Drawer, Alert, Avatar, Banner, Body, Card, Breadcrumbs, BreadcrumbsItem, Button, Checkbox, CheckboxGroup, Code, ComboBox, CopyToClipboard, createColumnHelper, DataTable, Display, EmptyState, FormErrorMessage, FormHelperText, Heading, Icon, IconButton, Label, Link, LoadingSpinner, Logo, Menu, MenuButton, MenuList, OverlayTrigger, Pagination, Popover, DialogTrigger, Pressable, ProgressBar, Radio, RadioGroup, SearchField, Select, SegmentedControl, SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, TextArea, TextField, TextInput, Tile, ToastProvider, GlobalToastProvider, useToast, ToastQueue, Toggle, Tooltip, TooltipTrigger, TopBar, Chip, Flex, Grid, ListBox, };
+export { ActionList, Drawer, Alert, Avatar, Banner, Body, Card, Breadcrumbs, BreadcrumbsItem, Button, Checkbox, CheckboxGroup, Code, ComboBox, CopyToClipboard, createColumnHelper, DataTable, Display, EmptyState, FormErrorMessage, FormHelperText, Heading, Icon, IconButton, Label, Link, LoadingSpinner, Logo, Menu, MenuButton, MenuList, NumberField, OverlayTrigger, Pagination, Popover, DialogTrigger, Pressable, ProgressBar, Radio, RadioGroup, SearchField, Select, SegmentedControl, SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, TextArea, TextField, TextInput, Tile, ToastProvider, GlobalToastProvider, useToast, ToastQueue, Toggle, Tooltip, TooltipTrigger, TopBar, Chip, Flex, Grid, ListBox, };
 export type { PopoverProps } from './Popover/types';
 export type { DrawerProps } from './Drawer/types';
 export type { CopyToClipboardProps, CopyToClipboardSize, CopyToClipboardVariant, } from './CopyToClipboard';
 export type { EmptyStateHeadingLevel, EmptyStateProps } from './EmptyState';
-export type { ComboBoxProps, SearchFieldProps, TextAreaProps, TextFieldProps, TextInputProps, } from './forms';
+export type { ComboBoxProps, NumberFieldProps, SearchFieldProps, TextAreaProps, TextFieldProps, TextInputProps, } from './forms';
 export type { SegmentedControlItemProps, SegmentedControlProps, SegmentedControlSize, } from './SegmentedControl';
 export { Calendar } from './Calendar';
 export type { CalendarProps } from './Calendar';
@@ -50,5 +50,5 @@ export type { DateFieldProps } from './forms/DateField';
 export { DatePicker } from './forms/DatePicker';
 export type { DatePickerProps, DatePreset } from './forms/DatePicker';
 export { DateRangePicker } from './forms/DateRangePicker';
-export type { DateRangePickerProps, DateRangePreset } from './forms/DateRangePicker';
+export type { DateRangePickerProps, DateRangePreset, } from './forms/DateRangePicker';
 //# sourceMappingURL=index.d.ts.map

package/dist/temporary-typings/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,SAAS,EAAE,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AACjE,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,QAAQ,EACT,MAAM,uBAAuB,CAAC;AAC/B,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EACL,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,KAAK,EACL,UAAU,EACV,WAAW,EACX,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,EACV,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EACL,UAAU,EACV,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,eAAe,EACf,MAAM,EACN,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,kBAAkB,EAClB,SAAS,EACT,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,OAAO,EACP,IAAI,EACJ,UAAU,EACV,KAAK,EACL,IAAI,EACJ,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,WAAW,EACX,cAAc,EACd,UAAU,EACV,OAAO,EACP,aAAa,EACb,SAAS,EACT,WAAW,EACX,KAAK,EACL,UAAU,EACV,WAAW,EACX,MAAM,EACN,gBAAgB,EAChB,OAAO,EACP,GAAG,EACH,OAAO,EACP,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,GAAG,EACH,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,EACJ,aAAa,EACb,mBAAmB,EACnB,QAAQ,EACR,UAAU,EACV,MAAM,EACN,OAAO,EACP,cAAc,EACd,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,OAAO,GACR,CAAC;AAEF,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EACV,oBAAoB,EACpB,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC5E,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,cAAc,GACf,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,yBAAyB,EACzB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,YAAY,EACV,oBAAoB,EACpB,eAAe,GAChB,MAAM,yBAAyB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxio-com/react-ui-components",
-  "version": "9.28.0",
+  "version": "9.29.1",
   "description": "React UI components",
   "type": "module",
   "license": "MIT",
@@ -65,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "78ffb230f55e600753d1946c32bd3f53e671ad57"
+  "gitHead": "63a6ace5e417f504624acbc15914b9359088bf24"
 }

package/typings/index.d.ts

@@ -1,7 +1,7 @@
 import React$1, { ReactNode, HTMLAttributes, LiHTMLAttributes, ButtonHTMLAttributes, AnchorHTMLAttributes, RefObject, FC, ElementType, InputHTMLAttributes } from 'react';
 import { RowData, Row, Table, ExpandedState, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
-import { PopoverProps as PopoverProps$1, ToggleButtonGroupProps, ToggleButtonProps, ListBoxProps as ListBoxProps$1, ListBoxLoadMoreItemProps, ListBoxItemProps as ListBoxItemProps$1, ListBoxSectionProps as ListBoxSectionProps$1, HeaderProps, ComboBoxProps as ComboBoxProps$1, ValidationResult, SearchFieldProps as SearchFieldProps$1, TextFieldProps as TextFieldProps$1, DateValue, DateFieldProps as DateFieldProps$1, DatePickerProps as DatePickerProps$1, DateRangePickerProps as DateRangePickerProps$1, CalendarProps as CalendarProps$1, RangeCalendarProps as RangeCalendarProps$1 } from 'react-aria-components';
+import { PopoverProps as PopoverProps$1, ToggleButtonGroupProps, ToggleButtonProps, ListBoxProps as ListBoxProps$1, ListBoxLoadMoreItemProps, ListBoxItemProps as ListBoxItemProps$1, ListBoxSectionProps as ListBoxSectionProps$1, HeaderProps, ComboBoxProps as ComboBoxProps$1, ValidationResult, SearchFieldProps as SearchFieldProps$1, TextFieldProps as TextFieldProps$1, NumberFieldProps as NumberFieldProps$1, DateValue, DateFieldProps as DateFieldProps$1, DatePickerProps as DatePickerProps$1, DateRangePickerProps as DateRangePickerProps$1, CalendarProps as CalendarProps$1, RangeCalendarProps as RangeCalendarProps$1 } from 'react-aria-components';
 export { DialogTrigger, Pressable } from 'react-aria-components';
 import * as _floating_ui_react_dom_interactions from '@floating-ui/react-dom-interactions';
 import { MotionProps } from 'framer-motion';
@@ -797,6 +797,21 @@ interface TextFieldProps extends Omit<TextFieldProps$1, 'children' | 'className'
 
 declare const TextField: React$1.ForwardRefExoticComponent<TextFieldProps & React$1.RefAttributes<HTMLInputElement>>;
 
+interface NumberFieldProps extends Omit<NumberFieldProps$1, 'children' | 'className'> {
+    label?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    fullWidth?: boolean;
+    description?: string;
+    errorMessage?: string;
+    leadingElement?: ReactNode;
+    trailingElement?: ReactNode;
+    showStepper?: boolean;
+    className?: string;
+    placeholder?: string;
+}
+
+declare const NumberField: React$1.ForwardRefExoticComponent<NumberFieldProps & React$1.RefAttributes<HTMLInputElement>>;
+
 interface TextAreaProps extends Omit<TextFieldProps$1, 'children' | 'className' | 'type'> {
     label?: string;
     size?: 'sm' | 'md' | 'lg' | 'xl';
@@ -979,5 +994,5 @@ type AuthLayoutProps = {
 
 declare const AuthLayout: ({ children, heading, description, sentiment, leadingElement, alert, topAddon, footer, }: AuthLayoutProps) => React$1.JSX.Element;
 
-export { ActionList, Alert, AuthLayout, Avatar, Banner, Body, Breadcrumbs, BreadcrumbsItem, Button, Calendar, Card, Checkbox, CheckboxGroup, Chip, Code, ComboBox, CopyToClipboard, DataTable, DateField, DatePicker, DateRangePicker, Display, Drawer, EmptyState, Flex, FormErrorMessage, FormHelperText, GlobalToastProvider, Grid, Heading, Icon, IconButton, Label, Link, ListBox, LoadingSpinner, Logo, Menu, MenuButton, MenuList, OverlayTrigger, Pagination, Popover, ProgressBar, Radio, RadioGroup, RangeCalendar, SearchField, SegmentedControl, Select, SideNavWrapper as SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, TextArea, TextField, TextInput, Tile, ToastProvider, ToastQueue, Toggle, Tooltip, TooltipTrigger, TopBar, useElementResizeObserver, useHover, useOverlayTrigger, useToast, useWindowSize };
-export type { CalendarProps, ComboBoxProps, CopyToClipboardProps, CopyToClipboardSize, CopyToClipboardVariant, DateFieldProps, DatePickerProps, DatePreset, DateRangePickerProps, DateRangePreset, DrawerProps, EmptyStateHeadingLevel, EmptyStateProps, Interactions, OverlayAriaRole, Placement, PopoverProps, RangeCalendarProps, SearchFieldProps, SegmentedControlItemProps, SegmentedControlProps, SegmentedControlSize, TextAreaProps, TextFieldProps, TextInputProps };
+export { ActionList, Alert, AuthLayout, Avatar, Banner, Body, Breadcrumbs, BreadcrumbsItem, Button, Calendar, Card, Checkbox, CheckboxGroup, Chip, Code, ComboBox, CopyToClipboard, DataTable, DateField, DatePicker, DateRangePicker, Display, Drawer, EmptyState, Flex, FormErrorMessage, FormHelperText, GlobalToastProvider, Grid, Heading, Icon, IconButton, Label, Link, ListBox, LoadingSpinner, Logo, Menu, MenuButton, MenuList, NumberField, OverlayTrigger, Pagination, Popover, ProgressBar, Radio, RadioGroup, RangeCalendar, SearchField, SegmentedControl, Select, SideNavWrapper as SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, TextArea, TextField, TextInput, Tile, ToastProvider, ToastQueue, Toggle, Tooltip, TooltipTrigger, TopBar, useElementResizeObserver, useHover, useOverlayTrigger, useToast, useWindowSize };
+export type { CalendarProps, ComboBoxProps, CopyToClipboardProps, CopyToClipboardSize, CopyToClipboardVariant, DateFieldProps, DatePickerProps, DatePreset, DateRangePickerProps, DateRangePreset, DrawerProps, EmptyStateHeadingLevel, EmptyStateProps, Interactions, NumberFieldProps, OverlayAriaRole, Placement, PopoverProps, RangeCalendarProps, SearchFieldProps, SegmentedControlItemProps, SegmentedControlProps, SegmentedControlSize, TextAreaProps, TextFieldProps, TextInputProps };