@vkzstudio/muza-ui 1.2.0 → 1.3.0

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

@@ -0,0 +1,62 @@
+import * as React from 'react';
+/**
+ * Props for the Rating component.
+ */
+export interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Controlled rating value. Use with `onValueChange`.
+     *
+     * Fractional values are rounded for display:
+     * - Without `allowHalf` (default): standard half-up rounding — `< n - 0.5` is empty, `>= n - 0.5` is full.
+     * - With `allowHalf`: `< n - 0.75` is empty, `[n - 0.75, n - 0.25)` is half, `>= n - 0.25` is full.
+     *
+     * If you need a different rounding policy (e.g. always floor, always ceil, banker's rounding), pre-process the value yourself before passing it in.
+     */
+    value?: number;
+    /** Initial rating value for uncontrolled usage. Follows the same rounding rules as `value`. @default 0 */
+    defaultValue?: number;
+    /** Fires when a star is selected via click or keyboard. Receives the new integer rating. Provide this to make the rating interactive. */
+    onValueChange?: (value: number) => void;
+    /** Total number of stars displayed. @default 5 */
+    count?: number;
+    /** When true, fractional `value` renders a half star at the `[n - 0.75, n - 0.25)` boundary (see `value` for the full rule). Does not affect click behavior — clicks always select whole stars. @default false */
+    allowHalf?: boolean;
+    /** Prevents interaction and applies disabled styling. @default false */
+    disabled?: boolean;
+    /** Accessible label for the rating group. Defaults to `translations.rating.groupLabel`. */
+    'aria-label'?: string;
+    /**
+     * Template for each star's aria-label. Use `{count}` as the placeholder for
+     * the star number (e.g. `'{count} stars'`). When omitted, the localized
+     * plural form from translations is used (`translations.rating.starLabel`).
+     */
+    starAriaLabel?: string;
+}
+/**
+ * A star-based rating component for displaying or capturing a numeric score.
+ *
+ * Renders a configurable number of stars filled according to a numeric value,
+ * with optional half-star rendering for fractional values. Has a dual role:
+ *
+ * - **Display mode** (no `onValueChange`): renders as `role="img"` with an
+ *   aria-label describing the rating.
+ * - **Interactive mode** (with `onValueChange`): renders as `role="radiogroup"`
+ *   with per-star `role="radio"` buttons, full keyboard support
+ *   (Arrow keys, Home, End), and roving tabindex.
+ *
+ * Star aria-labels are pluralized via `useMuzaTranslationContext` and can be
+ * overridden with `starAriaLabel` / `aria-label`.
+ *
+ * @component
+ * @example
+ * // Read-only display
+ * <Rating value={4.5} allowHalf />
+ *
+ * @example
+ * // Interactive (controlled)
+ * const [value, setValue] = useState(0)
+ * <Rating value={value} onValueChange={setValue} />
+ */
+declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
+export { Rating };
+//# sourceMappingURL=Rating.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/Rating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAyB9B;;GAEG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0GAA0G;IAC1G,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yIAAyI;IACzI,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kNAAkN;IAClN,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2FAA2F;IAC3F,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,MAAM,oFAoIX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/Rating/Rating.js

@@ -0,0 +1,88 @@
+import { jsx as f } from "react/jsx-runtime";
+import * as a from "react";
+import { useMuzaTranslationContext as _ } from "../../translations/TranslationContext.js";
+import { HalfStar as z } from "../Icons/CustomIcons.js";
+import { resolvePluralTemplate as C } from "../../translations/resolvePluralTemplate.js";
+import { cn as y } from "../../utils/cn.js";
+import { StarBold as F } from "@solar-icons/react-perf";
+const T = (l, m, p) => Array.from({ length: m }, (s, n) => {
+  const c = n + 1;
+  return p ? l >= c - 0.25 ? "full" : l >= c - 0.75 ? "half" : "empty" : l >= c - 0.5 ? "full" : "empty";
+}), j = a.forwardRef(
+  ({
+    className: l,
+    value: m,
+    defaultValue: p = 0,
+    onValueChange: s,
+    count: n = 5,
+    allowHalf: c = !1,
+    disabled: d = !1,
+    "aria-label": k,
+    starAriaLabel: I,
+    ...R
+  }, A) => {
+    const { locale: D, translations: M } = _(), L = k ?? M.rating.groupLabel, [N, E] = a.useState(p), [S, u] = a.useState(null), b = m !== void 0, r = b ? m : N, i = !!s && !d, [B, g] = a.useState(
+      () => Math.max(0, Math.ceil(r) - 1)
+    );
+    a.useEffect(() => {
+      g(Math.max(0, Math.ceil(r) - 1));
+    }, [r]);
+    const h = a.useRef([]);
+    h.current.length = n;
+    const x = T(r, n, c), H = d ? x.map(() => "empty") : i && S !== null ? x.map((e, t) => t <= S ? "full" : "empty") : x, w = (e) => {
+      b || E(e), s == null || s(e);
+    };
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        ref: A,
+        role: i ? "radiogroup" : "img",
+        "aria-label": L,
+        onKeyDown: i ? (e) => {
+          var o;
+          if (!i) return;
+          let t = null;
+          e.key === "ArrowRight" || e.key === "ArrowUp" ? t = Math.min(n, Math.ceil(r) + 1) : e.key === "ArrowLeft" || e.key === "ArrowDown" ? t = Math.max(1, Math.ceil(r) - 1) : e.key === "Home" ? t = 1 : e.key === "End" && (t = n), t !== null && (e.preventDefault(), w(t), g(t - 1), (o = h.current[t - 1]) == null || o.focus());
+        } : void 0,
+        className: y(
+          "inline-flex items-center [&_svg]:size-icon-xsmall",
+          l
+        ),
+        ...R,
+        children: H.map((e, t) => {
+          const o = t + 1, v = /* @__PURE__ */ f(e === "half" ? z : F, { className: y(e === "empty" ? "text-comp-rating-star-empty" : "text-comp-rating-star-default", "transition-colors") });
+          return i ? /* @__PURE__ */ f(
+            "button",
+            {
+              ref: (K) => {
+                h.current[t] = K;
+              },
+              type: "button",
+              role: "radio",
+              "aria-checked": Math.ceil(r) === o,
+              "aria-label": (I ?? C(
+                o,
+                D,
+                M.rating.starLabel
+              )).replace("{count}", String(o)),
+              disabled: d,
+              tabIndex: t === B ? 0 : -1,
+              onClick: () => w(o),
+              onMouseEnter: () => u(t),
+              onMouseLeave: () => u(null),
+              onFocus: () => u(t),
+              onBlur: () => u(null),
+              className: "cursor-pointer rounded-2xs px-3xs focus-visible-default disabled:cursor-not-allowed",
+              children: v
+            },
+            t
+          ) : /* @__PURE__ */ f("span", { className: y(t > 0 && "ml-2xs"), children: v }, t);
+        })
+      }
+    );
+  }
+);
+j.displayName = "Rating";
+export {
+  j as Rating
+};

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

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Rating } from './Rating';
+declare const meta: Meta<typeof Rating>;
+export default meta;
+type Story = StoryObj<typeof Rating>;
+export declare const Default: Story;
+export declare const AllStates: Story;
+export declare const Interactive: Story;
+export declare const Uncontrolled: Story;
+export declare const CustomCount: Story;
+export declare const Rounding: Story;
+//# sourceMappingURL=Rating.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/Rating.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAuD7B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AAEpC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAsCvB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KA4BzB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAczB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA0CtB,CAAA"}

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

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

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

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

package/dist/components/RatingBlock/RatingBlock.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+/**
+ * Props for the RatingBlock component.
+ */
+export interface RatingBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Average rating value (e.g. 4.9). Forwarded to the underlying `Rating`. */
+    value: number;
+    /**
+     * Number of reviews used for the caption text. Distinct from `Rating`'s
+     * `count` prop (which controls the number of stars). Negative values clamp
+     * to 0; non-integers are floored for display and plural selection.
+     *
+     * When `0`, the block renders the empty state: muted "0,0", all-empty stars,
+     * and the empty caption (`emptyText` or `t.ratingBlock.empty`).
+     */
+    reviewsCount: number;
+    /** Number of stars rendered by the underlying `Rating`. @default 5 */
+    starCount?: number;
+    /** Forwarded to `Rating` — render a half star for fractional values. @default false */
+    allowHalf?: boolean;
+    /**
+     * Custom formatter for the big numeric value. Takes precedence over
+     * `numberFormatOptions`. Defaults to
+     * `Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 })`.
+     */
+    formatValue?: (value: number) => string;
+    /**
+     * Merged onto the default options `{ minimumFractionDigits: 1, maximumFractionDigits: 1 }`
+     * when constructing the locale number formatter. Ignored if `formatValue` is provided.
+     */
+    numberFormatOptions?: Intl.NumberFormatOptions;
+    /**
+     * Full override for the populated-state caption. Use `{count}` placeholder
+     * for the locale-formatted review count. When provided, bypasses pluralization.
+     */
+    countText?: string;
+    /**
+     * Full override for the empty-state caption. Use to add a contextual subject
+     * back in (e.g. `"Zatím nikdo nehodnotil partnera"`).
+     */
+    emptyText?: string;
+}
+/**
+ * Composes a rating-summary card pairing a big numeric value, the `Rating`
+ * stars, and a localized review-count caption inside a `Card variant="market"`
+ * surface.
+ *
+ * Drives the visual "empty" state (muted number, all-empty stars, empty
+ * caption) solely from `reviewsCount === 0` — a populated card with
+ * `value === 0` still renders the normal dark number and pluralized caption.
+ *
+ * Formats numbers and pluralizes captions via `Intl.NumberFormat` and
+ * `Intl.PluralRules` against the current `TranslationProvider` locale, so the
+ * caption agrees grammatically in Slavic locales (cs/sk) out of the box.
+ *
+ * @example
+ * <RatingBlock value={4.9} reviewsCount={11} allowHalf />
+ *
+ * @example
+ * // Add contextual subject back into the empty text
+ * <RatingBlock value={0} reviewsCount={0} emptyText="Zatím nikdo nehodnotil partnera" />
+ */
+declare const RatingBlock: React.ForwardRefExoticComponent<RatingBlockProps & React.RefAttributes<HTMLDivElement>>;
+export { RatingBlock };
+//# sourceMappingURL=RatingBlock.d.ts.map

package/dist/components/RatingBlock/RatingBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingBlock.d.ts","sourceRoot":"","sources":["../../../src/components/RatingBlock/RatingBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;OAOG;IACH,YAAY,EAAE,MAAM,CAAA;IACpB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uFAAuF;IACvF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAA;IAC9C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,WAAW,yFAwFhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/RatingBlock/RatingBlock.js

@@ -0,0 +1,92 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import * as n from "react";
+import { useMuzaTranslationContext as b } from "../../translations/TranslationContext.js";
+import { resolvePluralTemplate as M } from "../../translations/resolvePluralTemplate.js";
+import { Card as B } from "../Card/Card.js";
+import { cn as p } from "../../utils/cn.js";
+import { Typography as u } from "../Typography/Typography.js";
+import { Flex as C } from "../Flex/Flex.js";
+import { Rating as z } from "../Rating/Rating.js";
+const T = n.forwardRef(
+  ({
+    value: i,
+    reviewsCount: d,
+    starCount: f = 5,
+    allowHalf: x = !1,
+    formatValue: e,
+    numberFormatOptions: m,
+    countText: g,
+    emptyText: h,
+    className: k,
+    ...y
+  }, v) => {
+    const { locale: t, translations: s } = b(), r = Math.max(0, Math.floor(d)), a = r === 0, l = n.useMemo(() => {
+      if (e) return e;
+      const N = new Intl.NumberFormat(t, {
+        minimumFractionDigits: 1,
+        maximumFractionDigits: 1,
+        ...m
+      });
+      return (R) => N.format(R);
+    }, [e, t, m])(a ? 0 : i), w = n.useMemo(
+      () => new Intl.NumberFormat(t).format(r),
+      [t, r]
+    ), F = a ? h ?? s.ratingBlock.empty : (g ?? M(
+      r,
+      t,
+      s.ratingBlock.users
+    )).replace("{count}", w);
+    return /* @__PURE__ */ c(
+      B,
+      {
+        ref: v,
+        variant: "market",
+        direction: "row",
+        align: "center",
+        gap: "xl",
+        className: p("w-full", k),
+        ...y,
+        children: [
+          /* @__PURE__ */ o(
+            u,
+            {
+              component: "span",
+              variant: "title",
+              size: "3xl",
+              weight: "medium",
+              className: p("text-text-dark-primary-def", {
+                "text-text-dark-disabled": a
+              }),
+              children: l
+            }
+          ),
+          /* @__PURE__ */ c(C, { direction: "column", align: "start", gap: "2xs", children: [
+            /* @__PURE__ */ o(
+              z,
+              {
+                value: a ? 0 : i,
+                count: f,
+                allowHalf: x,
+                "aria-label": l
+              }
+            ),
+            /* @__PURE__ */ o(
+              u,
+              {
+                component: "span",
+                variant: "body",
+                size: "sm",
+                className: "text-text-dark-secondary",
+                children: F
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+T.displayName = "RatingBlock";
+export {
+  T as RatingBlock
+};

package/dist/components/RatingBlock/RatingBlock.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { RatingBlock } from './RatingBlock';
+declare const meta: Meta<typeof RatingBlock>;
+export default meta;
+type Story = StoryObj<typeof RatingBlock>;
+export declare const Default: Story;
+export declare const Empty: Story;
+export declare const CustomCount: Story;
+export declare const DifferentLocales: Story;
+export declare const ConsumerOverride: Story;
+export declare const PopulatedZero: Story;
+//# sourceMappingURL=RatingBlock.stories.d.ts.map

package/dist/components/RatingBlock/RatingBlock.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingBlock.stories.d.ts","sourceRoot":"","sources":["../../../src/components/RatingBlock/RatingBlock.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CA4ClC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAWzC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAcnB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAgBzB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA2C9B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA8B9B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAc3B,CAAA"}

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

@@ -0,0 +1,2 @@
+export * from './RatingBlock';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/RatingBlock/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RatingBlock/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.js

@@ -1,9 +1,9 @@
 import { jsx as r, jsxs as T } from "react/jsx-runtime";
 import "react";
 import { useBreakpoints as E } from "../../hooks/use-is-breakpoint.js";
-import { Skeleton as H } from "../Skeleton/Skeleton.js";
 import { cn as l } from "../../utils/cn.js";
-import { typographyVariants as S, Typography as V } from "../Typography/Typography.js";
+import { typographyVariants as H, Typography as S } from "../Typography/Typography.js";
+import { Skeleton as V } from "../Skeleton/Skeleton.js";
 const J = ({
   data: y,
   layouts: n,
@@ -50,7 +50,7 @@ const J = ({
               "th",
               {
                 className: l(
-                  S({
+                  H({
                     size: "sm",
                     uppercase: !0,
                     variant: "body",
@@ -100,8 +100,8 @@ const J = ({
                         i && "relative",
                         t.className
                       ),
-                      children: a ? t.skeleton ?? /* @__PURE__ */ r(H, { color: "light", className: "h-4 w-full" }) : t.render ? t.render(e, s, o) : /* @__PURE__ */ r(
-                        V,
+                      children: a ? t.skeleton ?? /* @__PURE__ */ r(V, { color: "light", className: "h-4 w-full" }) : t.render ? t.render(e, s, o) : /* @__PURE__ */ r(
+                        S,
                         {
                           variant: "body",
                           size: "base",

package/dist/components/SearchFilters/SearchFilters.d.ts

@@ -0,0 +1,88 @@
+import { ButtonProps } from '../Button';
+import { CarouselOptions } from '../Carousel';
+import { SearchbarProps } from '../Searchbar';
+import { SkeletonProps } from '../Skeleton';
+import * as React from 'react';
+/**
+ * Props for the SearchFilters component.
+ *
+ * A filter bar typically used at the top of a map / search results screen — a
+ * location searchbar on the left, an optional back button, and a horizontally
+ * scrollable list of filter chips (wrapped in a Carousel) on the right.
+ *
+ * Bring your own filter children — any combination of `Button`, `Toggle`,
+ * `Chip`, etc. works. Each child is rendered as a `CarouselItem` with
+ * natural width.
+ */
+export interface SearchFiltersProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * Props forwarded to the internal `Searchbar` (e.g. `placeholder`,
+     * `defaultValue`, `onChange`, `onSubmit`). When omitted, the searchbar
+     * row is not rendered.
+     */
+    searchbarProps?: SearchbarProps;
+    /**
+     * Renders a leading back `Button` before the searchbar (for navigating to
+     * the previous screen). Pass the `Button` props to wire it up — at minimum
+     * an `onClick` and an `aria-label`. Defaults to `variant="tertiary"`,
+     * `size="icon"` and a left-arrow `icon`; any of these can be overridden.
+     * Omit entirely to hide the back slot. Hidden by default on desktop — pass
+     * `backVisibleOnDesktop` to override.
+     *
+     * @example
+     * <SearchFilters back={{ onClick: goBack, 'aria-label': 'Back' }} />
+     */
+    back?: ButtonProps;
+    /**
+     * When true, keeps the `back` slot visible at `md` and above. Otherwise it
+     * is hidden from `md` up (matches the Figma spec where the back button only
+     * appears on tablet / mobile).
+     *
+     * @default false
+     */
+    backVisibleOnDesktop?: boolean;
+    /**
+     * Filter elements rendered inside the embedded carousel. Each child is
+     * placed in a `CarouselItem` with `basis-auto` so it keeps its natural
+     * width.
+     */
+    children?: React.ReactNode;
+    /**
+     * Embla options forwarded to the internal `Carousel`'s `options` prop. The
+     * carousel is rendered with `align="start"` and the Carousel's own
+     * `skipSnaps: true`, so a longer drag crosses several chips before snapping;
+     * anything set here is merged over those and wins (e.g. pass `align` to
+     * change the alignment). Note that `dragFree` is intentionally not enabled —
+     * without it the carousel snaps the dragged track to the nearest item and
+     * the scroll-prev / scroll-next boundary detection stays consistent.
+     */
+    carouselOpts?: CarouselOptions;
+    /**
+     * Toggles the scroll-prev / scroll-next arrow buttons overlaid on the
+     * filter list edges. Arrows are always hidden below `md` (where the
+     * filter strip stacks below the searchbar); on `md+` each button is also
+     * unmounted automatically once the carousel hits that boundary (see
+     * {@link CarouselNavButtonProps.hideWhenDisabled}).
+     *
+     * @default true
+     */
+    showArrows?: boolean;
+}
+declare const SearchFilters: React.ForwardRefExoticComponent<SearchFiltersProps & React.RefAttributes<HTMLDivElement>>;
+/** Props for the {@link SearchFiltersSkeleton} component. */
+export type SearchFiltersSkeletonProps = {
+    /** Number of filter-chip placeholders rendered after the searchbar. @default 4 */
+    chips?: number;
+} & SkeletonProps;
+/**
+ * Loading placeholder matching the `SearchFilters` bar — a searchbar block,
+ * a desktop-only vertical divider, then a row of pill-shaped filter-chip
+ * blocks. Stacks on mobile and lays out inline from `md` up, mirroring the
+ * real component.
+ */
+declare const SearchFiltersSkeleton: {
+    ({ className, color, chips, ...props }: SearchFiltersSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SearchFilters, SearchFiltersSkeleton };
+//# sourceMappingURL=SearchFilters.d.ts.map

package/dist/components/SearchFilters/SearchFilters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchFilters.d.ts","sourceRoot":"","sources":["../../../src/components/SearchFilters/SearchFilters.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AACpD,OAAO,EAKL,KAAK,eAAe,EAErB,MAAM,aAAa,CAAA;AAGpB,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7D,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAE1D;;;;;;;;;;GAUG;AACH,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D;;;;OAIG;IACH,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB;;;;;;OAMG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,eAAe,CAAA;IAC9B;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,QAAA,MAAM,aAAa,2FA2HlB,CAAA;AAGD,6DAA6D;AAC7D,MAAM,MAAM,0BAA0B,GAAG;IACvC,kFAAkF;IAClF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,aAAa,CAAA;AAEjB;;;;;GAKG;AACH,QAAA,MAAM,qBAAqB;4CAKxB,0BAA0B;;CA4B5B,CAAA;AAGD,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,CAAA"}

package/dist/components/SearchFilters/SearchFilters.js

@@ -0,0 +1,176 @@
+import { jsxs as s, jsx as e, Fragment as N } from "react/jsx-runtime";
+import * as n from "react";
+import { Button as w } from "../Button/Button.js";
+import { Searchbar as k } from "../Searchbar/Searchbar.js";
+import { Carousel as y, CarouselContent as v, CarouselItem as S, CarouselPrevious as C, CarouselNext as F } from "../Carousel/Carousel.js";
+import { Flex as m } from "../Flex/Flex.js";
+import { cn as l } from "../../utils/cn.js";
+import { ArrowLeftOutline as A } from "@solar-icons/react-perf";
+import { Skeleton as f } from "../Skeleton/Skeleton.js";
+const R = n.forwardRef(
+  ({
+    className: t,
+    searchbarProps: r,
+    back: a,
+    backVisibleOnDesktop: i = !1,
+    children: c,
+    carouselOpts: d,
+    showArrows: u = !0,
+    ...x
+  }, b) => {
+    const h = !!(r || a), p = n.Children.toArray(c).filter(n.isValidElement);
+    return /* @__PURE__ */ s(
+      m,
+      {
+        ref: b,
+        direction: "column",
+        "data-slot": "search-filters",
+        className: l(
+          "w-full bg-surface-base-secondary",
+          "md:flex-row md:items-center md:gap-2xl md:px-2xl md:py-xl",
+          t
+        ),
+        ...x,
+        children: [
+          h && /* @__PURE__ */ s(
+            m,
+            {
+              "data-slot": "search-filters-bar",
+              align: "center",
+              gap: "md",
+              padding: { px: "xl", py: "lg" },
+              className: l(
+                "border-b border-stroke-base-primary",
+                "md:border-b-0 md:p-0"
+              ),
+              children: [
+                a && /* @__PURE__ */ e(
+                  m,
+                  {
+                    "data-slot": "search-filters-back",
+                    align: "center",
+                    className: l("shrink-0", !i && "md:hidden"),
+                    children: /* @__PURE__ */ e(
+                      w,
+                      {
+                        variant: "tertiary",
+                        size: "icon",
+                        icon: /* @__PURE__ */ e(A, {}),
+                        ...a
+                      }
+                    )
+                  }
+                ),
+                r && /* @__PURE__ */ e("div", { className: "flex-1 md:w-[280px] md:flex-none", children: /* @__PURE__ */ e(k, { ...r }) })
+              ]
+            }
+          ),
+          h && /* @__PURE__ */ e(
+            "div",
+            {
+              "aria-hidden": !0,
+              className: "hidden h-comp-button-h-sm w-px shrink-0 bg-stroke-base-primary md:block"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              "data-slot": "search-filters-list",
+              className: l(
+                // No horizontal padding here so the chip carousel runs full-bleed
+                // to the viewport edges; the leading/trailing chip insets live on
+                // the first/last CarouselItem so they survive Embla's scroll
+                // trimming and only show at the scroll extremes.
+                "relative min-w-0 py-lg",
+                // Mobile gets a bottom divider below the toggle row, matching the
+                // divider above between the searchbar and the toggles.
+                "border-b border-stroke-base-primary",
+                // Desktop: pull the right edge out past the bar's px-2xl so chips
+                // bleed to the viewport's right edge (left stays inset by the bar).
+                "md:-mr-2xl md:flex-1 md:border-b-0 md:p-0"
+              ),
+              children: /* @__PURE__ */ s(y, { align: "start", options: d, className: "w-full", children: [
+                /* @__PURE__ */ e(v, { className: "!ml-0 items-center gap-xs", children: p.map((g, o) => /* @__PURE__ */ e(
+                  S,
+                  {
+                    className: l(
+                      "!basis-auto !pl-0",
+                      // First/last chips carry the leading/trailing inset so the
+                      // strip rests with padding at the scroll extremes while
+                      // still bleeding to the edges mid-scroll. Mobile/tablet use
+                      // the bar's xl inset; desktop uses the container's 2xl.
+                      o === 0 && "!pl-xl md:!pl-0",
+                      o === p.length - 1 && "pr-xl md:pr-2xl"
+                    ),
+                    children: g
+                  },
+                  o
+                )) }),
+                u && /* @__PURE__ */ s(N, { children: [
+                  /* @__PURE__ */ e(
+                    C,
+                    {
+                      hideWhenDisabled: !0,
+                      className: "hidden md:left-0 md:flex"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    F,
+                    {
+                      hideWhenDisabled: !0,
+                      className: "hidden md:right-2xl md:flex"
+                    }
+                  )
+                ] })
+              ] })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+R.displayName = "SearchFilters";
+const j = ({
+  className: t,
+  color: r = "default",
+  chips: a = 4,
+  ...i
+}) => /* @__PURE__ */ s(
+  m,
+  {
+    direction: "column",
+    gap: "2xl",
+    className: l("w-full md:flex-row md:items-center", t),
+    ...i,
+    children: [
+      /* @__PURE__ */ e(
+        f,
+        {
+          color: r,
+          className: "h-comp-input-h-small w-full shrink-0 rounded-full md:w-[280px]"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          "aria-hidden": !0,
+          className: "hidden h-comp-button-h-sm w-px shrink-0 bg-stroke-base-primary md:block"
+        }
+      ),
+      /* @__PURE__ */ e(m, { gap: "xs", className: "min-w-0 flex-1 overflow-hidden", children: Array.from({ length: a }).map((c, d) => /* @__PURE__ */ e(
+        f,
+        {
+          color: r,
+          className: "h-comp-button-h-sm w-[96px] shrink-0 rounded-full"
+        },
+        d
+      )) })
+    ]
+  }
+);
+j.displayName = "SearchFiltersSkeleton";
+export {
+  R as SearchFilters,
+  j as SearchFiltersSkeleton
+};