@maxio-com/react-ui-components 9.27.0 → 9.29.0

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

@@ -42,7 +42,9 @@ 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)
 - [Components / Forms / TextArea](references/components-forms-textarea.md)
 - [Components / Forms / TextField](references/components-forms-textfield.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/skills/maxio-react/references/components-forms-searchfield.md

@@ -0,0 +1,215 @@
+# SearchField
+
+## Usage Guidelines
+
+### Overview
+
+SearchField lets users enter a search query and clear it with a built-in
+clear button. Use it to filter a list, table, or page of results.
+
+#### When to Use
+
+- Use when users need to filter or find items within a list, table, or page.
+- Use `onChange` to filter results as the user types and `onSubmit` when the
+  search should only run once, on Enter.
+- Use with helper text when users need to know which fields are searched.
+
+#### When Not to Use
+
+- Do not use for a single free-form value that is not used to search or
+  filter. Use TextField instead.
+- Do not use when users must choose from a known list. Use Select for short
+  lists or ComboBox when filtering helps select an option.
+- Do not use for long-form or multi-line writing. Use TextArea instead.
+
+### 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 toolbars.                                     |
+| `lg`     | Larger field for prominent search 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
+  clear the value with the built-in clear button once it has content.
+- **Keyboard**: Users tab to the input, type or edit the value, press Escape or
+  activate the clear button to clear it, and press Enter to trigger `onSubmit`.
+- **Focus management**: Focus lands on the native input.
+- **Controlled state**: Use `value` and `onChange` when product state owns the
+  value and results should update as the user types. Use `defaultValue` for
+  simple uncontrolled fields, or `onSubmit` when the search should only run on
+  Enter.
+- **Debounce**: SearchField does not debounce `onChange` on its own. Wrap the
+  consuming state update in your own debounce hook when the search triggers a
+  network request.
+
+### 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 built-in clear button has an accessible name via `clearButtonLabel`
+  (defaults to "Clear search").
+- Do not rely on color alone to communicate validation, disabled, or read-only
+  state.
+
+### Content
+
+- Write labels as short nouns, such as "Search customers" or "Search
+  invoices".
+- Use placeholder text for examples, not instructions that replace the label.
+- Use helper text to name which fields are searched.
+- Write error messages that name the problem and recovery step, such as
+  "Enter at least 3 characters."
+
+### Related
+
+- **[TextField](components-forms-textfield.md)**: use for a
+  single free-form value that is not used to search or filter.
+- **[ComboBox](components-forms-combobox.md)**: use when users
+  choose from a list and typing should filter options.
+- **[Select](components-forms-select.md)**: use when users
+  choose from a shorter closed list.
+
+## React
+
+```tsx
+import { SearchField } from '@maxio-com/react-ui-components';
+```
+
+### State Management
+
+Use controlled state when results should filter as the user types. Use
+`onSubmit` when the search should only run once the user presses Enter.
+
+#### Controlled
+
+```tsx
+const [value, setValue] = React.useState('');
+
+<SearchField label="Search customers" value={value} onChange={setValue} />;
+```
+
+#### Uncontrolled
+
+```tsx
+<SearchField label="Search customers" defaultValue="Acme Co." />
+```
+
+## Imports
+
+```tsx
+import { Grid, SearchField } from "@maxio-com/react-ui-components";
+```
+
+## Prop Types
+
+### SearchField
+
+| Prop | Type | Required | Default | Description | Source |
+| --- | --- | --- | --- | --- | --- |
+| `className` | `string` | no | - | Additional class name for the search field container | SearchFieldProps |
+| `clearButtonLabel` | `string` | no | `Clear search` | Accessible label for the built-in clear button | SearchFieldProps |
+| `description` | `string` | no | - | Description for the search field. It will not be visible if there is an error message. | SearchFieldProps |
+| `errorMessage` | `string` | no | - | Error message for the search field | SearchFieldProps |
+| `fullWidth` | `boolean` | no | - | Ensures the input spans the full width of its parent | SearchFieldProps |
+| `label` | `string` | no | - | Label for the search field | SearchFieldProps |
+| `leadingElement` | `ReactNode` | no | `<Icon variant="search" />` | Leading element for the search field. Defaults to a search icon. | SearchFieldProps |
+| `placeholder` | `string` | no | - | Temporary text that occupies the search field when it is empty. | SearchFieldProps |
+| `size` | `"sm" \| "md" \| "lg" \| "xl"` | no | `md` | Size of the search field | SearchFieldProps |
+
+## Stories
+
+### Default
+
+Provide a visible label and use placeholder text only as an example of the
+expected value. Use controlled state (`value`/`onChange`) when product logic
+needs to filter results as the user types.
+
+```tsx
+const Default = () => <SearchField
+    label="Search customers"
+    placeholder="Search by name or email"
+    onChange={action('onChange')} />;
+```
+
+### Submit On Enter
+
+Use `onSubmit` when the search should only run once the user presses Enter,
+instead of on every keystroke.
+
+```tsx
+const SubmitOnEnter = () => <SearchField
+    label="Search customers"
+    placeholder="Search by name or email"
+    onChange={action('onChange')}
+    onSubmit={action('onSubmit')} />;
+```
+
+### With Description
+
+Use description text for helper content that users need before typing, such
+as which fields are searched.
+
+```tsx
+const WithDescription = () => <SearchField
+    label="Search invoices"
+    placeholder="Search by invoice number"
+    description="Searches invoice number, customer name, and email."
+    onChange={action('onChange')} />;
+```
+
+### Validation
+
+Use errorMessage with isInvalid so assistive technology receives invalid
+state and users get actionable validation feedback.
+
+```tsx
+const Validation = () => <SearchField
+    label="Search customers"
+    placeholder="Search by name or email"
+    isInvalid
+    errorMessage="Enter at least 3 characters."
+    onChange={action('onChange')} />;
+```
+
+### Disabled
+
+Use disabled fields when search is unavailable in the current context.
+
+```tsx
+const Disabled = () => <SearchField label="Search customers" placeholder="Search by name or email" isDisabled />;
+```
+
+### Sizes
+
+Use size to match the density and prominence of the surrounding UI. Use md
+for most toolbars, sm in dense interfaces, lg for prominent search rows, and
+xl when the label and helper or error text should feel integrated with the field.
+
+```tsx
+const Sizes = (args) => (
+  <Grid gap={4}>
+    {(['sm', 'md', 'lg', 'xl'] as const).map((size) => (
+      <SearchField key={size} {...args} size={size} />
+    ))}
+  </Grid>
+);
+```
+
+### Full Width
+
+Use fullWidth in toolbars and responsive layouts where the field should
+fill the available parent width.
+
+```tsx
+const FullWidth = () => <SearchField
+    label="Search customers"
+    placeholder="Search by name or email"
+    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/SearchField/SearchField.d.ts

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/forms/SearchField/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/SearchField/types.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/forms/SearchField/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,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAI1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAInB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}

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

@@ -2,8 +2,12 @@ export * from './Checkbox';
 export { default as ComboBox } from './ComboBox';
 export type { ComboBoxProps } from './ComboBox';
 export * from './Radio';
+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,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, Select, TextArea, TextField, TextInput } from './forms';
+import { Checkbox, CheckboxGroup, ComboBox, FormErrorMessage, FormHelperText, 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, 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, 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, TextAreaProps, TextFieldProps, TextInputProps, } from './forms';
+export type { ComboBoxProps, SearchFieldProps, TextAreaProps, TextFieldProps, TextInputProps, } from './forms';
 export type { SegmentedControlItemProps, SegmentedControlProps, SegmentedControlSize, } from './SegmentedControl';
 export { Calendar } from './Calendar';
 export type { CalendarProps } from './Calendar';

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":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxio-com/react-ui-components",
-  "version": "9.27.0",
+  "version": "9.29.0",
   "description": "React UI components",
   "type": "module",
   "license": "MIT",
@@ -65,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7195ec2e6d3a2162254662d25aa7ff0a56a8d211"
+  "gitHead": "c8da6b0e08a9affd1792ae38d206722c7d61c878"
 }