@bspk/ui 1.1.34 → 1.3.0

package/dist/components/TextInput/TextInput.d.ts

@@ -1,13 +1,13 @@
-import { ChangeEvent, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, ReactNode } from 'react';
-import { ElementProps, CommonProps, InvalidPropsLibrary, SetRef } from '../../index.js';
 import './text-input.scss';
+import { ChangeEvent, HTMLInputTypeAttribute, ReactNode } from 'react';
+import { CommonProps, ElementProps, FormFieldControlProps, SetRef } from '-/types/common';
 export declare const DEFAULT: {
     readonly size: "medium";
     readonly value: "";
     readonly type: Extract<HTMLInputTypeAttribute, "number" | "text">;
     readonly autoComplete: "off";
 };
-export type TextInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'required' | 'size' | 'value'> & InvalidPropsLibrary & {
+type TextInputBaseProps = {
     /**
      * Callback when the value of the field changes.
      *
@@ -37,13 +37,22 @@ export type TextInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'nam
      *
      * @default text
      */
-    type?: Extract<HTMLInputTypeAttribute, 'number' | 'text'>;
+    type?: Extract<HTMLInputTypeAttribute, 'number' | 'password' | 'text'>;
     /**
      * Specifies if user agent has any permission to provide automated assistance in filling out form field values
      *
      * @default off
      */
-    autoComplete?: HTMLInputAutoCompleteAttribute;
+    autoComplete?: '' | 'off' | 'on';
+    /**
+     * Specifies if the clear button should be shown. This should almost always be true, but can be set to false.
+     *
+     * @default true
+     */
+    showClearButton?: boolean;
+};
+export type TextInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'owner' | 'readOnly' | 'required' | 'size' | 'value'> & FormFieldControlProps & TextInputBaseProps & {
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof TextInputBaseProps>;
 };
 /**
  * A text input that allows users to enter text, numbers or symbols in a singular line. This is the base element and is
@@ -62,11 +71,8 @@ export type TextInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'nam
  * @element
  *
  * @name TextInput
- * @phase DesignReview
+ * @phase Utility
  */
-declare function TextInput({ invalid: invalidProp, onChange, size, value, name, 'aria-label': ariaLabel, inputRef, required, placeholder, id: idProp, leading, trailing, type, readOnly, disabled, autoComplete, containerRef, errorMessage, ...otherProps }: ElementProps<TextInputProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace TextInput {
-    var bspkName: string;
-}
-export { TextInput };
+export declare function TextInput({ invalid: invalidProp, onChange, size, value, name, 'aria-label': ariaLabel, inputRef, required, placeholder, id: idProp, leading, trailing, type, readOnly, disabled, autoComplete, containerRef, showClearButton: showClearButtonProp, owner, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, inputProps, ...props }: ElementProps<TextInputProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+export {};
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TextInput/TextInput.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './text-input.css.js';
 import { SvgCancel } from '@bspk/icons/Cancel';
+import { useMemo, useRef, useState } from 'react';
+import { Button } from '../Button';
 import { useId } from '../../hooks/useId';
-import './text-input.css.js';
+import { useTimeout } from '../../hooks/useTimeout';
 export const DEFAULT = {
     size: 'medium',
     value: '',
@@ -25,15 +28,33 @@ export const DEFAULT = {
  * @element
  *
  * @name TextInput
- * @phase DesignReview
+ * @phase Utility
  */
-function TextInput({ invalid: invalidProp, onChange, size = DEFAULT.size, value = DEFAULT.value, name, 'aria-label': ariaLabel, inputRef, required, placeholder, id: idProp, leading, trailing, type = DEFAULT.type, readOnly, disabled, autoComplete = DEFAULT.autoComplete, containerRef, errorMessage, ...otherProps }) {
+export function TextInput({ invalid: invalidProp, onChange, size = DEFAULT.size, value = DEFAULT.value, name, 'aria-label': ariaLabel, inputRef, required, placeholder, id: idProp, leading, trailing, type = DEFAULT.type, readOnly, disabled, autoComplete = DEFAULT.autoComplete, containerRef, showClearButton: showClearButtonProp = true, owner, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, inputProps, ...props }) {
     const id = useId(idProp);
     const invalid = !readOnly && !disabled && invalidProp;
-    return (_jsxs("div", { "data-bspk": "text-input", "data-disabled": disabled || undefined, "data-empty": !value.toString().length || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-required": required || undefined, "data-size": size, ref: containerRef, ...otherProps, children: [leading && _jsx("span", { "data-leading": true, children: leading }), _jsx("input", { "aria-errormessage": errorMessage || undefined, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, autoComplete: autoComplete, disabled: disabled || undefined, id: id, name: name, onChange: (event) => {
+    const [focused, setFocused] = useState(false);
+    const showClearButton = useMemo(() => !!(showClearButtonProp !== false && !readOnly && !disabled && value?.toString().length && focused), [showClearButtonProp, readOnly, disabled, value, focused]);
+    const inputRefInternal = useRef(null);
+    const focusTimeout = useTimeout();
+    return (_jsxs("div", { ...props, "data-bspk": "text-input", "data-bspk-owner": owner || undefined, "data-disabled": disabled || undefined, "data-empty": !value.toString().length || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-show-clear-button": showClearButton || undefined, "data-size": size, ref: containerRef, children: [leading && _jsx("span", { "data-leading": true, children: leading }), _jsx("input", { ...inputProps, "aria-describedby": ariaDescribedBy || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, autoComplete: autoComplete, "data-main-input": true, disabled: disabled || undefined, id: id, name: name, onBlur: (event) => {
+                    focusTimeout.set(() => setFocused(false), 750);
+                    inputProps?.onBlur?.(event);
+                }, onChange: (event) => {
                     onChange(event.target.value, event);
-                }, placeholder: placeholder || ' ', readOnly: readOnly || undefined, ref: inputRef, required: required || undefined, type: type, value: value || '' }), trailing && _jsx("span", { "data-trailing": true, children: trailing }), _jsx("button", { "aria-label": "clear", "data-clear": true, onClick: () => onChange(''), children: _jsx(SvgCancel, {}) })] }));
+                }, onFocus: (event) => {
+                    focusTimeout.set(() => setFocused(true), 0);
+                    inputProps?.onFocus?.(event);
+                }, placeholder: placeholder || ' ', readOnly: readOnly || undefined, ref: (node) => {
+                    if (!node)
+                        return;
+                    inputRef?.(node);
+                    inputRefInternal.current = node;
+                }, required: required || undefined, type: type, value: value || '' }), trailing && _jsx("span", { "data-trailing": true, children: trailing }), showClearButton && (_jsx(Button, { icon: _jsx(SvgCancel, {}), iconOnly: true, label: "Clear", onClick: () => {
+                    onChange('');
+                    inputRefInternal.current?.focus();
+                }, onFocus: () => {
+                    focusTimeout.clear();
+                }, size: size, variant: "tertiary" }))] }));
 }
-TextInput.bspkName = 'TextInput';
-export { TextInput };
 //# sourceMappingURL=TextInput.js.map

package/dist/components/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/components/TextInput/TextInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAI/C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,MAAM,OAAO,GAAG;IACnB,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,MAA4D;IAClE,YAAY,EAAE,KAAK;CACb,CAAC;AA4CX;;;;;;;;;;;;;;;;;;GAkBG;AACH,SAAS,SAAS,CAAC,EACf,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,EACP,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,OAAO,CAAC,YAAY,EACnC,YAAY,EACZ,YAAY,EACZ,GAAG,UAAU,EACqB;IAClC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,OAAO,GAAG,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,WAAW,CAAC;IAEtD,OAAO,CACH,4BACc,YAAY,mBACP,QAAQ,IAAI,SAAS,gBACxB,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,SAAS,kBACnC,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,mBACrB,QAAQ,IAAI,SAAS,eACzB,IAAI,EACf,GAAG,EAAE,YAAY,KACb,UAAU,aAEb,OAAO,IAAI,+CAAoB,OAAO,GAAQ,EAC/C,qCACuB,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,gBACtB,SAAS,EACrB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAChB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;gBACxC,CAAC,EACD,WAAW,EAAE,WAAW,IAAI,GAAG,EAC/B,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,IAAI,EAAE,GACpB,EACD,QAAQ,IAAI,gDAAqB,QAAQ,GAAQ,EAClD,+BAAmB,OAAO,sBAAY,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,YAC7D,KAAC,SAAS,KAAG,GACR,IACP,CACT,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/components/TextInput/TextInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/TextInput/TextInputExample.d.ts

@@ -1,3 +1,3 @@
-import { ComponentExample } from '../../utils/demo';
 import { TextInputProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 export declare const TextInputExample: ComponentExample<TextInputProps>;

package/dist/components/TextInput/TextInputExample.js

@@ -1,4 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 export const TextInputExample = {
+    render: ({ props, Component }) => _jsx(Component, { ...props }),
     presets: [
         {
             label: 'Currency',
@@ -7,6 +9,8 @@ export const TextInputExample = {
                 leading: '$',
                 trailing: undefined,
                 placeholder: 'currency',
+                name: 'currency',
+                'aria-label': 'Currency input',
             },
         },
         {
@@ -16,6 +20,8 @@ export const TextInputExample = {
                 leading: undefined,
                 trailing: '%',
                 placeholder: 'percent',
+                name: 'percent',
+                'aria-label': 'Percent input',
             },
         },
         {
@@ -25,8 +31,13 @@ export const TextInputExample = {
                 leading: undefined,
                 placeholder: 'dimensions',
                 trailing: 'ft',
+                name: 'dimension',
+                'aria-label': 'Dimension input',
             },
         },
     ],
+    variants: {
+        type: false,
+    },
 };
 //# sourceMappingURL=TextInputExample.js.map

package/dist/components/TextInput/TextInputExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputExample.js","sourceRoot":"","sources":["../../../src/components/TextInput/TextInputExample.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,gBAAgB,GAAqC;IAC9D,OAAO,EAAE;QACL;YACI,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,GAAG;gBACZ,QAAQ,EAAE,SAAS;gBACnB,WAAW,EAAE,UAAU;aAC1B;SACJ;QACD;YACI,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,SAAS;gBAClB,QAAQ,EAAE,GAAG;gBACb,WAAW,EAAE,SAAS;aACzB;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,SAAS;gBAClB,WAAW,EAAE,YAAY;gBACzB,QAAQ,EAAE,IAAI;aACjB;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"TextInputExample.js","sourceRoot":"","sources":["../../../src/components/TextInput/TextInputExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,gBAAgB,GAAqC;IAC9D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,OAAO,EAAE;QACL;YACI,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,GAAG;gBACZ,QAAQ,EAAE,SAAS;gBACnB,WAAW,EAAE,UAAU;gBACvB,IAAI,EAAE,UAAU;gBAChB,YAAY,EAAE,gBAAgB;aACjC;SACJ;QACD;YACI,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,SAAS;gBAClB,QAAQ,EAAE,GAAG;gBACb,WAAW,EAAE,SAAS;gBACtB,IAAI,EAAE,SAAS;gBACf,YAAY,EAAE,eAAe;aAChC;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,SAAS;gBAClB,WAAW,EAAE,YAAY;gBACzB,QAAQ,EAAE,IAAI;gBACd,IAAI,EAAE,WAAW;gBACjB,YAAY,EAAE,iBAAiB;aAClC;SACJ;KACJ;IACD,QAAQ,EAAE;QACN,IAAI,EAAE,KAAK;KACd;CACJ,CAAC"}

package/dist/components/TextInput/text-input.css

@@ -6,10 +6,13 @@
   border: solid 1px var(--border-color);
   height: var(--field-height);
   border-radius: var(--radius-sm);
-  padding: 0 0 0 var(--field-padding);
+  padding: 0 var(--field-padding);
   gap: var(--spacing-sizing-01);
   width: 100%;
 }
+[data-bspk=text-input][data-show-clear-button] {
+  padding-right: 0;
+}
 [data-bspk=text-input] > * {
   display: flex;
   justify-content: center;
@@ -29,11 +32,11 @@
   --border-color: var(--stroke-neutral-disabled-light);
   background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=text-input][data-disabled], [data-bspk=text-input]:has(input[disabled]) {
+[data-bspk=text-input][data-disabled], [data-bspk=text-input]:has([data-main-input][disabled]) {
   --border-color: var(--stroke-neutral-disabled-light);
   background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=text-input][data-disabled] > *, [data-bspk=text-input]:has(input[disabled]) > * {
+[data-bspk=text-input][data-disabled] > *, [data-bspk=text-input]:has([data-main-input][disabled]) > * {
   color: var(--foreground-neutral-disabled-on-surface);
 }
 [data-bspk=text-input][data-invalid] {
@@ -60,6 +63,10 @@
   --field-icon-width: var(--spacing-sizing-06);
   --field-clear-width: var(--spacing-sizing-06);
 }
+[data-bspk=text-input] [data-leading],
+[data-bspk=text-input] [data-trailing] {
+  position: relative;
+}
 [data-bspk=text-input] [data-leading] svg,
 [data-bspk=text-input] [data-trailing] svg {
   width: var(--field-icon-width);
@@ -68,7 +75,7 @@
   font: var(--labels-small);
   color: var(--foreground-neutral-on-surface-variant-01);
 }
-[data-bspk=text-input] input {
+[data-bspk=text-input] [data-main-input] {
   flex: 1;
   background-color: transparent !important;
   border: none;
@@ -77,27 +84,7 @@
   pointer-events: all;
   text-overflow: ellipsis;
 }
-[data-bspk=text-input] input[type=number]::-webkit-inner-spin-button, [data-bspk=text-input] input[type=number]::-webkit-outer-spin-button {
-  display: none;
-}
-[data-bspk=text-input] button[data-clear] {
-  display: flex;
-  border: none;
-  background: none;
-  padding: 0;
-  cursor: pointer;
-  pointer-events: all;
-  margin-left: var(--spacing-sizing-02);
-  padding-right: var(--field-padding);
-}
-[data-bspk=text-input] button[data-clear] svg {
-  pointer-events: none;
-  width: var(--field-clear-width);
-}
-[data-bspk=text-input]:not(:focus-within), [data-bspk=text-input][data-empty], [data-bspk=text-input][data-readonly], [data-bspk=text-input][data-disabled] {
-  padding-right: var(--field-padding);
-}
-[data-bspk=text-input]:not(:focus-within) button[data-clear], [data-bspk=text-input][data-empty] button[data-clear], [data-bspk=text-input][data-readonly] button[data-clear], [data-bspk=text-input][data-disabled] button[data-clear] {
+[data-bspk=text-input] [data-main-input][type=number]::-webkit-inner-spin-button, [data-bspk=text-input] [data-main-input][type=number]::-webkit-outer-spin-button {
   display: none;
 }
 [data-bspk=text-input]:focus-within {

package/dist/components/TextInput/text-input.css.js

@@ -9,10 +9,13 @@ style.appendChild(document.createTextNode(`[data-bspk=text-input] {
   border: solid 1px var(--border-color);
   height: var(--field-height);
   border-radius: var(--radius-sm);
-  padding: 0 0 0 var(--field-padding);
+  padding: 0 var(--field-padding);
   gap: var(--spacing-sizing-01);
   width: 100%;
 }
+[data-bspk=text-input][data-show-clear-button] {
+  padding-right: 0;
+}
 [data-bspk=text-input] > * {
   display: flex;
   justify-content: center;
@@ -32,11 +35,11 @@ style.appendChild(document.createTextNode(`[data-bspk=text-input] {
   --border-color: var(--stroke-neutral-disabled-light);
   background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=text-input][data-disabled], [data-bspk=text-input]:has(input[disabled]) {
+[data-bspk=text-input][data-disabled], [data-bspk=text-input]:has([data-main-input][disabled]) {
   --border-color: var(--stroke-neutral-disabled-light);
   background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=text-input][data-disabled] > *, [data-bspk=text-input]:has(input[disabled]) > * {
+[data-bspk=text-input][data-disabled] > *, [data-bspk=text-input]:has([data-main-input][disabled]) > * {
   color: var(--foreground-neutral-disabled-on-surface);
 }
 [data-bspk=text-input][data-invalid] {
@@ -63,6 +66,10 @@ style.appendChild(document.createTextNode(`[data-bspk=text-input] {
   --field-icon-width: var(--spacing-sizing-06);
   --field-clear-width: var(--spacing-sizing-06);
 }
+[data-bspk=text-input] [data-leading],
+[data-bspk=text-input] [data-trailing] {
+  position: relative;
+}
 [data-bspk=text-input] [data-leading] svg,
 [data-bspk=text-input] [data-trailing] svg {
   width: var(--field-icon-width);
@@ -71,7 +78,7 @@ style.appendChild(document.createTextNode(`[data-bspk=text-input] {
   font: var(--labels-small);
   color: var(--foreground-neutral-on-surface-variant-01);
 }
-[data-bspk=text-input] input {
+[data-bspk=text-input] [data-main-input] {
   flex: 1;
   background-color: transparent !important;
   border: none;
@@ -80,27 +87,7 @@ style.appendChild(document.createTextNode(`[data-bspk=text-input] {
   pointer-events: all;
   text-overflow: ellipsis;
 }
-[data-bspk=text-input] input[type=number]::-webkit-inner-spin-button, [data-bspk=text-input] input[type=number]::-webkit-outer-spin-button {
-  display: none;
-}
-[data-bspk=text-input] button[data-clear] {
-  display: flex;
-  border: none;
-  background: none;
-  padding: 0;
-  cursor: pointer;
-  pointer-events: all;
-  margin-left: var(--spacing-sizing-02);
-  padding-right: var(--field-padding);
-}
-[data-bspk=text-input] button[data-clear] svg {
-  pointer-events: none;
-  width: var(--field-clear-width);
-}
-[data-bspk=text-input]:not(:focus-within), [data-bspk=text-input][data-empty], [data-bspk=text-input][data-readonly], [data-bspk=text-input][data-disabled] {
-  padding-right: var(--field-padding);
-}
-[data-bspk=text-input]:not(:focus-within) button[data-clear], [data-bspk=text-input][data-empty] button[data-clear], [data-bspk=text-input][data-readonly] button[data-clear], [data-bspk=text-input][data-disabled] button[data-clear] {
+[data-bspk=text-input] [data-main-input][type=number]::-webkit-inner-spin-button, [data-bspk=text-input] [data-main-input][type=number]::-webkit-outer-spin-button {
   display: none;
 }
 [data-bspk=text-input]:focus-within {
@@ -111,4 +98,3 @@ style.appendChild(document.createTextNode(`[data-bspk=text-input] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/Textarea/Textarea.d.ts

@@ -1,7 +1,7 @@
-import { ChangeEvent } from 'react';
-import { CommonProps, InvalidPropsLibrary, SetRef } from '../../index.js';
 import './textarea.scss';
-export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'readOnly' | 'required'> & InvalidPropsLibrary & {
+import { ChangeEvent } from 'react';
+import { CommonProps, FormFieldControlProps, SetRef } from '-/types/common';
+export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'readOnly'> & FormFieldControlProps & {
     /**
      * Callback when the value of the field changes.
      *
@@ -50,7 +50,7 @@ export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'read
      *
      * When set the textarea will automatically adjust its height to fit the content up to this limit.
      *
-     * @default 3
+     * @default 10
      * @minimum 3
      * @maximum 10
      */
@@ -76,11 +76,7 @@ export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'read
  * @element
  *
  * @name Textarea
- * @phase DesignReview
+ * @phase Utility
  */
-declare function Textarea({ invalid: invalidProp, onChange, textSize, value, name, 'aria-label': ariaLabel, innerRef, placeholder, id: idProp, minRows: minRowsProp, maxRows: maxRowsProp, errorMessage, ...otherProps }: TextareaProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Textarea {
-    var bspkName: string;
-}
-export { Textarea };
+export declare function Textarea({ invalid: invalidProp, onChange, textSize, value, name, 'aria-label': ariaLabel, innerRef, placeholder, id: idProp, minRows, maxRows, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...otherProps }: TextareaProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Textarea/Textarea.js

@@ -1,13 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './textarea.css.js';
 import { useRef } from 'react';
 import { useId } from '../../hooks/useId';
 import { cssWithVars } from '../../utils/cwv';
-import './textarea.css.js';
-const DEFAULT = {
-    minRows: 3,
-    maxRows: 10,
-    textSize: 'medium',
-};
 /**
  * A component that allows users to input large amounts of text that could span multiple lines.
  *
@@ -28,14 +23,11 @@ const DEFAULT = {
  * @element
  *
  * @name Textarea
- * @phase DesignReview
+ * @phase Utility
  */
-function Textarea({ invalid: invalidProp, onChange, textSize = DEFAULT.textSize, value = '', name, 'aria-label': ariaLabel, innerRef, placeholder, id: idProp, minRows: minRowsProp = DEFAULT.minRows, maxRows: maxRowsProp = DEFAULT.maxRows, errorMessage, ...otherProps }) {
+export function Textarea({ invalid: invalidProp, onChange, textSize = 'medium', value = '', name, 'aria-label': ariaLabel, innerRef, placeholder, id: idProp, minRows = 4, maxRows = 10, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...otherProps }) {
     const id = useId(idProp);
     const invalid = !otherProps.readOnly && !otherProps.disabled && invalidProp;
-    // ensure minRows and maxRows are within bounds
-    const minRows = Math.min(DEFAULT.maxRows, Math.max(minRowsProp, DEFAULT.minRows));
-    const maxRows = Math.max(DEFAULT.minRows, Math.min(maxRowsProp, DEFAULT.maxRows));
     const onInput = () => {
         const target = textareaElement.current;
         if (!target)
@@ -49,7 +41,7 @@ function Textarea({ invalid: invalidProp, onChange, textSize = DEFAULT.textSize,
     return (_jsxs("div", { "data-bspk": "textarea", "data-size": textSize, style: cssWithVars({
             '--min-rows': minRows,
             '--max-rows': maxRows,
-        }), children: [_jsx("textarea", { ...otherProps, "aria-errormessage": errorMessage || undefined, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, id: id, name: name, onBlur: (event) => {
+        }), children: [_jsx("textarea", { ...otherProps, "aria-describedby": ariaDescribedBy || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, id: id, name: name, onBlur: (event) => {
                     const target = event.target;
                     target.scrollTop = 0;
                 }, onChange: (event) => onChange(event.target.value, event), onInput: onInput, placeholder: placeholder, ref: (node) => {
@@ -58,6 +50,4 @@ function Textarea({ invalid: invalidProp, onChange, textSize = DEFAULT.textSize,
                     onInput();
                 }, value: value, wrap: "hard" }), _jsx("div", { "aria-hidden": true, "data-replicated-value": true })] }));
 }
-Textarea.bspkName = 'Textarea';
-export { Textarea };
 //# sourceMappingURL=Textarea.js.map

package/dist/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAe,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA2D1C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,QAAQ,GAAG,QAAQ,EACnB,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,EAAE,EACZ,kBAAkB,EAAE,eAAe,EACnC,mBAAmB,EAAE,gBAAgB,EACrC,GAAG,UAAU,EACD;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,OAAO,GAAG,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,WAAW,CAAC;IAE5E,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,MAAM,MAAM,GAAG,eAAe,CAAC,OAAO,CAAC;QACvC,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,qEAAqE;QACrE,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM;YAAE,OAAO;QAC/B,MAAM,CAAC,WAA2B,CAAC,SAAS,GAAG,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IACxE,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,MAAM,CAA6B,IAAI,CAAC,CAAC;IAEjE,OAAO,CACH,4BACc,UAAU,eACT,QAAQ,EACnB,KAAK,EAAE,WAAW,CAAC;YACf,YAAY,EAAE,OAAO;YACrB,YAAY,EAAE,OAAO;SACxB,CAAC,aAEF,sBACQ,UAAU,sBACI,eAAe,IAAI,SAAS,uBAC3B,gBAAgB,IAAI,SAAS,kBAClC,OAAO,IAAI,SAAS,gBACtB,SAAS,EACrB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;oBACd,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;oBACnD,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC;gBACzB,CAAC,EACD,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,EACxD,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;oBACjB,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;oBAC/B,OAAO,EAAE,CAAC;gBACd,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,GACb,EACF,mEAAyC,IACvC,CACT,CAAC;AACN,CAAC"}

package/dist/components/Textarea/TextareaExample.d.ts

@@ -1,3 +1,3 @@
-import { ComponentExample } from '../../utils/demo';
 import { TextareaProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 export declare const TextareaExample: ComponentExample<TextareaProps>;

package/dist/components/Textarea/TextareaExample.js

@@ -1,2 +1,5 @@
-export const TextareaExample = {};
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TextareaExample = {
+    render: ({ props, Component }) => _jsx(Component, { ...props }),
+};
 //# sourceMappingURL=TextareaExample.js.map

package/dist/components/Textarea/TextareaExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaExample.js","sourceRoot":"","sources":["../../../src/components/Textarea/TextareaExample.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,eAAe,GAAoC,EAAE,CAAC"}
+{"version":3,"file":"TextareaExample.js","sourceRoot":"","sources":["../../../src/components/Textarea/TextareaExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;CAC7D,CAAC"}

package/dist/components/Textarea/textarea.css.js

@@ -75,4 +75,3 @@ style.appendChild(document.createTextNode(`[data-bspk=textarea] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/TextareaField/TextareaField.d.ts

@@ -1,6 +1,6 @@
-import { FormFieldProps } from '../FormField';
-import { TextareaProps } from '../Textarea';
-export type TextareaFieldProps = Pick<FormFieldProps, 'controlId' | 'helperText' | 'label'> & TextareaProps & {
+import { FormFieldWrapProps } from '-/components/FormField';
+import { TextareaProps } from '-/components/Textarea';
+export type TextareaFieldProps = FormFieldWrapProps<TextareaProps> & {
     /**
      * Whether the character count should be displayed.
      *
@@ -33,11 +33,7 @@ export type TextareaFieldProps = Pick<FormFieldProps, 'controlId' | 'helperText'
  *     }
  *
  * @name TextareaField
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function TextareaField({ label, errorMessage: errorMessageProp, helperText, controlId: id, onChange, maxLength: maxLengthProp, invalid, readOnly, disabled, required, characterCount, ...textareaProps }: TextareaFieldProps): import("react/jsx-runtime").JSX.Element | null;
-declare namespace TextareaField {
-    var bspkName: string;
-}
-export { TextareaField };
+export declare function TextareaField({ label, errorMessage, helperText, controlId, required, invalid, characterCount, ...inputProps }: TextareaFieldProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TextareaField/TextareaField.js

@@ -28,19 +28,16 @@ import { tryIntParse } from '../../utils/tryIntPsrse';
  *     }
  *
  * @name TextareaField
- * @phase DesignReview
+ * @phase UXReview
  */
-function TextareaField({ label, errorMessage: errorMessageProp, helperText, controlId: id, onChange, maxLength: maxLengthProp, invalid, readOnly, disabled, required, characterCount = true, ...textareaProps }) {
-    const maxLength = tryIntParse(maxLengthProp) || -1;
-    const errorMessage = (!readOnly && !disabled && errorMessageProp) || undefined;
-    if (typeof onChange !== 'function')
-        return null;
-    return (_jsx(FormField, { controlId: id, "data-bspk": "textarea-field", errorMessage: errorMessage, helperText: helperText, invalid: invalid, label: label, labelTrailing: characterCount && (_jsx(Txt, { style: {
+export function TextareaField({ label, errorMessage, helperText, controlId, required, invalid, characterCount, ...inputProps }) {
+    const maxLength = tryIntParse(inputProps.maxLength) || -1;
+    return (_jsx(FormField, { controlId: controlId, "data-bspk": "textarea-field", errorMessage: errorMessage, helperText: helperText, invalid: invalid, label: label, labelTrailing: 
+        // If characterCount is falsey, we don't want to show the labelTrailing
+        characterCount && (_jsx(Txt, { style: {
                 color: 'var(--foreground-neutral-on-surface-variant-02)',
-            }, variant: "body-small", children: `${textareaProps?.value?.length || 0}${maxLength > 0 ? `/${maxLength}` : ''}` })), required: required, children: (fieldProps) => (_jsx(Textarea, { ...textareaProps, ...fieldProps, "aria-label": textareaProps['aria-label'] || label, id: id, invalid: invalid, onChange: (next, event) => {
-                onChange(next, event);
-            }, required: required })) }));
+            }, variant: "body-small", children: `${inputProps?.value?.length || 0}${maxLength > 0 ? `/${maxLength}` : ''}` })), required: required, children: (fieldProps) => (_jsx(Textarea
+        //
+        , { ...inputProps, ...fieldProps, invalid: invalid })) }));
 }
-TextareaField.bspkName = 'TextareaField';
-export { TextareaField };
 //# sourceMappingURL=TextareaField.js.map

package/dist/components/TextareaField/TextareaField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaField.js","sourceRoot":"","sources":["../../../src/components/TextareaField/TextareaField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAiB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAWlD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,SAAS,aAAa,CAAC,EACnB,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EAAE,EAAE,EACb,QAAQ,EACR,SAAS,EAAE,aAAa,EACxB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,cAAc,GAAG,IAAI,EACrB,GAAG,aAAa,EACC;IACjB,MAAM,SAAS,GAAG,WAAW,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,gBAAgB,CAAC,IAAI,SAAS,CAAC;IAE/E,IAAI,OAAO,QAAQ,KAAK,UAAU;QAAE,OAAO,IAAI,CAAC;IAEhD,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,EAAE,eACH,gBAAgB,EAC1B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,aAAa,EACT,cAAc,IAAI,CACd,KAAC,GAAG,IACA,KAAK,EAAE;gBACH,KAAK,EAAE,iDAAiD;aAC3D,EACD,OAAO,EAAC,YAAY,YAEnB,GAAG,aAAa,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,GAC5E,CACT,EAEL,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,QAAQ,OACD,aAAa,KACb,UAAU,gBACF,aAAa,CAAC,YAAY,CAAC,IAAI,KAAK,EAChD,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACtB,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YAC1B,CAAC,EACD,QAAQ,EAAE,QAAQ,GACpB,CACL,GACO,CACf,CAAC;AACN,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"TextareaField.js","sourceRoot":"","sources":["../../../src/components/TextareaField/TextareaField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsB,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAiB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAWlD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,aAAa,CAAC,EAC1B,KAAK,EACL,YAAY,EACZ,UAAU,EACV,SAAS,EACT,QAAQ,EACR,OAAO,EACP,cAAc,EACd,GAAG,UAAU,EACI;IACjB,MAAM,SAAS,GAAG,WAAW,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAE1D,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,gBAAgB,EAC1B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,aAAa;QACT,uEAAuE;QACvE,cAAc,IAAI,CACd,KAAC,GAAG,IACA,KAAK,EAAE;gBACH,KAAK,EAAE,iDAAiD;aAC3D,EACD,OAAO,EAAC,YAAY,YAEnB,GAAG,UAAU,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,GACzE,CACT,EAEL,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,QAAQ;QACL,EAAE;eACE,UAAU,KACV,UAAU,EACd,OAAO,EAAE,OAAO,GAClB,CACL,GACO,CACf,CAAC;AACN,CAAC"}

package/dist/components/TextareaField/TextareaFieldExample.d.ts

@@ -1,3 +1,3 @@
-import { ComponentExample } from '../../utils/demo';
 import { TextareaFieldProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 export declare const TextareaFieldExample: ComponentExample<TextareaFieldProps>;

package/dist/components/TextareaField/TextareaFieldExample.js

@@ -3,7 +3,8 @@ export const TextareaFieldExample = {
     render: ({ Component, props }) => {
         const tooManyCharacters = Boolean(props.value && props.maxLength && props.value?.length > props.maxLength);
         const invalid = props.invalid || tooManyCharacters;
-        return (_jsx(Component, { ...props, errorMessage: invalid ? props.errorMessage || 'Too Many characters' : '', invalid: invalid }));
+        const errorMessage = tooManyCharacters ? 'Too Many characters' : props.errorMessage || '';
+        return _jsx(Component, { ...props, errorMessage: errorMessage, invalid: invalid });
     },
 };
 //# sourceMappingURL=TextareaFieldExample.js.map

package/dist/components/TextareaField/TextareaFieldExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaFieldExample.js","sourceRoot":"","sources":["../../../src/components/TextareaField/TextareaFieldExample.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,MAAM,oBAAoB,GAAyC;IACtE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;QAC7B,MAAM,iBAAiB,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;QAE3G,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,iBAAiB,CAAC;QAEnD,OAAO,CACH,KAAC,SAAS,OACF,KAAK,EACT,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,IAAI,qBAAqB,CAAC,CAAC,CAAC,EAAE,EACxE,OAAO,EAAE,OAAO,GAClB,CACL,CAAC;IACN,CAAC;CACJ,CAAC"}
+{"version":3,"file":"TextareaFieldExample.js","sourceRoot":"","sources":["../../../src/components/TextareaField/TextareaFieldExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,oBAAoB,GAAyC;IACtE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;QAC7B,MAAM,iBAAiB,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;QAE3G,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,iBAAiB,CAAC;QACnD,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC;QAE1F,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;IAClF,CAAC;CACJ,CAAC"}

package/dist/components/TimeInput/Listbox.d.ts

@@ -0,0 +1,15 @@
+import { TimeInputType } from './Segment';
+type Option = {
+    id: string;
+    value: string;
+    label: string;
+};
+type TimeInputListboxProps = {
+    options: Option[];
+    selectedValue?: string;
+    type: TimeInputType;
+    onSelect?: (value: string) => void;
+    onTab?: (e: React.KeyboardEvent) => void;
+};
+export declare function TimeInputListbox({ options, selectedValue, type: kind, onSelect, onTab }: TimeInputListboxProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TimeInput/Listbox.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArrowNavigation } from '../../hooks/useArrowNavigation';
+import { getElementById } from '../../utils/dom';
+import { handleKeyDown } from '../../utils/handleKeyDown';
+export function TimeInputListbox({ options, selectedValue, type: kind, onSelect, onTab }) {
+    const { activeElementId, arrowKeyCallbacks } = useArrowNavigation({
+        ids: options.map((option) => option.id),
+        defaultActiveId: (options.find((option) => option.value === selectedValue) || options[0])?.id || null,
+    });
+    const enterSpaceClick = () => {
+        if (activeElementId)
+            getElementById(activeElementId)?.click();
+    };
+    return (_jsx("div", { "aria-label": `Select ${kind}`, "data-bspk": "time-input-listbox", "data-scroll-column": kind, "data-type": kind, "data-visible": true, id: `${kind}-listbox`, onClickCapture: (event) => {
+            const target = event.target;
+            if (target.dataset.value)
+                onSelect?.(target.dataset.value);
+        }, onKeyDown: handleKeyDown({
+            ...arrowKeyCallbacks,
+            Enter: enterSpaceClick,
+            Space: enterSpaceClick,
+            Tab: onTab,
+        }), role: "listbox", tabIndex: 0, children: options.map((option, index) => (_jsx("span", { "aria-label": option.label, "aria-selected": option.value === selectedValue, "data-active": activeElementId === option.id || undefined, "data-index": index, "data-value": option.value, id: option.id, role: "option", children: `${option.label}`.padStart(2, '0') }, option.id))) }));
+}
+//# sourceMappingURL=Listbox.js.map

package/dist/components/TimeInput/Listbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.js","sourceRoot":"","sources":["../../../src/components/TimeInput/Listbox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAgBtD,MAAM,UAAU,gBAAgB,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAyB;IAC3G,MAAM,EAAE,eAAe,EAAE,iBAAiB,EAAE,GAAG,kBAAkB,CAAC;QAC9D,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC;QACvC,eAAe,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,aAAa,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,IAAI;KACxG,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,GAAG,EAAE;QACzB,IAAI,eAAe;YAAE,cAAc,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,CAAC;IAClE,CAAC,CAAC;IAEF,OAAO,CACH,4BAEgB,UAAU,IAAI,EAAE,eAClB,oBAAoB,wBACV,IAAI,eACb,IAAI,kBACD,IAAI,EAClB,EAAE,EAAE,GAAG,IAAI,UAAU,EACrB,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE;YACtB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAyB,CAAC;YAC/C,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK;gBAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC/D,CAAC,EACD,SAAS,EAAE,aAAa,CAAC;YACrB,GAAG,iBAAiB;YACpB,KAAK,EAAE,eAAe;YACtB,KAAK,EAAE,eAAe;YACtB,GAAG,EAAE,KAAK;SACb,CAAC,EACF,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,CAAC,YAEV,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,6BACgB,MAAM,CAAC,KAAK,mBACT,MAAM,CAAC,KAAK,KAAK,aAAa,iBAChC,eAAe,KAAK,MAAM,CAAC,EAAE,IAAI,SAAS,gBAC3C,KAAK,gBACL,MAAM,CAAC,KAAK,EACxB,EAAE,EAAE,MAAM,CAAC,EAAE,EAEb,IAAI,EAAC,QAAQ,YAEZ,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,IAH9B,MAAM,CAAC,EAAE,CAIX,CACV,CAAC,GACA,CACT,CAAC;AACN,CAAC"}

package/dist/components/TimeInput/Segment.d.ts

@@ -0,0 +1,20 @@
+export declare const MINUTE_BOUNDS: {
+    readonly min: 0;
+    readonly max: 59;
+};
+export declare const HOUR_BOUNDS: {
+    readonly min: 1;
+    readonly max: 12;
+};
+export declare const NUMBER_PLACEHOLDER: "--";
+export type TimeInputType = 'hours' | 'meridiem' | 'minutes';
+type TimeInputSegmentProps<T extends string> = {
+    disabled?: boolean;
+    name: string;
+    readOnly?: boolean;
+    value?: T;
+    type: TimeInputType;
+    onChange: (value: T | null) => void;
+};
+export declare function TimeInputSegment<T extends string>({ disabled, name, readOnly, value: valueProp, type: kind, onChange, }: TimeInputSegmentProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};