@bspk/ui 1.1.32 → 1.1.33

package/dist/Button.js

@@ -1,48 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=button]{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-sizing-02);border:none;cursor:pointer;box-sizing:border-box;background:rgba(0,0,0,0);text-decoration:none;width:fit-content;font-family:var(--typeface);position:relative}[data-bspk=button] [data-touch-target]{min-width:var(--spacing-sizing-12);min-height:var(--spacing-sizing-12)}[data-bspk=button][data-width=hug]{width:fit-content}[data-bspk=button][data-width=fill]{width:100%}[data-bspk=button][data-size=x-small]{font-size:var(--typography-size-xs);line-height:var(--typography-line-height-lh-1);height:var(--spacing-sizing-06);min-width:var(--spacing-sizing-06);gap:var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small]:has([data-button-label]),[data-bspk=button][data-size=x-small][data-override]{padding:0 var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small] [data-button-icon]{width:var(--spacing-sizing-04);height:var(--spacing-sizing-04)}[data-bspk=button][data-size=small]{font-size:var(--typography-size-sm);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-08);min-width:var(--spacing-sizing-08)}[data-bspk=button][data-size=small]:has([data-button-label]),[data-bspk=button][data-size=small][data-override]{padding:6px var(--spacing-sizing-04)}[data-bspk=button][data-size=small] [data-button-icon]{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=medium]{font-size:var(--typography-size-base);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-10);min-width:var(--spacing-sizing-10)}[data-bspk=button][data-size=medium]:has([data-button-label]),[data-bspk=button][data-size=medium][data-override]{padding:var(--spacing-sizing-02) var(--spacing-sizing-04)}[data-bspk=button][data-size=medium] [data-button-icon]{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=large]{font-size:var(--typography-size-bp-md);line-height:var(--typography-line-height-lh-4);height:var(--spacing-sizing-12);min-width:var(--spacing-sizing-12)}[data-bspk=button][data-size=large]:has([data-button-label]),[data-bspk=button][data-size=large][data-override]{padding:var(--spacing-sizing-03) var(--spacing-sizing-04)}[data-bspk=button][data-size=large] [data-button-icon]{width:var(--spacing-sizing-06);height:var(--spacing-sizing-06)}[data-bspk=button][disabled]{cursor:not-allowed}[data-bspk=button] [data-button-icon]{display:flex;flex-direction:column;align-items:center}[data-bspk=button] [data-button-label]{display:flex;flex-direction:row;align-items:center}[data-bspk=button][data-variant=primary]{--primary-background: var(--surface-brand-primary);background:linear-gradient(var(--primary-background), var(--primary-background));color:var(--foreground-brand-on-primary);border-radius:var(--radius-small)}[data-bspk=button][data-variant=primary][disabled]{color:var(--foreground-neutral-disabled-on-surface);background:var(--interactions-disabled-opacity)}[data-pseudo=hover]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):hover{background:linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)),linear-gradient(var(--primary-background), var(--primary-background))}[data-pseudo=active]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):active{background:linear-gradient(var(--interactions-brand-press-opacity), var(--interactions-brand-press-opacity)),linear-gradient(var(--primary-background), var(--primary-background))}[data-pseudo=focus]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=primary][data-destructive]{--primary-background: var(--status-error);color:var(--foreground-brand-on-primary)}[data-bspk=button][data-variant=secondary]{border:solid 1px var(--stroke-neutral-base);border-radius:var(--radius-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=secondary][disabled]{color:var(--foreground-neutral-disabled-on-surface);border:solid 1px var(--stroke-neutral-disabled-light)}[data-pseudo=hover]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):hover{background-color:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):active{background-color:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=secondary][data-destructive]{background:rgba(0,0,0,0);color:var(--status-error);border:solid 1px var(--status-error)}[data-bspk=button][data-variant=tertiary]{background:rgba(0,0,0,0);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=tertiary][disabled]{color:var(--foreground-neutral-disabled-on-surface)}[data-pseudo=hover]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):hover{background:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):active{background:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=tertiary][data-destructive]{color:var(--status-error)}`);;
-import { isValidElement } from 'react';
-import { Tooltip } from './Tooltip';
-import { isValidIcon } from './utils/children';
-import { useErrorLogger } from './utils/errors';
-/**
- * A clickable component that allows users to perform an action, make a choice or trigger a change in state.
- *
- * @example
- *     import { Button } from '@bspk/ui/Button';
- *     import { SvgPerson } from '@bspk/icons/Person';
- *
- *     function Example() {
- *         return (
- *             <Button
- *                 label="Click Me"
- *                 size="medium"
- *                 variant="primary"
- *                 onClick={() => console.log('Button clicked')}
- *                 icon={<SvgPerson />}
- *             />
- *         );
- *     }
- *
- * @name Button
- */
-function Button(props) {
-    const { size = 'medium', variant = 'primary', destructive = false, width = 'hug', as: As = 'button', disabled = false, label: labelProp, icon, 
-    // showLabel: showLabelProp = true,
-    showLabel = true, toolTip: toolTipProp, children, ...containerProps } = props;
-    const label = typeof children === 'string' ? children : labelProp || '';
-    // ignore showLabel=false if there is no icon
-    const hideLabel = showLabel === false && icon;
-    const toolTip = toolTipProp || (hideLabel ? label : undefined);
-    const { logError } = useErrorLogger();
-    logError(!!icon && !isValidIcon(icon), 'Button - The icon prop must be a valid icon element.');
-    logError(!label, 'Button - The button must have a label.');
-    const button = (_jsx(As, { ...containerProps, "aria-label": label, "data-bspk": "button", "data-destructive": destructive || undefined, "data-size": size, "data-variant": variant, "data-width": width, disabled: disabled || undefined, children: children && typeof children !== 'string' ? (children) : (_jsxs(_Fragment, { children: [_jsx("span", { "data-touch-target": true }), !!icon && isValidElement(icon) && _jsx("span", { "data-button-icon": true, children: icon }), !hideLabel && _jsx("span", { "data-button-label": true, children: label })] })) }));
-    if (toolTip) {
-        return (_jsx(Tooltip, { label: toolTip, placement: "top", children: button }));
-    }
-    return button;
-}
-Button.bspkName = 'Button';
-export { Button };
-//# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAA0B,cAAc,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAoEhD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,MAAM,CAAoC,KAAwC;IACvF,MAAM,EACF,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,SAAS,EACnB,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,KAAK,EACb,EAAE,EAAE,EAAE,GAAG,QAAQ,EACjB,QAAQ,GAAG,KAAK,EAChB,KAAK,EAAE,SAAS,EAChB,IAAI;IACJ,mCAAmC;IACnC,SAAS,GAAG,IAAI,EAChB,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,GAAG,cAAc,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;IAExE,6CAA6C;IAC7C,MAAM,SAAS,GAAG,SAAS,KAAK,KAAK,IAAI,IAAI,CAAC;IAC9C,MAAM,OAAO,GAAG,WAAW,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC/D,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,sDAAsD,CAAC,CAAC;IAC/F,QAAQ,CAAC,CAAC,KAAK,EAAE,wCAAwC,CAAC,CAAC;IAE3D,MAAM,MAAM,GAAG,CACX,KAAC,EAAE,OACK,cAAc,gBACN,KAAK,eACP,QAAQ,sBACA,WAAW,IAAI,SAAS,eAC/B,IAAI,kBACD,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,QAAQ,IAAI,SAAS,YAE9B,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CACxC,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,8BACI,2CAA0B,EACzB,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,mDAAwB,IAAI,GAAQ,EACtE,CAAC,SAAS,IAAI,oDAAyB,KAAK,GAAQ,IACtD,CACN,GACA,CACR,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACV,OAAO,CACH,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAC,KAAK,YACnC,MAAM,GACD,CACb,CAAC;IACN,CAAC;IAED,OAAO,MAAM,CAAC;AAClB,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/Card.d.ts

@@ -1,49 +0,0 @@
-import './card.scss';
-import { ReactNode } from 'react';
-export type CardProps = {
-    /**
-     * The content of the card.
-     *
-     * @required
-     */
-    children: ReactNode;
-    /**
-     * Determines if the padding should be hidden.
-     *
-     * @default true
-     */
-    showPadding?: boolean;
-    /**
-     * Determines how the card border will appear.
-     *
-     * @default elevated
-     */
-    variant?: 'elevated' | 'filled' | 'outlined';
-};
-/**
- * Cards are often rectangular and contain various content, such as text, images, icons, multimedia, and interactive
- * elements.
- *
- * They are similar in size and shape to playing cards and are intended to encourage users to click or tap to view more
- * details.
- *
- * @example
- *     import { Card } from '@bspk/ui/card';
- *
- *     function Example() {
- *         return (
- *             <Card variant="elevated" showPadding={false}>
- *                 <h3>Card Title</h3>
- *                 <p>This is some content inside the card.</p>
- *             </Card>
- *         );
- *     }
- *
- * @name Card
- */
-declare function Card({ children, showPadding, variant }: CardProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Card {
-    var bspkName: string;
-}
-export { Card };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Card.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=card]{display:block;background:var(--surface-neutral-t1-base);padding:var(--spacing-sizing-03);border-radius:var(--radius-medium);overflow:hidden}[data-bspk=card][data-hide-padding]{padding:0}[data-bspk=card][data-variant=outlined]{border:solid 1px var(--stroke-neutral-low)}[data-bspk=card][data-variant=elevated]{box-shadow:0 1px 2px 0 var(--shadow-32),0 1px 3px 1px var(--shadow-15)}`);;
-/**
- * Cards are often rectangular and contain various content, such as text, images, icons, multimedia, and interactive
- * elements.
- *
- * They are similar in size and shape to playing cards and are intended to encourage users to click or tap to view more
- * details.
- *
- * @example
- *     import { Card } from '@bspk/ui/card';
- *
- *     function Example() {
- *         return (
- *             <Card variant="elevated" showPadding={false}>
- *                 <h3>Card Title</h3>
- *                 <p>This is some content inside the card.</p>
- *             </Card>
- *         );
- *     }
- *
- * @name Card
- */
-function Card({ children, showPadding, variant = 'elevated' }) {
-    return (_jsx("div", { "data-bspk": "card", "data-hide-padding": showPadding === false || undefined, "data-variant": variant, children: children }));
-}
-Card.bspkName = 'Card';
-export { Card };
-//# sourceMappingURL=Card.js.map

package/dist/Card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAwBrB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,GAAG,UAAU,EAAa;IACpE,OAAO,CACH,2BAAe,MAAM,uBAAoB,WAAW,KAAK,KAAK,IAAI,SAAS,kBAAgB,OAAO,YAC7F,QAAQ,GACP,CACT,CAAC;AACN,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/Checkbox.d.ts

@@ -1,60 +0,0 @@
-import './checkbox.scss';
-import { ChangeEvent } from 'react';
-import { CommonProps, ElementProps, InvalidPropsLibrary } from './';
-export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'name'> & InvalidPropsLibrary & Required<CommonProps<'value'>> & {
-    /**
-     * If the checkbox is partially checked or
-     * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
-     *
-     * @default false
-     */
-    indeterminate?: boolean;
-    /**
-     * Marks the checkbox as checked.
-     *
-     * @default false
-     */
-    checked?: boolean;
-    /**
-     * The function to call when the checkbox is checked or unchecked.
-     *
-     * @required
-     */
-    onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
-};
-/**
- * A control that allows users to choose one or more items from a list or turn an feature on or off. This is the base
- * element and if used directly you must wrap it with a label. This will more often be used in the CheckboxOption or
- * CheckboxGroup component.
- *
- * @example
- *     import { Checkbox } from '@bspk/ui/Checkbox';
- *
- *     function Example() {
- *         const [checked, setChecked] = React.useState(false);
- *
- *         return (
- *             <label htmlFor="sample-checkbox">
- *                 <Checkbox
- *                     aria-label="Sample"
- *                     checked={checked}
- *                     id="sample-checkbox"
- *                     name="sample-checkbox"
- *                     onChange={(nextChecked) => setChecked(nextChecked)}
- *                     value="sample"
- *                 />
- *                 Checkbox Label
- *             </label>
- *         );
- *     }
- *
- * @element
- *
- * @name Checkbox
- */
-declare function Checkbox({ checked: checkedProp, indeterminate: indeterminateProp, invalid, disabled, errorMessage, ...props }: ElementProps<CheckboxProps, 'input'>): import("react/jsx-runtime").JSX.Element;
-declare namespace Checkbox {
-    var bspkName: string;
-}
-export { Checkbox };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Checkbox.js

@@ -1,53 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=checkbox]{display:block;position:relative;width:var(--spacing-sizing-06);aspect-ratio:1/1;padding:2px}[data-bspk=checkbox] input[type=checkbox]{position:absolute;opacity:0;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}[data-bspk=checkbox] span{--stroke: var(--stroke-neutral-base);--inner: none;--background: none;--color: var(--foreground-brand-on-primary);box-sizing:border-box;display:flex;width:20px;aspect-ratio:1/1;cursor:pointer;border-radius:2px;border:2px solid var(--stroke);align-items:center;flex-direction:column;justify-content:center;position:relative;background:var(--background);color:var(--color)}[data-bspk=checkbox] span svg[data-checked]{width:14px;display:none}[data-bspk=checkbox] span svg[data-indeterminate]{width:12px;display:none}[data-bspk=checkbox] input[type=checkbox]:not(:checked,:indeterminate,:disabled):hover+span{background-color:var(--interactions-neutral-hover-opacity)}[data-bspk=checkbox] input[type=checkbox]:not(:checked,:indeterminate,:disabled):active+span{background-color:var(--interactions-neutral-press-opacity)}[data-bspk=checkbox] input[type=checkbox]:checked+span svg[data-checked],[data-bspk=checkbox] input[type=checkbox]:indeterminate+span svg[data-indeterminate]{display:block}[data-bspk=checkbox] input[type=checkbox]:checked+span,[data-bspk=checkbox] input[type=checkbox]:indeterminate+span{--stroke: var(--stroke-brand-primary);--background: var(--surface-brand-primary)}[data-bspk=checkbox] input[type=checkbox]:disabled{pointer-events:none}[data-bspk=checkbox] input[type=checkbox]:disabled+span{--stroke: var(--stroke-neutral-interactions-disabled-light)}[data-bspk=checkbox] input[type=checkbox]:disabled:is(:checked,:indeterminate)+span{--stroke: transparent;--background: var(--interactions-disabled-opacity);--color: var(--foreground-neutral-disabled-on-surface)}[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled):checked+span,[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled):indeterminate+span{--background: var(--status-error)}[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled)+span{--stroke: var(--status-error)}`);;
-import { useEffect, useRef } from 'react';
-/**
- * A control that allows users to choose one or more items from a list or turn an feature on or off. This is the base
- * element and if used directly you must wrap it with a label. This will more often be used in the CheckboxOption or
- * CheckboxGroup component.
- *
- * @example
- *     import { Checkbox } from '@bspk/ui/Checkbox';
- *
- *     function Example() {
- *         const [checked, setChecked] = React.useState(false);
- *
- *         return (
- *             <label htmlFor="sample-checkbox">
- *                 <Checkbox
- *                     aria-label="Sample"
- *                     checked={checked}
- *                     id="sample-checkbox"
- *                     name="sample-checkbox"
- *                     onChange={(nextChecked) => setChecked(nextChecked)}
- *                     value="sample"
- *                 />
- *                 Checkbox Label
- *             </label>
- *         );
- *     }
- *
- * @element
- *
- * @name Checkbox
- */
-function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled, errorMessage, ...props }) {
-    const indeterminate = !!indeterminateProp;
-    const checked = !!checkedProp && !indeterminate;
-    const inputRef = useRef();
-    useEffect(() => {
-        if (!inputRef.current)
-            return;
-        inputRef.current.indeterminate = indeterminate;
-    }, [indeterminate]);
-    return (_jsxs("span", { "data-bspk": "checkbox", children: [_jsx("input", { ...props, "aria-errormessage": errorMessage || undefined, "aria-invalid": invalid || undefined, checked: checked, disabled: disabled || undefined, onChange: (event) => props.onChange(!!event.target.checked, event), ref: (node) => {
-                    if (!node)
-                        return;
-                    inputRef.current = node;
-                    node.indeterminate = indeterminate;
-                }, type: "checkbox" }), _jsxs("span", { "aria-hidden": true, children: [_jsx("svg", { "data-checked": true, fill: "none", viewBox: "0 0 14 11", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z", fill: "currentColor" }) }), _jsx("svg", { "data-indeterminate": true, fill: "none", viewBox: "0 0 12 4", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1.44444 3.11089C0.892158 3.11089 0.444443 2.66318 0.444443 2.11089V1.88867C0.444443 1.33639 0.892158 0.888672 1.44444 0.888672H10.5556C11.1078 0.888672 11.5556 1.33639 11.5556 1.88867V2.11089C11.5556 2.66318 11.1078 3.11089 10.5556 3.11089H1.44444Z", fill: "currentColor" }) })] })] }));
-}
-Checkbox.bspkName = 'Checkbox';
-export { Checkbox };
-//# sourceMappingURL=Checkbox.js.map

package/dist/Checkbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AA4BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,YAAY,EAEZ,GAAG,KAAK,EAC2B;IACnC,MAAM,aAAa,GAAG,CAAC,CAAC,iBAAiB,CAAC;IAC1C,MAAM,OAAO,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,aAAa,CAAC;IAEhD,MAAM,QAAQ,GAAG,MAAM,EAAoB,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;IACnD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACH,6BAEc,UAAU,aAEpB,mBACQ,KAAK,uBACU,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;oBACxB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;gBACvC,CAAC,EACD,IAAI,EAAC,UAAU,GACjB,EACF,gDACI,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,EACN,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,IACH,IACJ,CACV,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/CheckboxGroup.d.ts

@@ -1,82 +0,0 @@
-import { ToggleOptionProps } from './ToggleOption';
-import { ElementProps, CommonProps } from './';
-export type CheckboxGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
-export type CheckboxGroupProps = CommonProps<'aria-label'> & {
-    /**
-     * The function to call when the checkboxes are changed.
-     *
-     * @example
-     *     (values) => setState({ values });
-     *
-     * @required
-     */
-    onChange: (values: string[]) => void;
-    /**
-     * The input control name of the checkboxes.
-     *
-     * @required
-     */
-    name: string;
-    /**
-     * The options for the checkboxes.
-     *
-     * @example
-     *     [
-     *         { label: 'Option 1', value: 'option1' },
-     *         { label: 'Option 2', value: 'option2' },
-     *         { label: 'Option 3', value: 'option3' },
-     *     ];
-     *
-     * @type Array<CheckboxGroupOption>
-     * @required
-     */
-    options: CheckboxGroupOption[];
-    /**
-     * The values of the checked checkboxes.
-     *
-     * @type Array<string>
-     */
-    values?: CheckboxGroupProps['options'][number]['value'][];
-    /**
-     * Whether to show a select all checkbox at the top of the list.
-     *
-     * @default false
-     */
-    selectAll?: boolean;
-    /** The props for the select all checkbox. */
-    selectAllProps?: CheckboxGroupOption;
-};
-/**
- * A group of checkboxes that allows users to choose one or more items from a list or turn an feature on or off.
- *
- * @example
- *     import { CheckboxGroup } from '@bspk/ui/CheckboxGroup';
- *
- *     function Example() {
- *         const [values, setValues] = React.useState<string[]>([]);
- *
- *         return (
- *             <CheckboxGroup
- *                 aria-label="Example Checkbox Group"
- *                 name="example-checkbox-group"
- *                 options={[
- *                     { label: 'Option 1', value: 'option1' },
- *                     { label: 'Option 2', value: 'option2' },
- *                     { label: 'Option 3', value: 'option3' },
- *                 ]}
- *                 values={values}
- *                 onChange={(nextValues: string[]) => {
- *                     setValues(nextValues);
- *                 }}
- *             />
- *         );
- *     }
- *
- * @name CheckboxGroup
- */
-declare function CheckboxGroup({ onChange, options, name, values, selectAll, selectAllProps, ...props }: ElementProps<CheckboxGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace CheckboxGroup {
-    var bspkName: string;
-}
-export { CheckboxGroup };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/CheckboxGroup.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Checkbox } from './Checkbox';
-import { ToggleOption } from './ToggleOption';
-/**
- * A group of checkboxes that allows users to choose one or more items from a list or turn an feature on or off.
- *
- * @example
- *     import { CheckboxGroup } from '@bspk/ui/CheckboxGroup';
- *
- *     function Example() {
- *         const [values, setValues] = React.useState<string[]>([]);
- *
- *         return (
- *             <CheckboxGroup
- *                 aria-label="Example Checkbox Group"
- *                 name="example-checkbox-group"
- *                 options={[
- *                     { label: 'Option 1', value: 'option1' },
- *                     { label: 'Option 2', value: 'option2' },
- *                     { label: 'Option 3', value: 'option3' },
- *                 ]}
- *                 values={values}
- *                 onChange={(nextValues: string[]) => {
- *                     setValues(nextValues);
- *                 }}
- *             />
- *         );
- *     }
- *
- * @name CheckboxGroup
- */
-function CheckboxGroup({ onChange, options = [], name, values = [], selectAll, selectAllProps, ...props }) {
-    return (_jsxs("div", { ...props, "data-bspk": "checkbox-group", role: "group", children: [selectAll && (_jsx(_Fragment, { children: _jsx(ToggleOption, { label: selectAllProps?.label || 'All', children: _jsx(Checkbox, { "aria-label": selectAllProps?.label || 'All', checked: !!values.length && values.length === options.length, indeterminate: !!values.length && values.length < options.length, name: name, onChange: (checked) => onChange(checked ? options.map((o) => o.value) : []), value: "all" }) }) })), options.map(({ label, description, value }) => (_jsx(ToggleOption, { description: description, label: label, children: _jsx(Checkbox, { "aria-label": label, checked: values.includes(value), name: name, onChange: (checked) => {
-                        onChange(checked ? [...values, value] : values.filter((v) => v !== value));
-                    }, value: value }) }, value)))] }));
-}
-CheckboxGroup.bspkName = 'CheckboxGroup';
-export { CheckboxGroup };
-//# sourceMappingURL=CheckboxGroup.js.map

package/dist/CheckboxGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../src/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAoDjE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,SAAS,aAAa,CAAC,EACnB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,MAAM,GAAG,EAAE,EACX,SAAS,EACT,cAAc,EACd,GAAG,KAAK,EAC8B;IACtC,OAAO,CACH,kBAAS,KAAK,eAAY,gBAAgB,EAAC,IAAI,EAAC,OAAO,aAClD,SAAS,IAAI,CACV,4BACI,KAAC,YAAY,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,KAAK,YAC/C,KAAC,QAAQ,kBACO,cAAc,EAAE,KAAK,IAAI,KAAK,EAC1C,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAC5D,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,EAChE,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3E,KAAK,EAAC,KAAK,GACb,GACS,GAChB,CACN,EACA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAC5C,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAAc,KAAK,EAAE,KAAK,YAC5D,KAAC,QAAQ,kBACO,KAAK,EACjB,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;wBAClB,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;oBAC/E,CAAC,EACD,KAAK,EAAE,KAAK,GACd,IATuC,KAAK,CAUnC,CAClB,CAAC,IACA,CACT,CAAC;AACN,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/CheckboxOption.d.ts

@@ -1,44 +0,0 @@
-import { CheckboxProps } from './Checkbox';
-import { ToggleOptionProps } from './ToggleOption';
-import { InvalidPropsLibrary } from '.';
-export type CheckboxOptionProps = InvalidPropsLibrary & Pick<CheckboxProps, 'checked' | 'disabled' | 'indeterminate' | 'name' | 'value'> & Pick<ToggleOptionProps, 'description' | 'label'> & {
-    /**
-     * The function to call when the checkbox is checked or unchecked.
-     *
-     * @required
-     */
-    onChange: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
-};
-/**
- * A control that allows users to choose one or more items from a list or turn an feature on or off.
- *
- * If only a Checkbox is needed, consider using the `Checkbox` component directly.
- *
- * @example
- *     import { CheckboxOption } from '@bspk/ui/CheckboxOption';
- *
- *     function Example() {
- *         const [checked, setChecked] = React.useState(false);
- *         return (
- *             <CheckboxOption
- *                 checked={checked}
- *                 description="This is an example checkbox option."
- *                 label="Example Checkbox"
- *                 name="example-checkbox-name"
- *                 onChange={(nextChecked, event) => {
- *                     setChecked(nextChecked);
- *                     console.log('Checkbox changed:', nextChecked, event);
- *                 }}
- *                 value="example-checkbox-value"
- *             />
- *         );
- *     }
- *
- * @name CheckboxOption
- */
-declare function CheckboxOption({ label: labelProp, description, ...checkboxProps }: CheckboxOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
-declare namespace CheckboxOption {
-    var bspkName: string;
-}
-export { CheckboxOption };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/CheckboxOption.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Checkbox } from './Checkbox';
-import { ToggleOption } from './ToggleOption';
-/**
- * A control that allows users to choose one or more items from a list or turn an feature on or off.
- *
- * If only a Checkbox is needed, consider using the `Checkbox` component directly.
- *
- * @example
- *     import { CheckboxOption } from '@bspk/ui/CheckboxOption';
- *
- *     function Example() {
- *         const [checked, setChecked] = React.useState(false);
- *         return (
- *             <CheckboxOption
- *                 checked={checked}
- *                 description="This is an example checkbox option."
- *                 label="Example Checkbox"
- *                 name="example-checkbox-name"
- *                 onChange={(nextChecked, event) => {
- *                     setChecked(nextChecked);
- *                     console.log('Checkbox changed:', nextChecked, event);
- *                 }}
- *                 value="example-checkbox-value"
- *             />
- *         );
- *     }
- *
- * @name CheckboxOption
- */
-function CheckboxOption({ label: labelProp, description, ...checkboxProps }) {
-    const label = labelProp || description;
-    return (label && (_jsx(ToggleOption, { "data-bspk": "checkbox-option", description: description, label: label, children: _jsx(Checkbox, { ...checkboxProps, "aria-label": label }) })));
-}
-CheckboxOption.bspkName = 'CheckboxOption';
-export { CheckboxOption };
-//# sourceMappingURL=CheckboxOption.js.map

package/dist/CheckboxOption.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CheckboxOption.js","sourceRoot":"","sources":["../src/CheckboxOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAejE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,SAAS,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,aAAa,EAAuB;IAC5F,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IACvC,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBAAW,iBAAiB,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YAC5E,KAAC,QAAQ,OAAK,aAAa,gBAAc,KAAK,GAAI,GACvC,CAClB,CACJ,CAAC;AACN,CAAC;AAED,cAAc,CAAC,QAAQ,GAAG,gBAAgB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/Chip.d.ts

@@ -1,63 +0,0 @@
-import './chip.scss';
-import { CSSProperties, ReactNode } from 'react';
-import { CommonProps } from '.';
-export type ChipProps = CommonProps<'disabled'> & {
-    /**
-     * The content of the chip.
-     *
-     * @required
-     */
-    children: ReactNode | string;
-    /**
-     * Whether the chip should wrap its content.
-     *
-     * (Not recommended)
-     *
-     * @default false
-     */
-    wrap?: boolean;
-    /**
-     * The variant of the chip.
-     *
-     * @default filter
-     */
-    variant?: 'filter';
-    /**
-     * Is the chip elevated or flat. If flat the drop shadow is removed.
-     *
-     * @default false
-     */
-    flat?: boolean;
-    /**
-     * Whether the chip is currently selected.
-     *
-     * @default false
-     */
-    selected?: boolean;
-    /** The style of the chip. */
-    style?: CSSProperties;
-    /** The function to call when the chip is clicked. */
-    onClick?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
-};
-/**
- * Dynamically generated options that are suggested to the user as responses or prompts.
- *
- * @example
- *     import { Chip } from '@bspk/ui/Chip';
- *
- *     function Example() {
- *         return (
- *             <Chip variant="filter" onClick={() => console.log('Chip clicked!')}>
- *                 Example Chip
- *             </Chip>
- *         );
- *     }
- *
- * @name Chip
- */
-declare function Chip({ children, wrap, variant, flat, disabled, selected, onClick, style: styleProp, }: ChipProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Chip {
-    var bspkName: string;
-}
-export { Chip };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Chip.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=chip]{display:flex;flex-direction:column;justify-content:center;width:fit-content;height:var(--spacing-sizing-06);padding:0 var(--spacing-sizing-02);font:var(--labels-small);color:var(--foreground-neutral-on-surface-variant-01);background-color:var(--surface-neutral-t1-base);border:1px solid var(--stroke-neutral-low);border-radius:var(--radius-small)}[data-bspk=chip]:not([data-flat]){box-shadow:var(--drop-shadow-raise)}[data-bspk=chip][data-variant=filter]{cursor:pointer}[data-bspk=chip][data-wrap]{height:auto}[data-bspk=chip][data-disabled]{color:var(--foreground-neutral-disabled-on-surface);cursor:not-allowed;border-color:var(--stroke-neutral-disabled-light);background-image:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=chip]:not([data-disabled]):hover{background-image:linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=chip]:not([data-disabled]):active{background-image:linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=chip]:not([data-disabled]):focus{outline:1px solid var(--stroke-neutral-focus);border-color:var(--stroke-neutral-focus)}[data-bspk=chip][data-selected]{background-color:var(--surface-brand-primary-highlight);border-color:var(--stroke-brand-primary)}`);;
-/**
- * Dynamically generated options that are suggested to the user as responses or prompts.
- *
- * @example
- *     import { Chip } from '@bspk/ui/Chip';
- *
- *     function Example() {
- *         return (
- *             <Chip variant="filter" onClick={() => console.log('Chip clicked!')}>
- *                 Example Chip
- *             </Chip>
- *         );
- *     }
- *
- * @name Chip
- */
-function Chip({ children = '', wrap = false, variant = 'filter', flat = false, disabled = false, selected = false, onClick, style: styleProp, }) {
-    let additionalProps = {};
-    if (variant === 'filter') {
-        additionalProps = {
-            onClick,
-            role: 'button',
-            tabIndex: 0,
-        };
-    }
-    return (_jsx("span", { "data-bspk": "chip", "data-disabled": disabled || undefined, "data-flat": flat || undefined, "data-selected": selected || undefined, "data-variant": variant, "data-wrap": wrap || undefined, style: styleProp, ...additionalProps, children: children }));
-}
-Chip.bspkName = 'Chip';
-export { Chip };
-//# sourceMappingURL=Chip.js.map

package/dist/Chip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../src/Chip.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AA6CrB;;;;;;;;;;;;;;;GAeG;AACH,SAAS,IAAI,CAAC,EACV,QAAQ,GAAG,EAAE,EACb,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,KAAK,EAAE,SAAS,GACR;IACR,IAAI,eAAe,GAAG,EAAE,CAAC;IAEzB,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;QACvB,eAAe,GAAG;YACd,OAAO;YACP,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,CAAC;SACd,CAAC;IACN,CAAC;IAED,OAAO,CACH,4BACc,MAAM,mBACD,QAAQ,IAAI,SAAS,eACzB,IAAI,IAAI,SAAS,mBACb,QAAQ,IAAI,SAAS,kBACtB,OAAO,eACV,IAAI,IAAI,SAAS,EAC5B,KAAK,EAAE,SAAS,KACZ,eAAe,YAElB,QAAQ,GACN,CACV,CAAC;AACN,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,CAAC"}