@bspk/ui 1.3.3 → 1.3.4

package/dist/components/TimePicker/utils.js

@@ -0,0 +1,35 @@
+import { format, isValid, parse } from 'date-fns';
+export const MINUTE_OPTIONS = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'];
+export const HOUR_OPTIONS = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
+export const MERIDIEM_OPTIONS = ['AM', 'PM'];
+export function stringValueToParts(timeString) {
+    // Parse the 24-hour time string into a Date object
+    // 'HH:mm' is the format for 24-hour time (e.g., '14:30')
+    // new Date() provides a base date for parsing, which is necessary
+    // but the date part won't affect the time parsing here.
+    const dateObj = parse(timeString, 'HH:mm', new Date());
+    const isValidDate = isValid(dateObj);
+    // Extract hours, minutes, and AM/PM using format
+    return {
+        hours: isValidDate ? format(dateObj, 'hh') : undefined,
+        minutes: isValidDate ? format(dateObj, 'mm') : undefined,
+        meridiem: isValidDate ? format(dateObj, 'a') : 'AM',
+        str: timeString,
+    };
+}
+export function partsToStringValue(hours, minutes, meridiem) {
+    if (typeof hours === 'undefined' || typeof minutes === 'undefined') {
+        return '';
+    }
+    const minutesNumber = Number(minutes);
+    let hours24 = Number(hours);
+    if (meridiem === 'PM' && hours24 < 12) {
+        hours24 += 12;
+    }
+    else if (meridiem === 'AM' && hours24 === 12) {
+        hours24 = 0;
+    }
+    // Format the date object back to a 24-hour time string
+    return `${hours24.toString().padStart(2, '0')}:${minutesNumber.toString().padStart(2, '0')}`;
+}
+//# sourceMappingURL=utils.js.map

package/dist/components/TimePicker/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/TimePicker/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AACvG,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AACrG,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAI7C,MAAM,UAAU,kBAAkB,CAAC,UAAkB;IACjD,mDAAmD;IACnD,yDAAyD;IACzD,kEAAkE;IAClE,wDAAwD;IAExD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC;IAEvD,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAErC,iDAAiD;IACjD,OAAO;QACH,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS;QACtD,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS;QACxD,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAE,MAAM,CAAC,OAAO,EAAE,GAAG,CAAc,CAAC,CAAC,CAAC,IAAI;QACjE,GAAG,EAAE,UAAU;KAClB,CAAC;AACN,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,KAAyB,EAAE,OAA2B,EAAE,QAAkB;IACzG,IAAI,OAAO,KAAK,KAAK,WAAW,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE,CAAC;QACjE,OAAO,EAAE,CAAC;IACd,CAAC;IAED,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAEtC,IAAI,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5B,IAAI,QAAQ,KAAK,IAAI,IAAI,OAAO,GAAG,EAAE,EAAE,CAAC;QACpC,OAAO,IAAI,EAAE,CAAC;IAClB,CAAC;SAAM,IAAI,QAAQ,KAAK,IAAI,IAAI,OAAO,KAAK,EAAE,EAAE,CAAC;QAC7C,OAAO,GAAG,CAAC,CAAC;IAChB,CAAC;IAED,uDAAuD;IACvD,OAAO,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,IAAI,aAAa,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;AACjG,CAAC"}

package/dist/components/TimePickerField/TimePickerField.d.ts

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

package/dist/components/TimePickerField/TimePickerField.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from '../FormField';
+import { TimePicker } from '../TimePicker';
+/**
+ * A field wrapper for the TimePicker component.
+ *
+ * This component takes properties from the FormField and TimePicker components.
+ *
+ * @name TimePickerField
+ * @phase UXReview
+ *
+ * @generated
+ */
+export function TimePickerField({ label, helperText, labelTrailing, errorMessage, ...controlProps }) {
+    return (_jsx(FormField, { errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, children: _jsx(TimePicker, { ...controlProps }) }));
+}
+//# sourceMappingURL=TimePickerField.js.map

package/dist/components/TimePickerField/TimePickerField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerField.js","sourceRoot":"","sources":["../../../src/components/TimePickerField/TimePickerField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAyB,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAItE;;;;;;;;;GASG;AACH,MAAM,UAAU,eAAe,CAAC,EAC5B,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,GAAG,YAAY,EACI;IACnB,OAAO,CACH,KAAC,SAAS,IAAC,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,YACrG,KAAC,UAAU,OAAK,YAAY,GAAI,GACxB,CACf,CAAC;AACN,CAAC"}

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

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

package/dist/components/TimePickerField/index.js

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

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

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

package/dist/components/ToggleOption/ToggleOption.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import './toggle-option.css.js';
+import { ListItem } from '../ListItem';
 /**
  * A utility component that wraps a checkbox, radio, and switch.
  *
@@ -7,6 +8,6 @@ import './toggle-option.css.js';
  * @phase Utility
  */
 export function ToggleOption({ label, description, children, disabled, readOnly }) {
-    return (_jsxs("label", { "aria-disabled": !!disabled || !!readOnly || undefined, "data-bspk": "toggle-option", children: [_jsx("span", { "data-control": true, children: children }), _jsx("span", { "data-label": true, children: label }), description && _jsx("span", { "data-description": true, children: description })] }));
+    return (_jsx(ListItem, { as: "label", "data-disabled": disabled, "data-readonly": readOnly, label: label, leading: children, subText: description, width: "hug" }));
 }
 //# sourceMappingURL=ToggleOption.js.map

package/dist/components/ToggleOption/ToggleOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleOption.js","sourceRoot":"","sources":["../../../src/components/ToggleOption/ToggleOption.tsx"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAC;AAyB9B;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAqB;IAChG,OAAO,CACH,kCAAsB,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,QAAQ,IAAI,SAAS,eAAY,eAAe,aAClF,+CAAoB,QAAQ,GAAQ,EACpC,6CAAkB,KAAK,GAAQ,EAC9B,WAAW,IAAI,mDAAwB,WAAW,GAAQ,IACvD,CACX,CAAC;AACN,CAAC"}
+{"version":3,"file":"ToggleOption.js","sourceRoot":"","sources":["../../../src/components/ToggleOption/ToggleOption.tsx"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAwBjD;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAqB;IAChG,OAAO,CACH,KAAC,QAAQ,IACL,EAAE,EAAC,OAAO,mBACK,QAAQ,mBACR,QAAQ,EACvB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,QAAQ,EACjB,OAAO,EAAE,WAAW,EACpB,KAAK,EAAC,KAAK,GACb,CACL,CAAC;AACN,CAAC"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -39,7 +39,7 @@ export type TooltipProps = {
  *     import { Tooltip } from '@bspk/ui/Tooltip';
  *     import { Button } from '@bspk/ui/Button';
  *
- *     export function Example() {
+ *     function Example() {
  *         return (
  *             <Tooltip label="I explain what this button does" placement="top">
  *                 {(triggerProps) => <Button {...triggerProps}>Click me</Button>}

package/dist/components/Tooltip/Tooltip.js

@@ -11,7 +11,7 @@ import { useId } from '../../hooks/useId';
  *     import { Tooltip } from '@bspk/ui/Tooltip';
  *     import { Button } from '@bspk/ui/Button';
  *
- *     export function Example() {
+ *     function Example() {
  *         return (
  *             <Tooltip label="I explain what this button does" placement="top">
  *                 {(triggerProps) => <Button {...triggerProps}>Click me</Button>}

package/dist/components/Tooltip/TooltipExample.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '../Button';
 export const TooltipExample = {
     render: ({ props: state, Component }) => {
-        return (_jsx(_Fragment, { children: _jsx(Component, { ...state, label: `Hover over me ${state.label || ''}`, placement: [state.placement].flat()[0] || 'top', children: (triggerProps) => _jsx(Button, { ...triggerProps, label: "Hover over me", variant: "secondary" }) }) }));
+        return (_jsx(Component, { ...state, label: `Hover over me ${state.label || ''}`, placement: [state.placement].flat()[0] || 'top', children: (triggerProps) => _jsx(Button, { ...triggerProps, label: "Hover over me", variant: "secondary" }) }));
     },
 };
 //# sourceMappingURL=TooltipExample.js.map

package/dist/components/Tooltip/TooltipExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipExample.js","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,cAAc,GAAmC;IAC1D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QACpC,OAAO,CACH,4BACI,KAAC,SAAS,OACF,KAAK,EACT,KAAK,EAAE,iBAAiB,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE,EAC3C,SAAS,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,YAE9C,CAAC,YAAY,EAAE,EAAE,CAAC,KAAC,MAAM,OAAK,YAAY,EAAE,KAAK,EAAC,eAAe,EAAC,OAAO,EAAC,WAAW,GAAG,GACjF,GACb,CACN,CAAC;IACN,CAAC;CACJ,CAAC"}
+{"version":3,"file":"TooltipExample.js","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,cAAc,GAAmC;IAC1D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QACpC,OAAO,CACH,KAAC,SAAS,OACF,KAAK,EACT,KAAK,EAAE,iBAAiB,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE,EAC3C,SAAS,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,YAE9C,CAAC,YAAY,EAAE,EAAE,CAAC,KAAC,MAAM,OAAK,YAAY,EAAE,KAAK,EAAC,eAAe,EAAC,OAAO,EAAC,WAAW,GAAG,GACjF,CACf,CAAC;IACN,CAAC;CACJ,CAAC"}

package/dist/components/Txt/Txt.d.ts

@@ -45,7 +45,7 @@ export type TxtProps<As extends ElementType = 'span'> = {
  * @example
  *     import { Txt } from '@bspk/ui/Txt';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <Txt>Example Txt</Txt>;
  *     }
  *

package/dist/components/Txt/Txt.js

@@ -6,7 +6,7 @@ import { SkeletonText } from '../SkeletonText';
  * @example
  *     import { Txt } from '@bspk/ui/Txt';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <Txt>Example Txt</Txt>;
  *     }
  *

package/dist/constants/brands.d.ts

@@ -3,5 +3,5 @@ export declare const BRANDS: {
     /** The title of the brand. */
     title: string;
     /** The slug of the brand, used in URLs and identifiers. */
-    slug: Brand;
+    slug: Brand | 'example';
 }[];

package/dist/constants/brands.js

@@ -35,5 +35,9 @@ export const BRANDS = [
         title: "Sotheby's",
         slug: 'sothebys',
     },
+    {
+        title: 'Example',
+        slug: 'example',
+    },
 ];
 //# sourceMappingURL=brands.js.map

package/dist/constants/brands.js.map

@@ -1 +1 @@
-{"version":3,"file":"brands.js","sourceRoot":"","sources":["../../src/constants/brands.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,MAAM,GAKb;IACF;QACI,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,UAAU;KACnB;IACD;QACI,KAAK,EAAE,wBAAwB;QAC/B,IAAI,EAAE,sBAAsB;KAC/B;IACD;QACI,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,QAAQ;KACjB;IACD;QACI,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,YAAY;KACrB;IACD;QACI,KAAK,EAAE,iBAAiB;QACxB,IAAI,EAAE,iBAAiB;KAC1B;IACD;QACI,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,UAAU;KACnB;IACD;QACI,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,aAAa;KACtB;IACD;QACI,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,KAAK;KACd;IACD;QACI,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,UAAU;KACnB;CACK,CAAC"}
+{"version":3,"file":"brands.js","sourceRoot":"","sources":["../../src/constants/brands.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,MAAM,GAKb;IACF;QACI,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,UAAU;KACnB;IACD;QACI,KAAK,EAAE,wBAAwB;QAC/B,IAAI,EAAE,sBAAsB;KAC/B;IACD;QACI,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,QAAQ;KACjB;IACD;QACI,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,YAAY;KACrB;IACD;QACI,KAAK,EAAE,iBAAiB;QACxB,IAAI,EAAE,iBAAiB;KAC1B;IACD;QACI,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,UAAU;KACnB;IACD;QACI,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,aAAa;KACtB;IACD;QACI,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,KAAK;KACd;IACD;QACI,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,UAAU;KACnB;IACD;QACI,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;KAClB;CACK,CAAC"}

package/dist/hooks/useCheckboxGroupState.d.ts

@@ -6,7 +6,7 @@ import { CheckboxProps } from '-/components/Checkbox';
  *     import { Checkbox } from "@bspk/ui/Checkbox";
  *     import { useCheckboxGroupState } from "@bspk/ui/hooks/useCheckboxGroupState";
  *
- *     export function Example() {
+ *     function Example() {
  *     const allValues = ["Red", "Orange", "Yellow", "Green"];
  *
  *     const { allCheckboxProps, checkboxProps, values } = useCheckboxGroupState(allValues, "fruits");

package/dist/hooks/useCheckboxGroupState.js

@@ -6,7 +6,7 @@ import { useCallback, useMemo, useState } from 'react';
  *     import { Checkbox } from "@bspk/ui/Checkbox";
  *     import { useCheckboxGroupState } from "@bspk/ui/hooks/useCheckboxGroupState";
  *
- *     export function Example() {
+ *     function Example() {
  *     const allValues = ["Red", "Orange", "Yellow", "Green"];
  *
  *     const { allCheckboxProps, checkboxProps, values } = useCheckboxGroupState(allValues, "fruits");

package/dist/hooks/useCheckboxState.d.ts

@@ -6,7 +6,7 @@ import { CheckboxProps } from '-/components/Checkbox';
  *     import { Checkbox } from '@bspk/ui/Checkbox';
  *     import { useCheckboxState } from '@bspk/ui/hooks/useCheckboxState';
  *
- *     export function Example() {
+ *     function Example() {
  *     const { checkboxProps } = useCheckboxState('fruits');
  *     return <Checkbox aria-label="cherry" {...checkboxProps('cherry')} />;
  *     }

package/dist/hooks/useCheckboxState.js

@@ -6,7 +6,7 @@ import { useState } from 'react';
  *     import { Checkbox } from '@bspk/ui/Checkbox';
  *     import { useCheckboxState } from '@bspk/ui/hooks/useCheckboxState';
  *
- *     export function Example() {
+ *     function Example() {
  *     const { checkboxProps } = useCheckboxState('fruits');
  *     return <Checkbox aria-label="cherry" {...checkboxProps('cherry')} />;
  *     }

package/dist/hooks/useContainerWidth.d.ts

@@ -4,7 +4,7 @@
  * @example
  *     import { useRef } from 'react';
  *     import { useContainerWidth } from '@bspk/ui/hooks/useContainerWidth';
- *     export function Example() {
+ *     function Example() {
  *         const containerRef = useRef<HTMLDivElement>(null);
  *         const width = useContainerWidth(containerRef);
  *         return <div ref={containerRef}>Width: {width}px</div>;

package/dist/hooks/useContainerWidth.js

@@ -5,7 +5,7 @@ import { useState, useLayoutEffect } from 'react';
  * @example
  *     import { useRef } from 'react';
  *     import { useContainerWidth } from '@bspk/ui/hooks/useContainerWidth';
- *     export function Example() {
+ *     function Example() {
  *         const containerRef = useRef<HTMLDivElement>(null);
  *         const width = useContainerWidth(containerRef);
  *         return <div ref={containerRef}>Width: {width}px</div>;

package/dist/hooks/useModalState.d.ts

@@ -5,7 +5,7 @@
  *     import { Modal } from '@bspk/ui/Modal';
  *     import { useModalState } from '@bspk/ui/hooks/useModalState';
  *
- *     export function Example() {
+ *     function Example() {
  *     const modalProps = useModalState(false);
  *     return <Modal  {...modalProps}>...</Modal>
  *     }

package/dist/hooks/useModalState.js

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
  *     import { Modal } from '@bspk/ui/Modal';
  *     import { useModalState } from '@bspk/ui/hooks/useModalState';
  *
- *     export function Example() {
+ *     function Example() {
  *     const modalProps = useModalState(false);
  *     return <Modal  {...modalProps}>...</Modal>
  *     }

package/dist/hooks/useOutsideClick.d.ts

@@ -6,7 +6,7 @@
  *     import { useOutsideClick } from '@bspk/ui/hooks/useOutsideClick';
  *     import React, { useRef, useState } from 'react';
  *
- *     export function Example() {
+ *     function Example() {
  *     const [isOpen, setIsOpen] = useState(false);
  *     const containerRef = useRef<HTMLDivElement>(null);
  *

package/dist/hooks/useOutsideClick.js

@@ -7,7 +7,7 @@ import { useEffect } from 'react';
  *     import { useOutsideClick } from '@bspk/ui/hooks/useOutsideClick';
  *     import React, { useRef, useState } from 'react';
  *
- *     export function Example() {
+ *     function Example() {
  *     const [isOpen, setIsOpen] = useState(false);
  *     const containerRef = useRef<HTMLDivElement>(null);
  *

package/dist/hooks/useRadioState.d.ts

@@ -6,7 +6,7 @@ import { RadioProps } from '-/components/Radio';
  *     import { Radio } from '@bspk/ui/Radio';
  *     import { useRadioState } from '@bspk/ui/hooks/useRadioState';
  *
- *     export function Example() {
+ *     function Example() {
  *     const { radioProps } = useRadioState('fruits');
  *     return <Radio aria-label="cherry" {...radioProps('cherry')} />;
  *     }
@@ -18,6 +18,6 @@ import { RadioProps } from '-/components/Radio';
 export declare function useRadioState(name: string, externalState?: [value: string | undefined, onChange: (next: string) => void]): {
     radioProps: (radioValue: string) => Pick<RadioProps, "checked" | "name" | "onChange" | "value">;
     value: string | undefined;
-    setValue: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    setValue: (next: string) => void;
 };
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useRadioState.js

@@ -6,7 +6,7 @@ import { useState } from 'react';
  *     import { Radio } from '@bspk/ui/Radio';
  *     import { useRadioState } from '@bspk/ui/hooks/useRadioState';
  *
- *     export function Example() {
+ *     function Example() {
  *     const { radioProps } = useRadioState('fruits');
  *     return <Radio aria-label="cherry" {...radioProps('cherry')} />;
  *     }

package/dist/hooks/useTimeout.d.ts

@@ -10,7 +10,7 @@ type TimeoutHook = {
  *     import { useTimeout } from '@bspk/ui/hooks/useTimeout';
  *     import { useEffect } from 'react';
  *
- *     export function MyComponent() {
+ *     function MyComponent() {
  *     const timeout = useTimeout();
  *
  *     const handleClick = () => {

package/dist/styles/base.css

@@ -105,6 +105,9 @@
   --z-index-navbar: 700;
   --z-index-footer: 600;
   --list-item-height: var(--spacing-sizing-13);
+  --button-border-width: 1px;
+  --button-border-type: solid;
+  --button-border-radius: var(--radius-sm);
 }
 
 @media (prefers-reduced-motion) {

package/dist/styles/base.css.js

@@ -108,6 +108,9 @@ style.appendChild(document.createTextNode(`/**
   --z-index-navbar: 700;
   --z-index-footer: 600;
   --list-item-height: var(--spacing-sizing-13);
+  --button-border-width: 1px;
+  --button-border-type: solid;
+  --button-border-radius: var(--radius-sm);
 }
 
 @media (prefers-reduced-motion) {

package/dist/types/common.d.ts

@@ -5,7 +5,7 @@
  *
  * @bspk/ui/Txt".
  */
-import { JSXElementConstructor, ReactNode, ComponentPropsWithoutRef, AriaRole } from 'react';
+import { JSXElementConstructor, ReactNode, ComponentPropsWithoutRef, AriaRole, ChangeEvent, KeyboardEvent } from 'react';
 export type AlertVariant = 'error' | 'informational' | 'success' | 'warning';
 /** Sets a ref to the given element. */
 export type SetRef<T> = (instance: T | null) => void;
@@ -31,9 +31,9 @@ export type CallToActionButton = {
 };
 export type CommonPropsLibrary = {
     /**
-     * Marks the element as invalid and displays error state theme.
+     * Indicates that the element is in an invalid state and displays the error theme.
      *
-     * If the errorMessage is empty the error state theme will not appear.
+     * If set to true, an accompanying error message should be provided.
      *
      * @default false
      */
@@ -87,13 +87,13 @@ export type CommonPropsLibrary = {
      *
      * @required
      */
-    value?: string;
+    optionValue?: string;
     /**
      * The aria-label for the element.
      *
      * @required
      */
-    'aria-label': string;
+    'aria-label'?: string;
     /**
      * Identifies the parent component. Helps with styling, debugging, and/or testing purposes.
      *
@@ -109,11 +109,19 @@ export type CommonPropsLibrary = {
 };
 export type CommonProps<K extends keyof CommonPropsLibrary> = Pick<CommonPropsLibrary, K>;
 export type RequiredCommonProps<K extends keyof CommonPropsLibrary> = Required<Pick<CommonPropsLibrary, K>>;
-export type FormFieldControlProps = {
-    /** The id of the control description. */
-    'aria-describedby'?: string;
-    /** The id of the error message */
-    'aria-errormessage'?: string;
+export type FieldControlProps<ValueType = string, ChangeContext = ChangeEvent<HTMLElement> | KeyboardEvent | undefined> = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'required'> & {
+    /**
+     * The value of the field control.
+     *
+     * @required
+     */
+    value: ValueType | undefined;
+    /**
+     * The function to call when the value changes.
+     *
+     * @required
+     */
+    onChange: (next: ValueType | undefined, event?: ChangeContext) => void;
 };
 export type Brand = 'anywhere' | 'better-homes-gardens' | 'cartus' | 'century-21' | 'coldwell-banker' | 'corcoran' | 'denali-boss' | 'era' | 'sothebys';
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/types/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;AA8IH,sDAAsD"}
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;AAgKH,sDAAsD"}

package/dist/types/meta.d.ts

@@ -44,6 +44,7 @@ export type ComponentMeta = BaseMeta & {
         description?: string;
     };
     phase: ComponentPhase;
+    generated?: boolean;
 };
 export type UtilityMeta = BaseMeta & {
     param?: string;

package/dist/types/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../src/types/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAqB;IACnD,SAAS,EAAE,qDAAqD;IAChE,SAAS,EAAE,mDAAmD;IAC9D,KAAK,EAAE,+CAA+C;IACtD,UAAU,EAAE,mCAAmC;IAC/C,QAAQ,EAAE,mBAAmB;CAChC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAOzB;IACA,OAAO,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,EAAE,EAAE,SAAS;QACb,WAAW,EACP,4IAA4I;KACnJ;IACD,GAAG,EAAE;QACD,KAAK,EAAE,aAAa;QACpB,EAAE,EAAE,KAAK;QACT,WAAW,EACP,+JAA+J;KACtK;IACD,QAAQ,EAAE;QACN,KAAK,EAAE,WAAW;QAClB,EAAE,EAAE,UAAU;QACd,WAAW,EACP,+LAA+L;KACtM;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,EAAE,EAAE,QAAQ;QACZ,WAAW,EACP,sJAAsJ;KAC7J;IACD,OAAO,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,EAAE,EAAE,SAAS;QACb,WAAW,EAAE,mEAAmE;KACnF;CACJ,CAAC;AAkDF,sDAAsD"}
+{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../src/types/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAqB;IACnD,SAAS,EAAE,qDAAqD;IAChE,SAAS,EAAE,mDAAmD;IAC9D,KAAK,EAAE,+CAA+C;IACtD,UAAU,EAAE,mCAAmC;IAC/C,QAAQ,EAAE,mBAAmB;CAChC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAOzB;IACA,OAAO,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,EAAE,EAAE,SAAS;QACb,WAAW,EACP,4IAA4I;KACnJ;IACD,GAAG,EAAE;QACD,KAAK,EAAE,aAAa;QACpB,EAAE,EAAE,KAAK;QACT,WAAW,EACP,+JAA+J;KACtK;IACD,QAAQ,EAAE;QACN,KAAK,EAAE,WAAW;QAClB,EAAE,EAAE,UAAU;QACd,WAAW,EACP,+LAA+L;KACtM;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,EAAE,EAAE,QAAQ;QACZ,WAAW,EACP,sJAAsJ;KAC7J;IACD,OAAO,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,EAAE,EAAE,SAAS;QACb,WAAW,EAAE,mEAAmE;KACnF;CACJ,CAAC;AAmDF,sDAAsD"}

package/dist/utils/demo.d.ts

@@ -99,6 +99,7 @@ export type ComponentExample<Props = Record<string, unknown>, PropName extends k
             CodeExample: CodeExample;
             Syntax: Syntax;
         }) => React.ReactNode;
+        location?: 'afterDemo' | 'beforeDemo';
     }[];
 };
 export type Syntax = (params: {

package/dist/utils/demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"demo.js","sourceRoot":"","sources":["../../src/utils/demo.ts"],"names":[],"mappings":"AAAA,uDAAuD;AAgKvD,MAAM,UAAU,SAAS,CAAC,SAAiB,KAAK;IAC5C,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;AACrE,CAAC"}
+{"version":3,"file":"demo.js","sourceRoot":"","sources":["../../src/utils/demo.ts"],"names":[],"mappings":"AAAA,uDAAuD;AAiKvD,MAAM,UAAU,SAAS,CAAC,SAAiB,KAAK;IAC5C,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;AACrE,CAAC"}

package/meta.ts

@@ -212,6 +212,7 @@ function generateComponentMeta({
         phase: (COMPONENT_PHASE_ORDER.includes(componentDoc.phase as ComponentPhase)
             ? componentDoc.phase
             : 'Backlog') as ComponentPhase,
+        generated: 'generated' in componentDoc,
     } as ComponentMeta;
 }