@logicplanes/kaeso-ui 0.1.0

package/dist/components/display-options.js

@@ -0,0 +1,112 @@
+"use client";
+import { t as e } from "../chunks/cn-CidVUKMm.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-Bw67oKtx.js";
+import { a } from "../chunks/tag-BsmQ1xPj.js";
+import { r as o } from "../chunks/switch-CztLhA8F.js";
+import { r as s } from "../chunks/segmented-CDTx2n29.js";
+import { r as c } from "../chunks/select-Ca3HGsN1.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";
+//#region src/components/display-options/display-options.tsx
+var p = { 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", {
+		className: "flex w-320 flex-col",
+		children: [
+			e && /* @__PURE__ */ u("div", {
+				className: "p-12 pb-8",
+				children: /* @__PURE__ */ u(s, {
+					"aria-label": p("displayOptions.view", "View"),
+					options: e.options,
+					value: e.value,
+					onValueChange: e.onChange,
+					fullWidth: !0,
+					size: "sm",
+					className: "bg-item-hover"
+				})
+			}),
+			t && t.length > 0 && /* @__PURE__ */ u("div", {
+				className: "flex flex-col px-12 py-4",
+				children: t.map((e) => /* @__PURE__ */ d("div", {
+					className: "flex h-40 items-center justify-between gap-12",
+					children: [/* @__PURE__ */ d("span", {
+						className: "flex items-center gap-8 text-body text-fg-secondary",
+						children: [e.icon && /* @__PURE__ */ u(r, {
+							icon: e.icon,
+							size: "sm"
+						}), e.label]
+					}), /* @__PURE__ */ u(c, {
+						size: "sm",
+						appearance: "default",
+						"aria-label": e.label,
+						options: e.options,
+						value: e.value,
+						onValueChange: e.onChange
+					})]
+				}, e.label))
+			}),
+			i && i.length > 0 && /* @__PURE__ */ u("div", {
+				className: "flex flex-col px-12 py-4 hairline-t",
+				children: i.map((e) => /* @__PURE__ */ u(o, {
+					size: "sm",
+					label: e.label,
+					checked: e.checked,
+					onCheckedChange: e.onChange,
+					className: "h-40"
+				}, e.label))
+			}),
+			l && /* @__PURE__ */ d("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);
+					})
+				})]
+			}),
+			f && /* @__PURE__ */ u("div", {
+				className: "p-12 hairline-t",
+				children: f
+			})
+		]
+	});
+}
+function g({ trigger: r = "secondary", inline: a, ...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", {
+		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,
+		"aria-label": s("displayOptions.displayOptions", "Display options"),
+		variant: r
+	}) }), /* @__PURE__ */ u(l.Content, {
+		padding: "none",
+		align: "end",
+		"aria-label": s("displayOptions.displayOptions", "Display options"),
+		children: /* @__PURE__ */ u(h, { ...o })
+	})] });
+}
+process.env.NODE_ENV !== "production" && (g.displayName = "DisplayOptions");
+//#endregion
+export { g as DisplayOptions, m as KAESO_DISPLAY_OPTIONS_DEFAULT_VARIANTS, p as KAESO_DISPLAY_OPTIONS_VARIANTS };
+
+//# sourceMappingURL=display-options.js.map

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

@@ -0,0 +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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"}

package/dist/components/empty.js

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

package/dist/components/field.js

@@ -0,0 +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";

package/dist/components/filter-chip.js

@@ -0,0 +1,120 @@
+"use client";
+import { t as e } from "../chunks/cn-CidVUKMm.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-OURWt_hD.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";
+//#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);
+		return () => clearTimeout(e);
+	}, [M, L]), /* @__PURE__ */ u("div", {
+		ref: k,
+		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),
+		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,
+					size: "sm"
+				}), a]
+			}),
+			/* @__PURE__ */ u(i, { children: [/* @__PURE__ */ l(i.Trigger, { children: /* @__PURE__ */ l("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, {
+					value: e,
+					children: e
+				}, e))
+			}) })] }),
+			/* @__PURE__ */ u(i, {
+				open: M,
+				onOpenChange: (e) => {
+					N(e), e || F("");
+				},
+				children: [/* @__PURE__ */ l(i.Trigger, { children: /* @__PURE__ */ l("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,
+							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"),
+							autoComplete: "off",
+							value: P,
+							onChange: (e) => F(e.target.value),
+							onKeyDown: (e) => {
+								[
+									"ArrowDown",
+									"ArrowUp",
+									"Escape",
+									"Tab",
+									"Enter"
+								].includes(e.key) || e.stopPropagation();
+							},
+							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") } : {}
+					} : {},
+					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)),
+						...e.icon ? { icon: e.icon } : {},
+						children: /* @__PURE__ */ u("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, {
+							value: e.value,
+							closeOnClick: !0,
+							...e.icon ? { icon: e.icon } : {},
+							children: /* @__PURE__ */ u("span", {
+								className: "inline-flex items-center gap-8",
+								children: [e.leading, e.label]
+							})
+						}, e.value))
+					})
+				})]
+			}),
+			T && /* @__PURE__ */ l("span", {
+				className: "flex items-center pr-4 divider-l pl-4",
+				children: /* @__PURE__ */ l("button", {
+					type: "button",
+					"aria-label": typeof a == "string" ? A("filterChip.removeNamed", "Remove the {property} filter", { property: a }) : A("filterChip.remove", "Remove filter"),
+					onClick: T,
+					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,
+						size: "xs"
+					})
+				})
+			})
+		]
+	});
+});
+process.env.NODE_ENV !== "production" && (_.displayName = "FilterChip");
+//#endregion
+export { _ as FilterChip, p as KAESO_FILTER_CHIP_DEFAULT_VARIANTS, f as KAESO_FILTER_CHIP_VARIANTS };
+
+//# sourceMappingURL=filter-chip.js.map

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

@@ -0,0 +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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"}

package/dist/components/filter-row.js

@@ -0,0 +1,35 @@
+"use client";
+import { t as e } from "../chunks/cn-CidVUKMm.js";
+import { n as t } from "../chunks/inset-BLMdxX4I.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";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/filter-row/filter-row.tsx
+var s = { size: {
+	md: { classes: "px-24 py-8" },
+	inset: { classes: "pt-16 pb-16" }
+} }, c = { size: "md" }, l = /* @__PURE__ */ i(function({ tabs: i, children: c, filtersLabel: l, size: u, className: d, ...f }, p) {
+	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),
+		...f,
+		children: [i && /* @__PURE__ */ a("div", {
+			className: "flex max-w-full min-w-0",
+			children: i
+		}), c && /* @__PURE__ */ a("div", {
+			role: "toolbar",
+			"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),
+			children: c
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (l.displayName = "FilterRow");
+//#endregion
+export { l as FilterRow, c as KAESO_FILTER_ROW_DEFAULT_VARIANTS, s as KAESO_FILTER_ROW_VARIANTS };
+
+//# sourceMappingURL=filter-row.js.map

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

@@ -0,0 +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"}

package/dist/components/flow.js

@@ -0,0 +1,111 @@
+"use client";
+import { t as e } from "../chunks/cn-CidVUKMm.js";
+import { i as t } from "../chunks/context-BELWW79w.js";
+import { t as n } from "../chunks/icon-CeNQtobn.js";
+import { forwardRef as r, useLayoutEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/flow/flow.tsx
+var l = { node: {
+	pill: { classes: "h-36 rounded-pill px-14" },
+	box: { classes: "min-h-56 rounded-well px-16 py-10" }
+} }, u = { node: "pill" }, d = /* @__PURE__ */ r(function({ columns: r, edges: u, node: d = "pill", animated: f = !1, className: p, "aria-label": m }, h) {
+	let g = t(), [_, v = ""] = g("flow.connection", "{from} to {to}").split("{from}"), [y, b = ""] = v.split("{to}"), x = new Map(r.flat().map((e) => [e.id, e.label])), S = u.filter(([e, t]) => x.has(e) && x.has(t)), C = a(null), [w, T] = o([]), [E, D] = o({
+		w: 0,
+		h: 0
+	});
+	return i(() => {
+		let e = C.current;
+		if (!e) return;
+		let t = () => {
+			let t = e.getBoundingClientRect(), n = (t) => e.querySelector(`[data-flow-node="${t}"]`)?.getBoundingClientRect();
+			D({
+				w: Math.round(t.width),
+				h: Math.round(t.height)
+			}), T(u.flatMap(([e, r]) => {
+				let i = n(e), a = n(r);
+				if (!i || !a) return [];
+				let o = Math.round(i.right - t.left), s = Math.round(i.top + i.height / 2 - t.top) + .5, c = Math.round(a.left - t.left), l = Math.round(a.top + a.height / 2 - t.top) + .5, u = Math.round((o + c) / 2), d = Math.min(12, Math.abs(l - s) / 2, (c - o) / 4);
+				if (Math.abs(l - s) < 1) return [{
+					key: `${e}-${r}`,
+					d: `M${o} ${s}H${c}`
+				}];
+				let f = l > s ? 1 : -1;
+				return [{
+					key: `${e}-${r}`,
+					d: `M${o} ${s}H${u - d}Q${u} ${s} ${u} ${s + f * d}V${l - f * d}Q${u} ${l} ${u + d} ${l}H${c}`
+				}];
+			}));
+		};
+		t();
+		let n = typeof ResizeObserver < "u" ? new ResizeObserver(t) : null;
+		return n?.observe(e), document.fonts?.ready.then(t), () => n?.disconnect();
+	}, [r, u]), /* @__PURE__ */ c("div", {
+		ref: (e) => {
+			C.current = e, typeof h == "function" ? h(e) : h && (h.current = e);
+		},
+		role: "figure",
+		"aria-label": m ?? g("flow.label", "Flow diagram"),
+		className: e("relative -m-4 inline-flex max-w-full-bleed-4 items-center gap-64 overflow-x-auto p-4 scrollbar-quiet", p),
+		children: [
+			/* @__PURE__ */ s("svg", {
+				"aria-hidden": !0,
+				className: "pointer-events-none absolute inset-0 overflow-visible",
+				width: E.w,
+				height: E.h,
+				children: w.map((e) => /* @__PURE__ */ c("g", { children: [/* @__PURE__ */ s("path", {
+					d: e.d,
+					fill: "none",
+					stroke: "var(--k-line-strong)",
+					strokeWidth: 1.5,
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				}), f && /* @__PURE__ */ s("circle", {
+					r: 2.5,
+					fill: "var(--k-text-secondary)",
+					children: /* @__PURE__ */ s("animateMotion", {
+						dur: "2.4s",
+						repeatCount: "indefinite",
+						path: e.d
+					})
+				})] }, e.key))
+			}),
+			r.map((t, r) => /* @__PURE__ */ s("div", {
+				className: "relative flex shrink-0 flex-col items-start gap-16",
+				children: t.map((t) => /* @__PURE__ */ c("div", {
+					"data-flow-node": t.id,
+					className: e("inline-flex items-center gap-8 bg-raised text-body font-medium text-fg", l.node[d].classes, t.emphasis ? "ring-step" : "shadow-control"),
+					children: [
+						t.leading,
+						t.icon && /* @__PURE__ */ s(n, {
+							icon: t.icon,
+							size: "sm",
+							className: "text-fg-secondary"
+						}),
+						/* @__PURE__ */ c("span", {
+							className: "flex flex-col whitespace-nowrap",
+							children: [/* @__PURE__ */ s("span", { children: t.label }), t.description && d === "box" && /* @__PURE__ */ s("span", {
+								className: "text-small font-regular text-fg-secondary",
+								children: t.description
+							})]
+						})
+					]
+				}, t.id))
+			}, r)),
+			S.length > 0 && /* @__PURE__ */ s("ul", {
+				className: "sr-only",
+				children: S.map(([e, t]) => /* @__PURE__ */ c("li", { children: [
+					_,
+					x.get(e),
+					y,
+					x.get(t),
+					b
+				] }, `${e}-${t}`))
+			})
+		]
+	});
+});
+process.env.NODE_ENV !== "production" && (d.displayName = "Flow");
+//#endregion
+export { d as Flow, u as KAESO_FLOW_DEFAULT_VARIANTS, l as KAESO_FLOW_VARIANTS };
+
+//# sourceMappingURL=flow.js.map

package/dist/components/flow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow.js","names":["cn","useUiText","Icon","KAESO_FLOW_VARIANTS","KAESO_FLOW_DEFAULT_VARIANTS","Flow","ariaLabel","t","beforeFrom","fromRest","beforeTo","afterTo","labels","columns","n","connections","edges","a","b","root","useRef","paths","setPaths","useState","size","setSize","useLayoutEffect","el","measure","box","pos","id","p","q","x1","y1","x2","y2","mx","r","dir","ro","ref","className","animated","col","node","ci"],"sources":["../../src/components/flow/flow.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { Icon, type IconData } from \"../icon/icon.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_FLOW_VARIANTS = {\n  node: {\n    pill: { classes: \"h-36 rounded-pill px-14\" },\n    box: { classes: \"min-h-56 rounded-well px-16 py-10\" },\n  },\n} as const;\nexport const KAESO_FLOW_DEFAULT_VARIANTS = { node: \"pill\" } as const;\n\nexport interface FlowNode {\n  id: string;\n  label: ReactNode;\n  description?: ReactNode | undefined;\n  icon?: IconData | undefined;\n  leading?: ReactNode | undefined;\n  emphasis?: boolean | undefined;\n}\n\nexport interface FlowProps {\n  columns: FlowNode[][];\n  edges: [string, string][];\n  node?: keyof typeof KAESO_FLOW_VARIANTS.node | undefined;\n  animated?: boolean | undefined;\n  \"aria-label\"?: string | undefined;\n  className?: string | undefined;\n}\n\ninterface Path {\n  d: string;\n  key: string;\n}\n\nexport const Flow = /* @__PURE__ */ forwardRef<HTMLDivElement, FlowProps>(function Flow(\n  { columns, edges, node = \"pill\", animated = false, className, \"aria-label\": ariaLabel },\n  ref,\n) {\n  const t = useUiText();\n  const [beforeFrom, fromRest = \"\"] = t(\"flow.connection\", \"{from} to {to}\").split(\"{from}\");\n  const [beforeTo, afterTo = \"\"] = fromRest.split(\"{to}\");\n  const labels = new Map(columns.flat().map((n) => [n.id, n.label]));\n  const connections = edges.filter(([a, b]) => labels.has(a) && labels.has(b));\n  const root = useRef<HTMLDivElement | null>(null);\n  const [paths, setPaths] = useState<Path[]>([]);\n  const [size, setSize] = useState({ w: 0, h: 0 });\n  useLayoutEffect(() => {\n    const el = root.current;\n    if (!el) return;\n    const measure = () => {\n      const box = el.getBoundingClientRect();\n      const pos = (id: string) => el.querySelector<HTMLElement>(`[data-flow-node=\"${id}\"]`)?.getBoundingClientRect();\n      setSize({ w: Math.round(box.width), h: Math.round(box.height) });\n      setPaths(\n        edges.flatMap(([a, b]) => {\n          const p = pos(a);\n          const q = pos(b);\n          if (!p || !q) return [];\n          const x1 = Math.round(p.right - box.left);\n          const y1 = Math.round(p.top + p.height / 2 - box.top) + 0.5;\n          const x2 = Math.round(q.left - box.left);\n          const y2 = Math.round(q.top + q.height / 2 - box.top) + 0.5;\n          const mx = Math.round((x1 + x2) / 2);\n          const r = Math.min(12, Math.abs(y2 - y1) / 2, (x2 - x1) / 4);\n          if (Math.abs(y2 - y1) < 1) return [{ key: `${a}-${b}`, d: `M${x1} ${y1}H${x2}` }];\n          const dir = y2 > y1 ? 1 : -1;\n          return [{ key: `${a}-${b}`, d: `M${x1} ${y1}H${mx - r}Q${mx} ${y1} ${mx} ${y1 + dir * r}V${y2 - dir * r}Q${mx} ${y2} ${mx + r} ${y2}H${x2}` }];\n        }),\n      );\n    };\n    measure();\n    const ro = typeof ResizeObserver !== \"undefined\" ? new ResizeObserver(measure) : null;\n    ro?.observe(el);\n    document.fonts?.ready.then(measure);\n    return () => ro?.disconnect();\n  }, [columns, edges]);\n  return (\n    <div\n      ref={(e) => {\n        root.current = e;\n        if (typeof ref === \"function\") ref(e);\n        else if (ref) ref.current = e;\n      }}\n      role=\"figure\"\n      aria-label={ariaLabel ?? t(\"flow.label\", \"Flow diagram\")}\n      className={cn(\"relative -m-4 inline-flex max-w-full-bleed-4 items-center gap-64 overflow-x-auto p-4 scrollbar-quiet\", className)}\n    >\n      <svg aria-hidden className=\"pointer-events-none absolute inset-0 overflow-visible\" width={size.w} height={size.h}>\n        {paths.map((p) => (\n          <g key={p.key}>\n            <path d={p.d} fill=\"none\" stroke=\"var(--k-line-strong)\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            {animated && (\n              <circle r={2.5} fill=\"var(--k-text-secondary)\">\n                <animateMotion dur=\"2.4s\" repeatCount=\"indefinite\" path={p.d} />\n              </circle>\n            )}\n          </g>\n        ))}\n      </svg>\n      {columns.map((col, ci) => (\n        <div key={ci} className=\"relative flex shrink-0 flex-col items-start gap-16\">\n          {col.map((n) => (\n            <div\n              key={n.id}\n              data-flow-node={n.id}\n              className={cn(\n                \"inline-flex items-center gap-8 bg-raised text-body font-medium text-fg\",\n                KAESO_FLOW_VARIANTS.node[node].classes,\n                n.emphasis ? \"ring-step\" : \"shadow-control\",\n              )}\n            >\n              {n.leading}\n              {n.icon && <Icon icon={n.icon} size=\"sm\" className=\"text-fg-secondary\" />}\n              <span className=\"flex flex-col whitespace-nowrap\">\n                <span>{n.label}</span>\n                {n.description && node === \"box\" && <span className=\"text-small font-regular text-fg-secondary\">{n.description}</span>}\n              </span>\n            </div>\n          ))}\n        </div>\n      ))}\n      {connections.length > 0 && (\n        <ul className=\"sr-only\">\n          {connections.map(([a, b]) => (\n            <li key={`${a}-${b}`}>\n              {beforeFrom}\n              {labels.get(a)}\n              {beforeTo}\n              {labels.get(b)}\n              {afterTo}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Flow.displayName = \"Flow\";\n"],"mappings":"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"}

package/dist/components/heading.js

@@ -0,0 +1,28 @@
+"use client";
+import { t as e } from "../chunks/cn-CidVUKMm.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/heading/heading.tsx
+var r = { size: {
+	"title-sm": { classes: "text-title-sm font-semibold" },
+	title: { classes: "text-title font-semibold" },
+	"title-lg": { classes: "text-title-lg font-semibold" },
+	display: { classes: "text-display font-semibold" }
+} }, i = { size: "title-sm" }, a = {
+	display: 1,
+	"title-lg": 1,
+	title: 2,
+	"title-sm": 2
+}, o = /* @__PURE__ */ t(function({ size: t = i.size, level: o, balance: s = !0, className: c, ...l }, u) {
+	let d = `h${o ?? a[t]}`;
+	return /* @__PURE__ */ n(d, {
+		ref: u,
+		className: e("text-fg", r.size[t].classes, s && "text-balance", c),
+		...l
+	});
+});
+process.env.NODE_ENV !== "production" && (o.displayName = "Heading");
+//#endregion
+export { o as Heading, i as KAESO_HEADING_DEFAULT_VARIANTS, r as KAESO_HEADING_VARIANTS };
+
+//# sourceMappingURL=heading.js.map

package/dist/components/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","names":["cn","KAESO_HEADING_VARIANTS","KAESO_HEADING_DEFAULT_VARIANTS","DEFAULT_LEVEL","Heading","props","Tag","level","size","balance","className"],"sources":["../../src/components/heading/heading.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport const KAESO_HEADING_VARIANTS = {\n  size: {\n    \"title-sm\": { classes: \"text-title-sm font-semibold\" },\n    title: { classes: \"text-title font-semibold\" },\n    \"title-lg\": { classes: \"text-title-lg font-semibold\" },\n    display: { classes: \"text-display font-semibold\" },\n  },\n} as const;\nexport const KAESO_HEADING_DEFAULT_VARIANTS = { size: \"title-sm\" } as const;\n\nconst DEFAULT_LEVEL: Record<keyof typeof KAESO_HEADING_VARIANTS.size, 1 | 2 | 3> = {\n  display: 1,\n  \"title-lg\": 1,\n  title: 2,\n  \"title-sm\": 2,\n};\n\nexport interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {\n  size?: keyof typeof KAESO_HEADING_VARIANTS.size | undefined;\n  level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;\n  balance?: boolean | undefined;\n}\n\nexport const Heading = /* @__PURE__ */ forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(\n  { size = KAESO_HEADING_DEFAULT_VARIANTS.size, level, balance = true, className, ...props },\n  ref,\n) {\n  const Tag = `h${level ?? DEFAULT_LEVEL[size]}` as \"h1\";\n  return <Tag ref={ref} className={cn(\"text-fg\", KAESO_HEADING_VARIANTS.size[size].classes, balance && \"text-balance\", className)} {...props} />;\n});\nif (process.env.NODE_ENV !== \"production\") Heading.displayName = \"Heading\";\n"],"mappings":";;;;;AAGA,IAAaC,IAAyB,EACpC,MAAM;CACJ,YAAY,EAAE,SAAS,8BAA8B;CACrD,OAAO,EAAE,SAAS,2BAA2B;CAC7C,YAAY,EAAE,SAAS,8BAA8B;CACrD,SAAS,EAAE,SAAS,6BAA6B;AACnD,EACF,GACaC,IAAiC,EAAE,MAAM,WAAW,GAE3DC,IAA6E;CACjF,SAAS;CACT,YAAY;CACZ,OAAO;CACP,YAAY;AACd,GAQaC,IAA0B,kBAA6C,SAClF,EAAE,UAAOF,EAA+B,MAAM,UAAO,aAAU,IAAM,cAAW,GAAGG,KACnF,GACA;CACA,IAAMC,IAAM,IAAIC,KAASJ,EAAcK;CACvC,OAAO,kBAACF,GAAD;EAAU;EAAK,WAAWN,EAAG,WAAWC,EAAuB,KAAKO,EAAK,CAAC,SAASC,KAAW,gBAAgBC,CAAS;EAAG,GAAIL;CAAQ,CAAA;AAC/I,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAQ,cAAc"}

package/dist/components/icon-button.js

@@ -0,0 +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-Bw67oKtx.js";

package/dist/components/icon.js

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