@bspk/ui 1.2.0 → 1.3.0

package/dist/components/TabGroup/TabGroupExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabGroupExample.js","sourceRoot":"","sources":["../../../src/components/TabGroup/TabGroupExample.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TabGroupExample.js","sourceRoot":"","sources":["../../../src/components/TabGroup/TabGroupExample.tsx"],"names":[],"mappings":"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"}

package/dist/components/TabGroup/tab-group.css

@@ -9,19 +9,16 @@ ul[data-bspk=tab-group] li {
   position: relative;
   padding: 0 var(--spacing-sizing-04);
 }
-ul[data-bspk=tab-group] li:not([aria-disabled])[data-active] {
-  background: var(--interactions-neutral-hover-opacity);
-}
 ul[data-bspk=tab-group] li:not([aria-disabled]):active {
   background: var(--interactions-neutral-press-opacity);
 }
 ul[data-bspk=tab-group] li[aria-disabled] {
   color: var(--foreground-neutral-disabled-on-surface);
 }
-ul[data-bspk=tab-group] li[aria-selected] {
+ul[data-bspk=tab-group] li[aria-selected=true] {
   color: var(--foreground-brand-primary);
 }
-ul[data-bspk=tab-group] li[aria-selected]::after {
+ul[data-bspk=tab-group] li[aria-selected=true]::after {
   content: "";
   display: block;
   width: calc(100% - var(--spacing-sizing-04) * 2);
@@ -32,7 +29,7 @@ ul[data-bspk=tab-group] li[aria-selected]::after {
   border-top-right-radius: 2px;
   border-top-left-radius: 2px;
 }
-ul[data-bspk=tab-group] li[aria-selected] svg {
+ul[data-bspk=tab-group] li[aria-selected=true] svg {
   color: var(--surface-brand-primary);
 }
 ul[data-bspk=tab-group][data-show-trail][data-width=hug] {
@@ -42,5 +39,8 @@ ul[data-bspk=tab-group][data-show-trail][data-width=hug] {
 ul[data-bspk=tab-group][data-show-trail][data-width=hug] li {
   border-bottom: none;
 }
+ul[data-bspk=tab-group]:focus-within li:not([aria-disabled])[data-active] {
+  background: var(--interactions-neutral-hover-opacity);
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TabGroup/tab-group.css.js

@@ -12,19 +12,16 @@ ul[data-bspk=tab-group] li {
   position: relative;
   padding: 0 var(--spacing-sizing-04);
 }
-ul[data-bspk=tab-group] li:not([aria-disabled])[data-active] {
-  background: var(--interactions-neutral-hover-opacity);
-}
 ul[data-bspk=tab-group] li:not([aria-disabled]):active {
   background: var(--interactions-neutral-press-opacity);
 }
 ul[data-bspk=tab-group] li[aria-disabled] {
   color: var(--foreground-neutral-disabled-on-surface);
 }
-ul[data-bspk=tab-group] li[aria-selected] {
+ul[data-bspk=tab-group] li[aria-selected=true] {
   color: var(--foreground-brand-primary);
 }
-ul[data-bspk=tab-group] li[aria-selected]::after {
+ul[data-bspk=tab-group] li[aria-selected=true]::after {
   content: "";
   display: block;
   width: calc(100% - var(--spacing-sizing-04) * 2);
@@ -35,7 +32,7 @@ ul[data-bspk=tab-group] li[aria-selected]::after {
   border-top-right-radius: 2px;
   border-top-left-radius: 2px;
 }
-ul[data-bspk=tab-group] li[aria-selected] svg {
+ul[data-bspk=tab-group] li[aria-selected=true] svg {
   color: var(--surface-brand-primary);
 }
 ul[data-bspk=tab-group][data-show-trail][data-width=hug] {
@@ -45,6 +42,9 @@ ul[data-bspk=tab-group][data-show-trail][data-width=hug] {
 ul[data-bspk=tab-group][data-show-trail][data-width=hug] li {
   border-bottom: none;
 }
+ul[data-bspk=tab-group]:focus-within li:not([aria-disabled])[data-active] {
+  background: var(--interactions-neutral-hover-opacity);
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));

package/dist/components/TabList/TabList.d.ts

@@ -1,6 +1,6 @@
+import './tab-list.scss';
 import { ReactNode } from 'react';
 import { ElementProps } from '-/types/common';
-import './tab-list.scss';
 export type TabSize = 'large' | 'medium' | 'small';
 export type TabOption = {
     /**

package/dist/components/TabList/TabList.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './tab-list.css.js';
 import { Fragment, useMemo } from 'react';
 import { Badge } from '../Badge';
 import { Tooltip } from '../Tooltip';
 import { Truncated } from '../Truncated';
+import { useArrowNavigation } from '../../hooks/useArrowNavigation';
 import { useId } from '../../hooks/useId';
-import { useKeyNavigation } from '../../hooks/useKeyNavigation';
-import './tab-list.css.js';
+import { getElementById } from '../../utils/dom';
+import { handleKeyDown } from '../../utils/handleKeyDown';
+import { useIds } from '../../utils/useIds';
 const TAB_BADGE_SIZES = {
     large: 'small',
     medium: 'x-small',
     small: 'x-small',
 };
-const optionId = (id, index) => `${id}-item-${index + 1}`;
 /**
  * Navigation tool that organizes content across different screens and views.
  *
@@ -44,37 +46,45 @@ export function TabList({
 //
 onChange, value: valueProp, size = 'medium', options: optionsProp, width = 'hug', label, id: idProp, iconsOnly: iconsOnlyProp = false, ...containerProps }) {
     const id = useId(idProp);
-    const options = useMemo(() => {
-        if (!Array.isArray(optionsProp))
-            return [];
-        return optionsProp.map((opt, index) => ({ ...opt, id: optionId(id, index) }));
-    }, [id, optionsProp]);
+    const options = useIds(`tab-list-${id}`, optionsProp);
+    const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation({
+        ids: options.map((opt) => opt.id),
+        defaultActiveId: options.find((opt) => opt.value === valueProp)?.id,
+    });
     const value = useMemo(() => {
         const option = options.find((opt) => opt.value === valueProp);
         return option ? option.value : options[0]?.value;
     }, [options, valueProp]);
-    const { handleKeyDown, activeElementId, setElements, setActiveElementId } = useKeyNavigation({
-        onSelect: (nextActiveId) => {
-            onChange(options.find((opt) => opt.id === nextActiveId)?.value || '');
-        },
-    });
     // If all options have icons, we can hide the labels
     const iconsOnly = iconsOnlyProp === true && options.every((item) => item.icon && item.label);
-    const handleClick = (item) => (e) => {
-        setTimeout(() => e.target.focus(), 100);
+    const handleClick = (item) => () => {
         setActiveElementId(item.id);
         if (!item.disabled)
             onChange(item.value);
     };
-    return (_jsx("ul", { ...containerProps, "aria-label": label, "data-bspk-utility": "tab-list", "data-hug": width === 'hug' || undefined, "data-size": size, "data-width": width, id: id, ref: (node) => {
-            if (node) {
-                const newElements = Array.from(node.children).filter((el) => !el.hasAttribute('aria-disabled'));
-                setElements(newElements);
-            }
-        }, role: "tablist", children: options.map((item) => {
+    return (_jsx("ul", { ...containerProps, "aria-label": label, "data-bspk-utility": "tab-list", "data-hug": width === 'hug' || undefined, "data-size": size, "data-width": width, id: id, onFocusCapture: () => {
+            getElementById(activeElementId)?.focus();
+        }, onKeyDownCapture: handleKeyDown({
+            ...arrowKeyCallbacks,
+            Enter: (event) => {
+                event.preventDefault();
+                const activeOption = options.find((opt) => opt.id === activeElementId);
+                if (activeOption && !activeOption.disabled)
+                    onChange(activeOption.value);
+            },
+            Space: (event) => {
+                event.preventDefault();
+                const activeOption = options.find((opt) => opt.id === activeElementId);
+                if (activeOption && !activeOption.disabled)
+                    onChange(activeOption.value);
+            },
+        }), role: "tablist", children: options.map((item) => {
             const isSelected = item.value === value;
             const icon = isSelected ? item.iconSelected : item.icon;
-            return (_jsx(Fragment, { children: _jsx(Tooltip, { disabled: !iconsOnly, label: item.label, placement: "top", children: (triggerProps) => (_jsxs("li", { "aria-controls": id, "aria-disabled": item.disabled || undefined, "aria-selected": isSelected || undefined, "data-active": activeElementId === item.id || undefined, "data-value": item.value, id: item.id, onClick: handleClick(item), onKeyDown: handleKeyDown, role: "tab", tabIndex: isSelected ? 0 : -1, ...triggerProps, children: [icon && _jsx("span", { "aria-hidden": "true", children: icon }), !iconsOnly && _jsx(Truncated, { "data-label": true, children: item.label }), item.badge && !item.disabled && (_jsx(Badge, { count: item.badge, size: TAB_BADGE_SIZES[size] }))] })) }) }, item.id));
+            const isActive = (activeElementId && activeElementId === item.id) || undefined;
+            return (_jsx(Fragment, { children: _jsx(Tooltip, { disabled: !iconsOnly, label: item.label, placement: "top", children: (triggerProps) => (
+                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                    _jsxs("li", { ...triggerProps, "aria-controls": id, "aria-disabled": item.disabled || undefined, "aria-selected": isSelected, "data-active": isActive, "data-value": item.value, id: item.id, onClick: item.disabled ? undefined : handleClick(item), role: "tab", tabIndex: isActive ? 0 : -1, children: [icon && _jsx("span", { "aria-hidden": "true", children: icon }), !iconsOnly && _jsx(Truncated, { "data-label": true, children: item.label }), item.badge && !item.disabled && (_jsx(Badge, { count: item.badge, size: TAB_BADGE_SIZES[size] }))] })) }) }, item.id));
         }) }));
 }
 //# sourceMappingURL=TabList.js.map

package/dist/components/TabList/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../../src/components/TabList/TabList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../../src/components/TabList/TabList.tsx"],"names":[],"mappings":"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"}

package/dist/components/TabList/tab-list.css

@@ -3,7 +3,7 @@ ul[data-bspk-utility=tab-list] {
   display: flex;
   flex-direction: row;
   list-style: none;
-  width: fit-content;
+  width: 100%;
   height: var(--height);
   font: var(--font);
   --icon-size: var(--spacing-sizing-05);
@@ -27,12 +27,13 @@ ul[data-bspk-utility=tab-list][data-size=large] {
 }
 ul[data-bspk-utility=tab-list]:has(:focus-visible) {
   outline: 2px solid var(--stroke-neutral-focus);
-  outline-offset: 2px;
+  outline-offset: -1px;
+  position: relative;
+  z-index: var(--z-index-focus);
 }
 ul[data-bspk-utility=tab-list] li {
   list-style: none;
   cursor: pointer;
-  flex-grow: var(--item-flex-grow);
   font: var(--font);
   white-space: nowrap;
   outline: none;
@@ -40,22 +41,18 @@ ul[data-bspk-utility=tab-list] li {
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: center;
   gap: var(--spacing-sizing-02);
+  min-width: 0;
 }
 ul[data-bspk-utility=tab-list] li[aria-disabled] {
   cursor: not-allowed;
 }
 ul[data-bspk-utility=tab-list] li span {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
   pointer-events: none;
 }
 ul[data-bspk-utility=tab-list] li [data-label][style] {
   justify-content: left;
-  max-width: 200px !important;
+  max-width: 200px;
 }
 ul[data-bspk-utility=tab-list] li svg {
   width: var(--icon-size);

package/dist/components/TabList/tab-list.css.js

@@ -6,7 +6,7 @@ style.appendChild(document.createTextNode(`ul[data-bspk-utility=tab-list] {
   display: flex;
   flex-direction: row;
   list-style: none;
-  width: fit-content;
+  width: 100%;
   height: var(--height);
   font: var(--font);
   --icon-size: var(--spacing-sizing-05);
@@ -30,12 +30,13 @@ ul[data-bspk-utility=tab-list][data-size=large] {
 }
 ul[data-bspk-utility=tab-list]:has(:focus-visible) {
   outline: 2px solid var(--stroke-neutral-focus);
-  outline-offset: 2px;
+  outline-offset: -1px;
+  position: relative;
+  z-index: var(--z-index-focus);
 }
 ul[data-bspk-utility=tab-list] li {
   list-style: none;
   cursor: pointer;
-  flex-grow: var(--item-flex-grow);
   font: var(--font);
   white-space: nowrap;
   outline: none;
@@ -43,22 +44,18 @@ ul[data-bspk-utility=tab-list] li {
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: center;
   gap: var(--spacing-sizing-02);
+  min-width: 0;
 }
 ul[data-bspk-utility=tab-list] li[aria-disabled] {
   cursor: not-allowed;
 }
 ul[data-bspk-utility=tab-list] li span {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
   pointer-events: none;
 }
 ul[data-bspk-utility=tab-list] li [data-label][style] {
   justify-content: left;
-  max-width: 200px !important;
+  max-width: 200px;
 }
 ul[data-bspk-utility=tab-list] li svg {
   width: var(--icon-size);

package/dist/components/Tag/Tag.d.ts

@@ -1,5 +1,5 @@
-import { ColorVariant } from '-/utils/colorVariants';
 import './tag.scss';
+import { ColorVariant } from '-/utils/colorVariants';
 export type TagProps = {
     /**
      * The label of the tag.

package/dist/components/Tag/Tag.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Truncated } from '../Truncated';
 import './tag.css.js';
+import { Truncated } from '../Truncated';
 /**
  * A non-interactive visual indicators to draw attention or categorization of a component.
  *

package/dist/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAInD,OAAO,YAAY,CAAC;AA6BpB;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,GAAG,OAAO,EAAE,IAAI,GAAG,OAAO,EAAE,OAAO,GAAG,MAAM,EAAY;IACtF,OAAO,CACH,6BAAgB,KAAK,gBAAa,KAAK,eAAa,IAAI,kBAAgB,OAAO,aAC1E,KAAK,IAAI,KAAC,SAAS,cAAE,KAAK,GAAa,EACvC,OAAO,KAAK,aAAa,IAAI,sCAAqB,IAChD,CACV,CAAC;AACN,CAAC"}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,YAAY,CAAC;AACpB,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AA8BnD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,GAAG,OAAO,EAAE,IAAI,GAAG,OAAO,EAAE,OAAO,GAAG,MAAM,EAAY;IACtF,OAAO,CACH,6BAAgB,KAAK,gBAAa,KAAK,eAAa,IAAI,kBAAgB,OAAO,aAC1E,KAAK,IAAI,KAAC,SAAS,cAAE,KAAK,GAAa,EACvC,OAAO,KAAK,aAAa,IAAI,sCAAqB,IAChD,CACV,CAAC;AACN,CAAC"}

package/dist/components/Tag/TagExample.d.ts

@@ -1,3 +1,4 @@
 import { TagProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<TagProps>[];
 export declare const TagExample: ComponentExample<TagProps>;

package/dist/components/Tag/TagExample.js

@@ -1,14 +1,15 @@
-export const TagExample = {
-    presets: [
-        {
-            label: 'Long Label',
-            propState: {
-                label: 'Hello, this is a very long tag label that should be truncated if it exceeds the container width.',
-                color: 'purple',
-                size: 'small',
-                variant: 'flat',
-            },
+export const presets = [
+    {
+        label: 'Long Label',
+        propState: {
+            label: 'Hello, this is a very long tag label that should be truncated if it exceeds the container width.',
+            color: 'purple',
+            size: 'small',
+            variant: 'flat',
         },
-    ],
+    },
+];
+export const TagExample = {
+    presets,
 };
 //# sourceMappingURL=TagExample.js.map

package/dist/components/Tag/TagExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagExample.js","sourceRoot":"","sources":["../../../src/components/Tag/TagExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,UAAU,GAA+B;IAClD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,KAAK,EAAE,kGAAkG;gBACzG,KAAK,EAAE,QAAQ;gBACf,IAAI,EAAE,OAAO;gBACb,OAAO,EAAE,MAAM;aAClB;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"TagExample.js","sourceRoot":"","sources":["../../../src/components/Tag/TagExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,OAAO,GAAuB;IACvC;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,KAAK,EAAE,kGAAkG;YACzG,KAAK,EAAE,QAA6B;YACpC,IAAI,EAAE,OAA2B;YACjC,OAAO,EAAE,MAA6B;SACzC;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAA+B;IAClD,OAAO;CACV,CAAC"}

package/dist/components/TextField/TextField.js

@@ -28,6 +28,6 @@ import { TextInput } from '../TextInput';
  * @phase UXReview
  */
 export function TextField({ label, errorMessage, helperText, controlId, labelTrailing, required, invalid, ...inputProps }) {
-    return (_jsx(FormField, { controlId: controlId, "data-bspk": "text-field", errorMessage: errorMessage, helperText: helperText, invalid: invalid, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (_jsx(TextInput, { ...inputProps, ...fieldProps, "aria-label": label, id: controlId, invalid: invalid, required: required, value: inputProps.value ?? '' })) }));
+    return (_jsx(FormField, { controlId: controlId, "data-bspk": "text-field", errorMessage: errorMessage, helperText: helperText, invalid: invalid, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (_jsx(TextInput, { ...inputProps, ...fieldProps, id: controlId, invalid: invalid, required: required, value: inputProps.value ?? '' })) }));
 }
 //# sourceMappingURL=TextField.js.map

package/dist/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAsB,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAkB,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAInE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,SAAS,CAAC,EACtB,KAAK,EACL,YAAY,EACZ,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,OAAO,EACP,GAAG,UAAU,EACA;IACb,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,YAAY,EACtB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,SAAS,OACF,UAAU,KACV,UAAU,gBACF,KAAK,EACjB,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,CAAC,KAAK,IAAI,EAAE,GAC/B,CACL,GACO,CACf,CAAC;AACN,CAAC"}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAsB,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAkB,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAInE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,SAAS,CAAC,EACtB,KAAK,EACL,YAAY,EACZ,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,OAAO,EACP,GAAG,UAAU,EACA;IACb,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,YAAY,EACtB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,SAAS,OACF,UAAU,KACV,UAAU,EACd,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,CAAC,KAAK,IAAI,EAAE,GAC/B,CACL,GACO,CACf,CAAC;AACN,CAAC"}

package/dist/components/TextField/TextFieldExample.d.ts

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

package/dist/components/TextField/TextFieldExample.js

@@ -0,0 +1,6 @@
+export const TextFieldExample = {
+    variants: {
+        type: false,
+    },
+};
+//# sourceMappingURL=TextFieldExample.js.map

package/dist/components/TextField/TextFieldExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldExample.js","sourceRoot":"","sources":["../../../src/components/TextField/TextFieldExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,gBAAgB,GAAqC;IAC9D,QAAQ,EAAE;QACN,IAAI,EAAE,KAAK;KACd;CACJ,CAAC"}

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

@@ -1,6 +1,6 @@
+import './text-input.scss';
 import { ChangeEvent, HTMLInputTypeAttribute, ReactNode } from 'react';
 import { CommonProps, ElementProps, FormFieldControlProps, SetRef } from '-/types/common';
-import './text-input.scss';
 export declare const DEFAULT: {
     readonly size: "medium";
     readonly value: "";
@@ -73,6 +73,6 @@ export type TextInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'inv
  * @name TextInput
  * @phase Utility
  */
-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, owner, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, inputProps, ...props }: ElementProps<TextInputProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+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: '',
@@ -27,11 +30,31 @@ export const DEFAULT = {
  * @name TextInput
  * @phase Utility
  */
-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 = true, owner, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, inputProps, ...props }) {
+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", { ...props, "data-bspk": "text-input", "data-bspk-owner": owner || undefined, "data-clear-hidden": showClearButton === false || undefined, "data-disabled": disabled || undefined, "data-empty": !value.toString().length || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || 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, 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 }), showClearButton !== false && (_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" }))] }));
 }
 //# 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;AAG/C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,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;AAuDX;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,SAAS,CAAC,EACtB,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,eAAe,GAAG,IAAI,EACtB,KAAK,EACL,kBAAkB,EAAE,eAAe,EACnC,mBAAmB,EAAE,gBAAgB,EAErC,UAAU,EACV,GAAG,KAAK,EAC0B;IAClC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,OAAO,GAAG,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,WAAW,CAAC;IAEtD,OAAO,CACH,kBACQ,KAAK,eACC,YAAY,qBACL,KAAK,IAAI,SAAS,uBAChB,eAAe,KAAK,KAAK,IAAI,SAAS,mBAC1C,QAAQ,IAAI,SAAS,gBACxB,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,SAAS,kBACnC,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,eACzB,IAAI,EACf,GAAG,EAAE,YAAY,aAEhB,OAAO,IAAI,+CAAoB,OAAO,GAAQ,EAE/C,mBACQ,UAAU,sBACI,eAAe,IAAI,SAAS,uBAC3B,gBAAgB,IAAI,SAAS,kBAClC,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,EACjD,eAAe,KAAK,KAAK,IAAI,CAC1B,+BAAmB,OAAO,sBAAY,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,YAC7D,KAAC,SAAS,KAAG,GACR,CACZ,IACC,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/components/TextInput/TextInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/TextInput/TextInputExample.js

@@ -9,6 +9,8 @@ export const TextInputExample = {
                 leading: '$',
                 trailing: undefined,
                 placeholder: 'currency',
+                name: 'currency',
+                'aria-label': 'Currency input',
             },
         },
         {
@@ -18,6 +20,8 @@ export const TextInputExample = {
                 leading: undefined,
                 trailing: '%',
                 placeholder: 'percent',
+                name: 'percent',
+                'aria-label': 'Percent input',
             },
         },
         {
@@ -27,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":";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;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], [data-bspk=text-input][data-clear-hidden] {
-  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-clear-hidden] 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 {