@bspk/ui 1.3.3 → 1.3.4

package/dist/components/Select/Select.d.ts

@@ -1,7 +1,7 @@
 import './select.scss';
 import { KeyboardEvent, MouseEvent } from 'react';
 import { ListItemProps } from '-/components/ListItem';
-import { CommonProps, ElementProps, FormFieldControlProps } from '-/types/common';
+import { CommonProps, ElementProps, FieldControlProps } from '-/types/common';
 import { ScrollListItemsStyleProps } from '-/utils/scrollListItemsStyle';
 /**
  * An option in a Select component.
@@ -14,7 +14,7 @@ export type SelectOption = CommonProps<'disabled'> & Omit<ListItemProps, 'id' |
 export type SelectItem = SelectOption & {
     id: string;
 };
-export type SelectProps = CommonProps<'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'> & FormFieldControlProps & ScrollListItemsStyleProps & {
+export type SelectProps = CommonProps<'size'> & FieldControlProps<string, KeyboardEvent | MouseEvent> & ScrollListItemsStyleProps & {
     /**
      * Array of options to display in the select
      *
@@ -36,23 +36,6 @@ export type SelectProps = CommonProps<'disabled' | 'id' | 'invalid' | 'name' | '
      * @required
      */
     options: SelectOption[];
-    /** Selected value */
-    value: string;
-    /**
-     * The function to call when the selected values change.
-     *
-     * @example
-     *     (value, event) => setState({ value });
-     *
-     * @required
-     */
-    onChange: (value: string, event?: KeyboardEvent | MouseEvent) => void;
-    /**
-     * The label for the select element, used for accessibility, and the dropdown modal header.
-     *
-     * @required
-     */
-    label: string;
     /**
      * Placeholder for the select
      *
@@ -63,29 +46,30 @@ export type SelectProps = CommonProps<'disabled' | 'id' | 'invalid' | 'name' | '
 /**
  * A field element that allows users to select one option from a list of available choices.
  *
+ * For a more complete example with field usage, see the SelectField component.
+ *
  * @example
  *     import { Select } from '@bspk/ui/Select';
  *
- *     export function Example() {
+ *     const OPTIONS = [
+ *         { id: '1', label: 'Option 1' },
+ *         { id: '2', label: 'Option 2' },
+ *         { id: '3', label: 'Option 3' },
+ *         { id: '4', label: 'Option 4' },
+ *         { id: '5', label: 'Option 5' },
+ *         { id: '6', label: 'Option 6' },
+ *     ];
+ *
+ *     function ExampleStandalone() {
  *         const [selected, setSelected] = React.useState<string[]>([]);
+ *
  *         return (
  *             <Select
- *                 label="Select an option"
+ *                 aria-label="Select an option"
  *                 itemCount={5}
  *                 name="example-select"
  *                 onChange={setSelected}
- *                 options={[
- *                     { id: '1', label: 'Option 1' },
- *                     { id: '2', label: 'Option 2' },
- *                     { id: '3', label: 'Option 3' },
- *                     { id: '4', label: 'Option 4' },
- *                     { id: '5', label: 'Option 5' },
- *                     { id: '6', label: 'Option 6' },
- *                     { id: '7', label: 'Option 7' },
- *                     { id: '8', label: 'Option 8' },
- *                     { id: '9', label: 'Option 9' },
- *                     { id: '10', label: 'Option 10' },
- *                 ]}
+ *                 options={OPTIONS}
  *                 placeholder="Select an option"
  *                 size="medium"
  *                 value={selected}
@@ -93,8 +77,29 @@ export type SelectProps = CommonProps<'disabled' | 'id' | 'invalid' | 'name' | '
  *         );
  *     }
  *
+ *     function ExampleWithField() {
+ *         const [selected, setSelected] = React.useState<string[]>([]);
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Select an option</FieldLabel>
+ *                 <Select
+ *                     itemCount={5}
+ *                     name="example-select"
+ *                     onChange={setSelected}
+ *                     options={OPTIONS}
+ *                     placeholder="Select an option"
+ *                     size="medium"
+ *                     value={selected}
+ *                 />
+ *                 <FieldDescription>
+ *                     The select allows you to choose one option from a list of options.
+ *                 </FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
  * @name Select
  * @phase UXReview
  */
-export declare function Select({ options: optionsProp, value, onChange, label, placeholder, size, disabled, id: idProp, invalid, readOnly, name, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-labelledby': ariaLabelledBy, scrollLimit, ...props }: ElementProps<SelectProps, 'button'>): import("react/jsx-runtime").JSX.Element;
+export declare function Select({ options: optionsProp, value, onChange, placeholder, size, disabled, id: idProp, invalid: invalidProp, readOnly, name, scrollLimit, required, 'aria-label': ariaLabel, ...elementProps }: ElementProps<SelectProps, 'button'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Select/Select.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import './select.css.js';
 import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
 import { useMemo } from 'react';
+import { useFieldInit } from '../Field';
 import { ListItem } from '../ListItem';
 import { Menu } from '../Menu';
 import { useArrowNavigation } from '../../hooks/useArrowNavigation';
 import { useFloating } from '../../hooks/useFloating';
-import { useId } from '../../hooks/useId';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { getElementById } from '../../utils/dom';
 import { handleKeyDown } from '../../utils/handleKeyDown';
@@ -14,29 +14,30 @@ import { scrollListItemsStyle } from '../../utils/scrollListItemsStyle';
 /**
  * A field element that allows users to select one option from a list of available choices.
  *
+ * For a more complete example with field usage, see the SelectField component.
+ *
  * @example
  *     import { Select } from '@bspk/ui/Select';
  *
- *     export function Example() {
+ *     const OPTIONS = [
+ *         { id: '1', label: 'Option 1' },
+ *         { id: '2', label: 'Option 2' },
+ *         { id: '3', label: 'Option 3' },
+ *         { id: '4', label: 'Option 4' },
+ *         { id: '5', label: 'Option 5' },
+ *         { id: '6', label: 'Option 6' },
+ *     ];
+ *
+ *     function ExampleStandalone() {
  *         const [selected, setSelected] = React.useState<string[]>([]);
+ *
  *         return (
  *             <Select
- *                 label="Select an option"
+ *                 aria-label="Select an option"
  *                 itemCount={5}
  *                 name="example-select"
  *                 onChange={setSelected}
- *                 options={[
- *                     { id: '1', label: 'Option 1' },
- *                     { id: '2', label: 'Option 2' },
- *                     { id: '3', label: 'Option 3' },
- *                     { id: '4', label: 'Option 4' },
- *                     { id: '5', label: 'Option 5' },
- *                     { id: '6', label: 'Option 6' },
- *                     { id: '7', label: 'Option 7' },
- *                     { id: '8', label: 'Option 8' },
- *                     { id: '9', label: 'Option 9' },
- *                     { id: '10', label: 'Option 10' },
- *                 ]}
+ *                 options={OPTIONS}
  *                 placeholder="Select an option"
  *                 size="medium"
  *                 value={selected}
@@ -44,18 +45,45 @@ import { scrollListItemsStyle } from '../../utils/scrollListItemsStyle';
  *         );
  *     }
  *
+ *     function ExampleWithField() {
+ *         const [selected, setSelected] = React.useState<string[]>([]);
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Select an option</FieldLabel>
+ *                 <Select
+ *                     itemCount={5}
+ *                     name="example-select"
+ *                     onChange={setSelected}
+ *                     options={OPTIONS}
+ *                     placeholder="Select an option"
+ *                     size="medium"
+ *                     value={selected}
+ *                 />
+ *                 <FieldDescription>
+ *                     The select allows you to choose one option from a list of options.
+ *                 </FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
  * @name Select
  * @phase UXReview
  */
-export function Select({ options: optionsProp = [], value = '', onChange, label, placeholder = 'Select one', size = 'medium', disabled, id: idProp, invalid, readOnly, name, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-labelledby': ariaLabelledBy, scrollLimit, ...props }) {
-    const id = useId(idProp);
+export function Select({ options: optionsProp = [], value = '', onChange, placeholder = 'Select one', size = 'medium', disabled, id: idProp, invalid: invalidProp, readOnly, name, scrollLimit, required = false, 'aria-label': ariaLabel, ...elementProps }) {
+    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
+        idProp,
+        required,
+        disabled,
+        readOnly,
+        invalidProp,
+    });
     const menuId = useMemo(() => `${id}-menu`, [id]);
     const { items, availableItems } = useMemo(() => {
         const nextItems = optionsProp.map((item, index) => ({
             ...item,
             id: `${id}-item-${index}`,
             'aria-label': item.label,
-            'aria-selected': value.includes(item.value),
+            'aria-selected': value == item.value,
         }));
         return { items: nextItems, availableItems: nextItems.filter((item) => !item.disabled) };
     }, [optionsProp, id, value]);
@@ -83,7 +111,7 @@ export function Select({ options: optionsProp = [], value = '', onChange, label,
         if (activeElementId)
             getElementById(activeElementId)?.click();
     };
-    return (_jsxs(_Fragment, { children: [_jsx("input", { name: name, type: "hidden", value: value }), !ariaLabelledBy && (_jsx("div", { "data-sr-only": true, id: `${id}-label`, children: label })), _jsxs("button", { ...props, "aria-activedescendant": activeElementId || undefined, "aria-autocomplete": "list", "aria-controls": activeElementId ? menuId : undefined, "aria-describedby": ariaDescribedBy || undefined, "aria-disabled": disabled || readOnly || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-labelledby": ariaLabelledBy || `${id}-label`, "aria-readonly": readOnly || undefined, "data-bspk": "select", "data-invalid": invalid || undefined, "data-open": open || undefined, "data-size": size, id: id, onBlur: (event) => {
+    return (_jsxs(_Fragment, { children: [_jsx("input", { name: name, type: "hidden", value: value }), _jsxs("button", { "aria-label": `${ariaLabel} ${selectedItem?.label || placeholder}`, ...elementProps, "aria-activedescendant": activeElementId || undefined, "aria-autocomplete": "list", "aria-controls": open ? menuId : undefined, "aria-describedby": ariaDescribedBy || undefined, "aria-disabled": disabled || readOnly || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-readonly": readOnly || undefined, "data-bspk": "select", "data-invalid": invalid || undefined, "data-open": open || undefined, "data-size": size, id: id, onBlur: (event) => {
                     const targetOutsideOfMenu = event.relatedTarget && !elements.floating?.contains(event.relatedTarget);
                     if (targetOutsideOfMenu)
                         closeMenu();
@@ -106,7 +134,7 @@ export function Select({ options: optionsProp = [], value = '', onChange, label,
                     Space: spaceEnter,
                     Enter: spaceEnter,
                     'Ctrl+Option+Space': spaceEnter,
-                }, { preventDefault: true, stopPropagation: true }), ref: elements.setReference, role: "combobox", tabIndex: 0, type: "button", children: [_jsx(ListItem, { as: "span", "data-bspk-owner": "select", "data-placeholder": !selectedItem || undefined, id: `${id}-selected-value`, label: selectedItem?.label || placeholder, leading: selectedItem?.leading, onClick: undefined, owner: "select", trailing: selectedItem?.trailing }), _jsx(SvgKeyboardArrowDown, {})] }), _jsx(Menu, { "aria-autocomplete": undefined, "aria-label": label, as: "div", id: menuId, innerRef: elements.setFloating, label: label, onClickCapture: () => {
+                }, { preventDefault: true, stopPropagation: true }), ref: elements.setReference, role: "combobox", tabIndex: 0, type: "button", children: [_jsx(ListItem, { as: "span", "data-bspk-owner": "select", "data-placeholder": !selectedItem || undefined, id: `${id}-selected-value`, label: selectedItem?.label || placeholder, leading: selectedItem?.leading, onClick: undefined, owner: "select", trailing: selectedItem?.trailing }), _jsx(SvgKeyboardArrowDown, {})] }), _jsx(Menu, { "aria-autocomplete": undefined, as: "div", id: menuId, innerRef: elements.setFloating, onClickCapture: () => {
                     // Prevent the menu from closing when clicking inside it
                     // maintain focus on the select control
                     elements.reference?.focus();
@@ -117,7 +145,7 @@ export function Select({ options: optionsProp = [], value = '', onChange, label,
                     ...floatingStyles,
                 }, tabIndex: -1, children: items.map((item) => {
                     const isActive = activeElementId === item.id;
-                    const isSelected = value.includes(item.value);
+                    const isSelected = value === item.value;
                     return (_jsx(ListItem, { ...item, active: isActive || undefined, "aria-label": undefined, "aria-selected": isSelected, as: "li", onClick: () => {
                             if (item.disabled)
                                 return;

package/dist/components/Select/Select.js.map

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

package/dist/components/Select/SelectExample.js

@@ -22,7 +22,6 @@ export const presets = [
     {
         label: 'Simple',
         propState: {
-            label: 'Demo Select',
             options: DEFAULT_OPTIONS,
             name: 'demo-select',
             value: '',
@@ -31,7 +30,6 @@ export const presets = [
     {
         label: 'Long text',
         propState: {
-            label: 'Demo Select',
             options: [
                 { value: '1', label: 'This is a very long option that should truncate' },
                 { value: '2', label: 'This is another long option that should truncate' },
@@ -45,7 +43,6 @@ export const presets = [
     {
         label: 'Trailing Tags',
         propState: {
-            label: 'Demo Select',
             options: [
                 //
                 {
@@ -68,7 +65,6 @@ export const presets = [
     {
         label: 'Trailing Text',
         propState: {
-            label: 'Demo Select',
             options: [
                 {
                     value: '1',
@@ -86,7 +82,6 @@ export const presets = [
     {
         label: 'Leading Avatar',
         propState: {
-            label: 'Select user',
             options: [
                 //
                 {
@@ -117,14 +112,11 @@ export const presets = [
 ];
 export const SelectExample = {
     defaultState: {
-        label: 'Demo Select',
         options: DEFAULT_OPTIONS,
         scrollLimit: 5,
         value: '',
     },
-    render: ({ props, Component }) => {
-        return _jsx(Component, { ...props });
-    },
+    render: ({ props, Component }) => _jsx(Component, { ...props }),
     presets,
 };
 //# sourceMappingURL=SelectExample.js.map

package/dist/components/Select/SelectExample.js.map

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

package/dist/components/SelectField/SelectField.d.ts

@@ -1,35 +1,15 @@
-import { FormFieldWrapProps } from '-/components/FormField';
+import { FormFieldControlProps } from '-/components/FormField';
 import { SelectProps } from '-/components/Select';
-export type SelectFieldProps = FormFieldWrapProps<SelectProps>;
+export type SelectFieldProps = FormFieldControlProps<SelectProps>;
 /**
- * A component that allows users to input large amounts of text that could span multiple lines.
+ * A field wrapper for the Select component.
  *
  * This component takes properties from the FormField and Select components.
  *
- * @example
- *     import { SelectField } from '@bspk/ui/SelectField';
- *
- *     export function Example() {
- *         const [state, setState] = React.useState(['option1']);
- *         return (
- *             <SelectField
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={(nextValue) => setState(nextValue)}
- *                 options={[
- *                     { label: 'Option 1', value: 'option1' },
- *                     { label: 'Option 2', value: 'option2' },
- *                     { label: 'Option 3', value: 'option3' },
- *                 ]}
- *                 placeholder="Select one..."
- *                 value={state}
- *             />
- *         );
- *     }
- *
  * @name SelectField
  * @phase UXReview
+ *
+ * @generated
  */
-export declare function SelectField({ label, helperText, controlId, labelTrailing, required, invalid, errorMessage, ...inputProps }: SelectFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectField({ label, helperText, labelTrailing, errorMessage, ...controlProps }: SelectFieldProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/SelectField/SelectField.js

@@ -2,38 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { FormField } from '../FormField';
 import { Select } from '../Select';
 /**
- * A component that allows users to input large amounts of text that could span multiple lines.
+ * A field wrapper for the Select component.
  *
  * This component takes properties from the FormField and Select components.
  *
- * @example
- *     import { SelectField } from '@bspk/ui/SelectField';
- *
- *     export function Example() {
- *         const [state, setState] = React.useState(['option1']);
- *         return (
- *             <SelectField
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={(nextValue) => setState(nextValue)}
- *                 options={[
- *                     { label: 'Option 1', value: 'option1' },
- *                     { label: 'Option 2', value: 'option2' },
- *                     { label: 'Option 3', value: 'option3' },
- *                 ]}
- *                 placeholder="Select one..."
- *                 value={state}
- *             />
- *         );
- *     }
- *
  * @name SelectField
  * @phase UXReview
+ *
+ * @generated
  */
-export function SelectField({ label, helperText, controlId, labelTrailing, required, invalid, errorMessage, ...inputProps }) {
-    return (_jsx(FormField, { controlId: controlId, "data-bspk": "select-field", errorMessage: errorMessage, helperText: helperText, invalid: invalid, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (_jsx(Select
-        //
-        , { ...inputProps, ...fieldProps, id: controlId, invalid: invalid, label: label })) }));
+export function SelectField({ label, helperText, labelTrailing, errorMessage, ...controlProps }) {
+    return (_jsx(FormField, { errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, children: _jsx(Select, { ...controlProps }) }));
 }
 //# sourceMappingURL=SelectField.js.map

package/dist/components/SelectField/SelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../src/components/SelectField/SelectField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAsB,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAe,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,WAAW,CAAC,EACxB,KAAK,EACL,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,GAAG,UAAU,EACE;IACf,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,cAAc,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,MAAM;QACH,EAAE;eACE,UAAU,KACV,UAAU,EACd,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,GACd,CACL,GACO,CACf,CAAC;AACN,CAAC"}
+{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../src/components/SelectField/SelectField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAyB,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAI1D;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,YAAY,EAAoB;IAC7G,OAAO,CACH,KAAC,SAAS,IAAC,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,YACrG,KAAC,MAAM,OAAK,YAAY,GAAI,GACpB,CACf,CAAC;AACN,CAAC"}

package/dist/components/Skeleton/SkeletonExample.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Avatar } from '../Avatar';
 import { ExamplePlaceholder } from '../ExamplePlaceholder';
@@ -23,7 +23,7 @@ export const SkeletonExample = {
 function SkeletonTransition({ Component, props, }) {
     const [loaded, setLoaded] = useState(false);
     useTimeout(() => setLoaded(true), 3000);
-    return (_jsx(Component, { ...props, children: loaded && _jsx(_Fragment, { children: PROP_VARIANT_CHILDREN[props.variant] }) }));
+    return _jsx(Component, { ...props, children: loaded && PROP_VARIANT_CHILDREN[props.variant] });
 }
 const PROP_VARIANT_CHILDREN = {
     rectangular: _jsx(ExamplePlaceholder, { height: "100px", width: "100px" }),

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonExample.js","sourceRoot":"","sources":["../../../src/components/Skeleton/SkeletonExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,MAAM,CAAC,MAAM,OAAO,GAA4B;IAC5C;QACI,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE;YACP,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAClB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE;QACrC,IAAI,MAAM,EAAE,KAAK,KAAK,oBAAoB;YAAE,OAAO,KAAC,kBAAkB,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAE9G,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;IACpC,CAAC;IACD,OAAO;CACV,CAAC;AAEF,SAAS,kBAAkB,CAAC,EACxB,SAAS,EACT,KAAK,GACiE;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;IAExC,OAAO,CACH,KAAC,SAAS,OAAK,KAAK,YAAG,MAAM,IAAI,4BAAG,qBAAqB,CAAC,KAAM,CAAC,OAA0B,CAAC,GAAI,GAAa,CAChH,CAAC;AACN,CAAC;AAED,MAAM,qBAAqB,GAAuD;IAC9E,WAAW,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAG;IAChE,QAAQ,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,KAAK,EAAC,OAAO,GAAG;IAC9F,KAAK,EAAE,CACH,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,uBAE3B,CACxB;IACD,OAAO,EAAE,KAAC,MAAM,IAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,eAAe,GAAG;IACpD,SAAS,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAG;CACjE,CAAC"}
+{"version":3,"file":"SkeletonExample.js","sourceRoot":"","sources":["../../../src/components/Skeleton/SkeletonExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,MAAM,CAAC,MAAM,OAAO,GAA4B;IAC5C;QACI,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE;YACP,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAClB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE;QACrC,IAAI,MAAM,EAAE,KAAK,KAAK,oBAAoB;YAAE,OAAO,KAAC,kBAAkB,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAE9G,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;IACpC,CAAC;IACD,OAAO;CACV,CAAC;AAEF,SAAS,kBAAkB,CAAC,EACxB,SAAS,EACT,KAAK,GACiE;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;IAExC,OAAO,KAAC,SAAS,OAAK,KAAK,YAAG,MAAM,IAAI,qBAAqB,CAAC,KAAM,CAAC,OAA0B,CAAC,GAAa,CAAC;AAClH,CAAC;AAED,MAAM,qBAAqB,GAAuD;IAC9E,WAAW,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAG;IAChE,QAAQ,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,KAAK,EAAC,OAAO,GAAG;IAC9F,KAAK,EAAE,CACH,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,uBAE3B,CACxB;IACD,OAAO,EAAE,KAAC,MAAM,IAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,eAAe,GAAG;IACpD,SAAS,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAG;CACjE,CAAC"}

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

@@ -1,27 +1,85 @@
 import './snackbar.scss';
-import { SnackbarData } from '-/utils/snackbarContext';
-export type SnackbarProps = {
-    /** Text to be shown in the snackbar */
+import { ReactNode } from 'react';
+import { CommonProps, SetRef } from '-/types/common';
+export type SnackbarProps = CommonProps<'id'> & {
+    /**
+     * Text to be shown in the snackbar
+     *
+     * @required
+     */
     text: string;
-    /** Optional action button */
-    button?: SnackbarData['button'];
-    /** Callback when the snackbar is dismissed */
+    /**
+     * Whether to show a close button on the snackbar.
+     *
+     * Since there is no default timeout, this is true by default. You can provide a timeout to auto-dismiss the
+     * snackbar in addition to the close button.
+     *
+     * @default true
+     */
+    closeButton?: boolean;
+    /**
+     * Label for the close button.
+     *
+     * @default Dismiss
+     */
+    closeButtonLabel?: string;
+    /**
+     * The icon of the button.
+     *
+     * @type BspkIcon
+     */
+    icon?: ReactNode;
+    /**
+     * Callback when the snackbar is dismissed
+     *
+     * @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.
+     *
+     * If no timeout is provided, and closeButton is set to false the snackbar will not be dismissable.
+     */
+    timeout?: number;
+    /**
+     * If the snackbar is open or not.
+     *
+     * @default false
+     */
+    open?: boolean;
+    /** A ref to the snackbar element. */
+    innerRef?: SetRef<HTMLDivElement>;
+    /**
+     * If focus trapping should be disabled. Generally this should not be disabled as snackbars should always trap
+     * focus.
+     *
+     * @default false
+     */
+    disableFocusTrap?: boolean;
 };
 /**
- * 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.
+ * Snackbars are intended to provide feedback about an action. Because of focus trap these will interrupt the customer
+ * experience.
  *
  * @example
  *     import { Snackbar } from '@bspk/ui/Snackbar';
+ *     import { Button } from '@bspk/ui/Button';
+ *     import { useState } from 'react';
  *
- *     function Example() {
- *         return <Snackbar text="Something happened!" />;
+ *     function ExampleComponent(props) {
+ *         const [snackbarOpen, setSnackbarOpen] = useState(false);
+ *
+ *         return (
+ *             <>
+ *                 <Button label="Show snackbar" onClick={() => setSnackbarOpen(true)} size="medium" title="Snackbar" />
+ *                 <Snackbar text="I am an example." open={snackbarOpen} onClose={() => setSnackbarOpen(false)} />
+ *             </>
+ *         );
  *     }
  *
  * @name Snackbar
- * @phase Utility
+ *
+ * @phase UXReview
  */
-export declare function Snackbar({ text, button, onClose }: SnackbarProps): import("react/jsx-runtime").JSX.Element;
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+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

@@ -1,23 +1,52 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './snackbar.css.js';
+import { FocusTrap } from 'focus-trap-react';
+import { isValidElement, useEffect, useRef } from 'react';
 import { Button } from '../Button';
-import { Txt } from '../Txt';
+import { Portal } from '../Portal';
+import { Truncated } from '../Truncated';
+import { useId } from '../../hooks/useId';
 /**
- * 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.
+ * Snackbars are intended to provide feedback about an action. Because of focus trap these will interrupt the customer
+ * experience.
  *
  * @example
  *     import { Snackbar } from '@bspk/ui/Snackbar';
+ *     import { Button } from '@bspk/ui/Button';
+ *     import { useState } from 'react';
  *
- *     function Example() {
- *         return <Snackbar text="Something happened!" />;
+ *     function ExampleComponent(props) {
+ *         const [snackbarOpen, setSnackbarOpen] = useState(false);
+ *
+ *         return (
+ *             <>
+ *                 <Button label="Show snackbar" onClick={() => setSnackbarOpen(true)} size="medium" title="Snackbar" />
+ *                 <Snackbar text="I am an example." open={snackbarOpen} onClose={() => setSnackbarOpen(false)} />
+ *             </>
+ *         );
  *     }
  *
  * @name Snackbar
- * @phase Utility
+ *
+ * @phase UXReview
  */
-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 }))] }));
+export function Snackbar({ id: propId, text, timeout, closeButton = true, closeButtonLabel = 'Dismiss', icon, onClose, open = false, innerRef, disableFocusTrap = false, }) {
+    const id = useId(propId);
+    const boxRef = useRef(null);
+    useEffect(() => {
+        if (open && timeout) {
+            const timer = setTimeout(() => {
+                onClose?.();
+            }, timeout);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [open, timeout, onClose]);
+    if (!open)
+        return null;
+    return (_jsx(Portal, { children: _jsx("div", { "aria-live": "off", "data-bspk": "snackbar", id: id, ref: innerRef, children: _jsx(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: {
+                    clickOutsideDeactivates: true,
+                    fallbackFocus: () => boxRef.current,
+                }, children: _jsxs("div", { "data-snackbar-content": true, role: "alert", children: [_jsxs("div", { "data-snackbar-icon-text": true, children: [!!icon && isValidElement(icon) && (_jsx("span", { "aria-hidden": true, "data-snackbar-icon": true, children: icon })), _jsx(Truncated, { "data-label": true, children: text })] }), closeButton && _jsx(Button, { label: closeButtonLabel, onClick: onClose, variant: "tertiary" })] }, id) }) }) }));
 }
 //# sourceMappingURL=Snackbar.js.map