@bspk/ui 1.1.32 → 1.1.33

package/dist/components/Radio/RadioExample.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createUid } from '../../utils/demo';
+export const RadioExample = {
+    render: ({ props, Component }) => _jsx(Component, { ...props, name: createUid('radio') }),
+};
+//# sourceMappingURL=RadioExample.js.map

package/dist/components/Radio/RadioExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioExample.js","sourceRoot":"","sources":["../../../src/components/Radio/RadioExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAC;AAE3D,MAAM,CAAC,MAAM,YAAY,GAAqB;IAC1C,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,GAAI;CACvF,CAAC"}

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

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

package/dist/components/Radio/index.js

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

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

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

package/dist/components/Radio/radio.css

@@ -0,0 +1,67 @@
+[data-bspk=radio] {
+  display: block;
+  position: relative;
+  width: var(--spacing-sizing-06);
+  aspect-ratio: 1/1;
+  padding: 2px;
+}
+[data-bspk=radio] input[type=radio] {
+  position: absolute;
+  opacity: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+}
+[data-bspk=radio] span {
+  --stroke: var(--stroke-neutral-base);
+  --inner: var(--foreground-brand-primary);
+  --background: none;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: var(--spacing-sizing-05);
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+  border: 2px solid var(--stroke);
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  background: var(--background);
+}
+[data-bspk=radio] span::before {
+  content: "";
+  display: block;
+  width: var(--spacing-sizing-03);
+  aspect-ratio: 1/1;
+  background: var(--inner);
+  border-radius: var(--radius-circular);
+  opacity: 0;
+}
+[data-bspk=radio] input[type=radio]:not(:disabled):hover + span {
+  --background: var(--interactions-neutral-hover-opacity);
+}
+[data-bspk=radio] input[type=radio]:not(:disabled):active + span {
+  --background: var(--interactions-neutral-press-opacity);
+}
+[data-bspk=radio] input[type=radio]:not(:disabled)[data-invalid] + span {
+  --stroke: var(--status-error);
+  --inner: var(--status-error);
+}
+[data-bspk=radio] input[type=radio]:checked + span {
+  --stroke: var(--stroke-brand-primary);
+}
+[data-bspk=radio] input[type=radio]:checked + span::before {
+  opacity: 1;
+}
+[data-bspk=radio] input[type=radio]:disabled {
+  pointer-events: none;
+}
+[data-bspk=radio] input[type=radio]:disabled + span {
+  --stroke: var(--stroke-neutral-interactions-disabled-light);
+  --inner: var(--foreground-neutral-disabled-on-surface);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Radio/radio.css.js

@@ -0,0 +1,73 @@
+/** * 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=radio] {
+  display: block;
+  position: relative;
+  width: var(--spacing-sizing-06);
+  aspect-ratio: 1/1;
+  padding: 2px;
+}
+[data-bspk=radio] input[type=radio] {
+  position: absolute;
+  opacity: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+}
+[data-bspk=radio] span {
+  --stroke: var(--stroke-neutral-base);
+  --inner: var(--foreground-brand-primary);
+  --background: none;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: var(--spacing-sizing-05);
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+  border: 2px solid var(--stroke);
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  background: var(--background);
+}
+[data-bspk=radio] span::before {
+  content: "";
+  display: block;
+  width: var(--spacing-sizing-03);
+  aspect-ratio: 1/1;
+  background: var(--inner);
+  border-radius: var(--radius-circular);
+  opacity: 0;
+}
+[data-bspk=radio] input[type=radio]:not(:disabled):hover + span {
+  --background: var(--interactions-neutral-hover-opacity);
+}
+[data-bspk=radio] input[type=radio]:not(:disabled):active + span {
+  --background: var(--interactions-neutral-press-opacity);
+}
+[data-bspk=radio] input[type=radio]:not(:disabled)[data-invalid] + span {
+  --stroke: var(--status-error);
+  --inner: var(--status-error);
+}
+[data-bspk=radio] input[type=radio]:checked + span {
+  --stroke: var(--stroke-brand-primary);
+}
+[data-bspk=radio] input[type=radio]:checked + span::before {
+  opacity: 1;
+}
+[data-bspk=radio] input[type=radio]:disabled {
+  pointer-events: none;
+}
+[data-bspk=radio] input[type=radio]:disabled + span {
+  --stroke: var(--stroke-neutral-interactions-disabled-light);
+  --inner: var(--foreground-neutral-disabled-on-surface);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,94 @@
+import { ElementProps, CommonProps } from '../../index.js';
+import { ToggleOptionProps } from '../ToggleOption';
+import './radio-group.scss';
+export type RadioGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
+export type RadioGroupProps = CommonProps<'disabled' | 'name'> & {
+    /**
+     * The value of the control.
+     *
+     * @example
+     *     1;
+     *
+     * @required
+     */
+    value: string;
+    /**
+     * The function to call when the radios are changed.
+     *
+     * @example
+     *     (value) => setState({ value }),
+     *
+     * @required
+     */
+    onChange: (value: string) => void;
+    /**
+     * The options for the radios.
+     *
+     * @example
+     *     [
+     *         {
+     *             value: '1',
+     *             label: 'Option 1',
+     *         },
+     *         {
+     *             value: '2',
+     *             label: 'Option 2',
+     *             description: 'Description here',
+     *         },
+     *         { value: '3', label: 'Option 3' },
+     *     ];
+     *
+     * @type Array<RadioGroupOption>
+     * @required
+     */
+    options: RadioGroupOption[];
+    /**
+     * The label of the radio group.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * Shows the RadioGroup label. When label isn't showing it is used as the aria-label prop.
+     *
+     * @default true
+     */
+    showLabel?: boolean;
+};
+/**
+ * A group of radios that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { RadioGroup } from '@bspk/ui/RadioGroup';
+ *
+ *     export function Example() {
+ *         const [selectedOption, setSelectedOption] = useState<string>('1');
+ *
+ *         return (
+ *             <RadioGroup
+ *                 name="Example name"
+ *                 onChange={(nextValue) => setSelectedOption(nextValue)}
+ *                 options={[
+ *                     {
+ *                         value: '1',
+ *                         label: 'Option 1',
+ *                         description: 'Description here',
+ *                     },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                 ]}
+ *                 value={selectedOption}
+ *             />
+ *         );
+ *     }
+ *
+ * @name RadioGroup
+ * @phase DesignReview
+ */
+declare function RadioGroup({ onChange, options, name, value: groupValue, label: groupLabel, showLabel, disabled, ...props }: ElementProps<RadioGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+declare namespace RadioGroup {
+    var bspkName: string;
+}
+export { RadioGroup };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Radio } from '../Radio';
+import { ToggleOption } from '../ToggleOption';
+import './radio-group.css.js';
+/**
+ * A group of radios that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { RadioGroup } from '@bspk/ui/RadioGroup';
+ *
+ *     export function Example() {
+ *         const [selectedOption, setSelectedOption] = useState<string>('1');
+ *
+ *         return (
+ *             <RadioGroup
+ *                 name="Example name"
+ *                 onChange={(nextValue) => setSelectedOption(nextValue)}
+ *                 options={[
+ *                     {
+ *                         value: '1',
+ *                         label: 'Option 1',
+ *                         description: 'Description here',
+ *                     },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                 ]}
+ *                 value={selectedOption}
+ *             />
+ *         );
+ *     }
+ *
+ * @name RadioGroup
+ * @phase DesignReview
+ */
+function RadioGroup({ onChange, options = [], name, value: groupValue, label: groupLabel, showLabel = true, disabled, ...props }) {
+    const id = `radio-group-${useId()}`;
+    return (_jsxs("div", { ...props, "aria-label": !showLabel ? groupLabel : undefined, "aria-labelledby": showLabel ? `${id}-label` : undefined, "data-bspk": "radio-group", "data-disabled": disabled || undefined, id: id, role: "group", children: [showLabel && _jsx("label", { id: `${id}-label`, children: groupLabel }), _jsx("div", { role: "radiogroup", children: options.map(({ label, description, value }, index) => {
+                    return (_jsx(ToggleOption, { description: description, label: label, children: _jsx(Radio, { "aria-label": label, checked: groupValue === value, disabled: disabled, name: name, onChange: (checked) => checked && onChange(value), value: value }) }, `toggle-option-${value || index}`));
+                }) })] }));
+}
+RadioGroup.bspkName = 'RadioGroup';
+export { RadioGroup };
+//# sourceMappingURL=RadioGroup.js.map

package/dist/components/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAG9B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAqB,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,oBAAoB,CAAC;AA0D5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,SAAS,UAAU,CAAC,EAChB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,UAAU,EACjB,SAAS,GAAG,IAAI,EAChB,QAAQ,EACR,GAAG,KAAK,EAC2B;IACnC,MAAM,EAAE,GAAG,eAAe,KAAK,EAAE,EAAE,CAAC;IAEpC,OAAO,CACH,kBACQ,KAAK,gBACG,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,qBAC9B,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,eAC5C,aAAa,mBACR,QAAQ,IAAI,SAAS,EACpC,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,aAEX,SAAS,IAAI,gBAAO,EAAE,EAAE,GAAG,EAAE,QAAQ,YAAG,UAAU,GAAS,EAC5D,cAAK,IAAI,EAAC,YAAY,YACjB,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;oBAClD,OAAO,CACH,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAA0C,KAAK,EAAE,KAAK,YACxF,KAAC,KAAK,kBACU,KAAK,EACjB,OAAO,EAAE,UAAU,KAAK,KAAK,EAC7B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,EACjD,KAAK,EAAE,KAAK,GACd,IARuC,iBAAiB,KAAK,IAAI,KAAK,EAAE,CAS/D,CAClB,CAAC;gBACN,CAAC,CAAC,GACA,IACJ,CACT,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/RadioGroup/RadioGroupExample.d.ts

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

package/dist/components/RadioGroup/RadioGroupExample.js

@@ -0,0 +1,27 @@
+import { RadioExample } from '../Radio/RadioExample';
+export const RadioGroupExample = {
+    render: RadioExample.render,
+    presets: [
+        {
+            label: 'With Descriptions',
+            propState: {
+                options: [
+                    { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
+                    { label: 'Option 2', value: 'option2', description: 'Description for option 2' },
+                    { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
+                ],
+            },
+        },
+        {
+            label: 'Long labels',
+            propState: {
+                options: [
+                    { label: 'This is a very long label for option 1 that never seems to end', value: 'option1' },
+                    { label: 'This is a very long label for option 2 that never seems to end', value: 'option2' },
+                    { label: 'This is a very long label for option 3', value: 'option3' },
+                ],
+            },
+        },
+    ],
+};
+//# sourceMappingURL=RadioGroupExample.js.map

package/dist/components/RadioGroup/RadioGroupExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupExample.js","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroupExample.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAK/D,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,MAAM,EAAE,YAAY,CAAC,MAAM;IAC3B,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,OAAO,EAAE;oBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;oBAChF,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;oBAChF,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;iBACnF;aACJ;SACJ;QACD;YACI,KAAK,EAAE,aAAa;YACpB,SAAS,EAAE;gBACP,OAAO,EAAE;oBACL,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;oBAC7F,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;oBAC7F,EAAE,KAAK,EAAE,wCAAwC,EAAE,KAAK,EAAE,SAAS,EAAE;iBACxE;aACJ;SACJ;KACJ;CACJ,CAAC"}

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

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

package/dist/components/RadioGroup/index.js

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

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

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

package/dist/components/RadioGroup/radio-group.css

@@ -0,0 +1,7 @@
+[data-bspk=radio-group] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sizing-01);
+  max-width: 100%;
+  overflow: hidden;
+}

package/dist/components/RadioGroup/radio-group.css.js

@@ -0,0 +1,13 @@
+/** * 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=radio-group] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sizing-01);
+  max-width: 100%;
+  overflow: hidden;
+}
+`));
+document.head.appendChild(style);
+

package/dist/components/RadioOption/RadioOption.d.ts

@@ -0,0 +1,26 @@
+import { ChangeEvent } from 'react';
+import { InvalidPropsLibrary } from '../../index.js';
+import { RadioProps } from '../Radio';
+import { ToggleOptionProps } from '../ToggleOption';
+export type RadioOptionProps = InvalidPropsLibrary & Pick<RadioProps, 'checked' | 'disabled' | 'name' | 'value'> & Pick<ToggleOptionProps, 'description' | 'label'> & {
+    /**
+     * The function to call when the radio is checked.
+     *
+     * @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.
+ *
+ * If only a radio button is needed, consider using the Radio component directly.
+ *
+ * @name RadioOption
+ * @phase Utility
+ */
+declare function RadioOption({ label: labelProp, description, ...checkboxProps }: RadioOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
+declare namespace RadioOption {
+    var bspkName: string;
+}
+export { RadioOption };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/RadioOption/RadioOption.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Radio } from '../Radio';
+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 radio button is needed, consider using the Radio component directly.
+ *
+ * @name RadioOption
+ * @phase Utility
+ */
+function RadioOption({ label: labelProp, description, ...checkboxProps }) {
+    const label = labelProp || description;
+    return (label && (_jsx(ToggleOption, { "data-bspk": "radio-option", description: description, label: label, children: _jsx(Radio, { ...checkboxProps, "aria-label": label }) })));
+}
+RadioOption.bspkName = 'RadioOption';
+export { RadioOption };
+//# sourceMappingURL=RadioOption.js.map

package/dist/components/RadioOption/RadioOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioOption.js","sourceRoot":"","sources":["../../../src/components/RadioOption/RadioOption.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAc,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAqB,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAa5E;;;;;;;GAOG;AACH,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,aAAa,EAAoB;IACtF,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IACvC,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBAAW,cAAc,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YACzE,KAAC,KAAK,OAAK,aAAa,gBAAc,KAAK,GAAI,GACpC,CAClB,CACJ,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/RadioOption/RadioOptionExample.d.ts

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

package/dist/components/RadioOption/RadioOptionExample.js

@@ -0,0 +1,5 @@
+import { RadioExample } from '../Radio/RadioExample';
+export const RadioOptionExample = {
+    render: RadioExample.render,
+};
+//# sourceMappingURL=RadioOptionExample.js.map

package/dist/components/RadioOption/RadioOptionExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioOptionExample.js","sourceRoot":"","sources":["../../../src/components/RadioOption/RadioOptionExample.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAG/D,MAAM,CAAC,MAAM,kBAAkB,GAAqB;IAChD,MAAM,EAAE,YAAY,CAAC,MAAM;CAC9B,CAAC"}

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

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

package/dist/components/RadioOption/index.js

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

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

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

package/dist/components/Scrim/Scrim.d.ts

@@ -0,0 +1,40 @@
+import { CommonProps } from '../../index.js';
+import './scrim.scss';
+export type ScrimProps = CommonProps<'data-bspk-owner'> & {
+    /**
+     * Whether the Scrim should be visible.
+     *
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * The variant of the Scrim.
+     *
+     * This determines how the Scrim is used in the application and effects its styling.
+     *
+     * @required
+     */
+    variant: 'dialog' | 'dropdown';
+    /**
+     * A function that is called when the Scrim is clicked.
+     *
+     * This will typically be used to close a modal or dropdown when the user clicks outside of it.
+     *
+     * @required;
+     */
+    onClick: () => void;
+};
+/**
+ * A temporary effect or overlay that can be applied to a user interface to make content less prominent or to draw
+ * attention to a modal or sheet.
+ *
+ * @name Scrim
+ *
+ * @phase Utility
+ */
+declare function Scrim({ visible, variant, ...props }: ScrimProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Scrim {
+    var bspkName: string;
+}
+export { Scrim };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Scrim/Scrim.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './scrim.css.js';
+/**
+ * A temporary effect or overlay that can be applied to a user interface to make content less prominent or to draw
+ * attention to a modal or sheet.
+ *
+ * @name Scrim
+ *
+ * @phase Utility
+ */
+function Scrim({ visible = true, variant, ...props }) {
+    return (_jsx("div", { ...props, "aria-hidden": "true", "data-bspk": "scrim", "data-hidden": !visible || undefined, "data-variant": variant }));
+}
+Scrim.bspkName = 'Scrim';
+export { Scrim };
+//# sourceMappingURL=Scrim.js.map

package/dist/components/Scrim/Scrim.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrim.js","sourceRoot":"","sources":["../../../src/components/Scrim/Scrim.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,CAAC;AA2BtB;;;;;;;GAOG;AACH,SAAS,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAc;IAC5D,OAAO,CACH,iBACQ,KAAK,iBACG,MAAM,eACR,OAAO,iBACJ,CAAC,OAAO,IAAI,SAAS,kBACpB,OAAO,GACvB,CACL,CAAC;AACN,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAEzB,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

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

package/dist/components/Scrim/index.js

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

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

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

package/dist/components/Scrim/scrim.css

@@ -0,0 +1,19 @@
+[data-bspk=scrim] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--z-index-scrim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+[data-bspk=scrim][data-variant=dialog] {
+  background-color: var(--background-scrim);
+}
+[data-bspk=scrim][data-hidden] {
+  display: none;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Scrim/scrim.css.js

@@ -0,0 +1,25 @@
+/** * 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=scrim] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--z-index-scrim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+[data-bspk=scrim][data-variant=dialog] {
+  background-color: var(--background-scrim);
+}
+[data-bspk=scrim][data-hidden] {
+  display: none;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+