@logicplanes/kaeso-ui 0.4.4 → 0.4.5

package/dist/components/display-options.js

@@ -1,50 +1,60 @@
 "use client";
-import { t as e } from "../chunks/cn-Dj6sRgkF.js";
+import { t as e } from "../chunks/cn-BjnOAUrA.js";
 import { t } from "../chunks/dev-CR1p7gCm.js";
-import { i as n, r } from "../chunks/context-BELWW79w.js";
-import { t as i } from "../chunks/icon-D7ja-_Yk.js";
-import { t as a } from "../chunks/icon-button-CrdF_eMG.js";
-import { a as o } from "../chunks/tag-D_M1s2qS.js";
-import { r as s } from "../chunks/switch-BNMq_kGt.js";
-import { r as c } from "../chunks/segmented-CErcoxwi.js";
-import { r as l } from "../chunks/select-x4XVsdCI.js";
-import { i as u } from "../chunks/popover-DNN4S47w.js";
-import { forwardRef as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { SlidersHorizontalIcon as m, ViewOffSlashIcon as h } from "@hugeicons/core-free-icons";
+import { r as n } from "../chunks/inset-BUzyXLK4.js";
+import { i as r, r as i } from "../chunks/context-BELWW79w.js";
+import { t as a } from "../chunks/icon-CBzOwqrX.js";
+import { t as o } from "../chunks/icon-button-Dfwpvmav.js";
+import { a as s } from "../chunks/tag-BGr6lTSV.js";
+import { r as c } from "../chunks/switch-ngywMQdl.js";
+import { r as l } from "../chunks/segmented-D9i1avik.js";
+import { r as u } from "../chunks/select-BqjmQOqx.js";
+import { i as d } from "../chunks/popover-Bl5QYqnh.js";
+import { forwardRef as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { SlidersHorizontalIcon as h, ViewOffSlashIcon as g } from "@hugeicons/core-free-icons";
 //#region src/components/display-options/display-options.tsx
-var g = { trigger: {
+var _ = { trigger: {
 	secondary: { classes: "" },
 	ghost: { classes: "" }
-} }, _ = { trigger: "secondary" };
-function v({ view: e, rows: t, toggles: a, properties: u, footer: d }) {
-	let m = n(), g = r(), _ = u ? u.options.filter((e) => u.value.includes(e.value) && u.hidden?.includes(e.value)) : [];
-	return /* @__PURE__ */ p("div", {
-		className: "flex w-320 flex-col",
+} }, v = { trigger: "secondary" };
+function y(e) {
+	if (!e) return;
+	let t = requestAnimationFrame(() => e.querySelector("[role=\"radio\"][tabindex=\"0\"], button:not([disabled]), [tabindex=\"0\"]")?.focus({ preventScroll: !0 }));
+	return () => cancelAnimationFrame(t);
+}
+function b({ view: e, rows: t, toggles: o, properties: d, footer: f, inline: h }) {
+	let _ = r(), v = i(), b = d ? d.options.filter((e) => d.value.includes(e.value) && d.hidden?.includes(e.value)) : [];
+	return /* @__PURE__ */ p(n, { children: /* @__PURE__ */ m("div", {
+		ref: h ? void 0 : y,
+		className: "flex w-320 max-w-(--available-width) flex-col",
 		children: [
-			e && /* @__PURE__ */ f("div", {
+			e && /* @__PURE__ */ p("div", {
 				className: "p-12 pb-8",
-				children: /* @__PURE__ */ f(c, {
-					"aria-label": m("displayOptions.view", "View"),
+				children: /* @__PURE__ */ p(l, {
+					"aria-label": _("displayOptions.view", "View"),
 					options: e.options,
 					value: e.value,
 					onValueChange: e.onChange,
 					fullWidth: !0,
-					size: "sm",
-					className: "bg-item-hover"
+					size: "sm"
 				})
 			}),
-			t && t.length > 0 && /* @__PURE__ */ f("div", {
+			t && t.length > 0 && /* @__PURE__ */ p("div", {
 				className: "flex flex-col px-12 py-4",
-				children: t.map((e) => /* @__PURE__ */ p("div", {
+				children: t.map((e) => /* @__PURE__ */ m("div", {
 					className: "flex h-40 items-center justify-between gap-12",
-					children: [/* @__PURE__ */ p("span", {
-						className: "flex items-center gap-8 text-body text-fg-secondary",
-						children: [e.icon && /* @__PURE__ */ f(i, {
+					children: [/* @__PURE__ */ m("span", {
+						className: "flex min-w-0 items-center gap-8 text-body text-fg",
+						children: [e.icon && /* @__PURE__ */ p(a, {
 							icon: e.icon,
-							size: "sm"
-						}), e.label]
-					}), /* @__PURE__ */ f(l, {
+							size: "sm",
+							className: "shrink-0 text-fg-secondary"
+						}), /* @__PURE__ */ p("span", {
+							className: "min-w-0 truncate",
+							children: e.label
+						})]
+					}), /* @__PURE__ */ p(u, {
 						size: "sm",
 						appearance: "default",
 						"aria-label": e.label,
@@ -54,76 +64,78 @@ function v({ view: e, rows: t, toggles: a, properties: u, footer: d }) {
 					})]
 				}, e.label))
 			}),
-			a && a.length > 0 && /* @__PURE__ */ f("div", {
-				className: "flex flex-col px-12 py-4 hairline-t",
-				children: a.map((e) => /* @__PURE__ */ f(s, {
-					size: "sm",
+			o && o.length > 0 && /* @__PURE__ */ p("div", {
+				className: "flex flex-col px-12 py-4 not-first:hairline-t",
+				children: o.map((e) => /* @__PURE__ */ p(c, {
 					label: e.label,
 					checked: e.checked,
 					onCheckedChange: e.onChange,
 					className: "h-40"
 				}, e.label))
 			}),
-			u && /* @__PURE__ */ p("div", {
-				className: "flex flex-col gap-8 p-12 hairline-t",
+			d && /* @__PURE__ */ m("div", {
+				className: "flex flex-col gap-8 p-12 not-first:hairline-t",
 				children: [
-					/* @__PURE__ */ f("span", {
+					/* @__PURE__ */ p("span", {
 						className: "text-caption font-medium text-fg-secondary",
-						children: m("displayOptions.properties", "Display properties")
+						children: _("displayOptions.properties", "Display properties")
 					}),
-					/* @__PURE__ */ f("div", {
+					/* @__PURE__ */ p("div", {
 						className: "flex flex-wrap gap-6",
-						children: u.options.map((e) => {
-							let t = u.value.includes(e.value), n = t && _.includes(e);
-							return /* @__PURE__ */ f(o, {
+						children: d.options.map((e) => {
+							let t = d.value.includes(e.value), n = t && b.includes(e);
+							return /* @__PURE__ */ p(s, {
 								size: "sm",
 								variant: t ? "soft" : "outline",
 								pressed: t,
 								...n ? {
-									icon: h,
-									"aria-description": m("displayOptions.doesNotFit", "Doesn't fit at this width")
+									icon: g,
+									"aria-description": _("displayOptions.doesNotFit", "Doesn't fit at this width")
 								} : {},
-								onClick: () => u.onChange(t ? u.value.filter((t) => t !== e.value) : [...u.value, e.value]),
+								onClick: () => d.onChange(t ? d.value.filter((t) => t !== e.value) : [...d.value, e.value]),
 								children: e.label
 							}, e.value);
 						})
 					}),
-					_.length > 0 && /* @__PURE__ */ f("span", {
+					b.length > 0 && /* @__PURE__ */ p("span", {
 						className: "text-caption text-fg-tertiary",
-						children: m("displayOptions.hiddenProperties", "{count, plural, one {{properties} doesn't fit at this width.} other {{properties} don't fit at this width.}}", {
-							count: _.length,
-							properties: new Intl.ListFormat(g, { type: "conjunction" }).format(_.map((e) => e.label))
+						children: _("displayOptions.hiddenProperties", "{count, plural, one {{properties} doesn't fit at this width.} other {{properties} don't fit at this width.}}", {
+							count: b.length,
+							properties: new Intl.ListFormat(v, { type: "conjunction" }).format(b.map((e) => e.label))
 						})
 					})
 				]
 			}),
-			d && /* @__PURE__ */ f("div", {
+			f && /* @__PURE__ */ p("div", {
 				className: "p-12 hairline-t",
-				children: d
+				children: f
 			})
 		]
-	});
+	}) });
 }
-var y = /* @__PURE__ */ d(function({ trigger: r = "secondary", inline: i, ...o }, s) {
-	let c = n();
-	return !o.view && !o.rows?.length && !o.toggles?.length && !o.properties && t("DisplayOptions: pass view, rows, toggles or properties; an empty panel is never useful."), i ? /* @__PURE__ */ f("div", {
+var x = /* @__PURE__ */ f(function({ trigger: n = "secondary", inline: i, ...a }, s) {
+	let c = r();
+	return !a.view && !a.rows?.length && !a.toggles?.length && !a.properties && t("DisplayOptions: pass view, rows, toggles or properties; an empty panel is never useful."), i ? /* @__PURE__ */ p("div", {
 		ref: s,
 		className: e("rounded-popover bg-raised shadow-raised"),
-		children: /* @__PURE__ */ f(v, { ...o })
-	}) : /* @__PURE__ */ p(u, { children: [/* @__PURE__ */ f(u.Trigger, { children: /* @__PURE__ */ f(a, {
+		children: /* @__PURE__ */ p(b, {
+			...a,
+			inline: !0
+		})
+	}) : /* @__PURE__ */ m(d, { children: [/* @__PURE__ */ p(d.Trigger, { children: /* @__PURE__ */ p(o, {
 		ref: s,
-		icon: m,
+		icon: h,
 		"aria-label": c("displayOptions.displayOptions", "Display options"),
-		variant: r
-	}) }), /* @__PURE__ */ f(u.Content, {
+		variant: n
+	}) }), /* @__PURE__ */ p(d.Content, {
 		padding: "none",
 		align: "end",
 		"aria-label": c("displayOptions.displayOptions", "Display options"),
-		children: /* @__PURE__ */ f(v, { ...o })
+		children: /* @__PURE__ */ p(b, { ...a })
 	})] });
 });
-process.env.NODE_ENV !== "production" && (y.displayName = "DisplayOptions");
+process.env.NODE_ENV !== "production" && (x.displayName = "DisplayOptions");
 //#endregion
-export { y as DisplayOptions, _ as KAESO_DISPLAY_OPTIONS_DEFAULT_VARIANTS, g as KAESO_DISPLAY_OPTIONS_VARIANTS };
+export { x as DisplayOptions, v as KAESO_DISPLAY_OPTIONS_DEFAULT_VARIANTS, _ as KAESO_DISPLAY_OPTIONS_VARIANTS };
 
 //# sourceMappingURL=display-options.js.map

package/dist/components/display-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"display-options.js","names":["__icon_ViewOffSlashIcon","__icon_SlidersHorizontalIcon","cn","useUiText","Icon","IconButton","Tag","Switch","Segmented","Select","Popover","KAESO_DISPLAY_OPTIONS_VARIANTS","KAESO_DISPLAY_OPTIONS_DEFAULT_VARIANTS","Panel","t","locale","useLocale","squeezed","properties","o","view","rows","r","toggles","toggle","on","out","ViewOffSlashIcon","v","footer","DisplayOptions","props","devWarn","inline","SlidersHorizontalIcon","trigger"],"sources":["../../src/components/display-options/display-options.tsx"],"sourcesContent":["import { forwardRef, type Ref, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { devWarn } from \"../../utils/dev.js\";\nimport { ViewOffSlashIcon as __icon_ViewOffSlashIcon, SlidersHorizontalIcon as __icon_SlidersHorizontalIcon } from \"@hugeicons/core-free-icons\";\nimport { IconButton } from \"../icon-button/icon-button.js\";\nimport { Popover } from \"../popover/popover.js\";\nimport { Segmented, type SegmentedOption } from \"../segmented/segmented.js\";\nimport { Select, type SelectOption } from \"../select/select.js\";\nimport { Switch } from \"../switch/switch.js\";\nimport { Tag } from \"../tag/tag.js\";\nimport type { IconData } from \"../icon/icon.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { useLocale, useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_DISPLAY_OPTIONS_VARIANTS = {\n  trigger: {\n    secondary: { classes: \"\" },\n    ghost: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_DISPLAY_OPTIONS_DEFAULT_VARIANTS = { trigger: \"secondary\" } as const;\n\nexport interface DisplayOptionsRow {\n  label: string;\n  icon?: IconData | undefined;\n  value: string;\n  options: SelectOption[];\n  onChange: (value: string) => void;\n}\nexport interface DisplayOptionsToggle {\n  label: string;\n  checked: boolean;\n  onChange: (checked: boolean) => void;\n}\n\nexport interface DisplayOptionsProps {\n  view?: { value: string; options: SegmentedOption[]; onChange: (v: string) => void } | undefined;\n  rows?: DisplayOptionsRow[] | undefined;\n  toggles?: DisplayOptionsToggle[] | undefined;\n  properties?: { options: { value: string; label: string }[]; value: string[]; onChange: (v: string[]) => void; hidden?: string[] | undefined } | undefined;\n  trigger?: keyof typeof KAESO_DISPLAY_OPTIONS_VARIANTS.trigger | undefined;\n  inline?: boolean | undefined;\n  footer?: ReactNode | undefined;\n}\n\nfunction Panel({ view, rows, toggles, properties, footer }: DisplayOptionsProps) {\n  const t = useUiText();\n  const locale = useLocale();\n  const squeezed = properties ? properties.options.filter((o) => properties.value.includes(o.value) && properties.hidden?.includes(o.value)) : [];\n  return (\n    <div className=\"flex w-320 flex-col\">\n      {view && (\n        <div className=\"p-12 pb-8\">\n          <Segmented\n            aria-label={t(\"displayOptions.view\", \"View\")}\n            options={view.options}\n            value={view.value}\n            onValueChange={view.onChange}\n            fullWidth\n            size=\"sm\"\n            className=\"bg-item-hover\"\n          />\n        </div>\n      )}\n      {rows && rows.length > 0 && (\n        <div className=\"flex flex-col px-12 py-4\">\n          {rows.map((r) => (\n            <div key={r.label} className=\"flex h-40 items-center justify-between gap-12\">\n              <span className=\"flex items-center gap-8 text-body text-fg-secondary\">\n                {r.icon && <Icon icon={r.icon} size=\"sm\" />}\n                {r.label}\n              </span>\n              <Select size=\"sm\" appearance=\"default\" aria-label={r.label} options={r.options} value={r.value} onValueChange={r.onChange} />\n            </div>\n          ))}\n        </div>\n      )}\n      {toggles && toggles.length > 0 && (\n        <div className=\"flex flex-col px-12 py-4 hairline-t\">\n          {toggles.map((toggle) => (\n            <Switch key={toggle.label} size=\"sm\" label={toggle.label} checked={toggle.checked} onCheckedChange={toggle.onChange} className=\"h-40\" />\n          ))}\n        </div>\n      )}\n      {properties && (\n        <div className=\"flex flex-col gap-8 p-12 hairline-t\">\n          <span className=\"text-caption font-medium text-fg-secondary\">{t(\"displayOptions.properties\", \"Display properties\")}</span>\n          <div className=\"flex flex-wrap gap-6\">\n            {properties.options.map((o) => {\n              const on = properties.value.includes(o.value);\n              const out = on && squeezed.includes(o);\n              return (\n                <Tag\n                  key={o.value}\n                  size=\"sm\"\n                  variant={on ? \"soft\" : \"outline\"}\n                  pressed={on}\n                  {...(out ? { icon: __icon_ViewOffSlashIcon, \"aria-description\": t(\"displayOptions.doesNotFit\", \"Doesn't fit at this width\") } : {})}\n                  onClick={() => properties.onChange(on ? properties.value.filter((v) => v !== o.value) : [...properties.value, o.value])}\n                >\n                  {o.label}\n                </Tag>\n              );\n            })}\n          </div>\n          {squeezed.length > 0 && (\n            <span className=\"text-caption text-fg-tertiary\">\n              {t(\n                \"displayOptions.hiddenProperties\",\n                \"{count, plural, one {{properties} doesn't fit at this width.} other {{properties} don't fit at this width.}}\",\n                {\n                  count: squeezed.length,\n                  properties: new Intl.ListFormat(locale, { type: \"conjunction\" }).format(squeezed.map((o) => o.label)),\n                },\n              )}\n            </span>\n          )}\n        </div>\n      )}\n      {footer && <div className=\"p-12 hairline-t\">{footer}</div>}\n    </div>\n  );\n}\n\nexport const DisplayOptions = /* @__PURE__ */ forwardRef<HTMLElement, DisplayOptionsProps>(function DisplayOptions({ trigger = \"secondary\", inline, ...props }, ref) {\n  const t = useUiText();\n  if (!props.view && !props.rows?.length && !props.toggles?.length && !props.properties)\n    devWarn(\"DisplayOptions: pass view, rows, toggles or properties; an empty panel is never useful.\");\n  if (inline) {\n    return (\n      <div ref={ref as Ref<HTMLDivElement>} className={cn(\"rounded-popover bg-raised shadow-raised\")}>\n        <Panel {...props} />\n      </div>\n    );\n  }\n  return (\n    <Popover>\n      <Popover.Trigger>\n        <IconButton\n          ref={ref as Ref<HTMLButtonElement>}\n          icon={__icon_SlidersHorizontalIcon}\n          aria-label={t(\"displayOptions.displayOptions\", \"Display options\")}\n          variant={trigger}\n        />\n      </Popover.Trigger>\n      <Popover.Content padding=\"none\" align=\"end\" aria-label={t(\"displayOptions.displayOptions\", \"Display options\")}>\n        <Panel {...props} />\n      </Popover.Content>\n    </Popover>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") DisplayOptions.displayName = \"DisplayOptions\";\n"],"mappings":"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"}
+{"version":3,"file":"display-options.js","names":["__icon_ViewOffSlashIcon","__icon_SlidersHorizontalIcon","cn","RaisedContent","useUiText","useLocale","Icon","IconButton","Tag","Switch","Segmented","Select","Popover","KAESO_DISPLAY_OPTIONS_VARIANTS","KAESO_DISPLAY_OPTIONS_DEFAULT_VARIANTS","focusFirst","panel","frame","Panel","t","locale","squeezed","properties","o","inline","view","rows","r","toggles","toggle","on","out","ViewOffSlashIcon","v","footer","DisplayOptions","props","devWarn","SlidersHorizontalIcon","trigger"],"sources":["../../src/components/display-options/display-options.tsx"],"sourcesContent":["import { forwardRef, type Ref, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { devWarn } from \"../../utils/dev.js\";\nimport { ViewOffSlashIcon as __icon_ViewOffSlashIcon, SlidersHorizontalIcon as __icon_SlidersHorizontalIcon } from \"@hugeicons/core-free-icons\";\nimport { IconButton } from \"../icon-button/icon-button.js\";\nimport { Popover } from \"../popover/popover.js\";\nimport { Segmented, type SegmentedOption } from \"../segmented/segmented.js\";\nimport { Select, type SelectOption } from \"../select/select.js\";\nimport { Switch } from \"../switch/switch.js\";\nimport { Tag } from \"../tag/tag.js\";\nimport type { IconData } from \"../icon/icon.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { useLocale, useUiText } from \"../../i18n/context.js\";\nimport { RaisedContent } from \"../../utils/inset.js\";\n\nexport const KAESO_DISPLAY_OPTIONS_VARIANTS = {\n  trigger: {\n    secondary: { classes: \"\" },\n    ghost: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_DISPLAY_OPTIONS_DEFAULT_VARIANTS = { trigger: \"secondary\" } as const;\n\nexport interface DisplayOptionsRow {\n  label: string;\n  icon?: IconData | undefined;\n  value: string;\n  options: SelectOption[];\n  onChange: (value: string) => void;\n}\nexport interface DisplayOptionsToggle {\n  label: string;\n  checked: boolean;\n  onChange: (checked: boolean) => void;\n}\n\nexport interface DisplayOptionsProps {\n  view?: { value: string; options: SegmentedOption[]; onChange: (v: string) => void } | undefined;\n  rows?: DisplayOptionsRow[] | undefined;\n  toggles?: DisplayOptionsToggle[] | undefined;\n  properties?: { options: { value: string; label: string }[]; value: string[]; onChange: (v: string[]) => void; hidden?: string[] | undefined } | undefined;\n  trigger?: keyof typeof KAESO_DISPLAY_OPTIONS_VARIANTS.trigger | undefined;\n  inline?: boolean | undefined;\n  footer?: ReactNode | undefined;\n}\n\nfunction focusFirst(panel: HTMLDivElement | null) {\n  if (!panel) return;\n  // Base UI focuses the popup box when it opens; the first control takes focus on the next frame, after that.\n  const frame = requestAnimationFrame(() =>\n    panel.querySelector<HTMLElement>('[role=\"radio\"][tabindex=\"0\"], button:not([disabled]), [tabindex=\"0\"]')?.focus({ preventScroll: true }),\n  );\n  return () => cancelAnimationFrame(frame);\n}\n\nfunction Panel({ view, rows, toggles, properties, footer, inline }: DisplayOptionsProps) {\n  const t = useUiText();\n  const locale = useLocale();\n  const squeezed = properties ? properties.options.filter((o) => properties.value.includes(o.value) && properties.hidden?.includes(o.value)) : [];\n  return (\n    <RaisedContent>\n      <div ref={inline ? undefined : focusFirst} className=\"flex w-320 max-w-(--available-width) flex-col\">\n        {view && (\n          <div className=\"p-12 pb-8\">\n            <Segmented\n              aria-label={t(\"displayOptions.view\", \"View\")}\n              options={view.options}\n              value={view.value}\n              onValueChange={view.onChange}\n              fullWidth\n              size=\"sm\"\n            />\n          </div>\n        )}\n        {rows && rows.length > 0 && (\n          <div className=\"flex flex-col px-12 py-4\">\n            {rows.map((r) => (\n              <div key={r.label} className=\"flex h-40 items-center justify-between gap-12\">\n                <span className=\"flex min-w-0 items-center gap-8 text-body text-fg\">\n                  {r.icon && <Icon icon={r.icon} size=\"sm\" className=\"shrink-0 text-fg-secondary\" />}\n                  <span className=\"min-w-0 truncate\">{r.label}</span>\n                </span>\n                <Select size=\"sm\" appearance=\"default\" aria-label={r.label} options={r.options} value={r.value} onValueChange={r.onChange} />\n              </div>\n            ))}\n          </div>\n        )}\n        {toggles && toggles.length > 0 && (\n          <div className=\"flex flex-col px-12 py-4 not-first:hairline-t\">\n            {toggles.map((toggle) => (\n              <Switch key={toggle.label} label={toggle.label} checked={toggle.checked} onCheckedChange={toggle.onChange} className=\"h-40\" />\n            ))}\n          </div>\n        )}\n        {properties && (\n          <div className=\"flex flex-col gap-8 p-12 not-first:hairline-t\">\n            <span className=\"text-caption font-medium text-fg-secondary\">{t(\"displayOptions.properties\", \"Display properties\")}</span>\n            <div className=\"flex flex-wrap gap-6\">\n              {properties.options.map((o) => {\n                const on = properties.value.includes(o.value);\n                const out = on && squeezed.includes(o);\n                return (\n                  <Tag\n                    key={o.value}\n                    size=\"sm\"\n                    variant={on ? \"soft\" : \"outline\"}\n                    pressed={on}\n                    {...(out ? { icon: __icon_ViewOffSlashIcon, \"aria-description\": t(\"displayOptions.doesNotFit\", \"Doesn't fit at this width\") } : {})}\n                    onClick={() => properties.onChange(on ? properties.value.filter((v) => v !== o.value) : [...properties.value, o.value])}\n                  >\n                    {o.label}\n                  </Tag>\n                );\n              })}\n            </div>\n            {squeezed.length > 0 && (\n              <span className=\"text-caption text-fg-tertiary\">\n                {t(\n                  \"displayOptions.hiddenProperties\",\n                  \"{count, plural, one {{properties} doesn't fit at this width.} other {{properties} don't fit at this width.}}\",\n                  {\n                    count: squeezed.length,\n                    properties: new Intl.ListFormat(locale, { type: \"conjunction\" }).format(squeezed.map((o) => o.label)),\n                  },\n                )}\n              </span>\n            )}\n          </div>\n        )}\n        {footer && <div className=\"p-12 hairline-t\">{footer}</div>}\n      </div>\n    </RaisedContent>\n  );\n}\n\nexport const DisplayOptions = /* @__PURE__ */ forwardRef<HTMLElement, DisplayOptionsProps>(function DisplayOptions({ trigger = \"secondary\", inline, ...props }, ref) {\n  const t = useUiText();\n  if (!props.view && !props.rows?.length && !props.toggles?.length && !props.properties)\n    devWarn(\"DisplayOptions: pass view, rows, toggles or properties; an empty panel is never useful.\");\n  if (inline) {\n    return (\n      <div ref={ref as Ref<HTMLDivElement>} className={cn(\"rounded-popover bg-raised shadow-raised\")}>\n        <Panel {...props} inline />\n      </div>\n    );\n  }\n  return (\n    <Popover>\n      <Popover.Trigger>\n        <IconButton\n          ref={ref as Ref<HTMLButtonElement>}\n          icon={__icon_SlidersHorizontalIcon}\n          aria-label={t(\"displayOptions.displayOptions\", \"Display options\")}\n          variant={trigger}\n        />\n      </Popover.Trigger>\n      <Popover.Content padding=\"none\" align=\"end\" aria-label={t(\"displayOptions.displayOptions\", \"Display options\")}>\n        <Panel {...props} />\n      </Popover.Content>\n    </Popover>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") DisplayOptions.displayName = \"DisplayOptions\";\n"],"mappings":"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"}

package/dist/components/empty.js

@@ -1,2 +1,2 @@
 "use client";
-export { t as Empty, n as KAESO_EMPTY_DEFAULT_VARIANTS, r as KAESO_EMPTY_VARIANTS } from "../chunks/empty-DvhyMXQq.js";
+export { t as Empty, n as KAESO_EMPTY_DEFAULT_VARIANTS, r as KAESO_EMPTY_VARIANTS } from "../chunks/empty-BpiUgGzm.js";

package/dist/components/field.js

@@ -1,2 +1,2 @@
 "use client";
-export { t as Field, n as Fieldset, r as KAESO_FIELD_DEFAULT_VARIANTS, i as KAESO_FIELD_VARIANTS, a as useField, o as useFieldControl, s as withField } from "../chunks/field-TviMvYa2.js";
+export { t as Field, n as Fieldset, r as KAESO_FIELD_DEFAULT_VARIANTS, i as KAESO_FIELD_VARIANTS, a as useField, o as useFieldControl, s as withField } from "../chunks/field-D7m-yl-D.js";

package/dist/components/figure.js

@@ -1,7 +1,7 @@
 "use client";
-import { t as e } from "../chunks/cn-Dj6sRgkF.js";
+import { t as e } from "../chunks/cn-BjnOAUrA.js";
 import { t } from "../chunks/observe-resize-DhxhmoyB.js";
-import { r as n } from "../chunks/scroll-area-D8MD7Vpo.js";
+import { r as n } from "../chunks/scroll-area-_Ljh4-bG.js";
 import { forwardRef as r, useLayoutEffect as i, useRef as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/figure/figure.tsx

package/dist/components/filter-chip.js

@@ -1,16 +1,16 @@
 "use client";
-import { t as e } from "../chunks/cn-Dj6sRgkF.js";
+import { t as e } from "../chunks/cn-BjnOAUrA.js";
 import { i as t, r as n } from "../chunks/context-BELWW79w.js";
-import { t as r } from "../chunks/icon-D7ja-_Yk.js";
-import { c as i } from "../chunks/menu-DEmBfdPm.js";
-import { t as a } from "../chunks/command-list-C2Y7V_lt.js";
-import { r as o } from "../chunks/picker-popover-BxyU1U9F.js";
+import { t as r } from "../chunks/icon-CBzOwqrX.js";
+import { c as i } from "../chunks/menu-Clvv6ftq.js";
+import { t as a } from "../chunks/command-list-CypqsC4T.js";
+import { r as o } from "../chunks/picker-popover-1FHb1LQG.js";
 import { forwardRef as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 import { Cancel01Icon as m } from "@hugeicons/core-free-icons";
 //#region src/components/filter-chip/filter-chip.tsx
-var h = { size: { sm: { classes: "h-32 text-body" } } }, g = { size: "sm" }, _ = 8, v = 50;
-function y(e, t) {
+var h = { size: { sm: { classes: "h-32 text-body" } } }, g = { size: "sm" }, _ = 8, ee = 50;
+function v(e, t) {
 	if (!e.some((e) => e.group)) return e.map(t);
 	let n = [];
 	for (let t of e) {
@@ -25,7 +25,7 @@ function y(e, t) {
 		children: e.values.map(t)
 	}, `${e.group ?? ""}:${n}`));
 }
-function b(e) {
+function y(e) {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e) {
 		let e = n.group ?? "", i = t.get(e) ?? {
@@ -35,7 +35,7 @@ function b(e) {
 		};
 		i.items.push({
 			value: n.value,
-			label: x(n),
+			label: b(n),
 			keywords: [n.value],
 			...n.leading || n.icon ? { leading: n.leading ?? (n.icon ? /* @__PURE__ */ f(r, {
 				icon: n.icon,
@@ -50,14 +50,14 @@ function b(e) {
 	}
 	return [...t.values()];
 }
-var x = (e) => e.textValue ?? (typeof e.label == "string" || typeof e.label == "number" ? String(e.label) : e.value), S = "relative inline-flex h-full cursor-pointer items-center gap-6 px-10 font-medium transition-control tap-target hover:bg-fill-1 active:bg-fill-2 open:bg-fill-1 focus-ring-segment", C = /* @__PURE__ */ s(function({ property: s, propertyIcon: g, operator: C, operators: w, onOperatorChange: T, value: E, values: D, groups: O, searchable: k, width: A, selected: j = [], multiple: M, onSelectedChange: N, onRemove: P, defaultValuesOpen: F, onValuesOpenChange: I, className: L, "data-force": R }, z) {
+var b = (e) => e.textValue ?? (typeof e.label == "string" || typeof e.label == "number" ? String(e.label) : e.value), x = "relative inline-flex h-full min-w-0 cursor-pointer items-center gap-6 px-10 font-medium whitespace-nowrap transition-control tap-target disabled:cursor-default hover:bg-raised-hover active:bg-raised-pressed open:bg-raised-pressed focus-ring-segment", S = "min-w-0 max-w-240 truncate", C = /* @__PURE__ */ s(function({ property: s, propertyIcon: g, operator: C, operators: w, onOperatorChange: T, value: E, values: D, groups: O, searchable: k, width: A, selected: j = [], multiple: M, onSelectedChange: N, onRemove: P, defaultValuesOpen: F, onValuesOpenChange: I, className: L, "data-force": R }, z) {
 	let B = t(), V = n(), H = O ? O.reduce((e, t) => e + t.items.length, 0) : D?.length ?? 0, [U, W] = d(!!F && H > 0), G = (e) => {
 		W(e), I?.(e);
-	}, [K, q] = d(""), J = u(null), Y = !!k || H > _, X = !!O || H > v, Z = l(() => O ?? (X && D ? b(D) : []), [
+	}, [K, q] = d(""), J = u(null), Y = !!k || H > _, X = !!O || H > ee, Z = l(() => O ?? (X && D ? y(D) : []), [
 		O,
 		X,
 		D
-	]), Q = K.trim().toLowerCase(), $ = Y && Q ? (D ?? []).filter((e) => x(e).toLowerCase().includes(Q) || e.value.toLowerCase().includes(Q)) : D ?? [];
+	]), Q = K.trim().toLowerCase(), $ = Y && Q ? (D ?? []).filter((e) => b(e).toLowerCase().includes(Q) || e.value.toLowerCase().includes(Q)) : D ?? [];
 	return c(() => {
 		if (!U || !Y || X) return;
 		let e = setTimeout(() => J.current?.focus(), 0);
@@ -70,20 +70,18 @@ var x = (e) => e.textValue ?? (typeof e.label == "string" || typeof e.label == "
 		ref: z,
 		role: "group",
 		"aria-label": typeof s == "string" ? B("filterChip.filterNamed", "Filter: {property}", { property: s }) : B("filterChip.filter", "Filter"),
-		...R ? { "data-force": R } : {},
-		className: e("group/fc inline-flex shrink-0 items-stretch overflow-hidden rounded-pill bg-raised text-fg ring-over", h.size.sm.classes, L),
+		className: e("group/fc inline-flex max-w-full shrink-0 items-stretch overflow-hidden rounded-pill bg-raised text-fg ring-over", h.size.sm.classes, L),
 		children: [
 			/* @__PURE__ */ p("span", {
-				className: e(S, "cursor-default pl-12 text-fg-secondary hover:bg-transparent active:bg-transparent"),
+				className: e(x, "shrink-0 cursor-default pl-12 text-fg-secondary hover:bg-transparent active:bg-transparent"),
 				children: [g && /* @__PURE__ */ f(r, {
 					icon: g,
 					size: "sm"
 				}), s]
 			}),
-			/* @__PURE__ */ p(i, { children: [/* @__PURE__ */ f(i.Trigger, { children: /* @__PURE__ */ f("button", {
+			w?.length ? /* @__PURE__ */ p(i, { children: [/* @__PURE__ */ f(i.Trigger, { children: /* @__PURE__ */ f("button", {
 				type: "button",
-				className: e(S, "text-fg-secondary divider-l"),
-				disabled: !w?.length,
+				className: e(x, "shrink-0 text-fg-secondary divider-l"),
 				children: C
 			}) }), w && /* @__PURE__ */ f(i.Content, { children: /* @__PURE__ */ f(i.RadioGroup, {
 				value: C,
@@ -92,7 +90,10 @@ var x = (e) => e.textValue ?? (typeof e.label == "string" || typeof e.label == "
 					value: e,
 					children: e
 				}, e))
-			}) })] }),
+			}) })] }) : /* @__PURE__ */ f("span", {
+				className: e(x, "shrink-0 cursor-default text-fg-secondary divider-l hover:bg-transparent active:bg-transparent"),
+				children: C
+			}),
 			X && (O || D) ? /* @__PURE__ */ f(o, {
 				title: typeof s == "string" ? s : B("filterChip.filter", "Filter"),
 				open: U,
@@ -100,8 +101,12 @@ var x = (e) => e.textValue ?? (typeof e.label == "string" || typeof e.label == "
 				...A ? { width: A } : {},
 				trigger: /* @__PURE__ */ f("button", {
 					type: "button",
-					className: e(S, "divider-l", !P && "pr-12"),
-					children: E
+					...R ? { "data-force": R } : {},
+					className: e(x, "divider-l", !P && "pr-12"),
+					children: /* @__PURE__ */ f("span", {
+						className: S,
+						children: E
+					})
 				}),
 				children: /* @__PURE__ */ f(a, {
 					groups: Z,
@@ -122,9 +127,13 @@ var x = (e) => e.textValue ?? (typeof e.label == "string" || typeof e.label == "
 				},
 				children: [/* @__PURE__ */ f(i.Trigger, { children: /* @__PURE__ */ f("button", {
 					type: "button",
-					className: e(S, "divider-l", !P && "pr-12"),
+					...R ? { "data-force": R } : {},
+					className: e(x, "divider-l", !P && "pr-12"),
 					disabled: H === 0,
-					children: E
+					children: /* @__PURE__ */ f("span", {
+						className: S,
+						children: E
+					})
 				}) }), D && /* @__PURE__ */ f(i.Content, {
 					...Y ? { className: "w-280" } : {},
 					...Y ? {
@@ -149,7 +158,7 @@ var x = (e) => e.textValue ?? (typeof e.label == "string" || typeof e.label == "
 						}),
 						...$.length === 0 ? { footer: B("filterChip.noMatches", "No values match") } : {}
 					} : {},
-					children: M ? y($, (e) => /* @__PURE__ */ f(i.CheckboxItem, {
+					children: M ? v($, (e) => /* @__PURE__ */ f(i.CheckboxItem, {
 						checked: j.includes(e.value),
 						onCheckedChange: (t) => N?.(t ? [...j, e.value] : j.filter((t) => t !== e.value)),
 						...e.icon ? { icon: e.icon } : {},
@@ -160,7 +169,7 @@ var x = (e) => e.textValue ?? (typeof e.label == "string" || typeof e.label == "
 					}, e.value)) : /* @__PURE__ */ f(i.RadioGroup, {
 						value: j[0] ?? "",
 						onValueChange: (e) => N?.([e]),
-						children: y($, (e) => /* @__PURE__ */ f(i.RadioItem, {
+						children: v($, (e) => /* @__PURE__ */ f(i.RadioItem, {
 							value: e.value,
 							closeOnClick: !0,
 							...e.icon ? { icon: e.icon } : {},
@@ -173,12 +182,12 @@ var x = (e) => e.textValue ?? (typeof e.label == "string" || typeof e.label == "
 				})]
 			}),
 			P && /* @__PURE__ */ f("span", {
-				className: "flex items-center pr-4 divider-l pl-4",
+				className: "flex shrink-0 items-center pr-4 divider-l pl-4",
 				children: /* @__PURE__ */ f("button", {
 					type: "button",
 					"aria-label": typeof s == "string" ? B("filterChip.removeNamed", "Remove the {property} filter", { property: s }) : B("filterChip.remove", "Remove filter"),
 					onClick: P,
-					className: "relative inline-flex size-24 cursor-pointer items-center justify-center rounded-pill text-fg-tertiary transition-control hover:bg-fill-2 hover:text-fg focus-ring tap-target",
+					className: "relative inline-flex size-24 cursor-pointer items-center justify-center rounded-pill text-fg-tertiary transition-control hover:bg-raised-hover hover:text-fg active:bg-raised-pressed focus-ring tap-target",
 					children: /* @__PURE__ */ f(r, {
 						icon: m,
 						size: "xs"

package/dist/components/filter-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.js","names":["__icon_Cancel01Icon","cn","useUiText","useLocale","Icon","Menu","CommandList","PickerPopover","KAESO_FILTER_CHIP_VARIANTS","KAESO_FILTER_CHIP_DEFAULT_VARIANTS","SEARCH_ABOVE","LIST_ABOVE","inRuns","values","v","item","runs","last","r","i","choiceGroups","groups","key","group","textOf","SEG","FilterChip","givenGroups","forceSearch","force","t","locale","choices","n","g","open","setOwnOpen","useState","defaultValuesOpen","setOpen","o","onValuesOpenChange","query","setQuery","search","useRef","searchable","long","useMemo","q","shown","useEffect","timer","property","className","propertyIcon","operators","operator","onOperatorChange","width","onRemove","value","selected","multiple","onSelectedChange","s","c","Cancel01Icon"],"sources":["../../src/components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { forwardRef, useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { Icon, type IconData } from \"../icon/icon.js\";\nimport { Cancel01Icon as __icon_Cancel01Icon } from \"@hugeicons/core-free-icons\";\nimport { Menu } from \"../menu/menu.js\";\nimport { CommandList, type CommandListGroup } from \"../command-list/command-list.js\";\nimport { PickerPopover, type PickerPopoverProps } from \"../command-list/picker-popover.js\";\nimport { useLocale, useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_FILTER_CHIP_VARIANTS = {\n  size: {\n    sm: { classes: \"h-32 text-body\" },\n  },\n} as const;\nexport const KAESO_FILTER_CHIP_DEFAULT_VARIANTS = { size: \"sm\" } as const;\n\nexport interface FilterChipChoice {\n  value: string;\n  label: ReactNode;\n  icon?: IconData | undefined;\n  leading?: ReactNode | undefined;\n  textValue?: string | undefined;\n  group?: string | undefined;\n}\n\nconst SEARCH_ABOVE = 8;\nconst LIST_ABOVE = 50;\n\nfunction inRuns(values: FilterChipChoice[], item: (v: FilterChipChoice) => ReactNode): ReactNode {\n  if (!values.some((v) => v.group)) return values.map(item);\n  const runs: { group: string | undefined; values: FilterChipChoice[] }[] = [];\n  for (const v of values) {\n    const last = runs[runs.length - 1];\n    if (last && last.group === v.group) last.values.push(v);\n    else runs.push({ group: v.group, values: [v] });\n  }\n  return runs.map((r, i) => (\n    <Menu.Group key={`${r.group ?? \"\"}:${i}`} label={r.group}>\n      {r.values.map(item)}\n    </Menu.Group>\n  ));\n}\n\nfunction choiceGroups(values: FilterChipChoice[]): CommandListGroup[] {\n  const groups = new Map<string, CommandListGroup>();\n  for (const v of values) {\n    const key = v.group ?? \"\";\n    const group = groups.get(key) ?? { id: key || \"values\", ...(key ? { label: key } : {}), items: [] };\n    group.items.push({\n      value: v.value,\n      label: textOf(v),\n      keywords: [v.value],\n      ...(v.leading || v.icon ? { leading: v.leading ?? (v.icon ? <Icon icon={v.icon} size=\"sm\" className=\"text-fg-secondary\" /> : undefined) } : {}),\n      ...(typeof v.label === \"string\" ? {} : { render: () => <span className=\"min-w-0 flex-1 truncate\">{v.label}</span> }),\n    });\n    groups.set(key, group);\n  }\n  return [...groups.values()];\n}\n\nexport interface FilterChipProps {\n  property: ReactNode;\n  propertyIcon?: IconData | undefined;\n  operator: string;\n  operators?: string[] | undefined;\n  onOperatorChange?: ((operator: string) => void) | undefined;\n  value: ReactNode;\n  values?: FilterChipChoice[] | undefined;\n  groups?: CommandListGroup[] | undefined;\n  searchable?: boolean | undefined;\n  width?: PickerPopoverProps[\"width\"] | undefined;\n  selected?: string[] | undefined;\n  multiple?: boolean | undefined;\n  onSelectedChange?: ((selected: string[]) => void) | undefined;\n  onRemove?: (() => void) | undefined;\n  defaultValuesOpen?: boolean | undefined;\n  onValuesOpenChange?: ((open: boolean) => void) | undefined;\n  className?: string | undefined;\n  \"data-force\"?: string | undefined;\n}\n\nconst textOf = (v: FilterChipChoice) => v.textValue ?? (typeof v.label === \"string\" || typeof v.label === \"number\" ? String(v.label) : v.value);\n\nconst SEG =\n  \"relative inline-flex h-full cursor-pointer items-center gap-6 px-10 font-medium transition-control tap-target hover:bg-fill-1 active:bg-fill-2 open:bg-fill-1 focus-ring-segment\";\n\nexport const FilterChip = /* @__PURE__ */ forwardRef<HTMLDivElement, FilterChipProps>(function FilterChip(\n  {\n    property,\n    propertyIcon,\n    operator,\n    operators,\n    onOperatorChange,\n    value,\n    values,\n    groups: givenGroups,\n    searchable: forceSearch,\n    width,\n    selected = [],\n    multiple,\n    onSelectedChange,\n    onRemove,\n    defaultValuesOpen,\n    onValuesOpenChange,\n    className,\n    \"data-force\": force,\n  },\n  ref,\n) {\n  const t = useUiText();\n  const locale = useLocale();\n  const choices = givenGroups ? givenGroups.reduce((n, g) => n + g.items.length, 0) : (values?.length ?? 0);\n  const [open, setOwnOpen] = useState(!!defaultValuesOpen && choices > 0);\n  const setOpen = (o: boolean) => {\n    setOwnOpen(o);\n    onValuesOpenChange?.(o);\n  };\n  const [query, setQuery] = useState(\"\");\n  const search = useRef<HTMLInputElement | null>(null);\n  const searchable = !!forceSearch || choices > SEARCH_ABOVE;\n  const long = !!givenGroups || choices > LIST_ABOVE;\n  const groups = useMemo(() => givenGroups ?? (long && values ? choiceGroups(values) : []), [givenGroups, long, values]);\n  const q = query.trim().toLowerCase();\n  const shown = searchable && q ? (values ?? []).filter((v) => textOf(v).toLowerCase().includes(q) || v.value.toLowerCase().includes(q)) : (values ?? []);\n  useEffect(() => {\n    if (!open || !searchable || long) return;\n    const timer = setTimeout(() => search.current?.focus(), 0);\n    return () => clearTimeout(timer);\n  }, [open, searchable, long]);\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-label={typeof property === \"string\" ? t(\"filterChip.filterNamed\", \"Filter: {property}\", { property }) : t(\"filterChip.filter\", \"Filter\")}\n      {...(force ? { \"data-force\": force } : {})}\n      className={cn(\n        \"group/fc inline-flex shrink-0 items-stretch overflow-hidden rounded-pill bg-raised text-fg ring-over\",\n        KAESO_FILTER_CHIP_VARIANTS.size.sm.classes,\n        className,\n      )}\n    >\n      <span className={cn(SEG, \"cursor-default pl-12 text-fg-secondary hover:bg-transparent active:bg-transparent\")}>\n        {propertyIcon && <Icon icon={propertyIcon} size=\"sm\" />}\n        {property}\n      </span>\n      <Menu>\n        <Menu.Trigger>\n          <button type=\"button\" className={cn(SEG, \"text-fg-secondary divider-l\")} disabled={!operators?.length}>\n            {operator}\n          </button>\n        </Menu.Trigger>\n        {operators && (\n          <Menu.Content>\n            <Menu.RadioGroup value={operator} onValueChange={(v) => onOperatorChange?.(v)}>\n              {operators.map((o) => (\n                <Menu.RadioItem key={o} value={o}>\n                  {o}\n                </Menu.RadioItem>\n              ))}\n            </Menu.RadioGroup>\n          </Menu.Content>\n        )}\n      </Menu>\n      {long && (givenGroups || values) ? (\n        <PickerPopover\n          title={typeof property === \"string\" ? property : t(\"filterChip.filter\", \"Filter\")}\n          open={open}\n          onOpenChange={setOpen}\n          {...(width ? { width } : {})}\n          trigger={\n            <button type=\"button\" className={cn(SEG, \"divider-l\", !onRemove && \"pr-12\")}>\n              {value}\n            </button>\n          }\n        >\n          <CommandList\n            groups={groups}\n            aria-label={typeof property === \"string\" ? property : t(\"filterChip.filter\", \"Filter\")}\n            value={selected}\n            {...(multiple ? { multiple: true } : {})}\n            autoFocus\n            placeholder={\n              typeof property === \"string\"\n                ? t(\"filterChip.searchNamedValues\", \"Search {property} values\", { property: locale === \"en\" ? property.toLowerCase() : property })\n                : t(\"filterChip.searchValues\", \"Search values\")\n            }\n            emptyText={t(\"filterChip.noMatches\", \"No values match\")}\n            onSelect={(v) => {\n              if (multiple) onSelectedChange?.(selected.includes(v) ? selected.filter((s) => s !== v) : [...selected, v]);\n              else {\n                onSelectedChange?.([v]);\n                setOpen(false);\n              }\n            }}\n          />\n        </PickerPopover>\n      ) : (\n        <Menu\n          open={open}\n          onOpenChange={(o) => {\n            setOpen(o);\n            if (!o) setQuery(\"\");\n          }}\n        >\n          <Menu.Trigger>\n            <button type=\"button\" className={cn(SEG, \"divider-l\", !onRemove && \"pr-12\")} disabled={choices === 0}>\n              {value}\n            </button>\n          </Menu.Trigger>\n          {values && (\n            <Menu.Content\n              {...(searchable ? { className: \"w-280\" } : {})}\n              {...(searchable\n                ? {\n                    header: (\n                      <input\n                        ref={search}\n                        type=\"search\"\n                        aria-label={\n                          typeof property === \"string\"\n                            ? t(\"filterChip.searchNamedValues\", \"Search {property} values\", { property: locale === \"en\" ? property.toLowerCase() : property })\n                            : t(\"filterChip.searchValues\", \"Search values\")\n                        }\n                        placeholder={t(\"filterChip.search\", \"Search\")}\n                        autoComplete=\"off\"\n                        value={query}\n                        onChange={(e) => setQuery(e.target.value)}\n                        onKeyDown={(e) => {\n                          if (![\"ArrowDown\", \"ArrowUp\", \"Escape\", \"Tab\", \"Enter\"].includes(e.key)) e.stopPropagation();\n                        }}\n                        className=\"h-28 w-full bg-transparent text-body text-fg outline-none placeholder:text-fg-tertiary coarse:h-36\"\n                      />\n                    ),\n                    ...(shown.length === 0 ? { footer: t(\"filterChip.noMatches\", \"No values match\") } : {}),\n                  }\n                : {})}\n            >\n              {multiple ? (\n                inRuns(shown, (v) => (\n                  <Menu.CheckboxItem\n                    key={v.value}\n                    checked={selected.includes(v.value)}\n                    onCheckedChange={(c) => onSelectedChange?.(c ? [...selected, v.value] : selected.filter((s) => s !== v.value))}\n                    {...(v.icon ? { icon: v.icon } : {})}\n                  >\n                    <span className=\"inline-flex items-center gap-8\">\n                      {v.leading}\n                      {v.label}\n                    </span>\n                  </Menu.CheckboxItem>\n                ))\n              ) : (\n                <Menu.RadioGroup value={selected[0] ?? \"\"} onValueChange={(s) => onSelectedChange?.([s])}>\n                  {inRuns(shown, (v) => (\n                    <Menu.RadioItem key={v.value} value={v.value} closeOnClick {...(v.icon ? { icon: v.icon } : {})}>\n                      <span className=\"inline-flex items-center gap-8\">\n                        {v.leading}\n                        {v.label}\n                      </span>\n                    </Menu.RadioItem>\n                  ))}\n                </Menu.RadioGroup>\n              )}\n            </Menu.Content>\n          )}\n        </Menu>\n      )}\n      {onRemove && (\n        <span className=\"flex items-center pr-4 divider-l pl-4\">\n          <button\n            type=\"button\"\n            aria-label={\n              typeof property === \"string\" ? t(\"filterChip.removeNamed\", \"Remove the {property} filter\", { property }) : t(\"filterChip.remove\", \"Remove filter\")\n            }\n            onClick={onRemove}\n            className=\"relative inline-flex size-24 cursor-pointer items-center justify-center rounded-pill text-fg-tertiary transition-control hover:bg-fill-2 hover:text-fg focus-ring tap-target\"\n          >\n            <Icon icon={__icon_Cancel01Icon} size=\"xs\" />\n          </button>\n        </span>\n      )}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") FilterChip.displayName = \"FilterChip\";\n"],"mappings":"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"}
+{"version":3,"file":"filter-chip.js","names":["__icon_Cancel01Icon","cn","useUiText","useLocale","Icon","Menu","CommandList","PickerPopover","KAESO_FILTER_CHIP_VARIANTS","KAESO_FILTER_CHIP_DEFAULT_VARIANTS","SEARCH_ABOVE","LIST_ABOVE","inRuns","values","v","item","runs","last","r","i","choiceGroups","groups","key","group","textOf","SEG","VALUE","FilterChip","givenGroups","forceSearch","force","t","locale","choices","n","g","open","setOwnOpen","useState","defaultValuesOpen","setOpen","o","onValuesOpenChange","query","setQuery","search","useRef","searchable","long","useMemo","q","shown","useEffect","timer","property","className","propertyIcon","operators","operator","onOperatorChange","width","onRemove","value","selected","multiple","onSelectedChange","s","c","Cancel01Icon"],"sources":["../../src/components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { forwardRef, useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { Icon, type IconData } from \"../icon/icon.js\";\nimport { Cancel01Icon as __icon_Cancel01Icon } from \"@hugeicons/core-free-icons\";\nimport { Menu } from \"../menu/menu.js\";\nimport { CommandList, type CommandListGroup } from \"../command-list/command-list.js\";\nimport { PickerPopover, type PickerPopoverProps } from \"../command-list/picker-popover.js\";\nimport { useLocale, useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_FILTER_CHIP_VARIANTS = {\n  size: {\n    sm: { classes: \"h-32 text-body\" },\n  },\n} as const;\nexport const KAESO_FILTER_CHIP_DEFAULT_VARIANTS = { size: \"sm\" } as const;\n\nexport interface FilterChipChoice {\n  value: string;\n  label: ReactNode;\n  icon?: IconData | undefined;\n  leading?: ReactNode | undefined;\n  textValue?: string | undefined;\n  group?: string | undefined;\n}\n\nconst SEARCH_ABOVE = 8;\nconst LIST_ABOVE = 50;\n\nfunction inRuns(values: FilterChipChoice[], item: (v: FilterChipChoice) => ReactNode): ReactNode {\n  if (!values.some((v) => v.group)) return values.map(item);\n  const runs: { group: string | undefined; values: FilterChipChoice[] }[] = [];\n  for (const v of values) {\n    const last = runs[runs.length - 1];\n    if (last && last.group === v.group) last.values.push(v);\n    else runs.push({ group: v.group, values: [v] });\n  }\n  return runs.map((r, i) => (\n    <Menu.Group key={`${r.group ?? \"\"}:${i}`} label={r.group}>\n      {r.values.map(item)}\n    </Menu.Group>\n  ));\n}\n\nfunction choiceGroups(values: FilterChipChoice[]): CommandListGroup[] {\n  const groups = new Map<string, CommandListGroup>();\n  for (const v of values) {\n    const key = v.group ?? \"\";\n    const group = groups.get(key) ?? { id: key || \"values\", ...(key ? { label: key } : {}), items: [] };\n    group.items.push({\n      value: v.value,\n      label: textOf(v),\n      keywords: [v.value],\n      ...(v.leading || v.icon ? { leading: v.leading ?? (v.icon ? <Icon icon={v.icon} size=\"sm\" className=\"text-fg-secondary\" /> : undefined) } : {}),\n      ...(typeof v.label === \"string\" ? {} : { render: () => <span className=\"min-w-0 flex-1 truncate\">{v.label}</span> }),\n    });\n    groups.set(key, group);\n  }\n  return [...groups.values()];\n}\n\nexport interface FilterChipProps {\n  property: ReactNode;\n  propertyIcon?: IconData | undefined;\n  operator: string;\n  operators?: string[] | undefined;\n  onOperatorChange?: ((operator: string) => void) | undefined;\n  value: ReactNode;\n  values?: FilterChipChoice[] | undefined;\n  groups?: CommandListGroup[] | undefined;\n  searchable?: boolean | undefined;\n  width?: PickerPopoverProps[\"width\"] | undefined;\n  selected?: string[] | undefined;\n  multiple?: boolean | undefined;\n  onSelectedChange?: ((selected: string[]) => void) | undefined;\n  onRemove?: (() => void) | undefined;\n  defaultValuesOpen?: boolean | undefined;\n  onValuesOpenChange?: ((open: boolean) => void) | undefined;\n  className?: string | undefined;\n  \"data-force\"?: string | undefined;\n}\n\nconst textOf = (v: FilterChipChoice) => v.textValue ?? (typeof v.label === \"string\" || typeof v.label === \"number\" ? String(v.label) : v.value);\n\nconst SEG =\n  \"relative inline-flex h-full min-w-0 cursor-pointer items-center gap-6 px-10 font-medium whitespace-nowrap transition-control tap-target disabled:cursor-default hover:bg-raised-hover active:bg-raised-pressed open:bg-raised-pressed focus-ring-segment\";\nconst VALUE = \"min-w-0 max-w-240 truncate\";\n\nexport const FilterChip = /* @__PURE__ */ forwardRef<HTMLDivElement, FilterChipProps>(function FilterChip(\n  {\n    property,\n    propertyIcon,\n    operator,\n    operators,\n    onOperatorChange,\n    value,\n    values,\n    groups: givenGroups,\n    searchable: forceSearch,\n    width,\n    selected = [],\n    multiple,\n    onSelectedChange,\n    onRemove,\n    defaultValuesOpen,\n    onValuesOpenChange,\n    className,\n    \"data-force\": force,\n  },\n  ref,\n) {\n  const t = useUiText();\n  const locale = useLocale();\n  const choices = givenGroups ? givenGroups.reduce((n, g) => n + g.items.length, 0) : (values?.length ?? 0);\n  const [open, setOwnOpen] = useState(!!defaultValuesOpen && choices > 0);\n  const setOpen = (o: boolean) => {\n    setOwnOpen(o);\n    onValuesOpenChange?.(o);\n  };\n  const [query, setQuery] = useState(\"\");\n  const search = useRef<HTMLInputElement | null>(null);\n  const searchable = !!forceSearch || choices > SEARCH_ABOVE;\n  const long = !!givenGroups || choices > LIST_ABOVE;\n  const groups = useMemo(() => givenGroups ?? (long && values ? choiceGroups(values) : []), [givenGroups, long, values]);\n  const q = query.trim().toLowerCase();\n  const shown = searchable && q ? (values ?? []).filter((v) => textOf(v).toLowerCase().includes(q) || v.value.toLowerCase().includes(q)) : (values ?? []);\n  useEffect(() => {\n    if (!open || !searchable || long) return;\n    const timer = setTimeout(() => search.current?.focus(), 0);\n    return () => clearTimeout(timer);\n  }, [open, searchable, long]);\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-label={typeof property === \"string\" ? t(\"filterChip.filterNamed\", \"Filter: {property}\", { property }) : t(\"filterChip.filter\", \"Filter\")}\n      className={cn(\n        \"group/fc inline-flex max-w-full shrink-0 items-stretch overflow-hidden rounded-pill bg-raised text-fg ring-over\",\n        KAESO_FILTER_CHIP_VARIANTS.size.sm.classes,\n        className,\n      )}\n    >\n      <span className={cn(SEG, \"shrink-0 cursor-default pl-12 text-fg-secondary hover:bg-transparent active:bg-transparent\")}>\n        {propertyIcon && <Icon icon={propertyIcon} size=\"sm\" />}\n        {property}\n      </span>\n      {!operators?.length ? (\n        <span className={cn(SEG, \"shrink-0 cursor-default text-fg-secondary divider-l hover:bg-transparent active:bg-transparent\")}>{operator}</span>\n      ) : (\n        <Menu>\n          <Menu.Trigger>\n            <button type=\"button\" className={cn(SEG, \"shrink-0 text-fg-secondary divider-l\")}>\n              {operator}\n            </button>\n          </Menu.Trigger>\n          {operators && (\n            <Menu.Content>\n              <Menu.RadioGroup value={operator} onValueChange={(v) => onOperatorChange?.(v)}>\n                {operators.map((o) => (\n                  <Menu.RadioItem key={o} value={o}>\n                    {o}\n                  </Menu.RadioItem>\n                ))}\n              </Menu.RadioGroup>\n            </Menu.Content>\n          )}\n        </Menu>\n      )}\n      {long && (givenGroups || values) ? (\n        <PickerPopover\n          title={typeof property === \"string\" ? property : t(\"filterChip.filter\", \"Filter\")}\n          open={open}\n          onOpenChange={setOpen}\n          {...(width ? { width } : {})}\n          trigger={\n            <button type=\"button\" {...(force ? { \"data-force\": force } : {})} className={cn(SEG, \"divider-l\", !onRemove && \"pr-12\")}>\n              <span className={VALUE}>{value}</span>\n            </button>\n          }\n        >\n          <CommandList\n            groups={groups}\n            aria-label={typeof property === \"string\" ? property : t(\"filterChip.filter\", \"Filter\")}\n            value={selected}\n            {...(multiple ? { multiple: true } : {})}\n            autoFocus\n            placeholder={\n              typeof property === \"string\"\n                ? t(\"filterChip.searchNamedValues\", \"Search {property} values\", { property: locale === \"en\" ? property.toLowerCase() : property })\n                : t(\"filterChip.searchValues\", \"Search values\")\n            }\n            emptyText={t(\"filterChip.noMatches\", \"No values match\")}\n            onSelect={(v) => {\n              if (multiple) onSelectedChange?.(selected.includes(v) ? selected.filter((s) => s !== v) : [...selected, v]);\n              else {\n                onSelectedChange?.([v]);\n                setOpen(false);\n              }\n            }}\n          />\n        </PickerPopover>\n      ) : (\n        <Menu\n          open={open}\n          onOpenChange={(o) => {\n            setOpen(o);\n            if (!o) setQuery(\"\");\n          }}\n        >\n          <Menu.Trigger>\n            <button type=\"button\" {...(force ? { \"data-force\": force } : {})} className={cn(SEG, \"divider-l\", !onRemove && \"pr-12\")} disabled={choices === 0}>\n              <span className={VALUE}>{value}</span>\n            </button>\n          </Menu.Trigger>\n          {values && (\n            <Menu.Content\n              {...(searchable ? { className: \"w-280\" } : {})}\n              {...(searchable\n                ? {\n                    header: (\n                      <input\n                        ref={search}\n                        type=\"search\"\n                        aria-label={\n                          typeof property === \"string\"\n                            ? t(\"filterChip.searchNamedValues\", \"Search {property} values\", { property: locale === \"en\" ? property.toLowerCase() : property })\n                            : t(\"filterChip.searchValues\", \"Search values\")\n                        }\n                        placeholder={t(\"filterChip.search\", \"Search\")}\n                        autoComplete=\"off\"\n                        value={query}\n                        onChange={(e) => setQuery(e.target.value)}\n                        onKeyDown={(e) => {\n                          if (![\"ArrowDown\", \"ArrowUp\", \"Escape\", \"Tab\", \"Enter\"].includes(e.key)) e.stopPropagation();\n                        }}\n                        className=\"h-28 w-full bg-transparent text-body text-fg outline-none placeholder:text-fg-tertiary coarse:h-36\"\n                      />\n                    ),\n                    ...(shown.length === 0 ? { footer: t(\"filterChip.noMatches\", \"No values match\") } : {}),\n                  }\n                : {})}\n            >\n              {multiple ? (\n                inRuns(shown, (v) => (\n                  <Menu.CheckboxItem\n                    key={v.value}\n                    checked={selected.includes(v.value)}\n                    onCheckedChange={(c) => onSelectedChange?.(c ? [...selected, v.value] : selected.filter((s) => s !== v.value))}\n                    {...(v.icon ? { icon: v.icon } : {})}\n                  >\n                    <span className=\"inline-flex items-center gap-8\">\n                      {v.leading}\n                      {v.label}\n                    </span>\n                  </Menu.CheckboxItem>\n                ))\n              ) : (\n                <Menu.RadioGroup value={selected[0] ?? \"\"} onValueChange={(s) => onSelectedChange?.([s])}>\n                  {inRuns(shown, (v) => (\n                    <Menu.RadioItem key={v.value} value={v.value} closeOnClick {...(v.icon ? { icon: v.icon } : {})}>\n                      <span className=\"inline-flex items-center gap-8\">\n                        {v.leading}\n                        {v.label}\n                      </span>\n                    </Menu.RadioItem>\n                  ))}\n                </Menu.RadioGroup>\n              )}\n            </Menu.Content>\n          )}\n        </Menu>\n      )}\n      {onRemove && (\n        <span className=\"flex shrink-0 items-center pr-4 divider-l pl-4\">\n          <button\n            type=\"button\"\n            aria-label={\n              typeof property === \"string\" ? t(\"filterChip.removeNamed\", \"Remove the {property} filter\", { property }) : t(\"filterChip.remove\", \"Remove filter\")\n            }\n            onClick={onRemove}\n            className=\"relative inline-flex size-24 cursor-pointer items-center justify-center rounded-pill text-fg-tertiary transition-control hover:bg-raised-hover hover:text-fg active:bg-raised-pressed focus-ring tap-target\"\n          >\n            <Icon icon={__icon_Cancel01Icon} size=\"xs\" />\n          </button>\n        </span>\n      )}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") FilterChip.displayName = \"FilterChip\";\n"],"mappings":"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"}

package/dist/components/filter-row.js

@@ -1,8 +1,8 @@
 "use client";
-import { t as e } from "../chunks/cn-Dj6sRgkF.js";
+import { t as e } from "../chunks/cn-BjnOAUrA.js";
 import { a as t } from "../chunks/inset-BUzyXLK4.js";
 import { i as n } from "../chunks/context-BELWW79w.js";
-import { t as r } from "../chunks/arrow-focus-BcySmwwU.js";
+import { t as r } from "../chunks/arrow-focus-B0KdRFX8.js";
 import { forwardRef as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/filter-row/filter-row.tsx
@@ -13,7 +13,7 @@ var s = { size: {
 	let m = t(), h = n(), g = u ?? (m ? "inset" : "md");
 	return /* @__PURE__ */ o("div", {
 		ref: p,
-		className: e("flex min-w-0 shrink-0 flex-wrap items-center justify-between gap-x-16 gap-y-8", s.size[g].classes, d),
+		className: e("flex min-w-0 shrink-0 flex-wrap items-center justify-between gap-x-16 gap-y-12", s.size[g].classes, d),
 		...f,
 		children: [i && /* @__PURE__ */ a("div", {
 			className: "flex max-w-full min-w-0",
@@ -23,7 +23,7 @@ var s = { size: {
 			"aria-label": l ?? h("filterRow.filters", "Filters"),
 			"aria-orientation": "horizontal",
 			className: "flex max-w-full min-w-0 flex-wrap items-center gap-8",
-			onKeyDown: (e) => r(e),
+			onKeyDown: (e) => r(e, { byItem: !0 }),
 			children: c
 		})]
 	});

package/dist/components/filter-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-row.js","names":["cn","useInset","useUiText","arrowFocus","KAESO_FILTER_ROW_VARIANTS","KAESO_FILTER_ROW_DEFAULT_VARIANTS","FilterRow","sizeProp","props","inset","t","size","className","tabs","children","filtersLabel"],"sources":["../../src/components/filter-row/filter-row.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type KeyboardEvent, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { useInset } from \"../../utils/inset.js\";\nimport { arrowFocus } from \"../../utils/arrow-focus.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_FILTER_ROW_VARIANTS = {\n  size: {\n    md: { classes: \"px-24 py-8\" },\n    inset: {\n      classes: \"pt-16 pb-16\",\n    },\n  },\n} as const;\nexport const KAESO_FILTER_ROW_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport interface FilterRowProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  tabs?: ReactNode | undefined;\n  children?: ReactNode | undefined;\n  filtersLabel?: string | undefined;\n  size?: keyof typeof KAESO_FILTER_ROW_VARIANTS.size | undefined;\n}\n\nexport const FilterRow = /* @__PURE__ */ forwardRef<HTMLDivElement, FilterRowProps>(function FilterRow(\n  { tabs, children, filtersLabel, size: sizeProp, className, ...props },\n  ref,\n) {\n  const inset = useInset();\n  const t = useUiText();\n  const size = sizeProp ?? (inset ? \"inset\" : \"md\");\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex min-w-0 shrink-0 flex-wrap items-center justify-between gap-x-16 gap-y-8\", KAESO_FILTER_ROW_VARIANTS.size[size].classes, className)}\n      {...props}\n    >\n      {tabs && <div className=\"flex max-w-full min-w-0\">{tabs}</div>}\n      {children && (\n        <div\n          role=\"toolbar\"\n          aria-label={filtersLabel ?? t(\"filterRow.filters\", \"Filters\")}\n          aria-orientation=\"horizontal\"\n          className=\"flex max-w-full min-w-0 flex-wrap items-center gap-8\"\n          onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => arrowFocus(e)}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") FilterRow.displayName = \"FilterRow\";\n"],"mappings":";;;;;;;;AAMA,IAAaI,IAA4B,EACvC,MAAM;CACJ,IAAI,EAAE,SAAS,aAAa;CAC5B,OAAO,EACL,SAAS,cACX;AACF,EACF,GACaC,IAAoC,EAAE,MAAM,KAAK,GASjDC,IAA4B,kBAA2C,SAClF,EAAE,SAAM,aAAU,iBAAc,MAAMC,GAAU,cAAW,GAAGC,KAC9D,GACA;CACA,IAAMC,IAAQR,EAAS,GACjBS,IAAIR,EAAU,GACdS,IAAOJ,MAAaE,IAAQ,UAAU;CAC5C,OACE,kBAAC,OAAD;EACO;EACL,WAAWT,EAAG,iFAAiFI,EAA0B,KAAKO,EAAK,CAAC,SAASC,CAAS;EACtJ,GAAIJ;EAHN,UAAA,CAKGK,KAAQ,kBAAC,OAAD;GAAK,WAAU;GAA2B,UAAAA;EAAU,CAAA,GAC5DC,KACC,kBAAC,OAAD;GACE,MAAK;GACL,cAAYC,KAAgBL,EAAE,qBAAqB,SAAS;GAC5D,oBAAiB;GACjB,WAAU;GACV,YAAY,MAAqCP,EAAW,CAAC;GAE5D;EACE,CAAA,CAEJ;;AAET,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAU,cAAc"}
+{"version":3,"file":"filter-row.js","names":["cn","useInset","useUiText","arrowFocus","KAESO_FILTER_ROW_VARIANTS","KAESO_FILTER_ROW_DEFAULT_VARIANTS","FilterRow","sizeProp","props","inset","t","size","className","tabs","children","filtersLabel"],"sources":["../../src/components/filter-row/filter-row.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type KeyboardEvent, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { useInset } from \"../../utils/inset.js\";\nimport { arrowFocus } from \"../../utils/arrow-focus.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_FILTER_ROW_VARIANTS = {\n  size: {\n    md: { classes: \"px-24 py-8\" },\n    inset: {\n      classes: \"pt-16 pb-16\",\n    },\n  },\n} as const;\nexport const KAESO_FILTER_ROW_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport interface FilterRowProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  tabs?: ReactNode | undefined;\n  children?: ReactNode | undefined;\n  filtersLabel?: string | undefined;\n  size?: keyof typeof KAESO_FILTER_ROW_VARIANTS.size | undefined;\n}\n\nexport const FilterRow = /* @__PURE__ */ forwardRef<HTMLDivElement, FilterRowProps>(function FilterRow(\n  { tabs, children, filtersLabel, size: sizeProp, className, ...props },\n  ref,\n) {\n  const inset = useInset();\n  const t = useUiText();\n  const size = sizeProp ?? (inset ? \"inset\" : \"md\");\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex min-w-0 shrink-0 flex-wrap items-center justify-between gap-x-16 gap-y-12\", KAESO_FILTER_ROW_VARIANTS.size[size].classes, className)}\n      {...props}\n    >\n      {tabs && <div className=\"flex max-w-full min-w-0\">{tabs}</div>}\n      {children && (\n        <div\n          role=\"toolbar\"\n          aria-label={filtersLabel ?? t(\"filterRow.filters\", \"Filters\")}\n          aria-orientation=\"horizontal\"\n          className=\"flex max-w-full min-w-0 flex-wrap items-center gap-8\"\n          onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => arrowFocus(e, { byItem: true })}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") FilterRow.displayName = \"FilterRow\";\n"],"mappings":";;;;;;;;AAMA,IAAaI,IAA4B,EACvC,MAAM;CACJ,IAAI,EAAE,SAAS,aAAa;CAC5B,OAAO,EACL,SAAS,cACX;AACF,EACF,GACaC,IAAoC,EAAE,MAAM,KAAK,GASjDC,IAA4B,kBAA2C,SAClF,EAAE,SAAM,aAAU,iBAAc,MAAMC,GAAU,cAAW,GAAGC,KAC9D,GACA;CACA,IAAMC,IAAQR,EAAS,GACjBS,IAAIR,EAAU,GACdS,IAAOJ,MAAaE,IAAQ,UAAU;CAC5C,OACE,kBAAC,OAAD;EACO;EACL,WAAWT,EAAG,kFAAkFI,EAA0B,KAAKO,EAAK,CAAC,SAASC,CAAS;EACvJ,GAAIJ;EAHN,UAAA,CAKGK,KAAQ,kBAAC,OAAD;GAAK,WAAU;GAA2B,UAAAA;EAAU,CAAA,GAC5DC,KACC,kBAAC,OAAD;GACE,MAAK;GACL,cAAYC,KAAgBL,EAAE,qBAAqB,SAAS;GAC5D,oBAAiB;GACjB,WAAU;GACV,YAAY,MAAqCP,EAAW,GAAG,EAAE,QAAQ,GAAK,CAAC;GAE9E;EACE,CAAA,CAEJ;;AAET,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAU,cAAc"}