@bspk/ui 1.3.7 → 1.3.9

package/dist/components/ToggleOption/toggle-option.css.js

@@ -1,55 +1,8 @@
 /** * This file is generated by the build script.
 * Do not edit this file directly. */
 const style = document.createElement('style');
-style.appendChild(document.createTextNode(`[data-bspk=toggle-option] {
-  display: grid;
-  width: 100%;
-  grid-template-columns: auto 1fr;
-  grid-column-gap: var(--spacing-sizing-02);
-  user-select: none;
-  background: unset;
-  border: unset;
-  cursor: pointer;
-  min-height: var(--spacing-sizing-08);
-  max-width: 100%;
-  padding: var(--spacing-sizing-01);
-}
-[data-bspk=toggle-option]:has([data-description]) {
-  align-items: unset;
-}
-@media (any-pointer: coarse) {
-  [data-bspk=toggle-option] {
-    min-height: var(--spacing-sizing-12);
-  }
-}
-[data-bspk=toggle-option] [data-control],
-[data-bspk=toggle-option] [data-label],
-[data-bspk=toggle-option] [data-description] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: start;
-}
-[data-bspk=toggle-option] [data-label] {
-  color: var(--foreground-neutral-on-surface);
-  font: var(--labels-base);
-}
-[data-bspk=toggle-option] [data-description] {
-  grid-column-start: 2;
-  font: var(--body-small);
-  color: var(--foreground-neutral-on-surface-variant-01);
-}
-[data-pseudo=focus] [data-bspk=toggle-option]:not([aria-disabled]), [data-bspk=toggle-option]:not([aria-disabled]):focus-visible, [data-bspk=toggle-option]:not([aria-disabled]):has(*:focus-visible) {
-  outline: var(--stroke-neutral-focus) 2px solid;
-}
-[data-bspk=toggle-option][aria-disabled] {
-  cursor: not-allowed;
-}
-[data-bspk=toggle-option][aria-disabled] [data-label] {
-  color: var(--foreground-neutral-disabled-on-surface);
-}
-[data-bspk=toggle-option][aria-disabled] [data-description] {
-  color: var(--foreground-neutral-disabled-on-surface);
+style.appendChild(document.createTextNode(`[data-bspk-owner=toggle-option] {
+  align-items: start;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Tooltip/Tooltip.d.ts

@@ -39,13 +39,9 @@ export type TooltipProps = {
  *     import { Tooltip } from '@bspk/ui/Tooltip';
  *     import { Button } from '@bspk/ui/Button';
  *
- *     function Example() {
- *         return (
- *             <Tooltip label="I explain what this button does" placement="top">
- *                 {(triggerProps) => <Button {...triggerProps}>Click me</Button>}
- *             </Tooltip>
- *         );
- *     }
+ *     <Tooltip label="I explain what this button does" placement="top">
+ *         {(triggerProps) => <Button {...triggerProps}>Click me</Button>}
+ *     </Tooltip>;
  *
  * @name Tooltip
  * @phase UXReview

package/dist/components/Tooltip/Tooltip.js

@@ -11,13 +11,9 @@ import { useId } from '../../hooks/useId';
  *     import { Tooltip } from '@bspk/ui/Tooltip';
  *     import { Button } from '@bspk/ui/Button';
  *
- *     function Example() {
- *         return (
- *             <Tooltip label="I explain what this button does" placement="top">
- *                 {(triggerProps) => <Button {...triggerProps}>Click me</Button>}
- *             </Tooltip>
- *         );
- *     }
+ *     <Tooltip label="I explain what this button does" placement="top">
+ *         {(triggerProps) => <Button {...triggerProps}>Click me</Button>}
+ *     </Tooltip>;
  *
  * @name Tooltip
  * @phase UXReview

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAgB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAa,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAmCtC;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,OAAO,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,QAAQ,GAAG,IAAI,EAAgB;IAC3G,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,QAAQ,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAElD,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAC;QAC7D,SAAS;QACT,QAAQ,EAAE,OAAO;QACjB,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/B,QAAQ;QACR,IAAI,EAAE,CAAC,IAAI;QACX,QAAQ,EAAE,KAAK;KAClB,CAAC,CAAC;IAEH,IAAI,QAAQ;QAAE,OAAO,QAAQ,CAAC,EAAE,CAAC,CAAC;IAElC,OAAO,CACH,8BACK,QAAQ,CAAC;gBACN,WAAW,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChC,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;gBAClC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;gBAC5B,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;gBAC5B,iBAAiB,EAAE,EAAE;aACxB,CAAC,EACD,KAAK,IAAI,CACN,KAAC,MAAM,cACH,4BACc,SAAS,oBACH,cAAc,EAAE,MAAM,EAAE,SAAS,EACjD,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;wBACV,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;wBAC3B,QAAQ,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAc,qBAAqB,EAAE,IAAI,CAAC,CAAC,CAAC;oBAC5F,CAAC,EACD,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,cAAc,aAErB,4CAAiB,KAAK,GAAQ,EAC9B,wDAGI,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;gCACV,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;4BAC5B,CAAC,EACD,KAAK,EAAE;gCACH,MAAM,EAAE,gCAAgC;gCACxC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gCACzB,IAAI,EAAE,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;gCAC3E,GAAG,EAAE,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;6BAC7E,GACH,IACA,GACD,CACZ,IACF,CACN,CAAC;AACN,CAAC"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAgB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAa,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAmCtC;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,OAAO,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,QAAQ,GAAG,IAAI,EAAgB;IAC3G,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,QAAQ,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAElD,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAC;QAC7D,SAAS;QACT,QAAQ,EAAE,OAAO;QACjB,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/B,QAAQ;QACR,IAAI,EAAE,CAAC,IAAI;QACX,QAAQ,EAAE,KAAK;KAClB,CAAC,CAAC;IAEH,IAAI,QAAQ;QAAE,OAAO,QAAQ,CAAC,EAAE,CAAC,CAAC;IAElC,OAAO,CACH,8BACK,QAAQ,CAAC;gBACN,WAAW,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChC,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;gBAClC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;gBAC5B,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;gBAC5B,iBAAiB,EAAE,EAAE;aACxB,CAAC,EACD,KAAK,IAAI,CACN,KAAC,MAAM,cACH,4BACc,SAAS,oBACH,cAAc,EAAE,MAAM,EAAE,SAAS,EACjD,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;wBACV,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;wBAC3B,QAAQ,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAc,qBAAqB,EAAE,IAAI,CAAC,CAAC,CAAC;oBAC5F,CAAC,EACD,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,cAAc,aAErB,4CAAiB,KAAK,GAAQ,EAC9B,wDAGI,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;gCACV,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;4BAC5B,CAAC,EACD,KAAK,EAAE;gCACH,MAAM,EAAE,gCAAgC;gCACxC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gCACzB,IAAI,EAAE,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;gCAC3E,GAAG,EAAE,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;6BAC7E,GACH,IACA,GACD,CACZ,IACF,CACN,CAAC;AACN,CAAC"}

package/dist/components/Tooltip/TooltipExample.js

@@ -1,8 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from '../Button';
 export const TooltipExample = {
-    render: ({ props: state, Component }) => {
-        return (_jsx(Component, { ...state, label: `Hover over me ${state.label || ''}`, placement: [state.placement].flat()[0] || 'top', children: (triggerProps) => _jsx(Button, { ...triggerProps, label: "Hover over me", variant: "secondary" }) }));
+    defaultState: {
+        children: (triggerProps) => _jsx("span", { ...triggerProps, children: "Hover me" }),
+    },
+    presets: [
+        {
+            label: 'Long Label Tooltip',
+            propState: {
+                label: 'This is a longer tooltip label to demonstrate how the tooltip handles more content.',
+                placement: 'top',
+                children: (triggerProps) => _jsx("span", { ...triggerProps, children: "Long Tooltip Label" }),
+            },
+        },
+        {
+            label: 'No Label',
+            propState: {
+                label: '',
+                placement: 'top',
+                children: (triggerProps) => _jsx("span", { ...triggerProps, children: "No Label" }),
+            },
+        },
+    ],
+    render: ({ props, Component }) => {
+        return _jsx(Component, { ...props, children: props.children || (() => _jsx("span", { children: "No Hover" })) });
     },
 };
 //# sourceMappingURL=TooltipExample.js.map

package/dist/components/Tooltip/TooltipExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipExample.js","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,cAAc,GAAmC;IAC1D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QACpC,OAAO,CACH,KAAC,SAAS,OACF,KAAK,EACT,KAAK,EAAE,iBAAiB,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE,EAC3C,SAAS,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,YAE9C,CAAC,YAAY,EAAE,EAAE,CAAC,KAAC,MAAM,OAAK,YAAY,EAAE,KAAK,EAAC,eAAe,EAAC,OAAO,EAAC,WAAW,GAAG,GACjF,CACf,CAAC;IACN,CAAC;CACJ,CAAC"}
+{"version":3,"file":"TooltipExample.js","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,cAAc,GAAmC;IAC1D,YAAY,EAAE;QACV,QAAQ,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,kBAAU,YAAY,yBAAiB;KACtE;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,oBAAoB;YAC3B,SAAS,EAAE;gBACP,KAAK,EAAE,qFAAqF;gBAC5F,SAAS,EAAE,KAAK;gBAChB,QAAQ,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,kBAAU,YAAY,mCAA2B;aAChF;SACJ;QACD;YACI,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE;gBACP,KAAK,EAAE,EAAE;gBACT,SAAS,EAAE,KAAK;gBAChB,QAAQ,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,kBAAU,YAAY,yBAAiB;aACtE;SACJ;KACJ;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,KAAC,SAAS,OAAK,KAAK,YAAG,KAAK,CAAC,QAAQ,IAAI,CAAC,GAAG,EAAE,CAAC,sCAAqB,CAAC,GAAa,CAAC;IAC/F,CAAC;CACJ,CAAC"}

package/dist/components/Txt/Txt.d.ts

@@ -45,9 +45,7 @@ export type TxtProps<As extends ElementType = ElementType> = {
  * @example
  *     import { Txt } from '@bspk/ui/Txt';
  *
- *     function Example() {
- *         return <Txt>Example Txt</Txt>;
- *     }
+ *     <Txt>Example Txt</Txt>;
  *
  * @name Txt
  * @phase UXReview

package/dist/components/Txt/Txt.js

@@ -6,9 +6,7 @@ import { SkeletonText } from '../SkeletonText';
  * @example
  *     import { Txt } from '@bspk/ui/Txt';
  *
- *     function Example() {
- *         return <Txt>Example Txt</Txt>;
- *     }
+ *     <Txt>Example Txt</Txt>;
  *
  * @name Txt
  * @phase UXReview

package/dist/components/Txt/Txt.js.map

@@ -1 +1 @@
-{"version":3,"file":"Txt.js","sourceRoot":"","sources":["../../../src/components/Txt/Txt.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AA2CzD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,GAAG,CAAuC,EACtD,QAAQ,EACR,EAAE,EACF,OAAO,GAAG,WAAW,EACrB,KAAK,EAAE,SAAS,EAChB,aAAa,GAAG,CAAC,EACjB,OAAO,EACP,GAAG,cAAc,EACY;IAC7B,MAAM,OAAO,GAAG,QAAQ,EAAE,QAAQ,EAAE,CAAC;IAErC,IAAI,CAAC,OAAO;QAAE,OAAO,aAAa,CAAC,CAAC,CAAC,KAAC,YAAY,IAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAErG,MAAM,EAAE,GAAgB,EAAE,IAAI,MAAM,CAAC;IAErC,OAAO,CACH,KAAC,EAAE,OACK,cAAc,eACR,KAAK,EACf,KAAK,EAAE;YACH,GAAG,SAAS;YACZ,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,OAAO,GAAG;SAClD,YAEA,OAAO,GACP,CACR,CAAC;AACN,CAAC"}
+{"version":3,"file":"Txt.js","sourceRoot":"","sources":["../../../src/components/Txt/Txt.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AA2CzD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,GAAG,CAAuC,EACtD,QAAQ,EACR,EAAE,EACF,OAAO,GAAG,WAAW,EACrB,KAAK,EAAE,SAAS,EAChB,aAAa,GAAG,CAAC,EACjB,OAAO,EACP,GAAG,cAAc,EACY;IAC7B,MAAM,OAAO,GAAG,QAAQ,EAAE,QAAQ,EAAE,CAAC;IAErC,IAAI,CAAC,OAAO;QAAE,OAAO,aAAa,CAAC,CAAC,CAAC,KAAC,YAAY,IAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAErG,MAAM,EAAE,GAAgB,EAAE,IAAI,MAAM,CAAC;IAErC,OAAO,CACH,KAAC,EAAE,OACK,cAAc,eACR,KAAK,EACf,KAAK,EAAE;YACH,GAAG,SAAS;YACZ,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,OAAO,GAAG;SAClD,YAEA,OAAO,GACP,CACR,CAAC;AACN,CAAC"}

package/dist/components/UIProvider/AriaLiveMessageHandler.js

@@ -2,8 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useEventListener } from '../../hooks/useAddEventListener';
 import { useTimeout } from '../../hooks/useTimeout';
+const CUSTOM_EVENT_NAME = 'bspk-aria-live';
 export function sendAriaLiveMessage(message, live = 'polite') {
-    document.dispatchEvent(new CustomEvent('aria-live', { detail: { message, live } }));
+    document.dispatchEvent(new CustomEvent(CUSTOM_EVENT_NAME, { detail: { message, live } }));
 }
 /**
  * AriaLiveMessageHandler is a single use component that listens for aria-live messages and displays them to the user.
@@ -19,7 +20,7 @@ export function sendAriaLiveMessage(message, live = 'polite') {
 export function AriaLiveMessageHandler() {
     const [ariaLiveMessage, setAriaLiveMessage] = useState(undefined);
     const timeout = useTimeout();
-    useEventListener('aria-live', (event) => {
+    useEventListener(CUSTOM_EVENT_NAME, (event) => {
         const { message, live } = event.detail;
         // Clear any existing message to ensure that screen readers read the new message
         setAriaLiveMessage(undefined);

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

@@ -1 +1 @@
-{"version":3,"file":"AriaLiveMessageHandler.js","sourceRoot":"","sources":["../../../src/components/UIProvider/AriaLiveMessageHandler.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,MAAM,UAAU,mBAAmB,CAAC,OAAe,EAAE,OAA+B,QAAQ;IACxF,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;AACxF,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,sBAAsB;IAClC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAA8B,SAAS,CAAC,CAAC;IAE/F,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,gBAAgB,CACZ,WAAW,EACX,CAAC,KAAkB,EAAE,EAAE;QACnB,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QACvC,gFAAgF;QAChF,kBAAkB,CAAC,SAAS,CAAC,CAAC;QAC9B,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,IAAI,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACnF,CAAC,EACD,QAAQ,CACX,CAAC;IAEF,OAAO,CACH,eAAe,IAAI,CACf,2BAAgB,eAAe,EAAE,IAAI,IAAI,QAAQ,wBAAe,IAAI,EAAC,OAAO,YACvE,eAAe,EAAE,OAAO,GACvB,CACT,CACJ,CAAC;AACN,CAAC"}
+{"version":3,"file":"AriaLiveMessageHandler.js","sourceRoot":"","sources":["../../../src/components/UIProvider/AriaLiveMessageHandler.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,MAAM,iBAAiB,GAAG,gBAAgB,CAAC;AAE3C,MAAM,UAAU,mBAAmB,CAAC,OAAe,EAAE,OAA+B,QAAQ;IACxF,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,iBAAiB,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;AAC9F,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,sBAAsB;IAClC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAA8B,SAAS,CAAC,CAAC;IAE/F,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,gBAAgB,CACZ,iBAAiB,EACjB,CAAC,KAAkB,EAAE,EAAE;QACnB,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QACvC,gFAAgF;QAChF,kBAAkB,CAAC,SAAS,CAAC,CAAC;QAC9B,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,IAAI,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACnF,CAAC,EACD,QAAQ,CACX,CAAC;IAEF,OAAO,CACH,eAAe,IAAI,CACf,2BAAgB,eAAe,EAAE,IAAI,IAAI,QAAQ,wBAAe,IAAI,EAAC,OAAO,YACvE,eAAe,EAAE,OAAO,GACvB,CACT,CACJ,CAAC;AACN,CAAC"}

package/dist/hooks/useAddEventListener.d.ts

@@ -1,2 +1 @@
-export type CustomEventName = 'aria-live';
-export declare function useEventListener<KW extends keyof WindowEventMap, KH extends keyof HTMLElementEventMap & keyof SVGElementEventMap, KM extends keyof MediaQueryListEventMap, T extends Document | HTMLElement | MediaQueryList | SVGAElement | Window = HTMLElement>(eventName: CustomEventName | KH | KM | KW, handler: (event: Event | HTMLElementEventMap[KH] | MediaQueryListEventMap[KM] | SVGElementEventMap[KH] | WindowEventMap[KW]) => void, element?: T, disabled?: boolean, options?: AddEventListenerOptions | boolean): void;
+export declare function useEventListener<KW extends keyof WindowEventMap, KH extends keyof HTMLElementEventMap & keyof SVGElementEventMap, KM extends keyof MediaQueryListEventMap, T extends Document | HTMLElement | MediaQueryList | SVGAElement | Window = HTMLElement>(eventName: KH | KM | KW | string, handler: (event: Event | HTMLElementEventMap[KH] | MediaQueryListEventMap[KM] | SVGElementEventMap[KH] | WindowEventMap[KW]) => void, element?: T, disabled?: boolean, options?: AddEventListenerOptions | boolean): void;

package/dist/hooks/useAddEventListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAddEventListener.js","sourceRoot":"","sources":["../../src/hooks/useAddEventListener.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAI5D,MAAM,UAAU,gBAAgB,CAM5B,SAAyC,EACzC,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"}
+{"version":3,"file":"useAddEventListener.js","sourceRoot":"","sources":["../../src/hooks/useAddEventListener.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/hooks/useRadioState.d.ts

@@ -18,6 +18,6 @@ import { RadioProps } from '-/components/Radio';
 export declare function useRadioState(name: string, externalState?: [value: string | undefined, onChange: (next: string) => void]): {
     radioProps: (radioValue: string) => Pick<RadioProps, "checked" | "name" | "onChange" | "value">;
     value: string | undefined;
-    setValue: (next: string) => void;
+    setValue: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
 };
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useTimeout.d.ts

@@ -22,6 +22,5 @@ export type TimeoutHook = {
  *
  * @returns A ref object that can be used to store a timeout id.
  */
-export declare function useTimeout(): TimeoutHook;
-export declare function useTimeout(initialCallback: () => void, durationMs: number): TimeoutHook;
+export declare function useTimeout(durationMs?: number): TimeoutHook;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useTimeout.js

@@ -1,12 +1,28 @@
 import { useRef, useEffect, useMemo } from 'react';
-export function useTimeout(initialCallback, durationMs = 1000) {
+/**
+ * A hook that creates a timeout that is automatically cleared when the component is unmounted.
+ *
+ * @example
+ *     import { useTimeout } from '@bspk/ui/hooks/useTimeout';
+ *     import { useEffect } from 'react';
+ *
+ *     function MyComponent() {
+ *     const timeout = useTimeout();
+ *
+ *     const handleClick = () => {
+ *     timeout.set(() => console.log('Timeout triggered'), 1000);
+ *     };
+ *
+ *     return <Button onClick={handleClick}>Click here then check the console.</Button>;
+ *     }
+ *
+ * @returns A ref object that can be used to store a timeout id.
+ */
+export function useTimeout(durationMs = 1000) {
     const timeoutRef = useRef(null);
     useEffect(() => {
         if (timeoutRef.current)
             clearTimeout(timeoutRef.current);
-        if (initialCallback)
-            timeoutRef.current = setTimeout(initialCallback, durationMs);
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- only run at mount
     }, []);
     return useMemo(() => ({
         clear: () => {

package/dist/hooks/useTimeout.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTimeout.js","sourceRoot":"","sources":["../../src/hooks/useTimeout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AA6BnD,MAAM,UAAU,UAAU,CAAC,eAA4B,EAAE,UAAU,GAAG,IAAI;IACtE,MAAM,UAAU,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,UAAU,CAAC,OAAO;YAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACzD,IAAI,eAAe;YAAE,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;QAClF,4EAA4E;IAChF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,OAAO,CACV,GAAG,EAAE,CAAC,CAAC;QACH,KAAK,EAAE,GAAG,EAAE;YACR,IAAI,UAAU,CAAC,OAAO;gBAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC7D,CAAC;QACD,GAAG,EAAE,CAAC,QAAoB,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE;YAC3C,IAAI,UAAU,CAAC,OAAO;gBAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YACzD,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAClD,CAAC;QACD,GAAG,EAAE,UAAU;KAClB,CAAC,EACF,CAAC,UAAU,CAAC,CACf,CAAC;AACN,CAAC;AAED,sDAAsD"}
+{"version":3,"file":"useTimeout.js","sourceRoot":"","sources":["../../src/hooks/useTimeout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAQnD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,UAAU,CAAC,UAAU,GAAG,IAAI;IACxC,MAAM,UAAU,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,UAAU,CAAC,OAAO;YAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,OAAO,CACV,GAAG,EAAE,CAAC,CAAC;QACH,KAAK,EAAE,GAAG,EAAE;YACR,IAAI,UAAU,CAAC,OAAO;gBAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC7D,CAAC;QACD,GAAG,EAAE,CAAC,QAAoB,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE;YAC3C,IAAI,UAAU,CAAC,OAAO;gBAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YACzD,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAClD,CAAC;QACD,GAAG,EAAE,UAAU;KAClB,CAAC,EACF,CAAC,UAAU,CAAC,CACf,CAAC;AACN,CAAC;AAED,sDAAsD"}

package/dist/types/common.d.ts

@@ -5,6 +5,7 @@
  *
  * @bspk/ui/Txt".
  */
+import { IconName } from '@bspk/icons';
 import { JSXElementConstructor, ReactNode, ComponentPropsWithoutRef, AriaRole, ChangeEvent, KeyboardEvent, CSSProperties } from 'react';
 export type AlertVariant = 'error' | 'informational' | 'success' | 'warning';
 /** Sets a ref to the given element. */
@@ -17,6 +18,8 @@ export type CSSWithVariables = CSSProperties | (CSSProperties & {
 });
 export type DataProps = Record<`data-${string}`, string>;
 export type ButtonSize = 'large' | 'medium' | 'small' | 'x-small';
+/** The name of an icon in the Bspk icon library. */
+export type BspkIcon = IconName;
 export type CallToActionButton = {
     /**
      * The label of the call to action button.

package/dist/types/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;AAyKH,sDAAsD"}
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;AA6KH,sDAAsD"}

package/dist/types/meta.d.ts

@@ -33,6 +33,7 @@ export type TypeProperty = {
     minimum?: number;
     maximum?: number;
     example?: string;
+    arrayType?: string;
 };
 export type ComponentMeta = BaseMeta & {
     slug: string;

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;AAmDF,sDAAsD"}
+{"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"}

package/dist/utils/createCustomEvent.d.ts

@@ -0,0 +1,17 @@
+export type CustomEventDetail = Array<CustomEventDetail> | Function | boolean | number | string | {
+    [key: string]: CustomEventDetail;
+} | null | undefined;
+export type CustomEventHandler<TDetail extends CustomEventDetail> = (detail: TDetail) => void;
+/**
+ * Like React.createContext but for custom events using the DOM's CustomEvent system.
+ *
+ * This allows for communication between components without using React.Context, which can cause unnecessary re-renders.
+ *
+ * This generator ensures only safe detail types are used. !important;
+ */
+export declare function createCustomEvent<TDetail extends CustomEventDetail>(
+/** The name of the custom event to create. Prefix with 'bspk-' to avoid conflicts. */
+eventName: string): {
+    send(detail: TDetail): void;
+    useEventListener(listener: CustomEventHandler<TDetail>): void;
+};

package/dist/utils/createCustomEvent.js

@@ -0,0 +1,21 @@
+import { useEventListener } from '../hooks/useAddEventListener';
+/**
+ * Like React.createContext but for custom events using the DOM's CustomEvent system.
+ *
+ * This allows for communication between components without using React.Context, which can cause unnecessary re-renders.
+ *
+ * This generator ensures only safe detail types are used. !important;
+ */
+export function createCustomEvent(
+/** The name of the custom event to create. Prefix with 'bspk-' to avoid conflicts. */
+eventName) {
+    return {
+        send(detail) {
+            document.dispatchEvent(new CustomEvent(eventName, { detail }));
+        },
+        useEventListener(listener) {
+            useEventListener(eventName, (event) => listener(event.detail), document);
+        },
+    };
+}
+//# sourceMappingURL=createCustomEvent.js.map

package/dist/utils/createCustomEvent.js.map

@@ -0,0 +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"}

package/dist/utils/createExampleChildElement.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-explicit-any */ import { SvgContentCopy } from '@bspk/icons/ContentCopy';
 import { SvgDiamond } from '@bspk/icons/Diamond';
 import { Avatar } from '../components/Avatar';
+import { Button } from '../components/Button';
 import { Checkbox } from '../components/Checkbox';
 import { Img } from '../components/Img';
-import { ListItem } from '../components/ListItem';
 import { Radio } from '../components/Radio';
 import { Switch } from '../components/Switch';
 import { Tag } from '../components/Tag';
@@ -29,9 +29,9 @@ export function createExampleChildElement({ exampleState, name, setState, action
             componentName,
         };
     }
-    if (componentName === 'ListItemButton')
+    if (componentName === 'Button')
         return {
-            element: (_jsx(ListItem.Button, { icon: _jsx(SvgContentCopy, {}), label: "LI Button", onClick: () => action('ListItem button clicked') })),
+            element: (_jsx(Button, { icon: _jsx(SvgContentCopy, {}), label: "LI Button", onClick: () => action('ListItem button clicked') })),
             componentName,
         };
     if (componentName === 'Img')

package/dist/utils/createExampleChildElement.js.map

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

package/dist/utils/demo.d.ts

@@ -1,20 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { AlertVariant, DataProps } from '-/types/common';
-import { ComponentMeta } from '-/types/meta';
-export type TypeProperty = {
-    name: string;
-    description?: string;
-    type?: string[] | string;
-    default?: unknown;
-    required?: boolean;
-    options?: number[] | string[];
-    variants?: string[];
-    references?: string[];
-    minimum?: number;
-    maximum?: number;
-    example?: string;
-    exampleType?: string;
-};
+import { ComponentMeta, TypeProperty } from '-/types/meta';
 export type DemoAction = (message: string, variant?: AlertVariant) => void;
 export type DemoSetState<Props = Record<string, unknown>> = (next: Partial<Props> | ((prev: Props) => Partial<Props>)) => void;
 export type TypePropertyDemo = Omit<TypeProperty, 'example'> & {
@@ -45,8 +31,18 @@ export type ComponentVariantOverride<Props> = {
         options: Props[K][];
     };
 };
+export type ComponentPageSection<Props = Record<string, unknown>> = {
+    title: string;
+    content: (params: {
+        Component?: React.ComponentType<Props>;
+        props: Props;
+        CodeExample: CodeExample;
+        Syntax: Syntax;
+    }) => React.ReactNode;
+    location?: 'afterDemo' | 'beforeDemo';
+};
 export type ComponentVariantOverrides<Props = Record<string, unknown>, PropName extends keyof Props = keyof Props> = {
-    [Key in PropName]?: ComponentVariantOverride<Props> | false | ((props: Props) => ComponentVariantOverride<Props>);
+    [Key in PropName]?: ComponentVariantOverride<Props> | false;
 };
 export type ComponentExample<Props = Record<string, unknown>, PropName extends keyof Props = keyof Props> = {
     /**
@@ -91,16 +87,7 @@ export type ComponentExample<Props = Record<string, unknown>, PropName extends k
      */
     disableProps?: PropName[] | true;
     /** The sections of the example. */
-    sections?: {
-        title: string;
-        content: (params: {
-            Component: React.ComponentType<Props>;
-            props: Props;
-            CodeExample: CodeExample;
-            Syntax: Syntax;
-        }) => React.ReactNode;
-        location?: 'afterDemo' | 'beforeDemo';
-    }[];
+    sections?: ComponentPageSection<Props>[];
 };
 export type Syntax = (params: {
     code: string;
@@ -125,6 +112,11 @@ export type ComponentExampleFn<Props = Record<string, unknown>> = (params: {
 }) => ComponentExample<Props>;
 export type OnHandlers = `on${string}`;
 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;
     /** 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. */

package/dist/utils/demo.js.map

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

package/meta.ts

@@ -332,17 +332,22 @@ function generateTypes() {
             ? context.componentFile?.jsDocs?.find(({ id }) => id === kebabCase(definition.description!))
             : undefined;
 
+        const type = definition.type?.toString();
+
+        const arrayType = type?.match(/Array<(.+)>/)?.[1];
+
         const next: TypeProperty = {
             name,
             required: required?.includes(name),
             description: jsDoc?.description || definition.description,
             default: definition.default === 'undefined' ? undefined : definition.default,
-            type: definition.type?.toString(),
+            type,
             exampleType: jsDoc?.exampleType,
             minimum: definition.minimum,
             maximum: definition.maximum,
             options: jsDoc?.options?.split(',').map((o) => o.trim()),
             example: jsDoc?.example,
+            arrayType,
         };
 
         if (next.name.match(/^on[A-Z]/)) next.type = 'function';

package/package.json

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

package/src/components/Accordion/Accordion.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @cspell/spellchecker */
 import './accordion.scss';
 import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
 import { SvgKeyboardArrowUp } from '@bspk/icons/KeyboardArrowUp';
@@ -68,9 +69,25 @@ export type AccordionProps = {
  * @example
  *     import { Accordion } from '@bspk/ui/Accordion';
  *
- *     function Example() {
- *         return <Accordion items={[{ id: 1, title: 'Section', children: 'Example content' }]} />;
- *     }
+ *     <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.',
+ *             },
+ *         ]}
+ *     />;
  *
  * @name Accordion
  * @phase UXReview

package/src/components/Avatar/Avatar.tsx

@@ -85,21 +85,20 @@ export type AvatarProps = CommonProps<'disabled'> & {
  *
  * @example
  *     import { Avatar } from '@bspk/ui/Avatar';
- *     import { SvgPerson } from '@bspk/icons/Person';
  *
- *     function Example() {
- *         return (
- *             <Avatar
- *                 color="blue"
- *                 icon={<SvgPerson />}
- *                 image="/avatar-01.png"
- *                 initials="AR"
- *                 name="Andre Giant"
- *                 showTooltip
- *                 size="large"
- *             />
- *         );
- *     }
+ *     <Avatar
+ *         color="blue"
+ *         showIcon
+ *         image="/avatar-01.png"
+ *         initials="AR"
+ *         name="Andre Giant"
+ *         hideTooltip
+ *         size="large"
+ *         disabled={false}
+ *         onClick={() => action('Launch avatar popover')}
+ *         showIcon={false}
+ *         hideTooltip={true}
+ *     />;
  *
  * @exampleDescription The image if provided is displayed first, followed by the icon if provided, and finally the initials. If no initials are provided, the first two letters of the name will be used as initials.
  *