@bspk/ui 1.0.0

package/Checkbox.js

@@ -0,0 +1,123 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useRef, useEffect } 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.
+ *
+ * @element
+ *
+ * @name Checkbox
+ */
+function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled, ...props }) {
+    const indeterminate = !!indeterminateProp;
+    const checked = !!checkedProp && !indeterminate;
+    const inputRef = useRef();
+    useEffect(() => {
+        if (!inputRef.current)
+            return;
+        inputRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    return (jsxs("span", { css: style, "data-checkbox": true, children: [jsx("input", { ...props, "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';
+const style = css `
+    display: block;
+    position: relative;
+    width: var(--spacing-sizing-06);
+    aspect-ratio: 1/1;
+    padding: 2px;
+
+    input[type='checkbox'] {
+        position: absolute;
+        opacity: 0;
+        z-index: 2;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        cursor: pointer;
+    }
+
+    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);
+
+        svg[data-checked] {
+            width: 14px;
+            display: none;
+        }
+        svg[data-indeterminate] {
+            width: 12px;
+            display: none;
+        }
+        color: var(--color);
+    }
+
+    input[type='checkbox']:not(:checked, :indeterminate, :disabled) {
+        &:hover + span {
+            background-color: var(--interactions-neutral-hover-opacity);
+        }
+        &:active + span {
+            background-color: var(--interactions-neutral-press-opacity);
+        }
+    }
+
+    input[type='checkbox']:checked + span svg[data-checked],
+    input[type='checkbox']:indeterminate + span svg[data-indeterminate] {
+        display: block;
+    }
+
+    input[type='checkbox']:checked + span,
+    input[type='checkbox']:indeterminate + span {
+        --stroke: var(--stroke-brand-primary);
+        --background: var(--surface-brand-primary);
+    }
+
+    input[type='checkbox']:disabled {
+        pointer-events: none;
+        & + span {
+            --stroke: var(--stroke-neutral-interactions-disabled-light);
+        }
+        &:is(:checked, :indeterminate) + span {
+            --stroke: transparent;
+            --background: var(--interactions-disabled-opacity);
+            --color: var(--foreground-neutral-disabled-on-surface);
+        }
+    }
+
+    input[type='checkbox'][aria-invalid]:not(:disabled) {
+        &:checked + span,
+        &:indeterminate + span {
+            --background: var(--status-error);
+        }
+        & + span {
+            --stroke: var(--status-error);
+        }
+    }
+`;
+
+export { Checkbox, style };
+//# sourceMappingURL=Checkbox.js.map

package/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["src/Checkbox.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAeA;;;;;;;;AAQG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EAC2B,EAAA;AACnC,IAAA,MAAM,aAAa,GAAG,CAAC,CAAC,iBAAiB,CAAC;IAC1C,MAAM,OAAO,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,aAAa,CAAC;AAEhD,IAAA,MAAM,QAAQ,GAAG,MAAM,EAAoB,CAAC;IAE5C,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;AAC9B,QAAA,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;AACnD,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,QACIA,eACI,GAAG,EAAE,KAAK,EAIV,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAA,OAAA,EAAA,EAAA,GACQ,KAAK,EAAA,cAAA,EACK,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,GAAG,EAAE,CAAC,IAAI,KAAI;AACV,oBAAA,IAAI,CAAC,IAAI;wBAAE,OAAO;AAClB,oBAAA,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AACxB,oBAAA,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;iBACtC,EACD,IAAI,EAAC,UAAU,EAAA,CACjB,EACFD,IAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,CACIC,GAAkB,CAAA,KAAA,EAAA,EAAA,cAAA,EAAA,IAAA,EAAA,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA,QAAA,EAChFA,GACI,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,EACA,CAAA,EACNA,GAAwB,CAAA,KAAA,EAAA,EAAA,oBAAA,EAAA,IAAA,EAAA,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,EACrF,QAAA,EAAAA,GAAA,CAAA,MAAA,EAAA,EACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,EAAA,CACrB,EACA,CAAA,CAAA,EAAA,CACH,CACJ,EAAA,CAAA,EACT;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAIxB,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/CheckboxGroup.d.ts

@@ -0,0 +1,49 @@
+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.
+     *
+     * @required
+     */
+    onChange: (value: string[]) => void;
+    /**
+     * The input control name of the checkboxes.
+     *
+     * @required
+     */
+    name: string;
+    /**
+     * The options for the checkboxes.
+     *
+     * @type CheckboxGroupOption[]
+     * @required
+     */
+    options: CheckboxGroupOption[];
+    /**
+     * The values of the checked checkboxes.
+     *
+     * @type 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.
+ *
+ * @name CheckboxGroup
+ */
+declare function CheckboxGroup({ onChange, options, name, values, selectAll, selectAllProps, ...props }: ElementProps<CheckboxGroupProps, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace CheckboxGroup {
+    var bspkName: string;
+}
+export { CheckboxGroup };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/CheckboxGroup.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { Checkbox } from './Checkbox.js';
+import { ToggleOption } from './ToggleOption.js';
+
+/**
+ * A group of checkboxes that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name CheckboxGroup
+ */
+function CheckboxGroup({ onChange, options = [], name, values = [], selectAll, selectAllProps, ...props }) {
+    return (jsxs("div", { ...props, "data-checkbox-group": true, "data-control-group": true, 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/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.js","sources":["src/CheckboxGroup.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;AA2CA;;;;AAIG;AACH,SAAS,aAAa,CAAC,EACnB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,MAAM,GAAG,EAAE,EACX,SAAS,EACT,cAAc,EACd,GAAG,KAAK,EAC8B,EAAA;AACtC,IAAA,QACIA,IAAS,CAAA,KAAA,EAAA,EAAA,GAAA,KAAK,EAAyC,qBAAA,EAAA,IAAA,EAAA,oBAAA,EAAA,IAAA,EAAA,IAAI,EAAC,OAAO,EAAA,QAAA,EAAA,CAC9D,SAAS,KACNC,GACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAAD,GAAA,CAAC,YAAY,EAAA,EAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,KAAK,EAAA,QAAA,EAC/CA,GAAC,CAAA,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,KAAK,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,EAC3E,KAAK,EAAC,KAAK,EAAA,CACb,EACS,CAAA,EAAA,CAChB,CACN,EACA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MACvCA,GAAC,CAAA,YAAY,IAAC,WAAW,EAAE,WAAW,EAAc,KAAK,EAAE,KAAK,EAC5D,QAAA,EAAAA,GAAA,CAAC,QAAQ,EACO,EAAA,YAAA,EAAA,KAAK,EACjB,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,KAAI;AAClB,wBAAA,QAAQ,CAAC,OAAO,GAAG,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;AAC/E,qBAAC,EACD,KAAK,EAAE,KAAK,EACd,CAAA,EAAA,EATuC,KAAK,CAUnC,CAClB,CAAC,CACA,EAAA,CAAA,EACR;AACN,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe;;;;"}

package/CheckboxOption.d.ts

@@ -0,0 +1,14 @@
+import { CheckboxProps } from './Checkbox';
+import { ToggleOptionProps } from './ToggleOption';
+export type CheckboxOptionProps = Pick<CheckboxProps, 'checked' | 'disabled' | 'indeterminate' | 'invalid' | 'name' | 'onChange' | 'value'> & Pick<ToggleOptionProps, 'description' | 'label'>;
+/**
+ * A control that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name CheckboxOption
+ */
+declare function CheckboxOption({ label, description, ...checkboxProps }: CheckboxOptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace CheckboxOption {
+    var bspkName: string;
+}
+export { CheckboxOption };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/CheckboxOption.js

@@ -0,0 +1,16 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Checkbox } from './Checkbox.js';
+import { ToggleOption } from './ToggleOption.js';
+
+/**
+ * A control that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name CheckboxOption
+ */
+function CheckboxOption({ label, description, ...checkboxProps }) {
+    return (jsx(ToggleOption, { "data-checkbox-field": true, description: description, label: label, children: jsx(Checkbox, { ...checkboxProps, "aria-label": label }) }));
+}
+CheckboxOption.bspkName = 'CheckboxOption';
+
+export { CheckboxOption };
+//# sourceMappingURL=CheckboxOption.js.map

package/CheckboxOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxOption.js","sources":["src/CheckboxOption.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AASA;;;;AAIG;AACH,SAAS,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,aAAa,EAAuB,EAAA;IACjF,QACIA,IAAC,YAAY,EAAA,EAAA,qBAAA,EAAA,IAAA,EAAqB,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EACpE,QAAA,EAAAA,GAAA,CAAC,QAAQ,EAAK,EAAA,GAAA,aAAa,gBAAc,KAAK,EAAA,CAAI,EACvC,CAAA,EACjB;AACN,CAAC;AAED,cAAc,CAAC,QAAQ,GAAG,gBAAgB;;;;"}

package/Chip.d.ts

@@ -0,0 +1,50 @@
+import { CSSProperties, ReactNode } from 'react';
+import { CommonProps } from '.';
+export type ChipProps = CommonProps<'disabled' | 'onClick'> & {
+    /**
+     * 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;
+};
+/**
+ * Dynamically generated options that are suggested to the user as responses or prompts.
+ *
+ * @name Chip
+ */
+declare function Chip({ children, wrap, variant, flat, disabled, selected, onClick, style: styleProp, }: ChipProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Chip {
+    var bspkName: string;
+}
+export { Chip };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Chip.js

@@ -0,0 +1,87 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * Dynamically generated options that are suggested to the user as responses or prompts.
+ *
+ * @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", { css: style, "data-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';
+const style = css `
+    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);
+
+    &:not([data-flat]) {
+        box-shadow: var(--drop-shadow-raise);
+    }
+
+    &[data-variant='filter'] {
+        cursor: pointer;
+    }
+
+    &[data-wrap] {
+        height: auto;
+    }
+
+    &[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));
+    }
+
+    &: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));
+        }
+
+        &: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));
+        }
+
+        &:focus {
+            outline: 1px solid var(--stroke-neutral-focus);
+            border-color: var(--stroke-neutral-focus);
+        }
+    }
+
+    &[data-selected] {
+        background-color: var(--surface-brand-primary-highlight);
+        border-color: var(--stroke-brand-primary);
+    }
+`;
+
+export { Chip, style };
+//# sourceMappingURL=Chip.js.map

package/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":["src/Chip.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AA2CA;;;;AAIG;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,EAAA;IACR,IAAI,eAAe,GAAG,EAAE,CAAC;AAEzB,IAAA,IAAI,OAAO,KAAK,QAAQ,EAAE;AACtB,QAAA,eAAe,GAAG;YACd,OAAO;AACP,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,QAAQ,EAAE,CAAC;SACd,CAAC;KACL;AAED,IAAA,QACIA,GAAA,CAAA,MAAA,EAAA,EACI,GAAG,EAAE,KAAK,EACA,WAAA,EAAA,EAAE,EACG,eAAA,EAAA,QAAQ,IAAI,SAAS,EAAA,WAAA,EACzB,IAAI,IAAI,SAAS,EACb,eAAA,EAAA,QAAQ,IAAI,SAAS,kBACtB,OAAO,EAAA,WAAA,EACV,IAAI,IAAI,SAAS,EAC5B,KAAK,EAAE,SAAS,KACZ,eAAe,EAAA,QAAA,EAElB,QAAQ,EAAA,CACN,EACT;AACN,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAIhB,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/DatePicker.d.ts

@@ -0,0 +1,20 @@
+export type DatePickerProps = {
+    /**
+     * The content of the datepicker.
+     *
+     * @required
+     */
+    children: string;
+};
+/**
+ * Component description coming soon.
+ *
+ * @name DatePicker
+ */
+declare function DatePicker({ children }: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace DatePicker {
+    var bspkName: string;
+}
+export { DatePicker };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/DatePicker.js

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * Component description coming soon.
+ *
+ * @name DatePicker
+ */
+function DatePicker({ children }) {
+    return (jsx("div", { css: style, "data-date-picker": true, children: children }));
+}
+DatePicker.bspkName = 'DatePicker';
+const style = css `
+    display: flex;
+`;
+
+export { DatePicker, style };
+//# sourceMappingURL=DatePicker.js.map

package/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sources":["src/DatePicker.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAWA;;;;AAIG;AACH,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAmB,EAAA;IAC7C,QACIA,aAAK,GAAG,EAAE,KAAK,EACV,kBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAI5B,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/Dialog.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode, Ref } from 'react';
+import { CommonProps, ElementProps } from './';
+export type DialogProps = CommonProps<'id'> & {
+    /** The content of the dialog. */
+    children?: ReactNode;
+    /** A ref to the dialog element. */
+    innerRef?: Ref<HTMLDivElement>;
+    /**
+     * If the dialog should appear.
+     *
+     * @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 false
+     */
+    hideScrim?: boolean;
+};
+/**
+ * Dialogs display important information that users need to acknowledge. They appear over the interface and block
+ * further interactions until an action is selected.
+ *
+ * @name Dialog
+ */
+declare function Dialog({ children, innerRef, onClose, open, placement, hideScrim, id: idProp, ...containerProps }: ElementProps<DialogProps, 'div'>): false | import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Dialog {
+    var bspkName: string;
+}
+export { Dialog };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */