@acronis-platform/ui-react 4.0.0 → 4.1.0

package/dist/components/ui/empty-overlay/empty-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-overlay.js","sources":["../../../../src/components/ui/empty-overlay/empty-overlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A full-bleed empty-state overlay (Figma: `EmptyOverlay`, node 7461:40875) —\n// distinct from the plain, compositional `Empty`: this one owns a solid fade\n// background meant to sit over other content (e.g. a frozen/blurred widget\n// preview) and a colored icon badge. The badge reuses `Avatar`'s 8-color\n// `--ui-avatar-color-*` / `--ui-avatar-label-color-*` tokens rather than a\n// dedicated tier — Figma's own variable names for this badge\n// (`components/Avatar/color/*`) confirm it's a deliberate reuse of the avatar\n// palette, not a component composition (the badge holds an arbitrary glyph,\n// not a user image/initials, so wrapping `Avatar` itself would pull in image\n// loading semantics this doesn't need).\n//\n// No `--ui-empty-overlay-*` token tier exists, so non-badge colors come from\n// the shared semantic vocabulary already bridged in `src/styles/index.css`:\n// title -> text-foreground, description -> text-muted-foreground, gradient\n// end-stop -> bg-muted (all `--ui-text-on-surface-*` / `--ui-background-surface-secondary`).\n//\n// The root has no fixed size — per design intent, the developer sizes the\n// overlay (e.g. `absolute inset-0` over a positioned parent); this component\n// only fills that box (`size-full`) and centers its content.\nconst emptyOverlayIconVariants = cva(\n  'flex size-16 shrink-0 items-center justify-center rounded-full [&>svg]:size-6',\n  {\n    variants: {\n      color: {\n        teal: 'bg-[var(--ui-avatar-color-teal)] text-[var(--ui-avatar-label-color-teal)]',\n        violet:\n          'bg-[var(--ui-avatar-color-violet)] text-[var(--ui-avatar-label-color-violet)]',\n        red: 'bg-[var(--ui-avatar-color-red)] text-[var(--ui-avatar-label-color-red)]',\n        yellow:\n          'bg-[var(--ui-avatar-color-yellow)] text-[var(--ui-avatar-label-color-yellow)]',\n        orange:\n          'bg-[var(--ui-avatar-color-orange)] text-[var(--ui-avatar-label-color-orange)]',\n        blue: 'bg-[var(--ui-avatar-color-blue)] text-[var(--ui-avatar-label-color-blue)]',\n        gray: 'bg-[var(--ui-avatar-color-gray)] text-[var(--ui-avatar-label-color-gray)]',\n        green:\n          'bg-[var(--ui-avatar-color-green)] text-[var(--ui-avatar-label-color-green)]',\n      },\n    },\n    defaultVariants: {\n      color: 'green',\n    },\n  }\n);\n\nexport interface EmptyOverlayProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'color' | 'children'>,\n    VariantProps<typeof emptyOverlayIconVariants> {\n  /** Icon rendered in the colored badge (e.g. an `icons-react` glyph at 24px). */\n  icon?: React.ReactNode;\n  /** The empty-state headline. */\n  title: React.ReactNode;\n  /** Supporting copy shown under the title. */\n  description?: React.ReactNode;\n}\n\n/**\n * A full-bleed empty-state overlay: a colored icon badge over a centered\n * title/description, on a fade-to-solid backdrop. Size it via the parent\n * (e.g. `absolute inset-0`) — the component fills whatever box it's given.\n */\nconst EmptyOverlay = React.forwardRef<HTMLDivElement, EmptyOverlayProps>(\n  ({ className, icon, title, description, color, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex size-full flex-col items-center justify-center overflow-hidden bg-linear-to-b from-transparent to-muted to-[51.481%] p-12 text-center',\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex w-full max-w-lg flex-col items-center justify-center gap-3\">\n        {icon ? (\n          <div className={cn(emptyOverlayIconVariants({ color }))}>{icon}</div>\n        ) : null}\n        <div className=\"flex w-full flex-col items-center gap-1\">\n          <h3 className=\"w-full text-2xl font-normal leading-8 text-foreground\">\n            {title}\n          </h3>\n          {description ? (\n            <p className=\"w-full text-sm leading-6 text-muted-foreground\">\n              {description}\n            </p>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  )\n);\nEmptyOverlay.displayName = 'EmptyOverlay';\n\nexport { EmptyOverlay, emptyOverlayIconVariants };\n"],"names":["emptyOverlayIconVariants","cva","EmptyOverlay","React","className","icon","title","description","color","props","ref","jsx","cn","jsxs"],"mappings":";;;;AAwBA,MAAMA,IAA2BC;AAAA,EAC/B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,QACE;AAAA,QACF,KAAK;AAAA,QACL,QACE;AAAA,QACF,QACE;AAAA,QACF,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ,GAmBMC,IAAeC,EAAM;AAAA,EACzB,CAAC,EAAE,WAAAC,GAAW,MAAAC,GAAM,OAAAC,GAAO,aAAAC,GAAa,OAAAC,GAAO,GAAGC,KAASC,MACzD,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAR;AAAA,MAAA;AAAA,MAED,GAAGK;AAAA,MAEJ,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,mEACZ,UAAA;AAAA,QAAAR,IACC,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAGZ,EAAyB,EAAE,OAAAQ,EAAA,CAAO,CAAC,GAAI,UAAAH,EAAA,CAAK,IAC7D;AAAA,QACJ,gBAAAQ,EAAC,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,UAAA,gBAAAF,EAAC,MAAA,EAAG,WAAU,yDACX,UAAAL,GACH;AAAA,UACCC,IACC,gBAAAI,EAAC,KAAA,EAAE,WAAU,kDACV,aACH,IACE;AAAA,QAAA,EAAA,CACN;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AACAT,EAAa,cAAc;"}
+{"version":3,"file":"empty-overlay.js","names":[],"sources":["../../../../src/components/ui/empty-overlay/empty-overlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A full-bleed empty-state overlay (Figma: `EmptyOverlay`, node 7461:40875) —\n// distinct from the plain, compositional `Empty`: this one owns a solid fade\n// background meant to sit over other content (e.g. a frozen/blurred widget\n// preview) and a colored icon badge. The badge reuses `Avatar`'s 8-color\n// `--ui-avatar-color-*` / `--ui-avatar-label-color-*` tokens rather than a\n// dedicated tier — Figma's own variable names for this badge\n// (`components/Avatar/color/*`) confirm it's a deliberate reuse of the avatar\n// palette, not a component composition (the badge holds an arbitrary glyph,\n// not a user image/initials, so wrapping `Avatar` itself would pull in image\n// loading semantics this doesn't need).\n//\n// No `--ui-empty-overlay-*` token tier exists, so non-badge colors come from\n// the shared semantic vocabulary already bridged in `src/styles/index.css`:\n// title -> text-foreground, description -> text-muted-foreground, gradient\n// end-stop -> bg-muted (all `--ui-text-on-surface-*` / `--ui-background-surface-secondary`).\n//\n// The root has no fixed size — per design intent, the developer sizes the\n// overlay (e.g. `absolute inset-0` over a positioned parent); this component\n// only fills that box (`size-full`) and centers its content.\nconst emptyOverlayIconVariants = cva(\n  'flex size-16 shrink-0 items-center justify-center rounded-full [&>svg]:size-6',\n  {\n    variants: {\n      color: {\n        teal: 'bg-[var(--ui-avatar-color-teal)] text-[var(--ui-avatar-label-color-teal)]',\n        violet:\n          'bg-[var(--ui-avatar-color-violet)] text-[var(--ui-avatar-label-color-violet)]',\n        red: 'bg-[var(--ui-avatar-color-red)] text-[var(--ui-avatar-label-color-red)]',\n        yellow:\n          'bg-[var(--ui-avatar-color-yellow)] text-[var(--ui-avatar-label-color-yellow)]',\n        orange:\n          'bg-[var(--ui-avatar-color-orange)] text-[var(--ui-avatar-label-color-orange)]',\n        blue: 'bg-[var(--ui-avatar-color-blue)] text-[var(--ui-avatar-label-color-blue)]',\n        gray: 'bg-[var(--ui-avatar-color-gray)] text-[var(--ui-avatar-label-color-gray)]',\n        green:\n          'bg-[var(--ui-avatar-color-green)] text-[var(--ui-avatar-label-color-green)]',\n      },\n    },\n    defaultVariants: {\n      color: 'green',\n    },\n  }\n);\n\nexport interface EmptyOverlayProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'color' | 'children'>,\n    VariantProps<typeof emptyOverlayIconVariants> {\n  /** Icon rendered in the colored badge (e.g. an `icons-react` glyph at 24px). */\n  icon?: React.ReactNode;\n  /** The empty-state headline. */\n  title: React.ReactNode;\n  /** Supporting copy shown under the title. */\n  description?: React.ReactNode;\n}\n\n/**\n * A full-bleed empty-state overlay: a colored icon badge over a centered\n * title/description, on a fade-to-solid backdrop. Size it via the parent\n * (e.g. `absolute inset-0`) — the component fills whatever box it's given.\n */\nconst EmptyOverlay = React.forwardRef<HTMLDivElement, EmptyOverlayProps>(\n  ({ className, icon, title, description, color, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex size-full flex-col items-center justify-center overflow-hidden bg-linear-to-b from-transparent to-muted to-[51.481%] p-12 text-center',\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex w-full max-w-lg flex-col items-center justify-center gap-3\">\n        {icon ? (\n          <div className={cn(emptyOverlayIconVariants({ color }))}>{icon}</div>\n        ) : null}\n        <div className=\"flex w-full flex-col items-center gap-1\">\n          <h3 className=\"w-full text-2xl font-normal leading-8 text-foreground\">\n            {title}\n          </h3>\n          {description ? (\n            <p className=\"w-full text-sm leading-6 text-muted-foreground\">\n              {description}\n            </p>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  )\n);\nEmptyOverlay.displayName = 'EmptyOverlay';\n\nexport { EmptyOverlay, emptyOverlayIconVariants };\n"],"mappings":";;;;;AAwBA,IAAM,IAA2B,EAC/B,iFACA;CACE,UAAU,EACR,OAAO;EACL,MAAM;EACN,QACE;EACF,KAAK;EACL,QACE;EACF,QACE;EACF,MAAM;EACN,MAAM;EACN,OACE;CACJ,EACF;CACA,iBAAiB,EACf,OAAO,QACT;AACF,CACF,GAmBM,IAAe,EAAM,YACxB,EAAE,cAAW,SAAM,UAAO,gBAAa,UAAO,GAAG,KAAS,MACzD,kBAAC,OAAD;CACO;CACL,WAAW,EACT,8IACA,CACF;CACA,GAAI;CAEJ,UAAA,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACG,IACC,kBAAC,OAAD;GAAK,WAAW,EAAG,EAAyB,EAAE,SAAM,CAAC,CAAC;GAAI,UAAA;EAAU,CAAA,IAClE,MACJ,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;IACX,UAAA;GACC,CAAA,GACH,IACC,kBAAC,KAAD;IAAG,WAAU;IACV,UAAA;GACA,CAAA,IACD,IACD;EACF,CAAA,CAAA;;AACF,CAAA,CAET;AACA,EAAa,cAAc"}

package/dist/components/ui/field/field.js

@@ -1,189 +1,106 @@
-import { jsx as a, jsxs as i } from "react/jsx-runtime";
-import { Field as r } from "@base-ui/react/field";
-import { cva as n } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as l } from "../../../lib/utils.js";
-import { Separator as d } from "../separator/separator.js";
-import { labelClassName as s } from "../label/label.js";
-const f = n(
-  "group/field flex w-full gap-3 data-[invalid]:text-[var(--ui-text-on-status-danger)]",
-  {
-    variants: {
-      orientation: {
-        vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
-        horizontal: "flex-row items-center [&>[data-slot=field-label]]:flex-auto",
-        responsive: "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto"
-      }
-    },
-    defaultVariants: {
-      orientation: "vertical"
-    }
-  }
-);
-function v({ className: e, orientation: t = "vertical", ...o }) {
-  return /* @__PURE__ */ a(
-    r.Root,
-    {
-      "data-slot": "field",
-      "data-orientation": t,
-      className: l(f({ orientation: t }), e),
-      ...o
-    }
-  );
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { labelClassName as n } from "../label/label.js";
+import { Separator as r } from "../separator/separator.js";
+import "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Field as o } from "@base-ui/react/field";
+//#region src/components/ui/field/field.tsx
+var s = t("group/field flex w-full gap-3 data-[invalid]:text-[var(--ui-text-on-status-danger)]", {
+	variants: { orientation: {
+		vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+		horizontal: "flex-row items-center [&>[data-slot=field-label]]:flex-auto",
+		responsive: "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+function c({ className: t, orientation: n = "vertical", ...r }) {
+	return /* @__PURE__ */ i(o.Root, {
+		"data-slot": "field",
+		"data-orientation": n,
+		className: e(s({ orientation: n }), t),
+		...r
+	});
 }
-function b({ className: e, ...t }) {
-  return /* @__PURE__ */ a(
-    r.Label,
-    {
-      "data-slot": "field-label",
-      className: l(
-        s,
-        "flex w-fit items-center gap-2 leading-snug group-data-[disabled]/field:opacity-50",
-        e
-      ),
-      ...t
-    }
-  );
+function l({ className: t, ...r }) {
+	return /* @__PURE__ */ i(o.Label, {
+		"data-slot": "field-label",
+		className: e(n, "flex w-fit items-center gap-2 leading-snug group-data-[disabled]/field:opacity-50", t),
+		...r
+	});
 }
-function N({ className: e, ...t }) {
-  return /* @__PURE__ */ a(
-    r.Control,
-    {
-      "data-slot": "field-control",
-      className: l(e),
-      ...t
-    }
-  );
+function u({ className: t, ...n }) {
+	return /* @__PURE__ */ i(o.Control, {
+		"data-slot": "field-control",
+		className: e(t),
+		...n
+	});
 }
-function F({ className: e, ...t }) {
-  return /* @__PURE__ */ a(
-    r.Description,
-    {
-      "data-slot": "field-description",
-      className: l(
-        "text-sm font-normal leading-normal text-muted-foreground",
-        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-[var(--ui-background-brand-secondary)]",
-        e
-      ),
-      ...t
-    }
-  );
+function d({ className: t, ...n }) {
+	return /* @__PURE__ */ i(o.Description, {
+		"data-slot": "field-description",
+		className: e("text-sm font-normal leading-normal text-muted-foreground", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-[var(--ui-background-brand-secondary)]", t),
+		...n
+	});
 }
-function w({ className: e, ...t }) {
-  return /* @__PURE__ */ a(
-    r.Error,
-    {
-      "data-slot": "field-error",
-      className: l(
-        "text-sm font-normal text-[var(--ui-text-on-status-danger)]",
-        e
-      ),
-      ...t
-    }
-  );
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ i(o.Error, {
+		"data-slot": "field-error",
+		className: e("text-sm font-normal text-[var(--ui-text-on-status-danger)]", t),
+		...n
+	});
 }
-function y({ className: e, ...t }) {
-  return /* @__PURE__ */ a(
-    "fieldset",
-    {
-      "data-slot": "field-set",
-      className: l(
-        "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        e
-      ),
-      ...t
-    }
-  );
+function p({ className: t, ...n }) {
+	return /* @__PURE__ */ i("fieldset", {
+		"data-slot": "field-set",
+		className: e("flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", t),
+		...n
+	});
 }
-function h({
-  className: e,
-  variant: t = "legend",
-  ...o
-}) {
-  return /* @__PURE__ */ a(
-    "legend",
-    {
-      "data-slot": "field-legend",
-      "data-variant": t,
-      className: l(
-        "mb-3 font-medium data-[variant=legend]:text-base data-[variant=label]:text-sm",
-        e
-      ),
-      ...o
-    }
-  );
+function m({ className: t, variant: n = "legend", ...r }) {
+	return /* @__PURE__ */ i("legend", {
+		"data-slot": "field-legend",
+		"data-variant": n,
+		className: e("mb-3 font-medium data-[variant=legend]:text-base data-[variant=label]:text-sm", t),
+		...r
+	});
 }
-function k({ className: e, ...t }) {
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      "data-slot": "field-group",
-      className: l(
-        "group/field-group @container/field-group flex w-full flex-col gap-7 [&>[data-slot=field-group]]:gap-4",
-        e
-      ),
-      ...t
-    }
-  );
+function h({ className: t, ...n }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "field-group",
+		className: e("group/field-group @container/field-group flex w-full flex-col gap-7 [&>[data-slot=field-group]]:gap-4", t),
+		...n
+	});
 }
-function C({ className: e, ...t }) {
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      "data-slot": "field-content",
-      className: l(
-        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
-        e
-      ),
-      ...t
-    }
-  );
+function g({ className: t, ...n }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "field-content",
+		className: e("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", t),
+		...n
+	});
 }
-function L({ className: e, ...t }) {
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      "data-slot": "field-title",
-      className: l(
-        "flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled]/field:opacity-50",
-        e
-      ),
-      ...t
-    }
-  );
+function _({ className: t, ...n }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "field-title",
+		className: e("flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled]/field:opacity-50", t),
+		...n
+	});
 }
-function S({ children: e, className: t, ...o }) {
-  return /* @__PURE__ */ i(
-    "div",
-    {
-      "data-slot": "field-separator",
-      "data-content": !!e,
-      className: l("relative -my-2 h-5 text-sm", t),
-      ...o,
-      children: [
-        /* @__PURE__ */ a(d, { className: "absolute inset-0 top-1/2" }),
-        e && /* @__PURE__ */ a(
-          "span",
-          {
-            "data-slot": "field-separator-content",
-            className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
-            children: e
-          }
-        )
-      ]
-    }
-  );
+function v({ children: t, className: n, ...o }) {
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "field-separator",
+		"data-content": !!t,
+		className: e("relative -my-2 h-5 text-sm", n),
+		...o,
+		children: [/* @__PURE__ */ i(r, { className: "absolute inset-0 top-1/2" }), t && /* @__PURE__ */ i("span", {
+			"data-slot": "field-separator-content",
+			className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
+			children: t
+		})]
+	});
 }
-export {
-  v as Field,
-  C as FieldContent,
-  N as FieldControl,
-  F as FieldDescription,
-  w as FieldError,
-  k as FieldGroup,
-  b as FieldLabel,
-  h as FieldLegend,
-  S as FieldSeparator,
-  y as FieldSet,
-  L as FieldTitle
-};
-//# sourceMappingURL=field.js.map
+//#endregion
+export { c as Field, g as FieldContent, u as FieldControl, d as FieldDescription, f as FieldError, h as FieldGroup, l as FieldLabel, m as FieldLegend, v as FieldSeparator, p as FieldSet, _ as FieldTitle };
+
+//# sourceMappingURL=field.js.map

package/dist/components/ui/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../../../../src/components/ui/field/field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Field as FieldPrimitive } from '@base-ui/react/field';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { labelClassName } from '../label';\nimport { Separator } from '../separator';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `field`\n// (packages/ui-legacy/src/components/ui/field.tsx), rebuilt on Base UI's `Field`\n// primitive. `Field` (Root) / `FieldLabel` / `FieldControl` / `FieldDescription` /\n// `FieldError` auto-wire the label↔control↔description↔error associations and\n// expose Base UI's validity state — no manual `htmlFor`/`id`/`aria-*`. The\n// structural parts (`FieldSet`, `FieldLegend`, `FieldGroup`, `FieldContent`,\n// `FieldTitle`, `FieldSeparator`) are styled markup (Base UI has no equivalent).\n// Field pairs with the *bare* controls — `InputBox`, `Checkbox`, `Switch`,\n// `RadioGroup` — not the self-contained `InputText`/`InputSearch` fields.\n\nconst fieldVariants = cva(\n  'group/field flex w-full gap-3 data-[invalid]:text-[var(--ui-text-on-status-danger)]',\n  {\n    variants: {\n      orientation: {\n        vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',\n        horizontal:\n          'flex-row items-center [&>[data-slot=field-label]]:flex-auto',\n        responsive:\n          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto',\n      },\n    },\n    defaultVariants: {\n      orientation: 'vertical',\n    },\n  }\n);\n\nexport interface FieldProps\n  extends Omit<React.ComponentProps<typeof FieldPrimitive.Root>, 'className'>,\n    VariantProps<typeof fieldVariants> {\n  className?: string;\n}\n\nfunction Field({ className, orientation = 'vertical', ...props }: FieldProps) {\n  return (\n    <FieldPrimitive.Root\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldLabelProps\n  extends Omit<React.ComponentProps<typeof FieldPrimitive.Label>, 'className'> {\n  className?: string;\n}\n\nfunction FieldLabel({ className, ...props }: FieldLabelProps) {\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"field-label\"\n      className={cn(\n        labelClassName,\n        'flex w-fit items-center gap-2 leading-snug group-data-[disabled]/field:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldControlProps\n  extends Omit<React.ComponentProps<typeof FieldPrimitive.Control>, 'className'> {\n  className?: string;\n}\n\n// Thin wrapper over Base UI's Field.Control — usually used with `render` to wire\n// a bare ui-react control (e.g. `<FieldControl render={<InputBox />} />`), which\n// receives the field's id / aria-describedby / name automatically.\nfunction FieldControl({ className, ...props }: FieldControlProps) {\n  return (\n    <FieldPrimitive.Control\n      data-slot=\"field-control\"\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldDescriptionProps\n  extends Omit<\n    React.ComponentProps<typeof FieldPrimitive.Description>,\n    'className'\n  > {\n  className?: string;\n}\n\nfunction FieldDescription({ className, ...props }: FieldDescriptionProps) {\n  return (\n    <FieldPrimitive.Description\n      data-slot=\"field-description\"\n      className={cn(\n        'text-sm font-normal leading-normal text-muted-foreground',\n        '[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-[var(--ui-background-brand-secondary)]',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldErrorProps\n  extends Omit<React.ComponentProps<typeof FieldPrimitive.Error>, 'className'> {\n  className?: string;\n}\n\nfunction FieldError({ className, ...props }: FieldErrorProps) {\n  return (\n    <FieldPrimitive.Error\n      data-slot=\"field-error\"\n      className={cn(\n        'text-sm font-normal text-[var(--ui-text-on-status-danger)]',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        'flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldLegendProps extends React.ComponentProps<'legend'> {\n  variant?: 'legend' | 'label';\n}\n\nfunction FieldLegend({\n  className,\n  variant = 'legend',\n  ...props\n}: FieldLegendProps) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        'mb-3 font-medium data-[variant=legend]:text-base data-[variant=label]:text-sm',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        'group/field-group @container/field-group flex w-full flex-col gap-7 [&>[data-slot=field-group]]:gap-4',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-title\"\n      className={cn(\n        'flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled]/field:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldSeparatorProps extends React.ComponentProps<'div'> {\n  children?: React.ReactNode;\n}\n\nfunction FieldSeparator({ children, className, ...props }: FieldSeparatorProps) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn('relative -my-2 h-5 text-sm', className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          data-slot=\"field-separator-content\"\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldControl,\n  FieldDescription,\n  FieldError,\n  FieldSet,\n  FieldLegend,\n  FieldGroup,\n  FieldContent,\n  FieldTitle,\n  FieldSeparator,\n};\n"],"names":["fieldVariants","cva","Field","className","orientation","props","jsx","FieldPrimitive","cn","FieldLabel","labelClassName","FieldControl","FieldDescription","FieldError","FieldSet","FieldLegend","variant","FieldGroup","FieldContent","FieldTitle","FieldSeparator","children","jsxs","Separator"],"mappings":"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"}
+{"version":3,"file":"field.js","names":[],"sources":["../../../../src/components/ui/field/field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Field as FieldPrimitive } from '@base-ui/react/field';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { labelClassName } from '../label';\nimport { Separator } from '../separator';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `field`\n// (packages/ui-legacy/src/components/ui/field.tsx), rebuilt on Base UI's `Field`\n// primitive. `Field` (Root) / `FieldLabel` / `FieldControl` / `FieldDescription` /\n// `FieldError` auto-wire the label↔control↔description↔error associations and\n// expose Base UI's validity state — no manual `htmlFor`/`id`/`aria-*`. The\n// structural parts (`FieldSet`, `FieldLegend`, `FieldGroup`, `FieldContent`,\n// `FieldTitle`, `FieldSeparator`) are styled markup (Base UI has no equivalent).\n// Field pairs with the *bare* controls — `InputBox`, `Checkbox`, `Switch`,\n// `RadioGroup` — not the self-contained `InputText`/`InputSearch` fields.\n\nconst fieldVariants = cva(\n  'group/field flex w-full gap-3 data-[invalid]:text-[var(--ui-text-on-status-danger)]',\n  {\n    variants: {\n      orientation: {\n        vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',\n        horizontal:\n          'flex-row items-center [&>[data-slot=field-label]]:flex-auto',\n        responsive:\n          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto',\n      },\n    },\n    defaultVariants: {\n      orientation: 'vertical',\n    },\n  }\n);\n\nexport interface FieldProps\n  extends Omit<React.ComponentProps<typeof FieldPrimitive.Root>, 'className'>,\n    VariantProps<typeof fieldVariants> {\n  className?: string;\n}\n\nfunction Field({ className, orientation = 'vertical', ...props }: FieldProps) {\n  return (\n    <FieldPrimitive.Root\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldLabelProps\n  extends Omit<React.ComponentProps<typeof FieldPrimitive.Label>, 'className'> {\n  className?: string;\n}\n\nfunction FieldLabel({ className, ...props }: FieldLabelProps) {\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"field-label\"\n      className={cn(\n        labelClassName,\n        'flex w-fit items-center gap-2 leading-snug group-data-[disabled]/field:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldControlProps\n  extends Omit<React.ComponentProps<typeof FieldPrimitive.Control>, 'className'> {\n  className?: string;\n}\n\n// Thin wrapper over Base UI's Field.Control — usually used with `render` to wire\n// a bare ui-react control (e.g. `<FieldControl render={<InputBox />} />`), which\n// receives the field's id / aria-describedby / name automatically.\nfunction FieldControl({ className, ...props }: FieldControlProps) {\n  return (\n    <FieldPrimitive.Control\n      data-slot=\"field-control\"\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldDescriptionProps\n  extends Omit<\n    React.ComponentProps<typeof FieldPrimitive.Description>,\n    'className'\n  > {\n  className?: string;\n}\n\nfunction FieldDescription({ className, ...props }: FieldDescriptionProps) {\n  return (\n    <FieldPrimitive.Description\n      data-slot=\"field-description\"\n      className={cn(\n        'text-sm font-normal leading-normal text-muted-foreground',\n        '[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-[var(--ui-background-brand-secondary)]',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldErrorProps\n  extends Omit<React.ComponentProps<typeof FieldPrimitive.Error>, 'className'> {\n  className?: string;\n}\n\nfunction FieldError({ className, ...props }: FieldErrorProps) {\n  return (\n    <FieldPrimitive.Error\n      data-slot=\"field-error\"\n      className={cn(\n        'text-sm font-normal text-[var(--ui-text-on-status-danger)]',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        'flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldLegendProps extends React.ComponentProps<'legend'> {\n  variant?: 'legend' | 'label';\n}\n\nfunction FieldLegend({\n  className,\n  variant = 'legend',\n  ...props\n}: FieldLegendProps) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        'mb-3 font-medium data-[variant=legend]:text-base data-[variant=label]:text-sm',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        'group/field-group @container/field-group flex w-full flex-col gap-7 [&>[data-slot=field-group]]:gap-4',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-title\"\n      className={cn(\n        'flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled]/field:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldSeparatorProps extends React.ComponentProps<'div'> {\n  children?: React.ReactNode;\n}\n\nfunction FieldSeparator({ children, className, ...props }: FieldSeparatorProps) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn('relative -my-2 h-5 text-sm', className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          data-slot=\"field-separator-content\"\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldControl,\n  FieldDescription,\n  FieldError,\n  FieldSet,\n  FieldLegend,\n  FieldGroup,\n  FieldContent,\n  FieldTitle,\n  FieldSeparator,\n};\n"],"mappings":";;;;;;;;;AAoBA,IAAM,IAAgB,EACpB,uFACA;CACE,UAAU,EACR,aAAa;EACX,UAAU;EACV,YACE;EACF,YACE;CACJ,EACF;CACA,iBAAiB,EACf,aAAa,WACf;AACF,CACF;AAQA,SAAS,EAAM,EAAE,cAAW,iBAAc,YAAY,GAAG,KAAqB;CAC5E,OACE,kBAAC,EAAe,MAAhB;EACE,aAAU;EACV,oBAAkB;EAClB,WAAW,EAAG,EAAc,EAAE,eAAY,CAAC,GAAG,CAAS;EACvD,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,EAAW,EAAE,cAAW,GAAG,KAA0B;CAC5D,OACE,kBAAC,EAAe,OAAhB;EACE,aAAU;EACV,WAAW,EACT,GACA,qFACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAUA,SAAS,EAAa,EAAE,cAAW,GAAG,KAA4B;CAChE,OACE,kBAAC,EAAe,SAAhB;EACE,aAAU;EACV,WAAW,EAAG,CAAS;EACvB,GAAI;CACL,CAAA;AAEL;AAUA,SAAS,EAAiB,EAAE,cAAW,GAAG,KAAgC;CACxE,OACE,kBAAC,EAAe,aAAhB;EACE,aAAU;EACV,WAAW,EACT,4DACA,oGACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,EAAW,EAAE,cAAW,GAAG,KAA0B;CAC5D,OACE,kBAAC,EAAe,OAAhB;EACE,aAAU;EACV,WAAW,EACT,8DACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAS,EAAE,cAAW,GAAG,KAA2C;CAC3E,OACE,kBAAC,YAAD;EACE,aAAU;EACV,WAAW,EACT,oGACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,EAAY,EACnB,cACA,aAAU,UACV,GAAG,KACgB;CACnB,OACE,kBAAC,UAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,EACT,iFACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,yGACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAa,EAAE,cAAW,GAAG,KAAsC;CAC1E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,iEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,yGACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,EAAe,EAAE,aAAU,cAAW,GAAG,KAA8B;CAC9E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,gBAAc,CAAC,CAAC;EAChB,WAAW,EAAG,8BAA8B,CAAS;EACrD,GAAI;EAJN,UAAA,CAME,kBAAC,GAAD,EAAW,WAAU,2BAA4B,CAAA,GAChD,KACC,kBAAC,QAAD;GACE,aAAU;GACV,WAAU;GAET;EACG,CAAA,CAEL;;AAET"}

package/dist/components/ui/filter-cards/filter-cards.js

@@ -1,25 +1,16 @@
-import * as m from "react";
-import { mergeProps as o } from "@base-ui/react/merge-props";
-import { useRender as s } from "@base-ui/react/use-render";
-import { cn as p } from "../../../lib/utils.js";
-const f = m.forwardRef(
-  ({ className: r, render: e, ...a }, t) => s({
-    render: e,
-    ref: t,
-    defaultTagName: "div",
-    props: o(
-      {
-        className: p(
-          "flex w-full items-stretch gap-[var(--ui-gap-16)] [&>*]:flex-1",
-          r
-        )
-      },
-      a
-    )
-  })
-);
-f.displayName = "FilterCards";
-export {
-  f as FilterCards
-};
-//# sourceMappingURL=filter-cards.js.map
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { useRender as n } from "@base-ui/react/use-render";
+import { mergeProps as r } from "@base-ui/react/merge-props";
+//#region src/components/ui/filter-cards/filter-cards.tsx
+var i = t.forwardRef(({ className: t, render: i, ...a }, o) => n({
+	render: i,
+	ref: o,
+	defaultTagName: "div",
+	props: r({ className: e("flex w-full items-stretch gap-[var(--ui-gap-16)] [&>*]:flex-1", t) }, a)
+}));
+i.displayName = "FilterCards";
+//#endregion
+export { i as FilterCards };
+
+//# sourceMappingURL=filter-cards.js.map

package/dist/components/ui/filter-cards/filter-cards.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-cards.js","sources":["../../../../src/components/ui/filter-cards/filter-cards.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"FilterCards\" component: a horizontal row of `CardFilter`\n// items (Figma's nested \"ListCards\" slot maps to `children`) that fills its\n// container and distributes the available width evenly across however many\n// cards are passed in, matching the \"fill container\" sizing Figma applies to\n// each CardFilter instance inside this composition — it overrides CardFilter's\n// own fixed 224px width. The only styling this container owns is the 16px\n// inter-card gap (`--ui-gap-16`) and `items-stretch`, so every card matches\n// the row's tallest sibling even if one card's label wraps onto a second\n// line; there is no dedicated `--ui-filter-cards-*` token tier.\n//\n// Cards only shrink down to their own content's natural (min-content) width —\n// there is no `min-w-0` override, so the browser's default `min-width: auto`\n// on flex items applies. Once the cards' combined min-content width exceeds\n// the row, the row overflows its container rather than clipping any card's\n// content; the consumer is responsible for giving the row a scrollable\n// container (e.g. `overflow-x-auto`) if that's the desired behavior for a\n// given layout — FilterCards itself never adds scroll or wrap.\nexport interface FilterCardsProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Replace the rendered `<div>` with another element or component\n   * (Base UI composition).\n   */\n  render?: useRender.RenderProp;\n}\n\nconst FilterCards = React.forwardRef<HTMLDivElement, FilterCardsProps>(\n  ({ className, render, ...props }, ref) => {\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: cn(\n            'flex w-full items-stretch gap-[var(--ui-gap-16)] [&>*]:flex-1',\n            className\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nFilterCards.displayName = 'FilterCards';\n\nexport { FilterCards };\n"],"names":["FilterCards","React","className","render","props","ref","useRender","mergeProps","cn"],"mappings":";;;;AA+BA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MACzBC,EAAU;AAAA,IACf,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC;AAAA,UACT;AAAA,UACAN;AAAA,QAAA;AAAA,MACF;AAAA,MAEFE;AAAA,IAAA;AAAA,EACF,CACD;AAEL;AACAJ,EAAY,cAAc;"}
+{"version":3,"file":"filter-cards.js","names":[],"sources":["../../../../src/components/ui/filter-cards/filter-cards.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"FilterCards\" component: a horizontal row of `CardFilter`\n// items (Figma's nested \"ListCards\" slot maps to `children`) that fills its\n// container and distributes the available width evenly across however many\n// cards are passed in, matching the \"fill container\" sizing Figma applies to\n// each CardFilter instance inside this composition — it overrides CardFilter's\n// own fixed 224px width. The only styling this container owns is the 16px\n// inter-card gap (`--ui-gap-16`) and `items-stretch`, so every card matches\n// the row's tallest sibling even if one card's label wraps onto a second\n// line; there is no dedicated `--ui-filter-cards-*` token tier.\n//\n// Cards only shrink down to their own content's natural (min-content) width —\n// there is no `min-w-0` override, so the browser's default `min-width: auto`\n// on flex items applies. Once the cards' combined min-content width exceeds\n// the row, the row overflows its container rather than clipping any card's\n// content; the consumer is responsible for giving the row a scrollable\n// container (e.g. `overflow-x-auto`) if that's the desired behavior for a\n// given layout — FilterCards itself never adds scroll or wrap.\nexport interface FilterCardsProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Replace the rendered `<div>` with another element or component\n   * (Base UI composition).\n   */\n  render?: useRender.RenderProp;\n}\n\nconst FilterCards = React.forwardRef<HTMLDivElement, FilterCardsProps>(\n  ({ className, render, ...props }, ref) => {\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: cn(\n            'flex w-full items-stretch gap-[var(--ui-gap-16)] [&>*]:flex-1',\n            className\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nFilterCards.displayName = 'FilterCards';\n\nexport { FilterCards };\n"],"mappings":";;;;;AA+BA,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,WAAQ,GAAG,KAAS,MACzB,EAAU;CACf;CACA;CACA,gBAAgB;CAChB,OAAO,EACL,EACE,WAAW,EACT,iEACA,CACF,EACF,GACA,CACF;AACF,CAAC,CAEL;AACA,EAAY,cAAc"}

package/dist/components/ui/filter-chips/filter-chips.js

@@ -1,44 +1,36 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as s from "react";
-import { mergeProps as m } from "@base-ui/react/merge-props";
-import { useRender as l } from "@base-ui/react/use-render";
-import { cn as o } from "../../../lib/utils.js";
-import { Button as f } from "../button/button.js";
-const n = s.forwardRef(
-  ({ className: e, render: r, ariaLabel: t = "Applied filters", ...i }, p) => l({
-    render: r,
-    ref: p,
-    defaultTagName: "div",
-    props: m(
-      {
-        role: "group",
-        "aria-label": t,
-        className: o("flex items-center gap-[var(--ui-gap-16)]", e)
-      },
-      i
-    )
-  })
-);
-n.displayName = "FilterChips";
-const c = s.forwardRef(
-  ({ className: e, ...r }, t) => /* @__PURE__ */ a(
-    "div",
-    {
-      ref: t,
-      className: o(
-        "flex min-w-0 flex-wrap content-center items-center gap-[var(--ui-gap-8)]",
-        e
-      ),
-      ...r
-    }
-  )
-);
-c.displayName = "FilterChipsList";
-const d = s.forwardRef(({ children: e = "Reset filters", type: r = "button", ...t }, i) => /* @__PURE__ */ a(f, { ref: i, type: r, variant: "ghost", ...t, children: e }));
-d.displayName = "FilterChipsReset";
-export {
-  n as FilterChips,
-  c as FilterChipsList,
-  d as FilterChipsReset
-};
-//# sourceMappingURL=filter-chips.js.map
+import { cn as e } from "../../../lib/utils.js";
+import { Button as t } from "../button/button.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { useRender as i } from "@base-ui/react/use-render";
+import { mergeProps as a } from "@base-ui/react/merge-props";
+//#region src/components/ui/filter-chips/filter-chips.tsx
+var o = n.forwardRef(({ className: t, render: n, ariaLabel: r = "Applied filters", ...o }, s) => i({
+	render: n,
+	ref: s,
+	defaultTagName: "div",
+	props: a({
+		role: "group",
+		"aria-label": r,
+		className: e("flex items-center gap-[var(--ui-gap-16)]", t)
+	}, o)
+}));
+o.displayName = "FilterChips";
+var s = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
+	ref: i,
+	className: e("flex min-w-0 flex-wrap content-center items-center gap-[var(--ui-gap-8)]", t),
+	...n
+}));
+s.displayName = "FilterChipsList";
+var c = n.forwardRef(({ children: e = "Reset filters", type: n = "button", ...i }, a) => /* @__PURE__ */ r(t, {
+	ref: a,
+	type: n,
+	variant: "ghost",
+	...i,
+	children: e
+}));
+c.displayName = "FilterChipsReset";
+//#endregion
+export { o as FilterChips, s as FilterChipsList, c as FilterChipsReset };
+
+//# sourceMappingURL=filter-chips.js.map

package/dist/components/ui/filter-chips/filter-chips.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chips.js","sources":["../../../../src/components/ui/filter-chips/filter-chips.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\n\nimport { cn } from '@/lib/utils';\nimport { Button } from '../button';\n\n// Composable applied-filter row mirroring the Figma \"FilterChips\" component:\n// a wrapping list of removable `Chip`s closed by a ghost \"Reset filters\" action\n// that clears them all at once.\n//\n// There is no `--ui-filter-chips-*` tier, and none is needed — the design\n// references exactly two primitive gap tokens: `--ui-gap-16` between the root's\n// children and `--ui-gap-8` between the items inside the list. Every other token\n// in the node belongs to `Chip` (`--ui-chip-*`) or `Button`\n// (`--ui-button-ghost-*`), which already own them.\n//\n// Figma models the chip area as a single `ListChips` slot, so the chips are the\n// consumer's children rather than a data prop. The \"Reset filters\" button sits\n// *inside* that slot — the design measures 8px, not 16px, between the last chip\n// and the button — so compose `FilterChipsReset` as the last child of\n// `FilterChipsList`. The root's 16px gap is for anything a consumer places\n// beside the list as a whole.\n//\n// Chips are 24px tall and the ghost button is 32px, so the row is 32px tall with\n// the chips centered in it (`items-center`).\n\nexport interface FilterChipsProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Replace the rendered `<div>` with another element or component\n   * (Base UI composition). Accepts a React element or a render function.\n   */\n  render?: useRender.RenderProp;\n  /** Accessible name for the applied-filter region. */\n  ariaLabel?: string;\n}\n\nconst FilterChips = React.forwardRef<HTMLDivElement, FilterChipsProps>(\n  ({ className, render, ariaLabel = 'Applied filters', ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          role: 'group',\n          'aria-label': ariaLabel,\n          className: cn('flex items-center gap-[var(--ui-gap-16)]', className),\n        },\n        props\n      ),\n    })\n);\nFilterChips.displayName = 'FilterChips';\n\nexport type FilterChipsListProps = React.ComponentPropsWithoutRef<'div'>;\n\nconst FilterChipsList = React.forwardRef<HTMLDivElement, FilterChipsListProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex min-w-0 flex-wrap content-center items-center gap-[var(--ui-gap-8)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nFilterChipsList.displayName = 'FilterChipsList';\n\nexport interface FilterChipsResetProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Replace the rendered `<button>` with another element or component\n   * (Base UI composition). Accepts a React element or a render function.\n   */\n  render?: useRender.RenderProp;\n  /** Label for the reset action. */\n  children?: React.ReactNode;\n}\n\nconst FilterChipsReset = React.forwardRef<\n  HTMLButtonElement,\n  FilterChipsResetProps\n>(({ children = 'Reset filters', type = 'button', ...props }, ref) => (\n  <Button ref={ref} type={type} variant=\"ghost\" {...props}>\n    {children}\n  </Button>\n));\nFilterChipsReset.displayName = 'FilterChipsReset';\n\nexport { FilterChips, FilterChipsList, FilterChipsReset };\n"],"names":["FilterChips","React","className","render","ariaLabel","props","ref","useRender","mergeProps","cn","FilterChipsList","jsx","FilterChipsReset","children","type","Button"],"mappings":";;;;;;AAqCA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,WAAAC,IAAY,mBAAmB,GAAGC,EAAA,GAASC,MAC/DC,EAAU;AAAA,IACR,QAAAJ;AAAA,IACA,KAAAG;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,MAAM;AAAA,QACN,cAAcJ;AAAA,QACd,WAAWK,EAAG,4CAA4CP,CAAS;AAAA,MAAA;AAAA,MAErEG;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAL,EAAY,cAAc;AAI1B,MAAMU,IAAkBT,EAAM;AAAA,EAC5B,CAAC,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,MACxB,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAP;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV;AACAK,EAAgB,cAAc;AAa9B,MAAME,IAAmBX,EAAM,WAG7B,CAAC,EAAE,UAAAY,IAAW,iBAAiB,MAAAC,IAAO,UAAU,GAAGT,EAAA,GAASC,MAC5D,gBAAAK,EAACI,KAAO,KAAAT,GAAU,MAAAQ,GAAY,SAAQ,SAAS,GAAGT,GAC/C,UAAAQ,GACH,CACD;AACDD,EAAiB,cAAc;"}
+{"version":3,"file":"filter-chips.js","names":[],"sources":["../../../../src/components/ui/filter-chips/filter-chips.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\n\nimport { cn } from '@/lib/utils';\nimport { Button } from '../button';\n\n// Composable applied-filter row mirroring the Figma \"FilterChips\" component:\n// a wrapping list of removable `Chip`s closed by a ghost \"Reset filters\" action\n// that clears them all at once.\n//\n// There is no `--ui-filter-chips-*` tier, and none is needed — the design\n// references exactly two primitive gap tokens: `--ui-gap-16` between the root's\n// children and `--ui-gap-8` between the items inside the list. Every other token\n// in the node belongs to `Chip` (`--ui-chip-*`) or `Button`\n// (`--ui-button-ghost-*`), which already own them.\n//\n// Figma models the chip area as a single `ListChips` slot, so the chips are the\n// consumer's children rather than a data prop. The \"Reset filters\" button sits\n// *inside* that slot — the design measures 8px, not 16px, between the last chip\n// and the button — so compose `FilterChipsReset` as the last child of\n// `FilterChipsList`. The root's 16px gap is for anything a consumer places\n// beside the list as a whole.\n//\n// Chips are 24px tall and the ghost button is 32px, so the row is 32px tall with\n// the chips centered in it (`items-center`).\n\nexport interface FilterChipsProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Replace the rendered `<div>` with another element or component\n   * (Base UI composition). Accepts a React element or a render function.\n   */\n  render?: useRender.RenderProp;\n  /** Accessible name for the applied-filter region. */\n  ariaLabel?: string;\n}\n\nconst FilterChips = React.forwardRef<HTMLDivElement, FilterChipsProps>(\n  ({ className, render, ariaLabel = 'Applied filters', ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          role: 'group',\n          'aria-label': ariaLabel,\n          className: cn('flex items-center gap-[var(--ui-gap-16)]', className),\n        },\n        props\n      ),\n    })\n);\nFilterChips.displayName = 'FilterChips';\n\nexport type FilterChipsListProps = React.ComponentPropsWithoutRef<'div'>;\n\nconst FilterChipsList = React.forwardRef<HTMLDivElement, FilterChipsListProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex min-w-0 flex-wrap content-center items-center gap-[var(--ui-gap-8)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nFilterChipsList.displayName = 'FilterChipsList';\n\nexport interface FilterChipsResetProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Replace the rendered `<button>` with another element or component\n   * (Base UI composition). Accepts a React element or a render function.\n   */\n  render?: useRender.RenderProp;\n  /** Label for the reset action. */\n  children?: React.ReactNode;\n}\n\nconst FilterChipsReset = React.forwardRef<\n  HTMLButtonElement,\n  FilterChipsResetProps\n>(({ children = 'Reset filters', type = 'button', ...props }, ref) => (\n  <Button ref={ref} type={type} variant=\"ghost\" {...props}>\n    {children}\n  </Button>\n));\nFilterChipsReset.displayName = 'FilterChipsReset';\n\nexport { FilterChips, FilterChipsList, FilterChipsReset };\n"],"mappings":";;;;;;;AAqCA,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,WAAQ,eAAY,mBAAmB,GAAG,KAAS,MAC/D,EAAU;CACR;CACA;CACA,gBAAgB;CAChB,OAAO,EACL;EACE,MAAM;EACN,cAAc;EACd,WAAW,EAAG,4CAA4C,CAAS;CACrE,GACA,CACF;AACF,CAAC,CACL;AACA,EAAY,cAAc;AAI1B,IAAM,IAAkB,EAAM,YAC3B,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,OAAD;CACO;CACL,WAAW,EACT,4EACA,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAgB,cAAc;AAa9B,IAAM,IAAmB,EAAM,YAG5B,EAAE,cAAW,iBAAiB,UAAO,UAAU,GAAG,KAAS,MAC5D,kBAAC,GAAD;CAAa;CAAW;CAAM,SAAQ;CAAQ,GAAI;CAC/C;AACK,CAAA,CACT;AACD,EAAiB,cAAc"}