@bspk/ui 1.1.34 → 1.3.0

package/dist/components/AvatarGroup/avatar-group.css.js

@@ -10,9 +10,19 @@ style.appendChild(document.createTextNode(`[data-bspk=avatar-group] {
   flex-direction: row;
   align-items: end;
   justify-content: end;
-  gap: var(--spacing-sizing-02);
   overflow: hidden;
 }
+[data-bspk=avatar-group] [data-gap="01"] {
+  gap: var(--spacing-sizing-01);
+}
+[data-bspk=avatar-group] [data-gap="02"] {
+  gap: var(--spacing-sizing-02);
+}
+[data-bspk=avatar-group] [data-stacked="02"]:not(:last-child) {
+  margin-right: -8px;
+}
+[data-bspk=avatar-group] [data-stacked="01"]:not(:last-child) {
+  margin-right: -4px;
+}
 `));
 document.head.appendChild(style);
-

package/dist/components/Badge/Badge.d.ts

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
 import './badge.scss';
+import { ReactNode } from 'react';
 export type BadgeProps = {
     /**
-     * The content of the badge. If larger than 99, the badge will display '99+'. If null or undefined, the badge will
-     * be hidden.
+     * The content of the badge. If larger than 99, the badge will display '99+'.
      *
      * @example
      *     5;
@@ -11,7 +10,6 @@ export type BadgeProps = {
      * @default 1
      *
      * @type number
-     * @minimum 1
      */
     count?: number;
     /**
@@ -25,7 +23,7 @@ export type BadgeProps = {
      *
      * @default primary
      */
-    variant?: 'primary' | 'secondary';
+    color?: 'primary' | 'secondary';
     /**
      * Whether the badge should have a border that matches the surface color.
      *
@@ -45,20 +43,16 @@ export type BadgeProps = {
  * Visual indicator for new items within a parent page represented with a numerical count of new items.
  *
  * @example
- *     import { Badge } from '@bspk/ui/badge';
+ *     import { Badge } from '@bspk/ui/Badge';
  *
  *     function Example() {
- *         return <Badge count={5} size="small" variant="primary" />;
+ *         return <Badge count={5} size="small" color="primary" />;
  *     }
  *
  * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
  *
  * @name Badge
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Badge({ count: countProp, size, variant, surfaceBorder, children }: BadgeProps): import("react/jsx-runtime").JSX.Element | undefined;
-declare namespace Badge {
-    var bspkName: string;
-}
-export { Badge };
+export declare function Badge({ count: countProp, size, surfaceBorder, children, color }: BadgeProps): string | number | true | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Badge/Badge.js

@@ -1,31 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { tryIntParse } from '../../utils/tryIntPsrse';
 import './badge.css.js';
+import { tryIntParse } from '../../utils/tryIntPsrse';
 /**
  * Visual indicator for new items within a parent page represented with a numerical count of new items.
  *
  * @example
- *     import { Badge } from '@bspk/ui/badge';
+ *     import { Badge } from '@bspk/ui/Badge';
  *
  *     function Example() {
- *         return <Badge count={5} size="small" variant="primary" />;
+ *         return <Badge count={5} size="small" color="primary" />;
  *     }
  *
  * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
  *
  * @name Badge
- * @phase DesignReview
+ * @phase UXReview
  */
-function Badge({ count: countProp, size = 'small', variant = 'primary', surfaceBorder, children }) {
+export function Badge({ count: countProp, size = 'small', surfaceBorder, children, color = 'primary' }) {
     const count = tryIntParse(countProp);
-    if (count === null)
-        return;
-    const badge = (_jsx("sup", { "data-bspk": "badge", "data-size": size, "data-surface-border": surfaceBorder || undefined, "data-variant": variant, children: count > 99 ? '99+' : count }));
+    if (typeof count === 'undefined')
+        return children || null;
+    const badge = (_jsx("sup", { "data-attachment": !!children || undefined, "data-bspk": "badge", "data-color": color, "data-size": size, "data-surface-border": surfaceBorder || undefined, children: typeof count === 'number' && count > 99 ? '99+' : count }));
     if (children) {
-        return (_jsxs("span", { "data-bspk": "badge-wrapper", children: [children, badge] }));
+        return (_jsxs("span", { "data-attachment-wrapper": true, children: [children, badge] }));
     }
     return badge;
 }
-Badge.bspkName = 'Badge';
-export { Badge };
 //# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,OAAO,cAAc,CAAC;AA4CtB;;;;;;;;;;;;;;GAcG;AACH,SAAS,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,GAAG,OAAO,EAAE,OAAO,GAAG,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAc;IACzG,MAAM,KAAK,GAAkB,WAAW,CAAC,SAAS,CAAC,CAAC;IAEpD,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO;IAE3B,MAAM,KAAK,GAAG,CACV,2BAAe,OAAO,eAAY,IAAI,yBAAuB,aAAa,IAAI,SAAS,kBAAgB,OAAO,YACzG,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GACzB,CACT,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,6BAAgB,eAAe,aAC1B,QAAQ,EACR,KAAK,IACH,CACV,CAAC;IACN,CAAC;IAED,OAAO,KAAK,CAAC;AACjB,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAEzB,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AA0ClD;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,GAAG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,GAAG,SAAS,EAAc;IAC9G,MAAM,KAAK,GAAkB,WAAW,CAAC,SAAS,CAAC,CAAC;IAEpD,IAAI,OAAO,KAAK,KAAK,WAAW;QAAE,OAAO,QAAQ,IAAI,IAAI,CAAC;IAE1D,MAAM,KAAK,GAAG,CACV,iCACqB,CAAC,CAAC,QAAQ,IAAI,SAAS,eAC9B,OAAO,gBACL,KAAK,eACN,IAAI,yBACM,aAAa,IAAI,SAAS,YAE9C,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GACtD,CACT,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,4DACK,QAAQ,EACR,KAAK,IACH,CACV,CAAC;IACN,CAAC;IAED,OAAO,KAAK,CAAC;AACjB,CAAC"}

package/dist/components/Badge/BadgeExample.d.ts

@@ -1,3 +1,3 @@
-import { ComponentExample } from '../../utils/demo';
 import { BadgeProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 export declare const BadgeExample: ComponentExample<BadgeProps>;

package/dist/components/Badge/BadgeExample.js

@@ -1,44 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Avatar } from '../Avatar';
 export const BadgeExample = {
+    render: ({ props, Component }) => {
+        return (_jsx(Component, { ...props, children: _jsx(Avatar, { image: "/profile.jpg", name: "Andre Giant" }) }));
+    },
     containerStyle: { width: '100%' },
-    render: ({ props, Component, preset }) => {
-        if (preset?.label === 'Borders')
-            return _jsx(ExampleBadgeVariants, { Component: Component, props: props });
-        if (preset?.label === 'With Context') {
-            return (_jsx(_Fragment, { children: _jsx(Component, { ...props, children: _jsx(Avatar, { image: "/profile.jpg", name: "Andre Giant" }) }) }));
-        }
-        return _jsx(Component, { ...props });
+    variants: {
+        surfaceBorder: { color: { options: ['primary', 'secondary'] } },
+        size: { count: { options: [9, 99, 999] } },
     },
-    presets: [
-        {
-            label: 'With Context',
-        },
-        {
-            label: 'Borders',
-        },
-    ],
 };
-function ExampleBadgeVariants({ Component, ...props }) {
-    const cells = [
-        ['', 'Small', 'X-Small'],
-        ['None', { size: 'small', surfaceBorder: false }, { size: 'x-small', surfaceBorder: false }],
-        ['Border', { size: 'small', surfaceBorder: true }, { size: 'x-small', surfaceBorder: true }],
-    ];
-    let border = false;
-    return (_jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }, children: cells.flat().map((content, idx) => {
-            if (typeof content === 'string' && content === 'Border')
-                border = true;
-            return (_jsx("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: '8px',
-                    padding: '8px',
-                    background: typeof content !== 'string' && border ? 'var(--surface-neutral-t3-low)' : 'transparent',
-                }, children: typeof content === 'string'
-                    ? content
-                    : [9, 99, 999].map((count, idx2) => (_jsx(Component, { count: count, ...props, ...content }, idx2))) }, idx));
-        }) }));
-}
 //# sourceMappingURL=BadgeExample.js.map

package/dist/components/Badge/BadgeExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeExample.js","sourceRoot":"","sources":["../../../src/components/Badge/BadgeExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAK7C,MAAM,CAAC,MAAM,YAAY,GAAiC;IACtD,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE;QACrC,IAAI,MAAM,EAAE,KAAK,KAAK,SAAS;YAAE,OAAO,KAAC,oBAAoB,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAErG,IAAI,MAAM,EAAE,KAAK,KAAK,cAAc,EAAE,CAAC;YACnC,OAAO,CACH,4BACI,KAAC,SAAS,OAAK,KAAK,YAChB,KAAC,MAAM,IAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,aAAa,GAAG,GAC1C,GACb,CACN,CAAC;QACN,CAAC;QACD,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;IACpC,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,cAAc;SACxB;QACD;YACI,KAAK,EAAE,SAAS;SACnB;KACJ;CACJ,CAAC;AAEF,SAAS,oBAAoB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EAIX;IACG,MAAM,KAAK,GAAG;QACV,CAAC,EAAE,EAAE,OAAO,EAAE,SAAS,CAAC;QACxB,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC;QAC5F,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;KAClE,CAAC;IAE/B,IAAI,MAAM,GAAG,KAAK,CAAC;IACnB,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,EAAE,YAC9E,KAAK,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE;YAC/B,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,QAAQ;gBAAE,MAAM,GAAG,IAAI,CAAC;YACvE,OAAO,CACH,cAEI,KAAK,EAAE;oBACH,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,KAAK;oBACpB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,KAAK;oBACV,OAAO,EAAE,KAAK;oBACd,UAAU,EACN,OAAO,OAAO,KAAK,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,aAAa;iBAC9F,YAEA,OAAO,OAAO,KAAK,QAAQ;oBACxB,CAAC,CAAC,OAAO;oBACT,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CAAC,CAC9B,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,KAAiB,KAAK,KAAO,OAAsB,IAA5C,IAAI,CAA4C,CACjF,CAAC,IAfH,GAAG,CAgBN,CACT,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"BadgeExample.js","sourceRoot":"","sources":["../../../src/components/Badge/BadgeExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,YAAY,GAAiC;IACtD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,KAAC,SAAS,OAAK,KAAK,YAChB,KAAC,MAAM,IAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,aAAa,GAAG,GAC1C,CACf,CAAC;IACN,CAAC;IACD,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,QAAQ,EAAE;QACN,aAAa,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,EAAE;QAC/D,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,EAAE;KAC7C;CACJ,CAAC"}

package/dist/components/Badge/badge.css

@@ -3,43 +3,34 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-circular);
+  border-radius: var(--radius-full);
   height: var(--size);
   width: fit-content;
   min-width: var(--size);
   font: var(--labels-x-small);
-  color: var(--foreground-brand-on-primary);
-  background: var(--surface-brand-primary);
   padding: 0 var(--spacing-sizing-02);
+  background-color: var(--background);
+  color: var(--foreground);
+}
+[data-bspk=badge][data-color=primary] {
+  --foreground: var(--foreground-brand-on-primary);
+  --background: var(--foreground-brand-primary);
+}
+[data-bspk=badge][data-color=secondary] {
+  --foreground: var(--foreground-brand-on-secondary);
+  --background: var(--foreground-brand-secondary);
 }
 [data-bspk=badge][data-size=x-small] {
   --size: var(--spacing-sizing-05);
   padding: 2px var(--spacing-sizing-01);
 }
-[data-bspk=badge][data-variant=secondary] {
-  color: var(--foreground-brand-on-secondary);
-  background: var(--surface-brand-secondary);
+[data-bspk=badge][data-variant=notification] {
+  --size: 6px;
+  padding: 0;
+  display: block;
 }
 [data-bspk=badge][data-surface-border] {
   border: 2px solid var(--surface-neutral-t1-base);
 }
 
-[data-bspk=badge-wrapper] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  width: fit-content;
-  height: fit-content;
-  flex-shrink: 0;
-}
-[data-bspk=badge-wrapper] [data-bspk=badge] {
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: scale(1) translate(50%, -50%);
-  transform-origin: 100% 0%;
-  z-index: 2;
-}
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Badge/badge.css.js

@@ -6,46 +6,36 @@ style.appendChild(document.createTextNode(`[data-bspk=badge] {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-circular);
+  border-radius: var(--radius-full);
   height: var(--size);
   width: fit-content;
   min-width: var(--size);
   font: var(--labels-x-small);
-  color: var(--foreground-brand-on-primary);
-  background: var(--surface-brand-primary);
   padding: 0 var(--spacing-sizing-02);
+  background-color: var(--background);
+  color: var(--foreground);
+}
+[data-bspk=badge][data-color=primary] {
+  --foreground: var(--foreground-brand-on-primary);
+  --background: var(--foreground-brand-primary);
+}
+[data-bspk=badge][data-color=secondary] {
+  --foreground: var(--foreground-brand-on-secondary);
+  --background: var(--foreground-brand-secondary);
 }
 [data-bspk=badge][data-size=x-small] {
   --size: var(--spacing-sizing-05);
   padding: 2px var(--spacing-sizing-01);
 }
-[data-bspk=badge][data-variant=secondary] {
-  color: var(--foreground-brand-on-secondary);
-  background: var(--surface-brand-secondary);
+[data-bspk=badge][data-variant=notification] {
+  --size: 6px;
+  padding: 0;
+  display: block;
 }
 [data-bspk=badge][data-surface-border] {
   border: 2px solid var(--surface-neutral-t1-base);
 }
 
-[data-bspk=badge-wrapper] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  width: fit-content;
-  height: fit-content;
-  flex-shrink: 0;
-}
-[data-bspk=badge-wrapper] [data-bspk=badge] {
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: scale(1) translate(50%, -50%);
-  transform-origin: 100% 0%;
-  z-index: 2;
-}
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/BadgeDot/BadgeDot.d.ts

@@ -0,0 +1,47 @@
+import './badge-dot.scss';
+import { ReactNode } from 'react';
+type BadgeDotSize = 6 | 8 | 10 | 12;
+export type BadgeDotProps = {
+    /**
+     * The color variant of the badge-dot.
+     *
+     * @default primary
+     */
+    color?: 'primary' | 'secondary';
+    /**
+     * The context for which the badge-dot is applied.
+     *
+     * Could be a button, link, or any other element that the badge-dot is associated with.
+     */
+    children?: ReactNode;
+    /**
+     * The size of the badge-dot.
+     *
+     * @default 6
+     */
+    size?: BadgeDotSize;
+    /**
+     * Whether the badge-dot should have an outline.
+     *
+     * @default false
+     */
+    outline?: boolean;
+};
+/**
+ * A non-numeric badge used to indicate something new or its current status.
+ *
+ * @example
+ *     import { BadgeDot } from '@bspk/ui/BadgeDot';
+ *
+ *     function Example() {
+ *         return <BadgeDot color="primary" />;
+ *     }
+ *
+ * @exampleDescription This example shows a badge-dot with a count of 5, size small, and primary variant.
+ *
+ * @name BadgeDot
+ * @phase UXReview
+ */
+export declare function BadgeDot({ children, color, size, outline }: BadgeDotProps): import("react/jsx-runtime").JSX.Element;
+export {};
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/BadgeDot/BadgeDot.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './badge-dot.css.js';
+import { cssWithVars } from '../../utils/cwv';
+const OUTLINE_WIDTHS = {
+    6: 1,
+    8: 2,
+    10: 2,
+    12: 2,
+};
+/**
+ * A non-numeric badge used to indicate something new or its current status.
+ *
+ * @example
+ *     import { BadgeDot } from '@bspk/ui/BadgeDot';
+ *
+ *     function Example() {
+ *         return <BadgeDot color="primary" />;
+ *     }
+ *
+ * @exampleDescription This example shows a badge-dot with a count of 5, size small, and primary variant.
+ *
+ * @name BadgeDot
+ * @phase UXReview
+ */
+export function BadgeDot({ children, color = 'primary', size = 6, outline = false }) {
+    const badgeDot = (_jsx("sup", { "data-attachment": !!children || undefined, "data-bspk": "badge-dot", "data-color": color, "data-outline": outline || undefined, style: cssWithVars({
+            '--size': `${size}px`,
+            '--outline-width': `${OUTLINE_WIDTHS[size]}px`,
+        }) }));
+    if (children) {
+        return (_jsxs("span", { "data-attachment-wrapper": true, children: [children, badgeDot] }));
+    }
+    return badgeDot;
+}
+//# sourceMappingURL=BadgeDot.js.map

package/dist/components/BadgeDot/BadgeDot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeDot.js","sourceRoot":"","sources":["../../../src/components/BadgeDot/BadgeDot.tsx"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI1C,MAAM,cAAc,GAAiC;IACjD,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;CACR,CAAC;AA6BF;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,SAAS,EAAE,IAAI,GAAG,CAAC,EAAE,OAAO,GAAG,KAAK,EAAiB;IAC9F,MAAM,QAAQ,GAAG,CACb,iCACqB,CAAC,CAAC,QAAQ,IAAI,SAAS,eAC9B,WAAW,gBACT,KAAK,kBACH,OAAO,IAAI,SAAS,EAClC,KAAK,EAAE,WAAW,CAAC;YACf,QAAQ,EAAE,GAAG,IAAI,IAAI;YACrB,iBAAiB,EAAE,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI;SACjD,CAAC,GACJ,CACL,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,4DACK,QAAQ,EACR,QAAQ,IACN,CACV,CAAC;IACN,CAAC;IAED,OAAO,QAAQ,CAAC;AACpB,CAAC"}

package/dist/components/BadgeDot/BadgeDotExample.d.ts

@@ -0,0 +1,3 @@
+import { BadgeDotProps } from '.';
+import { ComponentExample } from '-/utils/demo';
+export declare const BadgeDotExample: ComponentExample<BadgeDotProps>;

package/dist/components/BadgeDot/BadgeDotExample.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar } from '../Avatar';
+import { Button } from '../Button';
+export const BadgeDotExample = {
+    containerStyle: { width: '100%' },
+    defaultState: {},
+    disableProps: [],
+    render: ({ props, Component }) => {
+        return (_jsx(Component, { ...props, children: props.outline === true ? (_jsx(Button, { label: "Button", size: "large" })) : (_jsx(Avatar, { image: "/profile.jpg", name: "Andre Giant" })) }));
+    },
+    sections: [],
+    variants: {
+        outline: { size: { options: [6, 8, 10, 12] } },
+    },
+};
+//# sourceMappingURL=BadgeDotExample.js.map

package/dist/components/BadgeDot/BadgeDotExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeDotExample.js","sourceRoot":"","sources":["../../../src/components/BadgeDot/BadgeDotExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,KAAC,SAAS,OAAK,KAAK,YACf,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,CACtB,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAG,CACzC,CAAC,CAAC,CAAC,CACA,KAAC,MAAM,IAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,aAAa,GAAG,CACrD,GACO,CACf,CAAC;IACN,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE;QACN,OAAO,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE;KACjD;CACJ,CAAC"}

package/dist/components/BadgeDot/badge-dot.css

@@ -0,0 +1,22 @@
+[data-bspk=badge-dot] {
+  /*! 
+  --size: is set via inline style 
+  --outline-width: is set via inline style
+  */
+  display: block;
+  width: var(--size, 6px);
+  height: var(--size, 6px);
+  border-radius: var(--radius-full);
+  background-color: var(--background);
+}
+[data-bspk=badge-dot][data-color=primary] {
+  --background: var(--foreground-brand-primary);
+}
+[data-bspk=badge-dot][data-color=secondary] {
+  --background: var(--foreground-brand-secondary);
+}
+[data-bspk=badge-dot][data-outline] {
+  border: var(--outline-width) solid var(--surface-neutral-t1-base);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/BadgeDot/badge-dot.css.js

@@ -0,0 +1,27 @@
+/** * 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=badge-dot] {
+  /*! 
+  --size: is set via inline style 
+  --outline-width: is set via inline style
+  */
+  display: block;
+  width: var(--size, 6px);
+  height: var(--size, 6px);
+  border-radius: var(--radius-full);
+  background-color: var(--background);
+}
+[data-bspk=badge-dot][data-color=primary] {
+  --background: var(--foreground-brand-primary);
+}
+[data-bspk=badge-dot][data-color=secondary] {
+  --background: var(--foreground-brand-secondary);
+}
+[data-bspk=badge-dot][data-outline] {
+  border: var(--outline-width) solid var(--surface-neutral-t1-base);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

package/dist/components/BadgeDot/index.d.ts

@@ -0,0 +1 @@
+export * from './BadgeDot';

package/dist/components/BadgeDot/index.js

@@ -0,0 +1,2 @@
+export * from './BadgeDot';
+//# sourceMappingURL=index.js.map

package/dist/components/BadgeDot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/BadgeDot/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/BannerAlert/BannerAlert.d.ts

@@ -1,5 +1,5 @@
-import { ElementProps, AlertVariant, CallToActionButton } from '../../index.js';
 import './banner-alert.scss';
+import { ElementProps, AlertVariant, CallToActionButton } from '-/types/common';
 export type BannerAlertProps = {
     /**
      * The color variant of the banner alert.
@@ -52,6 +52,10 @@ export type BannerAlertProps = {
  *             header="Error"
  *             body="There was an error processing your request."
  *             onClose={() => console.log('Alert closed')}
+ *             callToAction={{
+ *                 label = 'Click me',
+ *                 onClick = () => action('Call to action clicked!'),
+ *             }}
  *         />;
  *     }
  *
@@ -61,11 +65,7 @@ export type BannerAlertProps = {
  *
  *
  * @name BannerAlert
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function BannerAlert({ variant, onClose, header, callToAction, body, elevated, }: ElementProps<BannerAlertProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace BannerAlert {
-    var bspkName: string;
-}
-export { BannerAlert };
+export declare function BannerAlert({ variant, onClose, header, callToAction, body, elevated, }: ElementProps<BannerAlertProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/BannerAlert/BannerAlert.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './banner-alert.css.js';
 import { SvgCheckCircleFill } from '@bspk/icons/CheckCircleFill';
 import { SvgClose } from '@bspk/icons/Close';
 import { SvgErrorFill } from '@bspk/icons/ErrorFill';
 import { SvgInfoFill } from '@bspk/icons/InfoFill';
 import { SvgWarningFill } from '@bspk/icons/WarningFill';
-import './banner-alert.css.js';
+import { Button } from '../Button';
 /**
  * A visual and contextual message used to communicate an important message or notification to users relating to a
  * status or the body content of a page.
@@ -18,6 +19,10 @@ import './banner-alert.css.js';
  *             header="Error"
  *             body="There was an error processing your request."
  *             onClose={() => console.log('Alert closed')}
+ *             callToAction={{
+ *                 label = 'Click me',
+ *                 onClick = () => action('Call to action clicked!'),
+ *             }}
  *         />;
  *     }
  *
@@ -27,11 +32,9 @@ import './banner-alert.css.js';
  *
  *
  * @name BannerAlert
- * @phase DesignReview
+ * @phase UXReview
  */
-function BannerAlert({ variant = 'informational', onClose, header, callToAction, body, elevated = false, }) {
-    return (_jsxs("article", { "data-bspk": "banner-alert", "data-elevated": elevated || undefined, "data-variant": variant, children: [_jsxs("div", { "data-icon-bar": true, children: [variant === 'error' && _jsx(SvgErrorFill, {}), variant === 'informational' && _jsx(SvgInfoFill, {}), variant === 'success' && _jsx(SvgCheckCircleFill, {}), variant === 'warning' && _jsx(SvgWarningFill, {})] }), _jsxs("div", { "data-content": true, children: [(header || onClose) && (_jsxs("header", { children: [_jsx("span", { children: header }), typeof onClose === 'function' && (_jsx("button", { "aria-label": "Close", onClick: onClose, type: "button", children: _jsx(SvgClose, {}) }))] })), _jsxs("div", { "data-body": true, children: [_jsx("span", { children: body }), callToAction?.label && callToAction?.onClick && (_jsx("button", { onClick: callToAction.onClick, children: callToAction.label }))] })] })] }));
+export function BannerAlert({ variant = 'informational', onClose, header, callToAction, body, elevated = false, }) {
+    return (_jsxs("div", { "data-bspk": "banner-alert", "data-elevated": elevated || undefined, "data-variant": variant, role: "alert", children: [_jsxs("div", { "data-icon-bar": true, children: [variant === 'error' && _jsx(SvgErrorFill, {}), variant === 'informational' && _jsx(SvgInfoFill, {}), variant === 'success' && _jsx(SvgCheckCircleFill, {}), variant === 'warning' && _jsx(SvgWarningFill, {})] }), _jsxs("div", { "data-content": true, children: [(header || onClose) && (_jsxs("header", { children: [_jsx("span", { children: header }), typeof onClose === 'function' && (_jsx(Button, { icon: _jsx(SvgClose, {}), iconOnly: true, label: "Close", onClick: onClose, size: "small", variant: "tertiary" }))] })), _jsxs("div", { "data-body": true, children: [_jsx("span", { children: body }), callToAction?.label && callToAction?.onClick && (_jsx(Button, { label: callToAction.label, onClick: callToAction.onClick, size: "small", variant: "tertiary" }))] })] })] }));
 }
-BannerAlert.bspkName = 'BannerAlert';
-export { BannerAlert };
 //# sourceMappingURL=BannerAlert.js.map

package/dist/components/BannerAlert/BannerAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerAlert.js","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGzD,OAAO,qBAAqB,CAAC;AA0C7B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,SAAS,WAAW,CAAC,EACjB,OAAO,GAAG,eAAe,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,QAAQ,GAAG,KAAK,GACoB;IACpC,OAAO,CACH,gCAAmB,cAAc,mBAAgB,QAAQ,IAAI,SAAS,kBAAgB,OAAO,aACzF,iDACK,OAAO,KAAK,OAAO,IAAI,KAAC,YAAY,KAAG,EACvC,OAAO,KAAK,eAAe,IAAI,KAAC,WAAW,KAAG,EAC9C,OAAO,KAAK,SAAS,IAAI,KAAC,kBAAkB,KAAG,EAC/C,OAAO,KAAK,SAAS,IAAI,KAAC,cAAc,KAAG,IAC1C,EACN,gDACK,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CACpB,6BACI,yBAAO,MAAM,GAAQ,EACpB,OAAO,OAAO,KAAK,UAAU,IAAI,CAC9B,+BAAmB,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,YACtD,KAAC,QAAQ,KAAG,GACP,CACZ,IACI,CACZ,EACD,6CACI,yBAAO,IAAI,GAAQ,EAClB,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,OAAO,IAAI,CAC7C,iBAAQ,OAAO,EAAE,YAAY,CAAC,OAAO,YAAG,YAAY,CAAC,KAAK,GAAU,CACvE,IACC,IACJ,IACA,CACb,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"BannerAlert.js","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AA2C7C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,WAAW,CAAC,EACxB,OAAO,GAAG,eAAe,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,QAAQ,GAAG,KAAK,GACoB;IACpC,OAAO,CACH,4BAAe,cAAc,mBAAgB,QAAQ,IAAI,SAAS,kBAAgB,OAAO,EAAE,IAAI,EAAC,OAAO,aACnG,iDACK,OAAO,KAAK,OAAO,IAAI,KAAC,YAAY,KAAG,EACvC,OAAO,KAAK,eAAe,IAAI,KAAC,WAAW,KAAG,EAC9C,OAAO,KAAK,SAAS,IAAI,KAAC,kBAAkB,KAAG,EAC/C,OAAO,KAAK,SAAS,IAAI,KAAC,cAAc,KAAG,IAC1C,EACN,gDACK,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CACpB,6BACI,yBAAO,MAAM,GAAQ,EACpB,OAAO,OAAO,KAAK,UAAU,IAAI,CAC9B,KAAC,MAAM,IACH,IAAI,EAAE,KAAC,QAAQ,KAAG,EAClB,QAAQ,QACR,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GACpB,CACL,IACI,CACZ,EACD,6CACI,yBAAO,IAAI,GAAQ,EAClB,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,OAAO,IAAI,CAC7C,KAAC,MAAM,IACH,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GACpB,CACL,IACC,IACJ,IACJ,CACT,CAAC;AACN,CAAC"}

package/dist/components/BannerAlert/BannerAlertExample.d.ts

@@ -1,3 +1,3 @@
-import { ComponentExampleFn } from '../../utils/demo';
 import { BannerAlertProps } from '.';
+import { ComponentExampleFn } from '-/utils/demo';
 export declare const BannerAlertExample: ComponentExampleFn<BannerAlertProps>;

package/dist/components/BannerAlert/BannerAlertExample.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const BannerAlertExample = ({ action }) => ({
     containerStyle: { width: '100%' },
-    render: ({ props, context, Component }) => {
+    render: ({ props, variant, Component }) => {
         let nextHeader = props.header || 'This is a banner alert';
-        if (context?.variantName === 'variant') {
-            if (context?.variantValue === 'informational')
+        if (variant && variant.name === 'variant') {
+            if (variant.value === 'informational')
                 nextHeader = 'This is informational banner';
-            if (context?.variantValue === 'success')
+            if (variant.value === 'success')
                 nextHeader = 'This is success banner';
-            if (context?.variantValue === 'warning')
+            if (variant.value === 'warning')
                 nextHeader = 'This is warning banner';
-            if (context?.variantValue === 'error')
+            if (variant.value === 'error')
                 nextHeader = 'This is error banner';
         }
         return _jsx(Component, { ...props, header: nextHeader });
@@ -19,6 +19,8 @@ export const BannerAlertExample = ({ action }) => ({
         {
             label: 'With CallToAction',
             propState: {
+                header: 'With CallToAction Header',
+                body: 'With CallToAction body',
                 callToAction: {
                     label: 'Click me',
                     onClick: () => action('Call to action clicked!'),
@@ -28,6 +30,8 @@ export const BannerAlertExample = ({ action }) => ({
         {
             label: 'Without OnClose',
             propState: {
+                header: 'Without OnClose Header',
+                body: 'Without OnClose body',
                 onClose: undefined,
             },
         },

package/dist/components/BannerAlert/BannerAlertExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerAlertExample.js","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlertExample.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,MAAM,kBAAkB,GAAyC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACrF,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;QACtC,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,IAAI,wBAAwB,CAAC;QAC1D,IAAI,OAAO,EAAE,WAAW,KAAK,SAAS,EAAE,CAAC;YACrC,IAAI,OAAO,EAAE,YAAY,KAAK,eAAe;gBAAE,UAAU,GAAG,8BAA8B,CAAC;YAC3F,IAAI,OAAO,EAAE,YAAY,KAAK,SAAS;gBAAE,UAAU,GAAG,wBAAwB,CAAC;YAC/E,IAAI,OAAO,EAAE,YAAY,KAAK,SAAS;gBAAE,UAAU,GAAG,wBAAwB,CAAC;YAC/E,IAAI,OAAO,EAAE,YAAY,KAAK,OAAO;gBAAE,UAAU,GAAG,sBAAsB,CAAC;QAC/E,CAAC;QACD,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,MAAM,EAAE,UAAU,GAAI,CAAC;IACxD,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,YAAY,EAAE;oBACV,KAAK,EAAE,UAAU;oBACjB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,yBAAyB,CAAC;iBACnD;aACJ;SACJ;QACD;YACI,KAAK,EAAE,iBAAiB;YACxB,SAAS,EAAE;gBACP,OAAO,EAAE,SAAS;aACrB;SACJ;KACJ;CACJ,CAAC,CAAC"}
+{"version":3,"file":"BannerAlertExample.js","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlertExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,kBAAkB,GAAyC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACrF,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;QACtC,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,IAAI,wBAAwB,CAAC;QAC1D,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YACxC,IAAI,OAAO,CAAC,KAAK,KAAK,eAAe;gBAAE,UAAU,GAAG,8BAA8B,CAAC;YACnF,IAAI,OAAO,CAAC,KAAK,KAAK,SAAS;gBAAE,UAAU,GAAG,wBAAwB,CAAC;YACvE,IAAI,OAAO,CAAC,KAAK,KAAK,SAAS;gBAAE,UAAU,GAAG,wBAAwB,CAAC;YACvE,IAAI,OAAO,CAAC,KAAK,KAAK,OAAO;gBAAE,UAAU,GAAG,sBAAsB,CAAC;QACvE,CAAC;QACD,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,MAAM,EAAE,UAAU,GAAI,CAAC;IACxD,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,MAAM,EAAE,0BAA0B;gBAClC,IAAI,EAAE,wBAAwB;gBAC9B,YAAY,EAAE;oBACV,KAAK,EAAE,UAAU;oBACjB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,yBAAyB,CAAC;iBACnD;aACJ;SACJ;QACD;YACI,KAAK,EAAE,iBAAiB;YACxB,SAAS,EAAE;gBACP,MAAM,EAAE,wBAAwB;gBAChC,IAAI,EAAE,sBAAsB;gBAC5B,OAAO,EAAE,SAAS;aACrB;SACJ;KACJ;CACJ,CAAC,CAAC"}