@bspk/ui 1.1.14 → 1.1.15

package/dist/Textarea.js

@@ -3,24 +3,31 @@ import { styleAdd } from './utils/styleAdd';
 styleAdd(`[data-bspk=textarea]{/*! 
 --min-rows: is set via inline style 
 --max-rows: is set via inline style
-*/display:grid;width:100%;--font: var(--body-base);--line-height: 20px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea][data-size=small]{--font: var(--body-small);--line-height: 20px;--padding: var(--spacing-sizing-02)}[data-bspk=textarea][data-size=large]{--font: var(--body-large);--line-height: 24px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea] [data-replicated-value]{white-space:pre-wrap;visibility:hidden}[data-bspk=textarea] textarea,[data-bspk=textarea] [data-replicated-value]{width:100%;font:var(--font);border:1px solid var(--border-color);padding:var(--padding);grid-area:1/1/2/2;min-height:calc(var(--line-height)*var(--min-rows) + var(--padding)*2);max-height:calc(var(--line-height)*var(--max-rows) + var(--padding)*2)}[data-bspk=textarea] textarea{--border-color: var(--stroke-neutral-base);resize:vertical;color:var(--foreground-neutral-on-surface);background-color:var(--surface-neutral-t1-base);border-radius:var(--radius-small)}[data-bspk=textarea] textarea:focus-within{--border-color: var(--stroke-neutral-focus);outline:none;color:var(--foreground-neutral-on-surface)}[data-bspk=textarea] textarea:disabled{pointer-events:none;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{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-on-surface-variant-02);cursor:not-allowed}[data-bspk=textarea] textarea[aria-invalid]{--border-color: var(--status-error)}`);;
+*/display:grid;width:100%;--font: var(--body-base);--line-height: 20px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea][data-size=small]{--font: var(--body-small);--line-height: 20px;--padding: var(--spacing-sizing-02)}[data-bspk=textarea][data-size=large]{--font: var(--body-large);--line-height: 24px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea] [data-replicated-value]{white-space:pre-wrap;visibility:hidden}[data-bspk=textarea] textarea,[data-bspk=textarea] [data-replicated-value]{width:100%;font:var(--font);border:1px solid var(--border-color);padding:var(--padding);grid-area:1/1/2/2;min-height:calc(var(--line-height)*var(--min-rows) + var(--padding)*2);max-height:calc(var(--line-height)*var(--max-rows) + var(--padding)*2)}[data-bspk=textarea] textarea{--border-color: var(--stroke-neutral-base);resize:none;color:var(--foreground-neutral-on-surface);background-color:var(--surface-neutral-t1-base);border-radius:var(--radius-small)}[data-bspk=textarea] textarea::placeholder{color:var(--foreground-neutral-on-surface-variant-03)}[data-bspk=textarea] textarea:focus-within{--border-color: var(--stroke-neutral-focus);outline:none;color:var(--foreground-neutral-on-surface)}[data-bspk=textarea] textarea:disabled{pointer-events:none;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{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] textarea[aria-invalid]{--border-color: var(--status-error)}`);;
 import { useId } from './hooks/useId';
-const MIN_ROWS = 3;
-const MAX_ROWS = 10;
+const DEFAULT = {
+    minRows: 3,
+    maxRows: 10,
+    textSize: 'medium',
+};
 /**
  * A component that allows users to input large amounts of text that could span multiple lines.
  *
+ * This component gives you a textarea HTML element that automatically adjusts its height to match the length of the
+ * content within maximum and minimum rows. A character counter when a maxLength is set to show the number of characters
+ * remaining below the limit.
+ *
  * @element
  *
  * @name Textarea
  */
-function Textarea({ invalid: invalidProp, onChange, size = 'medium', value = '', name, 'aria-label': ariaLabel, innerRef, placeholder, id: idProp, minRows: minRowsProp = MIN_ROWS, maxRows: maxRowsProp = MAX_ROWS, errorMessage, ...otherProps }) {
+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 }) {
     const id = useId(idProp);
     const invalid = !otherProps.readOnly && !otherProps.disabled && invalidProp;
     // ensure minRows and maxRows are within bounds
-    const minRows = Math.min(MAX_ROWS, Math.max(minRowsProp, MIN_ROWS));
-    const maxRows = Math.max(MIN_ROWS, Math.min(maxRowsProp, MAX_ROWS));
-    return (_jsxs("div", { "data-bspk": "textarea", "data-size": size, style: {
+    const minRows = Math.min(DEFAULT.maxRows, Math.max(minRowsProp, DEFAULT.minRows));
+    const maxRows = Math.max(DEFAULT.minRows, Math.min(maxRowsProp, DEFAULT.maxRows));
+    return (_jsxs("div", { "data-bspk": "textarea", "data-size": textSize, style: {
             '--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) => {

package/dist/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../src/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AAGzB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAqDtC,MAAM,QAAQ,GAAG,CAAC,CAAC;AACnB,MAAM,QAAQ,GAAG,EAAE,CAAC;AAEpB;;;;;;GAMG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,WAAW,GAAG,QAAQ,EAC/B,OAAO,EAAE,WAAW,GAAG,QAAQ,EAC/B,YAAY,EACZ,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;IAC5E,+CAA+C;IAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IACpE,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpE,OAAO,CACH,4BACc,UAAU,eACT,IAAI,EACf,KAAK,EACD;YACI,YAAY,EAAE,OAAO;YACrB,YAAY,EAAE,OAAO;SACP,aAGtB,sBACQ,UAAU,uBACK,YAAY,IAAI,SAAS,kBAC9B,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,CAAC,KAAK,EAAE,EAAE;oBACf,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;oBACnD,qEAAqE;oBACrE,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM;wBAAE,OAAO;oBAC/B,MAAM,CAAC,WAA2B,CAAC,SAAS,GAAG,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;gBACxE,CAAC,EACD,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,GACd,EACF,mEAAyC,IACvC,CACT,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../src/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AAGzB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAItC,MAAM,OAAO,GAAG;IACZ,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,QAAQ;CACZ,CAAC;AAyDX;;;;;;;;;;GAUG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,QAAQ,GAAG,OAAO,CAAC,QAAQ,EAC3B,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,OAAO,EACtC,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,OAAO,EACtC,YAAY,EACZ,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;IAC5E,+CAA+C;IAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAClF,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAElF,OAAO,CACH,4BACc,UAAU,eACT,QAAQ,EACnB,KAAK,EACD;YACI,YAAY,EAAE,OAAO;YACrB,YAAY,EAAE,OAAO;SACP,aAGtB,sBACQ,UAAU,uBACK,YAAY,IAAI,SAAS,kBAC9B,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,CAAC,KAAK,EAAE,EAAE;oBACf,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;oBACnD,qEAAqE;oBACrE,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM;wBAAE,OAAO;oBAC/B,MAAM,CAAC,WAA2B,CAAC,SAAS,GAAG,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;gBACxE,CAAC,EACD,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,GACd,EACF,mEAAyC,IACvC,CACT,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/base.css

@@ -1 +1 @@
-[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body,html{height:100%;scroll-behavior:smooth}body{font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}a{color:var(--foreground-link-text-default)}a:hover{color:var(--foreground-link-text-default-hovered)}a:visited{color:var(--foreground-link-text-default-visited)}a:disabled{pointer-events:none;color:var(--foreground-link-text-default-disabled)}a[data-subtle]{color:var(--foreground-neutral-on-surface)}a[data-subtle]:hover{color:var(--foreground-link-text-subtle-hovered)}a[data-subtle]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}a[data-subtle-inverse]{color:var(--foreground-neutral-inverse-on-surface)}a[data-subtle-inverse]:hover{color:var(--foreground-link-text-subtle-inverse-hovered)}a[data-subtle-inverse]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}input:-internal-autofill-previewed,input:-internal-autofill-selected,textarea:-internal-autofill-previewed,textarea:-internal-autofill-selected,select:-internal-autofill-previewed,select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}ol{list-style-type:decimal}ol li{list-style-type:decimal;margin-left:var(--spacing-sizing-05)}ul{list-style-type:disc}ul li{list-style-type:disc;margin-left:var(--spacing-sizing-05)}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}
+[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body,html{height:100%;scroll-behavior:smooth}body{font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}a{color:var(--foreground-link-text-default)}a:not([disabled]):hover{color:var(--foreground-link-text-default-hovered)}a:not([disabled]):visited{color:var(--foreground-link-text-default-visited)}a[disabled]{pointer-events:none;cursor:text;color:var(--foreground-link-text-default-disabled)}a[data-subtle]{color:var(--foreground-neutral-on-surface)}a[data-subtle]:hover{color:var(--foreground-link-text-subtle-hovered)}a[data-subtle]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}a[data-subtle-inverse]{color:var(--foreground-neutral-inverse-on-surface)}a[data-subtle-inverse]:hover{color:var(--foreground-link-text-subtle-inverse-hovered)}a[data-subtle-inverse]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}input:-internal-autofill-previewed,input:-internal-autofill-selected,textarea:-internal-autofill-previewed,textarea:-internal-autofill-selected,select:-internal-autofill-previewed,select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}ol{list-style-type:decimal}ol li{list-style-type:decimal;margin-left:var(--spacing-sizing-05)}ul{list-style-type:disc}ul li{list-style-type:disc;margin-left:var(--spacing-sizing-05)}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}

package/dist/hooks/{useNavOptions.d.ts → useOptionIconsInvalid.d.ts}

@@ -1,11 +1,10 @@
 /**
- * A utility hook used within navigation components. Returns options ready for use in a navigation component. Validates
- * the icons and sets the icon and iconActive properties.
+ * A utility hook used within navigation components. Returns true if the icons are invalid.
  *
- * @param options [NavOption[]] The options to display. Each option has a label and an optional leading icon.
- * @returns {undefined} NavOption[] The options with the validated icon and iconActive properties set.
+ * @param options [NavOption[]] The options to display. Each option has an optional leading icon.
+ * @returns {boolean} True if the icons are invalid.
  */
-export declare function useNavOptions<T extends NavOption>(options: T[] | undefined): T[];
+export declare function useOptionIconsInvalid<T extends NavOption>(options: T[] | undefined): boolean;
 export type NavOption = {
     /**
      * The label of the option. This is the text that will be displayed on the option.

package/dist/hooks/useOptionIconsInvalid.js

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { isValidIcon } from '../utils/children';
+import { useErrorLogger } from '../utils/errors';
+/**
+ * A utility hook used within navigation components. Returns true if the icons are invalid.
+ *
+ * @param options [NavOption[]] The options to display. Each option has an optional leading icon.
+ * @returns {boolean} True if the icons are invalid.
+ */
+export function useOptionIconsInvalid(options) {
+    const { logError } = useErrorLogger();
+    return useMemo(() => {
+        if (!options || !Array.isArray(options))
+            return true;
+        const iconsInvalid = options.some((o) => o.icon) && !options.every((option) => isValidIcon(option.icon));
+        logError(iconsInvalid, 'useNavOptions - Every option either must have a valid icon or none at all. All icons removed.');
+        return iconsInvalid;
+    }, [logError, options]);
+}
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+//# sourceMappingURL=useOptionIconsInvalid.js.map

package/dist/hooks/useOptionIconsInvalid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOptionIconsInvalid.js","sourceRoot":"","sources":["../../src/hooks/useOptionIconsInvalid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CAAsB,OAAwB;IAC/E,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IAEtC,OAAO,OAAO,CAAC,GAAG,EAAE;QAChB,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;YAAE,OAAO,IAAI,CAAC;QAErD,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;QAEzG,QAAQ,CACJ,YAAY,EACZ,+FAA+F,CAClG,CAAC;QAEF,OAAO,YAAY,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;AAC5B,CAAC;AAsBD,sDAAsD"}

package/dist/textarea.css

@@ -1,4 +1,4 @@
 [data-bspk=textarea]{/*! 
 --min-rows: is set via inline style 
 --max-rows: is set via inline style
-*/display:grid;width:100%;--font: var(--body-base);--line-height: 20px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea][data-size=small]{--font: var(--body-small);--line-height: 20px;--padding: var(--spacing-sizing-02)}[data-bspk=textarea][data-size=large]{--font: var(--body-large);--line-height: 24px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea] [data-replicated-value]{white-space:pre-wrap;visibility:hidden}[data-bspk=textarea] textarea,[data-bspk=textarea] [data-replicated-value]{width:100%;font:var(--font);border:1px solid var(--border-color);padding:var(--padding);grid-area:1/1/2/2;min-height:calc(var(--line-height)*var(--min-rows) + var(--padding)*2);max-height:calc(var(--line-height)*var(--max-rows) + var(--padding)*2)}[data-bspk=textarea] textarea{--border-color: var(--stroke-neutral-base);resize:vertical;color:var(--foreground-neutral-on-surface);background-color:var(--surface-neutral-t1-base);border-radius:var(--radius-small)}[data-bspk=textarea] textarea:focus-within{--border-color: var(--stroke-neutral-focus);outline:none;color:var(--foreground-neutral-on-surface)}[data-bspk=textarea] textarea:disabled{pointer-events:none;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{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-on-surface-variant-02);cursor:not-allowed}[data-bspk=textarea] textarea[aria-invalid]{--border-color: var(--status-error)}
+*/display:grid;width:100%;--font: var(--body-base);--line-height: 20px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea][data-size=small]{--font: var(--body-small);--line-height: 20px;--padding: var(--spacing-sizing-02)}[data-bspk=textarea][data-size=large]{--font: var(--body-large);--line-height: 24px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea] [data-replicated-value]{white-space:pre-wrap;visibility:hidden}[data-bspk=textarea] textarea,[data-bspk=textarea] [data-replicated-value]{width:100%;font:var(--font);border:1px solid var(--border-color);padding:var(--padding);grid-area:1/1/2/2;min-height:calc(var(--line-height)*var(--min-rows) + var(--padding)*2);max-height:calc(var(--line-height)*var(--max-rows) + var(--padding)*2)}[data-bspk=textarea] textarea{--border-color: var(--stroke-neutral-base);resize:none;color:var(--foreground-neutral-on-surface);background-color:var(--surface-neutral-t1-base);border-radius:var(--radius-small)}[data-bspk=textarea] textarea::placeholder{color:var(--foreground-neutral-on-surface-variant-03)}[data-bspk=textarea] textarea:focus-within{--border-color: var(--stroke-neutral-focus);outline:none;color:var(--foreground-neutral-on-surface)}[data-bspk=textarea] textarea:disabled{pointer-events:none;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{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] textarea[aria-invalid]{--border-color: var(--status-error)}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.1.14",
+    "version": "1.1.15",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [

package/src/Link.tsx

@@ -4,31 +4,34 @@ import { SvgOpenInNew } from '@bspk/icons/OpenInNew';
 import './link.scss';
 import { AnchorHTMLAttributes } from 'react';
 
-export type LinkProps = Pick<AnchorHTMLAttributes<unknown>, 'target'> & {
-    /**
-     * The label of the link.
-     *
-     * @required
-     */
-    label: string;
-    /** The variant of the link. Controls the icon that is displayed and link target. */
-    trailingIcon?: 'chevron' | 'external' | 'link';
-    /** The [href](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#href) of the link. */
-    href: AnchorHTMLAttributes<unknown>['href'];
-    /**
-     * The size of the link.
-     *
-     * @default base
-     */
-    size?: 'base' | 'large' | 'small';
-    /**
-     * Change the color of the link to a subtle color. This is useful for links that are not primary actions, for
-     * example footer menus.
-     *
-     * @default default
-     */
-    variant?: 'default' | 'subtle-inverse' | 'subtle';
-};
+import { CommonPropsLibrary } from '.';
+
+export type LinkProps = Pick<AnchorHTMLAttributes<unknown>, 'target'> &
+    Pick<CommonPropsLibrary, 'disabled'> & {
+        /**
+         * The label of the link.
+         *
+         * @required
+         */
+        label: string;
+        /** The variant of the link. Controls the icon that is displayed and link target. */
+        trailingIcon?: 'chevron' | 'external' | 'link';
+        /** The [href](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#href) of the link. */
+        href: AnchorHTMLAttributes<unknown>['href'];
+        /**
+         * The size of the link.
+         *
+         * @default base
+         */
+        size?: 'base' | 'large' | 'small';
+        /**
+         * Change the color of the link to a subtle color. This is useful for links that are not primary actions, for
+         * example footer menus.
+         *
+         * @default default
+         */
+        variant?: 'default' | 'subtle-inverse' | 'subtle';
+    };
 
 /**
  * This is the standalone link component. Inline links can use the native `a` element.

package/src/NumberInput.tsx

@@ -7,6 +7,13 @@ import { useLongPress } from './hooks/useLongPress';
 
 import { CommonProps, InvalidPropsLibrary } from '.';
 
+const DEFAULT = {
+    align: 'center',
+    size: 'medium',
+    disabled: false,
+    readOnly: false,
+} as const;
+
 function isNumber(value: unknown): number | undefined {
     if (typeof value === 'number') return value;
     if (typeof value !== 'string') return undefined;
@@ -16,14 +23,10 @@ function isNumber(value: unknown): number | undefined {
 
 export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'> &
     InvalidPropsLibrary & {
-        /**
-         * The value of the control.
-         *
-         * @required
-         */
+        /** The value of the control. */
         value?: number;
         /** Callback when the value changes. */
-        onChange: (value: number) => void;
+        onChange: (value: number | undefined) => void;
         /**
          * The alignment of the input box. Centered between the plus and minus buttons or to the left of the buttons.
          *
@@ -57,13 +60,12 @@ export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'n
  * @name NumberInput
  */
 function NumberInput({
-    //
-    value = 1,
+    value,
     onChange,
-    align = 'center',
-    size = 'medium',
-    disabled = false,
-    readOnly = false,
+    align = DEFAULT.align,
+    size = DEFAULT.size,
+    disabled = DEFAULT.disabled,
+    readOnly = DEFAULT.readOnly,
     name,
     id: inputIdProp,
     invalid,
@@ -76,7 +78,12 @@ function NumberInput({
     const max = isNumber(maxProp);
     const min = isNumber(minProp);
 
-    const fix = (next: number = value) => {
+    const fix = (next: number | undefined = value) => {
+        if (typeof next !== 'number') {
+            onChange(undefined);
+            return;
+        }
+
         let fixValue = next;
         if (typeof min !== 'undefined' && next < min) fixValue = min;
         if (typeof max !== 'undefined' && next > max) fixValue = max;

package/src/SegmentedControl.tsx

@@ -2,11 +2,11 @@ import './segmented-control.scss';
 import { Fragment } from 'react';
 
 import { Tooltip } from './Tooltip';
-import { useNavOptions } from './hooks/useNavOptions';
+import { useOptionIconsInvalid } from './hooks/useOptionIconsInvalid';
 
 import { ElementProps } from './';
 
-export type SegmentedToggleOption = {
+export type SegmentedControlOption = {
     /**
      * The label of the option. This is the text that will be displayed on the option.
      *
@@ -30,18 +30,22 @@ export type SegmentedControlProps = {
     /**
      * The options to display. Each option has a label and an optional leading icon.
      *
-     * @type SegmentedToggleOption[]
+     * @type SegmentedControlOption[]
      * @required
      */
-    options: SegmentedToggleOption[];
-    /** The id of the selected option. */
-    value?: SegmentedToggleOption['value'];
+    options: SegmentedControlOption[];
+    /**
+     * The id of the selected option.
+     *
+     * @required
+     */
+    value: SegmentedControlOption['value'];
     /**
      * The function to call when the option is clicked.
      *
      * @required
      */
-    onChange: (value: SegmentedToggleOption['value']) => void;
+    onChange: (value: SegmentedControlOption['value']) => void;
     /**
      * The size of the options.
      *
@@ -73,18 +77,19 @@ function SegmentedControl({
     onChange,
     value,
     size = 'medium',
-    options,
+    options: optionsProp,
     width = 'hug',
     showLabels: showLabelsProp = true,
     ...containerProps
 }: ElementProps<SegmentedControlProps, 'div'>) {
-    const items = useNavOptions(options);
+    const options = Array.isArray(optionsProp) ? optionsProp : [];
+    useOptionIconsInvalid(options);
 
-    const hideLabels = showLabelsProp === false && items.every((item) => item.icon && item.label);
+    const hideLabels = showLabelsProp === false && options.every((item) => item.icon && item.label);
 
     return (
         <div {...containerProps} data-bspk="segmented-control" data-size={size} data-width={width}>
-            {items.map((item, index) => {
+            {options.map((item, index) => {
                 const isActive = item.value === value;
                 return (
                     <Fragment key={item.value}>
@@ -92,10 +97,10 @@ function SegmentedControl({
                             <button
                                 aria-label={item.label}
                                 data-first={index === 0 || undefined}
-                                data-last={index === items.length - 1 || undefined}
+                                data-last={index === options.length - 1 || undefined}
                                 data-selected={isActive || undefined}
                                 disabled={item.disabled || undefined}
-                                onClick={() => onChange(item.value)}
+                                onClick={() => onChange(item.value || item.label)}
                             >
                                 <span data-outer>
                                     <span data-inner>

package/src/TabGroup.tsx

@@ -1,11 +1,19 @@
 import './tab-group.scss';
 import { ReactNode } from 'react';
 
-import { Badge } from './Badge';
-import { useNavOptions } from './hooks/useNavOptions';
+import { Badge, BadgeProps } from './Badge';
+import { useOptionIconsInvalid } from './hooks/useOptionIconsInvalid';
 
 import { ElementProps } from './';
 
+export type TabGroupSize = 'large' | 'medium' | 'small';
+
+const TAB_BADGE_SIZES: Record<TabGroupSize, BadgeProps['size']> = {
+    large: 'small',
+    medium: 'x-small',
+    small: 'x-small',
+};
+
 export type TabGroupOption = {
     /**
      * The label of the tab. This is the text that will be displayed on the tab.
@@ -19,7 +27,11 @@ export type TabGroupOption = {
      * @default false
      */
     disabled?: boolean;
-    /** The value of the tab. If not provided, the label will be used as the value. */
+    /**
+     * The value of the tab sent to onChange when selected.
+     *
+     * If not provided, the label will be used as the value.
+     */
     value?: string;
     /** The icon to display on the left side of the tab. */
     icon?: ReactNode;
@@ -37,20 +49,24 @@ export type TabGroupProps = {
      * @required
      */
     options: TabGroupOption[];
-    /** The id of the selected tab. */
-    value?: TabGroupOption['value'];
+    /**
+     * The id of the selected tab.
+     *
+     * @required
+     */
+    value: TabGroupOption['value'];
     /**
      * The function to call when the tab is clicked.
      *
      * @required
      */
-    onChange: (tabId: TabGroupOption['value']) => void;
+    onChange: (tabValue: string, index: number) => void;
     /**
      * The size of the tabs.
      *
      * @default medium
      */
-    size?: 'large' | 'medium' | 'small';
+    size?: TabGroupSize;
     /**
      * When 'fill' the options will fill the width of the container. When 'hug', the options will be as wide as their
      * content.
@@ -77,12 +93,13 @@ function TabGroup({
     onChange: onTabChange,
     value,
     size = 'medium',
-    options,
+    options: optionsProp,
     width = 'hug',
     showTrail = false,
     ...containerProps
 }: ElementProps<TabGroupProps, 'div'>) {
-    const items = useNavOptions(options);
+    const options = Array.isArray(optionsProp) ? optionsProp : [];
+    useOptionIconsInvalid(options);
 
     return (
         <div
@@ -92,7 +109,7 @@ function TabGroup({
             data-size={size}
             data-width={width}
         >
-            {items.map((item) => {
+            {options.map((item, itemIndex) => {
                 const isActive = item.value === value;
 
                 return (
@@ -100,12 +117,16 @@ function TabGroup({
                         data-active={isActive || undefined}
                         disabled={item.disabled || undefined}
                         key={item.value}
-                        onClick={() => onTabChange(item.value)}
+                        onClick={() => {
+                            onTabChange(item.value || item.label, itemIndex);
+                        }}
                     >
                         <span>
                             {(isActive && item.iconActive) || item.icon}
                             {item.label}
-                            {item.badge && <Badge count={item.badge} size="x-small" />}
+                            {item.badge && !item.disabled && !isActive && (
+                                <Badge count={item.badge} size={TAB_BADGE_SIZES[size]} />
+                            )}
                         </span>
                     </button>
                 );

package/src/Textarea.tsx

@@ -5,6 +5,12 @@ import { useId } from './hooks/useId';
 
 import { CommonProps, InvalidPropsLibrary } from './';
 
+const DEFAULT = {
+    minRows: 3,
+    maxRows: 10,
+    textSize: 'medium',
+} as const;
+
 export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'readOnly' | 'required'> &
     InvalidPropsLibrary & {
         /**
@@ -15,12 +21,16 @@ export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'read
          */
         onChange: (next: string, event?: ChangeEvent<HTMLTextAreaElement>) => void;
         /**
-         * The size of the field.
+         * The text size of the field.
          *
          * @default medium
          */
-        size?: 'large' | 'medium' | 'small';
-        /** The value of the field. */
+        textSize?: 'large' | 'medium' | 'small';
+        /**
+         * The value of the field.
+         *
+         * @type multiline
+         */
         value?: string;
         /**
          * The textarea control name of the field.
@@ -39,27 +49,30 @@ export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'read
          */
         maxLength?: number;
         /**
-         * The minimum number of rows that the textarea should have. If set the textarea will automatically grow and
-         * shrink to fit the content.
+         * The minimum number of rows that the textarea will show.
          *
+         * @default 3
          * @minimum 3
+         * @maximum 10
          */
         minRows?: number;
         /**
-         * The maximum number of rows that the textarea should have. If set the textarea will automatically grow and
-         * shrink to fit the content.
+         * The maximum number of rows that the textarea will show.
          *
+         * @default 10
+         * @minimum 3
          * @maximum 10
          */
         maxRows?: number;
     };
 
-const MIN_ROWS = 3;
-const MAX_ROWS = 10;
-
 /**
  * A component that allows users to input large amounts of text that could span multiple lines.
  *
+ * This component gives you a textarea HTML element that automatically adjusts its height to match the length of the
+ * content within maximum and minimum rows. A character counter when a maxLength is set to show the number of characters
+ * remaining below the limit.
+ *
  * @element
  *
  * @name Textarea
@@ -67,28 +80,28 @@ const MAX_ROWS = 10;
 function Textarea({
     invalid: invalidProp,
     onChange,
-    size = 'medium',
+    textSize = DEFAULT.textSize,
     value = '',
     name,
     'aria-label': ariaLabel,
     innerRef,
     placeholder,
     id: idProp,
-    minRows: minRowsProp = MIN_ROWS,
-    maxRows: maxRowsProp = MAX_ROWS,
+    minRows: minRowsProp = DEFAULT.minRows,
+    maxRows: maxRowsProp = DEFAULT.maxRows,
     errorMessage,
     ...otherProps
 }: TextareaProps) {
     const id = useId(idProp);
     const invalid = !otherProps.readOnly && !otherProps.disabled && invalidProp;
     // ensure minRows and maxRows are within bounds
-    const minRows = Math.min(MAX_ROWS, Math.max(minRowsProp, MIN_ROWS));
-    const maxRows = Math.max(MIN_ROWS, Math.min(maxRowsProp, MAX_ROWS));
+    const minRows = Math.min(DEFAULT.maxRows, Math.max(minRowsProp, DEFAULT.minRows));
+    const maxRows = Math.max(DEFAULT.minRows, Math.min(maxRowsProp, DEFAULT.maxRows));
 
     return (
         <div
             data-bspk="textarea"
-            data-size={size}
+            data-size={textSize}
             style={
                 {
                     '--min-rows': minRows,

package/src/base.scss

@@ -51,16 +51,17 @@ body {
 a {
     color: var(--foreground-link-text-default);
 
-    &:hover {
+    &:not([disabled]):hover {
         color: var(--foreground-link-text-default-hovered);
     }
 
-    &:visited {
+    &:not([disabled]):visited {
         color: var(--foreground-link-text-default-visited);
     }
 
-    &:disabled {
+    &[disabled] {
         pointer-events: none;
+        cursor: text;
         color: var(--foreground-link-text-default-disabled);
     }
 }

package/src/hooks/useOptionIconsInvalid.ts

@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+
+import { isValidIcon } from '../utils/children';
+import { useErrorLogger } from '../utils/errors';
+
+/**
+ * A utility hook used within navigation components. Returns true if the icons are invalid.
+ *
+ * @param options [NavOption[]] The options to display. Each option has an optional leading icon.
+ * @returns {boolean} True if the icons are invalid.
+ */
+export function useOptionIconsInvalid<T extends NavOption>(options: T[] | undefined): boolean {
+    const { logError } = useErrorLogger();
+
+    return useMemo(() => {
+        if (!options || !Array.isArray(options)) return true;
+
+        const iconsInvalid = options.some((o) => o.icon) && !options.every((option) => isValidIcon(option.icon));
+
+        logError(
+            iconsInvalid,
+            'useNavOptions - Every option either must have a valid icon or none at all. All icons removed.',
+        );
+
+        return iconsInvalid;
+    }, [logError, options]);
+}
+
+export type NavOption = {
+    /**
+     * The label of the option. This is the text that will be displayed on the option.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /** The value of the option. If not provided, the label will be used as the value. */
+    value?: string;
+    /** The the icon to display before the label. */
+    icon?: React.ReactNode;
+    iconActive?: React.ReactNode;
+};
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/textarea.scss

@@ -43,7 +43,11 @@
     textarea {
         --border-color: var(--stroke-neutral-base);
 
-        resize: vertical;
+        &::placeholder {
+            color: var(--foreground-neutral-on-surface-variant-03);
+        }
+
+        resize: none;
         color: var(--foreground-neutral-on-surface);
         background-color: var(--surface-neutral-t1-base);
         border-radius: var(--radius-small);
@@ -71,7 +75,6 @@
 
                 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-on-surface-variant-02);
             cursor: not-allowed;
         }