@logicplanes/kaeso-ui 0.2.1 → 0.3.0

package/dist/components/display-options.js

@@ -1,30 +1,30 @@
 "use client";
-import { t as e } from "../chunks/cn-CidVUKMm.js";
+import { t as e } from "../chunks/cn-DUDmdLpZ.js";
 import { t } from "../chunks/dev-CR1p7gCm.js";
-import { i as n } from "../chunks/context-BELWW79w.js";
-import { t as r } from "../chunks/icon-CeNQtobn.js";
-import { t as i } from "../chunks/icon-button-_x1RUphC.js";
-import { a } from "../chunks/tag-Dg89uYpV.js";
-import { r as o } from "../chunks/switch-XMY_CQE-.js";
-import { r as s } from "../chunks/segmented-MrinfDL8.js";
-import { r as c } from "../chunks/select-Bc4kRiSG.js";
-import { i as l } from "../chunks/popover-BE7VO-a4.js";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { SlidersHorizontalIcon as f } from "@hugeicons/core-free-icons";
+import { i as n, r } from "../chunks/context-BELWW79w.js";
+import { t as i } from "../chunks/icon-BqujXDUc.js";
+import { t as a } from "../chunks/icon-button-D4O4puwH.js";
+import { a as o } from "../chunks/tag-CwDKXVHj.js";
+import { r as s } from "../chunks/switch-CSKMEomo.js";
+import { r as c } from "../chunks/segmented-DXKVF-nY.js";
+import { r as l } from "../chunks/select-Bbv2f5F8.js";
+import { i as u } from "../chunks/popover-bjxg020P.js";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { SlidersHorizontalIcon as p, ViewOffSlashIcon as m } from "@hugeicons/core-free-icons";
 //#region src/components/display-options/display-options.tsx
-var p = { trigger: {
+var h = { trigger: {
 	secondary: { classes: "" },
 	ghost: { classes: "" }
-} }, m = { trigger: "secondary" };
-function h({ view: e, rows: t, toggles: i, properties: l, footer: f }) {
-	let p = n();
-	return /* @__PURE__ */ d("div", {
+} }, g = { trigger: "secondary" };
+function _({ view: e, rows: t, toggles: a, properties: u, footer: p }) {
+	let h = n(), g = r(), _ = u ? u.options.filter((e) => u.value.includes(e.value) && u.hidden?.includes(e.value)) : [];
+	return /* @__PURE__ */ f("div", {
 		className: "flex w-320 flex-col",
 		children: [
-			e && /* @__PURE__ */ u("div", {
+			e && /* @__PURE__ */ d("div", {
 				className: "p-12 pb-8",
-				children: /* @__PURE__ */ u(s, {
-					"aria-label": p("displayOptions.view", "View"),
+				children: /* @__PURE__ */ d(c, {
+					"aria-label": h("displayOptions.view", "View"),
 					options: e.options,
 					value: e.value,
 					onValueChange: e.onChange,
@@ -33,17 +33,17 @@ function h({ view: e, rows: t, toggles: i, properties: l, footer: f }) {
 					className: "bg-item-hover"
 				})
 			}),
-			t && t.length > 0 && /* @__PURE__ */ u("div", {
+			t && t.length > 0 && /* @__PURE__ */ d("div", {
 				className: "flex flex-col px-12 py-4",
-				children: t.map((e) => /* @__PURE__ */ d("div", {
+				children: t.map((e) => /* @__PURE__ */ f("div", {
 					className: "flex h-40 items-center justify-between gap-12",
-					children: [/* @__PURE__ */ d("span", {
+					children: [/* @__PURE__ */ f("span", {
 						className: "flex items-center gap-8 text-body text-fg-secondary",
-						children: [e.icon && /* @__PURE__ */ u(r, {
+						children: [e.icon && /* @__PURE__ */ d(i, {
 							icon: e.icon,
 							size: "sm"
 						}), e.label]
-					}), /* @__PURE__ */ u(c, {
+					}), /* @__PURE__ */ d(l, {
 						size: "sm",
 						appearance: "default",
 						"aria-label": e.label,
@@ -53,9 +53,9 @@ function h({ view: e, rows: t, toggles: i, properties: l, footer: f }) {
 					})]
 				}, e.label))
 			}),
-			i && i.length > 0 && /* @__PURE__ */ u("div", {
+			a && a.length > 0 && /* @__PURE__ */ d("div", {
 				className: "flex flex-col px-12 py-4 hairline-t",
-				children: i.map((e) => /* @__PURE__ */ u(o, {
+				children: a.map((e) => /* @__PURE__ */ d(s, {
 					size: "sm",
 					label: e.label,
 					checked: e.checked,
@@ -63,50 +63,64 @@ function h({ view: e, rows: t, toggles: i, properties: l, footer: f }) {
 					className: "h-40"
 				}, e.label))
 			}),
-			l && /* @__PURE__ */ d("div", {
+			u && /* @__PURE__ */ f("div", {
 				className: "flex flex-col gap-8 p-12 hairline-t",
-				children: [/* @__PURE__ */ u("span", {
-					className: "text-caption font-medium text-fg-secondary",
-					children: p("displayOptions.properties", "Display properties")
-				}), /* @__PURE__ */ u("div", {
-					className: "flex flex-wrap gap-6",
-					children: l.options.map((e) => {
-						let t = l.value.includes(e.value);
-						return /* @__PURE__ */ u(a, {
-							size: "sm",
-							variant: t ? "soft" : "outline",
-							pressed: t,
-							onClick: () => l.onChange(t ? l.value.filter((t) => t !== e.value) : [...l.value, e.value]),
-							children: e.label
-						}, e.value);
+				children: [
+					/* @__PURE__ */ d("span", {
+						className: "text-caption font-medium text-fg-secondary",
+						children: h("displayOptions.properties", "Display properties")
+					}),
+					/* @__PURE__ */ d("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__ */ d(o, {
+								size: "sm",
+								variant: t ? "soft" : "outline",
+								pressed: t,
+								...n ? {
+									icon: m,
+									"aria-description": h("displayOptions.doesNotFit", "Doesn't fit at this width")
+								} : {},
+								onClick: () => u.onChange(t ? u.value.filter((t) => t !== e.value) : [...u.value, e.value]),
+								children: e.label
+							}, e.value);
+						})
+					}),
+					_.length > 0 && /* @__PURE__ */ d("span", {
+						className: "text-caption text-fg-tertiary",
+						children: h("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))
+						})
 					})
-				})]
+				]
 			}),
-			f && /* @__PURE__ */ u("div", {
+			p && /* @__PURE__ */ d("div", {
 				className: "p-12 hairline-t",
-				children: f
+				children: p
 			})
 		]
 	});
 }
-function g({ trigger: r = "secondary", inline: a, ...o }) {
+function v({ trigger: r = "secondary", inline: i, ...o }) {
 	let s = 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."), a ? /* @__PURE__ */ u("div", {
+	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__ */ d("div", {
 		className: e("rounded-popover bg-raised shadow-raised"),
-		children: /* @__PURE__ */ u(h, { ...o })
-	}) : /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(l.Trigger, { children: /* @__PURE__ */ u(i, {
-		icon: f,
+		children: /* @__PURE__ */ d(_, { ...o })
+	}) : /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(u.Trigger, { children: /* @__PURE__ */ d(a, {
+		icon: p,
 		"aria-label": s("displayOptions.displayOptions", "Display options"),
 		variant: r
-	}) }), /* @__PURE__ */ u(l.Content, {
+	}) }), /* @__PURE__ */ d(u.Content, {
 		padding: "none",
 		align: "end",
 		"aria-label": s("displayOptions.displayOptions", "Display options"),
-		children: /* @__PURE__ */ u(h, { ...o })
+		children: /* @__PURE__ */ d(_, { ...o })
 	})] });
 }
-process.env.NODE_ENV !== "production" && (g.displayName = "DisplayOptions");
+process.env.NODE_ENV !== "production" && (v.displayName = "DisplayOptions");
 //#endregion
-export { g as DisplayOptions, m as KAESO_DISPLAY_OPTIONS_DEFAULT_VARIANTS, p as KAESO_DISPLAY_OPTIONS_VARIANTS };
+export { v as DisplayOptions, g as KAESO_DISPLAY_OPTIONS_DEFAULT_VARIANTS, h 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_SlidersHorizontalIcon","cn","useUiText","Icon","IconButton","Switch","Segmented","Select","Popover","KAESO_DISPLAY_OPTIONS_VARIANTS","KAESO_DISPLAY_OPTIONS_DEFAULT_VARIANTS","Panel","t","view","rows","r","toggles","toggle","properties","on","o","Tag","v","footer","DisplayOptions","props","devWarn","inline","SlidersHorizontalIcon","trigger"],"sources":["../../src/components/display-options/display-options.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { devWarn } from \"../../utils/dev.js\";\nimport { 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 { 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 } | 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  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              return (\n                <Tag\n                  key={o.value}\n                  size=\"sm\"\n                  variant={on ? \"soft\" : \"outline\"}\n                  pressed={on}\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        </div>\n      )}\n      {footer && <div className=\"p-12 hairline-t\">{footer}</div>}\n    </div>\n  );\n}\n\nexport function DisplayOptions({ trigger = \"secondary\", inline, ...props }: DisplayOptionsProps) {\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 className={cn(\"rounded-popover bg-raised shadow-raised\")}>\n        <Panel {...props} />\n      </div>\n    );\n  }\n  return (\n    <Popover>\n      <Popover.Trigger>\n        <IconButton icon={__icon_SlidersHorizontalIcon} aria-label={t(\"displayOptions.displayOptions\", \"Display options\")} variant={trigger} />\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","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 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 function DisplayOptions({ trigger = \"secondary\", inline, ...props }: DisplayOptionsProps) {\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 className={cn(\"rounded-popover bg-raised shadow-raised\")}>\n        <Panel {...props} />\n      </div>\n    );\n  }\n  return (\n    <Popover>\n      <Popover.Trigger>\n        <IconButton icon={__icon_SlidersHorizontalIcon} aria-label={t(\"displayOptions.displayOptions\", \"Display options\")} variant={trigger} />\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-DIbBpytW.js";
+export { t as Empty, n as KAESO_EMPTY_DEFAULT_VARIANTS, r as KAESO_EMPTY_VARIANTS } from "../chunks/empty-YXmSkKzR.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-d8V94bvZ.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-BZriODU7.js";

package/dist/components/filter-chip.js

@@ -1,66 +1,141 @@
 "use client";
-import { t as e } from "../chunks/cn-CidVUKMm.js";
+import { t as e } from "../chunks/cn-DUDmdLpZ.js";
 import { i as t, r as n } from "../chunks/context-BELWW79w.js";
-import { t as r } from "../chunks/icon-CeNQtobn.js";
-import { i } from "../chunks/menu-DyVPwgfF.js";
-import { forwardRef as a, useEffect as o, useRef as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Cancel01Icon as d } from "@hugeicons/core-free-icons";
+import { t as r } from "../chunks/icon-BqujXDUc.js";
+import { i } from "../chunks/menu-Bnfi9P3t.js";
+import { t as a } from "../chunks/command-list-D5k0uvkR.js";
+import { r as o } from "../chunks/picker-popover-C4ElNk7t.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 f = { size: { sm: { classes: "h-32 text-body" } } }, p = { size: "sm" }, m = 8, h = (e) => e.textValue ?? (typeof e.label == "string" || typeof e.label == "number" ? String(e.label) : e.value), g = "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", _ = /* @__PURE__ */ a(function({ property: a, propertyIcon: p, operator: _, operators: v, onOperatorChange: y, value: b, values: x, selected: S = [], multiple: C, onSelectedChange: w, onRemove: T, defaultValuesOpen: E, className: D, "data-force": O }, k) {
-	let A = t(), j = n(), [M, N] = c(!!E && !!x?.length), [P, F] = c(""), I = s(null), L = (x?.length ?? 0) > m, R = P.trim().toLowerCase(), z = L && R ? (x ?? []).filter((e) => h(e).toLowerCase().includes(R) || e.value.toLowerCase().includes(R)) : x ?? [];
-	return o(() => {
-		if (!M || !L) return;
-		let e = setTimeout(() => I.current?.focus(), 0);
+var h = { size: { sm: { classes: "h-32 text-body" } } }, g = { size: "sm" }, _ = 8, v = 50;
+function y(e, t) {
+	if (!e.some((e) => e.group)) return e.map(t);
+	let n = [];
+	for (let t of e) {
+		let e = n[n.length - 1];
+		e && e.group === t.group ? e.values.push(t) : n.push({
+			group: t.group,
+			values: [t]
+		});
+	}
+	return n.map((e, n) => /* @__PURE__ */ f(i.Group, {
+		label: e.group,
+		children: e.values.map(t)
+	}, `${e.group ?? ""}:${n}`));
+}
+function b(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) {
+		let e = n.group ?? "", i = t.get(e) ?? {
+			id: e || "values",
+			...e ? { label: e } : {},
+			items: []
+		};
+		i.items.push({
+			value: n.value,
+			label: x(n),
+			keywords: [n.value],
+			...n.leading || n.icon ? { leading: n.leading ?? (n.icon ? /* @__PURE__ */ f(r, {
+				icon: n.icon,
+				size: "sm",
+				className: "text-fg-secondary"
+			}) : void 0) } : {},
+			...typeof n.label == "string" ? {} : { render: () => /* @__PURE__ */ f("span", {
+				className: "min-w-0 flex-1 truncate",
+				children: n.label
+			}) }
+		}), t.set(e, i);
+	}
+	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) {
+	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) : []), [
+		O,
+		X,
+		D
+	]), Q = K.trim().toLowerCase(), $ = Y && Q ? (D ?? []).filter((e) => x(e).toLowerCase().includes(Q) || e.value.toLowerCase().includes(Q)) : D ?? [];
+	return c(() => {
+		if (!U || !Y || X) return;
+		let e = setTimeout(() => J.current?.focus(), 0);
 		return () => clearTimeout(e);
-	}, [M, L]), /* @__PURE__ */ u("div", {
-		ref: k,
+	}, [
+		U,
+		Y,
+		X
+	]), /* @__PURE__ */ p("div", {
+		ref: z,
 		role: "group",
-		"aria-label": typeof a == "string" ? A("filterChip.filterNamed", "Filter: {property}", { property: a }) : A("filterChip.filter", "Filter"),
-		...O ? { "data-force": O } : {},
-		className: e("group/fc inline-flex shrink-0 items-stretch overflow-hidden rounded-pill bg-raised text-fg ring-over", f.size.sm.classes, D),
+		"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),
 		children: [
-			/* @__PURE__ */ u("span", {
-				className: e(g, "cursor-default pl-12 text-fg-secondary hover:bg-transparent active:bg-transparent"),
-				children: [p && /* @__PURE__ */ l(r, {
-					icon: p,
+			/* @__PURE__ */ p("span", {
+				className: e(S, "cursor-default pl-12 text-fg-secondary hover:bg-transparent active:bg-transparent"),
+				children: [g && /* @__PURE__ */ f(r, {
+					icon: g,
 					size: "sm"
-				}), a]
+				}), s]
 			}),
-			/* @__PURE__ */ u(i, { children: [/* @__PURE__ */ l(i.Trigger, { children: /* @__PURE__ */ l("button", {
+			/* @__PURE__ */ p(i, { children: [/* @__PURE__ */ f(i.Trigger, { children: /* @__PURE__ */ f("button", {
 				type: "button",
-				className: e(g, "text-fg-secondary divider-l"),
-				disabled: !v?.length,
-				children: _
-			}) }), v && /* @__PURE__ */ l(i.Content, { children: /* @__PURE__ */ l(i.RadioGroup, {
-				value: _,
-				onValueChange: (e) => y?.(e),
-				children: v.map((e) => /* @__PURE__ */ l(i.RadioItem, {
+				className: e(S, "text-fg-secondary divider-l"),
+				disabled: !w?.length,
+				children: C
+			}) }), w && /* @__PURE__ */ f(i.Content, { children: /* @__PURE__ */ f(i.RadioGroup, {
+				value: C,
+				onValueChange: (e) => T?.(e),
+				children: w.map((e) => /* @__PURE__ */ f(i.RadioItem, {
 					value: e,
 					children: e
 				}, e))
 			}) })] }),
-			/* @__PURE__ */ u(i, {
-				open: M,
+			X && (O || D) ? /* @__PURE__ */ f(o, {
+				title: typeof s == "string" ? s : B("filterChip.filter", "Filter"),
+				open: U,
+				onOpenChange: G,
+				...A ? { width: A } : {},
+				trigger: /* @__PURE__ */ f("button", {
+					type: "button",
+					className: e(S, "divider-l", !P && "pr-12"),
+					children: E
+				}),
+				children: /* @__PURE__ */ f(a, {
+					groups: Z,
+					"aria-label": typeof s == "string" ? s : B("filterChip.filter", "Filter"),
+					value: j,
+					...M ? { multiple: !0 } : {},
+					autoFocus: !0,
+					placeholder: typeof s == "string" ? B("filterChip.searchNamedValues", "Search {property} values", { property: V === "en" ? s.toLowerCase() : s }) : B("filterChip.searchValues", "Search values"),
+					emptyText: B("filterChip.noMatches", "No values match"),
+					onSelect: (e) => {
+						M ? N?.(j.includes(e) ? j.filter((t) => t !== e) : [...j, e]) : (N?.([e]), G(!1));
+					}
+				})
+			}) : /* @__PURE__ */ p(i, {
+				open: U,
 				onOpenChange: (e) => {
-					N(e), e || F("");
+					G(e), e || q("");
 				},
-				children: [/* @__PURE__ */ l(i.Trigger, { children: /* @__PURE__ */ l("button", {
+				children: [/* @__PURE__ */ f(i.Trigger, { children: /* @__PURE__ */ f("button", {
 					type: "button",
-					className: e(g, "divider-l", !T && "pr-12"),
-					disabled: !x?.length,
-					children: b
-				}) }), x && /* @__PURE__ */ l(i.Content, {
-					...L ? { className: "w-280" } : {},
-					...L ? {
-						header: /* @__PURE__ */ l("input", {
-							ref: I,
+					className: e(S, "divider-l", !P && "pr-12"),
+					disabled: H === 0,
+					children: E
+				}) }), D && /* @__PURE__ */ f(i.Content, {
+					...Y ? { className: "w-280" } : {},
+					...Y ? {
+						header: /* @__PURE__ */ f("input", {
+							ref: J,
 							type: "search",
-							"aria-label": typeof a == "string" ? A("filterChip.searchNamedValues", "Search {property} values", { property: j === "en" ? a.toLowerCase() : a }) : A("filterChip.searchValues", "Search values"),
-							placeholder: A("filterChip.search", "Search"),
+							"aria-label": typeof s == "string" ? B("filterChip.searchNamedValues", "Search {property} values", { property: V === "en" ? s.toLowerCase() : s }) : B("filterChip.searchValues", "Search values"),
+							placeholder: B("filterChip.search", "Search"),
 							autoComplete: "off",
-							value: P,
-							onChange: (e) => F(e.target.value),
+							value: K,
+							onChange: (e) => q(e.target.value),
 							onKeyDown: (e) => {
 								[
 									"ArrowDown",
@@ -72,24 +147,24 @@ var f = { size: { sm: { classes: "h-32 text-body" } } }, p = { size: "sm" }, m =
 							},
 							className: "h-28 w-full bg-transparent text-body text-fg outline-none placeholder:text-fg-tertiary coarse:h-36"
 						}),
-						...z.length === 0 ? { footer: A("filterChip.noMatches", "No values match") } : {}
+						...$.length === 0 ? { footer: B("filterChip.noMatches", "No values match") } : {}
 					} : {},
-					children: C ? z.map((e) => /* @__PURE__ */ l(i.CheckboxItem, {
-						checked: S.includes(e.value),
-						onCheckedChange: (t) => w?.(t ? [...S, e.value] : S.filter((t) => t !== e.value)),
+					children: M ? y($, (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 } : {},
-						children: /* @__PURE__ */ u("span", {
+						children: /* @__PURE__ */ p("span", {
 							className: "inline-flex items-center gap-8",
 							children: [e.leading, e.label]
 						})
-					}, e.value)) : /* @__PURE__ */ l(i.RadioGroup, {
-						value: S[0] ?? "",
-						onValueChange: (e) => w?.([e]),
-						children: z.map((e) => /* @__PURE__ */ l(i.RadioItem, {
+					}, e.value)) : /* @__PURE__ */ f(i.RadioGroup, {
+						value: j[0] ?? "",
+						onValueChange: (e) => N?.([e]),
+						children: y($, (e) => /* @__PURE__ */ f(i.RadioItem, {
 							value: e.value,
 							closeOnClick: !0,
 							...e.icon ? { icon: e.icon } : {},
-							children: /* @__PURE__ */ u("span", {
+							children: /* @__PURE__ */ p("span", {
 								className: "inline-flex items-center gap-8",
 								children: [e.leading, e.label]
 							})
@@ -97,15 +172,15 @@ var f = { size: { sm: { classes: "h-32 text-body" } } }, p = { size: "sm" }, m =
 					})
 				})]
 			}),
-			T && /* @__PURE__ */ l("span", {
+			P && /* @__PURE__ */ f("span", {
 				className: "flex items-center pr-4 divider-l pl-4",
-				children: /* @__PURE__ */ l("button", {
+				children: /* @__PURE__ */ f("button", {
 					type: "button",
-					"aria-label": typeof a == "string" ? A("filterChip.removeNamed", "Remove the {property} filter", { property: a }) : A("filterChip.remove", "Remove filter"),
-					onClick: T,
+					"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",
-					children: /* @__PURE__ */ l(r, {
-						icon: d,
+					children: /* @__PURE__ */ f(r, {
+						icon: m,
 						size: "xs"
 					})
 				})
@@ -113,8 +188,8 @@ var f = { size: { sm: { classes: "h-32 text-body" } } }, p = { size: "sm" }, m =
 		]
 	});
 });
-process.env.NODE_ENV !== "production" && (_.displayName = "FilterChip");
+process.env.NODE_ENV !== "production" && (C.displayName = "FilterChip");
 //#endregion
-export { _ as FilterChip, p as KAESO_FILTER_CHIP_DEFAULT_VARIANTS, f as KAESO_FILTER_CHIP_VARIANTS };
+export { C as FilterChip, g as KAESO_FILTER_CHIP_DEFAULT_VARIANTS, h as KAESO_FILTER_CHIP_VARIANTS };
 
 //# sourceMappingURL=filter-chip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.js","names":["__icon_Cancel01Icon","cn","useUiText","useLocale","Icon","KAESO_FILTER_CHIP_VARIANTS","KAESO_FILTER_CHIP_DEFAULT_VARIANTS","SEARCH_ABOVE","textOf","v","SEG","FilterChip","force","t","locale","open","setOpen","useState","defaultValuesOpen","values","query","setQuery","search","useRef","searchable","q","shown","useEffect","timer","property","className","propertyIcon","Menu","operators","operator","onOperatorChange","o","onRemove","value","multiple","selected","onSelectedChange","c","s","Cancel01Icon"],"sources":["../../src/components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { forwardRef, useEffect, 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 { 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}\n\nconst SEARCH_ABOVE = 8;\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  selected?: string[] | undefined;\n  multiple?: boolean | undefined;\n  onSelectedChange?: ((selected: string[]) => void) | undefined;\n  onRemove?: (() => void) | undefined;\n  defaultValuesOpen?: boolean | 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    selected = [],\n    multiple,\n    onSelectedChange,\n    onRemove,\n    defaultValuesOpen,\n    className,\n    \"data-force\": force,\n  },\n  ref,\n) {\n  const t = useUiText();\n  const locale = useLocale();\n  const [open, setOpen] = useState(!!defaultValuesOpen && !!values?.length);\n  const [query, setQuery] = useState(\"\");\n  const search = useRef<HTMLInputElement | null>(null);\n  const searchable = (values?.length ?? 0) > SEARCH_ABOVE;\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) return;\n    const timer = setTimeout(() => search.current?.focus(), 0);\n    return () => clearTimeout(timer);\n  }, [open, searchable]);\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      <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={!values?.length}>\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              shown.map((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                {shown.map((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      {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","CommandList","PickerPopover","KAESO_FILTER_CHIP_VARIANTS","KAESO_FILTER_CHIP_DEFAULT_VARIANTS","SEARCH_ABOVE","LIST_ABOVE","inRuns","values","v","item","runs","last","Menu","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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"}

package/dist/components/filter-row.js

@@ -1,6 +1,6 @@
 "use client";
-import { t as e } from "../chunks/cn-CidVUKMm.js";
-import { n as t } from "../chunks/inset-BLMdxX4I.js";
+import { t as e } from "../chunks/cn-DUDmdLpZ.js";
+import { i as t } from "../chunks/inset-BnBj8NJV.js";
 import { i as n } from "../chunks/context-BELWW79w.js";
 import { t as r } from "../chunks/arrow-focus-BcySmwwU.js";
 import { forwardRef as i } from "react";

package/dist/components/flow.js

@@ -1,7 +1,7 @@
 "use client";
-import { t as e } from "../chunks/cn-CidVUKMm.js";
+import { t as e } from "../chunks/cn-DUDmdLpZ.js";
 import { i as t } from "../chunks/context-BELWW79w.js";
-import { t as n } from "../chunks/icon-CeNQtobn.js";
+import { t as n } from "../chunks/icon-BqujXDUc.js";
 import { t as r } from "../chunks/observe-resize-DhxhmoyB.js";
 import { forwardRef as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";

package/dist/components/heading.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as e } from "../chunks/cn-CidVUKMm.js";
+import { t as e } from "../chunks/cn-DUDmdLpZ.js";
 import { forwardRef as t } from "react";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/components/heading/heading.tsx

package/dist/components/icon-button.js

@@ -1,2 +1,2 @@
 "use client";
-export { t as IconButton, n as KAESO_ICON_BUTTON_DEFAULT_VARIANTS, r as KAESO_ICON_BUTTON_VARIANTS } from "../chunks/icon-button-_x1RUphC.js";
+export { t as IconButton, n as KAESO_ICON_BUTTON_DEFAULT_VARIANTS, r as KAESO_ICON_BUTTON_VARIANTS } from "../chunks/icon-button-D4O4puwH.js";

package/dist/components/icon.js

@@ -1,4 +1,4 @@
 "use client";
-import { n as e, r as t, t as n } from "../chunks/icon-CeNQtobn.js";
+import { n as e, r as t, t as n } from "../chunks/icon-BqujXDUc.js";
 import { t as r } from "../chunks/icon-CBzvyEqC.js";
 export { n as Icon, e as KAESO_ICON_DEFAULT_VARIANTS, t as KAESO_ICON_VARIANTS, r as icons };