@bspk/ui 1.1.34 → 1.2.0

package/dist/components/EmptyState/EmptyState.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { CallToActionButton } from '../../index.js';
+import { CallToActionButton } from '-/types/common';
 export type EmptyStateProps = {
     /** The image or icon to display in the empty state. */
     children?: ReactNode;
@@ -44,11 +44,7 @@ export type EmptyStateProps = {
  *     }
  *
  * @name EmptyState
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function EmptyState({ children, header, body, callToAction, bodyAlign }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
-declare namespace EmptyState {
-    var bspkName: string;
-}
-export { EmptyState };
+export declare function EmptyState({ children, header, body, callToAction, bodyAlign }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/EmptyState/EmptyState.js

@@ -17,14 +17,12 @@ import { Txt } from '../Txt';
  *     }
  *
  * @name EmptyState
- * @phase DesignReview
+ * @phase UXReview
  */
-function EmptyState({ children, header, body, callToAction, bodyAlign = 'center' }) {
+export function EmptyState({ children, header, body, callToAction, bodyAlign = 'center' }) {
     return (_jsxs(Layout, { align: "center", column: true, "data-bspk": "empty-state", style: {
             margin: 'var(--spacing-sizing-04)',
             maxWidth: '500px',
         }, children: [children, _jsxs(Layout, { align: "center", column: true, gap: "4", children: [_jsx(Txt, { as: "header", variant: "heading-h5", children: header }), _jsx(Txt, { as: "p", style: { textAlign: bodyAlign }, variant: "body-base", children: body })] }), callToAction && (_jsx(Button, { label: callToAction.label, onClick: callToAction.onClick, size: callToAction.size || 'medium', variant: "primary" }))] }));
 }
-EmptyState.bspkName = 'EmptyState';
-export { EmptyState };
 //# sourceMappingURL=EmptyState.js.map

package/dist/components/EmptyState/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAgCvC;;;;;;;;;;;;;;;;GAgBG;AACH,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,GAAG,QAAQ,EAAmB;IAC/F,OAAO,CACH,MAAC,MAAM,IACH,KAAK,EAAC,QAAQ,EACd,MAAM,qBACI,aAAa,EACvB,KAAK,EAAE;YACH,MAAM,EAAE,0BAA0B;YAClC,QAAQ,EAAE,OAAO;SACpB,aAEA,QAAQ,EACT,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,QAAC,GAAG,EAAC,GAAG,aACjC,KAAC,GAAG,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,YAAY,YAChC,MAAM,GACL,EACN,KAAC,GAAG,IAAC,EAAE,EAAC,GAAG,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,OAAO,EAAC,WAAW,YAC3D,IAAI,GACH,IACD,EACR,YAAY,IAAI,CACb,KAAC,MAAM,IACH,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,IAAI,EAAE,YAAY,CAAC,IAAI,IAAI,QAAQ,EACnC,OAAO,EAAC,SAAS,GACnB,CACL,IACI,CACZ,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAiCvC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,GAAG,QAAQ,EAAmB;IACtG,OAAO,CACH,MAAC,MAAM,IACH,KAAK,EAAC,QAAQ,EACd,MAAM,qBACI,aAAa,EACvB,KAAK,EAAE;YACH,MAAM,EAAE,0BAA0B;YAClC,QAAQ,EAAE,OAAO;SACpB,aAEA,QAAQ,EACT,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,QAAC,GAAG,EAAC,GAAG,aACjC,KAAC,GAAG,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,YAAY,YAChC,MAAM,GACL,EACN,KAAC,GAAG,IAAC,EAAE,EAAC,GAAG,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,OAAO,EAAC,WAAW,YAC3D,IAAI,GACH,IACD,EACR,YAAY,IAAI,CACb,KAAC,MAAM,IACH,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,IAAI,EAAE,YAAY,CAAC,IAAI,IAAI,QAAQ,EACnC,OAAO,EAAC,SAAS,GACnB,CACL,IACI,CACZ,CAAC;AACN,CAAC"}

package/dist/components/EmptyState/EmptyStateExample.d.ts

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

package/dist/components/EmptyState/EmptyStateExample.js

@@ -2,11 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ExamplePlaceholder } from '../ExamplePlaceholder';
 export const EmptyStateExample = ({ action }) => ({
     containerStyle: { width: '100%' },
-    render: ({ props: { children, ...props }, context, Component }) => (_jsx(Component, { ...props, children: context?.preset?.label === 'With Image' ? (_jsx(ExamplePlaceholder, { style: {
-                height: '200px',
-                width: '60%',
-                minWidth: '250px',
-            } })) : (children) })),
+    render: ({ props: { children, ...props }, Component }) => _jsx(Component, { ...props, children: children }),
     presets: [
         {
             label: 'With CallToAction',
@@ -15,10 +11,19 @@ export const EmptyStateExample = ({ action }) => ({
                     label: 'Add payment method',
                     onClick: () => action('Add payment method clicked!'),
                 },
+                children: undefined,
             },
         },
         {
-            label: 'With Image',
+            label: 'With Custom Content',
+            propState: {
+                callToAction: undefined,
+                children: (_jsx(ExamplePlaceholder, { style: {
+                        height: '200px',
+                        width: '60%',
+                        minWidth: '250px',
+                    } })),
+            },
         },
     ],
 });

package/dist/components/EmptyState/EmptyStateExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateExample.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyStateExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAKrE,MAAM,CAAC,MAAM,iBAAiB,GAAwC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACnF,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC/D,KAAC,SAAS,OAAK,KAAK,YACf,OAAO,EAAE,MAAM,EAAE,KAAK,KAAK,YAAY,CAAC,CAAC,CAAC,CACvC,KAAC,kBAAkB,IACf,KAAK,EAAE;gBACH,MAAM,EAAE,OAAO;gBACf,KAAK,EAAE,KAAK;gBACZ,QAAQ,EAAE,OAAO;aACpB,GACH,CACL,CAAC,CAAC,CAAC,CACA,QAAQ,CACX,GACO,CACf;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,YAAY,EAAE;oBACV,KAAK,EAAE,oBAAoB;oBAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,6BAA6B,CAAC;iBACvD;aACJ;SACJ;QACD;YACI,KAAK,EAAE,YAAY;SACtB;KACJ;CACJ,CAAC,CAAC"}
+{"version":3,"file":"EmptyStateExample.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyStateExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,iBAAiB,GAAwC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACnF,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,YAAG,QAAQ,GAAa;IACtG,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,YAAY,EAAE;oBACV,KAAK,EAAE,oBAAoB;oBAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,6BAA6B,CAAC;iBACvD;gBACD,QAAQ,EAAE,SAAS;aACtB;SACJ;QACD;YACI,KAAK,EAAE,qBAAqB;YAC5B,SAAS,EAAE;gBACP,YAAY,EAAE,SAAS;gBACvB,QAAQ,EAAE,CACN,KAAC,kBAAkB,IACf,KAAK,EAAE;wBACH,MAAM,EAAE,OAAO;wBACf,KAAK,EAAE,KAAK;wBACZ,QAAQ,EAAE,OAAO;qBACpB,GACH,CACL;aACJ;SACJ;KACJ;CACJ,CAAC,CAAC"}

package/dist/components/ExamplePlaceholder/ExamplePlaceholder.d.ts

@@ -1,17 +1,36 @@
-import { ElementProps } from '../../index.js';
+import { ElementProps } from '-/types/common';
+export type ExamplePlaceholderProps = {
+    /**
+     * Whether to hide the size text.
+     *
+     * @default false
+     */
+    hideSize?: boolean;
+    /**
+     * The height of the placeholder.
+     *
+     * @default 100
+     * @type string
+     */
+    height?: number | string;
+    /**
+     * The width of the placeholder.
+     *
+     * @default 100%
+     * @type string
+     */
+    width?: number | string;
+    /**
+     * The direction of the placeholder.
+     *
+     * @default 'row'
+     */
+    direction?: 'column' | 'row';
+};
 /**
  * A utility component that serves as a placeholder for examples.
  *
  * @name ExamplePlaceholder
  * @phase Utility
  */
-declare function ExamplePlaceholder({ hideSize, height, width, direction, ...props }: ElementProps<{
-    hideSize?: boolean;
-    height?: number | string;
-    width?: number | string;
-    direction?: 'column' | 'row';
-}, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace ExamplePlaceholder {
-    var bspkName: string;
-}
-export { ExamplePlaceholder };
+export declare function ExamplePlaceholder({ hideSize, height, width, direction, ...props }: ElementProps<ExamplePlaceholderProps, 'div'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ExamplePlaceholder/ExamplePlaceholder.js

@@ -8,15 +8,13 @@ const dimension = (value) => (typeof value === 'number' ? `${value}px` : `${valu
  * @name ExamplePlaceholder
  * @phase Utility
  */
-function ExamplePlaceholder({ hideSize = false, height = 100, width = '100%', direction = 'row', ...props }) {
+export function ExamplePlaceholder({ hideSize = false, height = 100, width = '100%', direction = 'row', ...props }) {
     const ref = useRef(null);
-    return (_jsx("div", { ...props, "data-example-placeholder": true, ref: ref, style: {
+    return (_jsx("div", { ...props, "data-bspk-utility": "example-placeholder", "data-example-placeholder": true, ref: ref, style: {
             ...props.style,
             width: dimension(width),
             height: dimension(height),
             flexDirection: direction,
         }, children: !hideSize && (_jsxs(_Fragment, { children: [_jsx(Txt, { variant: "labels-large", children: dimension(width) }), _jsx(Txt, { children: "\u00D7" }), _jsx(Txt, { variant: "labels-large", children: dimension(height) })] })) }));
 }
-ExamplePlaceholder.bspkName = 'ExamplePlaceholder';
-export { ExamplePlaceholder };
 //# sourceMappingURL=ExamplePlaceholder.js.map

package/dist/components/ExamplePlaceholder/ExamplePlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExamplePlaceholder.js","sourceRoot":"","sources":["../../../src/components/ExamplePlaceholder/ExamplePlaceholder.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvC,MAAM,SAAS,GAAG,CAAC,KAAsB,EAAE,EAAE,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;AAEtG;;;;;GAKG;AACH,SAAS,kBAAkB,CAAC,EACxB,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,GAAG,EACZ,KAAK,GAAG,MAAM,EACd,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EASX;IACG,MAAM,GAAG,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEhD,OAAO,CACH,iBACQ,KAAK,oCAET,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACH,GAAG,KAAK,CAAC,KAAK;YACd,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC;YACvB,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC;YACzB,aAAa,EAAE,SAAS;SAC3B,YAEA,CAAC,QAAQ,IAAI,CACV,8BACI,KAAC,GAAG,IAAC,OAAO,EAAC,cAAc,YAAE,SAAS,CAAC,KAAK,CAAC,GAAO,EACpD,KAAC,GAAG,yBAAc,EAClB,KAAC,GAAG,IAAC,OAAO,EAAC,cAAc,YAAE,SAAS,CAAC,MAAM,CAAC,GAAO,IACtD,CACN,GACC,CACT,CAAC;AACN,CAAC;AAED,kBAAkB,CAAC,QAAQ,GAAG,oBAAoB,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"ExamplePlaceholder.js","sourceRoot":"","sources":["../../../src/components/ExamplePlaceholder/ExamplePlaceholder.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,MAAM,SAAS,GAAG,CAAC,KAAsB,EAAE,EAAE,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;AA+BtG;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAC/B,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,GAAG,EACZ,KAAK,GAAG,MAAM,EACd,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACmC;IAC3C,MAAM,GAAG,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEhD,OAAO,CACH,iBACQ,KAAK,uBACS,qBAAqB,oCAEvC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACH,GAAG,KAAK,CAAC,KAAK;YACd,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC;YACvB,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC;YACzB,aAAa,EAAE,SAAS;SAC3B,YAEA,CAAC,QAAQ,IAAI,CACV,8BACI,KAAC,GAAG,IAAC,OAAO,EAAC,cAAc,YAAE,SAAS,CAAC,KAAK,CAAC,GAAO,EACpD,KAAC,GAAG,yBAAc,EAClB,KAAC,GAAG,IAAC,OAAO,EAAC,cAAc,YAAE,SAAS,CAAC,MAAM,CAAC,GAAO,IACtD,CACN,GACC,CACT,CAAC;AACN,CAAC"}

package/dist/components/Fab/Fab.d.ts

@@ -1,9 +1,9 @@
-import { ElementType } from 'react';
-import { ElementProps } from '../../index.js';
-import { ButtonProps } from '../Button';
+import { AriaAttributes, ElementType } from 'react';
+import { ButtonProps } from '-/components/Button';
+import { ElementProps } from '-/types/common';
 import './fab.scss';
 export type FabVariant = 'neutral' | 'primary' | 'secondary';
-export type FabProps<As extends ElementType = 'button'> = Pick<ButtonProps<As>, 'as' | 'icon' | 'onClick' | 'showLabel' | 'toolTip'> & Required<Pick<ButtonProps<As>, 'label'>> & {
+export type FabProps<As extends ElementType = 'button'> = Pick<ButtonProps<As>, 'as' | 'icon' | 'iconOnly' | 'onClick' | 'toolTip'> & Required<Pick<ButtonProps<As>, 'label'>> & {
     /**
      * The size of the button.
      *
@@ -42,11 +42,7 @@ export type FabProps<As extends ElementType = 'button'> = Pick<ButtonProps<As>,
  *     }
  *
  * @name Fab
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Fab<As extends ElementType = 'button'>({ size, variant, showLabel: showLabelProp, as, placement, container, label, icon, toolTip, ...otherProps }: ElementProps<FabProps<As>, As>): import("react/jsx-runtime").JSX.Element;
-declare namespace Fab {
-    var bspkName: string;
-}
-export { Fab };
+export declare function Fab<As extends ElementType = 'button'>(props: AriaAttributes & ElementProps<FabProps<As>, As>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Fab/Fab.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement } from 'react';
 import { Tooltip } from '../Tooltip';
-import { isValidIcon } from '../../utils/children';
-import { useErrorLogger } from '../../utils/errors';
 import './fab.css.js';
 /**
  * A button that highlights a primary action that is elevated above the body content of a page; normally fixed to the
@@ -16,17 +15,24 @@ import './fab.css.js';
  *     }
  *
  * @name Fab
- * @phase DesignReview
+ * @phase UXReview
  */
-function Fab({ size = 'small', variant = 'primary', showLabel: showLabelProp = true, as, placement = 'bottom-right', container = 'local', label, icon, toolTip, ...otherProps }) {
-    // ignore showLabel=false if there is no icon
-    const hideLabel = showLabelProp === false && icon;
-    const { logError } = useErrorLogger();
-    logError(!!icon && !isValidIcon(icon), 'Button - The icon prop must be a valid icon element.');
-    const As = as || 'button';
-    const button = (_jsxs(As, { ...otherProps, "aria-label": label, "data-bspk": "fab", "data-container": container, "data-placement": placement, "data-round": hideLabel || undefined, "data-size": size, "data-variant": variant, children: [!!icon && _jsx("span", { "data-fab-icon": true, children: icon }), !hideLabel && _jsx("span", { "data-fab-label": true, children: label })] }));
-    return toolTip || hideLabel ? (_jsx(Tooltip, { label: toolTip || label, placement: "top", children: button })) : (button);
+export function Fab(props) {
+    const { size = 'small', variant = 'primary', iconOnly: iconOnlyProp = false, as: As = 'button', placement = 'bottom-right', container = 'local', label, icon, toolTip, ...otherProps } = props;
+    // ignore iconOnly=true if there is no icon
+    const iconOnly = iconOnlyProp === true && !!icon;
+    const button = (triggerProps) => (_jsxs(As, { ...otherProps, "aria-describedby": triggerProps['aria-describedby'] || otherProps['aria-describedby'], "aria-label": label, "data-bspk": "fab", "data-container": container, "data-placement": placement, "data-round": iconOnly || undefined, "data-size": size, "data-variant": variant, onFocus: (e) => {
+            triggerProps.onFocus?.();
+            otherProps.onFocus?.(e);
+        }, onMouseLeave: (e) => {
+            triggerProps.onMouseLeave?.();
+            otherProps.onMouseLeave?.(e);
+        }, onMouseOver: (e) => {
+            triggerProps.onMouseOver?.();
+            otherProps.onMouseOver?.(e);
+        }, children: [!!icon && isValidElement(icon) && (_jsx("span", { "aria-hidden": true, "data-fab-icon": true, children: icon })), !iconOnly && _jsx("span", { "data-fab-label": true, children: label })] }));
+    if (toolTip || iconOnly)
+        return (_jsx(Tooltip, { label: toolTip || label, placement: "top", children: button }));
+    return button({});
 }
-Fab.bspkName = 'Fab';
-export { Fab };
 //# sourceMappingURL=Fab.js.map

package/dist/components/Fab/Fab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fab.js","sourceRoot":"","sources":["../../../src/components/Fab/Fab.tsx"],"names":[],"mappings":";AAIA,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,YAAY,CAAC;AAmCpB;;;;;;;;;;;;;;GAcG;AACH,SAAS,GAAG,CAAoC,EAC5C,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,SAAS,EACnB,SAAS,EAAE,aAAa,GAAG,IAAI,EAC/B,EAAE,EACF,SAAS,GAAG,cAAc,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,EACL,IAAI,EACJ,OAAO,EACP,GAAG,UAAU,EACgB;IAC7B,6CAA6C;IAC7C,MAAM,SAAS,GAAG,aAAa,KAAK,KAAK,IAAI,IAAI,CAAC;IAElD,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,sDAAsD,CAAC,CAAC;IAE/F,MAAM,EAAE,GAAgB,EAAE,IAAI,QAAQ,CAAC;IAEvC,MAAM,MAAM,GAAG,CACX,MAAC,EAAE,OACK,UAAU,gBACF,KAAK,eACP,KAAK,oBACC,SAAS,oBACT,SAAS,gBACb,SAAS,IAAI,SAAS,eACvB,IAAI,kBACD,OAAO,aAEpB,CAAC,CAAC,IAAI,IAAI,gDAAqB,IAAI,GAAQ,EAC3C,CAAC,SAAS,IAAI,iDAAsB,KAAK,GAAQ,IACjD,CACR,CAAC;IAEF,OAAO,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAC,KAAK,YAC5C,MAAM,GACD,CACb,CAAC,CAAC,CAAC,CACA,MAAM,CACT,CAAC;AACN,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Fab.js","sourceRoot":"","sources":["../../../src/components/Fab/Fab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA+B,cAAc,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AAGpE,OAAO,YAAY,CAAC;AAmCpB;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,GAAG,CAAoC,KAAsD;IACzG,MAAM,EACF,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,SAAS,EACnB,QAAQ,EAAE,YAAY,GAAG,KAAK,EAC9B,EAAE,EAAE,EAAE,GAAG,QAAQ,EACjB,SAAS,GAAG,cAAc,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,EACL,IAAI,EACJ,OAAO,EACP,GAAG,UAAU,EAChB,GAAG,KAAK,CAAC;IAEV,2CAA2C;IAC3C,MAAM,QAAQ,GAAG,YAAY,KAAK,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC;IAEjD,MAAM,MAAM,GAAG,CAAC,YAAiC,EAAE,EAAE,CAAC,CAClD,MAAC,EAAE,OACK,UAAU,sBACI,YAAY,CAAC,kBAAkB,CAAC,IAAI,UAAU,CAAC,kBAAkB,CAAC,gBACxE,KAAK,eACP,KAAK,oBACC,SAAS,oBACT,SAAS,gBACb,QAAQ,IAAI,SAAS,eACtB,IAAI,kBACD,OAAO,EACrB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACX,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC;YACzB,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QAC5B,CAAC,EACD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC;YAC9B,UAAU,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC,EACD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC;YAC7B,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;QAChC,CAAC,aAEA,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAC/B,8BAAmB,IAAI,mCAClB,IAAI,GACF,CACV,EACA,CAAC,QAAQ,IAAI,iDAAsB,KAAK,GAAQ,IAChD,CACR,CAAC;IAEF,IAAI,OAAO,IAAI,QAAQ;QACnB,OAAO,CACH,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAC,KAAK,YAC5C,MAAM,GACD,CACb,CAAC;IAEN,OAAO,MAAM,CAAC,EAAE,CAAC,CAAC;AACtB,CAAC"}

package/dist/components/Fab/FabExample.d.ts

@@ -1,2 +1,2 @@
-import { ComponentExample } from '../../utils/demo';
+import { ComponentExample } from '-/utils/demo';
 export declare const FabExample: ComponentExample;

package/dist/components/Fab/fab.css

@@ -85,7 +85,7 @@
   outline: solid 2px var(--stroke-neutral-focus);
 }
 [data-bspk=fab][data-round] {
-  border-radius: var(--radius-circular);
+  border-radius: var(--radius-full);
   aspect-ratio: 1/1;
   padding: 0;
 }

package/dist/components/Fab/fab.css.js

@@ -88,7 +88,7 @@ style.appendChild(document.createTextNode(`[data-bspk=fab] {
   outline: solid 2px var(--stroke-neutral-focus);
 }
 [data-bspk=fab][data-round] {
-  border-radius: var(--radius-circular);
+  border-radius: var(--radius-full);
   aspect-ratio: 1/1;
   padding: 0;
 }
@@ -96,4 +96,3 @@ style.appendChild(document.createTextNode(`[data-bspk=fab] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/FileUpload/FileUpload.d.ts

@@ -0,0 +1,87 @@
+import { FileUploadItemProps } from '-/components/FileUploadItem';
+import { FileEntry, MimeType } from '-/utils/fileUploads';
+import './file-upload.scss';
+export type FileEntryUpload = FileEntry & {
+    file: File;
+};
+export type FileUploadProps = Pick<FileUploadItemProps, 'cancelButtonLabel' | 'onCancel'> & {
+    /**
+     * Whether to enable drag and drop functionality
+     *
+     * @default false
+     */
+    dragAndDrop?: boolean;
+    /**
+     * The subtitle for the upload area
+     *
+     * It is recommended to include the accepted file types and maximum file size in the subtitle.
+     */
+    uploadSubtitle?: string;
+    /**
+     * Whether to allow multiple file uploads
+     *
+     * @default false
+     */
+    multipleFiles?: boolean;
+    /**
+     * The accepted file types for upload, e.g. ['image/png', 'image/gif', 'image/svg+xml']
+     *
+     * If not provided, all file types are accepted.
+     *
+     * @type MimeType[]
+     */
+    acceptedFileTypes?: MimeType[];
+    /**
+     * The maximum file size allowed for upload in MB. If not provided, defaults to 2 MB.
+     *
+     * @default 2
+     */
+    maxFileSize?: number;
+    /**
+     * The files currently being uploaded. This is updated as files are being uploaded.
+     *
+     * If not provided, the component will not display any files upload items.
+     *
+     * @type FileEntry[]
+     */
+    files?: FileEntry[];
+    /**
+     * The function called when the upload starts
+     *
+     * @required
+     */
+    onUpload: (files: FileEntryUpload[]) => void;
+    /**
+     * The function called when an error occurs during upload
+     *
+     * @required
+     */
+    onError: (files: FileEntry[]) => void;
+};
+/**
+ * A widget that allows customers to upload and attach one or more files.
+ *
+ * @example
+ *     import { FileUpload } from '@bspk/ui/FileUpload';
+ *
+ *     function Example() {
+ *         const [files, setFiles] = useState([]);
+ *         return (
+ *             <FileUpload
+ *                 dragAndDrop
+ *                 multipleFiles
+ *                 acceptedFileTypes={['image/png', 'image/gif', 'image/svg+xml']}
+ *                 files={files}
+ *                 maxFileSize={5}
+ *                 onError={(errorFiles) => console.log('Upload error:', errorFiles)}
+ *                 onUpload={(uploadFiles) => setFiles(uploadFiles)}
+ *                 uploadSubtitle="SVG, PNG, JPG or GIF (max. 5MB)"
+ *             />
+ *         );
+ *     }
+ *
+ * @name FileUpload
+ * @phase UXReview
+ */
+export declare function FileUpload({ dragAndDrop, multipleFiles, uploadSubtitle, maxFileSize, acceptedFileTypes, files, onUpload, onError, onCancel, cancelButtonLabel, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/FileUpload/FileUpload.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SvgCloudUpload } from '@bspk/icons/CloudUpload';
+import { useRef, useState, useEffect } from 'react';
+import { Button } from '../Button';
+import { FileUploadItem } from '../FileUploadItem';
+import { InlineAlert } from '../InlineAlert';
+import { Txt } from '../Txt';
+import { DEFAULT_ERROR_MESSAGE } from '../../utils/fileUploads';
+import { randomString } from '../../utils/random';
+import './file-upload.css.js';
+const MB = 1048576;
+/**
+ * A widget that allows customers to upload and attach one or more files.
+ *
+ * @example
+ *     import { FileUpload } from '@bspk/ui/FileUpload';
+ *
+ *     function Example() {
+ *         const [files, setFiles] = useState([]);
+ *         return (
+ *             <FileUpload
+ *                 dragAndDrop
+ *                 multipleFiles
+ *                 acceptedFileTypes={['image/png', 'image/gif', 'image/svg+xml']}
+ *                 files={files}
+ *                 maxFileSize={5}
+ *                 onError={(errorFiles) => console.log('Upload error:', errorFiles)}
+ *                 onUpload={(uploadFiles) => setFiles(uploadFiles)}
+ *                 uploadSubtitle="SVG, PNG, JPG or GIF (max. 5MB)"
+ *             />
+ *         );
+ *     }
+ *
+ * @name FileUpload
+ * @phase UXReview
+ */
+export function FileUpload({ dragAndDrop = false, multipleFiles = false, uploadSubtitle, maxFileSize = 2, acceptedFileTypes = [], files = [], onUpload, onError, onCancel, cancelButtonLabel = 'Cancel', }) {
+    const fileInputRef = useRef(null);
+    const maxFileSizeMB = maxFileSize * MB;
+    const [fileEntries, setFileEntries] = useState(files || []);
+    useMergedFileEntries({ fileEntries, files, setFileEntries });
+    const handleBrowseClick = () => fileInputRef.current?.click();
+    const updateFiles = (nextFiles) => {
+        const nextFileEntries = nextFiles.map((file) => {
+            let status = 'idle';
+            let errorMessage = '';
+            if (Array.isArray(acceptedFileTypes) &&
+                acceptedFileTypes.length > 0 &&
+                !acceptedFileTypes.includes(file.type)) {
+                status = 'error';
+                errorMessage = `File type not accepted: ${file.name}`;
+            }
+            if (file.size > maxFileSizeMB) {
+                status = 'error';
+                errorMessage = `File too large. Please upload a smaller file: ${file.name}`;
+            }
+            return {
+                id: randomString(8),
+                fileName: file.name,
+                status,
+                fileSize: file.size / MB,
+                progress: 0,
+                errorMessage,
+                file,
+            };
+        });
+        setFileEntries((prev) => [
+            ...prev,
+            ...nextFileEntries.map((entry) => ({
+                ...entry,
+                file: undefined, // Remove the file object to avoid saving large files in state
+            })),
+        ]);
+        const fileEntriesWithError = nextFileEntries.filter((entry) => entry.status === 'error');
+        if (fileEntriesWithError.length > 0)
+            onError(fileEntriesWithError);
+        const fileEntriesToUpload = nextFileEntries.filter((entry) => entry.status === 'idle');
+        if (fileEntriesToUpload.length > 0)
+            onUpload(fileEntriesToUpload);
+    };
+    // Automatically start upload when a file is selected
+    const handleFileChange = (e) => {
+        e.preventDefault();
+        updateFiles(Array.from(e.target.files ?? []));
+    };
+    // Add state for drag-over visual feedback
+    const [isDragOver, setIsDragOver] = useState(false);
+    const handleDrop = (e) => {
+        e.preventDefault();
+        setIsDragOver(false);
+        const droppedFiles = Array.from(e.dataTransfer.files ?? []);
+        updateFiles(droppedFiles);
+    };
+    const handleDrag = (action) => (e) => {
+        e.preventDefault();
+        setIsDragOver(action === 'over');
+    };
+    let title = 'Drag and Drop';
+    if (!dragAndDrop)
+        title = multipleFiles ? 'Upload Files' : 'Upload a File';
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: isDragOver ? 'drag-over' : '', "data-bspk": "file-upload", onDragLeave: dragAndDrop ? handleDrag('leave') : undefined, onDragOver: dragAndDrop ? handleDrag('over') : undefined, onDrop: dragAndDrop ? handleDrop : undefined, children: [_jsx(SvgCloudUpload, {}), _jsx(Txt, { variant: "body-large", children: title }), _jsx(Txt, { variant: "body-small", children: uploadSubtitle }), _jsx("input", { accept: acceptedFileTypes?.join(', '), hidden: true, id: "temp-id", multiple: multipleFiles, onChange: handleFileChange, ref: fileInputRef, type: "file" }), _jsx(Button, { label: "Browse", onClick: handleBrowseClick }), files.length === 1 && files[0].status === 'error' && (_jsx(InlineAlert, { variant: "error", children: files[0].errorMessage || DEFAULT_ERROR_MESSAGE }))] }), _jsx("div", { "data-bspk-owner": "file-upload", "data-file-entries": true, children: fileEntries
+                    .sort(
+                // files with errors last
+                (a, b) => (a.status === 'error' ? 1 : -1) + (b.status === 'error' ? -1 : 1) ||
+                    // sort by file name
+                    a.fileName.localeCompare(b.fileName) ||
+                    0)
+                    .map(({ errorMessage, status, fileName, fileSize, progress, id }) => (_jsx(FileUploadItem, { cancelButtonLabel: cancelButtonLabel, errorMessage: errorMessage, fileName: fileName, fileSize: fileSize, id: id, onCancel: () => onCancel({ fileName }), progress: progress, status: status }, id))) })] }));
+}
+function useMergedFileEntries({ files, setFileEntries, fileEntries, }) {
+    useEffect(() => {
+        // merge new files with existing ones
+        const nextFileEntries = [...fileEntries];
+        // first check if there are any changes to existing file entries
+        files.forEach((file) => {
+            const existingEntryIndex = fileEntries.findIndex((entry) => entry.id === file.id);
+            if (existingEntryIndex !== -1) {
+                const updated = fileEntries[existingEntryIndex].status !== file.status ||
+                    fileEntries[existingEntryIndex].progress !== file.progress ||
+                    fileEntries[existingEntryIndex].errorMessage !== file.errorMessage;
+                if (updated)
+                    nextFileEntries[existingEntryIndex] = {
+                        ...fileEntries[existingEntryIndex],
+                        status: file.status,
+                        progress: file.progress || 0,
+                        errorMessage: file.errorMessage,
+                        updated,
+                    };
+                return;
+            }
+            nextFileEntries.push({
+                ...file,
+                updated: true,
+            });
+        });
+        if (nextFileEntries.some((entry) => entry.updated))
+            setFileEntries(nextFileEntries);
+    }, [fileEntries, files, setFileEntries]);
+}
+//# sourceMappingURL=FileUpload.js.map

package/dist/components/FileUpload/FileUpload.js.map

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

package/dist/components/FileUpload/FileUploadExample.d.ts

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

package/dist/components/FileUpload/FileUploadExample.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { FileUpload } from '.';
+import { randomNumber } from '../../utils/random';
+export const FileUploadExample = ({ action }) => ({
+    render: ({ props, preset }) => {
+        return _jsx(FileUploadExampleMockUpload, { ...props, action: action }, preset?.label);
+    },
+    presets: [
+        {
+            label: 'multiple files',
+            propState: {
+                dragAndDrop: false,
+                multipleFiles: true,
+            },
+        },
+        {
+            label: 'Drag and Drop Multiple Files',
+            propState: {
+                dragAndDrop: true,
+                multipleFiles: true,
+            },
+        },
+    ],
+    variants: false,
+});
+function FileUploadExampleMockUpload({ action, files: presetFiles, ...props }) {
+    const [files, setFiles] = useState([]);
+    // Here we
+    const handleUpload = (nextFiles) => {
+        setFiles(nextFiles);
+        // mock the upload action by incrementally updating the progress and eventually setting the status to 'complete'
+        nextFiles.forEach((file, index) => {
+            setTimeout(() => {
+                const updatedFile = {
+                    ...file,
+                    status: 'uploading',
+                    progress: 0,
+                };
+                setFiles((prev) => prev.map((f) => (f.id === file.id ? updatedFile : f)));
+                // Simulate progress
+                const interval = setInterval(() => {
+                    updatedFile.progress = Math.min((updatedFile.progress || 0) + randomNumber(10, 15), 100);
+                    setFiles((prev) => prev.map((f) => (f.id === file.id ? { ...updatedFile } : f)));
+                    if (updatedFile.progress === 100) {
+                        clearInterval(interval);
+                        updatedFile.status = 'complete';
+                        setFiles((prev) => prev.map((f) => (f.id === file.id ? { ...updatedFile } : f)));
+                        action(`File upload complete: ${file.fileName}`);
+                    }
+                }, 350);
+            }, index * 400); // stagger uploads
+        });
+        action(`Files uploading: ${nextFiles.map((f) => f.fileName).join(', ')}`);
+    };
+    useEffect(() => {
+        if (Array.isArray(presetFiles) && presetFiles.length > 0) {
+            handleUpload(presetFiles);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [presetFiles]);
+    return (_jsx(FileUpload, { ...props, acceptedFileTypes: ['image/png', 'image/gif', 'image/svg+xml', 'image/jpeg'], cancelButtonLabel: "Cancel", files: files.length > 0 ? files : undefined, maxFileSize: 1, onCancel: (file) => action(`onCancel called for: ${file.fileName}`), onError: (filesWithErrors) => {
+            action(`Error occurred during file upload: ${filesWithErrors.map((f) => f.fileName).join(', ')}`);
+        }, onUpload: handleUpload, uploadSubtitle: "SVG, PNG, JPG or GIF (max. 1MB)" }));
+}
+//# sourceMappingURL=FileUploadExample.js.map

package/dist/components/FileUpload/FileUploadExample.js.map

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

package/dist/components/FileUpload/file-upload.css

@@ -0,0 +1,20 @@
+[data-bspk=file-upload] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-sizing-04);
+  width: 100%;
+  padding: var(--spacing-sizing-04);
+  border: 1px dashed var(--stroke-neutral-base);
+  border-radius: var(--spacing-sizing-02);
+  background-color: var(--surface-neutral-t2-lowest);
+}
+
+[data-bspk-owner=file-upload][data-file-entries] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */