@bspk/ui 1.3.11 → 1.3.16

package/dist/components/UIProvider/UIProviderExample.js

@@ -1,9 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../Button';
-import { useUIContext } from '../../hooks/useUIContext';
+import { jsx as _jsx } from "react/jsx-runtime";
 export const presets = [];
 export const UIProviderExample = {
-    containerStyle: { width: '100%' },
     defaultState: {},
     disableProps: [],
     presets,
@@ -44,49 +41,7 @@ export function ResponsiveComponent() {
     );
 }`, language: "typescript" }) })),
         },
-        {
-            title: 'ARIA Live Messages',
-            content: ({ Syntax }) => (_jsxs("div", { style: {}, children: [_jsx("p", { children: "Example usage of sending ARIA live messages. This allows for dynamic updates to assistive technologies, such as screen readers." }), _jsx(AriaLiveExample, {}), _jsx(Syntax, { code: `// Example usage of sending ARIA live messages
-import { useContext } from 'react';
-import { useUIContext } from '../../hooks/useUIContext';
-
-export function AriaLiveExample() {
-    const {sendAriaLiveMessage} = useUIContext();
-
-    const handleClick = () => {
-        sendAriaLiveMessage('Action completed successfully', 'polite');
-    };
-
-    return (
-        <div>
-            <button onClick={handleClick}>Perform Action</button>
-        </div>
-    );
-}`, language: "typescript" })] })),
-        },
     ],
     variants: {},
 };
-export function AriaLiveExample() {
-    const { sendAriaLiveMessage } = useUIContext();
-    return (_jsxs("p", { children: [_jsx(Button, { "data-bspk": "link", label: "Send a polite ARIA Live Message ", onClick: () => {
-                    sendAriaLiveMessage?.(`Action completed successfully at ${new Date().toLocaleTimeString()}`, 'polite');
-                }, style: {
-                    padding: 0,
-                    margin: 0,
-                    border: 'none',
-                    background: 'none',
-                    color: 'inherit',
-                    cursor: 'pointer',
-                }, variant: "tertiary" }), _jsx(Button, { "data-bspk": "link", label: "Send an assertive ARIA Live Message ", onClick: () => {
-                    sendAriaLiveMessage?.(`Critical update occurred at ${new Date().toLocaleTimeString()}`, 'assertive');
-                }, style: {
-                    padding: 0,
-                    margin: 0,
-                    border: 'none',
-                    background: 'none',
-                    color: 'inherit',
-                    cursor: 'pointer',
-                }, variant: "tertiary" })] }));
-}
 //# sourceMappingURL=UIProviderExample.js.map

package/dist/components/UIProvider/UIProviderExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"UIProviderExample.js","sourceRoot":"","sources":["../../../src/components/UIProvider/UIProviderExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,CAAC,MAAM,OAAO,GAA8B,EAAE,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO;IACP,QAAQ,EAAE;QACN;YACI,KAAK,EAAE,iBAAiB;YACxB,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACrB,cAAK,KAAK,EAAE,EAAE,YACV,KAAC,MAAM,IACH,IAAI,EAAE;;;;;;;;;;;;;;EAc5B,EACsB,QAAQ,EAAC,YAAY,GACvB,GACA,CACT;SACJ;QACD;YACI,KAAK,EAAE,oBAAoB;YAC3B,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACrB,cAAK,KAAK,EAAE,EAAE,YACV,KAAC,MAAM,IACH,IAAI,EAAE;;;;;;;;;;;;;;EAc5B,EACsB,QAAQ,EAAC,YAAY,GACvB,GACA,CACT;SACJ;QACD;YACI,KAAK,EAAE,oBAAoB;YAC3B,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACrB,eAAK,KAAK,EAAE,EAAE,aACV,0JAGI,EACJ,KAAC,eAAe,KAAG,EACnB,KAAC,MAAM,IACH,IAAI,EAAE;;;;;;;;;;;;;;;;EAgB5B,EACsB,QAAQ,EAAC,YAAY,GACvB,IACA,CACT;SACJ;KACJ;IACD,QAAQ,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,UAAU,eAAe;IAC3B,MAAM,EAAE,mBAAmB,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/C,OAAO,CACH,wBACI,KAAC,MAAM,iBACO,MAAM,EAChB,KAAK,EAAC,kCAAkC,EACxC,OAAO,EAAE,GAAG,EAAE;oBACV,mBAAmB,EAAE,CACjB,oCAAoC,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE,EAAE,EACrE,QAAQ,CACX,CAAC;gBACN,CAAC,EACD,KAAK,EAAE;oBACH,OAAO,EAAE,CAAC;oBACV,MAAM,EAAE,CAAC;oBACT,MAAM,EAAE,MAAM;oBACd,UAAU,EAAE,MAAM;oBAClB,KAAK,EAAE,SAAS;oBAChB,MAAM,EAAE,SAAS;iBACpB,EACD,OAAO,EAAC,UAAU,GACpB,EAEF,KAAC,MAAM,iBACO,MAAM,EAChB,KAAK,EAAC,sCAAsC,EAC5C,OAAO,EAAE,GAAG,EAAE;oBACV,mBAAmB,EAAE,CACjB,+BAA+B,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE,EAAE,EAChE,WAAW,CACd,CAAC;gBACN,CAAC,EACD,KAAK,EAAE;oBACH,OAAO,EAAE,CAAC;oBACV,MAAM,EAAE,CAAC;oBACT,MAAM,EAAE,MAAM;oBACd,UAAU,EAAE,MAAM;oBAClB,KAAK,EAAE,SAAS;oBAChB,MAAM,EAAE,SAAS;iBACpB,EACD,OAAO,EAAC,UAAU,GACpB,IACF,CACP,CAAC;AACN,CAAC"}
+{"version":3,"file":"UIProviderExample.js","sourceRoot":"","sources":["../../../src/components/UIProvider/UIProviderExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAA8B,EAAE,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO;IACP,QAAQ,EAAE;QACN;YACI,KAAK,EAAE,iBAAiB;YACxB,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACrB,cAAK,KAAK,EAAE,EAAE,YACV,KAAC,MAAM,IACH,IAAI,EAAE;;;;;;;;;;;;;;EAc5B,EACsB,QAAQ,EAAC,YAAY,GACvB,GACA,CACT;SACJ;QACD;YACI,KAAK,EAAE,oBAAoB;YAC3B,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACrB,cAAK,KAAK,EAAE,EAAE,YACV,KAAC,MAAM,IACH,IAAI,EAAE;;;;;;;;;;;;;;EAc5B,EACsB,QAAQ,EAAC,YAAY,GACvB,GACA,CACT;SACJ;KACJ;IACD,QAAQ,EAAE,EAAE;CACf,CAAC"}

package/dist/hooks/useControlledState.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A custom hook to manage controlled and uncontrolled state.
+ *
+ * Allows a component to either be controlled by an external value or manage its own internal state. This is helpful for
+ * components that should operate in both controlled and uncontrolled modes.
+ */
+export declare function useControlledState<T>(initialValue: T, onChange?: (value: T) => void): [T, (value: T | ((prev: T) => T)) => void];

package/dist/hooks/useControlledState.js

@@ -0,0 +1,21 @@
+import { useState, useRef, useCallback } from 'react';
+/**
+ * A custom hook to manage controlled and uncontrolled state.
+ *
+ * Allows a component to either be controlled by an external value or manage its own internal state. This is helpful for
+ * components that should operate in both controlled and uncontrolled modes.
+ */
+export function useControlledState(initialValue, onChange) {
+    const [internalValue, setInternalValue] = useState(initialValue);
+    const stateRef = useRef(initialValue);
+    return [
+        internalValue,
+        useCallback((next) => {
+            const nextValue = typeof next === 'function' ? next(stateRef.current) : next;
+            setInternalValue(nextValue);
+            onChange?.(nextValue);
+            stateRef.current = nextValue;
+        }, [onChange]),
+    ];
+}
+//# sourceMappingURL=useControlledState.js.map

package/dist/hooks/useControlledState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlledState.js","sourceRoot":"","sources":["../../src/hooks/useControlledState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEtD;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAC9B,YAAe,EACf,QAA6B;IAE7B,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAEjE,MAAM,QAAQ,GAAG,MAAM,CAAI,YAAY,CAAC,CAAC;IAEzC,OAAO;QACH,aAAa;QACb,WAAW,CACP,CAAC,IAA0B,EAAE,EAAE;YAC3B,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,UAAU,CAAC,CAAC,CAAE,IAAoB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAE9F,gBAAgB,CAAC,SAAS,CAAC,CAAC;YAC5B,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC;YAEtB,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC;QACjC,CAAC,EACD,CAAC,QAAQ,CAAC,CACb;KACK,CAAC;AACf,CAAC"}

package/dist/hooks/{useAddEventListener.js → useEventListener.js}

@@ -24,4 +24,4 @@ export function useEventListener(eventName, handler, element, disabled, options)
         };
     }, [eventName, element, options]);
 }
-//# sourceMappingURL=useAddEventListener.js.map
+//# sourceMappingURL=useEventListener.js.map

package/dist/hooks/useEventListener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEventListener.js","sourceRoot":"","sources":["../../src/hooks/useEventListener.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,UAAU,gBAAgB,CAM5B,SAAgC,EAChC,OAOS,EACT,OAAW,EACX,QAAkB,EAClB,OAA2C;IAE3C,mCAAmC;IACnC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAErC,mBAAmB,CAAC,GAAG,EAAE;QACrB,YAAY,CAAC,OAAO,GAAG,OAAO,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,mBAAmB,CAAC,GAAG,EAAE;QACrB,IAAI,QAAQ;YAAE,OAAO;QAErB,8BAA8B;QAC9B,MAAM,aAAa,GAAe,OAAO,IAAI,MAAM,CAAC;QAEpD,IAAI,CAAC,CAAC,aAAa,IAAI,aAAa,CAAC,gBAAgB,CAAC;YAAE,OAAO;QAE/D,kEAAkE;QAClE,MAAM,QAAQ,GAAmB,CAAC,KAAK,EAAE,EAAE;YACvC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC,CAAC;QAEF,aAAa,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAE7D,mCAAmC;QACnC,OAAO,GAAG,EAAE;YACR,aAAa,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QACpE,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;AACtC,CAAC"}

package/dist/types/meta.d.ts

@@ -2,7 +2,6 @@
  * This file is used to build the meta types for the project. It's used in the build-meta.ts file and also copied in to
  * the meta output file.
  */
-export declare const COMPONENT_PHASE_ORDER: ComponentPhase[];
 export declare const COMPONENT_PHASES: Record<ComponentPhase, {
     title: string;
     id: ComponentPhase;

package/dist/types/meta.js

@@ -2,13 +2,6 @@
  * This file is used to build the meta types for the project. It's used in the build-meta.ts file and also copied in to
  * the meta output file.
  */
-export const COMPONENT_PHASE_ORDER = [
-    'Utility', // Utility components are not tracked in the progress
-    'Backlog', // components that are not actively being worked on
-    'Dev', // components that are actively being developed
-    'UXReview', // components that are in UX Review
-    'Stable', // production ready
-];
 export const COMPONENT_PHASES = {
     Backlog: {
         title: 'Backlog',

package/dist/types/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../src/types/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAqB;IACnD,SAAS,EAAE,qDAAqD;IAChE,SAAS,EAAE,mDAAmD;IAC9D,KAAK,EAAE,+CAA+C;IACtD,UAAU,EAAE,mCAAmC;IAC/C,QAAQ,EAAE,mBAAmB;CAChC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAOzB;IACA,OAAO,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,EAAE,EAAE,SAAS;QACb,WAAW,EACP,4IAA4I;KACnJ;IACD,GAAG,EAAE;QACD,KAAK,EAAE,aAAa;QACpB,EAAE,EAAE,KAAK;QACT,WAAW,EACP,+JAA+J;KACtK;IACD,QAAQ,EAAE;QACN,KAAK,EAAE,WAAW;QAClB,EAAE,EAAE,UAAU;QACd,WAAW,EACP,+LAA+L;KACtM;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,EAAE,EAAE,QAAQ;QACZ,WAAW,EACP,sJAAsJ;KAC7J;IACD,OAAO,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,EAAE,EAAE,SAAS;QACb,WAAW,EAAE,mEAAmE;KACnF;CACJ,CAAC;AAoDF,sDAAsD"}
+{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../src/types/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAOzB;IACA,OAAO,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,EAAE,EAAE,SAAS;QACb,WAAW,EACP,4IAA4I;KACnJ;IACD,GAAG,EAAE;QACD,KAAK,EAAE,aAAa;QACpB,EAAE,EAAE,KAAK;QACT,WAAW,EACP,+JAA+J;KACtK;IACD,QAAQ,EAAE;QACN,KAAK,EAAE,WAAW;QAClB,EAAE,EAAE,UAAU;QACd,WAAW,EACP,+LAA+L;KACtM;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,EAAE,EAAE,QAAQ;QACZ,WAAW,EACP,sJAAsJ;KAC7J;IACD,OAAO,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,EAAE,EAAE,SAAS;QACb,WAAW,EAAE,mEAAmE;KACnF;CACJ,CAAC;AAoDF,sDAAsD"}

package/dist/utils/createCustomEvent.js

@@ -1,4 +1,4 @@
-import { useEventListener } from '../hooks/useAddEventListener';
+import { useEventListener } from '../hooks/useEventListener';
 /**
  * Like React.createContext but for custom events using the DOM's CustomEvent system.
  *

package/dist/utils/createCustomEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"createCustomEvent.js","sourceRoot":"","sources":["../../src/utils/createCustomEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAe/D;;;;;;GAMG;AACH,MAAM,UAAU,iBAAiB;AAC7B,sFAAsF;AACtF,SAAiB;IAEjB,OAAO;QACH,IAAI,CAAC,MAAe;YAChB,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAU,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;QAC5E,CAAC;QACD,gBAAgB,CAAC,QAAqC;YAClD,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAE,KAA8B,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;QACvG,CAAC;KACJ,CAAC;AACN,CAAC"}
+{"version":3,"file":"createCustomEvent.js","sourceRoot":"","sources":["../../src/utils/createCustomEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAe5D;;;;;;GAMG;AACH,MAAM,UAAU,iBAAiB;AAC7B,sFAAsF;AACtF,SAAiB;IAEjB,OAAO;QACH,IAAI,CAAC,MAAe;YAChB,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAU,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;QAC5E,CAAC;QACD,gBAAgB,CAAC,QAAqC;YAClD,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAE,KAA8B,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;QACvG,CAAC;KACJ,CAAC;AACN,CAAC"}

package/dist/utils/demo.d.ts

@@ -88,6 +88,18 @@ export type ComponentExample<Props = Record<string, unknown>, PropName extends k
     disableProps?: PropName[] | true;
     /** The sections of the example. */
     sections?: ComponentPageSection<Props>[];
+    /**
+     * Whether to render the example in a full page layout.
+     *
+     * @default false
+     */
+    fullPage?: boolean;
+    /**
+     * Hide the demo entirely.
+     *
+     * @default false
+     */
+    hideDemo?: boolean;
 };
 export type Syntax = (params: {
     code: string;
@@ -116,12 +128,17 @@ export type Preset<Props> = {
      * A description of the design pattern this preset demonstrates. When applied, it showcases the specific use case or
      * behavior of the component.
      */
-    designPattern?: string;
+    designPattern?: boolean | string;
     /** The name of the preset. This is used to display the preset in the UI. */
     label: string;
     /** The props of the component. This is used to set props of the component. These values can't be changed in the UI. */
     propState: Omit<Props, OnHandlers> & Record<OnHandlers, unknown>;
-    otherState?: Record<string, Record<string, unknown> | unknown> & Record<string, unknown>;
+    /**
+     * Hide the demo for this preset.
+     *
+     * @default false
+     */
+    hideDemo?: boolean;
 };
 export type DemoPreset<P = Record<string, unknown>> = Preset<P> & {
     value: string;

package/dist/utils/demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"demo.js","sourceRoot":"","sources":["../../src/utils/demo.ts"],"names":[],"mappings":"AAAA,uDAAuD;AA8JvD,MAAM,UAAU,SAAS,CAAC,SAAiB,KAAK;IAC5C,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;AACrE,CAAC"}
+{"version":3,"file":"demo.js","sourceRoot":"","sources":["../../src/utils/demo.ts"],"names":[],"mappings":"AAAA,uDAAuD;AA+KvD,MAAM,UAAU,SAAS,CAAC,SAAiB,KAAK;IAC5C,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;AACrE,CAAC"}

package/dist/utils/dom.d.ts

@@ -1,2 +1,3 @@
 /** A safe way to get an element by ID that works in SSR environments or when the ID value is not considered valid. */
 export declare function getElementById<T extends HTMLElement = HTMLElement>(id?: string | null): T | null;
+export declare function getElement<T extends HTMLElement = HTMLElement>(selector: string, parent?: HTMLElement | ParentNode): T | null;

package/dist/utils/dom.js

@@ -6,4 +6,9 @@ export function getElementById(id) {
         return null;
     return document.querySelector(`[id="${id}"]`);
 }
+export function getElement(selector, parent = document) {
+    if (typeof parent === 'undefined')
+        return null;
+    return parent.querySelector(selector);
+}
 //# sourceMappingURL=dom.js.map

package/dist/utils/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,sHAAsH;AACtH,MAAM,UAAU,cAAc,CAAsC,EAAkB;IAClF,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,IAAI,CAAC;IACjD,IAAI,CAAC,EAAE;QAAE,OAAO,IAAI,CAAC;IACrB,OAAO,QAAQ,CAAC,aAAa,CAAI,QAAQ,EAAE,IAAI,CAAC,CAAC;AACrD,CAAC"}
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,sHAAsH;AACtH,MAAM,UAAU,cAAc,CAAsC,EAAkB;IAClF,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,IAAI,CAAC;IACjD,IAAI,CAAC,EAAE;QAAE,OAAO,IAAI,CAAC;IACrB,OAAO,QAAQ,CAAC,aAAa,CAAI,QAAQ,EAAE,IAAI,CAAC,CAAC;AACrD,CAAC;AAED,MAAM,UAAU,UAAU,CACtB,QAAgB,EAChB,SAAmC,QAAQ;IAE3C,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,IAAI,CAAC;IAC/C,OAAO,MAAM,CAAC,aAAa,CAAI,QAAQ,CAAC,CAAC;AAC7C,CAAC"}

package/dist/utils/handleKeyDown.d.ts

@@ -1,6 +1,7 @@
 import { KeyboardEvent } from 'react';
 import { KeyboardEventCode } from './keyboard';
 export type KeysCallback = Partial<Record<KeyboardEventCode, ((event: KeyboardEvent) => void) | null>>;
+export declare const getEventCode: (event: KeyboardEvent) => KeyboardEventCode;
 /**
  * Handles multiple keydown events with specific callbacks for each key.
  *

package/dist/utils/handleKeyDown.js

@@ -1,3 +1,11 @@
+export const getEventCode = (event) => {
+    let eventCode = event.code;
+    if (event.ctrlKey && event.altKey && event.code === 'Space')
+        eventCode = 'Ctrl+Option+Space';
+    if (event.shiftKey && !eventCode.startsWith('Shift'))
+        eventCode = `Shift+${event.code}`;
+    return eventCode;
+};
 /**
  * Handles multiple keydown events with specific callbacks for each key.
  *
@@ -6,9 +14,7 @@
  */
 export function handleKeyDown(keysCallback = {}, { stopPropagation = false, preventDefault = false } = {}) {
     return (event) => {
-        let eventCode = event.code;
-        if (event.ctrlKey && event.altKey && event.code === 'Space')
-            eventCode = 'Ctrl+Option+Space';
+        const eventCode = getEventCode(event);
         const callback = keysCallback[eventCode];
         if (callback) {
             callback(event);

package/dist/utils/handleKeyDown.js.map

@@ -1 +1 @@
-{"version":3,"file":"handleKeyDown.js","sourceRoot":"","sources":["../../src/utils/handleKeyDown.ts"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CACzB,eAA6B,EAAE,EAC/B,EAAE,eAAe,GAAG,KAAK,EAAE,cAAc,GAAG,KAAK,KAA8D,EAAE;IAEjH,OAAO,CAAC,KAAoB,EAAE,EAAE;QAC5B,IAAI,SAAS,GAAG,KAAK,CAAC,IAAyB,CAAC;QAChD,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;YAAE,SAAS,GAAG,mBAAmB,CAAC;QAE7F,MAAM,QAAQ,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;QAEzC,IAAI,QAAQ,EAAE,CAAC;YACX,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,IAAI,eAAe;gBAAE,KAAK,CAAC,eAAe,EAAE,CAAC;YAC7C,IAAI,cAAc;gBAAE,KAAK,CAAC,cAAc,EAAE,CAAC;QAC/C,CAAC;QACD,OAAO,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IACvC,CAAC,CAAC;AACN,CAAC"}
+{"version":3,"file":"handleKeyDown.js","sourceRoot":"","sources":["../../src/utils/handleKeyDown.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAoB,EAAE,EAAE;IACjD,IAAI,SAAS,GAAG,KAAK,CAAC,IAAyB,CAAC;IAChD,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;QAAE,SAAS,GAAG,mBAAmB,CAAC;IAC7F,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC;QAAE,SAAS,GAAG,SAAS,KAAK,CAAC,IAAI,EAAuB,CAAC;IAE7G,OAAO,SAAS,CAAC;AACrB,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CACzB,eAA6B,EAAE,EAC/B,EAAE,eAAe,GAAG,KAAK,EAAE,cAAc,GAAG,KAAK,KAA8D,EAAE;IAEjH,OAAO,CAAC,KAAoB,EAAE,EAAE;QAC5B,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;QACtC,MAAM,QAAQ,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;QAEzC,IAAI,QAAQ,EAAE,CAAC;YACX,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,IAAI,eAAe;gBAAE,KAAK,CAAC,eAAe,EAAE,CAAC;YAC7C,IAAI,cAAc;gBAAE,KAAK,CAAC,cAAc,EAAE,CAAC;QAC/C,CAAC;QACD,OAAO,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IACvC,CAAC,CAAC;AACN,CAAC"}

package/dist/utils/keyboard.d.ts

@@ -1,5 +1,7 @@
 export type KeyboardEventKey = ' ' | '_' | '-' | ';' | ':' | '!' | '?' | '.' | '' | '"' | '(' | ')' | '[' | ']' | '{' | '}' | '@' | '*' | '/' | '\\' | '&' | '#' | '%' | '`' | '^' | '+' | '<' | '=' | '>' | '|' | '~' | '$' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | 'A' | 'a' | 'Alt' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'AudioVolumeDown' | 'AudioVolumeMute' | 'AudioVolumeUp' | 'B' | 'b' | 'Backspace' | 'C' | 'c' | 'CapsLock' | 'ContextMenu' | 'Control' | 'D' | 'd' | 'Delete' | 'E' | 'e' | 'End' | 'Enter' | 'Escape' | 'F' | 'f' | 'F1' | 'F2' | 'F3' | 'F4' | 'F5' | 'F6' | 'F7' | 'F8' | 'F9' | 'F10' | 'F11' | 'F12' | 'G' | 'g' | 'H' | 'h' | 'Home' | 'I' | 'i' | 'Insert' | 'J' | 'j' | 'K' | 'k' | 'L' | 'l' | 'M' | 'm' | 'Meta' | 'N' | 'n' | 'NumLock' | 'O' | 'o' | 'P' | 'p' | 'PageDown' | 'PageUp' | 'Pause' | 'PrintScreen' | 'Q' | 'q' | 'R' | 'r' | 'S' | 's' | 'ScrollLock' | 'Shift' | 'T' | 't' | 'Tab' | 'U' | 'u' | 'V' | 'v' | 'W' | 'w' | 'X' | 'x' | 'Y' | 'y' | 'Z' | 'z' | "'";
 export type KeyboardEventCodeCustom = 'Ctrl+Option+Space';
-export type KeyboardEventCode = KeyboardEventCodeCustom | 'AltLeft' | 'AltRight' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'AudioVolumeDown' | 'AudioVolumeMute' | 'AudioVolumeUp' | 'Backquote' | 'Backslash' | 'Backspace' | 'BracketLeft' | 'BracketRight' | 'CapsLock' | 'Comma' | 'ContextMenu' | 'ControlLeft' | 'ControlRight' | 'Delete' | 'Digit0' | 'Digit1' | 'Digit2' | 'Digit3' | 'Digit4' | 'Digit5' | 'Digit6' | 'Digit7' | 'Digit8' | 'Digit9' | 'End' | 'Enter' | 'Equal' | 'Escape' | 'F1' | 'F2' | 'F3' | 'F4' | 'F5' | 'F6' | 'F7' | 'F8' | 'F9' | 'F10' | 'F11' | 'F12' | 'Home' | 'Insert' | 'KeyA' | 'KeyB' | 'KeyC' | 'KeyD' | 'KeyE' | 'KeyF' | 'KeyG' | 'KeyH' | 'KeyI' | 'KeyJ' | 'KeyK' | 'KeyL' | 'KeyM' | 'KeyN' | 'KeyO' | 'KeyP' | 'KeyQ' | 'KeyR' | 'KeyS' | 'KeyT' | 'KeyU' | 'KeyV' | 'KeyW' | 'KeyX' | 'KeyY' | 'KeyZ' | 'MetaLeft' | 'MetaRight' | 'Minus' | 'NumLock' | 'Numpad0' | 'Numpad1' | 'Numpad2' | 'Numpad3' | 'Numpad4' | 'Numpad5' | 'Numpad6' | 'Numpad7' | 'Numpad8' | 'Numpad9' | 'NumpadAdd' | 'NumpadDecimal' | 'NumpadDivide' | 'NumpadMultiply' | 'NumpadSubtract' | 'PageDown' | 'PageUp' | 'Pause' | 'Period' | 'PrintScreen' | 'Quote' | 'ScrollLock' | 'Semicolon' | 'ShiftLeft' | 'ShiftRight' | 'Slash' | 'Space' | 'Tab';
+export type KeyboardEventCodeShift = `Shift+${KeyboardEventCodeBase}`;
+export type KeyboardEventCode = KeyboardEventCodeBase | KeyboardEventCodeCustom | KeyboardEventCodeShift;
+export type KeyboardEventCodeBase = 'AltLeft' | 'AltRight' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'AudioVolumeDown' | 'AudioVolumeMute' | 'AudioVolumeUp' | 'Backquote' | 'Backslash' | 'Backspace' | 'BracketLeft' | 'BracketRight' | 'CapsLock' | 'Comma' | 'ContextMenu' | 'ControlLeft' | 'ControlRight' | 'Delete' | 'Digit0' | 'Digit1' | 'Digit2' | 'Digit3' | 'Digit4' | 'Digit5' | 'Digit6' | 'Digit7' | 'Digit8' | 'Digit9' | 'End' | 'Enter' | 'Equal' | 'Escape' | 'F1' | 'F2' | 'F3' | 'F4' | 'F5' | 'F6' | 'F7' | 'F8' | 'F9' | 'F10' | 'F11' | 'F12' | 'Home' | 'Insert' | 'KeyA' | 'KeyB' | 'KeyC' | 'KeyD' | 'KeyE' | 'KeyF' | 'KeyG' | 'KeyH' | 'KeyI' | 'KeyJ' | 'KeyK' | 'KeyL' | 'KeyM' | 'KeyN' | 'KeyO' | 'KeyP' | 'KeyQ' | 'KeyR' | 'KeyS' | 'KeyT' | 'KeyU' | 'KeyV' | 'KeyW' | 'KeyX' | 'KeyY' | 'KeyZ' | 'MetaLeft' | 'MetaRight' | 'Minus' | 'NumLock' | 'Numpad0' | 'Numpad1' | 'Numpad2' | 'Numpad3' | 'Numpad4' | 'Numpad5' | 'Numpad6' | 'Numpad7' | 'Numpad8' | 'Numpad9' | 'NumpadAdd' | 'NumpadDecimal' | 'NumpadDivide' | 'NumpadMultiply' | 'NumpadSubtract' | 'PageDown' | 'PageUp' | 'Pause' | 'Period' | 'PrintScreen' | 'Quote' | 'ScrollLock' | 'Semicolon' | 'ShiftLeft' | 'ShiftRight' | 'Slash' | 'Space' | 'Tab';
 export declare const EVENT_KEY: Record<KeyboardEventKey, KeyboardEventKey>;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/utils/keyboard.js.map

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

package/dist/utils/sendAriaLiveMessage.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This utility function sends an ARIA live message to assistive technologies by dynamically creating a live region
+ * element in the DOM.
+ *
+ * @param message The message to be announced by screen readers.
+ * @param live The ARIA live attribute value, either 'assertive' or 'polite'. Defaults to 'polite'.
+ */
+export declare function sendAriaLiveMessage(message: string, live?: 'assertive' | 'polite'): void;

package/dist/utils/sendAriaLiveMessage.js

@@ -0,0 +1,14 @@
+/**
+ * This utility function sends an ARIA live message to assistive technologies by dynamically creating a live region
+ * element in the DOM.
+ *
+ * @param message The message to be announced by screen readers.
+ * @param live The ARIA live attribute value, either 'assertive' or 'polite'. Defaults to 'polite'.
+ */
+export function sendAriaLiveMessage(message, live = 'polite') {
+    // remove existing AriaLiveMessage element from dom
+    document.querySelectorAll('[data-bspk-aria-live]').forEach((el) => el.remove());
+    // add new AriaLiveMessage element to dom
+    document.body.insertAdjacentHTML('beforeend', `<div data-bspk-aria-live aria-live=${live || 'polite'} data-sr-only role="alert">${message}</div>`);
+}
+//# sourceMappingURL=sendAriaLiveMessage.js.map

package/dist/utils/sendAriaLiveMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sendAriaLiveMessage.js","sourceRoot":"","sources":["../../src/utils/sendAriaLiveMessage.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,UAAU,mBAAmB,CAAC,OAAe,EAAE,OAA+B,QAAQ;IACxF,mDAAmD;IACnD,QAAQ,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC;IAEhF,yCAAyC;IACzC,QAAQ,CAAC,IAAI,CAAC,kBAAkB,CAC5B,WAAW,EACX,sCAAsC,IAAI,IAAI,QAAQ,8BAA8B,OAAO,QAAQ,CACtG,CAAC;AACN,CAAC"}

package/dist/utils/sizing.d.ts

@@ -0,0 +1,3 @@
+export declare const SIZING_VALUES: readonly ["0", "4", "8", "12", "16", "20", "24", "28", "32", "40", "44", "48", "52", "56", "60", "64", "68", "72"];
+export type SizingPixels = `${(typeof SIZING_VALUES)[number]}`;
+export declare function numToSizingVar(numStr?: string): string | undefined;

package/dist/utils/sizing.js

@@ -0,0 +1,28 @@
+export const SIZING_VALUES = [
+    '0',
+    '4',
+    '8',
+    '12',
+    '16',
+    '20',
+    '24',
+    '28',
+    '32',
+    '40',
+    '44',
+    '48',
+    '52',
+    '56',
+    '60',
+    '64',
+    '68',
+    '72',
+];
+export function numToSizingVar(numStr) {
+    if (numStr === undefined || ['auto', '0'].includes(numStr))
+        return numStr;
+    if (!SIZING_VALUES.includes(numStr))
+        return undefined;
+    return `var(--spacing-sizing-${(Number(numStr) / 4).toString().padStart(2, '0')})`;
+}
+//# sourceMappingURL=sizing.js.map

package/dist/utils/sizing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizing.js","sourceRoot":"","sources":["../../src/utils/sizing.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG;IACzB,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;CACE,CAAC;AAIX,MAAM,UAAU,cAAc,CAAC,MAAe;IAC1C,IAAI,MAAM,KAAK,SAAS,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;QAAE,OAAO,MAAM,CAAC;IAE1E,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAsB,CAAC;QAAE,OAAO,SAAS,CAAC;IAEtE,OAAO,wBAAwB,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC;AACvF,CAAC"}

package/dist/utils/uiContext.d.ts

@@ -11,6 +11,5 @@ export type UIContextProps = {
     isMobile: boolean;
     isTablet: boolean;
     isDesktop: boolean;
-    sendAriaLiveMessage: (message: string, live?: AriaLiveMessage['live']) => void;
 };
 export declare const UIContext: import("react").Context<UIContextProps | undefined>;

package/dist/utils/uiContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"uiContext.js","sourceRoot":"","sources":["../../src/utils/uiContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,MAAM,CAAU,CAAC;AAevD,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CAA6B,SAAS,CAAC,CAAC"}
+{"version":3,"file":"uiContext.js","sourceRoot":"","sources":["../../src/utils/uiContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,MAAM,CAAU,CAAC;AAcvD,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CAA6B,SAAS,CAAC,CAAC"}

package/meta.ts

@@ -14,14 +14,15 @@ import { fileURLToPath } from 'url';
 
 import * as TJS from 'typescript-json-schema';
 
-import {
-    ComponentMeta,
-    TypeProperty,
-    UtilityMeta,
-    TypeMeta,
-    ComponentPhase,
-    COMPONENT_PHASE_ORDER,
-} from './src/types/meta';
+import { ComponentMeta, TypeProperty, UtilityMeta, TypeMeta, ComponentPhase } from './src/types/meta';
+
+const COMPONENT_PHASE_ORDER: ComponentPhase[] = [
+    'Utility', // Utility components are not tracked in the progress
+    'Backlog', // components that are not actively being worked on
+    'Dev', // components that are actively being developed
+    'UXReview', // components that are in UX Review
+    'Stable', // production ready
+];
 
 const RESET = '\x1b[0m';
 const BLUE = '\x1b[34m';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.3.11",
+    "version": "1.3.16",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [
@@ -13,9 +13,6 @@
         "tsconfig.json",
         "tsconfig.build.json"
     ],
-    "bin": {
-        "ui": "./.scripts/index.ts"
-    },
     "scripts": {
         "sass": "npx sass --no-source-map --silence-deprecation=mixed-decls src:dist",
         "build": "npx tsx build.ts",
@@ -99,8 +96,12 @@
         "./FileUpload/*": "./dist/components/FileUpload/*.js",
         "./FileUploadItem": "./dist/components/FileUploadItem/index.js",
         "./FileUploadItem/*": "./dist/components/FileUploadItem/*.js",
+        "./Flex": "./dist/components/Flex/index.js",
+        "./Flex/*": "./dist/components/Flex/*.js",
         "./FormField": "./dist/components/FormField/index.js",
         "./FormField/*": "./dist/components/FormField/*.js",
+        "./Grid": "./dist/components/Grid/index.js",
+        "./Grid/*": "./dist/components/Grid/*.js",
         "./Img": "./dist/components/Img/index.js",
         "./Img/*": "./dist/components/Img/*.js",
         "./InlineAlert": "./dist/components/InlineAlert/index.js",
@@ -117,8 +118,6 @@
         "./InputPhone/*": "./dist/components/InputPhone/*.js",
         "./InputPhoneField": "./dist/components/InputPhoneField/index.js",
         "./InputPhoneField/*": "./dist/components/InputPhoneField/*.js",
-        "./Layout": "./dist/components/Layout/index.js",
-        "./Layout/*": "./dist/components/Layout/*.js",
         "./Link": "./dist/components/Link/index.js",
         "./Link/*": "./dist/components/Link/*.js",
         "./ListItem": "./dist/components/ListItem/index.js",
@@ -131,6 +130,8 @@
         "./OTPInput/*": "./dist/components/OTPInput/*.js",
         "./PageControl": "./dist/components/PageControl/index.js",
         "./PageControl/*": "./dist/components/PageControl/*.js",
+        "./PageHeader": "./dist/components/PageHeader/index.js",
+        "./PageHeader/*": "./dist/components/PageHeader/*.js",
         "./Pagination": "./dist/components/Pagination/index.js",
         "./Pagination/*": "./dist/components/Pagination/*.js",
         "./Password": "./dist/components/Password/index.js",
@@ -231,10 +232,15 @@
         "./UIProvider/*": "./dist/components/UIProvider/*.js"
     },
     "publishConfig": {
-        "access": "public"
+        "access": "public",
+        "provenance": true
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Anywhererealestate/bspk-ui"
     },
     "engines": {
-        "node": ">=20"
+        "node": ">=24"
     },
     "dependencies": {
         "@bspk/icons": "^1.0.5",
@@ -249,31 +255,31 @@
         "react-dom": "^18.3.1"
     },
     "devDependencies": {
-        "@cspell/eslint-plugin": "^8.17.5",
-        "@eslint/css": "^0.8.1",
-        "@eslint/js": "^9.14.0",
+        "@cspell/eslint-plugin": "^9.4.0",
+        "@eslint/css": "^0.14.1",
+        "@eslint/js": "^9.39.1",
         "@playwright/test": "^1.52.0",
         "@semantic-release/git": "^10.0.1",
-        "@semantic-release/github": "^11.0.2",
-        "@semantic-release/npm": "^12.0.1",
+        "@semantic-release/github": "^12.0.2",
+        "@semantic-release/npm": "^13.1.2",
         "@testing-library/jest-dom": "^6.8.0",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.6.1",
         "@types/eslint-config-prettier": "^6.11.3",
-        "@types/eslint-plugin-jsx-a11y": "^6.10.0",
+        "@types/eslint-plugin-jsx-a11y": "^6.10.1",
         "@types/jest": "^29.5.14",
         "@types/jest-axe": "^3.5.9",
         "@types/node": "^22.10.2",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.5",
         "chokidar": "^4.0.3",
-        "eslint": "9.14.0",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-import-resolver-typescript": "^3.6.3",
-        "eslint-plugin-import": "^2.31.0",
+        "eslint": "^9.39.1",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-import-resolver-typescript": "^4.4.4",
+        "eslint-plugin-import": "^2.32.0",
         "eslint-plugin-jsx-a11y": "^6.10.2",
-        "eslint-plugin-react": "^7.37.2",
-        "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^7.0.1",
         "globals": "^15.12.0",
         "husky": "^9.1.7",
         "identity-obj-proxy": "^3.0.0",
@@ -283,7 +289,7 @@
         "jest-environment-jsdom": "^30.1.2",
         "prettier-plugin-jsdoc": "^1.3.0",
         "sass": "^1.89.2",
-        "semantic-release": "^24.2.0",
+        "semantic-release": "^25.0.2",
         "stylelint": "^16.19.1",
         "stylelint-config-standard": "^38.0.0",
         "stylelint-config-standard-scss": "^14.0.0",
@@ -291,7 +297,7 @@
         "tslib": "^2.8.1",
         "tsx": "^4.19.4",
         "typescript": "5.6.3",
-        "typescript-eslint": "8.13.0",
+        "typescript-eslint": "^8.49.0",
         "typescript-json-schema": "^0.65.1"
     },
     "brands": [

package/src/components/Accordion/Accordion.tsx

@@ -69,28 +69,30 @@ export type AccordionProps = {
  * @example
  *     import { Accordion } from '@bspk/ui/Accordion';
  *
- *     <Accordion
- *         singleOpen={true}
- *         items={[
- *             {
- *                 id: 1,
- *                 title: 'Lawrence Welk',
- *                 subtitle: 'The Champagne Music Maker',
- *                 children:
- *                     'Lawrence Welk was an American accordionist, bandleader, and television impresario, who hosted The Lawrence Welk Show from 1951 to 1982.',
- *             },
- *             {
- *                 id: 2,
- *                 title: 'Myron Floren',
- *                 subtitle: 'The Happy Norwegian',
- *                 children:
- *                     'Myron Floren was an American accordionist best known as the featured accordionist on The Lawrence Welk Show.',
- *             },
- *         ]}
- *     />;
+ *     <div style={{ width: 400 }}>
+ *         <Accordion
+ *             singleOpen={true}
+ *             items={[
+ *                 {
+ *                     id: 1,
+ *                     title: 'Lawrence Welk',
+ *                     subtitle: 'The Champagne Music Maker',
+ *                     children:
+ *                         'Lawrence Welk was an American accordionist, bandleader, and television impresario, who hosted The Lawrence Welk Show from 1951 to 1982.',
+ *                 },
+ *                 {
+ *                     id: 2,
+ *                     title: 'Myron Floren',
+ *                     subtitle: 'The Happy Norwegian',
+ *                     children:
+ *                         'Myron Floren was an American accordionist best known as the featured accordionist on The Lawrence Welk Show.',
+ *                 },
+ *             ]}
+ *         />
+ *     </div>;
  *
  * @name Accordion
- * @phase UXReview
+ * @phase Stable
  */
 export function Accordion({ items: itemsProp, singleOpen = true }: AccordionProps) {
     const items = useMemo(