@bspk/ui 1.3.8 → 1.3.10

package/dist/components/Skeleton/Thumbnail.d.ts

@@ -1,2 +1,8 @@
 import { SkeletonProps } from './Skeleton';
+/**
+ * SkeletonThumbnail component displays a thumbnail skeleton loader.
+ *
+ * @name SkeletonThumbnail
+ * @parent Skeleton
+ */
 export declare function SkeletonThumbnail(props: Pick<SkeletonProps, 'height' | 'width'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Thumbnail.js

@@ -1,5 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Skeleton } from './Skeleton';
+/**
+ * SkeletonThumbnail component displays a thumbnail skeleton loader.
+ *
+ * @name SkeletonThumbnail
+ * @parent Skeleton
+ */
 export function SkeletonThumbnail(props) {
     return _jsx(Skeleton, { ...props, variant: "thumbnail" });
 }

package/dist/components/Skeleton/Thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Thumbnail.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAErD,MAAM,UAAU,iBAAiB,CAAC,KAA8C;IAC5E,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,WAAW,GAAG,CAAC;AACvD,CAAC"}
+{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Thumbnail.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAErD;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA8C;IAC5E,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,WAAW,GAAG,CAAC;AACvD,CAAC"}

package/dist/components/SkeletonText/SkeletonText.d.ts

@@ -29,15 +29,11 @@ export type SkeletonTextProps = {
  * @example
  *     import { SkeletonText } from '@bspk/ui/SkeletonText';
  *
- *     function Example(item: { content: string } | null) {
- *         return (
- *             <SkeletonText textLines={1} textVariant="body-base">
- *                 <Txt as="p" variant="body-base">
- *                     {item?.content}
- *                 </Txt>
- *             </SkeletonText>
- *         );
- *     }
+ *     <SkeletonText textLines={1} textVariant="body-base">
+ *         <Txt as="p" variant="body-base">
+ *             {'This is the loaded text content that was previously loading.'}
+ *         </Txt>
+ *     </SkeletonText>;
  *
  * @exampleDescription This example shows a skeleton loading state for some text but can be used for any element.
  *

package/dist/components/SkeletonText/SkeletonText.js

@@ -6,15 +6,11 @@ import { cssWithVars } from '../../utils/cwv';
  * @example
  *     import { SkeletonText } from '@bspk/ui/SkeletonText';
  *
- *     function Example(item: { content: string } | null) {
- *         return (
- *             <SkeletonText textLines={1} textVariant="body-base">
- *                 <Txt as="p" variant="body-base">
- *                     {item?.content}
- *                 </Txt>
- *             </SkeletonText>
- *         );
- *     }
+ *     <SkeletonText textLines={1} textVariant="body-base">
+ *         <Txt as="p" variant="body-base">
+ *             {'This is the loaded text content that was previously loading.'}
+ *         </Txt>
+ *     </SkeletonText>;
  *
  * @exampleDescription This example shows a skeleton loading state for some text but can be used for any element.
  *

package/dist/components/SkeletonText/SkeletonText.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText.js","sourceRoot":"","sources":["../../../src/components/SkeletonText/SkeletonText.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA2B1C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,OAAO,GAAG,WAAW,EAAE,QAAQ,GAAG,IAAI,EAAqB;IACjG,OAAO,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,CACvE,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,2BACc,MAAM,gBACL,SAAS,eACV,eAAe,EACzB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,WAAW,CAAC;YACf,eAAe,EAAE,SAAS,OAAO,QAAQ;YACzC,eAAe,EAAE,cAAc,OAAO,yBAAyB,OAAO,SAAS;SAClF,CAAC,YAED,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACnD,mCAAoB,KAAK,CAAI,CAChC,CAAC,GACA,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"SkeletonText.js","sourceRoot":"","sources":["../../../src/components/SkeletonText/SkeletonText.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA2B1C;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,OAAO,GAAG,WAAW,EAAE,QAAQ,GAAG,IAAI,EAAqB;IACjG,OAAO,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,CACvE,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,2BACc,MAAM,gBACL,SAAS,eACV,eAAe,EACzB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,WAAW,CAAC;YACf,eAAe,EAAE,SAAS,OAAO,QAAQ;YACzC,eAAe,EAAE,cAAc,OAAO,yBAAyB,OAAO,SAAS;SAClF,CAAC,YAED,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACnD,mCAAoB,KAAK,CAAI,CAChC,CAAC,GACA,CACT,CAAC;AACN,CAAC"}

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

@@ -67,11 +67,11 @@ export type SliderProps<Value> = Pick<CommonPropsLibrary, 'disabled' | 'readOnly
  *     import { Slider } from '@bspk/ui/Slider';
  *     import { useState } from 'react';
  *
- *     function Example() {
+ *     () => {
  *         const [value, setValue] = useState(50);
  *
  *         return <Slider value={value} min={0} max={100} label="Slider Example" onChange={setValue} />;
- *     }
+ *     };
  *
  * @name Slider
  * @phase UXReview

package/dist/components/Slider/Slider.js

@@ -12,11 +12,11 @@ import { Txt } from '../Txt';
  *     import { Slider } from '@bspk/ui/Slider';
  *     import { useState } from 'react';
  *
- *     function Example() {
+ *     () => {
  *         const [value, setValue] = useState(50);
  *
  *         return <Slider value={value} min={0} max={100} label="Slider Example" onChange={setValue} />;
- *     }
+ *     };
  *
  * @name Slider
  * @phase UXReview

package/dist/components/Slider/SliderExample.js

@@ -16,19 +16,20 @@ export const SliderExample = {
     },
     presets: [
         {
-            label: 'Basic Slider',
+            label: 'Formatted Number',
             propState: {
-                label: 'Basic option',
-                min: 20,
-                max: 80,
-                step: 1,
-                value: 30,
+                label: 'Price option',
+                min: 0,
+                max: 100,
+                step: 5,
+                value: 50,
                 formatNumber: (num) => `$${num}`,
-                name: 'basic-slider',
+                name: 'formatted-number-slider',
             },
         },
         {
             label: 'Range Slider',
+            designPattern: 'A control element that allows customers to select a value or adjust a setting by moving the handle along a horizontal track.',
             propState: {
                 label: 'Range option',
                 min: 0,
@@ -42,21 +43,42 @@ export const SliderExample = {
             },
         },
         {
-            label: 'Undefined Value',
+            label: 'Continuous Slider',
+            designPattern: 'Continuous sliders allow users to select a value along a subjective range.',
             propState: {
-                label: 'undefined',
-                min: 50,
-                max: 150,
+                label: 'What is the purpose of life?',
+                min: 0,
+                max: 100,
+                value: 42,
                 step: 1,
-                value: null,
-                formatNumber: (num, context) => {
-                    if (context === 'max')
-                        return `${num}% Passing`;
-                    return `${num}%`;
-                },
-                name: 'undefined-slider',
+                formatNumber: (num) => num.toFixed(0),
+                name: 'continuous-slider',
+                marks: false,
+            },
+        },
+        {
+            label: 'Discrete Slider',
+            designPattern: 'Discrete sliders can be adjusted to a specific value by referencing its value indicator. You can generate a mark for each step with marks={true}.',
+            propState: {
+                label: 'Discrete option',
+                min: 0,
+                max: 100,
+                step: 10,
+                value: 40,
+                formatNumber: (num) => num.toString(),
+                name: 'discrete-slider',
+                marks: true,
             },
         },
     ],
+    defaultState: {
+        label: 'Basic option',
+        min: 20,
+        max: 80,
+        step: 1,
+        value: 30,
+        formatNumber: (num) => `$${num}`,
+        name: 'basic-slider',
+    },
 };
 //# sourceMappingURL=SliderExample.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SliderExample.js","sourceRoot":"","sources":["../../../src/components/Slider/SliderExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKjC,MAAM,CAAC,MAAM,aAAa,GAA6D;IACnF,qCAAqC;IACrC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,UAAU,GAAG,CAAC,WAAmD,EAAE,EAAE;YACvE,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC;gBACjD,CAAC,CAAC,WAAW,CAAC,KAAK;gBACnB,CAAC,CAAC,OAAO,WAAW,CAAC,KAAK,KAAK,QAAQ;oBACrC,CAAC,CAAC,WAAW,CAAC,KAAK;oBACnB,CAAC,CAAC,CAAC,CAAC;YAEV,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;YAEjD,OAAO,KAAC,SAAS,OAAK,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAC5E,CAAC,CAAC;QAEF,OAAO,KAAC,UAAU,OAAK,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,GAAI,CAAC;IAC3G,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,cAAc;YACrB,SAAS,EAAE;gBACP,KAAK,EAAE,cAAc;gBACrB,GAAG,EAAE,EAAE;gBACP,GAAG,EAAE,EAAE;gBACP,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,EAAE;gBACT,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,GAAG,EAAE;gBAChC,IAAI,EAAE,cAAc;aACvB;SACJ;QACD;YACI,KAAK,EAAE,cAAc;YACrB,SAAS,EAAE;gBACP,KAAK,EAAE,cAAc;gBACrB,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG;gBACR,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;gBACf,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE;oBAClB,OAAO,GAAG,GAAG,GAAG,CAAC;gBACrB,CAAC;gBACD,IAAI,EAAE,cAAc;aACvB;SACJ;QACD;YACI,KAAK,EAAE,iBAAiB;YACxB,SAAS,EAAE;gBACP,KAAK,EAAE,WAAW;gBAClB,GAAG,EAAE,EAAE;gBACP,GAAG,EAAE,GAAG;gBACR,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,IAAmC;gBAC1C,YAAY,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE;oBAC3B,IAAI,OAAO,KAAK,KAAK;wBAAE,OAAO,GAAG,GAAG,WAAW,CAAC;oBAChD,OAAO,GAAG,GAAG,GAAG,CAAC;gBACrB,CAAC;gBACD,IAAI,EAAE,kBAAkB;aAC3B;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"SliderExample.js","sourceRoot":"","sources":["../../../src/components/Slider/SliderExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKjC,MAAM,CAAC,MAAM,aAAa,GAA6D;IACnF,qCAAqC;IACrC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,UAAU,GAAG,CAAC,WAAmD,EAAE,EAAE;YACvE,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC;gBACjD,CAAC,CAAC,WAAW,CAAC,KAAK;gBACnB,CAAC,CAAC,OAAO,WAAW,CAAC,KAAK,KAAK,QAAQ;oBACrC,CAAC,CAAC,WAAW,CAAC,KAAK;oBACnB,CAAC,CAAC,CAAC,CAAC;YAEV,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;YAEjD,OAAO,KAAC,SAAS,OAAK,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAC5E,CAAC,CAAC;QAEF,OAAO,KAAC,UAAU,OAAK,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,GAAI,CAAC;IAC3G,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,kBAAkB;YACzB,SAAS,EAAE;gBACP,KAAK,EAAE,cAAc;gBACrB,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG;gBACR,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,EAAE;gBACT,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,GAAG,EAAE;gBAChC,IAAI,EAAE,yBAAyB;aAClC;SACJ;QACD;YACI,KAAK,EAAE,cAAc;YACrB,aAAa,EACT,8HAA8H;YAClI,SAAS,EAAE;gBACP,KAAK,EAAE,cAAc;gBACrB,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG;gBACR,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;gBACf,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE;oBAClB,OAAO,GAAG,GAAG,GAAG,CAAC;gBACrB,CAAC;gBACD,IAAI,EAAE,cAAc;aACvB;SACJ;QACD;YACI,KAAK,EAAE,mBAAmB;YAC1B,aAAa,EAAE,4EAA4E;YAC3F,SAAS,EAAE;gBACP,KAAK,EAAE,8BAA8B;gBACrC,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG;gBACR,KAAK,EAAE,EAAE;gBACT,IAAI,EAAE,CAAC;gBACP,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;gBACrC,IAAI,EAAE,mBAAmB;gBACzB,KAAK,EAAE,KAAK;aACf;SACJ;QACD;YACI,KAAK,EAAE,iBAAiB;YACxB,aAAa,EACT,mJAAmJ;YACvJ,SAAS,EAAE;gBACP,KAAK,EAAE,iBAAiB;gBACxB,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG;gBACR,IAAI,EAAE,EAAE;gBACR,KAAK,EAAE,EAAE;gBACT,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE;gBACrC,IAAI,EAAE,iBAAiB;gBACvB,KAAK,EAAE,IAAI;aACd;SACJ;KACJ;IACD,YAAY,EAAE;QACV,KAAK,EAAE,cAAc;QACrB,GAAG,EAAE,EAAE;QACP,GAAG,EAAE,EAAE;QACP,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,EAAE;QACT,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,GAAG,EAAE;QAChC,IAAI,EAAE,cAAc;KACvB;CACJ,CAAC"}

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

@@ -2,4 +2,10 @@ import { SliderProps, SliderValue } from './Slider';
 export type IntervalDotProps = Pick<SliderProps<SliderValue>, 'max' | 'min' | 'value'> & {
     step: number;
 };
+/**
+ * SliderIntervalDots component displays interval dots along a slider track.
+ *
+ * @name SliderIntervalDots
+ * @parent Slider
+ */
 export declare function SliderIntervalDots({ step, max, min, value }: IntervalDotProps): import("react/jsx-runtime").JSX.Element[] | null;

package/dist/components/Slider/SliderIntervalDots.js

@@ -1,4 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * SliderIntervalDots component displays interval dots along a slider track.
+ *
+ * @name SliderIntervalDots
+ * @parent Slider
+ */
 export function SliderIntervalDots({ step, max, min, value }) {
     if (step <= 0)
         return null;

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

@@ -1 +1 @@
-{"version":3,"file":"SliderIntervalDots.js","sourceRoot":"","sources":["../../../src/components/Slider/SliderIntervalDots.tsx"],"names":[],"mappings":";AAMA,MAAM,UAAU,kBAAkB,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAoB;IAC1E,IAAI,IAAI,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC;IAE3B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;IAC7C,MAAM,IAAI,GAAG,EAAE,CAAC;IAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;QAC7B,MAAM,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC;QAC5B,MAAM,OAAO,GAAG,CAAC,UAAU,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;QACjD,IAAI,CAAC,IAAI,CACL,qCAEQ,OAAO,KAAK,KAAK,QAAQ;gBACrB,CAAC,CAAC,UAAU,GAAG,KAAK;oBAChB,CAAC,CAAC,EAAE;oBACJ,CAAC,CAAC,SAAS;gBACf,CAAC,CAAC,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC;oBACrB,CAAC,CAAC,EAAE;oBACJ,CAAC,CAAC,SAAS,6BAIrB,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,OAAO,GAAG,EAAE,IADzB,CAAC,CAER,CACL,CAAC;IACN,CAAC;IAED,OAAO,IAAI,CAAC;AAChB,CAAC"}
+{"version":3,"file":"SliderIntervalDots.js","sourceRoot":"","sources":["../../../src/components/Slider/SliderIntervalDots.tsx"],"names":[],"mappings":";AAMA;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAoB;IAC1E,IAAI,IAAI,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC;IAE3B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;IAC7C,MAAM,IAAI,GAAG,EAAE,CAAC;IAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;QAC7B,MAAM,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC;QAC5B,MAAM,OAAO,GAAG,CAAC,UAAU,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;QACjD,IAAI,CAAC,IAAI,CACL,qCAEQ,OAAO,KAAK,KAAK,QAAQ;gBACrB,CAAC,CAAC,UAAU,GAAG,KAAK;oBAChB,CAAC,CAAC,EAAE;oBACJ,CAAC,CAAC,SAAS;gBACf,CAAC,CAAC,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC;oBACrB,CAAC,CAAC,EAAE;oBACJ,CAAC,CAAC,SAAS,6BAIrB,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,OAAO,GAAG,EAAE,IADzB,CAAC,CAER,CACL,CAAC;IACN,CAAC;IAED,OAAO,IAAI,CAAC;AAChB,CAAC"}

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

@@ -0,0 +1,28 @@
+import { SnackbarProps } from './Snackbar';
+import { BspkIcon } from '-/types/common';
+export type SendSnackbarProps = Omit<SnackbarProps, 'icon' | 'innerRef' | 'onClose'> & {
+    onClose?: SnackbarProps['onClose'];
+    icon?: BspkIcon;
+};
+export type SnackbarManagerProps = {
+    /**
+     * Default timeout for snackbars sent via the manager (in milliseconds).
+     *
+     * @default 5000
+     */
+    defaultTimeout?: number;
+};
+/**
+ * SnackbarManager is a single use component that listens for snackbar events and displays them to the user.
+ *
+ * We use a custom event to communicate between components and this manager.
+ *
+ * We don't store the snackbar props in React.Context to avoid unnecessary re-renders of all components that consume the
+ * context. :)
+ *
+ * @name SnackbarManager
+ * @phase UXReview
+ */
+export declare function SnackbarManager({ defaultTimeout }: SnackbarManagerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const sendSnackbar: (props: SendSnackbarProps | string) => void;
+export declare const clearSnackbar: () => void;

package/dist/components/Snackbar/Manager.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgIcon } from '@bspk/icons/SvgIcon';
+import { useState } from 'react';
+import { Snackbar } from './Snackbar';
+import { createCustomEvent } from '../../utils/createCustomEvent';
+const CLEAR_EVENT = 'bspk-snackbar-clear';
+const SnackbarEvent = createCustomEvent('bspk-snackbar-event');
+/**
+ * SnackbarManager is a single use component that listens for snackbar events and displays them to the user.
+ *
+ * We use a custom event to communicate between components and this manager.
+ *
+ * We don't store the snackbar props in React.Context to avoid unnecessary re-renders of all components that consume the
+ * context. :)
+ *
+ * @name SnackbarManager
+ * @phase UXReview
+ */
+export function SnackbarManager({ defaultTimeout = 5000 }) {
+    const [snackbarProps, setSnackbarProps] = useState();
+    const { useEventListener } = SnackbarEvent;
+    useEventListener((detail) => {
+        if (detail === CLEAR_EVENT || !detail)
+            return setSnackbarProps(undefined);
+        setSnackbarProps(typeof detail === 'string' ? { text: detail, timeout: defaultTimeout } : detail);
+    });
+    return snackbarProps ? (_jsx(Snackbar, { ...snackbarProps, icon: snackbarProps.icon ? _jsx(SvgIcon, { name: snackbarProps.icon }) : undefined, onClose: () => {
+            setSnackbarProps(undefined);
+            snackbarProps?.onClose?.();
+        }, open: true })) : null;
+}
+export const sendSnackbar = (props) => SnackbarEvent.send(props);
+export const clearSnackbar = () => SnackbarEvent.send(CLEAR_EVENT);
+//# sourceMappingURL=Manager.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Manager.js","sourceRoot":"","sources":["../../../src/components/Snackbar/Manager.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAiB,QAAQ,EAAE,MAAM,YAAY,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,WAAW,GAAG,qBAA8B,CAAC;AAiBnD,MAAM,aAAa,GAAG,iBAAiB,CAAkD,qBAAqB,CAAC,CAAC;AAEhH;;;;;;;;;;GAUG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,cAAc,GAAG,IAAI,EAAwB;IAC3E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAiC,CAAC;IACpF,MAAM,EAAE,gBAAgB,EAAE,GAAG,aAAa,CAAC;IAE3C,gBAAgB,CAAC,CAAC,MAAM,EAAE,EAAE;QACxB,IAAI,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM;YAAE,OAAO,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAE1E,gBAAgB,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACtG,CAAC,CAAC,CAAC;IAEH,OAAO,aAAa,CAAC,CAAC,CAAC,CACnB,KAAC,QAAQ,OACD,aAAa,EACjB,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,aAAa,CAAC,IAAgB,GAAI,CAAC,CAAC,CAAC,SAAS,EACxF,OAAO,EAAE,GAAG,EAAE;YACV,gBAAgB,CAAC,SAAS,CAAC,CAAC;YAC5B,aAAa,EAAE,OAAO,EAAE,EAAE,CAAC;QAC/B,CAAC,EACD,IAAI,EAAE,IAAI,GACZ,CACL,CAAC,CAAC,CAAC,IAAI,CAAC;AACb,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAiC,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAE7F,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC"}

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

@@ -35,7 +35,6 @@ export type SnackbarProps = CommonProps<'id'> & {
      * @required
      */
     onClose: () => void;
-    /** Content to be rendered inside the snack bar provider, the snackbar trigger element. */
     /**
      * Time in milliseconds after which the snackbar will auto dismiss.
      *
@@ -59,27 +58,45 @@ export type SnackbarProps = CommonProps<'id'> & {
     disableFocusTrap?: boolean;
 };
 /**
- * Snackbars are intended to provide feedback about an action. Because of focus trap these will interrupt the customer
- * experience.
+ * Snackbars provide brief feedback about user actions. Because they use a focus trap, they interrupt the user's
+ * workflow and should be used sparingly.
+ *
+ * #### Inline
+ *
+ * Render the Snackbar inside the component that triggers it and control visibility with local state/props. This is
+ * simple and useful for small or isolated components, but can lead to duplicate snackbars or inadvertent render loops
+ * if state is not managed carefully.
+ *
+ * #### Managed
+ *
+ * Use the SnackbarManager together with `sendSnackbar` and `clearSnackbar` to control snackbars globally. This lets any
+ * part of the app trigger snackbars without prop drilling and helps avoid duplicates. and prevents duplicate snackbars
+ * from being shown.
  *
  * @example
  *     import { Snackbar } from '@bspk/ui/Snackbar';
  *     import { Button } from '@bspk/ui/Button';
  *     import { useState } from 'react';
+ *     import { sendSnackbar } from '@bspk/ui/Snackbar/Manager';
  *
- *     function ExampleComponent(props) {
+ *     () => {
  *         const [snackbarOpen, setSnackbarOpen] = useState(false);
  *
  *         return (
  *             <>
+ *                 // -- inline snackbar
  *                 <Button label="Show snackbar" onClick={() => setSnackbarOpen(true)} size="medium" title="Snackbar" />
  *                 <Snackbar text="I am an example." open={snackbarOpen} onClose={() => setSnackbarOpen(false)} />
+ *                 // -- managed snackbar
+ *                 <Button
+ *                     label="Show managed snackbar"
+ *                     onClick={() => sendSnackbar({ text: 'I am a managed snackbar!' })}
+ *                 />
  *             </>
  *         );
- *     }
+ *     };
  *
  * @name Snackbar
- *
  * @phase UXReview
  */
 export declare function Snackbar({ id: propId, text, timeout, closeButton, closeButtonLabel, icon, onClose, open, innerRef, disableFocusTrap, }: SnackbarProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Snackbar/Snackbar.js

@@ -7,27 +7,45 @@ import { Portal } from '../Portal';
 import { Truncated } from '../Truncated';
 import { useId } from '../../hooks/useId';
 /**
- * Snackbars are intended to provide feedback about an action. Because of focus trap these will interrupt the customer
- * experience.
+ * Snackbars provide brief feedback about user actions. Because they use a focus trap, they interrupt the user's
+ * workflow and should be used sparingly.
+ *
+ * #### Inline
+ *
+ * Render the Snackbar inside the component that triggers it and control visibility with local state/props. This is
+ * simple and useful for small or isolated components, but can lead to duplicate snackbars or inadvertent render loops
+ * if state is not managed carefully.
+ *
+ * #### Managed
+ *
+ * Use the SnackbarManager together with `sendSnackbar` and `clearSnackbar` to control snackbars globally. This lets any
+ * part of the app trigger snackbars without prop drilling and helps avoid duplicates. and prevents duplicate snackbars
+ * from being shown.
  *
  * @example
  *     import { Snackbar } from '@bspk/ui/Snackbar';
  *     import { Button } from '@bspk/ui/Button';
  *     import { useState } from 'react';
+ *     import { sendSnackbar } from '@bspk/ui/Snackbar/Manager';
  *
- *     function ExampleComponent(props) {
+ *     () => {
  *         const [snackbarOpen, setSnackbarOpen] = useState(false);
  *
  *         return (
  *             <>
+ *                 // -- inline snackbar
  *                 <Button label="Show snackbar" onClick={() => setSnackbarOpen(true)} size="medium" title="Snackbar" />
  *                 <Snackbar text="I am an example." open={snackbarOpen} onClose={() => setSnackbarOpen(false)} />
+ *                 // -- managed snackbar
+ *                 <Button
+ *                     label="Show managed snackbar"
+ *                     onClick={() => sendSnackbar({ text: 'I am a managed snackbar!' })}
+ *                 />
  *             </>
  *         );
- *     }
+ *     };
  *
  * @name Snackbar
- *
  * @phase UXReview
  */
 export function Snackbar({ id: propId, text, timeout, closeButton = true, closeButtonLabel = 'Dismiss', icon, onClose, open = false, innerRef, disableFocusTrap = false, }) {

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

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,cAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AA8DtC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,EAAE,EAAE,MAAM,EACV,IAAI,EACJ,OAAO,EACP,WAAW,GAAG,IAAI,EAClB,gBAAgB,GAAG,SAAS,EAC5B,IAAI,EACJ,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,gBAAgB,GAAG,KAAK,GACZ;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;YAClB,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC1B,OAAO,EAAE,EAAE,CAAC;YAChB,CAAC,EAAE,OAAO,CAAC,CAAC;YACZ,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;QACD,OAAO,SAAS,CAAC;IACrB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAE7B,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,OAAO,CACH,KAAC,MAAM,cACH,2BAAe,KAAK,eAAW,UAAU,EAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,YAC3D,KAAC,SAAS,IACN,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE;oBACd,uBAAuB,EAAE,IAAI;oBAC7B,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;iBACvC,YAED,8CAAoC,IAAI,EAAC,OAAO,aAC5C,2DACK,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAC/B,8BAAmB,IAAI,wCAClB,IAAI,GACF,CACV,EACD,KAAC,SAAS,kCAAa,IAAI,GAAa,IACtC,EACL,WAAW,IAAI,KAAC,MAAM,IAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,UAAU,GAAG,KAT5D,EAAE,CAU5B,GACE,GACV,GACD,CACZ,CAAC;AACN,CAAC"}
+{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,cAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AA4DtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,EAAE,EAAE,MAAM,EACV,IAAI,EACJ,OAAO,EACP,WAAW,GAAG,IAAI,EAClB,gBAAgB,GAAG,SAAS,EAC5B,IAAI,EACJ,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,gBAAgB,GAAG,KAAK,GACZ;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;YAClB,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC1B,OAAO,EAAE,EAAE,CAAC;YAChB,CAAC,EAAE,OAAO,CAAC,CAAC;YACZ,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;QACD,OAAO,SAAS,CAAC;IACrB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAE7B,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,OAAO,CACH,KAAC,MAAM,cACH,2BAAe,KAAK,eAAW,UAAU,EAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,YAC3D,KAAC,SAAS,IACN,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE;oBACd,uBAAuB,EAAE,IAAI;oBAC7B,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;iBACvC,YAED,8CAAoC,IAAI,EAAC,OAAO,aAC5C,2DACK,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAC/B,8BAAmB,IAAI,wCAClB,IAAI,GACF,CACV,EACD,KAAC,SAAS,kCAAa,IAAI,GAAa,IACtC,EACL,WAAW,IAAI,KAAC,MAAM,IAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,UAAU,GAAG,KAT5D,EAAE,CAU5B,GACE,GACV,GACD,CACZ,CAAC;AACN,CAAC"}

package/dist/components/Snackbar/SnackbarExample.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { clearSnackbar, sendSnackbar } from './Manager';
 import { Snackbar } from './Snackbar';
 import { Button } from '../Button';
 export const SnackbarExample = {
@@ -6,7 +7,13 @@ export const SnackbarExample = {
     defaultState: {},
     disableProps: [],
     presets: [],
-    render: ({ props, setState }) => (_jsxs(_Fragment, { children: [_jsx(Snackbar, { ...props, onClose: () => setState({ open: false }) }), _jsx(Button, { label: "open snackbar", onClick: () => setState({ open: true }), size: "medium", title: "Snackbar" })] })),
+    render: ({ props, setState }) => {
+        return (_jsxs(_Fragment, { children: [_jsx(Snackbar, { ...props, onClose: () => setState({ open: false }) }), _jsx(Button, { label: "Launch Inline Snackbar", onClick: () => setState({ open: true }), size: "medium", title: "Snackbar" }), _jsx("br", {}), _jsx(Button, { label: "Launch Managed Snackbar", onClick: () => sendSnackbar({
+                        ...props,
+                        text: `Managed: ${props.text}`,
+                        icon: 'icon:icon-name' in props ? props['icon:icon-name'] : undefined,
+                    }) }), _jsx("br", {}), _jsx(Button, { label: "Clear Managed Snackbar", onClick: () => clearSnackbar() })] }));
+    },
     sections: [],
     variants: false,
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SnackbarExample.js","sourceRoot":"","sources":["../../../src/components/Snackbar/SnackbarExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC7B,8BACI,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAI,EACjE,KAAC,MAAM,IAAC,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,UAAU,GAAG,IACzG,CACN;IACD,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,KAAK;CAClB,CAAC"}
+{"version":3,"file":"SnackbarExample.js","sourceRoot":"","sources":["../../../src/components/Snackbar/SnackbarExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC5B,OAAO,CACH,8BACI,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAI,EACjE,KAAC,MAAM,IACH,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EACvC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,UAAU,GAClB,EACF,cAAM,EACN,KAAC,MAAM,IACH,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,GAAG,EAAE,CACV,YAAY,CAAC;wBACT,GAAG,KAAK;wBACR,IAAI,EAAE,YAAY,KAAK,CAAC,IAAI,EAAE;wBAC9B,IAAI,EAAE,gBAAgB,IAAI,KAAK,CAAC,CAAC,CAAE,KAAK,CAAC,gBAAgB,CAAc,CAAC,CAAC,CAAC,SAAS;qBACtF,CAAC,GAER,EACF,cAAM,EACN,KAAC,MAAM,IAAC,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,GAAI,IAC1E,CACN,CAAC;IACN,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,KAAK;CAClB,CAAC"}

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

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

package/dist/components/Snackbar/index.js

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

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

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

package/dist/components/StylesProviderDemo/StylesProviderDemo.d.ts

@@ -14,9 +14,7 @@ export type StylesProviderDemoProps = {
  * @example
  *     import { StylesProviderDemo } from '@bspk/ui/StylesProviderDemo';
  *
- *     function Example() {
- *         return <StylesProviderDemo brand="anywhere" />;
- *     }
+ *     <StylesProviderDemo brand="anywhere" />;
  *
  * @name StylesProviderDemo
  * @phase Utility

package/dist/components/StylesProviderDemo/StylesProviderDemo.js

@@ -9,9 +9,7 @@ const THEME_CSS = { ...BRANDS_CSS, ...EXAMPLE_CSS };
  * @example
  *     import { StylesProviderDemo } from '@bspk/ui/StylesProviderDemo';
  *
- *     function Example() {
- *         return <StylesProviderDemo brand="anywhere" />;
- *     }
+ *     <StylesProviderDemo brand="anywhere" />;
  *
  * @name StylesProviderDemo
  * @phase Utility

package/dist/components/StylesProviderDemo/StylesProviderDemo.js.map

@@ -1 +1 @@
-{"version":3,"file":"StylesProviderDemo.js","sourceRoot":"","sources":["../../../src/components/StylesProviderDemo/StylesProviderDemo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,SAAS,GAAG,EAAE,GAAG,UAAU,EAAE,GAAG,WAAW,EAAE,CAAC;AAWpD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,GAAG,UAAU,EAA2B;IAC9E,MAAM,YAAY,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;YACxB,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACpD,CAAC;QAED,YAAY,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC;QAErF,OAAO,GAAG,EAAE;YACR,IAAI,CAAC,YAAY,CAAC,OAAO;gBAAE,OAAO;YAClC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAChD,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,sDAAsD"}
+{"version":3,"file":"StylesProviderDemo.js","sourceRoot":"","sources":["../../../src/components/StylesProviderDemo/StylesProviderDemo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,SAAS,GAAG,EAAE,GAAG,UAAU,EAAE,GAAG,WAAW,EAAE,CAAC;AAWpD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,GAAG,UAAU,EAA2B;IAC9E,MAAM,YAAY,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;YACxB,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACpD,CAAC;QAED,YAAY,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC;QAErF,OAAO,GAAG,EAAE;YACR,IAAI,CAAC,YAAY,CAAC,OAAO;gBAAE,OAAO;YAClC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAChD,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,sDAAsD"}

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

@@ -27,7 +27,7 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
  *     import { useState } from 'react';
  *     import { Switch } from '@bspk/ui/Switch';
  *
- *     function Example() {
+ *     () => {
  *         const [isChecked, setIsChecked] = useState<boolean>(false);
  *
  *         return (
@@ -38,7 +38,7 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
  *                 checked={isChecked}
  *             />
  *         );
- *     }
+ *     };
  *
  * @element
  *

package/dist/components/Switch/Switch.js

@@ -9,7 +9,7 @@ import './switch.css.js';
  *     import { useState } from 'react';
  *     import { Switch } from '@bspk/ui/Switch';
  *
- *     function Example() {
+ *     () => {
  *         const [isChecked, setIsChecked] = useState<boolean>(false);
  *
  *         return (
@@ -20,7 +20,7 @@ import './switch.css.js';
  *                 checked={isChecked}
  *             />
  *         );
- *     }
+ *     };
  *
  * @element
  *

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

@@ -18,7 +18,7 @@ export type TabGroupProps = Omit<TabListProps<TabOption>, 'iconsOnly'> & {
  *     import { useState } from 'react';
  *     import { TabGroup } from '@bspk/ui/TabGroup';
  *
- *     function Example() {
+ *     () => {
  *         const [selectedTab, setSelectedTab] = useState<string>();
  *
  *         return (
@@ -32,7 +32,7 @@ export type TabGroupProps = Omit<TabListProps<TabOption>, 'iconsOnly'> & {
  *                 value={selectedTab}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name TabGroup
  * @phase UXReview

package/dist/components/TabGroup/TabGroup.js

@@ -8,7 +8,7 @@ import { TabList } from '../TabList';
  *     import { useState } from 'react';
  *     import { TabGroup } from '@bspk/ui/TabGroup';
  *
- *     function Example() {
+ *     () => {
  *         const [selectedTab, setSelectedTab] = useState<string>();
  *
  *         return (
@@ -22,7 +22,7 @@ import { TabList } from '../TabList';
  *                 value={selectedTab}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name TabGroup
  * @phase UXReview

package/dist/components/TabGroup/TabGroupExample.js

@@ -1,9 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SvgCircle } from '@bspk/icons/Circle';
-import { SvgDiamond } from '@bspk/icons/Diamond';
-import { SvgDiamondFill } from '@bspk/icons/DiamondFill';
-import { SvgSquare } from '@bspk/icons/Square';
-import { SvgSquareFill } from '@bspk/icons/SquareFill';
 const PRESET_OPTIONS = [
     {
         value: '1',
@@ -30,16 +24,16 @@ const PRESET_OPTIONS = [
 ];
 const OPTION_ICONS = [
     {
-        icon: _jsx(SvgDiamond, {}),
-        iconSelected: _jsx(SvgDiamondFill, {}),
+        icon: 'Diamond',
+        iconSelected: 'DiamondFill',
     },
     {
-        icon: _jsx(SvgCircle, {}),
+        icon: 'Circle',
         iconSelected: undefined,
     },
     {
-        icon: _jsx(SvgSquare, {}),
-        iconSelected: _jsx(SvgSquareFill, {}),
+        icon: 'Square',
+        iconSelected: 'SquareFill',
     },
 ];
 export const presets = [

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

@@ -1 +1 @@
-{"version":3,"file":"TabGroupExample.js","sourceRoot":"","sources":["../../../src/components/TabGroup/TabGroupExample.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TabGroupExample.js","sourceRoot":"","sources":["../../../src/components/TabGroup/TabGroupExample.tsx"],"names":[],"mappings":"AAGA,MAAM,cAAc,GAA6B;IAC7C;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,KAAK,EAAE,SAAS;KACnB;IACD;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,IAAI;KACjB;IACD;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,KAAK,EAAE,SAAS;KACnB;CACJ,CAAC;AAEF,MAAM,YAAY,GAAG;IACjB;QACI,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,aAAa;KAC9B;IAED;QACI,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,SAAS;KAC1B;IACD;QACI,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,YAAY;KAC7B;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA4B;IAC5C;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,KAAK,EAAE,GAAG;YACV,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;gBAC5C,GAAG,MAAM;gBACT,IAAI,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,IAAI;gBAC9B,YAAY,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,YAAY;aACjD,CAAC,CAAC;YACH,KAAK,EAAE,iBAAiB;SAC3B;KACJ;IACD;QACI,KAAK,EAAE,aAAa;QACpB,SAAS,EAAE;YACP,KAAK,EAAE,GAAG;YACV,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;gBAC5C,GAAG,MAAM;gBACT,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;aACvC,CAAC,CAAC;YACH,KAAK,EAAE,kBAAkB;SAC5B;KACJ;IACD;QACI,KAAK,EAAE,qBAAqB;QAC5B,SAAS,EAAE;YACP,KAAK,EAAE,GAAG;YACV,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;gBAC5C,GAAG,MAAM;gBACT,IAAI,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,IAAI;gBAC9B,YAAY,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,YAAY;gBAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;aACvC,CAAC,CAAC;YACH,KAAK,EAAE,0BAA0B;SACpC;KACJ;IACD;QACI,KAAK,EAAE,gBAAgB;QACvB,SAAS,EAAE;YACP,KAAK,EAAE,GAAG;YACV,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;gBACrC,GAAG,MAAM;gBACT,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,qEAAqE;aAC9F,CAAC,CAAC;YACH,KAAK,EAAE,qBAAqB;SAC/B;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE;QACV,OAAO,EAAE,cAAc;KAC1B;IACD,OAAO;IAEP,QAAQ,EAAE;QACN,SAAS,EAAE;YACP,KAAK,EAAE,KAAK;SACf;KACJ;CACJ,CAAC"}