@bspk/ui 1.1.17 → 1.1.19

package/dist/hooks/useKeyboardNavigation.js

@@ -59,7 +59,10 @@ export function useKeyboardNavigation(containerElement) {
         if (next >= itemElements.length)
             next = 0;
         itemElements.forEach((el, index) => {
-            el.dataset.selected = index === next ? 'true' : undefined;
+            if (index === next)
+                el.setAttribute('data-selected', 'true');
+            else
+                el.removeAttribute('data-selected');
         });
         scrollElementIntoView(itemElements[next], containerElement);
         setSelectedIndex(next);
@@ -68,7 +71,7 @@ export function useKeyboardNavigation(containerElement) {
     return {
         handleKeyNavigation: handleArrowKeyNavigation,
         selectedIndex,
-        selectedId: selectedIndex === -1 ? undefined : containerElement.children[selectedIndex].id,
+        selectedId: selectedIndex === -1 ? undefined : containerElement.children[selectedIndex]?.id,
         setSelectedIndex: setSelectedIndex,
     };
 }

package/dist/hooks/useKeyboardNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardNavigation.js","sourceRoot":"","sources":["../../src/hooks/useKeyboardNavigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,qBAAqB,CACjC,gBAAqC;IAerC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvD,IAAI,CAAC,gBAAgB;QACjB,OAAO;YACH,mBAAmB,EAAE,GAAG,EAAE,CAAC,KAAK;YAChC,aAAa;YACb,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC;YAC1B,UAAU,EAAE,SAAS;SACxB,CAAC;IAEN,MAAM,wBAAwB,GAAG,CAAC,KAAoB,EAAW,EAAE;QAC/D,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC;YAAE,OAAO,KAAK,CAAC;QAElF,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,gBAAgB,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,MAAM;YAAE,OAAO,KAAK,CAAC;QAEzE,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAkB,CAAC;QAE7E,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,KAAK,IAAI,aAAa,KAAK,CAAC,CAAC,EAAE,CAAC;YACxD,YAAY,CAAC,aAAa,CAAC,CAAC,KAAK,EAAE,CAAC;YACpC,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,IAAI,IAAI,GAAG,CAAC,CAAC;QACb,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,SAAS;YAAE,IAAI,GAAG,aAAa,GAAG,CAAC,CAAC;QACnG,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,UAAU;YAAE,IAAI,GAAG,aAAa,GAAG,CAAC,CAAC;QAEtG,IAAI,IAAI,GAAG,CAAC;YAAE,IAAI,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;QAC7C,IAAI,IAAI,IAAI,YAAY,CAAC,MAAM;YAAE,IAAI,GAAG,CAAC,CAAC;QAE1C,YAAY,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;YAC/B,EAAE,CAAC,OAAO,CAAC,QAAQ,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;QAC9D,CAAC,CAAC,CAAC;QAEH,qBAAqB,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC,CAAC;QAC5D,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,OAAO,IAAI,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO;QACH,mBAAmB,EAAE,wBAAwB;QAC7C,aAAa;QACb,UAAU,EAAE,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,EAAE;QAC1F,gBAAgB,EAAE,gBAAgB;KACrC,CAAC;AACN,CAAC;AAED,sDAAsD"}
+{"version":3,"file":"useKeyboardNavigation.js","sourceRoot":"","sources":["../../src/hooks/useKeyboardNavigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,qBAAqB,CACjC,gBAAqC;IAerC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvD,IAAI,CAAC,gBAAgB;QACjB,OAAO;YACH,mBAAmB,EAAE,GAAG,EAAE,CAAC,KAAK;YAChC,aAAa;YACb,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC;YAC1B,UAAU,EAAE,SAAS;SACxB,CAAC;IAEN,MAAM,wBAAwB,GAAG,CAAC,KAAoB,EAAW,EAAE;QAC/D,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC;YAAE,OAAO,KAAK,CAAC;QAElF,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,gBAAgB,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,MAAM;YAAE,OAAO,KAAK,CAAC;QAEzE,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAkB,CAAC;QAE7E,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,KAAK,IAAI,aAAa,KAAK,CAAC,CAAC,EAAE,CAAC;YACxD,YAAY,CAAC,aAAa,CAAC,CAAC,KAAK,EAAE,CAAC;YACpC,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,IAAI,IAAI,GAAG,CAAC,CAAC;QACb,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,SAAS;YAAE,IAAI,GAAG,aAAa,GAAG,CAAC,CAAC;QACnG,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,UAAU;YAAE,IAAI,GAAG,aAAa,GAAG,CAAC,CAAC;QAEtG,IAAI,IAAI,GAAG,CAAC;YAAE,IAAI,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;QAC7C,IAAI,IAAI,IAAI,YAAY,CAAC,MAAM;YAAE,IAAI,GAAG,CAAC,CAAC;QAE1C,YAAY,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;YAC/B,IAAI,KAAK,KAAK,IAAI;gBAAE,EAAE,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;;gBACxD,EAAE,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;QAEH,qBAAqB,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC,CAAC;QAC5D,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,OAAO,IAAI,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO;QACH,mBAAmB,EAAE,wBAAwB;QAC7C,aAAa;QACb,UAAU,EAAE,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,EAAE;QAC3F,gBAAgB,EAAE,gBAAgB;KACrC,CAAC;AACN,CAAC;AAED,sDAAsD"}

package/dist/hooks/useOptionIconsInvalid.d.ts

@@ -20,8 +20,17 @@ export type NavOption = {
     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. */
+    /**
+     * The the icon to display before the label.
+     *
+     * @type BspkIcon
+     */
     icon?: React.ReactNode;
+    /**
+     * The icon to display before the label when the option is active.
+     *
+     * @type BspkIcon
+     */
     iconActive?: React.ReactNode;
 };
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useOptionIconsInvalid.js.map

@@ -1 +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"}
+{"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;AA+BD,sDAAsD"}

package/dist/index.d.ts

@@ -3,8 +3,9 @@
  *
  * Components should be imported directly like "import { Txt } from @bspk/ui/Txt".
  */
-import { ChangeEvent, MouseEvent as ReactMouseEvent, ComponentProps, JSXElementConstructor, ReactNode } from 'react';
+import { ComponentProps, JSXElementConstructor, ReactNode } from 'react';
 export type AlertVariant = 'error' | 'informational' | 'success' | 'warning';
+export type SetRef<T> = (instance: T | null) => void;
 export type ElementProps<P extends Record<string, unknown>, E extends JSXElementConstructor<unknown> | keyof JSX.IntrinsicElements, O extends string = ''> = Omit<ComponentProps<E>, O | keyof P> & P;
 export type ButtonSize = 'large' | 'medium' | 'small' | 'x-small';
 export type CallToActionButton = {
@@ -17,29 +18,13 @@ export type CallToActionButton = {
     /**
      * The callback function for the call to action button.
      *
-     * @type () => void
      * @required
      */
     onClick: () => void;
     /** The size of the call to action button. */
     size?: ButtonSize;
 };
-export type ToggleControlProps<T extends HTMLElement> = CommonProps<'aria-label' | 'disabled' | 'name', T> & InvalidPropsLibrary & Required<CommonProps<'value'>> & {
-    /**
-     * Marks the control as checked.
-     *
-     * @default false
-     */
-    checked?: boolean;
-    /**
-     * The function to call when the control is checked or unchecked.
-     *
-     * @type (checked, Event) => void
-     * @required
-     */
-    onChange: (checked: boolean, event: ChangeEvent<T>) => void;
-};
-export type CommonProps<K extends keyof CommonPropsLibrary, T extends HTMLElement = HTMLElement> = Pick<CommonPropsLibrary<T>, K>;
+export type CommonProps<K extends keyof CommonPropsLibrary> = Pick<CommonPropsLibrary, K>;
 /**
  * The props that are common to input elements.
  *
@@ -61,7 +46,7 @@ export type InvalidPropsLibrary = {
      */
     errorMessage?: string;
 };
-export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
+export type CommonPropsLibrary = {
     /** The id of the element. If not provided one will be generated. */
     id?: string;
     /**
@@ -118,13 +103,6 @@ export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
      * @required
      */
     'aria-label': string;
-    /**
-     * The function to call when the element is clicked.
-     *
-     * @param event - The mouse event.
-     * @returns Void
-     */
-    onClick?: (event: ReactMouseEvent<T, MouseEvent>) => void;
 };
 export type Brand = 'anywhere' | 'better-homes-gardens' | 'cartus' | 'century-21' | 'coldwell-banker' | 'corcoran' | 'denali-boss' | 'era' | 'sothebys';
 export declare const BRANDS: {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA0JH,MAAM,CAAC,MAAM,MAAM,GAAqC;IACpD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,wBAAwB,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACjE,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;IACnC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE;IAC3C,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE;IACrD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7C,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE;IAC7B,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE;CAClC,CAAC;AAEX,sDAAsD"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA+HH,MAAM,CAAC,MAAM,MAAM,GAAqC;IACpD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,wBAAwB,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACjE,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;IACnC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE;IAC3C,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE;IACrD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7C,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE;IAC7B,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE;CAClC,CAAC;AAEX,sDAAsD"}

package/dist/list-item.css

@@ -1 +1 @@
-[data-bspk=list-item]{display:block;width:100%;box-sizing:border-box;padding:0 var(--spacing-sizing-02);background:unset;border:unset;margin:unset;text-decoration:unset;user-select:none;color:var(--foreground-neutral-on-surface)}[data-bspk=list-item]:is(a),[data-bspk=list-item]:is(button),[data-bspk=list-item][onclick],[data-bspk=list-item][role=button]{cursor:pointer}[data-bspk=list-item] [data-inner]{height:100%;width:100%;min-height:var(--spacing-sizing-09);box-sizing:border-box;display:flex;flex-direction:row;gap:var(--spacing-sizing-03);padding:var(--spacing-sizing-02) 0;justify-items:stretch}[data-bspk=list-item] [data-inner]>*{min-height:100%;width:fit-content;display:flex;flex-direction:column;justify-content:space-around;flex:1;flex-shrink:0}[data-bspk=list-item] [data-inner]>* svg{width:24px;max-width:unset}[data-pseudo=focus] [data-bspk=list-item][data-action],[data-bspk=list-item][data-action]:focus-visible,[data-bspk=list-item][data-action]:has(*:focus-visible){box-shadow:inset var(--stroke-neutral-focus) 0 0 0 2px}[data-pseudo=focus] [data-bspk=list-item][data-action] [data-inner],[data-bspk=list-item][data-action]:focus-visible [data-inner],[data-bspk=list-item][data-action]:has(*:focus-visible) [data-inner]{border-color:rgba(0,0,0,0)}[data-pseudo=hover] [data-bspk=list-item][data-action],[data-bspk=list-item][data-action]:hover{background-color:var(--interactions-neutral-hover-opacity)}[data-pseudo=active] [data-bspk=list-item][data-action],[data-bspk=list-item][data-action][data-active],[data-bspk=list-item][data-action]:active{background-color:var(--interactions-neutral-press-opacity)}[data-bspk=list-item] [data-component=Img]>img{height:36px;width:36px;max-width:unset}[data-bspk=list-item]:is(label) [data-inner]{border-bottom:0;gap:var(--spacing-sizing-02)}[data-bspk=list-item] [data-item-label]{flex:100%;text-align:left}[data-bspk=list-item] [data-item-label] [data-text]{font:var(--labels-base);color:var(--foreground-neutral-on-surface)}[data-bspk=list-item] [data-item-label] [data-sub-text]{font:var(--body-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=list-item][aria-disabled] [data-text],[data-bspk=list-item][aria-disabled] [data-sub-text]{color:var(--foreground-neutral-disabled-on-surface)}
+[data-bspk=list-item]{display:block;width:100%;box-sizing:border-box;padding:0 var(--spacing-sizing-02);background:unset;border:unset;margin:unset;text-decoration:unset;user-select:none;color:var(--foreground-neutral-on-surface)}[data-bspk=list-item]:is(a),[data-bspk=list-item]:is(button),[data-bspk=list-item][onclick],[data-bspk=list-item][role=button]{cursor:pointer}[data-bspk=list-item] [data-inner]{height:100%;width:100%;min-height:var(--spacing-sizing-09);box-sizing:border-box;display:flex;flex-direction:row;gap:var(--spacing-sizing-03);padding:var(--spacing-sizing-02) 0;justify-items:stretch}[data-bspk=list-item] [data-inner]>*{min-height:100%;width:fit-content;display:flex;flex-direction:column;justify-content:space-around;flex:1;flex-shrink:0}[data-bspk=list-item] [data-inner]>* svg{width:24px;max-width:unset}[data-pseudo=focus] [data-bspk=list-item][data-action],[data-bspk=list-item][data-action]:focus-visible,[data-bspk=list-item][data-action]:has(*:focus-visible){box-shadow:inset var(--stroke-neutral-focus) 0 0 0 2px}[data-pseudo=focus] [data-bspk=list-item][data-action] [data-inner],[data-bspk=list-item][data-action]:focus-visible [data-inner],[data-bspk=list-item][data-action]:has(*:focus-visible) [data-inner]{border-color:rgba(0,0,0,0)}[data-pseudo=hover] [data-bspk=list-item][data-action],[data-bspk=list-item][data-action]:hover{background-color:var(--interactions-neutral-hover-opacity)}[data-pseudo=active] [data-bspk=list-item][data-action],[data-bspk=list-item][data-action][data-active],[data-bspk=list-item][data-action]:active{background-color:var(--interactions-neutral-press-opacity)}[data-bspk=list-item] [data-trailing]:has(input){pointer-events:none}[data-bspk=list-item] [data-component=Img]>img{height:36px;width:36px;max-width:unset}[data-bspk=list-item]:is(label) [data-inner]{border-bottom:0;gap:var(--spacing-sizing-02)}[data-bspk=list-item] [data-item-label]{flex:100%;text-align:left}[data-bspk=list-item] [data-item-label] [data-text]{font:var(--labels-base);color:var(--foreground-neutral-on-surface)}[data-bspk=list-item] [data-item-label] [data-sub-text]{font:var(--body-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=list-item][aria-disabled] [data-text],[data-bspk=list-item][aria-disabled] [data-sub-text]{color:var(--foreground-neutral-disabled-on-surface)}

package/dist/menu.css

@@ -1 +1 @@
-[data-bspk=menu]{/*! --item-count: is set via inline style */width:332px;border:1px solid var(--stroke-neutral-low);background-color:var(--surface-neutral-t1-base);box-shadow:var(--drop-shadow-float);border-radius:var(--radius-large);display:flex;flex-direction:column;--item-size: var(--spacing-sizing-12)}[data-bspk=menu][data-floating]{z-index:var(--z-index-dropdown)}[data-bspk=menu][data-item-count]{height:calc(var(--item-count)*var(--item-size));overflow-y:scroll}[data-bspk=menu][data-no-items]{padding:var(--spacing-sizing-08) var(--spacing-sizing-04);align-items:center;justify-content:center;gap:var(--spacing-sizing-03)}[data-bspk=menu] [data-list-item]{min-height:var(--item-size);height:var(--item-size)}
+[data-bspk=menu]{/*! --item-count: is set via inline style */width:332px;border:1px solid var(--stroke-neutral-low);background-color:var(--surface-neutral-t1-base);box-shadow:var(--drop-shadow-float);border-radius:var(--radius-large);display:flex;flex-direction:column;--item-size: var(--spacing-sizing-12)}[data-bspk=menu][data-floating]{z-index:var(--z-index-dropdown)}[data-bspk=menu][data-item-count]{height:calc(var(--item-count)*var(--item-size));overflow-y:scroll}[data-bspk=menu][data-no-items]{padding:var(--spacing-sizing-08) var(--spacing-sizing-04);align-items:center;justify-content:center;gap:var(--spacing-sizing-03)}[data-bspk=menu] [data-bspk=list-item]{min-height:var(--item-size);height:var(--item-size)}[data-bspk=menu] [data-bspk=list-item][data-selected]{background-color:var(--surface-brand-primary-highlight)}

package/dist/segmented-control.css

@@ -1 +1 @@
-[data-bspk=segmented-control]{display:flex;flex-direction:row;max-width:100%;--outer-height: var(--spacing-sizing-10);--inner-height: var(--spacing-sizing-08);--svg-width: 20px}[data-bspk=segmented-control][data-width=fill]{align-items:stretch;width:100%;--btn-flex-grow: 1;margin:0 var(--spacing-sizing-04)}[data-bspk=segmented-control][data-width=hug]{width:fit-content;--btn-flex-grow: 0}[data-bspk=segmented-control][data-size=small]{--outer-height: var(--spacing-sizing-08);--inner-height: var(--spacing-sizing-06);--svg-width: 16px}[data-bspk=segmented-control] svg{width:var(--svg-width) !important}[data-bspk=segmented-control] button{border:0;cursor:pointer;color:var(--foreground-neutral-on-surface);flex-grow:var(--btn-flex-grow);font:var(--labels-small);margin:0;height:var(--spacing-sizing-12);background:rgba(0,0,0,0);position:relative}[data-bspk=segmented-control] button [data-focus-ring]{display:none}[data-bspk=segmented-control] button [data-outer]{height:var(--outer-height);background:var(--surface-neutral-t3-low);margin:var(--spacing-sizing-01) 0;padding:var(--spacing-sizing-01) 0;display:block}[data-bspk=segmented-control] button [data-inner]{display:flex;flex-direction:row;align-items:center;height:var(--inner-height);border-bottom:1px solid rgba(0,0,0,0);justify-content:center;gap:var(--spacing-sizing-01);border-radius:var(--radius-small);padding:var(--spacing-sizing-02) var(--spacing-sizing-03)}[data-bspk=segmented-control] button:first-of-type [data-outer]{border-top-left-radius:var(--radius-medium);border-bottom-left-radius:var(--radius-medium);padding-left:var(--spacing-sizing-01)}[data-bspk=segmented-control] button:last-of-type [data-outer]{border-top-right-radius:var(--radius-medium);border-bottom-right-radius:var(--radius-medium);padding-right:var(--spacing-sizing-01)}[data-bspk=segmented-control] button:not(:disabled):hover [data-inner]{background:var(--interactions-neutral-hover-opacity)}[data-bspk=segmented-control] button:not(:disabled):active [data-inner]{background:var(--interactions-neutral-press-opacity)}[data-bspk=segmented-control] button:not(:disabled)[data-selected] [data-inner]{background:var(--surface-neutral-t1-base)}[data-bspk=segmented-control] button:not(:disabled):focus-visible{z-index:2;outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=segmented-control] button:disabled{pointer-events:none;color:var(--foreground-neutral-disabled-on-surface);cursor:not-allowed}
+[data-bspk=segmented-control]{display:flex;flex-direction:row;max-width:100%;--outer-height: var(--spacing-sizing-10);--inner-height: var(--spacing-sizing-08);--svg-width: 20px}[data-bspk=segmented-control][data-width=fill]{align-items:stretch;width:100%;--btn-flex-grow: 1;margin:0 var(--spacing-sizing-04)}[data-bspk=segmented-control][data-width=hug]{width:fit-content;--btn-flex-grow: 0}[data-bspk=segmented-control][data-size=small]{--outer-height: var(--spacing-sizing-08);--inner-height: var(--spacing-sizing-06);--svg-width: 16px}[data-bspk=segmented-control] svg{width:var(--svg-width) !important}[data-bspk=segmented-control] button{border:0;cursor:pointer;color:var(--foreground-neutral-on-surface);flex-grow:var(--btn-flex-grow);font:var(--labels-small);margin:0;height:var(--spacing-sizing-12);background:rgba(0,0,0,0);position:relative;white-space:nowrap}[data-bspk=segmented-control] button [data-focus-ring]{display:none}[data-bspk=segmented-control] button [data-outer]{height:var(--outer-height);background:var(--surface-neutral-t3-low);margin:var(--spacing-sizing-01) 0;padding:var(--spacing-sizing-01) 0;display:block}[data-bspk=segmented-control] button [data-inner]{display:flex;flex-direction:row;align-items:center;height:var(--inner-height);border-bottom:1px solid rgba(0,0,0,0);justify-content:center;gap:var(--spacing-sizing-01);border-radius:var(--radius-small);padding:var(--spacing-sizing-02) var(--spacing-sizing-03)}[data-bspk=segmented-control] button:first-of-type [data-outer]{border-top-left-radius:var(--radius-medium);border-bottom-left-radius:var(--radius-medium);padding-left:var(--spacing-sizing-01)}[data-bspk=segmented-control] button:last-of-type [data-outer]{border-top-right-radius:var(--radius-medium);border-bottom-right-radius:var(--radius-medium);padding-right:var(--spacing-sizing-01)}[data-bspk=segmented-control] button:not(:disabled):hover [data-inner]{background:var(--interactions-neutral-hover-opacity)}[data-bspk=segmented-control] button:not(:disabled):active [data-inner]{background:var(--interactions-neutral-press-opacity)}[data-bspk=segmented-control] button:not(:disabled)[data-selected] [data-inner]{background:var(--surface-neutral-t1-base)}[data-bspk=segmented-control] button:not(:disabled):focus-visible{z-index:2;outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=segmented-control] button:disabled{pointer-events:none;color:var(--foreground-neutral-disabled-on-surface);cursor:not-allowed}

package/dist/tab-group.css

@@ -1 +1 @@
-[data-bspk=tab-group]{display:flex;flex-direction:row;--btn-flex-grow: 0;border-bottom:1px solid var(--stroke-neutral-low);width:100%;--font: var(--labels-base);--height: var(--spacing-sizing-10)}[data-bspk=tab-group][data-width=fill]{align-items:stretch;width:100%;--btn-flex-grow: 1}[data-bspk=tab-group][data-size=small]{--font: var(--labels-small);--height: var(--spacing-sizing-08)}[data-bspk=tab-group][data-size=large]{--font: var(--labels-large);--height: var(--spacing-sizing-12)}[data-bspk=tab-group] button{border:0;cursor:pointer;color:var(--foreground-neutral-on-surface-variant-02);background:none;flex-grow:var(--btn-flex-grow);font:var(--font)}[data-bspk=tab-group] button:hover{background:var(--interactions-neutral-hover-opacity)}[data-bspk=tab-group] button:active{background:var(--interactions-neutral-press-opacity)}[data-bspk=tab-group] button:disabled{pointer-events:none;color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=tab-group] button:focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=tab-group] button span{display:flex;flex-direction:row;align-items:center;margin:0 var(--spacing-sizing-04);height:var(--height);justify-content:center;position:relative;gap:var(--spacing-sizing-02)}[data-bspk=tab-group] button span svg{width:var(--spacing-sizing-05)}[data-bspk=tab-group] button[data-active]{color:var(--foreground-brand-primary)}[data-bspk=tab-group] button[data-active] span::after{content:"";display:block;width:100%;height:2px;background-color:var(--stroke-brand-primary);bottom:-1px;position:absolute;border-top-right-radius:2px;border-top-left-radius:2px}[data-bspk=tab-group] button[data-active] span svg{color:var(--surface-brand-primary)}[data-bspk=tab-group][data-hide-trail]{border-bottom:none}[data-bspk=tab-group][data-hide-trail] button{border-bottom:1px solid var(--stroke-neutral-low)}
+[data-bspk=tab-group]{display:flex;flex-direction:row;--btn-flex-grow: 0;border-bottom:1px solid var(--stroke-neutral-low);width:100%;--font: var(--labels-base);--height: var(--spacing-sizing-10)}[data-bspk=tab-group][data-width=fill]{align-items:stretch;width:100%;--btn-flex-grow: 1}[data-bspk=tab-group][data-size=small]{--font: var(--labels-small);--height: var(--spacing-sizing-08)}[data-bspk=tab-group][data-size=large]{--font: var(--labels-large);--height: var(--spacing-sizing-12)}[data-bspk=tab-group] button{border:0;cursor:pointer;color:var(--foreground-neutral-on-surface-variant-02);background:none;flex-grow:var(--btn-flex-grow);font:var(--font);white-space:nowrap}[data-bspk=tab-group] button:hover{background:var(--interactions-neutral-hover-opacity)}[data-bspk=tab-group] button:active{background:var(--interactions-neutral-press-opacity)}[data-bspk=tab-group] button:disabled{pointer-events:none;color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=tab-group] button:focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=tab-group] button span{display:flex;flex-direction:row;align-items:center;margin:0 var(--spacing-sizing-04);height:var(--height);justify-content:center;position:relative;gap:var(--spacing-sizing-02)}[data-bspk=tab-group] button span svg{width:var(--spacing-sizing-05)}[data-bspk=tab-group] button[data-active]{color:var(--foreground-brand-primary)}[data-bspk=tab-group] button[data-active] span::after{content:"";display:block;width:100%;height:2px;background-color:var(--stroke-brand-primary);bottom:-1px;position:absolute;border-top-right-radius:2px;border-top-left-radius:2px}[data-bspk=tab-group] button[data-active] span svg{color:var(--surface-brand-primary)}[data-bspk=tab-group][data-hide-trail]{border-bottom:none}[data-bspk=tab-group][data-hide-trail] button{border-bottom:1px solid var(--stroke-neutral-low)}

package/dist/tag.css

@@ -1 +1 @@
-[data-bspk=tag]{display:flex;flex-direction:column;justify-content:center;width:fit-content;position:relative;padding:0 var(--spacing-sizing-03);border-radius:var(--radius-small);color:var(--foreground) !important;background:var(--background);font:unset;text-decoration:unset;white-space:nowrap}[data-bspk=tag][data-wrap]{height:auto}[data-bspk=tag][data-variant=pill]{border-radius:var(--radius-circular)}[data-bspk=tag][data-variant=corner-wrap]{border-bottom-right-radius:0}[data-bspk=tag][data-size=small]{font:var(--labels-small);height:var(--spacing-sizing-08)}[data-bspk=tag][data-size=x-small]{font:var(--labels-x-small);height:var(--spacing-sizing-06)}[data-bspk=tag][data-color=white]{box-shadow:var(--drop-shadow-south)}[data-bspk=tag] [data-triangle]{position:absolute;bottom:-12px;right:0;width:0;height:0;border-style:solid;border-width:12px 12px 0 0;border-color:var(--foreground) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);transform:rotate(0deg)}
+[data-bspk=tag]{display:flex;flex-direction:column;justify-content:center;width:fit-content;position:relative;padding:0 var(--spacing-sizing-03);border-radius:var(--radius-small);color:var(--foreground) !important;background:var(--background);font:unset;text-decoration:unset;white-space:nowrap;pointer-events:none}[data-bspk=tag][data-wrap]{height:auto}[data-bspk=tag][data-variant=pill]{border-radius:var(--radius-circular)}[data-bspk=tag][data-variant=corner-wrap]{border-bottom-right-radius:0}[data-bspk=tag][data-size=small]{font:var(--labels-small);height:var(--spacing-sizing-08)}[data-bspk=tag][data-size=x-small]{font:var(--labels-x-small);height:var(--spacing-sizing-06)}[data-bspk=tag][data-color=white]{box-shadow:var(--drop-shadow-south)}[data-bspk=tag] [data-triangle]{position:absolute;bottom:-12px;right:0;width:0;height:0;border-style:solid;border-width:12px 12px 0 0;border-color:var(--foreground) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);transform:rotate(0deg)}

package/dist/text-input.css

@@ -1 +1 @@
-[data-bspk=text-input]{--border-color: var(--stroke-neutral-base);display:flex;flex-flow:row nowrap;background-color:var(--surface-neutral-t1-base);border:solid 1px var(--border-color);height:var(--field-height);border-radius:var(--radius-small);padding:0 var(--field-padding);gap:var(--spacing-sizing-01);width:100%}[data-bspk=text-input]>*{display:flex;justify-content:center;align-items:center;height:var(--field-height);font:var(--field-font);color:var(--foreground-neutral-on-surface);min-width:0}[data-bspk=text-input]:hover:not(:focus-within){background:linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input]:active:not(:focus-within){background:linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-readonly]{--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-disabled]{--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-disabled]>*{color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=text-input][data-invalid]{--border-color: var(--status-error)}[data-bspk=text-input][data-size=small]{--field-padding: var(--spacing-sizing-02);--field-height: var(--spacing-sizing-08);--field-font: var(--body-small);--field-icon-width: var(--spacing-sizing-04);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=text-input][data-size=medium]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-10);--field-font: var(--body-base);--field-icon-width: var(--spacing-sizing-05);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=text-input][data-size=large]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-12);--field-font: var(--body-large);--field-icon-width: var(--spacing-sizing-06);--field-clear-width: var(--spacing-sizing-06)}[data-bspk=text-input] [data-leading] svg,[data-bspk=text-input] [data-trailing] svg{width:var(--field-icon-width)}[data-bspk=text-input] label{font:var(--labels-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=text-input] input{flex:1;background-color:rgba(0,0,0,0) !important;border:none;outline:none;padding:0;pointer-events:all;text-overflow:ellipsis}[data-bspk=text-input] input[type=number]::-webkit-inner-spin-button,[data-bspk=text-input] input[type=number]::-webkit-outer-spin-button{display:none}[data-bspk=text-input] button[data-clear]{display:none;border:none;background:none;padding:0;cursor:pointer;pointer-events:all;margin-left:var(--spacing-sizing-02);padding-right:var(--field-padding)}[data-bspk=text-input] button[data-clear] svg{pointer-events:none;width:var(--field-clear-width)}[data-bspk=text-input]:focus-within{--border-color: var(--stroke-brand-primary)}[data-bspk=text-input]:focus-within button[data-clear]{display:flex}[data-bspk=text-input]:has(button[data-clear]){padding-right:0}
+[data-bspk=text-input]{--border-color: var(--stroke-neutral-base);display:flex;flex-flow:row nowrap;background-color:var(--surface-neutral-t1-base);border:solid 1px var(--border-color);height:var(--field-height);border-radius:var(--radius-small);padding:0 0 0 var(--field-padding);gap:var(--spacing-sizing-01);width:100%}[data-bspk=text-input]>*{display:flex;justify-content:center;align-items:center;height:var(--field-height);font:var(--field-font);color:var(--foreground-neutral-on-surface);min-width:0}[data-bspk=text-input]:hover:not(:focus-within){background:linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input]:active:not(:focus-within){background:linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-readonly]{--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-disabled]{--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-disabled]>*{color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=text-input][data-invalid]{--border-color: var(--status-error)}[data-bspk=text-input][data-size=small]{--field-padding: var(--spacing-sizing-02);--field-height: var(--spacing-sizing-08);--field-font: var(--body-small);--field-icon-width: var(--spacing-sizing-04);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=text-input][data-size=medium]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-10);--field-font: var(--body-base);--field-icon-width: var(--spacing-sizing-05);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=text-input][data-size=large]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-12);--field-font: var(--body-large);--field-icon-width: var(--spacing-sizing-06);--field-clear-width: var(--spacing-sizing-06)}[data-bspk=text-input] [data-leading] svg,[data-bspk=text-input] [data-trailing] svg{width:var(--field-icon-width)}[data-bspk=text-input] label{font:var(--labels-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=text-input] input{flex:1;background-color:rgba(0,0,0,0) !important;border:none;outline:none;padding:0;pointer-events:all;text-overflow:ellipsis}[data-bspk=text-input] input[type=number]::-webkit-inner-spin-button,[data-bspk=text-input] input[type=number]::-webkit-outer-spin-button{display:none}[data-bspk=text-input] button[data-clear]{display:flex;border:none;background:none;padding:0;cursor:pointer;pointer-events:all;margin-left:var(--spacing-sizing-02);padding-right:var(--field-padding)}[data-bspk=text-input] button[data-clear] svg{pointer-events:none;width:var(--field-clear-width)}[data-bspk=text-input]:not(:focus-within),[data-bspk=text-input][data-empty],[data-bspk=text-input][data-readonly],[data-bspk=text-input][data-disabled]{padding-right:var(--field-padding)}[data-bspk=text-input]:not(:focus-within) button[data-clear],[data-bspk=text-input][data-empty] button[data-clear],[data-bspk=text-input][data-readonly] button[data-clear],[data-bspk=text-input][data-disabled] button[data-clear]{display:none}[data-bspk=text-input]:focus-within{--border-color: var(--stroke-brand-primary)}

package/dist/utils/children.js.map

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

package/meta-types.ts

@@ -2,6 +2,7 @@
  * 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 type BaseMeta = {
     name: string;
     description?: string;
@@ -27,6 +28,7 @@ export type TypeProperty = {
     references?: string[];
     minimum?: number;
     maximum?: number;
+    example?: string;
 };
 
 export type ComponentMeta = BaseMeta & {

package/meta.ts

@@ -19,6 +19,12 @@ import { ComponentMeta, TypeProperty, UtilityMeta, TypeMeta } from './meta-types
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
+const { componentsDir, hooksDir, rootPath } = {
+    componentsDir: path.resolve(__dirname, 'src'),
+    hooksDir: path.resolve(__dirname, 'src', 'hooks'),
+    rootPath: path.resolve(__dirname),
+} as const;
+
 function jsDocParse(content: string) {
     try {
         const contentTrimmed = content
@@ -43,7 +49,8 @@ function jsDocParse(content: string) {
                 data[key] = value
                     .replace(/\n[ ]+\*([ ]*)/g, '\n')
                     .replace(/^\s+\*\s+/, '')
-                    .trim();
+                    .trim()
+                    .replace(/;$/, '');
 
                 return;
             }
@@ -101,34 +108,34 @@ if (!metaFilePath) {
     process.exit(1);
 }
 
-const { componentsDir, hooksDir, rootPath } = {
-    componentsDir: path.resolve(__dirname, 'src'),
-    hooksDir: path.resolve(__dirname, 'src', 'hooks'),
-    rootPath: path.resolve(__dirname),
-} as const;
-
 const componentFiles = fs
     .readdirSync(componentsDir)
     .filter((f) => f.endsWith('.tsx'))
     .map((fileName) => {
         const filePath = path.resolve(componentsDir, fileName);
+        const content = fs.readFileSync(filePath, 'utf-8');
         return {
             filePath,
             name: fileName.replace(/\.[^.]+$/, ''),
             fileName,
-            content: fs.readFileSync(filePath, 'utf-8'),
+            content,
+            // eslint-disable-next-line no-useless-escape
+            jsDocs: content.match(/\/\*\*\s*\n([^\*]|(\*(?!\/)))*\*\//g)?.map((jsDoc) => jsDocParse(jsDoc)),
         };
     });
 
+type ComponentFile = (typeof componentFiles)[0];
+
+fs.writeFileSync(path.resolve(__dirname, 'component-files.json'), JSON.stringify(componentFiles, null, 2), {
+    encoding: 'utf-8',
+});
+
 function generateComponentMeta({
     filePath: componentFile,
     content,
     name,
-}: {
-    filePath: string;
-    content: string;
-    name: string;
-}): ComponentMeta | null {
+    jsDocs,
+}: ComponentFile): ComponentMeta | null {
     const stats = fs.statSync(componentFile);
 
     const componentFunctionMatch = content.match(new RegExp(`function ${name}[(<]`));
@@ -142,18 +149,13 @@ function generateComponentMeta({
         return null;
     }
 
-    // eslint-disable-next-line no-useless-escape
-    const allJSDocMatches = content.match(/\/\*\*\s*\n([^\*]|(\*(?!\/)))*\*\//g);
-
-    const componentDocStr = [...(allJSDocMatches || [])].find((doc) => doc.includes(`@name ${name}`));
+    const componentDoc = [...(jsDocs || [])].find((doc) => doc.name === name);
 
-    if (!componentDocStr) {
+    if (!componentDoc) {
         console.warn(`No JSDoc found for component ${name} for ${componentFile}`);
         return null;
     }
 
-    const componentDoc = jsDocParse(componentDocStr);
-
     const slug = kebabCase(componentDoc.name);
 
     const dependencies = [...content.matchAll(/import { ([^}]+) } from '\.\/([a-zA-Z]+)';/g)]
@@ -257,11 +259,9 @@ function generateTypes() {
         noExtraProps: false,
     })!;
 
-    const symbols = generator.getSchemaForSymbols(generator.getMainFileSymbols(program), true);
+    const { definitions } = generator.getSchemaForSymbols(generator.getMainFileSymbols(program), true);
 
-    const definitions = symbols.definitions as {
-        [key: string]: TJS.Definition;
-    };
+    fs.writeFileSync(path.resolve(__dirname, 'types.json'), JSON.stringify(definitions, null, 2));
 
     const nextTypes: TypeMeta[] = [];
 
@@ -283,26 +283,42 @@ function generateTypes() {
 
     const defineProperty = (
         name: string,
-        definition: TJS.DefinitionOrBoolean,
-        required?: string[],
+        definition: TJS.Definition,
+        required: string[],
+        context: {
+            componentFile: ComponentFile | null;
+            parent: string;
+        },
     ): TypeProperty | undefined => {
-        if (typeof definition !== 'object') return undefined;
+        // the auto-generated types aren't always correct, so we need to fix them
+        const jsDoc = definition.description
+            ? context.componentFile?.jsDocs?.find(
+                  (doc) =>
+                      doc.description.includes(definition.description!) ||
+                      definition.description!.includes(doc.description),
+              )
+            : undefined;
 
         const next: TypeProperty = {
             name,
             required: required?.includes(name),
-            description: definition.description,
+            description: jsDoc?.description || definition.description,
             default: definition.default === 'undefined' ? undefined : definition.default,
-            type: definition.type,
+            type: definition.type?.toString(),
             properties:
                 definition.properties &&
-                Object.entries(definition.properties)?.flatMap(
-                    ([name2, definition2]) => defineProperty(name2, definition2, definition.required) || [],
+                Object.entries(definition.properties)?.flatMap(([name2, definition2]) =>
+                    typeof definition2 === 'boolean'
+                        ? []
+                        : defineProperty(name2, definition2, definition.required || [], context) || [],
                 ),
             minimum: definition.minimum,
             maximum: definition.maximum,
+            example: jsDoc?.example,
         };
 
+        if (next.name.match(/^on[A-Z]/)) next.type = 'function';
+
         const defEnum = cleanUpDefinitionEnums(definition);
 
         if (defEnum) {
@@ -313,8 +329,8 @@ function generateTypes() {
         if (definition.$ref) {
             next.type = definition.$ref.split('/').pop() as string;
 
-            if (definitions[next.type]) {
-                next.options = cleanUpDefinitionEnums(definitions[next.type]);
+            if (definitions && definitions[next.type] && typeof definitions[next.type] !== 'boolean') {
+                next.options = cleanUpDefinitionEnums(definitions[next.type] as TJS.Definition);
             }
         }
 
@@ -325,6 +341,15 @@ function generateTypes() {
         Object.entries(definitions).forEach(([definitionName, definition]) => {
             if (typeof definition !== 'object') return;
 
+            let componentFile: ComponentFile | null = null;
+            // only care about ComponentProps
+            if (definitionName.endsWith('Props')) {
+                componentFile =
+                    componentFiles.find((f) => f.fileName === `${definitionName.replace(/Props$/, '')}.tsx`) || null;
+            }
+
+            const context = { componentFile, parent: definitionName };
+
             if (!definition?.properties && !definition?.allOf) return;
 
             if (['React', 'Omit<'].some((n) => definitionName.startsWith(n))) return;
@@ -336,9 +361,10 @@ function generateTypes() {
                     if (typeof ofDefinition !== 'object') return [];
 
                     if (ofDefinition.properties) {
-                        return Object.entries(ofDefinition.properties).flatMap(
-                            ([refName, refDefinition]) =>
-                                defineProperty(refName, refDefinition, ofDefinition.required) || [],
+                        return Object.entries(ofDefinition.properties).flatMap(([refName, refDefinition]) =>
+                            typeof refDefinition !== 'object'
+                                ? []
+                                : defineProperty(refName, refDefinition, ofDefinition.required || [], context) || [],
                         );
                     }
 
@@ -348,12 +374,13 @@ function generateTypes() {
 
                     const defReference = definitions[reference];
 
-                    if (!defReference) return [];
+                    if (typeof defReference === 'boolean') return [];
 
-                    return Object.entries(defReference.properties || {}).flatMap(
-                        ([refName, refDefinition]) =>
-                            defineProperty(refName, refDefinition, defReference.required) || [],
-                    );
+                    return Object.entries(defReference.properties || {}).flatMap(([refName, refDefinition]) => {
+                        return typeof refDefinition !== 'object'
+                            ? []
+                            : defineProperty(refName, refDefinition, defReference.required || [], context) || [];
+                    });
                 });
             }
 
@@ -366,7 +393,7 @@ function generateTypes() {
                     return;
                 }
                 properties = Object.entries(props).flatMap(
-                    ([propName, prop]) => defineProperty(propName, prop, definition.required) || [],
+                    ([propName, prop]) => defineProperty(propName, prop, definition.required || [], context) || [],
                 );
             }
 
@@ -432,11 +459,16 @@ async function createMeta() {
     const typesMeta = generateTypes();
     typesMeta.sort((a, b) => a.name.localeCompare(b.name));
 
+    const componentImport = (name: string) =>
+        `${name}: React.lazy(() => import('@bspk/ui/${name}').then((module) => ({ default: module.${name} })))`;
+
     fs.writeFileSync(
         metaFilePath,
         [
             `/** This file is generated by the @bspk/ui/meta.ts script with data scraped from the library. */`,
 
+            `import React from 'react';`,
+
             fs.readFileSync(path.resolve(__dirname, 'meta-types.ts'), { encoding: 'utf-8' }),
 
             `export const componentsMeta: ComponentMeta[] = ${JSON.stringify(componentsMeta, null, 2)} as const;`,
@@ -448,6 +480,8 @@ async function createMeta() {
             `export type MetaTypeName = '${typesMeta.map((t) => t.name).join("' | '")}';`,
 
             `export type MetaComponentName = '${metaComponentNames.join("' | '")}';`,
+
+            `export const components: Partial<Record<MetaComponentName, React.LazyExoticComponent<any>>> = {${metaComponentNames.map(componentImport).join(',')}\n};`,
         ].join('\n\n'),
     );
 

package/package.json

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

package/src/Avatar.tsx

@@ -2,8 +2,15 @@ import './avatar.scss';
 import { ReactNode, useMemo } from 'react';
 
 import { Tooltip } from './Tooltip';
+import { isValidIcon } from './utils/children';
 import { ColorVariant } from './utils/colorVariants';
 
+const DEFAULT = {
+    size: 'small',
+    color: 'grey',
+    showTooltip: true,
+} as const;
+
 export type SizeVariant =
     | 'large'
     | 'medium'
@@ -40,6 +47,8 @@ export type AvatarProps = {
     /**
      * The initials to display in the avatar limited to 2 characters.
      *
+     * If not provided, the first two letters of the name will be used as initials.
+     *
      * @example
      *     JD;
      */
@@ -47,31 +56,49 @@ export type AvatarProps = {
     /**
      * The icon to display in the avatar. This needs to be an icon from the @bspk/icons library.
      *
-     *     import { SvgPerson } from '@bspk/icons/Person';
-     *
      * @example
      *     <SvgPerson />;
+     *
+     * @type BspkIcon
      */
     icon?: ReactNode;
     /**
      * The url to the image to display in the avatar.
      *
      * @example
-     *     '/user/e3232/avatar.jpg';
+     *     /profile.jpg
      */
     image?: string;
+    /**
+     * Whether to show the represeneetd user's name as a tooltip.
+     *
+     * @default true
+     */
+    showTooltip?: boolean;
 };
 
 /**
- * An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, image, or an
- * overflowCount.
+ * An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, image.
+ *
+ * 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.
  *
  * @name Avatar
  */
-function Avatar({ initials: initialsProp, color = 'grey', size = 'small', icon, image, name: ariaLabel }: AvatarProps) {
+function Avatar({
+    initials: initialsProp,
+    color = DEFAULT.color,
+    size = DEFAULT.size,
+    icon,
+    image,
+    name: ariaLabel,
+    showTooltip = DEFAULT.showTooltip,
+}: AvatarProps) {
     const children = useMemo(() => {
         if (image) return <img alt={ariaLabel} src={image} />;
-        if (icon) return <span data-icon>{icon}</span>;
+
+        if (isValidIcon(icon)) return <span data-icon>{icon}</span>;
 
         let initials = initialsProp;
 
@@ -96,7 +123,7 @@ function Avatar({ initials: initialsProp, color = 'grey', size = 'small', icon,
         </div>
     );
 
-    return <Tooltip label={ariaLabel}>{avatar}</Tooltip>;
+    return showTooltip ? <Tooltip label={ariaLabel}>{avatar}</Tooltip> : avatar;
 }
 
 Avatar.bspkName = 'Avatar';