@bspk/ui 1.1.32 → 1.1.33

package/dist/components/Combobox/Combobox.js

@@ -0,0 +1,83 @@
+import { createElement as _createElement } from "react";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/no-multi-comp */ import { useMemo } from 'react';
+import { Checkbox } from '../Checkbox';
+import { ListItem } from '../ListItem';
+import { Menu } from '../Menu';
+import { Modal } from '../Modal';
+import { useCombobox } from '../../hooks/useCombobox';
+import { useId } from '../../hooks/useId';
+import { useUIContext } from '../../hooks/useUIContext';
+import { cssWithVars } from '../../utils/cwv';
+const DEFAULT = {
+    selectAll: 'Select All',
+};
+export const MIN_ITEM_COUNT = 3;
+export const MAX_ITEM_COUNT = 10;
+/**
+ * A utility widget that allows users to select one or more items from a list of choices.
+ *
+ * @name Combobox
+ * @phase Utility
+ */
+function Combobox({ itemDisplayCount, items = [], onChange, value: selectedValues = [], disabled, id: idProp, isMulti, selectAll: selectAllProp, children, invalid, readOnly, errorMessage, refWidth, offsetOptions = 4, header, description, ...props }) {
+    const menuId = useId(idProp);
+    const { isMobile } = useUIContext();
+    const { toggleProps, activeIndex, menuProps, closeMenu, isOpen, elements } = useCombobox({
+        refOutsideClick: !isMobile,
+        refWidth,
+        placement: 'bottom-start',
+        disabled,
+        invalid,
+        readOnly,
+        errorMessage,
+        offsetOptions,
+    });
+    const selectAll = useMemo(() => {
+        if (!isMulti)
+            return false;
+        if (selectAllProp && typeof selectAllProp === 'string')
+            return selectAllProp;
+        return selectAllProp === true ? DEFAULT.selectAll : false;
+    }, [isMulti, selectAllProp]);
+    const allSelected = useMemo(() => !!(items.length && items.every((item) => selectedValues.includes(item.value))), [items, selectedValues]);
+    if (!isOpen)
+        return _jsx(_Fragment, { children: children({ toggleProps, setReference: elements.setReference }) });
+    /* data-bspk="combobox" -- I don't need a wrapper here and this passes lint. :) */
+    return (_jsxs(_Fragment, { children: [children({ toggleProps, setReference: elements.setReference }), isMobile ? (_jsx(Modal, { "data-bspk-owner": props['data-bspk-owner'] || undefined, description: description, header: header, onClose: closeMenu, open: isOpen, children: _jsx(ListItems, { activeIndex: activeIndex, allSelected: allSelected, "data-testid": "listbox-items", isMulti: isMulti, items: items, menuId: menuId, onChange: (next) => {
+                        onChange(next);
+                        if (!isMulti)
+                            closeMenu();
+                    }, selectAll: selectAll, selectedValues: selectedValues }) })) : (_jsx(Menu, { "aria-multiselectable": isMulti || undefined, "data-bspk": "listbox", "data-disabled": disabled || undefined, "data-no-items": !items.length || undefined, id: menuId, innerRef: (node) => {
+                    elements.setFloating(node);
+                }, itemCount: items.length, itemDisplayCount: itemDisplayCount, onOutsideClick: closeMenu, role: "listbox", style: cssWithVars({
+                    ...props.style,
+                    ...menuProps.style,
+                }), tabIndex: -1, children: _jsx(ListItems, { activeIndex: activeIndex, allSelected: allSelected, "data-testid": "listbox-items", isMulti: isMulti, items: items, menuId: menuId, onChange: (nextValue) => {
+                        onChange(nextValue);
+                        if (!isMulti)
+                            closeMenu();
+                    }, selectAll: selectAll, selectedValues: selectedValues }) }))] }));
+}
+Combobox.bspkName = 'Combobox';
+export { Combobox };
+// ListItems component to render the items in the listbox or modal.
+// This is a separate component to keep the Combobox component clean and focused on its main functionality
+function ListItems({ isMulti = false, items = [], activeIndex, selectedValues = [], onChange, selectAll = false, menuId = '', allSelected = false, }) {
+    const multiSelectValue = (selected, itemValue) => {
+        return selected ? selectedValues.filter((value) => value !== itemValue) : [...selectedValues, itemValue];
+    };
+    return (_jsxs(_Fragment, { children: [isMulti && selectAll && (_jsx(ListItem, { "data-selected": allSelected || undefined, label: selectAll, onClick: (event) => {
+                    onChange?.(allSelected ? [] : items.map((item) => item.value), event);
+                }, role: "option", tabIndex: -1, trailing: _jsx(Checkbox, { "aria-label": selectAll, checked: !!allSelected, indeterminate: !allSelected && selectedValues.length > 0, name: "", onChange: (checked) => {
+                        onChange?.(checked ? items.map((item) => item.value) : []);
+                    }, value: "" }) }, "select-all")), items.map((item, index) => {
+                const selected = Boolean(Array.isArray(selectedValues) && selectedValues.includes(item.value));
+                return (_createElement(ListItem, { ...item, active: activeIndex === index || undefined, "aria-disabled": item.disabled || undefined, "aria-posinset": index + 1, as: "button", disabled: item.disabled || undefined, id: `${menuId}-item-${index}`, key: `${menuId}-item-${index}`, label: item.label, onClick: (event) => {
+                        onChange?.(isMulti ? multiSelectValue(selected, item.value) : [item.value], event);
+                    }, role: "option", selected: selected || undefined, tabIndex: -1, trailing: isMulti ? (_jsx(Checkbox, { "aria-label": item.label, checked: selected, name: item.value, onChange: (checked) => {
+                            onChange?.(multiSelectValue(checked, item.value));
+                        }, value: item.value })) : (item.trailing || undefined) }));
+            })] }));
+}
+//# sourceMappingURL=Combobox.js.map

package/dist/components/Combobox/Combobox.js.map

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

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

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

package/dist/components/Combobox/index.js

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

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

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

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react';
+import { CommonProps, ElementProps, SetRef } from '../../index.js';
+import './dialog.scss';
+export type DialogProps = CommonProps<'data-bspk-owner' | 'id'> & {
+    /** The content of the dialog. */
+    children?: ReactNode;
+    /** A ref to the dialog element. */
+    innerRef?: SetRef<HTMLDivElement>;
+    /**
+     * If the dialog should appear.
+     *
+     * @example
+     *     false;
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Function to call when the dialog is closed.
+     *
+     * @type () => void
+     * @required
+     */
+    onClose: () => void;
+    /**
+     * The placement of the dialog on the screen.
+     *
+     * @default center
+     */
+    placement?: 'bottom' | 'center' | 'left' | 'right' | 'top';
+    /**
+     * Whether the dialog should have a scrim behind it.
+     *
+     * @default true
+     */
+    showScrim?: boolean;
+};
+/**
+ * Dialogs display important information that users need to acknowledge. They appear over the interface and block
+ * further interactions until an action is selected.
+ *
+ * @example
+ *     import { Dialog } from '@bspk/ui/Dialog';
+ *     import { Button } from '@bspk/ui/Button';
+ *
+ *     function Example() {
+ *         const [open, setOpen] = React.useState(false);
+ *
+ *         return (
+ *             <>
+ *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
+ *                 <Dialog open={open} onClose={() => setOpen(false)}>
+ *                     <h1>Dialog Title</h1>
+ *                     <p>This is the content of the dialog.</p>
+ *                     <button onClick={() => setOpen(false)}>Close</button>
+ *                 </Dialog>
+ *             </>
+ *         );
+ *     }
+ *
+ * @name Dialog
+ * @phase Utility
+ */
+declare function Dialog({ children, innerRef, onClose, open, placement, showScrim, id: idProp, ...containerProps }: ElementProps<DialogProps, 'div'>): false | import("react/jsx-runtime").JSX.Element;
+declare namespace Dialog {
+    var bspkName: string;
+}
+export { Dialog };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FocusTrap } from 'focus-trap-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Portal } from '../Portal';
+import { Scrim } from '../Scrim';
+import { useId } from '../../hooks/useId';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
+import './dialog.css.js';
+/**
+ * Dialogs display important information that users need to acknowledge. They appear over the interface and block
+ * further interactions until an action is selected.
+ *
+ * @example
+ *     import { Dialog } from '@bspk/ui/Dialog';
+ *     import { Button } from '@bspk/ui/Button';
+ *
+ *     function Example() {
+ *         const [open, setOpen] = React.useState(false);
+ *
+ *         return (
+ *             <>
+ *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
+ *                 <Dialog open={open} onClose={() => setOpen(false)}>
+ *                     <h1>Dialog Title</h1>
+ *                     <p>This is the content of the dialog.</p>
+ *                     <button onClick={() => setOpen(false)}>Close</button>
+ *                 </Dialog>
+ *             </>
+ *         );
+ *     }
+ *
+ * @name Dialog
+ * @phase Utility
+ */
+function Dialog({ 
+//
+children, innerRef, onClose, open, placement = 'center', showScrim = true, id: idProp, ...containerProps }) {
+    const id = useId(idProp);
+    const boxRef = useRef(null);
+    const [visibility, setVisibilityState] = useState(open ? 'show' : 'hidden');
+    const prevVisibility = useRef(visibility);
+    const setVisibility = useCallback((next) => {
+        setVisibilityState((prev) => {
+            prevVisibility.current = prev;
+            return next;
+        });
+    }, []);
+    const handleKeyDown = useCallback((e) => e.key === 'Escape' && onClose(), [onClose]);
+    useEffect(() => {
+        if (open) {
+            if (prevVisibility.current.startsWith('show'))
+                return;
+            setVisibility('showing');
+            return;
+        }
+        if (prevVisibility.current.startsWith('hid'))
+            return;
+        setVisibility('hiding');
+    }, [open, setVisibility]);
+    useEffect(() => {
+        if (prevVisibility.current === visibility)
+            return;
+        if (visibility === 'showing') {
+            document.body.style.overflow = 'hidden';
+            setTimeout(() => setVisibility('show'), 10);
+        }
+        if (visibility === 'hiding') {
+            document.body.style.overflow = '';
+            setTimeout(() => setVisibility('hidden'), 10);
+        }
+    }, [setVisibility, visibility]);
+    useEffect(() => {
+        if (visibility.startsWith('hid'))
+            return;
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [handleKeyDown, visibility]);
+    useOutsideClick([boxRef.current], onClose, !open);
+    return (visibility !== 'hidden' && (_jsxs(Portal, { children: [_jsx(Scrim, { "data-bspk-owner": "dialog", onClick: onClose, variant: "dialog", visible: showScrim !== false }), _jsx("div", { ...containerProps, "data-bspk": "dialog", "data-placement": placement, "data-visibility": visibility, id: id, ref: innerRef, role: "presentation", children: _jsx(FocusTrap, { focusTrapOptions: {
+                        fallbackFocus: () => boxRef.current,
+                        clickOutsideDeactivates: true,
+                    }, children: _jsx("div", { "data-dialog-box": true, ref: (node) => {
+                            boxRef.current = node;
+                        }, tabIndex: -1, children: children }) }) })] })));
+}
+Dialog.bspkName = 'Dialog';
+export { Dialog };
+//# sourceMappingURL=Dialog.js.map

package/dist/components/Dialog/Dialog.js.map

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

package/dist/components/Dialog/DialogExample.d.ts

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

package/dist/components/Dialog/DialogExample.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../Button';
+export const DialogExample = {
+    render: ({ props, setState, Component }) => {
+        const label = 'Open Dialog';
+        const { children, ...modalProps } = props;
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { label: label, onClick: () => setState({ open: true }) }), _jsx(Component, { "data-example-component": true, id: "exampleId", ...modalProps, onClose: () => setState({ open: false }), children: children })] }));
+    },
+    hideVariants: true,
+};
+//# sourceMappingURL=DialogExample.js.map

package/dist/components/Dialog/DialogExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogExample.js","sourceRoot":"","sources":["../../../src/components/Dialog/DialogExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAK7C,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;QACvC,MAAM,KAAK,GAAG,aAAa,CAAC;QAE5B,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;QAE1C,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,EACjE,KAAC,SAAS,oCAEN,EAAE,EAAC,WAAW,KACV,UAAU,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,YAEvC,QAAQ,GACD,IACb,CACN,CAAC;IACN,CAAC;IACD,YAAY,EAAE,IAAI;CACrB,CAAC"}

package/dist/components/Dialog/dialog.css

@@ -0,0 +1,119 @@
+[data-bspk=dialog] {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-index-dialog);
+}
+[data-bspk=dialog] [data-dialog-box] {
+  text-align: start;
+  position: relative;
+  border-radius: var(--radius-large);
+  box-shadow: var(--drop-shadow-float);
+  background: var(--surface-neutral-t1-base);
+  color: var(--foreground-neutral-on-surface);
+  max-height: calc(100vh - var(--spacing-sizing-24));
+  z-index: 2;
+  width: calc(100% - var(--spacing-sizing-08));
+}
+[data-bspk=dialog] [data-dialog-box] > :first-of-type {
+  margin-top: 0;
+}
+[data-bspk=dialog] [data-dialog-box] > :last-child {
+  margin-bottom: 0;
+}
+@media (width >= 640px) {
+  [data-bspk=dialog] [data-dialog-box] {
+    width: 90%;
+  }
+}
+@media (width >= 768px) {
+  [data-bspk=dialog] [data-dialog-box] {
+    width: 80%;
+  }
+}
+@media (width >= 1024px) {
+  [data-bspk=dialog] [data-dialog-box] {
+    width: 60%;
+  }
+}
+@media (width >= 1280px) {
+  [data-bspk=dialog] [data-dialog-box] {
+    width: 50%;
+  }
+}
+[data-bspk=dialog] [data-dialog-backdrop] {
+  z-index: 1;
+  position: fixed;
+  inset: 0;
+  background-color: var(--background-scrim);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+[data-bspk=dialog][data-visibility=show] [data-dialog-backdrop] {
+  opacity: 1;
+}
+[data-bspk=dialog][data-placement=center] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+[data-bspk=dialog][data-placement=center] [data-dialog-box] {
+  transition: opacity 1s;
+  opacity: 0;
+}
+[data-bspk=dialog][data-placement=center][data-visibility=show] [data-dialog-box] {
+  opacity: 1;
+}
+[data-bspk=dialog][data-placement=bottom] [data-dialog-box] {
+  position: absolute;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  width: 600px;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -100vh;
+  transition: bottom 0.3s;
+}
+[data-bspk=dialog][data-placement=bottom][data-visibility=show] [data-dialog-box] {
+  bottom: 0;
+}
+[data-bspk=dialog][data-placement=top] [data-dialog-box] {
+  position: absolute;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  width: 600px;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -100vh;
+  transition: top 0.3s;
+}
+[data-bspk=dialog][data-placement=top][data-visibility=show] [data-dialog-box] {
+  top: 0;
+}
+[data-bspk=dialog][data-placement=left] [data-dialog-box] {
+  position: absolute;
+  max-height: unset;
+  width: 280px;
+  height: 100vh;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  left: -100vw;
+  transition: left 0.3s;
+}
+[data-bspk=dialog][data-placement=left][data-visibility=show] [data-dialog-box] {
+  left: 0;
+}
+[data-bspk=dialog][data-placement=right] [data-dialog-box] {
+  position: absolute;
+  max-height: unset;
+  width: 280px;
+  height: 100vh;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  right: -100vw;
+  transition: right 0.3s;
+}
+[data-bspk=dialog][data-placement=right][data-visibility=show] [data-dialog-box] {
+  right: 0;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Dialog/dialog.css.js

@@ -0,0 +1,125 @@
+/** * 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=dialog] {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-index-dialog);
+}
+[data-bspk=dialog] [data-dialog-box] {
+  text-align: start;
+  position: relative;
+  border-radius: var(--radius-large);
+  box-shadow: var(--drop-shadow-float);
+  background: var(--surface-neutral-t1-base);
+  color: var(--foreground-neutral-on-surface);
+  max-height: calc(100vh - var(--spacing-sizing-24));
+  z-index: 2;
+  width: calc(100% - var(--spacing-sizing-08));
+}
+[data-bspk=dialog] [data-dialog-box] > :first-of-type {
+  margin-top: 0;
+}
+[data-bspk=dialog] [data-dialog-box] > :last-child {
+  margin-bottom: 0;
+}
+@media (width >= 640px) {
+  [data-bspk=dialog] [data-dialog-box] {
+    width: 90%;
+  }
+}
+@media (width >= 768px) {
+  [data-bspk=dialog] [data-dialog-box] {
+    width: 80%;
+  }
+}
+@media (width >= 1024px) {
+  [data-bspk=dialog] [data-dialog-box] {
+    width: 60%;
+  }
+}
+@media (width >= 1280px) {
+  [data-bspk=dialog] [data-dialog-box] {
+    width: 50%;
+  }
+}
+[data-bspk=dialog] [data-dialog-backdrop] {
+  z-index: 1;
+  position: fixed;
+  inset: 0;
+  background-color: var(--background-scrim);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+[data-bspk=dialog][data-visibility=show] [data-dialog-backdrop] {
+  opacity: 1;
+}
+[data-bspk=dialog][data-placement=center] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+[data-bspk=dialog][data-placement=center] [data-dialog-box] {
+  transition: opacity 1s;
+  opacity: 0;
+}
+[data-bspk=dialog][data-placement=center][data-visibility=show] [data-dialog-box] {
+  opacity: 1;
+}
+[data-bspk=dialog][data-placement=bottom] [data-dialog-box] {
+  position: absolute;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  width: 600px;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -100vh;
+  transition: bottom 0.3s;
+}
+[data-bspk=dialog][data-placement=bottom][data-visibility=show] [data-dialog-box] {
+  bottom: 0;
+}
+[data-bspk=dialog][data-placement=top] [data-dialog-box] {
+  position: absolute;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  width: 600px;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -100vh;
+  transition: top 0.3s;
+}
+[data-bspk=dialog][data-placement=top][data-visibility=show] [data-dialog-box] {
+  top: 0;
+}
+[data-bspk=dialog][data-placement=left] [data-dialog-box] {
+  position: absolute;
+  max-height: unset;
+  width: 280px;
+  height: 100vh;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  left: -100vw;
+  transition: left 0.3s;
+}
+[data-bspk=dialog][data-placement=left][data-visibility=show] [data-dialog-box] {
+  left: 0;
+}
+[data-bspk=dialog][data-placement=right] [data-dialog-box] {
+  position: absolute;
+  max-height: unset;
+  width: 280px;
+  height: 100vh;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  right: -100vw;
+  transition: right 0.3s;
+}
+[data-bspk=dialog][data-placement=right][data-visibility=show] [data-dialog-box] {
+  right: 0;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

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

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

package/dist/components/Dialog/index.js

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

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

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

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,58 @@
+import { ElementProps } from '../../index.js';
+import './divider.scss';
+export type DividerProps = {
+    /**
+     * The orientation of the divider.
+     *
+     * @default horizontal
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The thickness of the divider.
+     *
+     * @default light
+     */
+    thickness?: 'heavy' | 'light';
+    /**
+     * If the divider padding is shown.
+     *
+     * @default true
+     */
+    padding?: boolean;
+    /**
+     * The inset (margin) of the divider. The value is a number between 0 and 12, which corresponds to the spacing
+     * sizing variables defined in the theme. The inset is applied to the left and right sides of the divider when the
+     * orientation is horizontal, and to the top and bottom when the orientation is vertical.
+     *
+     * @default 0
+     */
+    inset?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+};
+/**
+ * Horizontal thin lines that separates grouped content in a list or other containers with an optional section/group
+ * label.
+ *
+ * Vertical thin lines that separates grouped content or other visual elements within a container.
+ *
+ * @example
+ *     import { Divider } from '@bspk/ui/Divider';
+ *
+ *     function Example() {
+ *         return (
+ *             <div>
+ *                 <p>Content above the divider</p>
+ *                 <Divider orientation="horizontal" />
+ *                 <p>Content below the divider</p>
+ *             </div>
+ *         );
+ *     }
+ *
+ * @name Divider
+ * @phase DesignReview
+ */
+declare function Divider({ padding, orientation, thickness, inset, ...props }: ElementProps<DividerProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+declare namespace Divider {
+    var bspkName: string;
+}
+export { Divider };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Divider/Divider.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cssWithVars } from '../../utils/cwv';
+import './divider.css.js';
+const insetToVariable = (insetProp) => {
+    const inset = Number(insetProp);
+    if (inset === undefined || inset === null || inset < 1 || inset > 12)
+        return '0px';
+    return `var(--spacing-sizing-${inset.toString().padStart(2, '0')})`;
+};
+/**
+ * Horizontal thin lines that separates grouped content in a list or other containers with an optional section/group
+ * label.
+ *
+ * Vertical thin lines that separates grouped content or other visual elements within a container.
+ *
+ * @example
+ *     import { Divider } from '@bspk/ui/Divider';
+ *
+ *     function Example() {
+ *         return (
+ *             <div>
+ *                 <p>Content above the divider</p>
+ *                 <Divider orientation="horizontal" />
+ *                 <p>Content below the divider</p>
+ *             </div>
+ *         );
+ *     }
+ *
+ * @name Divider
+ * @phase DesignReview
+ */
+function Divider({ padding = true, orientation = 'horizontal', thickness = 'light', inset = 0, ...props }) {
+    return (_jsx("div", { ...props, "aria-orientation": orientation, "data-bspk": "divider", "data-hide-padding": !padding || undefined, "data-orientation": orientation, "data-thickness": thickness, role: "separator", style: cssWithVars({
+            ...props.style,
+            '--inset': insetToVariable(inset),
+        }) }));
+}
+Divider.bspkName = 'Divider';
+export { Divider };
+//# sourceMappingURL=Divider.js.map

package/dist/components/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,gBAAgB,CAAC;AA+BxB,MAAM,eAAe,GAAG,CAAC,SAA0B,EAAE,EAAE;IACnD,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;QAAE,OAAO,KAAK,CAAC;IACnF,OAAO,wBAAwB,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC;AACxE,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,SAAS,OAAO,CAAC,EACb,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACH,iBACQ,KAAK,sBACS,WAAW,eACnB,SAAS,uBACA,CAAC,OAAO,IAAI,SAAS,sBACtB,WAAW,oBACb,SAAS,EACzB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,WAAW,CAAC;YACf,GAAG,KAAK,CAAC,KAAK;YACd,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;SACpC,CAAC,GACJ,CACL,CAAC;AACN,CAAC;AAED,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;AAE7B,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/Divider/DividerExample.d.ts

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