@logicplanes/kaeso-ui 0.1.0

package/dist/components/sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.js","names":["BaseDialog","__icon_Cancel01Icon","_Fragment","cn","usePortalContainer","InsetContent","useUiText","IconButton","useRestoreFocus","Fragment$1","KAESO_SHEET_VARIANTS","KAESO_SHEET_DEFAULT_VARIANTS","Frame","Title","inline","Dialog","t","close","Cancel01Icon","onOpenChange","title","subtitle","actions","footer","Sheet","props","box","side","size","focus","open","modal","container","defaultOpen","o","trigger"],"sources":["../../src/components/sheet/sheet.tsx"],"sourcesContent":["import { InsetContent } from \"../../utils/inset.js\";\nimport { usePortalContainer } from \"../../utils/portal-context.js\";\nimport { forwardRef, type ReactElement, type ReactNode } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { cn } from \"../../utils/cn.js\";\nimport { useRestoreFocus } from \"../../utils/restore-focus.js\";\nimport { Cancel01Icon as __icon_Cancel01Icon } from \"@hugeicons/core-free-icons\";\nimport { IconButton } from \"../icon-button/icon-button.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_SHEET_VARIANTS = {\n  size: {\n    sm: { classes: \"w-480\" },\n    md: { classes: \"w-640\" },\n    lg: { classes: \"w-800\" },\n  },\n  side: {\n    right: { classes: \"top-8 right-8 bottom-8 sheet-limits-x\" },\n    left: { classes: \"top-8 bottom-8 left-8 sheet-limits-x\" },\n    bottom: { classes: \"right-8 bottom-8 left-8 sheet-limits-y\" },\n  },\n} as const;\nexport const KAESO_SHEET_DEFAULT_VARIANTS = { size: \"sm\", side: \"right\" } as const;\n\nexport interface SheetProps {\n  open?: boolean | undefined;\n  defaultOpen?: boolean | undefined;\n  onOpenChange?: ((open: boolean) => void) | undefined;\n  trigger?: ReactElement | undefined;\n  title: ReactNode;\n  subtitle?: ReactNode | undefined;\n  actions?: ReactNode | undefined;\n  size?: keyof typeof KAESO_SHEET_VARIANTS.size | undefined;\n  side?: keyof typeof KAESO_SHEET_VARIANTS.side | undefined;\n  modal?: boolean | undefined;\n  children: ReactNode;\n  footer?: ReactNode | undefined;\n  inline?: boolean | undefined;\n}\n\nfunction Frame({ title, subtitle, actions, children, footer, inline, onOpenChange }: SheetProps) {\n  const Title = inline ? \"h2\" : BaseDialog.Title;\n  const t = useUiText();\n  const close = (\n    <IconButton\n      icon={__icon_Cancel01Icon}\n      aria-label={t(\"sheet.close\", \"Close\")}\n      tooltip={false}\n      {...(inline && onOpenChange ? { onClick: () => onOpenChange(false) } : {})}\n    />\n  );\n  return (\n    <>\n      <div className=\"flex h-60 shrink-0 items-center gap-12 pr-12 pl-24 hairline-b\">\n        <div className=\"flex min-w-0 flex-1 flex-col\">\n          <Title className=\"truncate text-title-sm font-semibold text-fg\">{title}</Title>\n          {subtitle && <span className=\"truncate mono text-small text-fg-secondary\">{subtitle}</span>}\n        </div>\n        {actions}\n        {inline ? close : <BaseDialog.Close render={close} />}\n      </div>\n      <div className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain px-24 py-20 scrollbar-quiet\">{children}</div>\n      {footer && <div className=\"flex shrink-0 flex-wrap items-center justify-end gap-8 px-24 py-16 hairline-t\">{footer}</div>}\n    </>\n  );\n}\n\nexport const Sheet = /* @__PURE__ */ forwardRef<HTMLDivElement, SheetProps>(function Sheet(props, ref) {\n  const { open, defaultOpen, onOpenChange, trigger, size = \"sm\", side = \"right\", modal = true, inline } = props;\n  const box = cn(\n    \"flex flex-col overflow-hidden rounded-sheet bg-raised text-fg shadow-dialog outline-none\",\n    side !== \"bottom\" && KAESO_SHEET_VARIANTS.size[size].classes,\n  );\n  const focus = useRestoreFocus(open, () => modal);\n  const container = usePortalContainer();\n  if (inline)\n    return (\n      <div ref={ref} className={cn(box, \"h-560\")}>\n        <Frame {...props} />\n      </div>\n    );\n  return (\n    <BaseDialog.Root\n      {...(open !== undefined ? { open } : {})}\n      {...(defaultOpen !== undefined ? { defaultOpen } : {})}\n      {...(onOpenChange ? { onOpenChange: (o: boolean) => onOpenChange(o) } : {})}\n      modal={modal}\n    >\n      {trigger && <BaseDialog.Trigger render={trigger} />}\n      <BaseDialog.Portal container={container}>\n        {modal && <BaseDialog.Backdrop className=\"fixed inset-0 z-40 bg-overlay opacity-50 backdrop-motion\" />}\n        <BaseDialog.Popup\n          ref={ref}\n          data-side={side}\n          initialFocus={focus.initialFocus}\n          finalFocus={focus.finalFocus}\n          className={cn(\"fixed z-40 sheet-motion\", box, KAESO_SHEET_VARIANTS.side[side].classes, !modal && side !== \"bottom\" && \"sheet-inspector\")}\n        >\n          <InsetContent inset={false}>\n            <Frame {...props} />\n          </InsetContent>\n        </BaseDialog.Popup>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Sheet.displayName = \"Sheet\";\n"],"mappings":";;;;;;;;;;;;AAUA,IAAaU,IAAuB;CAClC,MAAM;EACJ,IAAI,EAAE,SAAS,QAAQ;EACvB,IAAI,EAAE,SAAS,QAAQ;EACvB,IAAI,EAAE,SAAS,QAAQ;CACzB;CACA,MAAM;EACJ,OAAO,EAAE,SAAS,wCAAwC;EAC1D,MAAM,EAAE,SAAS,uCAAuC;EACxD,QAAQ,EAAE,SAAS,yCAAyC;CAC9D;AACF,GACaC,IAA+B;CAAE,MAAM;CAAM,MAAM;AAAQ;AAkBxE,SAASC,EAAM,EAAE,UAAO,aAAU,YAAS,aAAU,WAAQ,WAAQ,mBAA4B;CAC/F,IAAMC,IAAQC,IAAS,OAAOd,EAAW,OACnCgB,IAAIV,EAAU,GACdW,IACJ,kBAACV,GAAD;EACE,MAAMN;EACN,cAAYe,EAAE,eAAe,OAAO;EACpC,SAAS;EACT,GAAKF,KAAUK,IAAe,EAAE,eAAeA,EAAa,EAAK,EAAE,IAAI,CAAC;CACzE,CAAA;CAEH,OACE,kBAAAjB,GAAA,EAAA,UAAA;EACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAACW,GAAD;MAAO,WAAU;MAAgD,UAAAO;KAAa,CAAA,GAC7EC,KAAY,kBAAC,QAAD;MAAM,WAAU;MAA8C,UAAAA;KAAe,CAAA,CACvF;;IACJC;IACAR,IAASG,IAAQ,kBAACjB,EAAW,OAAZ,EAAkB,QAAQiB,EAAQ,CAAA;GACjD;;EACL,kBAAC,OAAD;GAAK,WAAU;GAAiF;EAAc,CAAA;EAC7GM,KAAU,kBAAC,OAAD;GAAK,WAAU;GAAiF,UAAAA;EAAY,CAAA;CACvH,EAAA,CAAA;AAEN;AAEA,IAAaC,IAAwB,kBAAuC,SAAe,GAAO,GAAK;CACrG,IAAM,EAAE,SAAM,gBAAa,iBAAc,YAAS,UAAO,MAAM,UAAO,SAAS,WAAQ,IAAM,cAAWC,GAClGC,IAAMvB,EACV,4FACAwB,MAAS,YAAYjB,EAAqB,KAAKkB,EAAK,CAAC,OACvD,GACMC,IAAQrB,EAAgBsB,SAAYC,CAAK,GACzCC,IAAY5B,EAAmB;CAOrC,OANIU,IAEA,kBAAC,OAAD;EAAU;EAAK,WAAWX,EAAGuB,GAAK,OAAO;EACvC,UAAA,kBAACd,GAAD,EAAO,GAAIa,EAAQ,CAAA;CAChB,CAAA,IAGP,kBAACzB,EAAW,MAAZ;EACE,GAAK8B,MAAS,KAAA,IAAuB,CAAC,IAAZ,EAAE,QAAK;EACjC,GAAKG,MAAgB,KAAA,IAA8B,CAAC,IAAnB,EAAE,eAAY;EAC/C,GAAKd,IAAe,EAAE,eAAe,MAAeA,EAAae,CAAC,EAAE,IAAI,CAAC;EAClE;EAJT,UAAA,CAMGC,KAAW,kBAACnC,EAAW,SAAZ,EAAoB,QAAQmC,EAAU,CAAA,GAClD,kBAACnC,EAAW,QAAZ;GAA8B;GAA9B,UAAA,CACG+B,KAAS,kBAAC/B,EAAW,UAAZ,EAAqB,WAAU,2DAA4D,CAAA,GACrG,kBAACA,EAAW,OAAZ;IACO;IACL,aAAW2B;IACX,cAAcE,EAAM;IACpB,YAAYA,EAAM;IAClB,WAAW1B,EAAG,2BAA2BuB,GAAKhB,EAAqB,KAAKiB,EAAK,CAAC,SAAS,CAACI,KAASJ,MAAS,YAAY,iBAAiB;IAEvI,UAAA,kBAACtB,GAAD;KAAc,OAAO;KACnB,UAAA,kBAACO,GAAD,EAAO,GAAIa,EAAQ,CAAA;IACP,CAAA;GACE,CAAA,CACD;EACJ,CAAA,CAAA;;AAErB,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAM,cAAc"}

package/dist/components/sidebar.js

@@ -0,0 +1,2 @@
+"use client";
+export { t as BrandWordmark, n as KAESO_SIDEBAR_DEFAULT_VARIANTS, r as KAESO_SIDEBAR_VARIANTS, i as SIDEBAR_MAX, a as SIDEBAR_MIN, o as Sidebar, s as SidebarFloatingContext, c as SidebarSheetContext, l as useSidebar } from "../chunks/sidebar-C4fL_KMm.js";

package/dist/components/skeleton.js

@@ -0,0 +1,2 @@
+"use client";
+export { t as KAESO_SKELETON_DEFAULT_VARIANTS, n as KAESO_SKELETON_VARIANTS, r as Skeleton, i as SkeletonLine } from "../chunks/skeleton-kfuqdl1a.js";

package/dist/components/slider.js

@@ -0,0 +1,2 @@
+"use client";
+export { t as KAESO_SLIDER_DEFAULT_VARIANTS, n as KAESO_SLIDER_VARIANTS, r as Slider } from "../chunks/slider-DbhjJ3ML.js";

package/dist/components/stat.js

@@ -0,0 +1,195 @@
+"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/badge-Dkyhs0_j.js";
+import { Sparkline as i } from "./charts/sparkline.js";
+import { Children as a, cloneElement as o, createContext as s, forwardRef as c, isValidElement as l, useContext as u, useLayoutEffect as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/stat/stat.tsx
+var g = { size: {
+	md: { classes: "text-metric" },
+	sm: { classes: "text-title" }
+} }, _ = { size: "md" }, v = /* @__PURE__ */ c(function({ value: t, unit: n, delta: i, size: a = "md", className: o }, s) {
+	return /* @__PURE__ */ h("div", {
+		ref: s,
+		className: e("flex min-w-0 flex-wrap items-baseline gap-x-8 gap-y-4", o),
+		children: [
+			/* @__PURE__ */ m("span", {
+				className: e("font-semibold text-fg tabular", g.size[a].classes),
+				children: t
+			}),
+			n && /* @__PURE__ */ m("span", {
+				className: "text-body-lg font-regular text-fg-secondary",
+				children: n
+			}),
+			i && /* @__PURE__ */ m(r, {
+				tone: i.tone ?? "neutral",
+				className: "self-center",
+				children: i.label
+			})
+		]
+	});
+});
+process.env.NODE_ENV !== "production" && (v.displayName = "Stat");
+var y = /* @__PURE__ */ c(function({ children: t, className: n }, r) {
+	return /* @__PURE__ */ m("div", {
+		ref: r,
+		className: e("flex flex-wrap items-baseline gap-x-48 gap-y-16", n),
+		children: t
+	});
+});
+process.env.NODE_ENV !== "production" && (y.displayName = "MetricRow");
+var b = (e, t, n) => {
+	let r = Math.abs(e) * 100, i = r >= 10 || r === 0 ? 0 : 1, a = new Intl.NumberFormat(n === "en" ? "en-US" : n, {
+		minimumFractionDigits: i,
+		maximumFractionDigits: i,
+		useGrouping: !1
+	}).format(i ? Number(r.toFixed(1)) : Math.round(r));
+	return `${e > 0 ? "↑" : e < 0 ? "↓" : ""}${t("statTile.percent", "{value}%", { value: a })}`;
+}, x = [
+	{
+		classes: "text-title-lg",
+		px: 28
+	},
+	{
+		classes: "text-title",
+		px: 20
+	},
+	{
+		classes: "text-title-sm",
+		px: 17
+	}
+], S = /* @__PURE__ */ s(0), C = /* @__PURE__ */ c(function({ label: a, value: o, change: s, detail: c, trend: l, trendColor: d, className: f }, p) {
+	let g = t(), _ = n(), v = s && s.value !== 0 ? s.value > 0 == ((s.better ?? "up") === "up") : void 0, y = x[u(S)] ?? x[0];
+	return /* @__PURE__ */ h("div", {
+		ref: p,
+		role: "listitem",
+		className: e("flex min-w-0 flex-col bg-raised px-20 pt-16", l ? "pb-12" : "pb-16", f),
+		children: [
+			/* @__PURE__ */ m("span", {
+				className: "text-small font-medium text-fg-secondary",
+				children: a
+			}),
+			/* @__PURE__ */ m("span", {
+				className: "mt-6 flex h-34 min-w-0 items-center",
+				children: /* @__PURE__ */ m("span", {
+					"data-stat-value": y.px,
+					className: e("max-w-full truncate font-semibold text-fg tabular", y.classes),
+					children: o
+				})
+			}),
+			/* @__PURE__ */ h("span", {
+				className: "mt-2 flex min-h-20 min-w-0 flex-wrap items-center gap-x-6 gap-y-2 text-small text-fg-tertiary",
+				children: [s && Number.isFinite(s.value) && /* @__PURE__ */ m("span", {
+					className: "flex h-20 shrink-0 items-center",
+					children: /* @__PURE__ */ m(r, {
+						tone: v === void 0 ? "neutral" : v ? "success" : "danger",
+						className: "shrink-0 tabular",
+						children: b(s.value, g, _)
+					})
+				}), c && /* @__PURE__ */ m("span", {
+					className: "min-w-0",
+					children: c
+				})]
+			}),
+			l && /* @__PURE__ */ m("span", {
+				className: "mt-auto h-40 shrink-0 pt-8",
+				children: l.length > 1 && /* @__PURE__ */ m(i, {
+					values: l,
+					fluid: !0,
+					...d ? { color: d } : {},
+					"aria-label": typeof a == "string" ? g("statTile.trendPerDay", "{label} per day", { label: a }) : g("statTile.trend", "Trend")
+				})
+			})
+		]
+	});
+});
+process.env.NODE_ENV !== "production" && (C.displayName = "StatTile");
+var w = {
+	1: "grid-cols-1",
+	2: "grid-cols-2"
+}, T = {
+	3: "lg:grid-cols-3",
+	4: "lg:grid-cols-4"
+}, E = { 2: "col-span-2" }, D = {
+	1: "lg:col-span-1",
+	2: "lg:col-span-2",
+	3: "lg:col-span-3",
+	4: "lg:col-span-4"
+}, O = 40, k = 1, A = 1.03;
+function j(e, t) {
+	let n = e <= 2 ? Math.max(e, 1) : t ? Math.min(e, 4) : 2, r = e - 1;
+	return {
+		cols: n,
+		spans: Array.from({ length: e }, (n, i) => i !== r || e < 3 ? 1 : e === 3 ? t ? 1 : 2 : t ? {
+			1: 4,
+			2: 3,
+			3: 2
+		}[e % 4] ?? 1 : e % 2 == 1 ? 2 : 1)
+	};
+}
+var M = 160;
+function N(e, t, n) {
+	let r = x[0].px, i = ({ cols: n, spans: i }) => {
+		let a = (t - (n - 1) * k) / n, o = i.map((e) => a * e + (e - 1) * k - O);
+		return x.findIndex((t) => e.every((e, n) => e * t.px * A / r <= (o[n] ?? 0)));
+	}, a = j(e.length, n), o = a.cols > 2 && (t - (a.cols - 1) * k) / a.cols < M, s = i(o ? j(e.length, !1) : a);
+	if (s >= 0 || e.length < 2) return {
+		step: Math.max(s, 0),
+		single: !1,
+		two: o
+	};
+	let c = i({
+		cols: 1,
+		spans: e.map(() => 1)
+	});
+	return {
+		step: c >= 0 ? c : x.length - 1,
+		single: !0,
+		two: !1
+	};
+}
+var P = /* @__PURE__ */ c(function({ children: t, className: n, ...r }, i) {
+	let s = a.toArray(t).filter(l), c = s.length, u = f(null), [h, g] = p({
+		step: 0,
+		single: !1,
+		two: !1
+	}), _ = f(() => {});
+	_.current = () => {
+		let e = u.current;
+		if (!e || !e.clientWidth) return;
+		let t = [...e.querySelectorAll("[data-stat-value]")].map((e) => e.scrollWidth * x[0].px / (Number(e.dataset.statValue) || x[0].px)), n = typeof window.matchMedia == "function" && window.matchMedia("(min-width: 1024px)").matches, r = N(t, e.clientWidth, n);
+		g((e) => e.step === r.step && e.single === r.single && e.two === r.two ? e : r);
+	}, d(() => _.current()), d(() => {
+		let e = u.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(() => _.current());
+		t.observe(e);
+		for (let n of e.querySelectorAll("[data-stat-value]")) t.observe(n);
+		return document.fonts?.ready.then(() => _.current()), () => t.disconnect();
+	}, [c]);
+	let v = j(c, !1), y = j(c, !0), b = (t) => {
+		let n = v.spans[t] ?? 1, r = y.spans[t] ?? 1;
+		return e(E[n], !h.two && r !== n && D[r]) || void 0;
+	};
+	return /* @__PURE__ */ m("div", {
+		ref: (e) => {
+			u.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
+		},
+		role: "list",
+		className: e("grid gap-1 overflow-hidden rounded-group bg-line-subtle shadow-xs", h.single ? "grid-cols-1" : h.two ? "grid-cols-2" : e(w[v.cols], y.cols !== v.cols && T[y.cols]), n),
+		...r,
+		children: /* @__PURE__ */ m(S.Provider, {
+			value: h.step,
+			children: s.map((t, n) => {
+				let r = h.single ? void 0 : b(n);
+				return r ? o(t, { className: e(t.props.className, r) }) : t;
+			})
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (P.displayName = "StatGrid");
+//#endregion
+export { _ as KAESO_STAT_DEFAULT_VARIANTS, g as KAESO_STAT_VARIANTS, y as MetricRow, x as STAT_VALUE_STEPS, v as Stat, P as StatGrid, C as StatTile, N as statGridFit, j as statGridLayout };
+
+//# sourceMappingURL=stat.js.map

package/dist/components/stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.js","names":["cn","useUiText","useLocale","Badge","KAESO_STAT_VARIANTS","KAESO_STAT_DEFAULT_VARIANTS","Stat","className","size","value","unit","delta","MetricRow","changeLabel","pct","v","digits","shown","locale","STAT_VALUE_STEPS","StatStepContext","StatTile","t","good","change","step","useContext","trend","label","detail","Sparkline","trendColor","GRID_COLS","LG_GRID_COLS","COL_SPAN","LG_COL_SPAN","TILE_PADDING","GAP","SLACK","statGridLayout","cols","n","wide","last","MIN_TILE","statGridFit","base","at","col","width","rooms","spans","s","needs","need","st","i","own","two","single","StatGrid","props","tiles","Children","children","isValidElement","grid","useRef","fit","setFit","useState","measure","el","next","f","useLayoutEffect","ro","narrow","span","small","large","ref","extra","cloneElement"],"sources":["../../src/components/stat/stat.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { Badge } from \"../badge/badge.js\";\nimport { Sparkline } from \"../charts/sparkline.js\";\nimport { useLocale, useUiText, type UiText } from \"../../i18n/context.js\";\n\nexport const KAESO_STAT_VARIANTS = {\n  size: {\n    md: { classes: \"text-metric\" },\n    sm: { classes: \"text-title\" },\n  },\n} as const;\nexport const KAESO_STAT_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport interface StatProps {\n  value: ReactNode;\n  unit?: ReactNode | undefined;\n  delta?: { label: string; tone?: \"success\" | \"danger\" | \"neutral\" | undefined } | undefined;\n  size?: keyof typeof KAESO_STAT_VARIANTS.size | undefined;\n  className?: string | undefined;\n}\n\nexport const Stat = /* @__PURE__ */ forwardRef<HTMLDivElement, StatProps>(function Stat({ value, unit, delta, size = \"md\", className }, ref) {\n  return (\n    <div ref={ref} className={cn(\"flex min-w-0 flex-wrap items-baseline gap-x-8 gap-y-4\", className)}>\n      <span className={cn(\"font-semibold text-fg tabular\", KAESO_STAT_VARIANTS.size[size].classes)}>{value}</span>\n      {unit && <span className=\"text-body-lg font-regular text-fg-secondary\">{unit}</span>}\n      {delta && (\n        <Badge tone={delta.tone ?? \"neutral\"} className=\"self-center\">\n          {delta.label}\n        </Badge>\n      )}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Stat.displayName = \"Stat\";\n\nexport const MetricRow = /* @__PURE__ */ forwardRef<HTMLDivElement, { children: ReactNode; className?: string | undefined }>(function MetricRow({ children, className }, ref) {\n  return (\n    <div ref={ref} className={cn(\"flex flex-wrap items-baseline gap-x-48 gap-y-16\", className)}>\n      {children}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") MetricRow.displayName = \"MetricRow\";\n\nexport interface StatTileProps {\n  label: ReactNode;\n  value: ReactNode;\n  change?: { value: number; better?: \"up\" | \"down\" | undefined } | undefined;\n  detail?: ReactNode | undefined;\n  trend?: number[] | undefined;\n  trendColor?: string | undefined;\n  className?: string | undefined;\n}\n\nconst changeLabel = (v: number, t: UiText, locale: string) => {\n  const pct = Math.abs(v) * 100;\n  const digits = pct >= 10 || pct === 0 ? 0 : 1;\n  const shown = new Intl.NumberFormat(locale === \"en\" ? \"en-US\" : locale, {\n    minimumFractionDigits: digits,\n    maximumFractionDigits: digits,\n    useGrouping: false,\n  }).format(digits ? Number(pct.toFixed(1)) : Math.round(pct));\n  return `${v > 0 ? \"↑\" : v < 0 ? \"↓\" : \"\"}${t(\"statTile.percent\", \"{value}%\", { value: shown })}`;\n};\n\nexport const STAT_VALUE_STEPS = [\n  { classes: \"text-title-lg\", px: 28 },\n  { classes: \"text-title\", px: 20 },\n  { classes: \"text-title-sm\", px: 17 },\n] as const;\n\nconst StatStepContext = /* @__PURE__ */ createContext(0);\n\nexport const StatTile = /* @__PURE__ */ forwardRef<HTMLDivElement, StatTileProps>(function StatTile({ label, value, change, detail, trend, trendColor, className }, ref) {\n  const t = useUiText();\n  const locale = useLocale();\n  const good = change && change.value !== 0 ? change.value > 0 === ((change.better ?? \"up\") === \"up\") : undefined;\n  const step = STAT_VALUE_STEPS[useContext(StatStepContext)] ?? STAT_VALUE_STEPS[0];\n  return (\n    <div ref={ref} role=\"listitem\" className={cn(\"flex min-w-0 flex-col bg-raised px-20 pt-16\", trend ? \"pb-12\" : \"pb-16\", className)}>\n      <span className=\"text-small font-medium text-fg-secondary\">{label}</span>\n      <span className=\"mt-6 flex h-34 min-w-0 items-center\">\n        <span data-stat-value={step.px} className={cn(\"max-w-full truncate font-semibold text-fg tabular\", step.classes)}>\n          {value}\n        </span>\n      </span>\n      <span className=\"mt-2 flex min-h-20 min-w-0 flex-wrap items-center gap-x-6 gap-y-2 text-small text-fg-tertiary\">\n        {change && Number.isFinite(change.value) && (\n          <span className=\"flex h-20 shrink-0 items-center\">\n            <Badge tone={good === undefined ? \"neutral\" : good ? \"success\" : \"danger\"} className=\"shrink-0 tabular\">\n              {changeLabel(change.value, t, locale)}\n            </Badge>\n          </span>\n        )}\n        {detail && <span className=\"min-w-0\">{detail}</span>}\n      </span>\n      {trend && (\n        <span className=\"mt-auto h-40 shrink-0 pt-8\">\n          {trend.length > 1 && (\n            <Sparkline\n              values={trend}\n              fluid\n              {...(trendColor ? { color: trendColor } : {})}\n              aria-label={typeof label === \"string\" ? t(\"statTile.trendPerDay\", \"{label} per day\", { label }) : t(\"statTile.trend\", \"Trend\")}\n            />\n          )}\n        </span>\n      )}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") StatTile.displayName = \"StatTile\";\n\nconst GRID_COLS: Record<number, string> = { 1: \"grid-cols-1\", 2: \"grid-cols-2\" };\nconst LG_GRID_COLS: Record<number, string> = { 3: \"lg:grid-cols-3\", 4: \"lg:grid-cols-4\" };\nconst COL_SPAN: Record<number, string> = { 2: \"col-span-2\" };\nconst LG_COL_SPAN: Record<number, string> = { 1: \"lg:col-span-1\", 2: \"lg:col-span-2\", 3: \"lg:col-span-3\", 4: \"lg:col-span-4\" };\n\nconst TILE_PADDING = 40;\nconst GAP = 1;\nconst SLACK = 1.03;\n\nexport function statGridLayout(n: number, wide: boolean): { cols: number; spans: number[] } {\n  const cols = n <= 2 ? Math.max(n, 1) : wide ? Math.min(n, 4) : 2;\n  const last = n - 1;\n  const spans = Array.from({ length: n }, (_, i) => {\n    if (i !== last || n < 3) return 1;\n    if (n === 3) return wide ? 1 : 2;\n    return wide ? ({ 1: 4, 2: 3, 3: 2 }[n % 4] ?? 1) : n % 2 === 1 ? 2 : 1;\n  });\n  return { cols, spans };\n}\n\nconst MIN_TILE = 160;\n\nexport function statGridFit(needs: number[], width: number, wide: boolean): { step: number; single: boolean; two: boolean } {\n  const base = STAT_VALUE_STEPS[0].px;\n  const at = ({ cols, spans }: { cols: number; spans: number[] }) => {\n    const col = (width - (cols - 1) * GAP) / cols;\n    const rooms = spans.map((s) => col * s + (s - 1) * GAP - TILE_PADDING);\n    return STAT_VALUE_STEPS.findIndex((st) => needs.every((need, i) => (need * st.px * SLACK) / base <= (rooms[i] ?? 0)));\n  };\n  const own = statGridLayout(needs.length, wide);\n  const two = own.cols > 2 && (width - (own.cols - 1) * GAP) / own.cols < MIN_TILE;\n  const step = at(two ? statGridLayout(needs.length, false) : own);\n  if (step >= 0 || needs.length < 2) return { step: Math.max(step, 0), single: false, two };\n  const single = at({ cols: 1, spans: needs.map(() => 1) });\n  return { step: single >= 0 ? single : STAT_VALUE_STEPS.length - 1, single: true, two: false };\n}\n\nexport const StatGrid = /* @__PURE__ */ forwardRef<HTMLDivElement, { children: ReactNode; \"aria-label\"?: string | undefined; className?: string | undefined }>(\n  function StatGrid({ children, className, ...props }, ref) {\n    const tiles = Children.toArray(children).filter(isValidElement) as ReactElement<{ className?: string | undefined }>[];\n    const n = tiles.length;\n    const grid = useRef<HTMLDivElement | null>(null);\n    const [fit, setFit] = useState({ step: 0, single: false, two: false });\n    const measure = useRef(() => {});\n    measure.current = () => {\n      const el = grid.current;\n      if (!el || !el.clientWidth) return;\n      const values = [...el.querySelectorAll<HTMLElement>(\"[data-stat-value]\")];\n      const needs = values.map((v) => (v.scrollWidth * STAT_VALUE_STEPS[0].px) / (Number(v.dataset.statValue) || STAT_VALUE_STEPS[0].px));\n      const wide = typeof window.matchMedia === \"function\" && window.matchMedia(\"(min-width: 1024px)\").matches;\n      const next = statGridFit(needs, el.clientWidth, wide);\n      setFit((f) => (f.step === next.step && f.single === next.single && f.two === next.two ? f : next));\n    };\n    useLayoutEffect(() => measure.current());\n    useLayoutEffect(() => {\n      const el = grid.current;\n      if (!el || typeof ResizeObserver === \"undefined\") return;\n      const ro = new ResizeObserver(() => measure.current());\n      ro.observe(el);\n      for (const v of el.querySelectorAll(\"[data-stat-value]\")) ro.observe(v);\n      void document.fonts?.ready.then(() => measure.current());\n      return () => ro.disconnect();\n    }, [n]);\n    const narrow = statGridLayout(n, false);\n    const wide = statGridLayout(n, true);\n    const span = (i: number) => {\n      const small = narrow.spans[i] ?? 1;\n      const large = wide.spans[i] ?? 1;\n      return cn(COL_SPAN[small], !fit.two && large !== small && LG_COL_SPAN[large]) || undefined;\n    };\n    return (\n      <div\n        ref={(e) => {\n          grid.current = e;\n          if (typeof ref === \"function\") ref(e);\n          else if (ref) ref.current = e;\n        }}\n        role=\"list\"\n        className={cn(\n          \"grid gap-1 overflow-hidden rounded-group bg-line-subtle shadow-xs\",\n          fit.single ? \"grid-cols-1\" : fit.two ? \"grid-cols-2\" : cn(GRID_COLS[narrow.cols], wide.cols !== narrow.cols && LG_GRID_COLS[wide.cols]),\n          className,\n        )}\n        {...props}\n      >\n        <StatStepContext.Provider value={fit.step}>\n          {tiles.map((t, i) => {\n            const extra = fit.single ? undefined : span(i);\n            return extra ? cloneElement(t, { className: cn(t.props.className, extra) }) : t;\n          })}\n        </StatStepContext.Provider>\n      </div>\n    );\n  },\n);\nif (process.env.NODE_ENV !== \"production\") StatGrid.displayName = \"StatGrid\";\n"],"mappings":"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"}

package/dist/components/status-dot.js

@@ -0,0 +1,2 @@
+"use client";
+export { t as KAESO_STATUS_DOT_DEFAULT_VARIANTS, n as KAESO_STATUS_DOT_VARIANTS, r as Status, i as StatusDot } from "../chunks/status-dot-CBoQpyL4.js";

package/dist/components/surface.js

@@ -0,0 +1,26 @@
+"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/surface/surface.tsx
+var r = { kind: {
+	panel: { classes: "bg-panel rounded-panel shadow-panel" },
+	menu: { classes: "bg-raised rounded-menu shadow-raised" },
+	popover: { classes: "bg-raised rounded-popover shadow-raised" },
+	dialog: { classes: "bg-raised rounded-dialog shadow-dialog" },
+	sheet: { classes: "bg-raised rounded-sheet shadow-dialog" },
+	group: { classes: "bg-raised rounded-group shadow-xs" },
+	well: { classes: "bg-fill-1 rounded-well" },
+	tooltip: { classes: "bg-raised rounded-tooltip shadow-raised" }
+} }, i = { kind: "panel" }, a = /* @__PURE__ */ t(function({ kind: t, className: i, ...a }, o) {
+	return /* @__PURE__ */ n("div", {
+		ref: o,
+		className: e(r.kind[t].classes, i),
+		...a
+	});
+});
+process.env.NODE_ENV !== "production" && (a.displayName = "Surface");
+//#endregion
+export { i as KAESO_SURFACE_DEFAULT_VARIANTS, r as KAESO_SURFACE_VARIANTS, a as Surface };
+
+//# sourceMappingURL=surface.js.map

package/dist/components/surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.js","names":["cn","KAESO_SURFACE_VARIANTS","KAESO_SURFACE_DEFAULT_VARIANTS","Surface","props","kind","className"],"sources":["../../src/components/surface/surface.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport const KAESO_SURFACE_VARIANTS = {\n  kind: {\n    panel: { classes: \"bg-panel rounded-panel shadow-panel\" },\n    menu: { classes: \"bg-raised rounded-menu shadow-raised\" },\n    popover: { classes: \"bg-raised rounded-popover shadow-raised\" },\n    dialog: { classes: \"bg-raised rounded-dialog shadow-dialog\" },\n    sheet: { classes: \"bg-raised rounded-sheet shadow-dialog\" },\n    group: { classes: \"bg-raised rounded-group shadow-xs\" },\n    well: { classes: \"bg-fill-1 rounded-well\" },\n    tooltip: { classes: \"bg-raised rounded-tooltip shadow-raised\" },\n  },\n} as const;\nexport const KAESO_SURFACE_DEFAULT_VARIANTS = { kind: \"panel\" } as const;\n\nexport interface SurfaceProps extends HTMLAttributes<HTMLDivElement> {\n  kind: keyof typeof KAESO_SURFACE_VARIANTS.kind;\n}\n\nexport const Surface = /* @__PURE__ */ forwardRef<HTMLDivElement, SurfaceProps>(function Surface({ kind, className, ...props }, ref) {\n  return <div ref={ref} className={cn(KAESO_SURFACE_VARIANTS.kind[kind].classes, className)} {...props} />;\n});\nif (process.env.NODE_ENV !== \"production\") Surface.displayName = \"Surface\";\n"],"mappings":";;;;;AAGA,IAAaC,IAAyB,EACpC,MAAM;CACJ,OAAO,EAAE,SAAS,sCAAsC;CACxD,MAAM,EAAE,SAAS,uCAAuC;CACxD,SAAS,EAAE,SAAS,0CAA0C;CAC9D,QAAQ,EAAE,SAAS,yCAAyC;CAC5D,OAAO,EAAE,SAAS,wCAAwC;CAC1D,OAAO,EAAE,SAAS,oCAAoC;CACtD,MAAM,EAAE,SAAS,yBAAyB;CAC1C,SAAS,EAAE,SAAS,0CAA0C;AAChE,EACF,GACaC,IAAiC,EAAE,MAAM,QAAQ,GAMjDC,IAA0B,kBAAyC,SAAiB,EAAE,SAAM,cAAW,GAAGC,KAAS,GAAK;CACnI,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWJ,EAAGC,EAAuB,KAAKI,EAAK,CAAC,SAASC,CAAS;EAAG,GAAIF;CAAQ,CAAA;AACzG,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAQ,cAAc"}

package/dist/components/swap-text.js

@@ -0,0 +1,2 @@
+"use client";
+export { t as KAESO_SWAP_TEXT_DEFAULT_VARIANTS, n as KAESO_SWAP_TEXT_VARIANTS, r as SwapText } from "../chunks/swap-text-BhPI8DOf.js";

package/dist/components/switch.js

@@ -0,0 +1,2 @@
+"use client";
+export { t as KAESO_SWITCH_DEFAULT_VARIANTS, n as KAESO_SWITCH_VARIANTS, r as Switch } from "../chunks/switch-CztLhA8F.js";

package/dist/components/table.js

@@ -0,0 +1,2 @@
+"use client";
+export { t as KAESO_TABLE_DEFAULT_VARIANTS, n as KAESO_TABLE_VARIANTS, r as Table } from "../chunks/table-DYKa86af.js";

package/dist/components/tabs.js

@@ -0,0 +1,96 @@
+"use client";
+import { t as e } from "../chunks/cn-CidVUKMm.js";
+import { n as t } from "../chunks/inset-BLMdxX4I.js";
+import { t as n } from "../chunks/icon-CeNQtobn.js";
+import { createContext as r, forwardRef as i, useContext as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Tabs as l } from "@base-ui/react/tabs";
+//#region src/components/tabs/tabs.tsx
+var u = { variant: {
+	underline: { classes: "" },
+	pill: { classes: "" }
+} }, d = { variant: "underline" }, f = /* @__PURE__ */ r("underline");
+function p(t, n) {
+	let r = /* @__PURE__ */ i(function({ value: n, defaultValue: r, onValueChange: i, variant: a = t, className: o, children: c }, u) {
+		return /* @__PURE__ */ s(f.Provider, {
+			value: a,
+			children: /* @__PURE__ */ s(l.Root, {
+				ref: u,
+				...n === void 0 ? {} : { value: n },
+				...r === void 0 ? {} : { defaultValue: r },
+				...i ? { onValueChange: (e) => i(String(e)) } : {},
+				className: e("flex min-w-0 flex-col", o),
+				children: c
+			})
+		});
+	});
+	return r.displayName = n, r;
+}
+var m = /* @__PURE__ */ i(function({ className: n, children: r, ...i }, o) {
+	let u = a(f), d = t();
+	return /* @__PURE__ */ c(l.List, {
+		ref: o,
+		className: e("relative flex min-w-0 items-center overflow-x-auto scrollbar-none", u === "underline" ? "-mx-12 gap-20 px-12 hairline-b-inset-12" : d ? "-my-4 -mr-4 -ml-16 gap-4 p-4" : "-m-4 gap-4 p-4", n),
+		...i,
+		children: [r, u === "underline" && /* @__PURE__ */ s(l.Indicator, { className: "absolute bottom-0 left-0 h-2 w-(--active-tab-width) translate-x-(--active-tab-left) rounded-pill bg-ink indicator-motion" })]
+	});
+});
+process.env.NODE_ENV !== "production" && (m.displayName = "Tabs.List");
+var h = /* @__PURE__ */ i(function({ value: t, children: r, icon: i, count: u, disabled: d, className: p, "data-force": m }, h) {
+	let g = a(f);
+	return /* @__PURE__ */ s(l.Tab, {
+		ref: h,
+		value: t,
+		...d ? { disabled: !0 } : {},
+		...m ? { "data-force": m } : {},
+		className: e("relative inline-flex shrink-0 cursor-pointer items-center gap-6 text-body font-medium whitespace-nowrap transition-control tap-target disabled:cursor-not-allowed disabled:text-fg-disabled", g === "underline" ? "group/tab h-40 text-fg-secondary outline-none hover:text-fg selected:text-fg" : "h-32 rounded-pill px-12 text-fg-secondary hover:bg-fill-1 hover:text-fg active:bg-fill-2 selected:bg-fill-2 selected:text-fg focus-ring", p),
+		children: g === "underline" ? /* @__PURE__ */ c("span", {
+			className: "-mx-8 inline-flex h-28 items-center gap-6 rounded-pill px-8 outline-2 outline-transparent group-focus-visible/tab:outline-focus",
+			children: [
+				i && /* @__PURE__ */ s(n, {
+					icon: i,
+					size: "sm"
+				}),
+				r,
+				u !== void 0 && /* @__PURE__ */ s("span", {
+					className: "text-body font-regular text-fg-secondary tabular",
+					children: u
+				})
+			]
+		}) : /* @__PURE__ */ c(o, { children: [
+			i && /* @__PURE__ */ s(n, {
+				icon: i,
+				size: "sm"
+			}),
+			r,
+			u !== void 0 && /* @__PURE__ */ s("span", {
+				className: "text-body font-regular text-fg-secondary tabular",
+				children: u
+			})
+		] })
+	});
+});
+process.env.NODE_ENV !== "production" && (h.displayName = "Tabs.Tab");
+var g = /* @__PURE__ */ i(function({ value: t, className: n, children: r, keepMounted: i }, a) {
+	return /* @__PURE__ */ s(l.Panel, {
+		ref: a,
+		value: t,
+		...i ? { keepMounted: i } : {},
+		className: e("outline-none focus-ring-inset", n),
+		children: r
+	});
+});
+process.env.NODE_ENV !== "production" && (g.displayName = "Tabs.Panel");
+var _ = /* @__PURE__ */ Object.assign(/* @__PURE__ */ p("underline", "Tabs"), {
+	List: m,
+	Tab: h,
+	Panel: g
+}), v = /* @__PURE__ */ Object.assign(/* @__PURE__ */ p("pill", "PillTabs"), {
+	List: m,
+	Tab: h,
+	Panel: g
+});
+//#endregion
+export { d as KAESO_TABS_DEFAULT_VARIANTS, u as KAESO_TABS_VARIANTS, v as PillTabs, _ as Tabs };
+
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":["BaseTabs","_Fragment","cn","useInset","Icon","Fragment$1","Tabs$1","KAESO_TABS_VARIANTS","KAESO_TABS_DEFAULT_VARIANTS","Ctx","makeRoot","Root","defaultVariant","variant","value","defaultValue","onValueChange","v","className","name","List","props","useContext","inset","children","Tab","force","disabled","icon","count","Panel","keepMounted","Tabs","PillTabs"],"sources":["../../src/components/tabs/tabs.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext, type ReactNode } from \"react\";\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport { cn } from \"../../utils/cn.js\";\nimport { Icon, type IconData } from \"../icon/icon.js\";\nimport { useInset } from \"../../utils/inset.js\";\n\nexport const KAESO_TABS_VARIANTS = {\n  variant: {\n    underline: { classes: \"\" },\n    pill: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_TABS_DEFAULT_VARIANTS = { variant: \"underline\" } as const;\ntype Variant = keyof typeof KAESO_TABS_VARIANTS.variant;\n\nconst Ctx = /* @__PURE__ */ createContext<Variant>(\"underline\");\n\nexport interface TabsProps {\n  value?: string | undefined;\n  defaultValue?: string | undefined;\n  onValueChange?: ((value: string) => void) | undefined;\n  variant?: Variant | undefined;\n  className?: string | undefined;\n  children: ReactNode;\n}\n\nfunction makeRoot(defaultVariant: Variant, name: string) {\n  const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, TabsProps>(function TabsRoot(\n    { value, defaultValue, onValueChange, variant = defaultVariant, className, children },\n    ref,\n  ) {\n    return (\n      <Ctx.Provider value={variant}>\n        <BaseTabs.Root\n          ref={ref}\n          {...(value !== undefined ? { value } : {})}\n          {...(defaultValue !== undefined ? { defaultValue } : {})}\n          {...(onValueChange ? { onValueChange: (v: unknown) => onValueChange(String(v)) } : {})}\n          className={cn(\"flex min-w-0 flex-col\", className)}\n        >\n          {children}\n        </BaseTabs.Root>\n      </Ctx.Provider>\n    );\n  });\n  Root.displayName = name;\n  return Root;\n}\n\nexport interface TabsListProps {\n  className?: string | undefined;\n  children: ReactNode;\n  \"aria-label\"?: string | undefined;\n}\n\nconst List = /* @__PURE__ */ forwardRef<HTMLDivElement, TabsListProps>(function TabsList({ className, children, ...props }, ref) {\n  const variant = useContext(Ctx);\n  const inset = useInset();\n  return (\n    <BaseTabs.List\n      ref={ref}\n      className={cn(\n        \"relative flex min-w-0 items-center overflow-x-auto scrollbar-none\",\n        variant === \"underline\" ? \"-mx-12 gap-20 px-12 hairline-b-inset-12\" : inset ? \"-my-4 -mr-4 -ml-16 gap-4 p-4\" : \"-m-4 gap-4 p-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {variant === \"underline\" && (\n        <BaseTabs.Indicator className=\"absolute bottom-0 left-0 h-2 w-(--active-tab-width) translate-x-(--active-tab-left) rounded-pill bg-ink indicator-motion\" />\n      )}\n    </BaseTabs.List>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") List.displayName = \"Tabs.List\";\n\nexport interface TabProps {\n  value: string;\n  children: ReactNode;\n  icon?: IconData | undefined;\n  count?: number | undefined;\n  disabled?: boolean | undefined;\n  className?: string | undefined;\n  \"data-force\"?: string | undefined;\n}\n\nconst Tab = /* @__PURE__ */ forwardRef<HTMLButtonElement, TabProps>(function TabsTab({ value, children, icon, count, disabled, className, \"data-force\": force }, ref) {\n  const variant = useContext(Ctx);\n  return (\n    <BaseTabs.Tab\n      ref={ref}\n      value={value}\n      {...(disabled ? { disabled: true } : {})}\n      {...(force ? { \"data-force\": force } : {})}\n      className={cn(\n        \"relative inline-flex shrink-0 cursor-pointer items-center gap-6 text-body font-medium whitespace-nowrap transition-control tap-target disabled:cursor-not-allowed disabled:text-fg-disabled\",\n        variant === \"underline\"\n          ? \"group/tab h-40 text-fg-secondary outline-none hover:text-fg selected:text-fg\"\n          : \"h-32 rounded-pill px-12 text-fg-secondary hover:bg-fill-1 hover:text-fg active:bg-fill-2 selected:bg-fill-2 selected:text-fg focus-ring\",\n        className,\n      )}\n    >\n      {variant === \"underline\" ? (\n        <span className=\"-mx-8 inline-flex h-28 items-center gap-6 rounded-pill px-8 outline-2 outline-transparent group-focus-visible/tab:outline-focus\">\n          {icon && <Icon icon={icon} size=\"sm\" />}\n          {children}\n          {count !== undefined && <span className=\"text-body font-regular text-fg-secondary tabular\">{count}</span>}\n        </span>\n      ) : (\n        <>\n          {icon && <Icon icon={icon} size=\"sm\" />}\n          {children}\n          {count !== undefined && <span className=\"text-body font-regular text-fg-secondary tabular\">{count}</span>}\n        </>\n      )}\n    </BaseTabs.Tab>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Tab.displayName = \"Tabs.Tab\";\n\nconst Panel = /* @__PURE__ */ forwardRef<HTMLDivElement, { value: string; className?: string | undefined; children: ReactNode; keepMounted?: boolean | undefined }>(\n  function TabsPanel({ value, className, children, keepMounted }, ref) {\n    return (\n      <BaseTabs.Panel ref={ref} value={value} {...(keepMounted ? { keepMounted } : {})} className={cn(\"outline-none focus-ring-inset\", className)}>\n        {children}\n      </BaseTabs.Panel>\n    );\n  },\n);\nif (process.env.NODE_ENV !== \"production\") Panel.displayName = \"Tabs.Panel\";\n\nexport const Tabs = /* @__PURE__ */ Object.assign(/* @__PURE__ */ makeRoot(\"underline\", \"Tabs\"), { List, Tab, Panel });\nexport const PillTabs = /* @__PURE__ */ Object.assign(/* @__PURE__ */ makeRoot(\"pill\", \"PillTabs\"), { List, Tab, Panel });\n"],"mappings":";;;;;;;;AAMA,IAAaO,IAAsB,EACjC,SAAS;CACP,WAAW,EAAE,SAAS,GAAG;CACzB,MAAM,EAAE,SAAS,GAAG;AACtB,EACF,GACaC,IAA8B,EAAE,SAAS,YAAY,GAG5DC,IAAsB,kBAAuB,WAAW;AAW9D,SAASC,EAAS,GAAyB,GAAc;CACvD,IAAMC,IAAuB,kBAAsC,SACjE,EAAE,UAAO,iBAAc,kBAAe,aAAUC,GAAgB,cAAW,eAC3E,GACA;EACA,OACE,kBAACH,EAAI,UAAL;GAAc,OAAOI;GACnB,UAAA,kBAACb,EAAS,MAAV;IACO;IACL,GAAKc,MAAU,KAAA,IAAwB,CAAC,IAAb,EAAE,SAAM;IACnC,GAAKC,MAAiB,KAAA,IAA+B,CAAC,IAApB,EAAE,gBAAa;IACjD,GAAKC,IAAgB,EAAE,gBAAgB,MAAeA,EAAc,OAAOC,CAAC,CAAC,EAAE,IAAI,CAAC;IACpF,WAAWf,EAAG,yBAAyBgB,CAAS;IAE/C;GACY,CAAA;EACH,CAAA;CAElB,CAAC;CAED,OADA,EAAK,cAAcC,GACZR;AACT;AAQA,IAAMS,IAAuB,kBAA0C,SAAkB,EAAE,cAAW,aAAU,GAAGC,KAAS,GAAK;CAC/H,IAAMR,IAAUS,EAAWb,CAAG,GACxBc,IAAQpB,EAAS;CACvB,OACE,kBAACH,EAAS,MAAV;EACO;EACL,WAAWE,EACT,qEACAW,MAAY,cAAc,4CAA4CU,IAAQ,iCAAiC,kBAC/GL,CACF;EACA,GAAIG;EAPN,UAAA,CASGG,GACAX,MAAY,eACX,kBAACb,EAAS,WAAV,EAAoB,WAAU,2HAA4H,CAAA,CAE/I;;AAEnB,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAK,cAAc;AAY9D,IAAMyB,IAAsB,kBAAwC,SAAiB,EAAE,UAAO,aAAU,SAAM,UAAO,aAAU,cAAW,cAAcC,KAAS,GAAK;CACpK,IAAMb,IAAUS,EAAWb,CAAG;CAC9B,OACE,kBAACT,EAAS,KAAV;EACO;EACE;EACP,GAAK2B,IAAW,EAAE,UAAU,GAAK,IAAI,CAAC;EACtC,GAAKD,IAAQ,EAAE,cAAcA,EAAM,IAAI,CAAC;EACxC,WAAWxB,EACT,+LACAW,MAAY,cACR,iFACA,2IACJK,CACF;EAEC,UAAAL,MAAY,cACX,kBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IACGe,KAAQ,kBAACxB,GAAD;KAAY;KAAM,MAAK;IAAM,CAAA;IACrCoB;IACAK,MAAU,KAAA,KAAa,kBAAC,QAAD;KAAM,WAAU;KAAoD,UAAAA;IAAY,CAAA;GACpG;EAEN,CAAA,IAAA,kBAAA5B,GAAA,EAAA,UAAA;GACG2B,KAAQ,kBAACxB,GAAD;IAAY;IAAM,MAAK;GAAM,CAAA;GACrCoB;GACAK,MAAU,KAAA,KAAa,kBAAC,QAAD;IAAM,WAAU;IAAoD,UAAAA;GAAY,CAAA;EACxG,EAAA,CAAA;CAEQ,CAAA;AAElB,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAI,cAAc;AAE7D,IAAMC,IAAwB,kBAC5B,SAAmB,EAAE,UAAO,cAAW,aAAU,kBAAe,GAAK;CACnE,OACE,kBAAC9B,EAAS,OAAV;EAAqB;EAAY;EAAO,GAAK+B,IAAc,EAAE,eAAY,IAAI,CAAC;EAAI,WAAW7B,EAAG,iCAAiCgB,CAAS;EACvI;CACa,CAAA;AAEpB,CACF;AACA,QAAA,IAAA,aAA6B,iBAAc,EAAM,cAAc;AAE/D,IAAac,IAAuB,uBAAO,OAAuB,kBAAS,aAAa,MAAM,GAAG;CAAE;CAAM;CAAK;AAAM,CAAC,GACxGC,IAA2B,uBAAO,OAAuB,kBAAS,QAAQ,UAAU,GAAG;CAAE;CAAM;CAAK;AAAM,CAAC"}

package/dist/components/tag.js

@@ -0,0 +1,2 @@
+"use client";
+export { t as KAESO_TAG_DEFAULT_VARIANTS, n as KAESO_TAG_VARIANTS, r as Pill, i as TAG_DOT, a as Tag } from "../chunks/tag-BsmQ1xPj.js";

package/dist/components/text.js

@@ -0,0 +1,2 @@
+"use client";
+export { t as KAESO_TEXT_DEFAULT_VARIANTS, n as KAESO_TEXT_VARIANTS, r as Text } from "../chunks/text-BPglS3vq.js";

package/dist/components/theme-menu.js

@@ -0,0 +1,50 @@
+"use client";
+import { i as e } from "../chunks/context-BELWW79w.js";
+import { a as t } from "../chunks/theme-provider-mgUaQK7L.js";
+import { t as n } from "../chunks/icon-button-Bw67oKtx.js";
+import { i as r } from "../chunks/menu-OURWt_hD.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { ComputerIcon as o, Moon02Icon as s, Sun03Icon as c } from "@hugeicons/core-free-icons";
+//#region src/components/theme-menu/theme-menu.tsx
+var l = { variant: {
+	ghost: { classes: "" },
+	secondary: { classes: "" }
+} }, u = { variant: "ghost" };
+function d({ variant: l = "ghost", size: u = "sm" }) {
+	let { theme: d, resolvedTheme: f, setTheme: p } = t(), m = e();
+	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(r.Trigger, { children: /* @__PURE__ */ i(n, {
+		icon: f === "dark" ? s : c,
+		"aria-label": m("themeMenu.theme", "Theme"),
+		variant: l,
+		size: u
+	}) }), /* @__PURE__ */ i(r.Content, {
+		align: "end",
+		className: "min-w-180",
+		children: /* @__PURE__ */ a(r.RadioGroup, {
+			value: d,
+			onValueChange: (e) => p(e),
+			children: [
+				/* @__PURE__ */ i(r.RadioItem, {
+					value: "system",
+					icon: o,
+					children: m("themeMenu.system", "System")
+				}),
+				/* @__PURE__ */ i(r.RadioItem, {
+					value: "light",
+					icon: c,
+					children: m("themeMenu.light", "Light")
+				}),
+				/* @__PURE__ */ i(r.RadioItem, {
+					value: "dark",
+					icon: s,
+					children: m("themeMenu.dark", "Dark")
+				})
+			]
+		})
+	})] });
+}
+process.env.NODE_ENV !== "production" && (d.displayName = "ThemeMenu");
+//#endregion
+export { u as KAESO_THEME_MENU_DEFAULT_VARIANTS, l as KAESO_THEME_MENU_VARIANTS, d as ThemeMenu };
+
+//# sourceMappingURL=theme-menu.js.map

package/dist/components/theme-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-menu.js","names":["__icon_Moon02Icon","__icon_Sun03Icon","__icon_ComputerIcon","useUiText","useTheme","IconButton","Menu","KAESO_THEME_MENU_VARIANTS","KAESO_THEME_MENU_DEFAULT_VARIANTS","ThemeMenu","t","resolvedTheme","Moon02Icon","Sun03Icon","theme","setTheme","v","ComputerIcon"],"sources":["../../src/components/theme-menu/theme-menu.tsx"],"sourcesContent":["import { Moon02Icon as __icon_Moon02Icon, Sun03Icon as __icon_Sun03Icon, ComputerIcon as __icon_ComputerIcon } from \"@hugeicons/core-free-icons\";\nimport { useTheme, type ThemePreference } from \"../../theme/theme-provider.js\";\nimport { IconButton } from \"../icon-button/icon-button.js\";\nimport { Menu } from \"../menu/menu.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_THEME_MENU_VARIANTS = {\n  variant: {\n    ghost: { classes: \"\" },\n    secondary: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_THEME_MENU_DEFAULT_VARIANTS = { variant: \"ghost\" } as const;\n\nexport function ThemeMenu({ variant = \"ghost\", size = \"sm\" }: { variant?: \"ghost\" | \"secondary\" | undefined; size?: \"sm\" | \"md\" | undefined }) {\n  const { theme, resolvedTheme, setTheme } = useTheme();\n  const t = useUiText();\n  return (\n    <Menu>\n      <Menu.Trigger>\n        <IconButton\n          icon={resolvedTheme === \"dark\" ? __icon_Moon02Icon : __icon_Sun03Icon}\n          aria-label={t(\"themeMenu.theme\", \"Theme\")}\n          variant={variant}\n          size={size}\n        />\n      </Menu.Trigger>\n      <Menu.Content align=\"end\" className=\"min-w-180\">\n        <Menu.RadioGroup value={theme} onValueChange={(v) => setTheme(v as ThemePreference)}>\n          <Menu.RadioItem value=\"system\" icon={__icon_ComputerIcon}>\n            {t(\"themeMenu.system\", \"System\")}\n          </Menu.RadioItem>\n          <Menu.RadioItem value=\"light\" icon={__icon_Sun03Icon}>\n            {t(\"themeMenu.light\", \"Light\")}\n          </Menu.RadioItem>\n          <Menu.RadioItem value=\"dark\" icon={__icon_Moon02Icon}>\n            {t(\"themeMenu.dark\", \"Dark\")}\n          </Menu.RadioItem>\n        </Menu.RadioGroup>\n      </Menu.Content>\n    </Menu>\n  );\n}\nif (process.env.NODE_ENV !== \"production\") ThemeMenu.displayName = \"ThemeMenu\";\n"],"mappings":";;;;;;;;AAMA,IAAaO,IAA4B,EACvC,SAAS;CACP,OAAO,EAAE,SAAS,GAAG;CACrB,WAAW,EAAE,SAAS,GAAG;AAC3B,EACF,GACaC,IAAoC,EAAE,SAAS,QAAQ;AAEpE,SAAgBC,EAAU,EAAE,aAAU,SAAS,UAAO,QAAyF;CAC7I,IAAM,EAAE,UAAO,kBAAe,gBAAaL,EAAS,GAC9CM,IAAIP,EAAU;CACpB,OACE,kBAACG,GAAD,EAAA,UAAA,CACE,kBAACA,EAAK,SAAN,EAAA,UACE,kBAACD,GAAD;EACE,MAAMM,MAAkB,SAASX,IAAoBC;EACrD,cAAYS,EAAE,mBAAmB,OAAO;EAC/B;EACH;CACP,CAAA,EACW,CAAA,GACd,kBAACJ,EAAK,SAAN;EAAc,OAAM;EAAM,WAAU;EAClC,UAAA,kBAACA,EAAK,YAAN;GAAiB,OAAOQ;GAAO,gBAAgB,MAAMC,EAASC,CAAoB;GAAlF,UAAA;IACE,kBAACV,EAAK,WAAN;KAAgB,OAAM;KAAS,MAAMJ;KAClC,UAAAQ,EAAE,oBAAoB,QAAQ;IACjB,CAAA;IAChB,kBAACJ,EAAK,WAAN;KAAgB,OAAM;KAAQ,MAAML;KACjC,UAAAS,EAAE,mBAAmB,OAAO;IACf,CAAA;IAChB,kBAACJ,EAAK,WAAN;KAAgB,OAAM;KAAO,MAAMN;KAChC,UAAAU,EAAE,kBAAkB,MAAM;IACb,CAAA;GACD;;CACL,CAAA,CACV,EAAA,CAAA;AAEV;AACA,QAAA,IAAA,aAA6B,iBAAc,EAAU,cAAc"}

package/dist/components/timeline.js

@@ -0,0 +1,58 @@
+"use client";
+import { t as e } from "../chunks/cn-CidVUKMm.js";
+import { forwardRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/timeline/timeline.tsx
+var i = { tone: {
+	neutral: { classes: "bg-line-strong" },
+	success: { classes: "bg-success" },
+	warning: { classes: "bg-warning" },
+	danger: { classes: "bg-danger" },
+	info: { classes: "bg-info" }
+} }, a = { tone: "neutral" }, o = /* @__PURE__ */ t(function({ events: t, className: a }, o) {
+	return /* @__PURE__ */ n("ol", {
+		ref: o,
+		className: e("flex flex-col", a),
+		children: t.map((a, o) => /* @__PURE__ */ r("li", {
+			className: "relative flex gap-16 pb-20 last:pb-0",
+			children: [
+				o < t.length - 1 && /* @__PURE__ */ n("span", {
+					"aria-hidden": !0,
+					className: "absolute top-20 bottom-0 left-12 w-1 bg-line-subtle"
+				}),
+				/* @__PURE__ */ n("span", {
+					className: "relative flex h-20 w-24 shrink-0 items-center justify-center",
+					children: a.marker ?? /* @__PURE__ */ n("span", {
+						"aria-hidden": !0,
+						className: e("h-14 w-3 rounded-pill", i.tone[a.tone ?? "neutral"].classes)
+					})
+				}),
+				/* @__PURE__ */ r("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-2",
+					children: [/* @__PURE__ */ r("div", {
+						className: "flex items-baseline justify-between gap-16",
+						children: [/* @__PURE__ */ n("span", {
+							className: "min-w-0 text-body text-fg",
+							children: a.title
+						}), /* @__PURE__ */ n("time", {
+							...a.datetime ? {
+								dateTime: a.datetime,
+								title: a.datetime
+							} : {},
+							className: "shrink-0 text-small text-fg-tertiary tabular",
+							children: a.time
+						})]
+					}), a.description && /* @__PURE__ */ n("div", {
+						className: "text-small text-fg-secondary",
+						children: a.description
+					})]
+				})
+			]
+		}, a.id))
+	});
+});
+process.env.NODE_ENV !== "production" && (o.displayName = "Timeline");
+//#endregion
+export { a as KAESO_TIMELINE_DEFAULT_VARIANTS, i as KAESO_TIMELINE_VARIANTS, o as Timeline };
+
+//# sourceMappingURL=timeline.js.map

package/dist/components/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","names":["cn","KAESO_TIMELINE_VARIANTS","KAESO_TIMELINE_DEFAULT_VARIANTS","Timeline","className","events","i","e"],"sources":["../../src/components/timeline/timeline.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport const KAESO_TIMELINE_VARIANTS = {\n  tone: {\n    neutral: { classes: \"bg-line-strong\" },\n    success: { classes: \"bg-success\" },\n    warning: { classes: \"bg-warning\" },\n    danger: { classes: \"bg-danger\" },\n    info: { classes: \"bg-info\" },\n  },\n} as const;\nexport const KAESO_TIMELINE_DEFAULT_VARIANTS = { tone: \"neutral\" } as const;\n\nexport interface TimelineEvent {\n  id: string;\n  title: ReactNode;\n  description?: ReactNode | undefined;\n  time: ReactNode;\n  datetime?: string | undefined;\n  tone?: keyof typeof KAESO_TIMELINE_VARIANTS.tone | undefined;\n  marker?: ReactNode | undefined;\n}\n\nexport const Timeline = /* @__PURE__ */ forwardRef<HTMLOListElement, { events: TimelineEvent[]; className?: string | undefined }>(function Timeline(\n  { events, className },\n  ref,\n) {\n  return (\n    <ol ref={ref} className={cn(\"flex flex-col\", className)}>\n      {events.map((e, i) => (\n        <li key={e.id} className=\"relative flex gap-16 pb-20 last:pb-0\">\n          {i < events.length - 1 && <span aria-hidden className=\"absolute top-20 bottom-0 left-12 w-1 bg-line-subtle\" />}\n          <span className=\"relative flex h-20 w-24 shrink-0 items-center justify-center\">\n            {e.marker ?? <span aria-hidden className={cn(\"h-14 w-3 rounded-pill\", KAESO_TIMELINE_VARIANTS.tone[e.tone ?? \"neutral\"].classes)} />}\n          </span>\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n            <div className=\"flex items-baseline justify-between gap-16\">\n              <span className=\"min-w-0 text-body text-fg\">{e.title}</span>\n              <time {...(e.datetime ? { dateTime: e.datetime, title: e.datetime } : {})} className=\"shrink-0 text-small text-fg-tertiary tabular\">\n                {e.time}\n              </time>\n            </div>\n            {e.description && <div className=\"text-small text-fg-secondary\">{e.description}</div>}\n          </div>\n        </li>\n      ))}\n    </ol>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Timeline.displayName = \"Timeline\";\n"],"mappings":";;;;;AAGA,IAAaC,IAA0B,EACrC,MAAM;CACJ,SAAS,EAAE,SAAS,iBAAiB;CACrC,SAAS,EAAE,SAAS,aAAa;CACjC,SAAS,EAAE,SAAS,aAAa;CACjC,QAAQ,EAAE,SAAS,YAAY;CAC/B,MAAM,EAAE,SAAS,UAAU;AAC7B,EACF,GACaC,IAAkC,EAAE,MAAM,UAAU,GAYpDC,IAA2B,kBAA0F,SAChI,EAAE,WAAQ,gBACV,GACA;CACA,OACE,kBAAC,MAAD;EAAS;EAAK,WAAWH,EAAG,iBAAiBI,CAAS;EACnD,UAAAC,EAAO,KAAK,GAAG,MACd,kBAAC,MAAD;GAAe,WAAU;GAAzB,UAAA;IACGC,IAAID,EAAO,SAAS,KAAK,kBAAC,QAAD;KAAM,eAAA;KAAY,WAAU;IAAuD,CAAA;IAC7G,kBAAC,QAAD;KAAM,WAAU;KACb,UAAAE,EAAE,UAAU,kBAAC,QAAD;MAAM,eAAA;MAAY,WAAWP,EAAG,yBAAyBC,EAAwB,KAAKM,EAAE,QAAQ,UAAU,CAAC,OAAO;KAAI,CAAA;IAC/H,CAAA;IACN,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,kBAAC,QAAD;OAAM,WAAU;OAA6B,UAAAA,EAAE;MAAY,CAAA,GAC3D,kBAAC,QAAD;OAAM,GAAKA,EAAE,WAAW;QAAE,UAAUA,EAAE;QAAU,OAAOA,EAAE;OAAS,IAAI,CAAC;OAAI,WAAU;OAClF,UAAAA,EAAE;MACC,CAAA,CACH;KACJ,CAAA,GAAAA,EAAE,eAAe,kBAAC,OAAD;MAAK,WAAU;MAAgC,UAAAA,EAAE;KAAiB,CAAA,CACjF;;GACH;EAdK,GAAAA,EAAE,EAcP,CACL;CACC,CAAA;AAER,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAS,cAAc"}