@bspk/ui 1.2.0 → 1.3.1

package/dist/styles/base.css

@@ -94,7 +94,9 @@
 }
 
 :root {
+  --z-index-snackbar: 1200;
   --z-index-focus: 9999;
+  --z-index-button-dock: 1150;
   --z-index-tooltip-popover: 1100;
   --z-index-dialog: 1000;
   --z-index-dropdown: 1000;
@@ -130,59 +132,83 @@ body[data-bspk] {
   color: var(--foreground-neutral-on-surface);
   min-width: 343px;
 }
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]) {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]),
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]) {
   color: var(--foreground-link-text-default);
 }
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):hover, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=hover] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):hover, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=hover],
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):hover,
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=hover] {
   color: var(--foreground-link-text-default-hovered);
 }
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):active, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=active] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):active, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=active],
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):active,
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=active] {
   color: var(--foreground-link-text-default);
   filter: brightness(80%);
 }
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):visited, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=visited] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):visited, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=visited],
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):visited,
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=visited] {
   color: var(--foreground-link-text-default-visited);
 }
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item])[disabled] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item])[disabled],
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item])[disabled] {
   pointer-events: none;
   cursor: text;
   color: var(--foreground-link-text-default-disabled);
 }
-body[data-bspk] a[data-subtle] {
+body[data-bspk] a[data-subtle],
+body[data-bspk] [data-bspk=link][data-subtle] {
   text-decoration: none;
   color: var(--foreground-neutral-on-surface);
 }
-body[data-bspk] a[data-subtle]:not([disabled]):hover, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=hover] {
+body[data-bspk] a[data-subtle]:not([disabled]):hover, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=hover],
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled]):hover,
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled])[data-pseudo=hover] {
   text-decoration: underline;
   color: var(--foreground-link-text-subtle-hovered);
 }
-body[data-bspk] a[data-subtle]:not([disabled]):active, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=active] {
+body[data-bspk] a[data-subtle]:not([disabled]):active, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=active],
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled]):active,
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled])[data-pseudo=active] {
   text-decoration: underline;
   color: var(--foreground-link-text-subtle-pressed);
 }
-body[data-bspk] a[data-subtle]:not([disabled]):visited, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=visited] {
+body[data-bspk] a[data-subtle]:not([disabled]):visited, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=visited],
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled]):visited,
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled])[data-pseudo=visited] {
   color: var(--foreground-neutral-on-surface);
 }
-body[data-bspk] a[data-subtle][disabled] {
+body[data-bspk] a[data-subtle][disabled],
+body[data-bspk] [data-bspk=link][data-subtle][disabled] {
   pointer-events: none;
   color: var(--foreground-link-text-subtle-disabled);
 }
-body[data-bspk] a[data-subtle-inverse] {
+body[data-bspk] a[data-subtle-inverse],
+body[data-bspk] [data-bspk=link][data-subtle-inverse] {
   text-decoration: none;
   color: var(--foreground-neutral-inverse-on-surface);
 }
-body[data-bspk] a[data-subtle-inverse]:not([disabled]):hover, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=hover] {
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):hover, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=hover],
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled]):hover,
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled])[data-pseudo=hover] {
   text-decoration: underline;
   color: var(--foreground-link-text-subtle-inverse-hovered);
 }
-body[data-bspk] a[data-subtle-inverse]:not([disabled]):active, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=active] {
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):active, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=active],
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled]):active,
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled])[data-pseudo=active] {
   text-decoration: underline;
   color: var(--foreground-link-text-subtle-inverse-pressed);
 }
-body[data-bspk] a[data-subtle-inverse]:not([disabled]):visited, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=visited] {
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):visited, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=visited],
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled]):visited,
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled])[data-pseudo=visited] {
   color: var(--foreground-neutral-on-inverse-surface);
 }
-body[data-bspk] a[data-subtle-inverse][disabled] {
+body[data-bspk] a[data-subtle-inverse][disabled],
+body[data-bspk] [data-bspk=link][data-subtle-inverse][disabled] {
   pointer-events: none;
   color: var(--foreground-link-text-subtle-inversed-disabled);
 }
@@ -312,4 +338,50 @@ body[data-bspk] a[data-subtle-inverse][disabled] {
   z-index: 2;
 }
 
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translate(var(--spacing-sizing-01), var(--spacing-sizing-01));
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+@keyframes placement-left {
+  0% {
+    transform: translateX(-100vw);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes placement-right {
+  0% {
+    transform: translateX(100vw);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes placement-top {
+  0% {
+    transform: translateY(-100vh);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes placement-bottom {
+  0% {
+    transform: translateY(100vh);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+[data-hidden] {
+  display: none !important;
+}
+
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/styles/base.css.js

@@ -97,7 +97,9 @@ style.appendChild(document.createTextNode(`/**
 }
 
 :root {
+  --z-index-snackbar: 1200;
   --z-index-focus: 9999;
+  --z-index-button-dock: 1150;
   --z-index-tooltip-popover: 1100;
   --z-index-dialog: 1000;
   --z-index-dropdown: 1000;
@@ -133,59 +135,83 @@ body[data-bspk] {
   color: var(--foreground-neutral-on-surface);
   min-width: 343px;
 }
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]) {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]),
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]) {
   color: var(--foreground-link-text-default);
 }
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):hover, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=hover] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):hover, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=hover],
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):hover,
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=hover] {
   color: var(--foreground-link-text-default-hovered);
 }
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):active, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=active] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):active, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=active],
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):active,
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=active] {
   color: var(--foreground-link-text-default);
   filter: brightness(80%);
 }
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):visited, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=visited] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):visited, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=visited],
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):visited,
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=visited] {
   color: var(--foreground-link-text-default-visited);
 }
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item])[disabled] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item])[disabled],
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item])[disabled] {
   pointer-events: none;
   cursor: text;
   color: var(--foreground-link-text-default-disabled);
 }
-body[data-bspk] a[data-subtle] {
+body[data-bspk] a[data-subtle],
+body[data-bspk] [data-bspk=link][data-subtle] {
   text-decoration: none;
   color: var(--foreground-neutral-on-surface);
 }
-body[data-bspk] a[data-subtle]:not([disabled]):hover, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=hover] {
+body[data-bspk] a[data-subtle]:not([disabled]):hover, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=hover],
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled]):hover,
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled])[data-pseudo=hover] {
   text-decoration: underline;
   color: var(--foreground-link-text-subtle-hovered);
 }
-body[data-bspk] a[data-subtle]:not([disabled]):active, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=active] {
+body[data-bspk] a[data-subtle]:not([disabled]):active, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=active],
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled]):active,
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled])[data-pseudo=active] {
   text-decoration: underline;
   color: var(--foreground-link-text-subtle-pressed);
 }
-body[data-bspk] a[data-subtle]:not([disabled]):visited, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=visited] {
+body[data-bspk] a[data-subtle]:not([disabled]):visited, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=visited],
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled]):visited,
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled])[data-pseudo=visited] {
   color: var(--foreground-neutral-on-surface);
 }
-body[data-bspk] a[data-subtle][disabled] {
+body[data-bspk] a[data-subtle][disabled],
+body[data-bspk] [data-bspk=link][data-subtle][disabled] {
   pointer-events: none;
   color: var(--foreground-link-text-subtle-disabled);
 }
-body[data-bspk] a[data-subtle-inverse] {
+body[data-bspk] a[data-subtle-inverse],
+body[data-bspk] [data-bspk=link][data-subtle-inverse] {
   text-decoration: none;
   color: var(--foreground-neutral-inverse-on-surface);
 }
-body[data-bspk] a[data-subtle-inverse]:not([disabled]):hover, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=hover] {
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):hover, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=hover],
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled]):hover,
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled])[data-pseudo=hover] {
   text-decoration: underline;
   color: var(--foreground-link-text-subtle-inverse-hovered);
 }
-body[data-bspk] a[data-subtle-inverse]:not([disabled]):active, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=active] {
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):active, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=active],
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled]):active,
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled])[data-pseudo=active] {
   text-decoration: underline;
   color: var(--foreground-link-text-subtle-inverse-pressed);
 }
-body[data-bspk] a[data-subtle-inverse]:not([disabled]):visited, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=visited] {
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):visited, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=visited],
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled]):visited,
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled])[data-pseudo=visited] {
   color: var(--foreground-neutral-on-inverse-surface);
 }
-body[data-bspk] a[data-subtle-inverse][disabled] {
+body[data-bspk] a[data-subtle-inverse][disabled],
+body[data-bspk] [data-bspk=link][data-subtle-inverse][disabled] {
   pointer-events: none;
   color: var(--foreground-link-text-subtle-inversed-disabled);
 }
@@ -315,6 +341,52 @@ body[data-bspk] a[data-subtle-inverse][disabled] {
   z-index: 2;
 }
 
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translate(var(--spacing-sizing-01), var(--spacing-sizing-01));
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+@keyframes placement-left {
+  0% {
+    transform: translateX(-100vw);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes placement-right {
+  0% {
+    transform: translateX(100vw);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes placement-top {
+  0% {
+    transform: translateY(-100vh);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes placement-bottom {
+  0% {
+    transform: translateY(100vh);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+[data-hidden] {
+  display: none !important;
+}
+
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);

package/dist/types/common.d.ts

@@ -5,8 +5,9 @@
  *
  * @bspk/ui/Txt".
  */
-import { JSXElementConstructor, ReactNode, ComponentPropsWithoutRef } from 'react';
+import { JSXElementConstructor, ReactNode, ComponentPropsWithoutRef, AriaRole } from 'react';
 export type AlertVariant = 'error' | 'informational' | 'success' | 'warning';
+/** Sets a ref to the given element. */
 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<ComponentPropsWithoutRef<E>, O | keyof P> & P;
 export type ElementConstructorProps<E extends JSXElementConstructor<unknown> | keyof JSX.IntrinsicElements, O extends string = ''> = Omit<ComponentPropsWithoutRef<E>, O>;
@@ -94,13 +95,17 @@ export type CommonPropsLibrary = {
      */
     'aria-label': string;
     /**
-     * This is a utility attribute used to identify the owning component of another component.
-     *
-     * This is used to identify the component in the UI library and is not intended for public use.
+     * Identifies the parent component. Helps with styling, debugging, and/or testing purposes.
      *
      * @utility
      */
     owner?: string;
+    /**
+     * The ARIA role of the element.
+     *
+     * @type string
+     */
+    role?: AriaRole;
 };
 export type CommonProps<K extends keyof CommonPropsLibrary> = Pick<CommonPropsLibrary, K>;
 export type RequiredCommonProps<K extends keyof CommonPropsLibrary> = Required<Pick<CommonPropsLibrary, K>>;

package/dist/types/common.js.map

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

package/dist/types/meta.d.ts

@@ -49,5 +49,5 @@ export type UtilityMeta = BaseMeta & {
     param?: string;
     returns?: string;
 };
-export type ComponentPhase = 'Backlog' | 'Dev' | 'QA' | 'Stable' | 'Utility' | 'UXReview';
+export type ComponentPhase = 'Backlog' | 'Dev' | 'Stable' | 'Utility' | 'UXReview';
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/types/meta.js

@@ -4,10 +4,8 @@
  */
 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
-    'QA', // components that are undergoing QA
     'UXReview', // components that are in UX Review
     'Stable', // production ready
 ];
@@ -22,11 +20,6 @@ export const COMPONENT_PHASES = {
         id: 'Dev',
         description: 'The component is actively under development. This phase includes the creation of visual elements and integration tests to ensure comprehensive functionality.',
     },
-    QA: {
-        title: 'Quality Assurance',
-        id: 'QA',
-        description: 'The component is being carefully evaluated by our Bespoke Engineering team. They are ensuring that it aligns with our high standards of functionality and performance.',
-    },
     UXReview: {
         title: 'UX Review',
         id: 'UXReview',

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,EAAE;IACF,SAAS,EAAE,mDAAmD;IAC9D,KAAK,EAAE,+CAA+C;IACtD,IAAI,EAAE,oCAAoC;IAC1C,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,EAAE,EAAE;QACA,KAAK,EAAE,mBAAmB;QAC1B,EAAE,EAAE,IAAI;QACR,WAAW,EACP,wKAAwK;KAC/K;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;AAkDF,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;AAkDF,sDAAsD"}

package/dist/utils/createExampleChildElement.js

@@ -37,7 +37,7 @@ export function createExampleChildElement({ exampleState, name, setState, action
     if (componentName === 'Img')
         return { element: _jsx(Img, { alt: "placeholder", src: "/placeholder.svg" }) };
     if (componentName === 'Avatar')
-        return { element: _jsx(Avatar, { name: "List Item", showTooltip: false }) };
+        return { element: _jsx(Avatar, { hideTooltip: false, name: "List Item" }) };
     if (componentName === 'Tag') {
         return { element: _jsx(Tag, { label: "Tag" }) };
     }

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,4 +1,5 @@
-import { AlertVariant } from '-/types/common';
+import { CSSProperties, ReactNode } from 'react';
+import { AlertVariant, DataProps } from '-/types/common';
 import { ComponentMeta } from '-/types/meta';
 export type TypeProperty = {
     name: string;
@@ -81,29 +82,53 @@ export type ComponentExample<Props = Record<string, unknown>, PropName extends k
      * If you only need to update the props of the component, you can use renderProps.
      */
     render?: ComponentExampleRender<Props>;
-    /** We may not want certain props editable in the props table. */
-    disableProps?: PropName[];
+    /**
+     * We may not want certain props editable in the props table.
+     *
+     * Setting this to true will disable all props.
+     *
+     * Or you can pass an array of prop names to disable specific props.
+     */
+    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;
     }[];
 };
+export type Syntax = (params: {
+    code: string;
+    language?: PrettyParser;
+    style?: CSSProperties;
+    pretty?: boolean;
+}) => React.ReactNode;
+export type CodeExample = (params: DataProps & {
+    containerStyle?: CSSProperties;
+    children: ReactNode;
+    accessibility?: boolean;
+    code?: {
+        language?: PrettyParser | undefined;
+        str: string;
+    };
+}) => React.ReactNode;
+export type PrettyParser = 'css' | 'estree' | 'html' | 'scss' | 'typescript';
 export type ComponentExampleFn<Props = Record<string, unknown>> = (params: {
     setState: DemoSetState<Props>;
     action: DemoAction;
     componentsMeta: ComponentMeta[];
 }) => ComponentExample<Props>;
+export type OnHandlers = `on${string}`;
 export type Preset<Props> = {
     /** 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?: Partial<Props>;
-    /** Determines if the preset is the default preset. This is used to set the initial propState of the component. */
-    isDefault?: boolean;
+    propState: Omit<Props, OnHandlers> & Record<OnHandlers, unknown>;
+    otherState?: Record<string, Record<string, unknown> | unknown> & Record<string, unknown>;
 };
 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;AA8HvD,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;AAgKvD,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

@@ -0,0 +1,2 @@
+/** 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;

package/dist/utils/dom.js

@@ -0,0 +1,9 @@
+/** A safe way to get an element by ID that works in SSR environments or when the ID value is not considered valid. */
+export function getElementById(id) {
+    if (typeof document === 'undefined')
+        return null;
+    if (!id)
+        return null;
+    return document.querySelector(`[id="${id}"]`);
+}
+//# sourceMappingURL=dom.js.map

package/dist/utils/dom.js.map

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

package/dist/utils/handleKeyDown.d.ts

@@ -1,12 +1,13 @@
+import { KeyboardEvent } from 'react';
 import { KeyboardEventCode } from './keyboard';
-export type KeysCallback = Partial<Record<KeyboardEventCode, (event: React.KeyboardEvent) => void>>;
+export type KeysCallback = Partial<Record<KeyboardEventCode, ((event: KeyboardEvent) => void) | null>>;
 /**
  * Handles multiple keydown events with specific callbacks for each key.
  *
  * @param keysCallback - An object where keys are keyboard event codes and values are callback functions.
  * @returns A function that can be used as an event handler for keydown events.
  */
-export declare function handleKeyDown(keysCallback: KeysCallback, { stopPropagation, preventDefault }?: {
+export declare function handleKeyDown(keysCallback?: KeysCallback, { stopPropagation, preventDefault }?: {
     stopPropagation?: boolean;
     preventDefault?: boolean;
-}): (event: React.KeyboardEvent) => boolean;
+}): (event: KeyboardEvent) => KeyboardEventCode | null;

package/dist/utils/handleKeyDown.js

@@ -4,9 +4,12 @@
  * @param keysCallback - An object where keys are keyboard event codes and values are callback functions.
  * @returns A function that can be used as an event handler for keydown events.
  */
-export function handleKeyDown(keysCallback, { stopPropagation = true, preventDefault = true } = {}) {
+export function handleKeyDown(keysCallback = {}, { stopPropagation = false, preventDefault = false } = {}) {
     return (event) => {
-        const callback = keysCallback[event.code];
+        let eventCode = event.code;
+        if (event.ctrlKey && event.altKey && event.code === 'Space')
+            eventCode = 'Ctrl+Option+Space';
+        const callback = keysCallback[eventCode];
         if (callback) {
             callback(event);
             if (stopPropagation)
@@ -14,7 +17,7 @@ export function handleKeyDown(keysCallback, { stopPropagation = true, preventDef
             if (preventDefault)
                 event.preventDefault();
         }
-        return !!callback;
+        return callback ? eventCode : null;
     };
 }
 //# sourceMappingURL=handleKeyDown.js.map

package/dist/utils/handleKeyDown.js.map

@@ -1 +1 @@
-{"version":3,"file":"handleKeyDown.js","sourceRoot":"","sources":["../../src/utils/handleKeyDown.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CACzB,YAA0B,EAC1B,EAAE,eAAe,GAAG,IAAI,EAAE,cAAc,GAAG,IAAI,KAA8D,EAAE;IAE/G,OAAO,CAAC,KAA0B,EAAE,EAAE;QAClC,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,IAAyB,CAAC,CAAC;QAC/D,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,CAAC,CAAC,QAAQ,CAAC;IACtB,CAAC,CAAC;AACN,CAAC"}
+{"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"}

package/dist/utils/keyboard.d.ts

@@ -1,4 +1,5 @@
 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 KeyboardEventCode = '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 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 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/scrollListItemsStyle.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+export type ScrollListItemsStyleProps = {
+    /**
+     * The maximum number of ListItems to show before scrolling is enabled.
+     *
+     * Used in conjunction with scrollListItemsStyle utility.
+     */
+    scrollLimit?: number;
+};
+export declare function scrollListItemsStyle(scrollLimitProp: unknown, itemCount: unknown): CSSProperties;

package/dist/utils/scrollListItemsStyle.js

@@ -0,0 +1,17 @@
+export function scrollListItemsStyle(scrollLimitProp, itemCount) {
+    const scrollLimit = Number(scrollLimitProp);
+    // Check:
+    // 1. scrollLimit is valid
+    // 2. itemCount is a number
+    // 3. scrollLimit is less than itemCount
+    // If any of these fail, return undefined (no scrolling)
+    if (Number.isNaN(scrollLimit) || scrollLimit <= 0 || typeof itemCount !== 'number' || scrollLimit > itemCount)
+        return {};
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        maxHeight: `calc(var(--list-item-height) * ${scrollLimit})`,
+        overflow: 'hidden auto',
+    };
+}
+//# sourceMappingURL=scrollListItemsStyle.js.map

package/dist/utils/scrollListItemsStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollListItemsStyle.js","sourceRoot":"","sources":["../../src/utils/scrollListItemsStyle.ts"],"names":[],"mappings":"AAWA,MAAM,UAAU,oBAAoB,CAAC,eAAwB,EAAE,SAAkB;IAC7E,MAAM,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;IAE5C,SAAS;IACT,0BAA0B;IAC1B,2BAA2B;IAC3B,wCAAwC;IACxC,wDAAwD;IACxD,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,WAAW,GAAG,SAAS;QACzG,OAAO,EAAE,CAAC;IAEd,OAAO;QACH,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,SAAS,EAAE,kCAAkC,WAAW,GAAG;QAC3D,QAAQ,EAAE,aAAa;KAC1B,CAAC;AACN,CAAC"}