thread-ui 0.16.4 → 0.17.0

package/dist/components/data-input/reorderable/shared/index.js

@@ -0,0 +1,7 @@
+export { parseReorderableValue, parseReorderableGroups, serializeReorderableGroups, } from './functions/form-value';
+export { applyOrder } from './functions/apply-order';
+export { layoutStrategies, layoutRecipe } from './functions/layout';
+export { screenReaderInstructions, defaultGetItemLabel, createListAnnouncements, } from './functions/announcements';
+export { DragHandle, createDragHandleProps } from './components/drag-handle';
+export { SortableItem } from './components/sortable-item';
+//# sourceMappingURL=index.js.map

package/dist/components/data-input/reorderable/shared/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/data-input/reorderable/shared/index.ts"],"names":[],"mappings":"AAaA,OAAO,EACN,qBAAqB,EACrB,sBAAsB,EACtB,0BAA0B,GAC1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EACN,wBAAwB,EACxB,mBAAmB,EACnB,uBAAuB,GACvB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/components/data-input/reorderable/shared/types/reorderable.types.d.ts

@@ -0,0 +1,45 @@
+import type { CSSProperties, ComponentType, KeyboardEventHandler, PointerEventHandler, ReactNode } from 'react';
+import type { DraggableAttributes } from '@dnd-kit/core';
+/** Minimum shape required for items rendered in a reorderable component. */
+export type ReorderableItem = {
+    id: string | number;
+};
+/** Keys of `T` whose values are numbers. */
+export type NumericKeys<T> = {
+    [K in keyof T]: T[K] extends number ? K : never;
+}[keyof T];
+/** Layout and sorting arrangement of items or groups */
+export type ReorderableLayout = 'vertical' | 'horizontal' | 'grid';
+/** Props passed to a consumer-provided layout wrapper. */
+export type ReorderableWrapperProps = {
+    children: ReactNode;
+};
+/** Consumer-provided component that lays out rendered items or groups. */
+export type ReorderableWrapper = ComponentType<ReorderableWrapperProps>;
+/** Props that turn any element into a drag handle. Spread onto the element; merge `style` if you pass your own. */
+export type DragHandleProps = DraggableAttributes & {
+    ref: (element: HTMLElement | null) => void;
+    'aria-label': string;
+    /** Sets `touchAction: 'none'` so touch drags don't scroll the page */
+    style: CSSProperties;
+    onPointerDown?: PointerEventHandler<HTMLElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+};
+/** Callback an item uses to report its own updated data. */
+export type ReorderableItemChangeHandler<T> = (item: T) => void;
+/** Props passed to the consumer-provided `ItemComponent`. */
+export type ReorderableItemProps<T> = {
+    item: T;
+    /** Default drag handle button. Render it, or spread `dragHandleProps` onto your own element instead. */
+    dragHandle: ReactNode;
+    /** Spread onto any element to make it the drag handle, e.g. `<img {...dragHandleProps} />` */
+    dragHandleProps: DragHandleProps;
+    /** Report changes to this item back to the list. */
+    onItemChange: ReorderableItemChangeHandler<T>;
+    /** Remove this item from the list. Remaining items are re-indexed via `orderProperty`. */
+    onItemRemove: () => void;
+    /** `true` while this item is being dragged. */
+    isDragging: boolean;
+};
+/** Component used to render each item in a reorderable component. */
+export type ReorderableItemComponent<T> = ComponentType<ReorderableItemProps<T>>;

package/dist/components/data-input/reorderable/shared/types/reorderable.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=reorderable.types.js.map

package/dist/components/data-input/reorderable/shared/types/reorderable.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reorderable.types.js","sourceRoot":"","sources":["../../../../../../src/components/data-input/reorderable/shared/types/reorderable.types.ts"],"names":[],"mappings":""}

package/dist/components/data-input/reorderable/shared/types/sortable-item.types.d.ts

@@ -0,0 +1,14 @@
+import type { UniqueIdentifier } from '@dnd-kit/core';
+import type { ReorderableItem, ReorderableItemChangeHandler, ReorderableItemComponent } from './reorderable.types';
+/** Props for internal `SortableItem` wrapper. */
+export type SortableItemProps<T extends ReorderableItem> = {
+    item: T;
+    /** Human-readable name used in the drag handle's `aria-label`. */
+    label: string;
+    ItemComponent: ReorderableItemComponent<T>;
+    onItemChange: ReorderableItemChangeHandler<T>;
+    /** Remove an item from the list by `id`. */
+    onItemRemove: (id: ReorderableItem['id']) => void;
+    /** dnd-kit id. The item `id` in a flat list, namespaced in `ReorderableGroups`. */
+    sortableId: UniqueIdentifier;
+};

package/dist/components/data-input/reorderable/shared/types/sortable-item.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sortable-item.types.js.map

package/dist/components/data-input/reorderable/shared/types/sortable-item.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-item.types.js","sourceRoot":"","sources":["../../../../../../src/components/data-input/reorderable/shared/types/sortable-item.types.ts"],"names":[],"mappings":""}

package/dist/components/data-input/shared/form-label/form-label.d.ts

@@ -0,0 +1,15 @@
+import { FormLabelProps } from './form-label.types';
+/**
+ * Form label linked to a control by `id`. Renders as an `H3` typographic style, with optional `secondaryContent` on the trailing end.
+ * Rendered by `InputWrapper`; use directly only for custom layouts.
+ *
+ * @example
+ * <FormLabel id="email" title="Email Address" />
+ *
+ * @example
+ * <FormLabel id="attachments" title="Attachments" divider />
+ *
+ * @example
+ * <FormLabel id="contents" title="Contents" secondaryContent={<IconButton icon="Plus" onClick={onAdd} />} divider />
+ */
+export declare const FormLabel: ({ id, title, size, divider, secondaryContent, }: FormLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/data-input/shared/form-label/form-label.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css, cva } from '../../../../styled-system/css';
+import { Text } from '../../../../components/typography';
+import { Divider } from '../../../../components/ui';
+const styles = {
+    root: cva({
+        base: {
+            display: 'block',
+            width: '100%',
+            alignSelf: 'flex-start',
+        },
+        variants: {
+            size: {
+                sm: {
+                    marginBottom: '1',
+                },
+                md: {
+                    marginBottom: '1.5',
+                },
+                lg: {
+                    marginBottom: '2',
+                },
+            },
+        },
+    }),
+    row: css({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: '2',
+    }),
+    label: css({
+        flex: '1',
+        minWidth: '0',
+    }),
+};
+/**
+ * Form label linked to a control by `id`. Renders as an `H3` typographic style, with optional `secondaryContent` on the trailing end.
+ * Rendered by `InputWrapper`; use directly only for custom layouts.
+ *
+ * @example
+ * <FormLabel id="email" title="Email Address" />
+ *
+ * @example
+ * <FormLabel id="attachments" title="Attachments" divider />
+ *
+ * @example
+ * <FormLabel id="contents" title="Contents" secondaryContent={<IconButton icon="Plus" onClick={onAdd} />} divider />
+ */
+export const FormLabel = ({ id, title, size = 'md', divider, secondaryContent, }) => {
+    return (_jsxs("div", { className: styles.root({ size }), children: [_jsxs("div", { className: styles.row, children: [_jsx("label", { id: `${id}-label`, htmlFor: id, className: styles.label, children: _jsx(Text, { marginBottom: false, weight: "semibold", size: size, children: title }) }), secondaryContent] }), divider && _jsx(Divider, { width: "100%", marginY: "2px" })] }));
+};
+//# sourceMappingURL=form-label.js.map

package/dist/components/data-input/shared/form-label/form-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-label.js","sourceRoot":"","sources":["../../../../../src/components/data-input/shared/form-label/form-label.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,MAAM,MAAM,GAAG;IACd,IAAI,EAAE,GAAG,CAAC;QACT,IAAI,EAAE;YACL,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,YAAY;SACvB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE;gBACL,EAAE,EAAE;oBACH,YAAY,EAAE,GAAG;iBACjB;gBACD,EAAE,EAAE;oBACH,YAAY,EAAE,KAAK;iBACnB;gBACD,EAAE,EAAE;oBACH,YAAY,EAAE,GAAG;iBACjB;aACD;SACD;KACD,CAAC;IACF,GAAG,EAAE,GAAG,CAAC;QACR,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,eAAe;QAC/B,GAAG,EAAE,GAAG;KACR,CAAC;IACF,KAAK,EAAE,GAAG,CAAC;QACV,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,GAAG;KACb,CAAC;CACF,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,OAAO,EACP,gBAAgB,GACA,EAAE,EAAE;IACpB,OAAO,CACN,eAAK,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,aACpC,eAAK,SAAS,EAAE,MAAM,CAAC,GAAG,aACzB,gBAAO,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,YAC7D,KAAC,IAAI,IAAC,YAAY,EAAE,KAAK,EAAE,MAAM,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,YACrD,KAAK,GACA,GACA,EACP,gBAAgB,IACZ,EACL,OAAO,IAAI,KAAC,OAAO,IAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,KAAK,GAAG,IAC7C,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/components/data-input/shared/form-label/form-label.types.d.ts

@@ -0,0 +1,10 @@
+import { Override, Prettify } from '../../../../types';
+import { BaseInputProps } from '../input-props.types';
+import { ReactNode } from 'react';
+export type FormLabelProps = Prettify<Pick<Override<BaseInputProps, {
+    /** Id of the control this label points to via `htmlFor`; the label's own id is `${id}-label` */
+    id: string;
+}>, 'id' | 'title' | 'size' | 'divider'> & {
+    /** Optional content rendered on the trailing end of the label */
+    secondaryContent?: ReactNode;
+}>;

package/dist/components/data-input/shared/form-label/form-label.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-label.types.js","sourceRoot":"","sources":["../../../../../src/components/data-input/shared/form-label/form-label.types.ts"],"names":[],"mappings":""}

package/dist/components/data-input/shared/form-label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/data-input/shared/form-label/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/data-input/shared/input-props.types.d.ts

@@ -0,0 +1,43 @@
+import { UtilitySizeOptions } from '../../../types';
+/** HTML Elements that accept inputs */
+export type InputElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+/** Props shared by every input element, independent of control mode. */
+export type BaseInputProps = {
+    /** Defaults to `name`, or a generated id when neither is set */
+    id?: string;
+    /** Form field name; omit to keep the value out of form submission */
+    name?: string;
+    /** Label text rendered above the input */
+    title?: string;
+    /** Require value for form submission */
+    required?: boolean;
+    /** Descriptive text rendered within input */
+    placeholder?: string;
+    /** Size @default `md` */
+    size?: UtilitySizeOptions;
+    /** Block interaction and exclude the value from form submission */
+    disabled?: boolean;
+    /** Error message rendered below the input. Overrides native validation message and blocks form submission while set */
+    error?: string;
+    /** Optionally render divider beneath label @default false */
+    divider?: boolean;
+};
+/** Control props for inputs that only support controlled use. */
+export type ControlledValueProps<TValue, TChange> = {
+    /** Controlled value */
+    value: TValue;
+    /** Called when the input value changes */
+    onChange: (e: TChange) => void | Promise<void>;
+};
+/** Controlled when `value` is passed, uncontrolled otherwise. */
+type ControllableValueProps<TValue, TChange> = (ControlledValueProps<TValue, TChange> & {
+    defaultValue?: never;
+}) | {
+    value?: never;
+    /** Called when the input value changes */
+    onChange?: (e: TChange) => void | Promise<void>;
+    /** Initial value for uncontrolled use */
+    defaultValue?: TValue;
+};
+export type InputProps<TValue, TChange = React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>> = BaseInputProps & ControllableValueProps<TValue, TChange>;
+export {};

package/dist/components/data-input/shared/input-props.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-props.types.js","sourceRoot":"","sources":["../../../../src/components/data-input/shared/input-props.types.ts"],"names":[],"mappings":""}

package/dist/components/data-input/shared/input-wrapper.d.ts

@@ -0,0 +1,31 @@
+import { Override, Prettify } from '../../../types';
+import { ReactNode } from 'react';
+import { BaseInputProps } from './input-props.types';
+import { FormLabelProps } from './form-label';
+/** Props for `InputWrapper`. */
+type InputWrapperProps = Prettify<Pick<Override<BaseInputProps, {
+    /** Id of the wrapped control; the label points to it and the message id derives from it */
+    id: string;
+}>, 'id' | 'title' | 'size' | 'divider'> & {
+    children: ReactNode;
+    /** Message rendered below the control */
+    error?: string | null;
+    /** Keep the label for screen readers but hide it visually */
+    hideLabel?: boolean;
+} & Pick<FormLabelProps, 'secondaryContent'>>;
+/**
+ * Field shell for a form control: label (with optional divider), the control, and the error message.
+ * The message slot is an always-present `aria-live` region so screen readers announce changes.
+ *
+ * @example
+ * <InputWrapper id={id} title={title} size={size} error={message}>
+ *   <input id={id} name={name} />
+ * </InputWrapper>
+ *
+ * @example
+ * <InputWrapper id={id} title="Filters" hideLabel>
+ *   <button id={id}>Open</button>
+ * </InputWrapper>
+ */
+export declare const InputWrapper: ({ children, id, title, size, divider, hideLabel, error, secondaryContent, }: InputWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data-input/shared/input-wrapper.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css, cva } from '../../../styled-system/css';
+import { FormLabel } from './form-label';
+import { getErrorId } from './use-field-error';
+const styles = {
+    wrapper: css({
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'start',
+        alignItems: 'center',
+        width: '100%',
+    }),
+    message: cva({
+        base: {
+            alignSelf: 'flex-start',
+            color: 'error.main',
+            _empty: { marginTop: '0' },
+        },
+        variants: {
+            size: {
+                sm: { fontSize: 'xs', marginTop: '1' },
+                md: { fontSize: 'sm', marginTop: '1.5' },
+                lg: { fontSize: 'md', marginTop: '2' },
+            },
+        },
+        defaultVariants: {
+            size: 'md',
+        },
+    }),
+    srOnly: css({ srOnly: true }),
+};
+/**
+ * Field shell for a form control: label (with optional divider), the control, and the error message.
+ * The message slot is an always-present `aria-live` region so screen readers announce changes.
+ *
+ * @example
+ * <InputWrapper id={id} title={title} size={size} error={message}>
+ *   <input id={id} name={name} />
+ * </InputWrapper>
+ *
+ * @example
+ * <InputWrapper id={id} title="Filters" hideLabel>
+ *   <button id={id}>Open</button>
+ * </InputWrapper>
+ */
+export const InputWrapper = ({ children, id, title, size = 'md', divider, hideLabel, error, secondaryContent, }) => {
+    const label = title && (_jsx(FormLabel, { id: id, title: title, size: size, divider: divider, secondaryContent: secondaryContent }));
+    return (_jsxs("div", { className: styles.wrapper, children: [label && (hideLabel ? _jsx("div", { className: styles.srOnly, children: label }) : label), children, _jsx("div", { id: getErrorId(id), "aria-live": "polite", className: styles.message({ size }), children: error })] }));
+};
+//# sourceMappingURL=input-wrapper.js.map

package/dist/components/data-input/shared/input-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-wrapper.js","sourceRoot":"","sources":["../../../../src/components/data-input/shared/input-wrapper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAI/C,OAAO,EAAE,SAAS,EAAkB,MAAM,cAAc,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,MAAM,MAAM,GAAG;IACd,OAAO,EAAE,GAAG,CAAC;QACZ,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,OAAO;QACvB,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,MAAM;KACb,CAAC;IACF,OAAO,EAAE,GAAG,CAAC;QACZ,IAAI,EAAE;YACL,SAAS,EAAE,YAAY;YACvB,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE;SAC1B;QACD,QAAQ,EAAE;YACT,IAAI,EAAE;gBACL,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE;gBACtC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE;gBACxC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE;aACtC;SACD;QACD,eAAe,EAAE;YAChB,IAAI,EAAE,IAAI;SACV;KACD,CAAC;IACF,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;CAC7B,CAAC;AAsBF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC5B,QAAQ,EACR,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,OAAO,EACP,SAAS,EACT,KAAK,EACL,gBAAgB,GACG,EAAE,EAAE;IACvB,MAAM,KAAK,GAAG,KAAK,IAAI,CACtB,KAAC,SAAS,IACT,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,GACjC,CACF,CAAC;IAEF,OAAO,CACN,eAAK,SAAS,EAAE,MAAM,CAAC,OAAO,aAC5B,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,MAAM,CAAC,MAAM,YAAG,KAAK,GAAO,CAAC,CAAC,CAAC,KAAK,CAAC,EAC3E,QAAQ,EACT,cAAK,EAAE,EAAE,UAAU,CAAC,EAAE,CAAC,eAAY,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,YAC7E,KAAK,GACD,IACD,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/components/{form-elements/styles/index.d.ts → data-input/shared/styles.d.ts}

@@ -1,6 +1,7 @@
 import type { IconSizes } from '../../../components';
-/** Size scale shared by every form element. */
-export type InputSize = 'sm' | 'md' | 'lg';
+import { UtilitySizeOptions } from '../../../types';
+/** Size scale shared by every input element. */
+export type InputSize = UtilitySizeOptions;
 /** Icon size to pair with each `InputSize`. */
 export declare const inputIconSizes: Record<InputSize, IconSizes>;
 export declare const baseInputStyles: import("../../../styled-system/types").RecipeRuntimeFn<{
@@ -30,8 +31,30 @@ export declare const baseInputStyles: import("../../../styled-system/types").Rec
         };
     };
 }>;
-/** Sizing for non-input pieces of composite controls, like the `NumberInput` stepper buttons. */
+/** Sizing for pieces of composite controls, like the `NumberInput` stepper buttons and center field. */
 export declare const inputSegmentStyles: import("../../../styled-system/types").RecipeRuntimeFn<{
+    field: {
+        true: {
+            position: "relative";
+            _focus: {
+                zIndex: number;
+                outline: "none";
+                borderColor: "info.main";
+                boxShadow: "0 0 0 2px {colors.info.main}";
+            };
+            color: "text.standard";
+            backgroundColor: "inset";
+            transition: "colors";
+            '&[aria-invalid=true]': {
+                readonly borderColor: "error.main";
+                readonly _focus: {
+                    readonly borderColor: "error.main";
+                    readonly boxShadow: "0 0 0 2px {colors.error.main}";
+                };
+            };
+        };
+        false: {};
+    };
     size: {
         readonly sm: {
             readonly paddingX: "2";

package/dist/components/data-input/shared/styles.js

@@ -0,0 +1,107 @@
+import { cva } from '../../../styled-system/css';
+// Single source of truth for size-driven spacing and type
+const sizeVariants = {
+    sm: {
+        paddingX: '2',
+        paddingY: '1',
+        fontSize: 'xs',
+    },
+    md: {
+        paddingX: '3',
+        paddingY: '1.5',
+        fontSize: 'sm',
+    },
+    lg: {
+        paddingX: '4',
+        paddingY: '2',
+        fontSize: 'md',
+    },
+};
+// Border shared by standalone fields and composite segments
+const border = {
+    borderWidth: 'md',
+    borderStyle: 'solid',
+    borderColor: 'structure.default',
+};
+// Surface and focus/invalid states for anything the user types into
+const fieldSurface = {
+    color: 'text.standard',
+    backgroundColor: 'inset',
+    transition: 'colors',
+    _focus: {
+        outline: 'none',
+        borderColor: 'info.main',
+        boxShadow: '0 0 0 2px {colors.info.main}',
+    },
+    // Keyed off `aria-invalid`, not `:invalid`, so untouched required fields don't render as errors
+    '&[aria-invalid=true]': {
+        borderColor: 'error.main',
+        _focus: {
+            borderColor: 'error.main',
+            boxShadow: '0 0 0 2px {colors.error.main}',
+        },
+    },
+};
+const disabledState = {
+    _disabled: {
+        opacity: '0.5',
+        cursor: 'not-allowed',
+    },
+};
+/** Icon size to pair with each `InputSize`. */
+export const inputIconSizes = {
+    sm: 8,
+    md: 12,
+    lg: 16,
+};
+export const baseInputStyles = cva({
+    base: {
+        ...border,
+        ...fieldSurface,
+        ...disabledState,
+        borderRadius: 'md',
+    },
+    variants: {
+        alt: {
+            true: {
+                width: 'auto',
+            },
+            false: {
+                width: '100%',
+            },
+        },
+        size: sizeVariants,
+    },
+    defaultVariants: {
+        alt: false,
+        size: 'md',
+    },
+});
+/** Sizing for pieces of composite controls, like the `NumberInput` stepper buttons and center field. */
+export const inputSegmentStyles = cva({
+    base: {
+        ...border,
+        ...disabledState,
+    },
+    variants: {
+        // `true` for the segment the user types into
+        field: {
+            true: {
+                ...fieldSurface,
+                // Lift the focus ring above neighbouring segments
+                position: 'relative',
+                _focus: {
+                    ...fieldSurface._focus,
+                    zIndex: 1,
+                },
+            },
+            false: {},
+        },
+        size: sizeVariants,
+    },
+    defaultVariants: {
+        field: false,
+        size: 'md',
+    },
+});
+//# sourceMappingURL=styles.js.map

package/dist/components/data-input/shared/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/data-input/shared/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAO1C,0DAA0D;AAC1D,MAAM,YAAY,GAAG;IACpB,EAAE,EAAE;QACH,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,IAAI;KACd;IACD,EAAE,EAAE;QACH,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,IAAI;KACd;IACD,EAAE,EAAE;QACH,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,IAAI;KACd;CACQ,CAAC;AAEX,4DAA4D;AAC5D,MAAM,MAAM,GAAG;IACd,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,OAAO;IACpB,WAAW,EAAE,mBAAmB;CACvB,CAAC;AAEX,oEAAoE;AACpE,MAAM,YAAY,GAAG;IACpB,KAAK,EAAE,eAAe;IACtB,eAAe,EAAE,OAAO;IACxB,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE;QACP,OAAO,EAAE,MAAM;QACf,WAAW,EAAE,WAAW;QACxB,SAAS,EAAE,8BAA8B;KACzC;IACD,gGAAgG;IAChG,sBAAsB,EAAE;QACvB,WAAW,EAAE,YAAY;QACzB,MAAM,EAAE;YACP,WAAW,EAAE,YAAY;YACzB,SAAS,EAAE,+BAA+B;SAC1C;KACD;CACQ,CAAC;AAEX,MAAM,aAAa,GAAG;IACrB,SAAS,EAAE;QACV,OAAO,EAAE,KAAK;QACd,MAAM,EAAE,aAAa;KACrB;CACQ,CAAC;AAEX,+CAA+C;AAC/C,MAAM,CAAC,MAAM,cAAc,GAAiC;IAC3D,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;CACN,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC;IAClC,IAAI,EAAE;QACL,GAAG,MAAM;QACT,GAAG,YAAY;QACf,GAAG,aAAa;QAChB,YAAY,EAAE,IAAI;KAClB;IACD,QAAQ,EAAE;QACT,GAAG,EAAE;YACJ,IAAI,EAAE;gBACL,KAAK,EAAE,MAAM;aACb;YACD,KAAK,EAAE;gBACN,KAAK,EAAE,MAAM;aACb;SACD;QACD,IAAI,EAAE,YAAY;KAClB;IACD,eAAe,EAAE;QAChB,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,IAAI;KACV;CACD,CAAC,CAAC;AAEH,wGAAwG;AACxG,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAC;IACrC,IAAI,EAAE;QACL,GAAG,MAAM;QACT,GAAG,aAAa;KAChB;IACD,QAAQ,EAAE;QACT,6CAA6C;QAC7C,KAAK,EAAE;YACN,IAAI,EAAE;gBACL,GAAG,YAAY;gBACf,kDAAkD;gBAClD,QAAQ,EAAE,UAAU;gBACpB,MAAM,EAAE;oBACP,GAAG,YAAY,CAAC,MAAM;oBACtB,MAAM,EAAE,CAAC;iBACT;aACD;YACD,KAAK,EAAE,EAAE;SACT;QACD,IAAI,EAAE,YAAY;KAClB;IACD,eAAe,EAAE;QAChB,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,IAAI;KACV;CACD,CAAC,CAAC"}

package/dist/components/data-input/shared/use-field-error.d.ts

@@ -0,0 +1,58 @@
+import { RefObject } from 'react';
+import { InputElement } from './input-props.types';
+/** Props for `useFieldError`. */
+type UseFieldErrorProps<T extends InputElement> = {
+    /** Id of the control; the message id is derived from it */
+    id: string;
+    /** Consumer-supplied error; takes precedence over the native validation message */
+    error?: string;
+    /** Current value; refreshes a visible native message when the value changes without user input, like stepper buttons */
+    value?: unknown;
+    /** Ref to share the validated element with other hooks; one is created when omitted */
+    elementRef?: RefObject<T | null>;
+    /** Element to focus when validation fails, for controls whose native element is hidden. Defaults to the validated element */
+    focusRef?: RefObject<HTMLElement | null>;
+};
+/** Id of the message element linked to a control via `aria-describedby`. */
+export declare const getErrorId: (id: string) => string;
+/**
+ * Replaces the browser validation bubble with an inline message.
+ * Mirrors `error` into native validity via `setCustomValidity`, captures native messages on `invalid`,
+ * clears them on form `reset`, and wires `aria-invalid` and `aria-describedby` to the message rendered by `InputWrapper`.
+ *
+ * `validationProps` go on the native element, `ariaProps` on the element the user focuses.
+ * `fieldProps` combines both for controls where those are the same element.
+ *
+ * @example
+ * const { ref, message, fieldProps } = useFieldError({ id, error, value });
+ *
+ * <InputWrapper id={id} error={message} size={size}>
+ *   <input ref={ref} id={id} {...fieldProps} />
+ * </InputWrapper>
+ *
+ * @example
+ * // Hidden native element with a custom trigger
+ * const { ref, validationProps, ariaProps } = useFieldError<HTMLSelectElement>({ id, error, focusRef: triggerRef });
+ *
+ * <button ref={triggerRef} {...ariaProps} />
+ * <select ref={ref} {...validationProps} />
+ */
+export declare const useFieldError: <T extends InputElement = HTMLInputElement>({ id, error, value, elementRef: externalRef, focusRef, }: UseFieldErrorProps<T>) => {
+    ref: (node: T | null) => void;
+    message: string | null;
+    validationProps: {
+        onInvalid: (e: React.FormEvent<T>) => void;
+        onInput: () => void;
+    };
+    ariaProps: {
+        'aria-invalid': boolean | undefined;
+        'aria-describedby': string | undefined;
+    };
+    fieldProps: {
+        'aria-invalid': boolean | undefined;
+        'aria-describedby': string | undefined;
+        onInvalid: (e: React.FormEvent<T>) => void;
+        onInput: () => void;
+    };
+};
+export {};

package/dist/components/data-input/shared/use-field-error.js

@@ -0,0 +1,82 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+/** Id of the message element linked to a control via `aria-describedby`. */
+export const getErrorId = (id) => `${id}-error`;
+/**
+ * Replaces the browser validation bubble with an inline message.
+ * Mirrors `error` into native validity via `setCustomValidity`, captures native messages on `invalid`,
+ * clears them on form `reset`, and wires `aria-invalid` and `aria-describedby` to the message rendered by `InputWrapper`.
+ *
+ * `validationProps` go on the native element, `ariaProps` on the element the user focuses.
+ * `fieldProps` combines both for controls where those are the same element.
+ *
+ * @example
+ * const { ref, message, fieldProps } = useFieldError({ id, error, value });
+ *
+ * <InputWrapper id={id} error={message} size={size}>
+ *   <input ref={ref} id={id} {...fieldProps} />
+ * </InputWrapper>
+ *
+ * @example
+ * // Hidden native element with a custom trigger
+ * const { ref, validationProps, ariaProps } = useFieldError<HTMLSelectElement>({ id, error, focusRef: triggerRef });
+ *
+ * <button ref={triggerRef} {...ariaProps} />
+ * <select ref={ref} {...validationProps} />
+ */
+export const useFieldError = ({ id, error, value, elementRef: externalRef, focusRef, }) => {
+    const internalRef = useRef(null);
+    const elementRef = externalRef ?? internalRef;
+    const [nativeMessage, setNativeMessage] = useState(null);
+    // Mirror `error` into native validity so the form refuses to submit while it is set.
+    // A callback ref re-applies it when `error` changes or the element is swapped
+    const ref = useCallback((node) => {
+        elementRef.current = node;
+        node?.setCustomValidity(error ?? '');
+    }, [error, elementRef]);
+    // Refresh a visible native message; clears once the field is valid
+    const refresh = useCallback(() => {
+        setNativeMessage((prev) => prev === null ? null : elementRef.current?.validationMessage || null);
+    }, [elementRef]);
+    // Catch changes that don't fire `input`, like programmatic value updates or `error` being cleared
+    useEffect(() => {
+        refresh();
+    }, [value, error, refresh]);
+    // A form reset clears native messages, matching browser behaviour
+    useEffect(() => {
+        const form = elementRef.current?.form;
+        if (!form)
+            return;
+        const handleReset = () => setNativeMessage(null);
+        form.addEventListener('reset', handleReset);
+        return () => form.removeEventListener('reset', handleReset);
+    }, [elementRef]);
+    const handleInvalid = (e) => {
+        // Suppress the browser bubble; the message renders inline instead
+        e.preventDefault();
+        setNativeMessage(e.currentTarget.validationMessage);
+        // Cancelling `invalid` also cancels the browser's focus on the first invalid field, so restore it
+        const form = e.currentTarget.form;
+        const firstInvalid = form?.querySelector('input:invalid, select:invalid, textarea:invalid');
+        if (firstInvalid === e.currentTarget) {
+            (focusRef?.current ?? e.currentTarget).focus();
+        }
+    };
+    const message = error || nativeMessage || null;
+    const validationProps = {
+        onInvalid: handleInvalid,
+        onInput: refresh,
+    };
+    const ariaProps = {
+        'aria-invalid': message ? true : undefined,
+        'aria-describedby': message ? getErrorId(id) : undefined,
+    };
+    return {
+        ref,
+        message,
+        validationProps,
+        ariaProps,
+        fieldProps: { ...validationProps, ...ariaProps },
+    };
+};
+//# sourceMappingURL=use-field-error.js.map

package/dist/components/data-input/shared/use-field-error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-field-error.js","sourceRoot":"","sources":["../../../../src/components/data-input/shared/use-field-error.ts"],"names":[],"mappings":"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"}

package/dist/components/data-input/shared/use-input-id.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Resolves a control's `id`: the explicit `id`, then `name`, then a generated id.
+ * Keeps label, error message, and ARIA wiring working for unnamed inputs like search bars.
+ *
+ * @example
+ * const id = useInputId(idProp, name);
+ */
+export declare const useInputId: (id?: string, name?: string) => string;