@bspk/ui 1.2.0 → 1.3.0

package/dist/components/Snackbar/Snackbar.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './snackbar.css.js';
+import { Button } from '../Button';
+import { Txt } from '../Txt';
+/**
+ * Snackbars are intended to provide feedback about an action without interrupting the customer experience. NOTE: While
+ * they can be imported and used directly, they are intended to be used via the SnackbarProvider and the
+ * useSnackbarContext hook.
+ *
+ * @example
+ *     import { Snackbar } from '@bspk/ui/Snackbar';
+ *
+ *     function Example() {
+ *         return <Snackbar text="Something happened!" />;
+ *     }
+ *
+ * @name Snackbar
+ * @phase Utility
+ */
+export function Snackbar({ text, button, onClose }) {
+    return (_jsxs("span", { "data-bspk": "snackbar", role: "alert", children: [_jsx(Txt, { variant: "body-small", children: text }), button && (_jsx(Button, { label: button.label, onClick: button.onClick === 'close' ? onClose : button.onClick, variant: "tertiary", children: button.label }))] }));
+}
+//# sourceMappingURL=Snackbar.js.map

package/dist/components/Snackbar/Snackbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAYvC;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAiB;IAC7D,OAAO,CACH,6BAAgB,UAAU,EAAC,IAAI,EAAC,OAAO,aACnC,KAAC,GAAG,IAAC,OAAO,EAAC,YAAY,YAAE,IAAI,GAAO,EAErC,MAAM,IAAI,CACP,KAAC,MAAM,IACH,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,MAAM,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAC9D,OAAO,EAAC,UAAU,YAEjB,MAAM,CAAC,KAAK,GACR,CACZ,IACE,CACV,CAAC;AACN,CAAC"}

package/dist/components/Snackbar/SnackbarExample.d.ts

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

package/dist/components/Snackbar/SnackbarExample.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SnackbarExample = {
+    containerStyle: { width: '100%' },
+    defaultState: {},
+    disableProps: [],
+    presets: [],
+    render: ({ props, Component }) => _jsx(Component, { ...props }),
+    sections: [],
+    variants: {},
+};
+//# sourceMappingURL=SnackbarExample.js.map

package/dist/components/Snackbar/SnackbarExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarExample.js","sourceRoot":"","sources":["../../../src/components/Snackbar/SnackbarExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;CACf,CAAC"}

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

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

package/dist/components/Snackbar/index.js

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

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

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

package/dist/components/Snackbar/snackbar.css

@@ -0,0 +1,19 @@
+[data-bspk=snackbar] {
+  pointer-events: auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);
+  gap: var(--spacing-sizing-03);
+  width: 600px;
+  max-width: 100%;
+  box-shadow: 0 0 1px 0 var(--shadow-variant-05), 0 0 12px 0 var(--shadow-variant-03);
+  background-color: var(--surface-neutral-inverse);
+  color: var(--foreground-neutral-on-inverse-surface);
+  height: var(--spacing-sizing-14);
+}
+[data-bspk=snackbar] [data-bspk=button][data-variant=tertiary] {
+  color: inherit;
+}

package/dist/components/Snackbar/snackbar.css.js

@@ -0,0 +1,24 @@
+/** * 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=snackbar] {
+  pointer-events: auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);
+  gap: var(--spacing-sizing-03);
+  width: 600px;
+  max-width: 100%;
+  box-shadow: 0 0 1px 0 var(--shadow-variant-05), 0 0 12px 0 var(--shadow-variant-03);
+  background-color: var(--surface-neutral-inverse);
+  color: var(--foreground-neutral-on-inverse-surface);
+  height: var(--spacing-sizing-14);
+}
+[data-bspk=snackbar] [data-bspk=button][data-variant=tertiary] {
+  color: inherit;
+}
+`));
+document.head.appendChild(style);

package/dist/components/SnackbarProvider/SnackbarProvider.d.ts

@@ -0,0 +1,90 @@
+import './snackbar-provider.scss';
+import { ReactNode } from 'react';
+export type SnackbarProviderProps = {
+    /** Content to be rendered inside the provider */
+    children: ReactNode;
+    /**
+     * Default time in milliseconds after which the snackbar will auto dismiss. If a Snackbar is sent with a timeout
+     * property that value will be used instead. If you want to disable the timeout for a specific snackbar, set its
+     * timeout to null.
+     */
+    timeout?: number | null;
+    /**
+     * Maximum number of snackbars to show at once
+     *
+     * @default 10
+     */
+    countLimit?: number;
+};
+/**
+ * Snackbar context provider. Snackbars are intended to provide feedback about an action without interrupting the
+ * customer experience.
+ *
+ * @example
+ *     import { SnackbarProvider } from '@bspk/ui/SnackbarProvider';
+ *
+ *     // In your application root
+ *     function Example() {
+ *         return (
+ *             <SnackbarProvider timeout={5000} countLimit={1}>
+ *                 <App />
+ *             </SnackbarProvider>
+ *         );
+ *     }
+ *
+ *     // In a descendent component
+ *     import { useSnackbarContext } from '@bspk/ui/hooks/useSnackbarContext';
+ *
+ *     function ExampleComponent() {
+ *         // The useSnackbarContext provides access to the sendSnackbar function
+ *         const { sendSnackbar } = useSnackbarContext();
+ *
+ *         return (
+ *             <button
+ *                 onClick={() =>
+ *                     sendSnackbar({
+ *                         text: 'Example snackbar',
+ *                         button: { text: 'Dismiss', onClick: 'close' },
+ *                         timeout: 3000,
+ *                     })
+ *                 }
+ *             >
+ *                 Show snackbar
+ *             </button>
+ *         );
+ *     }
+ *
+ *     // You can also programatically dismiss a Snackbar by calling clearSnackbar with the Snackbar's id.
+ *     import { useSnackbarContext } from '@bspk/ui/hooks/useSnackbarContext';
+ *     import { useState } from 'react';
+ *
+ *     function ExampleClearComponent() {
+ *         const [snackbarId, setSnackbarId] = useState<string | null>(null);
+ *
+ *         const { sendSnackbar, clearSnackbar } = useSnackbarContext();
+ *
+ *         const sendAndStoreId = () => {
+ *             const id = sendSnackbar({
+ *                 text: 'Without a button or timeout I can only be closed programatically',
+ *             });
+ *             setSnackbarId(id);
+ *         };
+ *
+ *         const clear = () => {
+ *             if (snackbarId) {
+ *                 clearSnackbar(snackbarId);
+ *                 setSnackbarId(null);
+ *             }
+ *         };
+ *
+ *         return snackbarId ? (
+ *             <button onClick={clear}>Clear snackbar</button>
+ *         ) : (
+ *             <button onClick={sendAndStoreId}>Send snackbar</button>
+ *         );
+ *     }
+ *
+ * @name SnackbarProvider
+ * @phase UXReview
+ */
+export declare function SnackbarProvider({ children, timeout, countLimit }: SnackbarProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SnackbarProvider/SnackbarProvider.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './snackbar-provider.css.js';
+import { useState, useRef, useEffect } from 'react';
+import { Portal } from '../Portal';
+import { Snackbar } from '../Snackbar';
+import { randomString } from '../../utils/random';
+import { SnackbarContext } from '../../utils/snackbarContext';
+/**
+ * Snackbar context provider. Snackbars are intended to provide feedback about an action without interrupting the
+ * customer experience.
+ *
+ * @example
+ *     import { SnackbarProvider } from '@bspk/ui/SnackbarProvider';
+ *
+ *     // In your application root
+ *     function Example() {
+ *         return (
+ *             <SnackbarProvider timeout={5000} countLimit={1}>
+ *                 <App />
+ *             </SnackbarProvider>
+ *         );
+ *     }
+ *
+ *     // In a descendent component
+ *     import { useSnackbarContext } from '@bspk/ui/hooks/useSnackbarContext';
+ *
+ *     function ExampleComponent() {
+ *         // The useSnackbarContext provides access to the sendSnackbar function
+ *         const { sendSnackbar } = useSnackbarContext();
+ *
+ *         return (
+ *             <button
+ *                 onClick={() =>
+ *                     sendSnackbar({
+ *                         text: 'Example snackbar',
+ *                         button: { text: 'Dismiss', onClick: 'close' },
+ *                         timeout: 3000,
+ *                     })
+ *                 }
+ *             >
+ *                 Show snackbar
+ *             </button>
+ *         );
+ *     }
+ *
+ *     // You can also programatically dismiss a Snackbar by calling clearSnackbar with the Snackbar's id.
+ *     import { useSnackbarContext } from '@bspk/ui/hooks/useSnackbarContext';
+ *     import { useState } from 'react';
+ *
+ *     function ExampleClearComponent() {
+ *         const [snackbarId, setSnackbarId] = useState<string | null>(null);
+ *
+ *         const { sendSnackbar, clearSnackbar } = useSnackbarContext();
+ *
+ *         const sendAndStoreId = () => {
+ *             const id = sendSnackbar({
+ *                 text: 'Without a button or timeout I can only be closed programatically',
+ *             });
+ *             setSnackbarId(id);
+ *         };
+ *
+ *         const clear = () => {
+ *             if (snackbarId) {
+ *                 clearSnackbar(snackbarId);
+ *                 setSnackbarId(null);
+ *             }
+ *         };
+ *
+ *         return snackbarId ? (
+ *             <button onClick={clear}>Clear snackbar</button>
+ *         ) : (
+ *             <button onClick={sendAndStoreId}>Send snackbar</button>
+ *         );
+ *     }
+ *
+ * @name SnackbarProvider
+ * @phase UXReview
+ */
+export function SnackbarProvider({ children, timeout, countLimit = 10 }) {
+    const [snackbars, setSnackbars] = useState([]);
+    const timeouts = useRef(new Map());
+    const baseTimeout = timeout ?? 0;
+    const sendSnackbar = (data) => {
+        const id = randomString(8);
+        setSnackbars((prevState) => prevState.concat([{ id, ...data }]));
+        const nextTimeout = data.timeout ?? baseTimeout;
+        if (data.timeout !== null && nextTimeout) {
+            timeouts.current.set(id, setTimeout(() => {
+                clearSnackbar(id);
+                timeouts.current.delete(id);
+            }, data.timeout ?? baseTimeout));
+        }
+        return id;
+    };
+    const clearSnackbar = (id) => {
+        setSnackbars((prevState) => prevState.filter((snackbarData) => snackbarData.id !== id));
+    };
+    const clearAll = () => {
+        setSnackbars([]);
+    };
+    useEffect(() => {
+        return () => {
+            // eslint-disable-next-line react-hooks/exhaustive-deps -- we only want to run this on dismount
+            timeouts.current.forEach((timeoutToClear) => clearTimeout(timeoutToClear));
+        };
+    }, []);
+    const visibleSnackbars = countLimit ? snackbars.slice(0, countLimit) : snackbars;
+    return (_jsxs(SnackbarContext.Provider, { value: {
+            snackbars,
+            sendSnackbar,
+            clearSnackbar,
+            clearAll,
+        }, children: [visibleSnackbars.length > 0 && (_jsx(Portal, { children: _jsx("div", { "aria-live": "off", "data-bspk": "snackbar-provider", children: visibleSnackbars.map(({ button, text, id }) => (_jsx(Snackbar, { button: button, onClose: () => clearSnackbar(id), text: text }, id))) }) })), children] }));
+}
+//# sourceMappingURL=SnackbarProvider.js.map

package/dist/components/SnackbarProvider/SnackbarProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarProvider.js","sourceRoot":"","sources":["../../../src/components/SnackbarProvider/SnackbarProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAa,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAA+B,MAAM,yBAAyB,CAAC;AAmBvF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,GAAG,EAAE,EAAyB;IAC1F,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAiB,EAAE,CAAC,CAAC;IAC/D,MAAM,QAAQ,GAAG,MAAM,CAA8B,IAAI,GAAG,EAAE,CAAC,CAAC;IAEhE,MAAM,WAAW,GAAG,OAAO,IAAI,CAAC,CAAC;IAEjC,MAAM,YAAY,GAAG,CAAC,IAAmB,EAAU,EAAE;QACjD,MAAM,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;QAE3B,YAAY,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;QAEjE,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,IAAI,WAAW,CAAC;QAChD,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,WAAW,EAAE,CAAC;YACvC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAChB,EAAE,EACF,UAAU,CAAC,GAAG,EAAE;gBACZ,aAAa,CAAC,EAAE,CAAC,CAAC;gBAClB,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YAChC,CAAC,EAAE,IAAI,CAAC,OAAO,IAAI,WAAW,CAAC,CAClC,CAAC;QACN,CAAC;QAED,OAAO,EAAE,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,EAAU,EAAE,EAAE;QACjC,YAAY,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IAC5F,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,YAAY,CAAC,EAAE,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,OAAO,GAAG,EAAE;YACR,+FAA+F;YAC/F,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,cAAc,EAAE,EAAE,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC,CAAC;QAC/E,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAEjF,OAAO,CACH,MAAC,eAAe,CAAC,QAAQ,IACrB,KAAK,EAAE;YACH,SAAS;YACT,YAAY;YACZ,aAAa;YACb,QAAQ;SACX,aAEA,gBAAgB,CAAC,MAAM,GAAG,CAAC,IAAI,CAC5B,KAAC,MAAM,cACH,2BAAe,KAAK,eAAW,mBAAmB,YAC7C,gBAAgB,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAC5C,KAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,EAAW,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,IAAhD,EAAE,CAAkD,CACtF,CAAC,GACA,GACD,CACZ,EAEA,QAAQ,IACc,CAC9B,CAAC;AACN,CAAC"}

package/dist/components/SnackbarProvider/SnackbarProviderExample.d.ts

@@ -0,0 +1,4 @@
+import { SnackbarProviderProps } from './SnackbarProvider';
+import { ComponentExample } from '-/utils/demo';
+import './snackbar-provider-example.scss';
+export declare const SnackbarProviderExample: ComponentExample<SnackbarProviderProps>;

package/dist/components/SnackbarProvider/SnackbarProviderExample.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { SnackbarProvider } from './SnackbarProvider';
+import { Button } from '../Button';
+import { CheckboxGroup } from '../CheckboxGroup';
+import { NumberField } from '../NumberField';
+import { TextField } from '../TextField';
+import { Txt } from '../Txt';
+import { useSnackbarContext } from '../../hooks/useSnackbarContext';
+import './snackbar-provider-example.css.js';
+export const SnackbarProviderExample = {
+    containerStyle: { width: '100%' },
+    defaultState: {},
+    disableProps: [],
+    presets: [],
+    render: ({ props }) => (_jsx(SnackbarProvider, { countLimit: props.countLimit, timeout: props.timeout || 5000, children: _jsx(ExampleForm, {}) })),
+    sections: [],
+    variants: {},
+};
+function ExampleForm() {
+    const countRef = useRef(0);
+    const [snackbarText, setSnackbarText] = useState('Full send!');
+    const [options, setOptions] = useState(['enableTimeout']);
+    const [dismissButtonText, setDismissButtonText] = useState('Dismiss');
+    const [timeout, setTimeout] = useState(5000);
+    const { sendSnackbar } = useSnackbarContext();
+    const enableTimeout = options.includes('enableTimeout');
+    const enableDismiss = options.includes('dismissButton');
+    const enableCount = options.includes('showCount');
+    const onButtonClick = () => {
+        if (enableCount) {
+            countRef.current += 1;
+        }
+        sendSnackbar({
+            text: snackbarText + (enableCount ? ` (${countRef.current})` : ''),
+            timeout: enableTimeout ? timeout : null,
+            button: enableDismiss
+                ? {
+                    label: dismissButtonText,
+                    onClick: 'close',
+                }
+                : undefined,
+        });
+    };
+    return (_jsxs("div", { "data-snackbar-provider-example": "", children: [_jsx(TextField, { "aria-label": "Snackbar Text", controlId: "text", label: "Snackbar Text", name: "text", onChange: setSnackbarText, size: "small", value: snackbarText }), _jsx(CheckboxGroup, { "aria-label": "Example Checkbox Group", name: "example-checkbox-group", onChange: (nextValues) => {
+                    setOptions(nextValues);
+                }, options: [
+                    { label: 'Enable timeout', value: 'enableTimeout' },
+                    {
+                        label: 'Include dismiss button',
+                        value: 'dismissButton',
+                    },
+                    {
+                        label: 'Count sends (diagnostic)',
+                        value: 'showCount',
+                    },
+                ], values: options }), enableTimeout && (_jsx(NumberField, { "aria-label": "Timeout", controlId: "timeout", label: "Timeout (ms)", max: 60000, min: 0, name: "timeout", onChange: (val) => setTimeout(parseInt(`${val}`) || 0), size: "small", step: 1000, value: timeout })), enableDismiss && (_jsx(TextField, { "aria-label": "Dismiss button Text", controlId: "text", label: "Dismiss Button Text", name: "text", onChange: setDismissButtonText, size: "small", value: dismissButtonText })), !enableDismiss && !enableTimeout && (_jsx(Txt, { "data-warning": "", variant: "body-small", children: "Note: Without a timeout or dismiss button the snackbar can only be closed programatically using the useSnackbarContext hook." })), _jsx("div", { "data-button-wrapper": "", children: _jsx(Button, { label: "Send it!", onClick: onButtonClick, size: "medium", title: "Snackbar" }) })] }));
+}
+//# sourceMappingURL=SnackbarProviderExample.js.map

package/dist/components/SnackbarProvider/SnackbarProviderExample.js.map

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

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

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

package/dist/components/SnackbarProvider/index.js

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

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

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

package/dist/components/SnackbarProvider/snackbar-provider-example.css

@@ -0,0 +1,15 @@
+[data-snackbar-provider-example] {
+  display: flex;
+  gap: var(--spacing-sizing-03);
+  flex-direction: column;
+  width: 300px;
+  flex: 1;
+}
+[data-snackbar-provider-example] [data-warning] {
+  color: var(--status-error);
+}
+[data-snackbar-provider-example] [data-button-wrapper] {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--spacing-sizing-02);
+}

package/dist/components/SnackbarProvider/snackbar-provider-example.css.js

@@ -0,0 +1,20 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-snackbar-provider-example] {
+  display: flex;
+  gap: var(--spacing-sizing-03);
+  flex-direction: column;
+  width: 300px;
+  flex: 1;
+}
+[data-snackbar-provider-example] [data-warning] {
+  color: var(--status-error);
+}
+[data-snackbar-provider-example] [data-button-wrapper] {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--spacing-sizing-02);
+}
+`));
+document.head.appendChild(style);

package/dist/components/SnackbarProvider/snackbar-provider.css

@@ -0,0 +1,15 @@
+[data-bspk=snackbar-provider] {
+  position: fixed;
+  z-index: var(--z-index-dialog);
+  display: flex;
+  flex-direction: column-reverse;
+  max-height: 100%;
+  overflow: hidden;
+  inset: 0;
+  align-items: center;
+  gap: var(--spacing-sizing-02);
+  pointer-events: none;
+  padding: var(--spacing-sizing-02);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/SnackbarProvider/snackbar-provider.css.js

@@ -0,0 +1,20 @@
+/** * 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=snackbar-provider] {
+  position: fixed;
+  z-index: var(--z-index-dialog);
+  display: flex;
+  flex-direction: column-reverse;
+  max-height: 100%;
+  overflow: hidden;
+  inset: 0;
+  align-items: center;
+  gap: var(--spacing-sizing-02);
+  pointer-events: none;
+  padding: var(--spacing-sizing-02);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

package/dist/components/Switch/Switch.d.ts

@@ -1,6 +1,6 @@
+import './switch.scss';
 import { ChangeEvent } from 'react';
 import { CommonProps } from '-/types/common';
-import './switch.scss';
 export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'value'> & {
     /**
      * Marks the control as checked.

package/dist/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAwBvB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,QAAQ,EAAE,YAAY,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe;IACvG,MAAM,QAAQ,GAAG,QAAQ,IAAI,YAAY,CAAC;IAE1C,OAAO,CACH,6BAAgB,QAAQ,aACpB,mBACQ,KAAK,mBACM,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,IAAI,EAAC,UAAU,GACjB,EACF,qCAAoB,IACjB,CACV,CAAC;AACN,CAAC"}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AA0BvB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,QAAQ,EAAE,YAAY,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe;IACvG,MAAM,QAAQ,GAAG,QAAQ,IAAI,YAAY,CAAC;IAE1C,OAAO,CACH,6BAAgB,QAAQ,aACpB,mBACQ,KAAK,mBACM,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,IAAI,EAAC,UAAU,GACjB,EACF,qCAAoB,IACjB,CACV,CAAC;AACN,CAAC"}

package/dist/components/TabGroup/TabGroup.d.ts

@@ -1,6 +1,6 @@
+import './tab-group.scss';
 import { TabListProps, TabOption } from '-/components/TabList';
 import { ElementProps } from '-/types/common';
-import './tab-group.scss';
 export type TabGroupSize = 'large' | 'medium' | 'small';
 export type TabGroupProps = Omit<TabListProps<TabOption>, 'iconsOnly'> & {
     /**

package/dist/components/TabGroup/TabGroup.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { TabList } from '../TabList';
 import './tab-group.css.js';
+import { TabList } from '../TabList';
 /**
  * Navigation tool that organizes content across different screens and views.
  *

package/dist/components/TabGroup/TabGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabGroup.js","sourceRoot":"","sources":["../../../src/components/TabGroup/TabGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAA2B,MAAM,sBAAsB,CAAC;AAGxE,OAAO,kBAAkB,CAAC;AAc1B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,QAAQ,EAAE,WAAW,EACrB,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,KAAK,EACjB,GAAG,cAAc,EACe;IAChC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,mBAAK,CAAC;IAChE,OAAO,CACH,KAAC,OAAO,iBACM,WAAW,qBACJ,SAAS,IAAI,SAAS,EACvC,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,KACR,cAAc,GACpB,CACL,CAAC;AACN,CAAC"}
+{"version":3,"file":"TabGroup.js","sourceRoot":"","sources":["../../../src/components/TabGroup/TabGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAA2B,MAAM,sBAAsB,CAAC;AAexE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,QAAQ,EAAE,WAAW,EACrB,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,KAAK,EACjB,GAAG,cAAc,EACe;IAChC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,mBAAK,CAAC;IAChE,OAAO,CACH,KAAC,OAAO,iBACM,WAAW,qBACJ,SAAS,IAAI,SAAS,EACvC,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,KACR,cAAc,GACpB,CACL,CAAC;AACN,CAAC"}

package/dist/components/TabGroup/TabGroupExample.d.ts

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

package/dist/components/TabGroup/TabGroupExample.js

@@ -42,56 +42,61 @@ const OPTION_ICONS = [
         iconSelected: _jsx(SvgSquareFill, {}),
     },
 ];
+export const presets = [
+    {
+        label: 'With icons',
+        propState: {
+            value: '1',
+            options: PRESET_OPTIONS.map((option, index) => ({
+                ...option,
+                icon: OPTION_ICONS[index].icon,
+                iconSelected: OPTION_ICONS[index].iconSelected,
+            })),
+            label: 'Tabs with icons',
+        },
+    },
+    {
+        label: 'With badges',
+        propState: {
+            value: '1',
+            options: PRESET_OPTIONS.map((option, index) => ({
+                ...option,
+                badge: Math.round((index + 1) * 2.6),
+            })),
+            label: 'Tabs with badges',
+        },
+    },
+    {
+        label: 'With icons & badges',
+        propState: {
+            value: '1',
+            options: PRESET_OPTIONS.map((option, index) => ({
+                ...option,
+                icon: OPTION_ICONS[index].icon,
+                iconSelected: OPTION_ICONS[index].iconSelected,
+                badge: Math.round((index + 1) * 2.6),
+            })),
+            label: 'Tabs with icons & badges',
+        },
+    },
+    {
+        label: 'Long Text only',
+        propState: {
+            value: '1',
+            options: PRESET_OPTIONS.map((option) => ({
+                ...option,
+                label: `${option.label} with a very long label that never seems to end and goes on forever`,
+            })),
+            label: 'Tabs with long text',
+        },
+    },
+];
 export const TabGroupExample = {
     containerStyle: { width: '100%' },
     defaultState: {
         options: PRESET_OPTIONS,
     },
-    presets: [
-        {
-            label: 'With icons',
-            propState: {
-                value: '1',
-                options: PRESET_OPTIONS.map((option, index) => ({
-                    ...option,
-                    icon: OPTION_ICONS[index].icon,
-                    iconSelected: OPTION_ICONS[index].iconSelected,
-                })),
-            },
-        },
-        {
-            label: 'With badges',
-            propState: {
-                value: '1',
-                options: PRESET_OPTIONS.map((option, index) => ({
-                    ...option,
-                    badge: Math.round((index + 1) * 2.6),
-                })),
-            },
-        },
-        {
-            label: 'With icons & badges',
-            propState: {
-                value: '1',
-                options: PRESET_OPTIONS.map((option, index) => ({
-                    ...option,
-                    icon: OPTION_ICONS[index].icon,
-                    iconSelected: OPTION_ICONS[index].iconSelected,
-                    badge: Math.round((index + 1) * 2.6),
-                })),
-            },
-        },
-        {
-            label: 'Long Text only',
-            propState: {
-                value: '1',
-                options: PRESET_OPTIONS.map((option) => ({
-                    ...option,
-                    label: `${option.label} with a very long label that never seems to end and goes on forever`,
-                })),
-            },
-        },
-    ],
+    presets,
     variants: {
         showTrail: {
             width: 'hug',