@bspk/ui 1.1.34 → 1.3.0

package/dist/components/Breadcrumb/BreadcrumbExample.js

@@ -1,89 +1,157 @@
-export const BreadcrumbExample = {
-    presets: [
-        {
-            label: '1 Item (nothing visible)',
-            propState: {
-                items: [
-                    {
-                        label: 'Item 1',
-                        href: '#link-1',
-                    },
-                ],
-            },
+export const presets = [
+    {
+        label: '1 Item (nothing visible)',
+        propState: {
+            items: [
+                {
+                    label: 'Item 1',
+                    href: '#link-1',
+                },
+            ],
+        },
+    },
+    {
+        label: '2 Items (minimum)',
+        propState: {
+            items: [
+                {
+                    label: 'Item 1',
+                    href: '#link-1',
+                },
+                {
+                    label: 'Item 2',
+                    href: '#link-2',
+                },
+            ],
         },
-        {
-            label: '2 Items (minimum)',
-            propState: {
-                items: [
-                    {
-                        label: 'Item 1',
-                        href: '#link-1',
-                    },
-                    {
-                        label: 'Item 2',
-                        href: '#link-2',
-                    },
-                ],
-            },
+    },
+    {
+        label: '5 Items',
+        propState: {
+            items: [
+                {
+                    label: 'Item 1',
+                    href: '#link-1',
+                },
+                {
+                    label: 'Item 2',
+                    href: '#link-2',
+                },
+                {
+                    label: 'Item 3',
+                    href: '#link-3',
+                },
+                {
+                    label: 'Item 4',
+                    href: '#link-4',
+                },
+                {
+                    label: 'Item 5',
+                    href: '#link-5',
+                },
+            ],
         },
-        {
-            label: '5 Items',
-            propState: {
-                items: [
-                    {
-                        label: 'Item 1',
-                        href: '#link-1',
-                    },
-                    {
-                        label: 'Item 2',
-                        href: '#link-2',
-                    },
-                    {
-                        label: 'Item 3',
-                        href: '#link-3',
-                    },
-                    {
-                        label: 'Item 4',
-                        href: '#link-4',
-                    },
-                    {
-                        label: 'Item 5',
-                        href: '#link-5',
-                    },
-                ],
-            },
+    },
+    {
+        label: '6 Items',
+        propState: {
+            items: [
+                {
+                    label: 'Item 1',
+                    href: '#link-1',
+                },
+                {
+                    label: 'Item 2',
+                    href: '#link-2',
+                },
+                {
+                    label: 'Item 3',
+                    href: '#link-3',
+                },
+                {
+                    label: 'Item 4',
+                    href: '#link-4',
+                },
+                {
+                    label: 'Item 5',
+                    href: '#link-5',
+                },
+                {
+                    label: 'Item 6',
+                    href: '#link-6',
+                },
+            ],
         },
-        {
-            label: '6 Items',
-            propState: {
-                items: [
-                    {
-                        label: 'Item 1',
-                        href: '#link-1',
-                    },
-                    {
-                        label: 'Item 2',
-                        href: '#link-2',
-                    },
-                    {
-                        label: 'Item 3',
-                        href: '#link-3',
-                    },
-                    {
-                        label: 'Item 4',
-                        href: '#link-4',
-                    },
-                    {
-                        label: 'Item 5',
-                        href: '#link-5',
-                    },
-                    {
-                        label: 'Item 6',
-                        href: '#link-6',
-                    },
-                ],
-            },
+    },
+    {
+        label: 'NOT recommended',
+        propState: {
+            items: [
+                {
+                    label: 'Item 1',
+                    href: '#link-1',
+                },
+                {
+                    label: 'Item 2',
+                    href: '#link-2',
+                },
+                {
+                    label: 'Item 3',
+                    href: '#link-3',
+                },
+                {
+                    label: 'Item 4',
+                    href: '#link-4',
+                },
+                {
+                    label: 'Item 5',
+                    href: '#link-5',
+                },
+                {
+                    label: 'Item 6',
+                    href: '#link-6',
+                },
+                {
+                    label: 'Item 7',
+                    href: '#link-7',
+                },
+                {
+                    label: 'Item 8',
+                    href: '#link-8',
+                },
+                {
+                    label: 'Item 9',
+                    href: '#link-9',
+                },
+                {
+                    label: 'Item 10',
+                    href: '#link-10',
+                },
+                {
+                    label: 'Item 11',
+                    href: '#link-11',
+                },
+                {
+                    label: 'Item 12',
+                    href: '#link-12',
+                },
+                {
+                    label: 'Item 13',
+                    href: '#link-13',
+                },
+                {
+                    label: 'Item 14',
+                    href: '#link-14',
+                },
+                {
+                    label: 'Item 15',
+                    href: '#link-15',
+                },
+            ],
         },
-    ],
+    },
+];
+export const BreadcrumbExample = {
+    presets,
 };
 //# sourceMappingURL=BreadcrumbExample.js.map

package/dist/components/Breadcrumb/BreadcrumbExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbExample.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/BreadcrumbExample.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,OAAO,EAAE;QACL;YACI,KAAK,EAAE,0BAA0B;YACjC,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;iBACJ;aACJ;SACJ;QACD;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;iBACJ;aACJ;SACJ;QACD;YACI,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;iBACJ;aACJ;SACJ;QACD;YACI,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;iBACJ;aACJ;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"BreadcrumbExample.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/BreadcrumbExample.tsx"],"names":[],"mappings":"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"}

package/dist/components/Breadcrumb/breadcrumb.css.js

@@ -17,4 +17,3 @@ style.appendChild(document.createTextNode(`[data-bspk=breadcrumb] {
 }
 `));
 document.head.appendChild(style);
-

package/dist/components/Button/Button.d.ts

@@ -1,8 +1,8 @@
-import { ElementType, ReactNode } from 'react';
-import { ButtonSize, CommonProps, ElementProps, SetRef } from '../../index.js';
 import './button.scss';
+import { AriaAttributes, ElementType, ReactNode } from 'react';
+import { ButtonSize, CommonProps, ElementProps, SetRef } from '-/types/common';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
-export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled'> & {
+export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled' | 'owner'> & {
     /**
      * The label of the button.
      *
@@ -16,11 +16,14 @@ export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabl
      */
     icon?: ReactNode;
     /**
-     * Shows the button label. When label isn't showing it is used in a tooltip and as the aria-label prop.
+     * When true the button label is hidden and only the icon is shown. When label isn't showing it is used in a tooltip
+     * and as the aria-label prop.
      *
-     * @default true
+     * Ignored if `icon` is not provided.
+     *
+     * @default false
      */
-    showLabel?: boolean;
+    iconOnly?: boolean;
     /**
      * The element type to render as.
      *
@@ -85,11 +88,7 @@ export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabl
  *     }
  *
  * @name Button
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Button<As extends ElementType = 'button'>(props: ElementProps<ButtonProps<As>, As>): JSX.Element;
-declare namespace Button {
-    var bspkName: string;
-}
-export { Button };
+export declare function Button<As extends ElementType = 'button'>(props: AriaAttributes & ElementProps<ButtonProps<As>, As>): JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Button/Button.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import './button.css.js';
 import { isValidElement } from 'react';
 import { Tooltip } from '../Tooltip';
-import { isValidIcon } from '../../utils/children';
-import { useErrorLogger } from '../../utils/errors';
-import './button.css.js';
 /**
  * A clickable component that allows users to perform an action, make a choice or trigger a change in state.
  *
@@ -24,25 +22,30 @@ import './button.css.js';
  *     }
  *
  * @name Button
- * @phase DesignReview
+ * @phase UXReview
  */
-function Button(props) {
-    const { size = 'medium', variant = 'primary', destructive = false, width = 'hug', as: As = 'button', disabled = false, label: labelProp, icon, 
-    // showLabel: showLabelProp = true,
-    showLabel = true, toolTip: toolTipProp, children, innerRef, ...containerProps } = props;
+export function Button(props) {
+    const { size = 'medium', variant = 'primary', destructive = false, width = 'hug', as: As = 'button', disabled = false, label: labelProp, icon, iconOnly: iconOnlyProp = false, toolTip: toolTipProp, children, innerRef, owner, ...containerProps } = props;
     const label = typeof children === 'string' ? children : labelProp || '';
-    // ignore showLabel=false if there is no icon
-    const hideLabel = showLabel === false && icon;
-    const toolTip = toolTipProp || (hideLabel ? label : undefined);
-    const { logError } = useErrorLogger();
-    logError(!!icon && !isValidIcon(icon), 'Button - The icon prop must be a valid icon element.');
-    logError(!label, 'Button - The button must have a label.');
-    const button = (_jsxs(As, { ...containerProps, "aria-label": label, "data-bspk": "button", "data-destructive": destructive || undefined, "data-size": size, "data-touch-target-parent": true, "data-variant": variant, "data-width": width, disabled: disabled || undefined, ref: innerRef, children: [children && typeof children !== 'string' ? (children) : (_jsxs(_Fragment, { children: [!!icon && isValidElement(icon) && _jsx("span", { "data-button-icon": true, children: icon }), !hideLabel && _jsx("span", { "data-button-label": true, children: label })] })), _jsx("span", { "data-touch-target": true })] }));
-    if (toolTip) {
+    // ignore iconOnly if there is no icon
+    const iconOnly = iconOnlyProp === true && !!icon;
+    // if toolTip text is not provided and iconOnly is true, toolTip text should be label
+    const toolTip = toolTipProp || (iconOnly ? label : undefined);
+    const button = (triggerProps) => (_jsxs(As, { ...containerProps, ...triggerProps, "aria-label": label, "data-bspk": "button", "data-bspk-owner": owner || undefined, "data-destructive": destructive || undefined, "data-size": size, "data-touch-target-parent": true, "data-variant": variant, "data-width": width, disabled: disabled || undefined, onBlur: (e) => {
+            triggerProps.onBlur?.();
+            containerProps.onBlur?.(e);
+        }, onFocus: (e) => {
+            triggerProps.onFocus?.();
+            containerProps.onFocus?.(e);
+        }, onMouseLeave: (e) => {
+            triggerProps.onMouseLeave?.();
+            containerProps.onMouseLeave?.(e);
+        }, onMouseOver: (e) => {
+            triggerProps.onMouseOver?.();
+            containerProps.onMouseOver?.(e);
+        }, ref: innerRef, children: [children && typeof children !== 'string' ? (children) : (_jsxs(_Fragment, { children: [!!icon && isValidElement(icon) && (_jsx("span", { "aria-hidden": true, "data-button-icon": true, children: icon })), !iconOnly && _jsx("span", { "data-button-label": true, children: label })] })), _jsx("span", { "data-touch-target": true })] }));
+    if (toolTip)
         return (_jsx(Tooltip, { label: toolTip, placement: "top", children: button }));
-    }
-    return button;
+    return button({});
 }
-Button.bspkName = 'Button';
-export { Button };
 //# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,cAAc,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,eAAe,CAAC;AAoEvB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,SAAS,MAAM,CAAoC,KAAwC;IACvF,MAAM,EACF,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,SAAS,EACnB,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,KAAK,EACb,EAAE,EAAE,EAAE,GAAG,QAAQ,EACjB,QAAQ,GAAG,KAAK,EAChB,KAAK,EAAE,SAAS,EAChB,IAAI;IACJ,mCAAmC;IACnC,SAAS,GAAG,IAAI,EAChB,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,QAAQ,EACR,GAAG,cAAc,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;IAExE,6CAA6C;IAC7C,MAAM,SAAS,GAAG,SAAS,KAAK,KAAK,IAAI,IAAI,CAAC;IAC9C,MAAM,OAAO,GAAG,WAAW,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC/D,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,sDAAsD,CAAC,CAAC;IAC/F,QAAQ,CAAC,CAAC,KAAK,EAAE,wCAAwC,CAAC,CAAC;IAE3D,MAAM,MAAM,GAAG,CACX,MAAC,EAAE,OACK,cAAc,gBACN,KAAK,eACP,QAAQ,sBACA,WAAW,IAAI,SAAS,eAC/B,IAAI,oDAED,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,GAAG,EAAE,QAAQ,aAEZ,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CACxC,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,8BACK,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,mDAAwB,IAAI,GAAQ,EACtE,CAAC,SAAS,IAAI,oDAAyB,KAAK,GAAQ,IACtD,CACN,EACD,2CAA0B,IACzB,CACR,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACV,OAAO,CACH,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAC,KAAK,YACnC,MAAM,GACD,CACb,CAAC;IACN,CAAC;IAED,OAAO,MAAM,CAAC;AAClB,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAA0C,cAAc,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AAwEpE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,MAAM,CAClB,KAAyD;IAEzD,MAAM,EACF,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,SAAS,EACnB,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,KAAK,EACb,EAAE,EAAE,EAAE,GAAG,QAAQ,EACjB,QAAQ,GAAG,KAAK,EAChB,KAAK,EAAE,SAAS,EAChB,IAAI,EACJ,QAAQ,EAAE,YAAY,GAAG,KAAK,EAC9B,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,GAAG,cAAc,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;IAExE,sCAAsC;IACtC,MAAM,QAAQ,GAAG,YAAY,KAAK,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC;IAEjD,qFAAqF;IACrF,MAAM,OAAO,GAAG,WAAW,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAE9D,MAAM,MAAM,GAAG,CAAC,YAAiC,EAAE,EAAE,CAAC,CAClD,MAAC,EAAE,OACK,cAAc,KACd,YAAY,gBACJ,KAAK,eACP,QAAQ,qBACD,KAAK,IAAI,SAAS,sBACjB,WAAW,IAAI,SAAS,eAC/B,IAAI,oDAED,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACV,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC;YACxB,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;QAC/B,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACX,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC;YACzB,cAAc,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QAChC,CAAC,EACD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC;YAC9B,cAAc,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;QACrC,CAAC,EACD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC;YAC7B,cAAc,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;QACpC,CAAC,EACD,GAAG,EAAE,QAAQ,aAEZ,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CACxC,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,8BACK,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAC/B,8BAAmB,IAAI,sCAClB,IAAI,GACF,CACV,EACA,CAAC,QAAQ,IAAI,oDAAyB,KAAK,GAAQ,IACrD,CACN,EACD,2CAA0B,IACzB,CACR,CAAC;IAEF,IAAI,OAAO;QACP,OAAO,CACH,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAC,KAAK,YACnC,MAAM,GACD,CACb,CAAC;IAEN,OAAO,MAAM,CAAC,EAAE,CAAC,CAAC;AACtB,CAAC"}

package/dist/components/Button/ButtonExample.d.ts

@@ -1,3 +1,4 @@
-import { ComponentExample } from '../../utils/demo';
 import { ButtonProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<ButtonProps>[];
 export declare const ButtonExample: ComponentExample<ButtonProps>;

package/dist/components/Button/ButtonExample.js

@@ -1,27 +1,35 @@
-export const ButtonExample = {
-    presets: [
-        {
-            label: 'Icon & Text',
-            propState: {
-                icon: 'Add',
-                label: 'Add',
-            },
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgPerson } from '@bspk/icons/Person';
+export const presets = [
+    {
+        label: 'Icon & Text',
+        propState: {
+            icon: 'Add',
+            label: 'Add',
+            iconOnly: false,
         },
-        {
-            label: 'Text only',
-            propState: {
-                label: 'Add',
-                icon: undefined,
-            },
+    },
+    {
+        label: 'Text only',
+        propState: {
+            label: 'Add',
+            icon: undefined,
+            iconOnly: false,
         },
-        {
-            label: 'Icon only',
-            propState: {
-                showLabel: false,
-                icon: 'Add',
-                label: 'Add',
-            },
+    },
+    {
+        label: 'Icon only',
+        propState: {
+            iconOnly: true,
+            icon: 'Add',
+            label: 'Add',
         },
-    ],
+    },
+];
+export const ButtonExample = {
+    presets,
+    variants: {
+        iconOnly: () => ({ icon: _jsx(SvgPerson, {}), label: 'Person' }),
+    },
 };
 //# sourceMappingURL=ButtonExample.js.map

package/dist/components/Button/ButtonExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonExample.js","sourceRoot":"","sources":["../../../src/components/Button/ButtonExample.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,aAAa;YACpB,SAAS,EAAE;gBACP,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,KAAK;aACf;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,KAAK,EAAE,KAAK;gBACZ,IAAI,EAAE,SAAS;aAClB;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,SAAS,EAAE,KAAK;gBAChB,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,KAAK;aACf;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"ButtonExample.js","sourceRoot":"","sources":["../../../src/components/Button/ButtonExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAI/C,MAAM,CAAC,MAAM,OAAO,GAA0B;IAC1C;QACI,KAAK,EAAE,aAAa;QACpB,SAAS,EAAE;YACP,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,WAAW;QAClB,SAAS,EAAE;YACP,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,WAAW;QAClB,SAAS,EAAE;YACP,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,KAAK;SACf;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,OAAO;IACP,QAAQ,EAAE;QACN,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAC,SAAS,KAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;KAC7D;CACJ,CAAC"}

package/dist/components/Button/button.css

@@ -86,7 +86,7 @@
 }
 [data-bspk=button][data-variant=primary] {
   --primary-background: var(--surface-brand-primary);
-  background: linear-gradient(var(--primary-background), var(--primary-background));
+  background-color: var(--primary-background);
   color: var(--foreground-brand-on-primary);
   border-radius: var(--radius-sm);
 }

package/dist/components/Button/button.css.js

@@ -89,7 +89,7 @@ style.appendChild(document.createTextNode(`[data-bspk=button] {
 }
 [data-bspk=button][data-variant=primary] {
   --primary-background: var(--surface-brand-primary);
-  background: linear-gradient(var(--primary-background), var(--primary-background));
+  background-color: var(--primary-background);
   color: var(--foreground-brand-on-primary);
   border-radius: var(--radius-sm);
 }
@@ -156,4 +156,3 @@ style.appendChild(document.createTextNode(`[data-bspk=button] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/ButtonDock/ButtonDock.d.ts

@@ -0,0 +1,55 @@
+import './button-dock.scss';
+import { ButtonProps } from '-/components/Button/Button';
+export type ButtonDockProps = {
+    /**
+     * The primary button in the dock. If a secondary button is provided the primary will render on the right side.
+     *
+     * @required
+     */
+    primaryButton: ButtonProps;
+    /**
+     * Secondary button. If provided will render on the left side.
+     *
+     * @required
+     */
+    secondaryButton?: ButtonProps;
+    /**
+     * If more than one button is provided defines how the buttons should be arranged.
+     *
+     * @default fill
+     */
+    arrangement?: 'fill' | 'spread';
+    /**
+     * If the dock should render inline or fixed to the bottom of the viewport.
+     *
+     * @default inline
+     */
+    mode?: 'fixed' | 'inline';
+};
+/**
+ * A sticky or fixed bar containing action buttons that are to remain on the screen while the page scrolls. Alternative
+ * option to house the bar within the bottom of a page’s body content.
+ *
+ * @example
+ *     import { ButtonDock } from '@bspk/ui/ButtonDock';
+ *
+ *     function Example() {
+ *         return (
+ *             <ButtonDock
+ *                 primaryButton={{
+ *                     children: 'Send',
+ *                     label: 'send',
+ *                 }}
+ *                 secondaryButton={{
+ *                     children: 'Cancel',
+ *                     label: 'cancel',
+ *                 }}
+ *             />
+ *         );
+ *     }
+ *
+ * @name ButtonDock
+ * @phase Dev
+ */
+export declare function ButtonDock({ primaryButton, secondaryButton, arrangement, mode }: ButtonDockProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ButtonDock/ButtonDock.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './button-dock.css.js';
+import { Button } from '../Button/Button';
+/**
+ * A sticky or fixed bar containing action buttons that are to remain on the screen while the page scrolls. Alternative
+ * option to house the bar within the bottom of a page’s body content.
+ *
+ * @example
+ *     import { ButtonDock } from '@bspk/ui/ButtonDock';
+ *
+ *     function Example() {
+ *         return (
+ *             <ButtonDock
+ *                 primaryButton={{
+ *                     children: 'Send',
+ *                     label: 'send',
+ *                 }}
+ *                 secondaryButton={{
+ *                     children: 'Cancel',
+ *                     label: 'cancel',
+ *                 }}
+ *             />
+ *         );
+ *     }
+ *
+ * @name ButtonDock
+ * @phase Dev
+ */
+export function ButtonDock({ primaryButton, secondaryButton, arrangement = 'fill', mode = 'inline' }) {
+    const finalArrangement = secondaryButton ? arrangement : 'fill';
+    return (_jsxs("div", { "data-arrangement": finalArrangement, "data-bspk": "button-dock", "data-mode": mode, children: [secondaryButton && _jsx(Button, { size: 'medium', variant: 'secondary', ...secondaryButton }), _jsx(Button, { size: 'medium', variant: 'primary', ...primaryButton })] }));
+}
+//# sourceMappingURL=ButtonDock.js.map

package/dist/components/ButtonDock/ButtonDock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonDock.js","sourceRoot":"","sources":["../../../src/components/ButtonDock/ButtonDock.tsx"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAe,MAAM,4BAA4B,CAAC;AA6BjE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,GAAG,MAAM,EAAE,IAAI,GAAG,QAAQ,EAAmB;IACjH,MAAM,gBAAgB,GAAG,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC;IAEhE,OAAO,CACH,mCAAuB,gBAAgB,eAAY,aAAa,eAAY,IAAI,aAC3E,eAAe,IAAI,KAAC,MAAM,IAAO,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,eAAe,GAAM,EAEhG,KAAC,MAAM,IAAO,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,aAAa,GAAM,IACtE,CACT,CAAC;AACN,CAAC"}

package/dist/components/ButtonDock/ButtonDockExample.d.ts

@@ -0,0 +1,4 @@
+import { ButtonDockProps } from '.';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
+export declare const presets: Preset<ButtonDockProps>[];
+export declare const ButtonDockExample: ComponentExampleFn<ButtonDockProps>;