@bspk/ui 1.1.34 → 1.2.0

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

@@ -6,8 +6,6 @@ style.appendChild(document.createTextNode(`[data-bspk=radio-group] {
   flex-direction: column;
   gap: var(--spacing-sizing-01);
   max-width: 100%;
-  overflow: hidden;
 }
 `));
 document.head.appendChild(style);
-

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

@@ -1,15 +1,6 @@
-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;
-};
+import { RadioProps } from '-/components/Radio';
+import { ToggleOptionControlProps } from '-/components/ToggleOption';
+export type RadioOptionProps = ToggleOptionControlProps<RadioProps>;
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
  *
@@ -18,9 +9,5 @@ export type RadioOptionProps = InvalidPropsLibrary & Pick<RadioProps, 'checked'
  * @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 };
+export declare function RadioOption({ label: labelProp, description, disabled, ...radioProps }: RadioOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/RadioOption/RadioOption.js

@@ -9,10 +9,9 @@ import { ToggleOption } from '../ToggleOption';
  * @name RadioOption
  * @phase Utility
  */
-function RadioOption({ label: labelProp, description, ...checkboxProps }) {
+export function RadioOption({ label: labelProp, description, disabled, ...radioProps }) {
     const label = labelProp || description;
-    return (label && (_jsx(ToggleOption, { "data-bspk": "radio-option", description: description, label: label, children: _jsx(Radio, { ...checkboxProps, "aria-label": label }) })));
+    const ariaLabel = description ? `${labelProp} - ${description}` : labelProp;
+    return (label && (_jsx(ToggleOption, { "data-bspk": "radio-option", description: description, disabled: disabled, label: label, children: _jsx(Radio, { ...radioProps, "aria-label": ariaLabel }) })));
 }
-RadioOption.bspkName = 'RadioOption';
-export { RadioOption };
 //# sourceMappingURL=RadioOption.js.map

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

@@ -1 +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"}
+{"version":3,"file":"RadioOption.js","sourceRoot":"","sources":["../../../src/components/RadioOption/RadioOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,YAAY,EAA4B,MAAM,2BAA2B,CAAC;AAInF;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAoB;IACpG,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,iBAAW,cAAc,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAC7F,KAAC,KAAK,OAAK,UAAU,gBAAc,SAAS,GAAI,GACrC,CAClB,CACJ,CAAC;AACN,CAAC"}

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

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

package/dist/components/Rating/Rating.d.ts

@@ -0,0 +1,39 @@
+import './rating.scss';
+export type RatingSize = 'large' | 'medium' | 'small';
+export type RatingProps = {
+    /**
+     * The value of the rating between 0 and 5.
+     *
+     * @minimum 0
+     * @maximum 5
+     */
+    value?: number;
+    /**
+     * If included the component is in interactive mode and this callback is fired when a star is selected.
+     *
+     * @param value - The new value of the rating.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * The size of the rating.
+     *
+     * @default medium
+     */
+    size?: RatingSize;
+};
+/**
+ * Descriptive and interactive controls that allow customers to indicate their feelings about an experience or product
+ * on a scale of 1 to 5. Half sizes are displayed when interactive is false.
+ *
+ * @example
+ *     import { Rating } from '@bspk/ui/Rating';
+ *
+ *     function Example() {
+ *         return <Rating value={4.5} />;
+ *     }
+ *
+ * @name Rating
+ * @phase UXReview
+ */
+export declare function Rating({ size, value, onChange }: RatingProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Rating/Rating.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgStarFill } from '@bspk/icons/StarFill';
+import './rating.css.js';
+const MAX_STARS = 5;
+const iconWidths = {
+    large: 32,
+    medium: 24,
+    small: 16,
+};
+/**
+ * Descriptive and interactive controls that allow customers to indicate their feelings about an experience or product
+ * on a scale of 1 to 5. Half sizes are displayed when interactive is false.
+ *
+ * @example
+ *     import { Rating } from '@bspk/ui/Rating';
+ *
+ *     function Example() {
+ *         return <Rating value={4.5} />;
+ *     }
+ *
+ * @name Rating
+ * @phase UXReview
+ */
+export function Rating({ size = 'medium', value, onChange }) {
+    const As = onChange ? 'button' : 'div';
+    return (_jsx("div", { "aria-label": onChange ? 'Select a star rating' : `${value} out of ${MAX_STARS} stars`, "data-bspk": "rating", "data-size": size, role: onChange ? 'radiogroup' : 'img', children: Array.from({ length: MAX_STARS }, (_, index) => {
+            const fill = getFill(index + 1, value);
+            const selected = value !== undefined && Math.floor(value) === index;
+            return (_jsxs(As, { "aria-checked": selected, "aria-hidden": !onChange, "aria-label": onChange ? `Rate ${index + 1}` : undefined, "data-fill": fill, "data-star": true, onClick: () => onChange?.(index + 1), role: onChange ? 'radio' : 'presentation', tabIndex: onChange ? (selected ? 0 : -1) : -1, type: "button", children: [_jsx(SvgStarFill, { width: iconWidths[size] }), fill === 'half' && (_jsx("div", { "data-fill-half": true, children: _jsx("div", { "data-star": true, children: _jsx(SvgStarFill, { width: iconWidths[size] }) }) }))] }, index));
+        }) }));
+}
+function getFill(num, value) {
+    if (value === undefined)
+        return undefined;
+    if (value >= num)
+        return 'full';
+    if (value == num - 0.5)
+        return 'half';
+    return undefined;
+}
+//# sourceMappingURL=Rating.js.map

package/dist/components/Rating/Rating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.js","sourceRoot":"","sources":["../../../src/components/Rating/Rating.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,OAAO,eAAe,CAAC;AAEvB,MAAM,SAAS,GAAG,CAAC,CAAC;AAIpB,MAAM,UAAU,GAA+B;IAC3C,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;CACZ,CAAC;AAwBF;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,MAAM,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAe;IACpE,MAAM,EAAE,GAAgB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAEpD,OAAO,CACH,4BACgB,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,GAAG,KAAK,WAAW,SAAS,QAAQ,eAC1E,QAAQ,eACP,IAAI,EACf,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,YAEpC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;YAC5C,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;YACvC,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC;YACpE,OAAO,CACH,MAAC,EAAE,oBACe,QAAQ,iBACT,CAAC,QAAQ,gBACV,QAAQ,CAAC,CAAC,CAAC,QAAQ,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,eAC3C,IAAI,qBAGf,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,EACpC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,EACzC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC7C,IAAI,EAAC,QAAQ,aAEb,KAAC,WAAW,IAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,GAAI,EACvC,IAAI,KAAK,MAAM,IAAI,CAChB,gDACI,2CACI,KAAC,WAAW,IAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,GAAI,GACtC,GACJ,CACT,KAbI,KAAK,CAcT,CACR,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,SAAS,OAAO,CAAC,GAAW,EAAE,KAAc;IACxC,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IAC1C,IAAI,KAAK,IAAI,GAAG;QAAE,OAAO,MAAM,CAAC;IAChC,IAAI,KAAK,IAAI,GAAG,GAAG,GAAG;QAAE,OAAO,MAAM,CAAC;IACtC,OAAO,SAAS,CAAC;AACrB,CAAC"}

package/dist/components/Rating/RatingExample.d.ts

@@ -0,0 +1,3 @@
+import { RatingProps } from './Rating';
+import { ComponentExampleFn } from '-/utils/demo';
+export declare const RatingExample: ComponentExampleFn<RatingProps>;

package/dist/components/Rating/RatingExample.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const RatingExample = () => {
+    return {
+        render: ({ props, Component }) => {
+            return _jsx(Component, { ...props });
+        },
+        presets: [
+            {
+                label: 'Non interactive',
+                propState: {
+                    onChange: undefined,
+                },
+            },
+        ],
+    };
+};
+//# sourceMappingURL=RatingExample.js.map

package/dist/components/Rating/RatingExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingExample.js","sourceRoot":"","sources":["../../../src/components/Rating/RatingExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,aAAa,GAAoC,GAAG,EAAE;IAC/D,OAAO;QACH,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;YAC7B,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;QACpC,CAAC;QACD,OAAO,EAAE;YACL;gBACI,KAAK,EAAE,iBAAiB;gBACxB,SAAS,EAAE;oBACP,QAAQ,EAAE,SAAS;iBACtB;aACJ;SACJ;KACJ,CAAC;AACN,CAAC,CAAC"}

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

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

package/dist/components/Rating/index.js

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

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

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

package/dist/components/Rating/rating.css

@@ -0,0 +1,65 @@
+[data-bspk=rating] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
+}
+[data-bspk=rating][data-size=small] [data-star] {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=rating][data-size=small] svg {
+  width: var(--spacing-sizing-04);
+  height: var(--spacing-sizing-04);
+}
+[data-bspk=rating][data-size=medium] [data-star] {
+  width: var(--spacing-sizing-08);
+  height: var(--spacing-sizing-08);
+}
+[data-bspk=rating][data-size=medium] svg {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=rating][data-size=large] [data-star] {
+  width: var(--spacing-sizing-10);
+  height: var(--spacing-sizing-10);
+}
+[data-bspk=rating][data-size=large] svg {
+  width: var(--spacing-sizing-08);
+  height: var(--spacing-sizing-08);
+}
+[data-bspk=rating] [data-star] {
+  outline: none;
+  cursor: default;
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  color: var(--surface-neutral-t3-low);
+}
+[data-bspk=rating] [data-star]:is(button) {
+  cursor: pointer;
+}
+[data-bspk=rating] [data-star]:is(button):hover {
+  transform: scale(1.2);
+}
+[data-bspk=rating] [data-star]:is(button):focus-visible {
+  outline: 1px solid var(--stroke-neutral-focus);
+  border-color: var(--stroke-neutral-focus);
+  margin-bottom: 1px;
+}
+[data-bspk=rating] [data-star][data-fill=full] {
+  color: var(--status-warning);
+}
+[data-bspk=rating] [data-star] [data-fill-half] {
+  position: absolute;
+  inset: 0 50% 0 0;
+  overflow: hidden;
+}
+[data-bspk=rating] [data-star] [data-fill-half] [data-star] {
+  color: var(--status-warning);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Rating/rating.css.js

@@ -0,0 +1,70 @@
+/** * 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=rating] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
+}
+[data-bspk=rating][data-size=small] [data-star] {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=rating][data-size=small] svg {
+  width: var(--spacing-sizing-04);
+  height: var(--spacing-sizing-04);
+}
+[data-bspk=rating][data-size=medium] [data-star] {
+  width: var(--spacing-sizing-08);
+  height: var(--spacing-sizing-08);
+}
+[data-bspk=rating][data-size=medium] svg {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=rating][data-size=large] [data-star] {
+  width: var(--spacing-sizing-10);
+  height: var(--spacing-sizing-10);
+}
+[data-bspk=rating][data-size=large] svg {
+  width: var(--spacing-sizing-08);
+  height: var(--spacing-sizing-08);
+}
+[data-bspk=rating] [data-star] {
+  outline: none;
+  cursor: default;
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  color: var(--surface-neutral-t3-low);
+}
+[data-bspk=rating] [data-star]:is(button) {
+  cursor: pointer;
+}
+[data-bspk=rating] [data-star]:is(button):hover {
+  transform: scale(1.2);
+}
+[data-bspk=rating] [data-star]:is(button):focus-visible {
+  outline: 1px solid var(--stroke-neutral-focus);
+  border-color: var(--stroke-neutral-focus);
+  margin-bottom: 1px;
+}
+[data-bspk=rating] [data-star][data-fill=full] {
+  color: var(--status-warning);
+}
+[data-bspk=rating] [data-star] [data-fill-half] {
+  position: absolute;
+  inset: 0 50% 0 0;
+  overflow: hidden;
+}
+[data-bspk=rating] [data-star] [data-fill-half] [data-star] {
+  color: var(--status-warning);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

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

@@ -1,20 +1,12 @@
-import { CommonProps } from '../../index.js';
+import { CommonProps } from '-/types/common';
 import './scrim.scss';
-export type ScrimProps = CommonProps<'data-bspk-owner'> & {
+export type ScrimProps = CommonProps<'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.
      *
@@ -32,9 +24,5 @@ export type ScrimProps = CommonProps<'data-bspk-owner'> & {
  *
  * @phase Utility
  */
-declare function Scrim({ visible, variant, ...props }: ScrimProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Scrim {
-    var bspkName: string;
-}
-export { Scrim };
+export declare function Scrim({ visible, ...props }: ScrimProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Scrim/Scrim.js

@@ -8,9 +8,7 @@ import './scrim.css.js';
  *
  * @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 }));
+export function Scrim({ visible = true, ...props }) {
+    return _jsx("div", { ...props, "aria-hidden": "true", "data-bspk": "scrim", "data-hidden": !visible || undefined });
 }
-Scrim.bspkName = 'Scrim';
-export { Scrim };
 //# sourceMappingURL=Scrim.js.map

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

@@ -1 +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"}
+{"version":3,"file":"Scrim.js","sourceRoot":"","sources":["../../../src/components/Scrim/Scrim.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAmBtB;;;;;;;GAOG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,KAAK,EAAc;IAC1D,OAAO,iBAAS,KAAK,iBAAc,MAAM,eAAW,OAAO,iBAAc,CAAC,OAAO,IAAI,SAAS,GAAI,CAAC;AACvG,CAAC"}

package/dist/components/Scrim/scrim.css

@@ -8,12 +8,22 @@
   display: flex;
   align-items: center;
   justify-content: center;
-}
-[data-bspk=scrim][data-variant=dialog] {
   background-color: var(--background-scrim);
+  animation-name: fade-in;
+  animation-duration: 1s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
 }
 [data-bspk=scrim][data-hidden] {
   display: none;
 }
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -11,15 +11,24 @@ style.appendChild(document.createTextNode(`[data-bspk=scrim] {
   display: flex;
   align-items: center;
   justify-content: center;
-}
-[data-bspk=scrim][data-variant=dialog] {
   background-color: var(--background-scrim);
+  animation-name: fade-in;
+  animation-duration: 1s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
 }
 [data-bspk=scrim][data-hidden] {
   display: none;
 }
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/SearchBar/SearchBar.d.ts

@@ -1,7 +1,7 @@
-import { ListboxProps, ListboxItemProps } from '../Listbox';
-import { TextInputProps } from '../TextInput';
+import { ListboxProps, ListboxItemProps } from '-/components/Listbox';
+import { TextInputProps } from '-/components/TextInput';
 import './search-bar.scss';
-export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick<ListboxProps<T>, 'itemDisplayCount'> & Pick<TextInputProps, 'aria-label' | 'disabled' | 'id' | 'inputRef' | 'name' | 'size'> & {
+export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick<ListboxProps<T>, 'itemCount' | 'itemDisplayCount'> & Pick<TextInputProps, 'aria-label' | 'disabled' | 'id' | 'inputRef' | 'name' | 'size'> & {
     /** The current value of the search bar. */
     value?: string;
     /**
@@ -84,11 +84,7 @@ export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick
  *     }
  *
  * @name SearchBar
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function SearchBar({ itemDisplayCount: itemCount, items, noResultsMessage, placeholder, 'aria-label': ariaLabel, id: idProp, inputRef, name, size, onSelect, value, onChange, disabled, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
-declare namespace SearchBar {
-    var bspkName: string;
-}
-export { SearchBar };
+export declare function SearchBar({ items, noResultsMessage, placeholder, 'aria-label': ariaLabel, id: idProp, inputRef, itemCount, itemDisplayCount, name, size, onSelect, value, onChange, disabled, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/SearchBar/SearchBar.js

@@ -44,11 +44,11 @@ import './search-bar.css.js';
  *     }
  *
  * @name SearchBar
- * @phase DesignReview
+ * @phase UXReview
  */
-function SearchBar({ itemDisplayCount: itemCount, items, noResultsMessage, placeholder = 'Search', 'aria-label': ariaLabel, id: idProp, inputRef, name, size = 'medium', onSelect, value, onChange, disabled = false, }) {
+export function SearchBar({ items, noResultsMessage, placeholder = 'Search', 'aria-label': ariaLabel, id: idProp, inputRef, itemCount, itemDisplayCount, name, size = 'medium', onSelect, value, onChange, disabled = false, }) {
     const id = useId(idProp);
-    const { isOpen, toggleProps: { onClick, onKeyDownCapture, ...triggerProps }, menuProps, closeMenu, elements, } = useCombobox({
+    const { isOpen, toggleProps: { onClick, onKeyDownCapture, ...triggerProps }, menuProps, closeMenu, openMenu, elements, } = useCombobox({
         placement: 'bottom-start',
     });
     const inputRefLocal = useRef(null);
@@ -61,10 +61,11 @@ function SearchBar({ itemDisplayCount: itemCount, items, noResultsMessage, place
                     }, disabled: disabled, id: id, inputRef: (node) => {
                         inputRef?.(node || null);
                         inputRefLocal.current = node;
-                    }, leading: _jsx(SvgSearch, {}), name: name, onChange: (str) => onChange(str), onClick: () => {
-                        if (items?.length)
-                            onClick();
-                    }, ...triggerProps, onKeyDownCapture: (event) => {
+                    }, leading: _jsx(SvgSearch, {}), name: name, onChange: (str) => {
+                        onChange(str);
+                        if (str.length)
+                            openMenu();
+                    }, onClick: onClick, owner: "search-bar", ...triggerProps, onKeyDownCapture: (event) => {
                         const handled = onKeyDownCapture(event);
                         if (handled) {
                             inputRefLocal.current?.blur();
@@ -72,14 +73,12 @@ function SearchBar({ itemDisplayCount: itemCount, items, noResultsMessage, place
                             return;
                         }
                         // inputRefLocal.current?.focus();
-                    }, placeholder: placeholder, size: size, value: value }) }), isOpen && (_jsx(Listbox, { innerRef: elements.setFloating, itemDisplayCount: itemCount, items: items, onChange: (selectedValues, event) => {
+                    }, placeholder: placeholder, size: size, value: value }) }), isOpen && (_jsx(Listbox, { ...menuProps, innerRef: elements.setFloating, itemCount: itemCount, itemDisplayCount: itemDisplayCount, items: items, onChange: (selectedValues, event) => {
                     event?.preventDefault();
                     const item = items?.find((i) => i.value === selectedValues[0]);
                     onSelect?.(item);
                     onChange(item?.label || '');
                     closeMenu();
-                }, ...menuProps, children: !!value?.length && !items?.length && (_jsxs("div", { "data-bspk": "no-items-found", children: [_jsx(Txt, { as: "div", variant: "heading-h5", children: "No results found" }), noResultsMessage && (_jsx(Txt, { as: "div", variant: "body-base", children: noResultsMessage }))] })) }))] }));
+                }, children: !!value?.length && !items?.length && (_jsxs("div", { "data-bspk": "no-items-found", children: [_jsx(Txt, { as: "div", variant: "heading-h5", children: "No results found" }), noResultsMessage && (_jsx(Txt, { as: "div", variant: "body-base", children: noResultsMessage }))] })) }))] }));
 }
-SearchBar.bspkName = 'SearchBar';
-export { SearchBar };
 //# sourceMappingURL=SearchBar.js.map

package/dist/components/SearchBar/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../src/components/SearchBar/SearchBar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../src/components/SearchBar/SearchBar.tsx"],"names":[],"mappings":"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"}

package/dist/components/SearchBar/SearchBarExample.d.ts

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

package/dist/components/SearchBar/SearchBarExample.js

@@ -5,7 +5,7 @@ export const SearchBarExample = {
         const searchValue = props.value?.trim()?.toLowerCase() || '';
         if (Array.isArray(props.items) && searchValue.length)
             props.items = props.items?.filter((item) => item.label.toLowerCase().includes(searchValue));
-        return _jsx(Component, { ...props, items: props.items || [] });
+        return (_jsx(Component, { ...props, itemCount: props.items?.length || undefined, itemDisplayCount: props.items && props.items.length <= 7 ? props.items.length : 7, items: props.items || [] }));
     },
 };
 //# sourceMappingURL=SearchBarExample.js.map

package/dist/components/SearchBar/SearchBarExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBarExample.js","sourceRoot":"","sources":["../../../src/components/SearchBar/SearchBarExample.tsx"],"names":[],"mappings":";AAKA,MAAM,CAAC,MAAM,gBAAgB,GAAqB;IAC9C,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QACpC,MAAM,KAAK,GAAG,EAAE,GAAG,KAAK,EAAoB,CAAC;QAE7C,MAAM,WAAW,GAAI,KAAK,CAAC,KAA4B,EAAE,IAAI,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QAErF,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,WAAW,CAAC,MAAM;YAChD,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,IAAuB,EAAE,EAAE,CAC1D,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CACjD,CAAC;QAEN,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,GAAI,CAAC;IAC9D,CAAC;CACJ,CAAC"}
+{"version":3,"file":"SearchBarExample.js","sourceRoot":"","sources":["../../../src/components/SearchBar/SearchBarExample.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,MAAM,gBAAgB,GAAqB;IAC9C,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QACpC,MAAM,KAAK,GAAG,EAAE,GAAG,KAAK,EAAoB,CAAC;QAE7C,MAAM,WAAW,GAAI,KAAK,CAAC,KAA4B,EAAE,IAAI,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QAErF,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,WAAW,CAAC,MAAM;YAChD,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,IAAuB,EAAE,EAAE,CAC1D,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CACjD,CAAC;QAEN,OAAO,CACH,KAAC,SAAS,OACF,KAAK,EACT,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,IAAI,SAAS,EAC3C,gBAAgB,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EACjF,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,GAC1B,CACL,CAAC;IACN,CAAC;CACJ,CAAC"}

package/dist/components/SearchBar/search-bar.css

@@ -1,7 +1,7 @@
 [data-bspk=search-bar] {
   display: flex;
   width: 100%;
-  min-width: 300px;
+  min-width: 100px;
 }
 
 [data-bspk=no-items-found] {

package/dist/components/SearchBar/search-bar.css.js

@@ -4,7 +4,7 @@ const style = document.createElement('style');
 style.appendChild(document.createTextNode(`[data-bspk=search-bar] {
   display: flex;
   width: 100%;
-  min-width: 300px;
+  min-width: 100px;
 }
 
 [data-bspk=no-items-found] {
@@ -19,4 +19,3 @@ style.appendChild(document.createTextNode(`[data-bspk=search-bar] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-