@bspk/ui 1.1.34 → 1.3.0

package/dist/components/Slider/slider.css

@@ -0,0 +1,122 @@
+[data-bspk=slider],
+[data-bspk=range-slider] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  gap: 10px;
+}
+[data-bspk=slider] [data-top-labels],
+[data-bspk=slider] [data-bottom-labels],
+[data-bspk=range-slider] [data-top-labels],
+[data-bspk=range-slider] [data-bottom-labels] {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  user-select: none;
+}
+[data-bspk=slider] [data-top-labels],
+[data-bspk=range-slider] [data-top-labels] {
+  color: var(--foreground-neutral-on-surface-variant-01);
+}
+[data-bspk=slider] [data-bottom-labels],
+[data-bspk=range-slider] [data-bottom-labels] {
+  color: var(--foreground-neutral-on-surface-variant-02);
+}
+[data-bspk=slider] [data-slider-parent],
+[data-bspk=range-slider] [data-slider-parent] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+[data-bspk=slider] [data-slider-body],
+[data-bspk=range-slider] [data-slider-body] {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+[data-bspk=slider] [data-slider-background],
+[data-bspk=range-slider] [data-slider-background] {
+  position: absolute;
+  background: var(--surface-neutral-t3-low);
+  height: var(--spacing-sizing-01);
+  border-radius: 2px;
+  left: 0;
+  right: 0;
+  cursor: pointer;
+}
+[data-bspk=slider] [data-slider-fill],
+[data-bspk=range-slider] [data-slider-fill] {
+  position: absolute;
+  height: var(--spacing-sizing-01);
+  background-color: var(--foreground-brand-primary);
+  border-radius: 2px;
+  left: 0;
+  cursor: pointer;
+}
+[data-bspk=slider] [data-slider-knob],
+[data-bspk=range-slider] [data-slider-knob] {
+  position: absolute;
+  border: 1px solid var(--stroke-neutral-low);
+  border-radius: 50%;
+  width: var(--spacing-sizing-04);
+  height: var(--spacing-sizing-04);
+  background-color: white;
+  box-sizing: border-box;
+  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.32);
+  cursor: pointer;
+}
+[data-bspk=slider] [data-slider-knob]:focus-visible,
+[data-bspk=range-slider] [data-slider-knob]:focus-visible {
+  outline: 2px solid var(--stroke-neutral-focus);
+}
+[data-bspk=slider] [data-interval-dot],
+[data-bspk=range-slider] [data-interval-dot] {
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  background-color: var(--foreground-neutral-on-surface-variant-01);
+  transform: translate(-50%) rotate(45deg);
+}
+[data-bspk=slider] [data-interval-dot][data-filled-section],
+[data-bspk=range-slider] [data-interval-dot][data-filled-section] {
+  background-color: var(--foreground-brand-on-primary);
+}
+[data-bspk=slider][data-disabled] [data-slider-knob], [data-bspk=slider][data-readonly] [data-slider-knob],
+[data-bspk=range-slider][data-disabled] [data-slider-knob],
+[data-bspk=range-slider][data-readonly] [data-slider-knob] {
+  cursor: default;
+}
+[data-bspk=slider][data-disabled] [data-interval-dot], [data-bspk=slider][data-readonly] [data-interval-dot],
+[data-bspk=range-slider][data-disabled] [data-interval-dot],
+[data-bspk=range-slider][data-readonly] [data-interval-dot] {
+  background-color: var(--foreground-neutral-disabled-on-surface);
+}
+[data-bspk=slider][data-disabled] [data-interval-dot][data-filled-section], [data-bspk=slider][data-readonly] [data-interval-dot][data-filled-section],
+[data-bspk=range-slider][data-disabled] [data-interval-dot][data-filled-section],
+[data-bspk=range-slider][data-readonly] [data-interval-dot][data-filled-section] {
+  background-color: var(--foreground-brand-on-primary);
+}
+[data-bspk=slider][data-disabled] [data-slider-fill], [data-bspk=slider][data-readonly] [data-slider-fill],
+[data-bspk=range-slider][data-disabled] [data-slider-fill],
+[data-bspk=range-slider][data-readonly] [data-slider-fill] {
+  background-color: var(--foreground-neutral-disabled-on-surface);
+  cursor: default;
+}
+[data-bspk=slider][data-disabled] [data-slider-background], [data-bspk=slider][data-readonly] [data-slider-background],
+[data-bspk=range-slider][data-disabled] [data-slider-background],
+[data-bspk=range-slider][data-readonly] [data-slider-background] {
+  background: var(--interactions-disabled-opacity);
+  cursor: default;
+}
+[data-bspk=slider][data-disabled] [data-bottom-labels],
+[data-bspk=range-slider][data-disabled] [data-bottom-labels] {
+  color: var(--foreground-neutral-disabled-on-surface);
+}
+[data-bspk=slider][data-disabled] [data-value-label],
+[data-bspk=range-slider][data-disabled] [data-value-label] {
+  color: var(--foreground-neutral-disabled-on-surface);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Slider/slider.css.js

@@ -0,0 +1,127 @@
+/** * 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=slider],
+[data-bspk=range-slider] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  gap: 10px;
+}
+[data-bspk=slider] [data-top-labels],
+[data-bspk=slider] [data-bottom-labels],
+[data-bspk=range-slider] [data-top-labels],
+[data-bspk=range-slider] [data-bottom-labels] {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  user-select: none;
+}
+[data-bspk=slider] [data-top-labels],
+[data-bspk=range-slider] [data-top-labels] {
+  color: var(--foreground-neutral-on-surface-variant-01);
+}
+[data-bspk=slider] [data-bottom-labels],
+[data-bspk=range-slider] [data-bottom-labels] {
+  color: var(--foreground-neutral-on-surface-variant-02);
+}
+[data-bspk=slider] [data-slider-parent],
+[data-bspk=range-slider] [data-slider-parent] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+[data-bspk=slider] [data-slider-body],
+[data-bspk=range-slider] [data-slider-body] {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+[data-bspk=slider] [data-slider-background],
+[data-bspk=range-slider] [data-slider-background] {
+  position: absolute;
+  background: var(--surface-neutral-t3-low);
+  height: var(--spacing-sizing-01);
+  border-radius: 2px;
+  left: 0;
+  right: 0;
+  cursor: pointer;
+}
+[data-bspk=slider] [data-slider-fill],
+[data-bspk=range-slider] [data-slider-fill] {
+  position: absolute;
+  height: var(--spacing-sizing-01);
+  background-color: var(--foreground-brand-primary);
+  border-radius: 2px;
+  left: 0;
+  cursor: pointer;
+}
+[data-bspk=slider] [data-slider-knob],
+[data-bspk=range-slider] [data-slider-knob] {
+  position: absolute;
+  border: 1px solid var(--stroke-neutral-low);
+  border-radius: 50%;
+  width: var(--spacing-sizing-04);
+  height: var(--spacing-sizing-04);
+  background-color: white;
+  box-sizing: border-box;
+  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.32);
+  cursor: pointer;
+}
+[data-bspk=slider] [data-slider-knob]:focus-visible,
+[data-bspk=range-slider] [data-slider-knob]:focus-visible {
+  outline: 2px solid var(--stroke-neutral-focus);
+}
+[data-bspk=slider] [data-interval-dot],
+[data-bspk=range-slider] [data-interval-dot] {
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  background-color: var(--foreground-neutral-on-surface-variant-01);
+  transform: translate(-50%) rotate(45deg);
+}
+[data-bspk=slider] [data-interval-dot][data-filled-section],
+[data-bspk=range-slider] [data-interval-dot][data-filled-section] {
+  background-color: var(--foreground-brand-on-primary);
+}
+[data-bspk=slider][data-disabled] [data-slider-knob], [data-bspk=slider][data-readonly] [data-slider-knob],
+[data-bspk=range-slider][data-disabled] [data-slider-knob],
+[data-bspk=range-slider][data-readonly] [data-slider-knob] {
+  cursor: default;
+}
+[data-bspk=slider][data-disabled] [data-interval-dot], [data-bspk=slider][data-readonly] [data-interval-dot],
+[data-bspk=range-slider][data-disabled] [data-interval-dot],
+[data-bspk=range-slider][data-readonly] [data-interval-dot] {
+  background-color: var(--foreground-neutral-disabled-on-surface);
+}
+[data-bspk=slider][data-disabled] [data-interval-dot][data-filled-section], [data-bspk=slider][data-readonly] [data-interval-dot][data-filled-section],
+[data-bspk=range-slider][data-disabled] [data-interval-dot][data-filled-section],
+[data-bspk=range-slider][data-readonly] [data-interval-dot][data-filled-section] {
+  background-color: var(--foreground-brand-on-primary);
+}
+[data-bspk=slider][data-disabled] [data-slider-fill], [data-bspk=slider][data-readonly] [data-slider-fill],
+[data-bspk=range-slider][data-disabled] [data-slider-fill],
+[data-bspk=range-slider][data-readonly] [data-slider-fill] {
+  background-color: var(--foreground-neutral-disabled-on-surface);
+  cursor: default;
+}
+[data-bspk=slider][data-disabled] [data-slider-background], [data-bspk=slider][data-readonly] [data-slider-background],
+[data-bspk=range-slider][data-disabled] [data-slider-background],
+[data-bspk=range-slider][data-readonly] [data-slider-background] {
+  background: var(--interactions-disabled-opacity);
+  cursor: default;
+}
+[data-bspk=slider][data-disabled] [data-bottom-labels],
+[data-bspk=range-slider][data-disabled] [data-bottom-labels] {
+  color: var(--foreground-neutral-disabled-on-surface);
+}
+[data-bspk=slider][data-disabled] [data-value-label],
+[data-bspk=range-slider][data-disabled] [data-value-label] {
+  color: var(--foreground-neutral-disabled-on-surface);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

package/dist/components/Slider/useNormalizeSliderValue.d.ts

@@ -0,0 +1,7 @@
+export declare const useNormalizeSliderValue: ({ min, max, step }: {
+    min: number;
+    max: number;
+    step: number;
+}) => {
+    normalizeSliderValue: (val: number) => number;
+};

package/dist/components/Slider/useNormalizeSliderValue.js

@@ -0,0 +1,12 @@
+export const useNormalizeSliderValue = ({ min, max, step }) => {
+    const clamp = (val) => Math.min(Math.max(val, min), max);
+    const normalizeSliderValue = (val) => {
+        let newValue = clamp(val);
+        newValue = Math.round(newValue / step) * step;
+        // Fix floating-point precision issues
+        newValue = parseFloat(newValue.toFixed(10));
+        return clamp(newValue);
+    };
+    return { normalizeSliderValue };
+};
+//# sourceMappingURL=useNormalizeSliderValue.js.map

package/dist/components/Slider/useNormalizeSliderValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNormalizeSliderValue.js","sourceRoot":"","sources":["../../../src/components/Slider/useNormalizeSliderValue.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAA8C,EAAE,EAAE;IACtG,MAAM,KAAK,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;IAEjE,MAAM,oBAAoB,GAAG,CAAC,GAAW,EAAE,EAAE;QACzC,IAAI,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;QAE1B,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;QAE9C,sCAAsC;QACtC,QAAQ,GAAG,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;QAE5C,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,EAAE,oBAAoB,EAAE,CAAC;AACpC,CAAC,CAAC"}

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

@@ -0,0 +1,27 @@
+import './snackbar.scss';
+import { SnackbarData } from '-/utils/snackbarContext';
+export type SnackbarProps = {
+    /** Text to be shown in the snackbar */
+    text: string;
+    /** Optional action button */
+    button?: SnackbarData['button'];
+    /** Callback when the snackbar is dismissed */
+    onClose: () => void;
+};
+/**
+ * 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 declare function Snackbar({ text, button, onClose }: SnackbarProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.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":"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"}

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>;