@bspk/ui 1.3.3 → 1.3.5

package/dist/components/{CalendarPicker/calendar-picker.css.js → Calendar/calendar.css.js}

@@ -1,7 +1,7 @@
 /** * 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=calendar-picker] {
+style.appendChild(document.createTextNode(`[data-bspk=calendar] {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -12,61 +12,61 @@ style.appendChild(document.createTextNode(`[data-bspk=calendar-picker] {
   background: var(--surface-neutral-t1-base);
   padding: var(--spacing-sizing-02);
 }
-[data-bspk=calendar-picker][data-variant=elevated] {
+[data-bspk=calendar][data-variant=elevated] {
   border-radius: var(--radius-lg);
   box-shadow: var(--drop-shadow-float);
 }
-[data-bspk=calendar-picker] [data-header] {
+[data-bspk=calendar] [data-header] {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0;
   border-bottom: 1px solid var(--stroke-neutral-low);
 }
-[data-bspk=calendar-picker] [data-header] [data-title] {
+[data-bspk=calendar] [data-header] [data-title] {
   flex-grow: 1;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-[data-bspk=calendar-picker] [data-header] [data-title] [data-bspk=button] {
+[data-bspk=calendar] [data-header] [data-title] [data-bspk=button] {
   font: inherit;
 }
-[data-bspk=calendar-picker] [data-header] [data-title] [data-bspk=button][data-month] {
+[data-bspk=calendar] [data-header] [data-title] [data-bspk=button][data-month] {
   padding-right: var(--spacing-sizing-01);
 }
-[data-bspk=calendar-picker] [data-header] [data-title] [data-bspk=button][data-year] {
+[data-bspk=calendar] [data-header] [data-title] [data-bspk=button][data-year] {
   padding-left: var(--spacing-sizing-01);
 }
-[data-bspk=calendar-picker] [data-day-headers] {
+[data-bspk=calendar] [data-day-headers] {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   text-align: center;
   color: var(--foreground-neutral-on-surface-variant-01);
 }
-[data-bspk=calendar-picker] [data-day-headers] span {
+[data-bspk=calendar] [data-day-headers] span {
   height: var(--spacing-sizing-12);
   line-height: var(--spacing-sizing-12);
 }
-[data-bspk=calendar-picker] [data-body] {
+[data-bspk=calendar] [data-body] {
   display: grid;
 }
-[data-bspk=calendar-picker] [data-body] [data-bspk=button] {
+[data-bspk=calendar] [data-body] [data-bspk=button] {
   margin: auto;
 }
-[data-bspk=calendar-picker] [data-body] [data-non-month-day] {
+[data-bspk=calendar] [data-body] [data-non-month-day] {
   color: var(--foreground-neutral-on-surface-variant-02);
 }
-[data-bspk=calendar-picker][data-kind=day] {
+[data-bspk=calendar][data-kind=day] {
   padding: var(--spacing-sizing-01);
 }
-[data-bspk=calendar-picker][data-kind=day] [data-body] {
+[data-bspk=calendar][data-kind=day] [data-body] {
   grid-template-columns: repeat(7, 14.2857142857%);
 }
-[data-bspk=calendar-picker][data-kind=month] [data-body] {
+[data-bspk=calendar][data-kind=month] [data-body] {
   grid-template-columns: repeat(3, 33.3333333333%);
 }
-[data-bspk=calendar-picker][data-kind=year] [data-body] {
+[data-bspk=calendar][data-kind=year] [data-body] {
   grid-template-columns: repeat(4, 25%);
 }
 

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

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

package/dist/components/Calendar/index.js

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

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

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

package/dist/components/Card/Card.d.ts

@@ -1,5 +1,6 @@
 import './card.scss';
 import { ReactNode } from 'react';
+import { ElementProps } from '-/types/common';
 export type CardProps = {
     /**
      * The content of the card.
@@ -36,5 +37,5 @@ export type CardProps = {
  * @name Card
  * @phase UXReview
  */
-export declare function Card({ children, variant }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ children, variant, ...props }: ElementProps<CardProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Card/Card.js

@@ -22,7 +22,7 @@ import './card.css.js';
  * @name Card
  * @phase UXReview
  */
-export function Card({ children, variant = 'elevated' }) {
-    return (_jsx("div", { "data-bspk": "card", "data-variant": variant, children: children }));
+export function Card({ children, variant = 'elevated', ...props }) {
+    return (_jsx("div", { ...props, "data-bspk": "card", "data-variant": variant, children: children }));
 }
 //# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAkBrB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,UAAU,EAAa;IAC9D,OAAO,CACH,2BAAe,MAAM,kBAAe,OAAO,YACtC,QAAQ,GACP,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAmBrB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,UAAU,EAAE,GAAG,KAAK,EAAkC;IAC7F,OAAO,CACH,iBAAS,KAAK,eAAY,MAAM,kBAAe,OAAO,YACjD,QAAQ,GACP,CACT,CAAC;AACN,CAAC"}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,7 +1,7 @@
 import './checkbox.scss';
 import { ChangeEvent } from 'react';
-import { CommonProps, ElementProps, FormFieldControlProps, RequiredCommonProps } from '-/types/common';
-export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name' | 'readOnly'> & FormFieldControlProps & RequiredCommonProps<'value'> & {
+import { ElementProps, FieldControlProps } from '-/types/common';
+export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'value'> & {
     /**
      * If the checkbox is partially checked or
      * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
@@ -23,6 +23,8 @@ export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'invalid' |
      * @required
      */
     onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+    /** The value of the checkbox. */
+    value: string;
 };
 /**
  * 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
@@ -55,5 +57,5 @@ export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'invalid' |
  * @name Checkbox
  * @phase UXReview
  */
-export declare function Checkbox({ checked: checkedProp, indeterminate: indeterminateProp, invalid, disabled, readOnly, ...props }: ElementProps<CheckboxProps, 'input'>): import("react/jsx-runtime").JSX.Element;
+export declare function Checkbox({ checked: checkedProp, indeterminate: indeterminateProp, invalid, disabled, readOnly, required, ...props }: ElementProps<CheckboxProps, 'input'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Checkbox/Checkbox.js

@@ -32,7 +32,7 @@ import { useEffect, useRef } from 'react';
  * @name Checkbox
  * @phase UXReview
  */
-export function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled, readOnly, ...props }) {
+export function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled, readOnly, required, ...props }) {
     const indeterminate = !!indeterminateProp;
     const checked = !!checkedProp && !indeterminate;
     const inputRef = useRef();
@@ -46,6 +46,6 @@ export function Checkbox({ checked: checkedProp = false, indeterminate: indeterm
                         return;
                     inputRef.current = node;
                     node.indeterminate = indeterminate;
-                }, type: "checkbox" }), _jsxs("span", { "aria-hidden": true, children: [checked && (_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" }) })), indeterminate && (_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" }) }))] })] }));
+                }, required: required || undefined, type: "checkbox" }), _jsxs("span", { "aria-hidden": true, children: [checked && (_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" }) })), indeterminate && (_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" }) }))] })] }));
 }
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AA6BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,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,sBACS,KAAK,CAAC,kBAAkB,CAAC,IAAI,SAAS,uBACrC,KAAK,CAAC,mBAAmB,CAAC,IAAI,SAAS,kBAC5C,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,wBACI,aAAa,IAAI,SAAS,EAC9C,QAAQ,EAAE,QAAQ,IAAI,QAAQ,IAAI,SAAS,EAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,QAAQ,EAAE,QAAQ,EAClB,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,gDACK,OAAO,IAAI,CACR,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,CACT,EACA,aAAa,IAAI,CACd,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,CACT,IACE,IACJ,CACV,CAAC;AACN,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AA6BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,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,sBACS,KAAK,CAAC,kBAAkB,CAAC,IAAI,SAAS,uBACrC,KAAK,CAAC,mBAAmB,CAAC,IAAI,SAAS,kBAC5C,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,wBACI,aAAa,IAAI,SAAS,EAC9C,QAAQ,EAAE,QAAQ,IAAI,QAAQ,IAAI,SAAS,EAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,QAAQ,EAAE,QAAQ,EAClB,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,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAC,UAAU,GACjB,EACF,gDACK,OAAO,IAAI,CACR,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,CACT,EACA,aAAa,IAAI,CACd,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,CACT,IACE,IACJ,CACV,CAAC;AACN,CAAC"}

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,22 +1,9 @@
+import './checkbox-group.scss';
+import { CheckboxProps } from '-/components/Checkbox';
 import { ToggleOptionProps } from '-/components/ToggleOption';
-import { ElementProps, CommonProps, FormFieldControlProps } from '-/types/common';
-export type CheckboxGroupOption = Pick<ToggleOptionProps, 'description' | 'disabled' | 'label'> & Required<CommonProps<'value'>>;
-export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOnly'> & FormFieldControlProps & {
-    /**
-     * 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;
+import { ElementProps, FieldControlProps } from '-/types/common';
+export type CheckboxGroupOption = Pick<CheckboxProps, 'value'> & Pick<ToggleOptionProps, 'description' | 'disabled' | 'label'>;
+export type CheckboxGroupProps = FieldControlProps<string[]> & {
     /**
      * The options for the checkboxes.
      *
@@ -31,12 +18,6 @@ export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOn
      * @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.
      *
@@ -53,7 +34,7 @@ export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOn
  *     import { CheckboxGroup } from '@bspk/ui/CheckboxGroup';
  *
  *     function Example() {
- *         const [values, setValues] = React.useState<string[]>([]);
+ *         const [value, setValue] = React.useState<string[]>([]);
  *
  *         return (
  *             <CheckboxGroup
@@ -64,9 +45,9 @@ export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOn
  *                     { label: 'Option 2', value: 'option2' },
  *                     { label: 'Option 3', value: 'option3' },
  *                 ]}
- *                 values={values}
- *                 onChange={(nextValues: string[]) => {
- *                     setValues(nextValues);
+ *                 value={value}
+ *                 onChange={(nextValue: string[]) => {
+ *                     setValue(nextValue);
  *                 }}
  *             />
  *         );
@@ -75,5 +56,5 @@ export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOn
  * @name CheckboxGroup
  * @phase UXReview
  */
-export declare function CheckboxGroup({ onChange, options, name, values, selectAll, selectAllProps, disabled: disabledGroup, readOnly, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...props }: ElementProps<CheckboxGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxGroup({ onChange, options, name, value, selectAll, selectAllProps, disabled, readOnly, invalid: invalidProp, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-errormessage': ariaErrorMessageProp, ...props }: ElementProps<CheckboxGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -1,6 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './checkbox-group.css.js';
 import { Checkbox } from '../Checkbox';
+import { useFieldInit } from '../Field';
 import { ToggleOption } from '../ToggleOption';
+const ALL_LABEL = 'All';
 /**
  * A group of checkboxes that allows users to choose one or more items from a list or turn an feature on or off.
  *
@@ -8,7 +11,7 @@ import { ToggleOption } from '../ToggleOption';
  *     import { CheckboxGroup } from '@bspk/ui/CheckboxGroup';
  *
  *     function Example() {
- *         const [values, setValues] = React.useState<string[]>([]);
+ *         const [value, setValue] = React.useState<string[]>([]);
  *
  *         return (
  *             <CheckboxGroup
@@ -19,9 +22,9 @@ import { ToggleOption } from '../ToggleOption';
  *                     { label: 'Option 2', value: 'option2' },
  *                     { label: 'Option 3', value: 'option3' },
  *                 ]}
- *                 values={values}
- *                 onChange={(nextValues: string[]) => {
- *                     setValues(nextValues);
+ *                 value={value}
+ *                 onChange={(nextValue: string[]) => {
+ *                     setValue(nextValue);
  *                 }}
  *             />
  *         );
@@ -30,9 +33,16 @@ import { ToggleOption } from '../ToggleOption';
  * @name CheckboxGroup
  * @phase UXReview
  */
-export function CheckboxGroup({ onChange, options = [], name, values = [], selectAll, selectAllProps, disabled: disabledGroup = false, readOnly, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...props }) {
-    return (_jsxs("div", { ...props, "aria-describedby": ariaErrorMessage || ariaDescribedBy || undefined, "data-bspk": "checkbox-group", role: "group", children: [selectAll && (_jsx(_Fragment, { children: _jsx(ToggleOption, { label: selectAllProps?.label || 'All', readOnly: readOnly, children: _jsx(Checkbox, { "aria-label": selectAllProps?.label || 'All', checked: !!values.length && values.length === options.length, "data-testid": "selectAll-Checkbox", disabled: disabledGroup, indeterminate: !!values.length && values.length < options.length, name: name, onChange: (checked) => onChange(checked ? options.map((o) => o.value) : []), readOnly: readOnly, value: "all" }) }) })), options.map(({ label, description, value, disabled }) => (_jsx(ToggleOption, { description: description, disabled: disabled || disabledGroup, label: label, readOnly: readOnly, children: _jsx(Checkbox, { "aria-label": label, checked: values.includes(value), disabled: disabled || disabledGroup, name: name, onChange: (checked) => {
-                        onChange(checked ? [...values, value] : values.filter((v) => v !== value));
-                    }, readOnly: readOnly, value: value }) }, value)))] }));
+export function CheckboxGroup({ onChange, options = [], name, value = [], selectAll, selectAllProps, disabled = false, readOnly, invalid: invalidProp, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-errormessage': ariaErrorMessageProp, ...props }) {
+    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
+        idProp,
+        required,
+        disabled,
+        readOnly,
+        invalidProp,
+    });
+    return (_jsxs("div", { ...props, "aria-describedby": ariaDescribedByProp || ariaDescribedBy || undefined, "data-bspk": "checkbox-group", id: id, role: "group", children: [selectAll && (_jsx(ToggleOption, { label: selectAllProps?.label || ALL_LABEL, readOnly: readOnly, children: _jsx(Checkbox, { "aria-errormessage": ariaErrorMessageProp || ariaErrorMessage || undefined, "aria-label": selectAllProps?.label || ALL_LABEL, checked: !!value.length && value.length === options.length, "data-testid": "selectAll-Checkbox", disabled: disabled, indeterminate: !!value.length && value.length < options.length, invalid: invalid || undefined, name: name, onChange: (checked) => onChange(checked ? options.map((o) => o.value) : []), readOnly: readOnly, value: "all" }) })), options.map(({ label, description, value: optionValue, disabled: optionDisabled }) => (_jsx(ToggleOption, { description: description, disabled: disabled || optionDisabled, label: label, readOnly: readOnly, children: _jsx(Checkbox, { "aria-errormessage": ariaErrorMessageProp || ariaErrorMessage || undefined, "aria-label": label, checked: value.includes(optionValue), disabled: disabled || optionDisabled, invalid: invalid || undefined, name: name, onChange: (checked) => {
+                        onChange(checked ? [...value, optionValue] : value.filter((v) => v !== optionValue));
+                    }, readOnly: readOnly, value: optionValue }) }, optionValue)))] }));
 }
 //# sourceMappingURL=CheckboxGroup.js.map

package/dist/components/CheckboxGroup/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAqB,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAqD5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,aAAa,CAAC,EAC1B,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,MAAM,GAAG,EAAE,EACX,SAAS,EACT,cAAc,EACd,QAAQ,EAAE,aAAa,GAAG,KAAK,EAC/B,QAAQ,EACR,kBAAkB,EAAE,eAAe,EACnC,mBAAmB,EAAE,gBAAgB,EACrC,GAAG,KAAK,EAC8B;IACtC,OAAO,CACH,kBACQ,KAAK,sBACS,gBAAgB,IAAI,eAAe,IAAI,SAAS,eACxD,gBAAgB,EAC1B,IAAI,EAAC,OAAO,aAEX,SAAS,IAAI,CACV,4BACI,KAAC,YAAY,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,KAAK,EAAE,QAAQ,EAAE,QAAQ,YACnE,KAAC,QAAQ,kBACO,cAAc,EAAE,KAAK,IAAI,KAAK,EAC1C,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,iBAChD,oBAAoB,EAChC,QAAQ,EAAE,aAAa,EACvB,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,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAC,KAAK,GACb,GACS,GAChB,CACN,EACA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACtD,KAAC,YAAY,IACT,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,IAAI,aAAa,EAEnC,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,YAElB,KAAC,QAAQ,kBACO,KAAK,EACjB,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,QAAQ,EAAE,QAAQ,IAAI,aAAa,EACnC,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,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACd,IAdG,KAAK,CAeC,CAClB,CAAC,IACA,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"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"}

package/dist/components/CheckboxGroup/CheckboxGroupExample.js

@@ -2,6 +2,7 @@ export const presets = [
     {
         label: 'With Descriptions',
         propState: {
+            value: ['option2'],
             disabled: false,
             options: [
                 { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
@@ -20,6 +21,7 @@ export const presets = [
     {
         label: 'Group disabled',
         propState: {
+            value: ['option2'],
             disabled: true,
             options: [
                 { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
@@ -37,6 +39,7 @@ export const presets = [
     {
         label: 'Long labels',
         propState: {
+            value: ['option2'],
             disabled: false,
             options: [
                 { label: 'This is a very long label for option 1 that never seems to end', value: 'option1' },

package/dist/components/CheckboxGroup/CheckboxGroupExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroupExample.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroupExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,OAAO,GAAiC;IACjD;QACI,KAAK,EAAE,mBAAmB;QAC1B,SAAS,EAAE;YACP,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE;gBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;gBAChF;oBACI,KAAK,EAAE,UAAU;oBACjB,KAAK,EAAE,SAAS;oBAChB,WAAW,EAAE,qCAAqC;oBAClD,QAAQ,EAAE,IAAI;iBACjB;gBACD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;aACnF;YACD,CAAC,YAAY,CAAC,EAAE,gBAAgB;YAChC,IAAI,EAAE,gBAAgB;SACzB;KACJ;IACD;QACI,KAAK,EAAE,gBAAgB;QACvB,SAAS,EAAE;YACP,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE;gBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;gBAChF;oBACI,KAAK,EAAE,UAAU;oBACjB,KAAK,EAAE,SAAS;oBAChB,WAAW,EAAE,qCAAqC;iBACrD;gBACD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;aACnF;YACD,CAAC,YAAY,CAAC,EAAE,gBAAgB;YAChC,IAAI,EAAE,gBAAgB;SACzB;KACJ;IACD;QACI,KAAK,EAAE,aAAa;QACpB,SAAS,EAAE;YACP,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE;gBACL,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;gBAC7F,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;gBAC7F,EAAE,KAAK,EAAE,wCAAwC,EAAE,KAAK,EAAE,SAAS,EAAE;aACxE;YACD,CAAC,YAAY,CAAC,EAAE,gBAAgB;YAChC,IAAI,EAAE,gBAAgB;SACzB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAyC;IACtE,OAAO;CACV,CAAC"}
+{"version":3,"file":"CheckboxGroupExample.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroupExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,OAAO,GAAiC;IACjD;QACI,KAAK,EAAE,mBAAmB;QAC1B,SAAS,EAAE;YACP,KAAK,EAAE,CAAC,SAAS,CAAC;YAClB,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE;gBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;gBAChF;oBACI,KAAK,EAAE,UAAU;oBACjB,KAAK,EAAE,SAAS;oBAChB,WAAW,EAAE,qCAAqC;oBAClD,QAAQ,EAAE,IAAI;iBACjB;gBACD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;aACnF;YACD,CAAC,YAAY,CAAC,EAAE,gBAAgB;YAChC,IAAI,EAAE,gBAAgB;SACzB;KACJ;IACD;QACI,KAAK,EAAE,gBAAgB;QACvB,SAAS,EAAE;YACP,KAAK,EAAE,CAAC,SAAS,CAAC;YAClB,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE;gBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;gBAChF;oBACI,KAAK,EAAE,UAAU;oBACjB,KAAK,EAAE,SAAS;oBAChB,WAAW,EAAE,qCAAqC;iBACrD;gBACD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;aACnF;YACD,CAAC,YAAY,CAAC,EAAE,gBAAgB;YAChC,IAAI,EAAE,gBAAgB;SACzB;KACJ;IACD;QACI,KAAK,EAAE,aAAa;QACpB,SAAS,EAAE;YACP,KAAK,EAAE,CAAC,SAAS,CAAC;YAClB,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE;gBACL,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;gBAC7F,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;gBAC7F,EAAE,KAAK,EAAE,wCAAwC,EAAE,KAAK,EAAE,SAAS,EAAE;aACxE;YACD,CAAC,YAAY,CAAC,EAAE,gBAAgB;YAChC,IAAI,EAAE,gBAAgB;SACzB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAyC;IACtE,OAAO;CACV,CAAC"}

package/dist/components/CheckboxGroup/checkbox-group.css

@@ -0,0 +1,7 @@
+[data-bspk=checkbox-group] {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  max-width: 100%;
+  --list-item-height: "auto";
+}

package/dist/components/{DateField/date-field.css.js → CheckboxGroup/checkbox-group.css.js}

@@ -1,13 +1,12 @@
 /** * 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=date-field] {
+style.appendChild(document.createTextNode(`[data-bspk=checkbox-group] {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  width: fit-content;
+  gap: 0;
+  max-width: 100%;
+  --list-item-height: "auto";
 }
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);

package/dist/components/CheckboxGroupField/CheckboxGroupField.d.ts

@@ -0,0 +1,15 @@
+import { CheckboxGroupProps } from '-/components/CheckboxGroup';
+import { FormFieldControlProps } from '-/components/FormField';
+export type CheckboxGroupFieldProps = FormFieldControlProps<CheckboxGroupProps>;
+/**
+ * A field wrapper for the CheckboxGroup component.
+ *
+ * This component takes properties from the FormField and CheckboxGroup components.
+ *
+ * @name CheckboxGroupField
+ * @phase UXReview
+ *
+ * @generated
+ */
+export declare function CheckboxGroupField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }: CheckboxGroupFieldProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/CheckboxGroupField/CheckboxGroupField.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckboxGroup } from '../CheckboxGroup';
+import { Field, FieldDescription, FieldError, FieldLabel } from '../Field';
+/**
+ * A field wrapper for the CheckboxGroup component.
+ *
+ * This component takes properties from the FormField and CheckboxGroup components.
+ *
+ * @name CheckboxGroupField
+ * @phase UXReview
+ *
+ * @generated
+ */
+export function CheckboxGroupField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }) {
+    return (_jsxs(Field, { as: "fieldset", style: style, children: [_jsx(FieldLabel, { as: "legend", labelTrailing: labelTrailing, style: style, children: label }), _jsx(CheckboxGroup, { ...controlProps }), !errorMessage && helperText && _jsx(FieldDescription, { children: helperText }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+}
+//# sourceMappingURL=CheckboxGroupField.js.map

package/dist/components/CheckboxGroupField/CheckboxGroupField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroupField.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroupField/CheckboxGroupField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAsB,MAAM,4BAA4B,CAAC;AAC/E,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKrF;;;;;;;;;GASG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAC/B,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,KAAK,EACL,GAAG,YAAY,EACO;IACtB,OAAO,CACH,MAAC,KAAK,IAAC,EAAE,EAAC,UAAU,EAAC,KAAK,EAAE,KAAK,aAC7B,KAAC,UAAU,IAAC,EAAE,EAAC,QAAQ,EAAC,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,YAC7D,KAAK,GACG,EACb,KAAC,aAAa,OAAK,YAAY,GAAI,EAClC,CAAC,YAAY,IAAI,UAAU,IAAI,KAAC,gBAAgB,cAAE,UAAU,GAAoB,EAChF,YAAY,IAAI,KAAC,UAAU,cAAE,YAAY,GAAc,IACpD,CACX,CAAC;AACN,CAAC"}

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

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

package/dist/components/CheckboxGroupField/index.js

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

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

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

package/dist/components/CheckboxOption/CheckboxOption.d.ts

@@ -1,6 +1,7 @@
 import { CheckboxProps } from '-/components/Checkbox';
 import { ToggleOptionControlProps } from '-/components/ToggleOption';
-export type CheckboxOptionProps = ToggleOptionControlProps<CheckboxProps>;
+import { CommonProps } from '-/types/common';
+export type CheckboxOptionProps = CommonProps<'style'> & ToggleOptionControlProps<CheckboxProps>;
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
  *
@@ -29,5 +30,5 @@ export type CheckboxOptionProps = ToggleOptionControlProps<CheckboxProps>;
  * @name CheckboxOption
  * @phase UXReview
  */
-export declare function CheckboxOption({ label: labelProp, description, disabled, readOnly, ...checkboxProps }: CheckboxOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
+export declare function CheckboxOption({ label: labelProp, description, disabled, readOnly, style, ...checkboxProps }: CheckboxOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/CheckboxOption/CheckboxOption.js

@@ -29,9 +29,9 @@ import { ToggleOption } from '../ToggleOption';
  * @name CheckboxOption
  * @phase UXReview
  */
-export function CheckboxOption({ label: labelProp, description, disabled, readOnly, ...checkboxProps }) {
+export function CheckboxOption({ label: labelProp, description, disabled, readOnly, style, ...checkboxProps }) {
     const label = labelProp || description;
     const ariaLabel = description ? `${labelProp} - ${description}` : labelProp;
-    return (label && (_jsx(ToggleOption, { "data-bspk": "checkbox-option", description: description, disabled: disabled, label: label, readOnly: readOnly, children: _jsx(Checkbox, { ...checkboxProps, "aria-label": ariaLabel, disabled: disabled, readOnly: readOnly }) })));
+    return (label && (_jsx(ToggleOption, { "data-bspk": "checkbox-option", description: description, disabled: disabled, label: label, readOnly: readOnly, style: style, children: _jsx(Checkbox, { ...checkboxProps, "aria-label": ariaLabel, disabled: disabled, readOnly: readOnly }) })));
 }
 //# sourceMappingURL=CheckboxOption.js.map

package/dist/components/CheckboxOption/CheckboxOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxOption.js","sourceRoot":"","sources":["../../../src/components/CheckboxOption/CheckboxOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,YAAY,EAA4B,MAAM,2BAA2B,CAAC;AAInF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,cAAc,CAAC,EAC3B,KAAK,EAAE,SAAS,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,GAAG,aAAa,EACE;IAClB,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IACvC,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,MAAM,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5E,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBACC,iBAAiB,EAC3B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,YAElB,KAAC,QAAQ,OAAK,aAAa,gBAAc,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,GACnF,CAClB,CACJ,CAAC;AACN,CAAC"}
+{"version":3,"file":"CheckboxOption.js","sourceRoot":"","sources":["../../../src/components/CheckboxOption/CheckboxOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,YAAY,EAA4B,MAAM,2BAA2B,CAAC;AAKnF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,cAAc,CAAC,EAC3B,KAAK,EAAE,SAAS,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,GAAG,aAAa,EACE;IAClB,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IACvC,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,MAAM,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5E,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBACC,iBAAiB,EAC3B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,YAEZ,KAAC,QAAQ,OAAK,aAAa,gBAAc,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,GACnF,CAClB,CACJ,CAAC;AACN,CAAC"}

package/dist/components/{ChipUtility/ChipUtility.d.ts → Chip/Chip.d.ts}

@@ -1,8 +1,8 @@
-import './chip-utility.scss';
+import './chip.scss';
 import { ReactNode } from 'react';
 import { BadgeProps } from '-/components/Badge';
 export type BadgeItem = Pick<BadgeProps, 'count' | 'size' | 'surfaceBorder'>;
-export type ChipUtilityProps = {
+export type ChipProps = {
     /**
      * Is the chip disabled.
      *
@@ -58,7 +58,7 @@ export type ChipUtilityProps = {
  * Dynamically generated options that are suggested to the user as responses or prompts.
  *
  * @example
- *     import { ChipUtility } from '@bspk/ui/ChipUtility';
+ *     import { Chip } from '@bspk/ui/Chip';
  *
  *     function Example() {
  *         return (
@@ -68,8 +68,8 @@ export type ChipUtilityProps = {
  *         );
  *     }
  *
- * @name ChipUtility
- * @phase Utility
+ * @name Chip
+ * @phase UXReview
  */
-export declare function ChipUtility({ flat, disabled, label, selected, leadingIcon, onClick, trailingIcon, trailingBadge, }: ChipUtilityProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chip({ flat, disabled, label, selected, leadingIcon, onClick, trailingIcon, trailingBadge, }: ChipProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Chip/Chip.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './chip.css.js';
+import { isValidElement } from 'react';
+import { Badge } from '../Badge';
+/**
+ * Dynamically generated options that are suggested to the user as responses or prompts.
+ *
+ * @example
+ *     import { Chip } from '@bspk/ui/Chip';
+ *
+ *     function Example() {
+ *         return (
+ *             <Chip label="Label" onClick={() => console.log('Chip clicked!')}>
+ *                 Example Chip
+ *             </Chip>
+ *         );
+ *     }
+ *
+ * @name Chip
+ * @phase UXReview
+ */
+export function Chip({ flat = false, disabled = false, label, selected = false, leadingIcon, onClick, trailingIcon, trailingBadge, }) {
+    return (_jsxs("button", { "data-bspk": "chip", "data-disabled": disabled || undefined, "data-flat": flat || undefined, "data-selected": selected || undefined, "data-touch-target-parent": true, disabled: disabled, onClick: disabled ? undefined : onClick, children: [isValidElement(leadingIcon) && (_jsx("span", { "aria-hidden": "true", "data-chip-icon": true, children: leadingIcon })), _jsx("span", { children: label }), isValidElement(trailingIcon) && (_jsx("span", { "aria-hidden": "true", "data-chip-icon": true, children: trailingIcon })), trailingBadge && !trailingIcon && (_jsx(Badge, { count: trailingBadge.count, size: trailingBadge.size, surfaceBorder: trailingBadge.surfaceBorder })), _jsx("span", { "data-touch-target": true })] }));
+}
+//# sourceMappingURL=Chip.js.map

package/dist/components/Chip/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AACrB,OAAO,EAAa,cAAc,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,KAAK,EAAc,MAAM,oBAAoB,CAAC;AAyDvD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,IAAI,CAAC,EACjB,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,OAAO,EACP,YAAY,EACZ,aAAa,GACL;IACR,OAAO,CACH,+BACc,MAAM,mBACD,QAAQ,IAAI,SAAS,eACzB,IAAI,IAAI,SAAS,mBACb,QAAQ,IAAI,SAAS,oCAEpC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,aAEtC,cAAc,CAAC,WAAW,CAAC,IAAI,CAC5B,8BAAkB,MAAM,oCACnB,WAAW,GACT,CACV,EACD,yBAAO,KAAK,GAAQ,EACnB,cAAc,CAAC,YAAY,CAAC,IAAI,CAC7B,8BAAkB,MAAM,oCACnB,YAAY,GACV,CACV,EACA,aAAa,IAAI,CAAC,YAAY,IAAI,CAC/B,KAAC,KAAK,IACF,KAAK,EAAE,aAAa,CAAC,KAAK,EAC1B,IAAI,EAAE,aAAa,CAAC,IAAI,EACxB,aAAa,EAAE,aAAa,CAAC,aAAa,GAC5C,CACL,EACD,2CAA0B,IACrB,CACZ,CAAC;AACN,CAAC"}

package/dist/components/Chip/ChipExample.d.ts

@@ -0,0 +1,4 @@
+import { ChipProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<ChipProps>[];
+export declare const ChipExample: ComponentExample<ChipProps>;

package/dist/components/{ChipUtility/ChipUtilityExample.js → Chip/ChipExample.js}

@@ -56,8 +56,8 @@ export const presets = [
         },
     },
 ];
-export const ChipUtilityExample = {
+export const ChipExample = {
     render: ({ props, Component }) => _jsx(Component, { ...props }),
     presets,
 };
-//# sourceMappingURL=ChipUtilityExample.js.map
+//# sourceMappingURL=ChipExample.js.map

package/dist/components/Chip/ChipExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipExample.js","sourceRoot":"","sources":["../../../src/components/Chip/ChipExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAAwB;IACxC;QACI,KAAK,EAAE,OAAO;QACd,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;SAChB;KACJ;IACD;QACI,KAAK,EAAE,cAAc;QACrB,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,KAAK;YAClB,YAAY,EAAE,EAAE;SACnB;KACJ;IACD;QACI,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,EAAE;YACf,YAAY,EAAE,KAAK;SACtB;KACJ;IACD;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,KAAK;YAClB,YAAY,EAAE,KAAK;SACtB;KACJ;IACD;QACI,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,WAAW;YACxB,YAAY,EAAE,QAAQ;SACzB;KACJ;IACD;QACI,KAAK,EAAE,gBAAgB;QACvB,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,KAAK;YAClB,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,SAA8B,EAAE;SACpE;KACJ;IACD;QACI,KAAK,EAAE,qBAAqB;QAC5B,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,YAAY,EAAE,OAAO;YACrB,aAAa,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,SAA8B,EAAE;SACpE;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAgC;IACpD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,OAAO;CACV,CAAC"}

package/dist/components/{ChipUtility/chip-utility.css → Chip/chip.css}

@@ -1,4 +1,4 @@
-[data-bspk-utility=chip-utility] {
+[data-bspk=chip] {
   flex-direction: row;
   gap: var(--spacing-sizing-02);
   height: var(--spacing-sizing-08);
@@ -10,37 +10,37 @@
   border-radius: var(--radius-sm);
   padding: 0 var(--spacing-sizing-03);
 }
-[data-bspk-utility=chip-utility] [data-touch-target] {
+[data-bspk=chip] [data-touch-target] {
   min-width: var(--spacing-sizing-12);
   min-height: var(--spacing-sizing-12);
 }
-[data-bspk-utility=chip-utility]:not([data-flat]) {
+[data-bspk=chip]:not([data-flat]) {
   box-shadow: var(--drop-shadow-raise);
 }
-[data-bspk-utility=chip-utility][data-variant=filter] {
+[data-bspk=chip][data-variant=filter] {
   cursor: pointer;
 }
-[data-bspk-utility=chip-utility][data-disabled] {
+[data-bspk=chip][data-disabled] {
   color: var(--foreground-neutral-disabled-on-surface);
   cursor: not-allowed;
   border-color: var(--stroke-neutral-disabled-light);
   background-color: var(--interactions-disabled-opacity);
 }
-[data-bspk-utility=chip-utility]:not([data-disabled]):hover {
+[data-bspk=chip]:not([data-disabled]):hover {
   background-color: var(--interactions-neutral-hover-opacity);
 }
-[data-bspk-utility=chip-utility]:not([data-disabled]):active {
+[data-bspk=chip]:not([data-disabled]):active {
   background-color: var(--interactions-neutral-press-opacity);
 }
-[data-bspk-utility=chip-utility]:not([data-disabled]):focus {
+[data-bspk=chip]:not([data-disabled]):focus {
   outline: 1px solid var(--stroke-neutral-focus);
   border-color: var(--stroke-neutral-focus);
 }
-[data-bspk-utility=chip-utility][data-selected] {
+[data-bspk=chip][data-selected] {
   background-color: var(--surface-brand-primary-highlight);
   border-color: var(--stroke-brand-primary);
 }
-[data-bspk-utility=chip-utility] [data-chip-icon] {
+[data-bspk=chip] [data-chip-icon] {
   display: flex;
   align-items: center;
 }