@bspk/ui 1.3.2 → 1.3.4

package/dist/components/StylesProviderDemo/exampleCss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"exampleCss.js","sourceRoot":"","sources":["../../../src/components/StylesProviderDemo/exampleCss.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAA8B;IAClD,OAAO,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAw2DR;CACJ,CAAC"}

package/dist/components/Switch/Switch.d.ts

@@ -1,7 +1,7 @@
 import './switch.scss';
 import { ChangeEvent } from 'react';
 import { CommonProps } from '-/types/common';
-export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'value'> & {
+export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
     /**
      * Marks the control as checked.
      *
@@ -21,6 +21,8 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'valu
      * @default false
      */
     readOnly?: boolean;
+    /** The value of the switch. */
+    value: string;
 };
 /**
  * A control element that allows users to toggle between two states, typically representing on/off and inherits
@@ -31,13 +33,13 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'valu
  *     import { useState } from 'react';
  *     import { Switch } from '@bspk/ui/Switch';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [isChecked, setIsChecked] = useState<boolean>(false);
  *
  *         return (
  *             <Switch
  *                 aria-label="Example aria-label"
- *                 name="Example name"
+ *                 name="example-name"
  *                 onChange={setIsChecked}
  *                 checked={isChecked}
  *             />

package/dist/components/Switch/Switch.js

@@ -9,13 +9,13 @@ import './switch.css.js';
  *     import { useState } from 'react';
  *     import { Switch } from '@bspk/ui/Switch';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [isChecked, setIsChecked] = useState<boolean>(false);
  *
  *         return (
  *             <Switch
  *                 aria-label="Example aria-label"
- *                 name="Example name"
+ *                 name="example-name"
  *                 onChange={setIsChecked}
  *                 checked={isChecked}
  *             />

package/dist/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AA0BvB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,QAAQ,EAAE,YAAY,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe;IACvG,MAAM,QAAQ,GAAG,QAAQ,IAAI,YAAY,CAAC;IAE1C,OAAO,CACH,6BAAgB,QAAQ,aACpB,mBACQ,KAAK,mBACM,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,IAAI,EAAC,UAAU,GACjB,EACF,qCAAoB,IACjB,CACV,CAAC;AACN,CAAC"}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AA4BvB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,QAAQ,EAAE,YAAY,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe;IACvG,MAAM,QAAQ,GAAG,QAAQ,IAAI,YAAY,CAAC;IAE1C,OAAO,CACH,6BAAgB,QAAQ,aACpB,mBACQ,KAAK,mBACM,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,IAAI,EAAC,UAAU,GACjB,EACF,qCAAoB,IACjB,CACV,CAAC;AACN,CAAC"}

package/dist/components/SwitchOption/SwitchOption.js

@@ -12,6 +12,6 @@ import { ToggleOption } from '../ToggleOption';
 export function SwitchOption({ label: labelProp, description, ...checkboxProps }) {
     const label = labelProp || description;
     const ariaLabel = description ? `${labelProp} - ${description}` : labelProp;
-    return (label && (_jsx(ToggleOption, { "data-bspk": "switch-option", description: description, label: label, children: _jsx(Switch, { ...checkboxProps, "aria-label": ariaLabel }) })));
+    return (label && (_jsx(ToggleOption, { "data-bspk-owner": "switch-option", description: description, label: label, children: _jsx(Switch, { ...checkboxProps, "aria-label": ariaLabel }) })));
 }
 //# sourceMappingURL=SwitchOption.js.map

package/dist/components/SwitchOption/SwitchOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchOption.js","sourceRoot":"","sources":["../../../src/components/SwitchOption/SwitchOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAA4B,MAAM,2BAA2B,CAAC;AAInF;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,aAAa,EAAqB;IAC/F,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IACvC,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,MAAM,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAE5E,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBAAW,eAAe,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YAC1E,KAAC,MAAM,OAAK,aAAa,gBAAc,SAAS,GAAI,GACzC,CAClB,CACJ,CAAC;AACN,CAAC"}
+{"version":3,"file":"SwitchOption.js","sourceRoot":"","sources":["../../../src/components/SwitchOption/SwitchOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAA4B,MAAM,2BAA2B,CAAC;AAInF;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,aAAa,EAAqB;IAC/F,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IACvC,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,MAAM,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAE5E,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,uBAAiB,eAAe,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YAChF,KAAC,MAAM,OAAK,aAAa,gBAAc,SAAS,GAAI,GACzC,CAClB,CACJ,CAAC;AACN,CAAC"}

package/dist/components/TabGroup/TabGroup.d.ts

@@ -18,7 +18,7 @@ export type TabGroupProps = Omit<TabListProps<TabOption>, 'iconsOnly'> & {
  *     import { useState } from 'react';
  *     import { TabGroup } from '@bspk/ui/TabGroup';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [selectedTab, setSelectedTab] = useState<string>();
  *
  *         return (
@@ -37,5 +37,5 @@ export type TabGroupProps = Omit<TabListProps<TabOption>, 'iconsOnly'> & {
  * @name TabGroup
  * @phase UXReview
  */
-export declare function TabGroup({ onChange: onTabChange, value, size, options, width, showTrail, ...containerProps }: ElementProps<TabGroupProps, 'ul'>): import("react/jsx-runtime").JSX.Element;
+export declare function TabGroup({ onChange: onTabChange, value, size, options, width, showTrail, ...containerProps }: ElementProps<TabGroupProps, 'ul'>): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TabGroup/TabGroup.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import './tab-group.css.js';
 import { TabList } from '../TabList';
 /**
@@ -8,7 +8,7 @@ import { TabList } from '../TabList';
  *     import { useState } from 'react';
  *     import { TabGroup } from '@bspk/ui/TabGroup';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [selectedTab, setSelectedTab] = useState<string>();
  *
  *         return (
@@ -29,7 +29,7 @@ import { TabList } from '../TabList';
  */
 export function TabGroup({ onChange: onTabChange, value, size = 'medium', options, width = 'hug', showTrail = false, ...containerProps }) {
     if (!Array.isArray(options) || options.length < 2)
-        return _jsx(_Fragment, {});
+        return null;
     return (_jsx(TabList, { "data-bspk": "tab-group", "data-show-trail": showTrail || undefined, onChange: onTabChange, options: options, size: size, value: value, width: width, ...containerProps }));
 }
 //# sourceMappingURL=TabGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabGroup.js","sourceRoot":"","sources":["../../../src/components/TabGroup/TabGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAA2B,MAAM,sBAAsB,CAAC;AAexE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,QAAQ,EAAE,WAAW,EACrB,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,KAAK,EACjB,GAAG,cAAc,EACe;IAChC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,mBAAK,CAAC;IAChE,OAAO,CACH,KAAC,OAAO,iBACM,WAAW,qBACJ,SAAS,IAAI,SAAS,EACvC,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,KACR,cAAc,GACpB,CACL,CAAC;AACN,CAAC"}
+{"version":3,"file":"TabGroup.js","sourceRoot":"","sources":["../../../src/components/TabGroup/TabGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAA2B,MAAM,sBAAsB,CAAC;AAexE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,QAAQ,EAAE,WAAW,EACrB,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,KAAK,EACjB,GAAG,cAAc,EACe;IAChC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,IAAI,CAAC;IAC/D,OAAO,CACH,KAAC,OAAO,iBACM,WAAW,qBACJ,SAAS,IAAI,SAAS,EACvC,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,KACR,cAAc,GACpB,CACL,CAAC;AACN,CAAC"}

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

@@ -75,8 +75,11 @@ export type TabListProps<O extends TabOption = TabOption> = {
      */
     size?: TabSize;
     /**
-     * When 'fill' the options will fill the width of the container. When 'hug', the options will be as wide as their
-     * content.
+     * Determines how the tab options use horizontal space.
+     *
+     * If set to 'fill', options expand to fill the container's width.
+     *
+     * If set to 'hug', options only take up as much space as the content requires.
      *
      * @default hug
      */
@@ -106,7 +109,7 @@ export type TabListProps<O extends TabOption = TabOption> = {
  *     import { useState } from 'react';
  *     import { TabList } from '@bspk/ui/TabList';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [selectedTab, setSelectedTab] = useState<string>();
  *
  *         return (

package/dist/components/TabList/TabList.js

@@ -23,7 +23,7 @@ const TAB_BADGE_SIZES = {
  *     import { useState } from 'react';
  *     import { TabList } from '@bspk/ui/TabList';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [selectedTab, setSelectedTab] = useState<string>();
  *
  *         return (
@@ -48,7 +48,7 @@ onChange, value: valueProp, size = 'medium', options: optionsProp, width = 'hug'
     const id = useId(idProp);
     const options = useIds(`tab-list-${id}`, optionsProp);
     const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation({
-        ids: options.map((opt) => opt.id),
+        ids: options.filter((o) => !o.disabled).map((o) => o.id),
         defaultActiveId: options.find((opt) => opt.value === valueProp)?.id,
     });
     const value = useMemo(() => {
@@ -62,6 +62,9 @@ onChange, value: valueProp, size = 'medium', options: optionsProp, width = 'hug'
         if (!item.disabled)
             onChange(item.value);
     };
+    // ensure an option is always focusable
+    const focusableOption = useMemo(() => options.find((item) => (activeElementId ? activeElementId === item.id : item.value === value)) ||
+        options[0], [activeElementId, options, 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, onFocusCapture: () => {
             getElementById(activeElementId)?.focus();
         }, onKeyDownCapture: handleKeyDown({
@@ -84,7 +87,7 @@ onChange, value: valueProp, size = 'medium', options: optionsProp, width = 'hug'
             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));
+                    _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: focusableOption.id === item.id ? 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

@@ -57,5 +57,11 @@ ul[data-bspk-utility=tab-list] li [data-label][style] {
 ul[data-bspk-utility=tab-list] li svg {
   width: var(--icon-size);
 }
+ul[data-bspk-utility=tab-list]:not([data-bspk]):focus-within li:not([aria-disabled])[data-active] {
+  background-color: var(--interactions-neutral-hover-opacity);
+}
+ul[data-bspk-utility=tab-list]:not([data-bspk]):focus-within li:not([aria-disabled])[aria-selected=true] {
+  background-color: var(--surface-brand-primary-highlight);
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -60,6 +60,12 @@ ul[data-bspk-utility=tab-list] li [data-label][style] {
 ul[data-bspk-utility=tab-list] li svg {
   width: var(--icon-size);
 }
+ul[data-bspk-utility=tab-list]:not([data-bspk]):focus-within li:not([aria-disabled])[data-active] {
+  background-color: var(--interactions-neutral-hover-opacity);
+}
+ul[data-bspk-utility=tab-list]:not([data-bspk]):focus-within li:not([aria-disabled])[aria-selected=true] {
+  background-color: var(--surface-brand-primary-highlight);
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));

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

@@ -32,7 +32,7 @@ export type TagProps = {
  * @example
  *     import { Tag } from '@bspk/ui/Tag';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <Tag label="Example Tag" variant="flat" color="primary" />;
  *     }
  *

package/dist/components/Tag/Tag.js

@@ -7,7 +7,7 @@ import { Truncated } from '../Truncated';
  * @example
  *     import { Tag } from '@bspk/ui/Tag';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <Tag label="Example Tag" variant="flat" color="primary" />;
  *     }
  *

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

@@ -1,32 +1,13 @@
 import './textarea.scss';
 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.
-     *
-     * @type (next: String, Event) => void
-     * @required
-     */
-    onChange: (next: string, event?: ChangeEvent<HTMLTextAreaElement>) => void;
+import { FieldControlProps, SetRef } from '-/types/common';
+export type TextareaProps = FieldControlProps<string, ChangeEvent<HTMLTextAreaElement>> & {
     /**
      * The text size of the field.
      *
      * @default medium
      */
     textSize?: 'large' | 'medium' | 'small';
-    /**
-     * The value of the field.
-     *
-     * @type multiline
-     */
-    value?: string;
-    /**
-     * The textarea control name of the field.
-     *
-     * @required
-     */
-    name: string;
     /** The ref of the field. */
     innerRef?: SetRef<HTMLTextAreaElement>;
     /** The placeholder of the field. */
@@ -63,20 +44,33 @@ export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'inva
  * content within maximum and minimum rows. A character counter when a maxLength is set to show the number of characters
  * remaining below the limit.
  *
+ * For a more complete example with field usage, see the TextareaField component.
+ *
  * @example
  *     import { useState } from 'react';
  *     import { Textarea } from '@bspk/ui/Textarea';
  *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
+ *     function ExampleWithField() {
+ *         const [value, setValue] = useState('');
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Example Textarea</FieldLabel>
+ *                 <Textarea name="example-name" onChange={setValue} value={value} />
+ *                 <FieldDescription>This is an example textarea field.</FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ *     function ExampleStandalone() {
+ *         const [value, setValue] = useState('');
  *
- *         return <Textarea aria-label="Example aria-label" name="Example name" onChange={setValue} value={value} />;
+ *         return <Textarea aria-label="Enter text" name="example-name" onChange={setValue} value={value} />;
  *     }
  *
  * @element
  *
  * @name Textarea
- * @phase Utility
+ * @phase UXReview
  */
-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;
+export declare function Textarea({ invalid: invalidProp, onChange, textSize, value, name, innerRef, placeholder, id: idProp, minRows, maxRows, required, readOnly, disabled, 'aria-label': ariaLabel, ...otherProps }: TextareaProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Textarea/Textarea.js

@@ -1,7 +1,7 @@
 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 { useFieldInit } from '../Field';
 import { cssWithVars } from '../../utils/cwv';
 /**
  * A component that allows users to input large amounts of text that could span multiple lines.
@@ -10,24 +10,42 @@ import { cssWithVars } from '../../utils/cwv';
  * content within maximum and minimum rows. A character counter when a maxLength is set to show the number of characters
  * remaining below the limit.
  *
+ * For a more complete example with field usage, see the TextareaField component.
+ *
  * @example
  *     import { useState } from 'react';
  *     import { Textarea } from '@bspk/ui/Textarea';
  *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
+ *     function ExampleWithField() {
+ *         const [value, setValue] = useState('');
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Example Textarea</FieldLabel>
+ *                 <Textarea name="example-name" onChange={setValue} value={value} />
+ *                 <FieldDescription>This is an example textarea field.</FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ *     function ExampleStandalone() {
+ *         const [value, setValue] = useState('');
  *
- *         return <Textarea aria-label="Example aria-label" name="Example name" onChange={setValue} value={value} />;
+ *         return <Textarea aria-label="Enter text" name="example-name" onChange={setValue} value={value} />;
  *     }
  *
  * @element
  *
  * @name Textarea
- * @phase Utility
+ * @phase UXReview
  */
-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;
+export function Textarea({ invalid: invalidProp, onChange, textSize = 'medium', value = '', name, innerRef, placeholder, id: idProp, minRows = 4, maxRows = 10, required = false, readOnly, disabled, 'aria-label': ariaLabel, ...otherProps }) {
+    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
+        idProp,
+        required,
+        disabled,
+        readOnly,
+        invalidProp,
+    });
     const onInput = () => {
         const target = textareaElement.current;
         if (!target)
@@ -38,13 +56,13 @@ export function Textarea({ invalid: invalidProp, onChange, textSize = 'medium',
         target.nextSibling.innerText = `${target.value}\n`;
     };
     const textareaElement = useRef(null);
-    return (_jsxs("div", { "data-bspk": "textarea", "data-size": textSize, style: cssWithVars({
+    return (_jsxs("div", { "data-bspk": "textarea", "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-read-only": readOnly || undefined, "data-size": textSize, style: cssWithVars({
             '--min-rows': minRows,
             '--max-rows': maxRows,
-        }), 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) => {
+        }), children: [_jsx("textarea", { ...otherProps, "aria-describedby": ariaDescribedBy || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-invalid": invalid || undefined, "aria-label": ariaLabel || undefined, disabled: disabled, 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) => {
+                }, onChange: (event) => onChange(event.target.value, event), onInput: onInput, placeholder: placeholder, readOnly: readOnly, ref: (node) => {
                     innerRef?.(node);
                     textareaElement.current = node;
                     onInput();

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

@@ -1 +1 @@
-{"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"}
+{"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,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAuC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,QAAQ,GAAG,QAAQ,EACnB,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,EAAE,EACZ,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACD;IACZ,MAAM,EAAE,EAAE,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;QACpE,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,WAAW;KACd,CAAC,CAAC;IAEH,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,mBACL,QAAQ,IAAI,SAAS,kBACtB,OAAO,IAAI,SAAS,oBAClB,QAAQ,IAAI,SAAS,eAC1B,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,IAAI,SAAS,EAClC,QAAQ,EAAE,QAAQ,EAClB,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,QAAQ,EAAE,QAAQ,EAClB,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/textarea.css

@@ -8,6 +8,8 @@
   border: 1px solid var(--border-color);
   border-radius: var(--radius-sm);
   overflow: hidden;
+  color: var(--foreground-neutral-on-surface);
+  background-color: var(--surface-neutral-t1-base);
   --border-color: var(--stroke-neutral-base);
   --font: var(--body-base);
   --line-height: 20px;
@@ -49,24 +51,36 @@
 [data-bspk=textarea] textarea {
   text-wrap: break-word;
   resize: none;
-  color: var(--foreground-neutral-on-surface);
-  background-color: var(--surface-neutral-t1-base);
+  color: inherit;
+  background-color: inherit;
+  outline: none;
 }
 [data-bspk=textarea] textarea::placeholder {
   color: var(--foreground-neutral-on-surface-variant-03);
 }
-[data-bspk=textarea] textarea:focus-within {
-  outline: none;
-  color: var(--foreground-neutral-on-surface);
+[data-bspk=textarea]:hover:not(:focus-within) {
+  background: linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
+[data-bspk=textarea]:active:not(:focus-within) {
+  background: linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=textarea] textarea:disabled {
-  pointer-events: none;
+[data-bspk=textarea][data-readonly] {
+  --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));
-  color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=textarea] textarea:read-only {
+[data-bspk=textarea][data-disabled], [data-bspk=textarea]: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));
-  cursor: not-allowed;
+}
+[data-bspk=textarea][data-disabled] > *, [data-bspk=textarea]:has([data-main-input][disabled]) > * {
+  color: var(--foreground-neutral-disabled-on-surface);
+}
+[data-bspk=textarea][data-invalid] {
+  --border-color: var(--status-error);
+}
+[data-bspk=textarea]:focus-within {
+  --border-color: var(--stroke-neutral-focus);
+  outline: 1px solid var(--stroke-neutral-focus);
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -11,6 +11,8 @@ style.appendChild(document.createTextNode(`[data-bspk=textarea] {
   border: 1px solid var(--border-color);
   border-radius: var(--radius-sm);
   overflow: hidden;
+  color: var(--foreground-neutral-on-surface);
+  background-color: var(--surface-neutral-t1-base);
   --border-color: var(--stroke-neutral-base);
   --font: var(--body-base);
   --line-height: 20px;
@@ -52,24 +54,36 @@ style.appendChild(document.createTextNode(`[data-bspk=textarea] {
 [data-bspk=textarea] textarea {
   text-wrap: break-word;
   resize: none;
-  color: var(--foreground-neutral-on-surface);
-  background-color: var(--surface-neutral-t1-base);
+  color: inherit;
+  background-color: inherit;
+  outline: none;
 }
 [data-bspk=textarea] textarea::placeholder {
   color: var(--foreground-neutral-on-surface-variant-03);
 }
-[data-bspk=textarea] textarea:focus-within {
-  outline: none;
-  color: var(--foreground-neutral-on-surface);
+[data-bspk=textarea]:hover:not(:focus-within) {
+  background: linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
+[data-bspk=textarea]:active:not(:focus-within) {
+  background: linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=textarea] textarea:disabled {
-  pointer-events: none;
+[data-bspk=textarea][data-readonly] {
+  --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));
-  color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=textarea] textarea:read-only {
+[data-bspk=textarea][data-disabled], [data-bspk=textarea]: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));
-  cursor: not-allowed;
+}
+[data-bspk=textarea][data-disabled] > *, [data-bspk=textarea]:has([data-main-input][disabled]) > * {
+  color: var(--foreground-neutral-disabled-on-surface);
+}
+[data-bspk=textarea][data-invalid] {
+  --border-color: var(--status-error);
+}
+[data-bspk=textarea]:focus-within {
+  --border-color: var(--stroke-neutral-focus);
+  outline: 1px solid var(--stroke-neutral-focus);
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -1,39 +1,15 @@
-import { FormFieldWrapProps } from '-/components/FormField';
+import { FormFieldControlProps } from '-/components/FormField';
 import { TextareaProps } from '-/components/Textarea';
-export type TextareaFieldProps = FormFieldWrapProps<TextareaProps> & {
-    /**
-     * Whether the character count should be displayed.
-     *
-     * @default true
-     */
-    characterCount?: boolean;
-};
+export type TextareaFieldProps = FormFieldControlProps<TextareaProps>;
 /**
- * A component that allows users to input large amounts of text that could span multiple lines.
+ * A field wrapper for the Textarea component.
  *
  * This component takes properties from the FormField and Textarea components.
  *
- * @example
- *     import { useState } from 'react';
- *     import { TextareaField } from '@bspk/ui/TextareaField';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>();
- *
- *         return (
- *             <TextareaField
- *                 aria-label="Example aria-label"
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={setValue}
- *                 value={value}
- *             />
- *         );
- *     }
- *
  * @name TextareaField
  * @phase UXReview
+ *
+ * @generated
  */
-export declare function TextareaField({ label, errorMessage, helperText, controlId, required, invalid, characterCount, ...inputProps }: TextareaFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextareaField({ label, helperText, labelTrailing, errorMessage, ...controlProps }: TextareaFieldProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TextareaField/TextareaField.js

@@ -1,43 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormField } from '../FormField';
 import { Textarea } from '../Textarea';
-import { Txt } from '../Txt';
-import { tryIntParse } from '../../utils/tryIntPsrse';
 /**
- * A component that allows users to input large amounts of text that could span multiple lines.
+ * A field wrapper for the Textarea component.
  *
  * This component takes properties from the FormField and Textarea components.
  *
- * @example
- *     import { useState } from 'react';
- *     import { TextareaField } from '@bspk/ui/TextareaField';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>();
- *
- *         return (
- *             <TextareaField
- *                 aria-label="Example aria-label"
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={setValue}
- *                 value={value}
- *             />
- *         );
- *     }
- *
  * @name TextareaField
  * @phase UXReview
+ *
+ * @generated
  */
-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: `${inputProps?.value?.length || 0}${maxLength > 0 ? `/${maxLength}` : ''}` })), required: required, children: (fieldProps) => (_jsx(Textarea
-        //
-        , { ...inputProps, ...fieldProps, invalid: invalid })) }));
+export function TextareaField({ label, helperText, labelTrailing, errorMessage, ...controlProps }) {
+    return (_jsx(FormField, { errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, children: _jsx(Textarea, { ...controlProps }) }));
 }
 //# sourceMappingURL=TextareaField.js.map