@logicplanes/kaeso-ui 0.4.4 → 0.4.5

package/dist/chunks/meter-CASMHlxl.js

@@ -0,0 +1,100 @@
+"use client";
+import { t as e } from "./cn-BjnOAUrA.js";
+import { i as t } from "./context-BELWW79w.js";
+import { t as n } from "./truncated-d1afmUJT.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/meter/meter.tsx
+var o = { tone: {
+	auto: { classes: "" },
+	neutral: { classes: "bg-fg-secondary" }
+} }, s = { tone: "auto" };
+function c(e, t = []) {
+	let n = l(e, t);
+	return n === "over" ? "bg-danger" : n === "near" ? "bg-viz-2" : "bg-viz-1";
+}
+function l(e, t) {
+	return e >= 1 ? "over" : e >= (t.length ? Math.min(...t) : .8) ? "near" : "under";
+}
+var u = {
+	over: "text-danger-text",
+	near: "text-warning-text",
+	under: ""
+};
+function d(e) {
+	if (!e.length) return;
+	let t = `linear-gradient(to right, black 0, ${[...e].sort((e, t) => e - t).map((e) => `black calc(${e * 100}% - 1px), transparent calc(${e * 100}% - 1px), transparent calc(${e * 100}% + 1px), black calc(${e * 100}% + 1px)`).join(", ")}, black 100%)`;
+	return {
+		maskImage: t,
+		WebkitMaskImage: t
+	};
+}
+var f = /* @__PURE__ */ r(function({ value: r, label: s, valueLabel: f, caption: p, thresholds: m = [], tone: h = "auto", leading: g, trailing: _, className: v, "aria-label": y }, b) {
+	let x = t(), S = Math.max(0, Math.min(1, r)), C = Math.round(r * 100), w = h === "auto" ? l(r, m) : "under", T = w === "over" ? x("meter.overLimit", "over the limit") : w === "near" ? x("meter.nearLimit", "near the limit") : "", E = typeof f == "string" ? f : `${C}%`;
+	return /* @__PURE__ */ a("div", {
+		ref: b,
+		className: e("flex flex-col gap-8", v),
+		children: [
+			(s || f) && /* @__PURE__ */ a("div", {
+				className: "flex items-baseline justify-between gap-12",
+				children: [/* @__PURE__ */ a("span", {
+					className: "flex min-w-0 items-center gap-8 text-body font-medium text-fg",
+					children: [
+						g,
+						s && /* @__PURE__ */ i(n, {
+							className: "min-w-0",
+							children: s
+						}),
+						_
+					]
+				}), f && /* @__PURE__ */ i("span", {
+					className: e("shrink-0 text-body tabular", u[w] || "text-fg-secondary"),
+					children: f
+				})]
+			}),
+			/* @__PURE__ */ i("div", {
+				role: "meter",
+				"aria-valuemin": 0,
+				"aria-valuemax": Math.max(100, C),
+				"aria-valuenow": C,
+				"aria-label": y ?? (typeof s == "string" ? s : void 0),
+				...typeof f == "string" || T ? { "aria-valuetext": T ? `${E}, ${T}` : E } : {},
+				style: d(m),
+				className: "relative h-6 overflow-hidden rounded-pill bg-fill-2 forced-colors:outline forced-colors:-outline-offset-1",
+				children: /* @__PURE__ */ i("div", {
+					className: e("h-full rounded-pill width-motion data-mark", h === "auto" ? c(r, m) : o.tone.neutral.classes),
+					style: { width: `${S * 100}%` }
+				})
+			}),
+			p && /* @__PURE__ */ i("span", {
+				className: e("text-caption font-medium", u[w] || "text-fg-secondary"),
+				children: p
+			})
+		]
+	});
+});
+process.env.NODE_ENV !== "production" && (f.displayName = "Meter");
+var p = { kind: {
+	determinate: { classes: "h-6 rounded-pill bg-fill-2 forced-colors:outline forced-colors:-outline-offset-1" },
+	indeterminate: { classes: "h-2 bg-transparent" }
+} }, m = { kind: "determinate" }, h = /* @__PURE__ */ r(function({ value: t, className: n, "aria-label": r }, a) {
+	let o = t === void 0;
+	return /* @__PURE__ */ i("div", {
+		ref: a,
+		role: "progressbar",
+		"aria-label": r,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		...o ? {} : { "aria-valuenow": Math.round(t * 100) },
+		className: e("relative w-full overflow-hidden", p.kind[o ? "indeterminate" : "determinate"].classes, n),
+		children: o ? /* @__PURE__ */ i("span", { className: "absolute inset-y-0 left-0 w-1/3 animate-indeterminate rounded-pill bg-fg-tertiary data-mark" }) : /* @__PURE__ */ i("span", {
+			className: "block h-full rounded-pill bg-ink width-motion forced-line",
+			style: { width: `${Math.max(0, Math.min(1, t)) * 100}%` }
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (h.displayName = "Progress");
+//#endregion
+export { f as a, p as i, o as n, h as o, m as r, c as s, s as t };
+
+//# sourceMappingURL=meter-CASMHlxl.js.map

package/dist/chunks/meter-CASMHlxl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-CASMHlxl.js","names":["cn","useUiText","TruncatedText","KAESO_METER_VARIANTS","KAESO_METER_DEFAULT_VARIANTS","meterColor","state","meterState","value","thresholds","STATE_TEXT","thresholdMask","mask","a","b","t","Meter","ariaLabel","pct","now","tone","stateWord","valueText","valueLabel","className","label","leading","trailing","caption","KAESO_PROGRESS_VARIANTS","KAESO_PROGRESS_DEFAULT_VARIANTS","Progress","indeterminate"],"sources":["../../src/components/meter/meter.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { useUiText } from \"../../i18n/context.js\";\nimport { TruncatedText } from \"../text/truncated.js\";\n\nexport const KAESO_METER_VARIANTS = {\n  tone: {\n    auto: {\n      classes: \"\",\n    },\n    neutral: { classes: \"bg-fg-secondary\" },\n  },\n} as const;\nexport const KAESO_METER_DEFAULT_VARIANTS = { tone: \"auto\" } as const;\n\nexport interface MeterProps {\n  value: number;\n  label?: ReactNode | undefined;\n  valueLabel?: ReactNode | undefined;\n  caption?: ReactNode | undefined;\n  thresholds?: number[] | undefined;\n  tone?: keyof typeof KAESO_METER_VARIANTS.tone | undefined;\n  leading?: ReactNode | undefined;\n  trailing?: ReactNode | undefined;\n  \"aria-label\"?: string | undefined;\n  className?: string | undefined;\n}\n\nexport function meterColor(value: number, thresholds: number[] = []) {\n  const state = meterState(value, thresholds);\n  return state === \"over\" ? \"bg-danger\" : state === \"near\" ? \"bg-viz-2\" : \"bg-viz-1\";\n}\n\nfunction meterState(value: number, thresholds: number[]): \"over\" | \"near\" | \"under\" {\n  if (value >= 1) return \"over\";\n  const first = thresholds.length ? Math.min(...thresholds) : 0.8;\n  return value >= first ? \"near\" : \"under\";\n}\n\nconst STATE_TEXT = { over: \"text-danger-text\", near: \"text-warning-text\", under: \"\" } as const;\n\n// Each threshold is a 2px gap cut out of the bar, so the tick shows whatever surface the meter sits on.\nfunction thresholdMask(thresholds: number[]): CSSProperties | undefined {\n  if (!thresholds.length) return undefined;\n  const stops = [...thresholds]\n    .sort((a, b) => a - b)\n    .map((t) => `black calc(${t * 100}% - 1px), transparent calc(${t * 100}% - 1px), transparent calc(${t * 100}% + 1px), black calc(${t * 100}% + 1px)`);\n  const mask = `linear-gradient(to right, black 0, ${stops.join(\", \")}, black 100%)`;\n  return { maskImage: mask, WebkitMaskImage: mask };\n}\n\nexport const Meter = /* @__PURE__ */ forwardRef<HTMLDivElement, MeterProps>(function Meter(\n  { value, label, valueLabel, caption, thresholds = [], tone = \"auto\", leading, trailing, className, \"aria-label\": ariaLabel },\n  ref,\n) {\n  const t = useUiText();\n  const pct = Math.max(0, Math.min(1, value));\n  const now = Math.round(value * 100);\n  const state = tone === \"auto\" ? meterState(value, thresholds) : \"under\";\n  const stateWord = state === \"over\" ? t(\"meter.overLimit\", \"over the limit\") : state === \"near\" ? t(\"meter.nearLimit\", \"near the limit\") : \"\";\n  const valueText = typeof valueLabel === \"string\" ? valueLabel : `${now}%`;\n  return (\n    <div ref={ref} className={cn(\"flex flex-col gap-8\", className)}>\n      {(label || valueLabel) && (\n        <div className=\"flex items-baseline justify-between gap-12\">\n          <span className=\"flex min-w-0 items-center gap-8 text-body font-medium text-fg\">\n            {leading}\n            {label && <TruncatedText className=\"min-w-0\">{label}</TruncatedText>}\n            {trailing}\n          </span>\n          {valueLabel && <span className={cn(\"shrink-0 text-body tabular\", STATE_TEXT[state] || \"text-fg-secondary\")}>{valueLabel}</span>}\n        </div>\n      )}\n      <div\n        role=\"meter\"\n        aria-valuemin={0}\n        aria-valuemax={Math.max(100, now)}\n        aria-valuenow={now}\n        aria-label={ariaLabel ?? (typeof label === \"string\" ? label : undefined)}\n        {...(typeof valueLabel === \"string\" || stateWord ? { \"aria-valuetext\": stateWord ? `${valueText}, ${stateWord}` : valueText } : {})}\n        style={thresholdMask(thresholds)}\n        className=\"relative h-6 overflow-hidden rounded-pill bg-fill-2 forced-colors:outline forced-colors:-outline-offset-1\"\n      >\n        <div\n          className={cn(\n            \"h-full rounded-pill width-motion data-mark\",\n            tone === \"auto\" ? meterColor(value, thresholds) : KAESO_METER_VARIANTS.tone.neutral.classes,\n          )}\n          style={{ width: `${pct * 100}%` }}\n        />\n      </div>\n      {caption && <span className={cn(\"text-caption font-medium\", STATE_TEXT[state] || \"text-fg-secondary\")}>{caption}</span>}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Meter.displayName = \"Meter\";\n\nexport const KAESO_PROGRESS_VARIANTS = {\n  kind: {\n    determinate: { classes: \"h-6 rounded-pill bg-fill-2 forced-colors:outline forced-colors:-outline-offset-1\" },\n    indeterminate: { classes: \"h-2 bg-transparent\" },\n  },\n} as const;\nexport const KAESO_PROGRESS_DEFAULT_VARIANTS = { kind: \"determinate\" } as const;\n\nexport interface ProgressProps {\n  value?: number | undefined;\n  \"aria-label\": string;\n  className?: string | undefined;\n}\n\nexport const Progress = /* @__PURE__ */ forwardRef<HTMLDivElement, ProgressProps>(function Progress({ value, className, \"aria-label\": ariaLabel }, ref) {\n  const indeterminate = value === undefined;\n  return (\n    <div\n      ref={ref}\n      role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      {...(!indeterminate ? { \"aria-valuenow\": Math.round(value * 100) } : {})}\n      className={cn(\"relative w-full overflow-hidden\", KAESO_PROGRESS_VARIANTS.kind[indeterminate ? \"indeterminate\" : \"determinate\"].classes, className)}\n    >\n      {indeterminate ? (\n        <span className=\"absolute inset-y-0 left-0 w-1/3 animate-indeterminate rounded-pill bg-fg-tertiary data-mark\" />\n      ) : (\n        <span className=\"block h-full rounded-pill bg-ink width-motion forced-line\" style={{ width: `${Math.max(0, Math.min(1, value)) * 100}%` }} />\n      )}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Progress.displayName = \"Progress\";\n"],"mappings":"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"}

package/dist/chunks/nav-sheet-Dt6JSvzX.js

@@ -0,0 +1,67 @@
+"use client";
+import { l as e } from "./styles-hkFkoBbi.js";
+import { t } from "./cn-BjnOAUrA.js";
+import { r as n } from "./portal-context-CTatR2Z8.js";
+import { i as r } from "./context-BELWW79w.js";
+import { t as i } from "./merge-refs-BN1FyQt9.js";
+import { c as a, s as o } from "./sidebar-Dq7oGOje.js";
+import { forwardRef as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Dialog as m } from "@base-ui/react/dialog";
+//#region src/components/app-frame/nav-sheet.tsx
+var h = /* @__PURE__ */ e({ NavSheet: () => _ }), g = 160, _ = /* @__PURE__ */ s(function({ open: e, onOpenChange: s, peek: h = !1, returnFocus: _, children: v }, y) {
+	let b = u(void 0), x = r();
+	c(() => () => clearTimeout(b.current), []);
+	let S = l(() => ({
+		close: () => s(!1),
+		peek: h
+	}), [s, h]);
+	c(() => {
+		if (!e || h || typeof window > "u") return;
+		let t = window.matchMedia("(min-width: 1024px)"), n = () => t.matches && s(!1);
+		return n(), t.addEventListener("change", n), () => t.removeEventListener("change", n);
+	}, [
+		e,
+		h,
+		s
+	]);
+	let C = u(null), [w, T] = d(!1), E = l(() => i(C, y, (e) => {
+		e && T(!!e.closest("[data-app-frame=\"parent\"]"));
+	}), [y]), D = w ? "absolute" : "fixed";
+	return /* @__PURE__ */ f(m.Root, {
+		open: e,
+		onOpenChange: (e) => s(e),
+		modal: !h,
+		children: /* @__PURE__ */ p(m.Portal, {
+			container: n(),
+			children: [!h && /* @__PURE__ */ f(m.Backdrop, { className: t(D, "inset-0 z-40 bg-overlay opacity-60 backdrop-motion") }), /* @__PURE__ */ f(m.Popup, {
+				ref: E,
+				"aria-label": x("appFrame.navigation", "Navigation"),
+				"data-side": "left",
+				"data-nav-sheet": "",
+				initialFocus: h ? !1 : () => C.current?.querySelector("[aria-current=\"page\"]") ?? !0,
+				..._ ? { finalFocus: _ } : {},
+				className: t(D, "top-0 bottom-0 left-0 z-40 flex overflow-hidden rounded-r-sheet bg-chrome shadow-dialog outline-none safe-area-sheet sheet-motion"),
+				onClick: (e) => {
+					e.target.closest("a[href]") && s(!1);
+				},
+				onPointerEnter: () => clearTimeout(b.current),
+				onPointerLeave: () => {
+					h && (b.current = setTimeout(() => s(!1), g));
+				},
+				children: /* @__PURE__ */ f(o.Provider, {
+					value: !0,
+					children: /* @__PURE__ */ f(a.Provider, {
+						value: S,
+						children: v
+					})
+				})
+			})]
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (_.displayName = "NavSheet");
+//#endregion
+export { h as n, _ as t };
+
+//# sourceMappingURL=nav-sheet-Dt6JSvzX.js.map

package/dist/chunks/nav-sheet-Dt6JSvzX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-sheet-Dt6JSvzX.js","names":["__exportAll","usePortalContainer","useUiText","mergeRefs","SidebarSheetContext","SidebarFloatingContext","nav_sheet_exports","NavSheet","PEEK_LEAVE","leave","useRef","t","sheet","useMemo","onOpenChange","peek","open","wide","onChange","popup","contained","setContained","useState","refs","ref","el","place","Dialog","o","cn","returnFocus"],"sources":["../../src/components/app-frame/nav-sheet.tsx"],"sourcesContent":["import { forwardRef, useEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from \"react\";\nimport { Dialog } from \"@base-ui/react/dialog\";\nimport { usePortalContainer } from \"../../utils/portal-context.js\";\nimport { SidebarFloatingContext, SidebarSheetContext } from \"../sidebar/sidebar.js\";\nimport { mergeRefs } from \"../../utils/merge-refs.js\";\nimport { cn } from \"../../utils/cn.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nconst PEEK_LEAVE = 160;\n\nexport interface NavSheetProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  peek?: boolean | undefined;\n  returnFocus?: RefObject<HTMLElement | null> | undefined;\n  children: ReactNode;\n}\n\nexport const NavSheet = /* @__PURE__ */ forwardRef<HTMLDivElement, NavSheetProps>(function NavSheet({ open, onOpenChange, peek = false, returnFocus, children }, ref) {\n  const leave = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const t = useUiText();\n  useEffect(() => () => clearTimeout(leave.current), []);\n  const sheet = useMemo(() => ({ close: () => onOpenChange(false), peek }), [onOpenChange, peek]);\n  useEffect(() => {\n    if (!open || peek || typeof window === \"undefined\") return;\n    const wide = window.matchMedia(\"(min-width: 1024px)\");\n    const onChange = () => wide.matches && onOpenChange(false);\n    onChange();\n    wide.addEventListener(\"change\", onChange);\n    return () => wide.removeEventListener(\"change\", onChange);\n  }, [open, peek, onOpenChange]);\n  const popup = useRef<HTMLDivElement | null>(null);\n  const [contained, setContained] = useState(false);\n  const refs = useMemo(\n    () =>\n      mergeRefs(popup, ref, (el: HTMLDivElement | null) => {\n        if (el) setContained(!!el.closest('[data-app-frame=\"parent\"]'));\n      }),\n    [ref],\n  );\n  const place = contained ? \"absolute\" : \"fixed\";\n  return (\n    <Dialog.Root open={open} onOpenChange={(o: boolean) => onOpenChange(o)} modal={!peek}>\n      <Dialog.Portal container={usePortalContainer()}>\n        {!peek && <Dialog.Backdrop className={cn(place, \"inset-0 z-40 bg-overlay opacity-60 backdrop-motion\")} />}\n        <Dialog.Popup\n          ref={refs}\n          aria-label={t(\"appFrame.navigation\", \"Navigation\")}\n          data-side=\"left\"\n          data-nav-sheet=\"\"\n          initialFocus={peek ? false : () => popup.current?.querySelector<HTMLElement>('[aria-current=\"page\"]') ?? true}\n          {...(returnFocus ? { finalFocus: returnFocus } : {})}\n          className={cn(\n            place,\n            \"top-0 bottom-0 left-0 z-40 flex overflow-hidden rounded-r-sheet bg-chrome shadow-dialog outline-none safe-area-sheet sheet-motion\",\n          )}\n          onClick={(e) => {\n            if ((e.target as HTMLElement).closest(\"a[href]\")) onOpenChange(false);\n          }}\n          onPointerEnter={() => clearTimeout(leave.current)}\n          onPointerLeave={() => {\n            if (!peek) return;\n            leave.current = setTimeout(() => onOpenChange(false), PEEK_LEAVE);\n          }}\n        >\n          <SidebarFloatingContext.Provider value>\n            <SidebarSheetContext.Provider value={sheet}>{children}</SidebarSheetContext.Provider>\n          </SidebarFloatingContext.Provider>\n        </Dialog.Popup>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") NavSheet.displayName = \"NavSheet\";\n"],"mappings":";;;;;;;;;;;A,kDAQMQ,IAAa,KAUND,IAA2B,kBAA0C,SAAkB,EAAE,SAAM,iBAAc,UAAO,IAAO,gBAAa,eAAY,GAAK;CACpK,IAAME,IAAQC,EAAkD,KAAA,CAAS,GACnEC,IAAIT,EAAU;CACpB,cAAsB,aAAaO,EAAM,OAAO,GAAG,CAAC,CAAC;CACrD,IAAMG,IAAQC,SAAe;EAAE,aAAaC,EAAa,EAAK;EAAG;CAAK,IAAI,CAACA,GAAcC,CAAI,CAAC;CAC9F,QAAgB;EACd,IAAI,CAACC,KAAQD,KAAQ,OAAO,SAAW,KAAa;EACpD,IAAME,IAAO,OAAO,WAAW,qBAAqB,GAC9CC,UAAiBD,EAAK,WAAWH,EAAa,EAAK;EAGzD,OAFAI,EAAS,GACTD,EAAK,iBAAiB,UAAUC,CAAQ,SAC3BD,EAAK,oBAAoB,UAAUC,CAAQ;CAC1D,GAAG;EAACF;EAAMD;EAAMD;CAAY,CAAC;CAC7B,IAAMK,IAAQT,EAA8B,IAAI,GAC1C,CAACU,GAAWC,KAAgBC,EAAS,EAAK,GAC1CC,IAAOV,QAETV,EAAUgB,GAAOK,IAAM,MAA8B;EACnD,AAAIC,KAAIJ,EAAa,CAAC,CAACI,EAAG,QAAQ,6BAA2B,CAAC;CAChE,CAAC,GACH,CAACD,CAAG,CACN,GACME,IAAQN,IAAY,aAAa;CACvC,OACE,kBAACO,EAAO,MAAR;EAAmB;EAAM,eAAe,MAAeb,EAAac,CAAC;EAAG,OAAO,CAACb;EAC9E,UAAA,kBAACY,EAAO,QAAR;GAAe,WAAW1B,EAAmB;GAA7C,UAAA,CACG,CAACc,KAAQ,kBAACY,EAAO,UAAR,EAAiB,WAAWE,EAAGH,GAAO,oDAAoD,EAAI,CAAA,GACxG,kBAACC,EAAO,OAAR;IACE,KAAKJ;IACL,cAAYZ,EAAE,uBAAuB,YAAY;IACjD,aAAU;IACV,kBAAe;IACf,cAAcI,IAAO,WAAcI,EAAM,SAAS,cAA2B,yBAAuB,KAAK;IACzG,GAAKW,IAAc,EAAE,YAAYA,EAAY,IAAI,CAAC;IAClD,WAAWD,EACTH,GACA,mIACF;IACA,UAAU,MAAM;KACd,AAAK,EAAE,OAAuB,QAAQ,SAAS,KAAGZ,EAAa,EAAK;IACtE;IACA,sBAAsB,aAAaL,EAAM,OAAO;IAChD,sBAAsB;KACpB,AAAKM,MACL,EAAM,UAAU,iBAAiBD,EAAa,EAAK,GAAGN,CAAU;IAClE;IAEA,UAAA,kBAACH,EAAuB,UAAxB;KAAiC,OAAA;KAC/B,UAAA,kBAACD,EAAoB,UAArB;MAA8B,OAAOQ;MAAQ;KAAuC,CAAA;IACrD,CAAA;GACrB,CAAA,CACD;;CACJ,CAAA;AAEjB,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAS,cAAc"}

package/dist/chunks/{nav-wordmark-_pjheAsZ.js → nav-wordmark-J4pB_vjr.js}

@@ -1,5 +1,5 @@
 "use client";
-import { t as e } from "./cn-Dj6sRgkF.js";
+import { t as e } from "./cn-BjnOAUrA.js";
 import { forwardRef as t } from "react";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/components/logo/paths.ts
@@ -44,12 +44,8 @@ var r = {
 		viewBox: s,
 		fill: "currentColor",
 		xmlns: "http://www.w3.org/2000/svg",
-		className: e("block shrink-0", i),
-		style: {
-			width: 60,
-			height: 12,
-			...o
-		},
+		className: e("block h-12 w-60 shrink-0", i),
+		style: o,
 		...r ? {
 			"aria-hidden": !0,
 			focusable: !1
@@ -65,4 +61,4 @@ process.env.NODE_ENV !== "production" && (c.displayName = "Logo.Wordmark");
 //#endregion
 export { a, i, o as n, r, c as t };
 
-//# sourceMappingURL=nav-wordmark-_pjheAsZ.js.map
+//# sourceMappingURL=nav-wordmark-J4pB_vjr.js.map

package/dist/chunks/nav-wordmark-J4pB_vjr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-wordmark-J4pB_vjr.js","names":["cn","mark","markIcon","wordmark","lockup","WORDMARK_TIGHT","NavWordmark","props","className","decorative","title","d"],"sources":["../../src/components/logo/paths.ts","../../src/components/logo/nav-wordmark.tsx"],"sourcesContent":["export const mark = {\n  viewBox: \"80.5 79.5 861 643\",\n  paths: [\n    \"m240 100h162c9 0 13 3 20 9l155 136c27 24 53 38 84 40h253q7 0 7 7v50q0 6-7 6l-403-8c-25-1-44-8-63-25l-212-204c-6-6-4-11 4-11z\",\n    \"m107 542c45-33 92-65 138-96 62-41 114-60 184-61h484q8 0 8 7v19q0 7-8 7l-354 1c-44 0-73 7-102 29l-202 161q-6 5-14 5h-134q-6 0-6-6v-58q0-5 6-8z\",\n    \"m307 693 225-202c22-19 49-27 78-28l303-5q8 0 8 8v56q0 5-6 5h-182c-31 0-51 8-72 25l-165 140c-7 6-12 10-23 10h-164c-6 0-7-4-2-9z\",\n  ],\n} as const;\nexport const markIcon = {\n  viewBox: \"107 90 620 620\",\n  paths: [\n    \"m240 100h162c9 0 13 3 20 9l155 136c27 24 53 38 84 40h253q7 0 7 7v50q0 6-7 6l-403-8c-25-1-44-8-63-25l-212-204c-6-6-4-11 4-11z\",\n    \"m107 542c45-33 92-65 138-96 62-41 114-60 184-61h484q8 0 8 7v19q0 7-8 7l-354 1c-44 0-73 7-102 29l-202 161q-6 5-14 5h-134q-6 0-6-6v-58q0-5 6-8z\",\n    \"m307 693 225-202c22-19 49-27 78-28l303-5q8 0 8 8v56q0 5-6 5h-182c-31 0-51 8-72 25l-165 140c-7 6-12 10-23 10h-164c-6 0-7-4-2-9z\",\n  ],\n} as const;\nexport const wordmark = {\n  viewBox: \"49.952 47.249 925.995 221.798\",\n  paths: [\n    \"m72 71.5h34.5v76.1l86-76.1h47.1l-89.6 81.9 90.5 91.8h-46.3l-70.8-70.3-16.9 15.7v54.6h-34.5z\",\n    \"m330.5 71.5h31.6l80.2 173.7h-38.1l-20.5-43.2h-79.6l-19.5 43.2h-34.5zm14.6 42.6-26.7 59.2h53.6z\",\n    \"m457.7 71.5h136.4v30.6h-101.4v37.8h87.4v31h-87.4v43.1h102.3v31.2h-137.3z\",\n    \"m748.1 79.3v31.8c-20.5-7.1-41.8-11-65.4-11-21.7 0-34.7 6.2-34.7 19.8 0 11.5 9.8 16.8 26.4 18.9l21.3 1.7c40.7 2.5 63.3 18.2 63.3 52.2 0 36.1-26.1 54.3-74.8 54.3-24 0-46.4-3.6-66.4-11.7v-32.3c21.3 8.5 40.9 12.9 65.4 12.9 25.9 0 39.9-6.7 39.9-20.3 0-13.3-10.4-19.1-30.2-20.6l-21.4-1.4c-40.2-2.6-60.5-19.1-60.5-50.2 0-33.7 26.8-54.1 69.8-54.1 27.1 0 48.4 3 67.3 10z\",\n    \"m862.8 69.7c52.3 0 91.1 37.1 91.1 88.8 0 52.4-37.2 88.3-90.9 88.3-53.9 0-92-36.4-92-88 0-51.1 39.4-89.1 91.8-89.1zm0 33.3c-32.7 0-55.3 23.4-55.3 55.8 0 32.5 22.5 55 55.5 55 32.9 0 55-22.8 55-55s-22.7-55.8-55.2-55.8z\",\n  ],\n} as const;\nexport const lockup = {\n  viewBox: \"42.541 42.142 939.02 234.215\",\n  paths: [\n    \"m112 64.5h57.5l46.3 42.3c12.3 10.8 23.3 13.3 39.5 13.3h72.9v19.9h-117c-14.8 0-26-1.3-33.6-8.4z\",\n    \"m64.9 205.1 47.2-29.3c25.2-15.9 44.7-23.9 73.5-23.9h142.6v12.3h-111.6c-17.2 0-24.8 2.2-35.9 10.6l-66.8 51.5h-49z\",\n    \"m132.9 254 64.8-58.5c13.5-12.4 22.4-16.1 44.1-16.1h86.4v21.6h-60.7c-13.4 0-17.9 2.2-26.9 9.7l-48.8 43.3z\",\n    \"m383.5 101h22.3v48.6l55.5-48.6h30.1l-57.3 52.2 59.1 58.8h-30.4l-44.8-44-12.2 10.5v33.5h-22.3z\",\n    \"m498.7 212 52.5-111h19.5l52.1 111h-24.8l-12.3-28h-51.2l-12.9 28zm44.6-46.9h33.7l-16.6-36.4z\",\n    \"m632.8 101h89v20.2h-65.9v23.8h57.2v20.1h-57.2v26.5h66.9v20.4h-90z\",\n    \"m823.6 105.5v20.7c-12.9-4.3-24.3-6.6-38.2-6.6-17.3 0-26.8 4.3-26.8 12.5 0 8.7 8 11.1 25.1 11.9 31.6 1.4 46.8 11.3 46.8 33.3 0 24.3-18 35.9-48.5 35.9-17 0-33-2.6-44.5-6.5v-21.2c14.1 5.2 28.6 7.6 43.3 7.6 17.3 0 26.5-4.1 26.5-12.9 0-8.7-6.7-12-25.4-13-31.8-1.5-47.9-10.1-47.9-32.3 0-22.3 17.6-35 47.5-35 15.6 0 30 1.7 42.1 5.6z\",\n    \"m898.9 100c35.8 0 60.3 23 60.3 56.7s-24.5 56.6-60.3 56.6c-35.7 0-59.9-22.8-59.9-56.6 0-33.7 24.2-56.7 59.9-56.7zm0 21.1c-21.9 0-36.8 14.2-36.8 35.6s14.9 35.5 36.8 35.5c22 0 36.7-14.1 36.7-35.5s-14.7-35.6-36.7-35.6z\",\n  ],\n} as const;\n","import { forwardRef, type SVGAttributes } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { wordmark } from \"./paths.js\";\n\nconst WORDMARK_TIGHT = \"72 69.3 881.9 177.7\";\n\nexport interface NavWordmarkProps extends Omit<SVGAttributes<SVGSVGElement>, \"children\"> {\n  title?: string | undefined;\n  decorative?: boolean | undefined;\n}\n\nexport const NavWordmark = /* @__PURE__ */ forwardRef<SVGSVGElement, NavWordmarkProps>(function NavWordmark({ title = \"Kaeso\", decorative, className, style, ...props }, ref) {\n  return (\n    <svg\n      ref={ref}\n      viewBox={WORDMARK_TIGHT}\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={cn(\"block h-12 w-60 shrink-0\", className)}\n      style={style}\n      {...(decorative ? { \"aria-hidden\": true, focusable: false } : { role: \"img\", \"aria-label\": title })}\n      {...props}\n    >\n      {wordmark.paths.map((d) => (\n        <path key={d} d={d} />\n      ))}\n    </svg>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") NavWordmark.displayName = \"Logo.Wordmark\";\n"],"mappings":";;;;;AAAA,IAAaC,IAAO;CAClB,SAAS;CACT,OAAO;EACL;EACA;EACA;CACF;AACF,GACaC,IAAW;CACtB,SAAS;CACT,OAAO;EACL;EACA;EACA;CACF;AACF,GACaC,IAAW;CACtB,SAAS;CACT,OAAO;EACL;EACA;EACA;EACA;EACA;CACF;AACF,GACaC,IAAS;CACpB,SAAS;CACT,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF,GClCMC,IAAiB,uBAOVC,IAA8B,kBAA4C,SAAqB,EAAE,WAAQ,SAAS,eAAY,cAAW,UAAO,GAAGC,KAAS,GAAK;CAC5K,OACE,kBAAC,OAAD;EACO;EACL,SAASF;EACT,MAAK;EACL,OAAM;EACN,WAAWL,EAAG,4BAA4BQ,CAAS;EAC5C;EACP,GAAKC,IAAa;GAAE,eAAe;GAAM,WAAW;EAAM,IAAI;GAAE,MAAM;GAAO,cAAcC;EAAM;EACjG,GAAIH;EAEH,UAAAJ,EAAS,MAAM,KAAK,MACnB,kBAAC,QAAD,EAAiB,KAAI,GAAVQ,CAAU,CACtB;CACE,CAAA;AAET,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAY,cAAc"}

package/dist/chunks/page-header-kS5tdmvb.js

@@ -0,0 +1,45 @@
+"use client";
+import { t as e } from "./cn-BjnOAUrA.js";
+import { t } from "./icon-CBzOwqrX.js";
+import { r as n } from "./text-DkKdTVUf.js";
+import { s as r } from "./app-frame-DysOel2X.js";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/page-header/page-header.tsx
+var s = { size: { md: { classes: "min-h-52 flex-wrap gap-x-12 gap-y-8 px-24 py-10 sm:h-52 sm:flex-nowrap sm:py-0" } } }, c = { size: "md" }, l = /* @__PURE__ */ i(function({ title: i, icon: c, tabs: l, actions: u, start: d, className: f }, p) {
+	let m = r().embedded ? "h2" : "h1";
+	return /* @__PURE__ */ o("header", {
+		ref: p,
+		className: e("flex shrink-0 items-center", s.size.md.classes, f),
+		children: [
+			d,
+			i && /* @__PURE__ */ o(m, {
+				className: "flex min-w-0 flex-1 shrink-4 items-center gap-8 text-body-lg font-semibold text-fg sm:flex-initial",
+				children: [c && /* @__PURE__ */ a(t, {
+					icon: c,
+					size: "sm",
+					className: "shrink-0 text-fg-secondary"
+				}), /* @__PURE__ */ a(n, {
+					truncate: !0,
+					variant: "body-lg",
+					weight: "semibold",
+					tone: "inherit",
+					children: i
+				})]
+			}),
+			l && /* @__PURE__ */ a("div", {
+				className: "order-last min-w-0 basis-full sm:order-none sm:ml-8 sm:basis-auto",
+				children: l
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "ml-auto flex shrink-0 items-center gap-8",
+				children: u
+			})
+		]
+	});
+});
+process.env.NODE_ENV !== "production" && (l.displayName = "PageHeader");
+//#endregion
+export { s as n, l as r, c as t };
+
+//# sourceMappingURL=page-header-kS5tdmvb.js.map

package/dist/chunks/page-header-kS5tdmvb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-kS5tdmvb.js","names":["cn","Text","useAppFrame","KAESO_PAGE_HEADER_VARIANTS","KAESO_PAGE_HEADER_DEFAULT_VARIANTS","PageHeader","Heading","className","start","title","icon","Icon","tabs","actions"],"sources":["../../src/components/page-header/page-header.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { Icon, type IconData } from \"../icon/icon.js\";\nimport { useAppFrame } from \"../app-frame/app-frame.js\";\nimport { Text } from \"../text/text.js\";\n\nexport const KAESO_PAGE_HEADER_VARIANTS = {\n  size: {\n    md: {\n      classes: \"min-h-52 flex-wrap gap-x-12 gap-y-8 px-24 py-10 sm:h-52 sm:flex-nowrap sm:py-0\",\n    },\n  },\n} as const;\nexport const KAESO_PAGE_HEADER_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport interface PageHeaderProps {\n  title?: ReactNode | undefined;\n  icon?: IconData | undefined;\n  tabs?: ReactNode | undefined;\n  actions?: ReactNode | undefined;\n  start?: ReactNode | undefined;\n  className?: string | undefined;\n}\n\nexport const PageHeader = /* @__PURE__ */ forwardRef<HTMLElement, PageHeaderProps>(function PageHeader({ title, icon, tabs, actions, start, className }, ref) {\n  const Heading = useAppFrame().embedded ? \"h2\" : \"h1\";\n  return (\n    <header ref={ref} className={cn(\"flex shrink-0 items-center\", KAESO_PAGE_HEADER_VARIANTS.size.md.classes, className)}>\n      {start}\n      {title && (\n        <Heading className=\"flex min-w-0 flex-1 shrink-4 items-center gap-8 text-body-lg font-semibold text-fg sm:flex-initial\">\n          {icon && <Icon icon={icon} size=\"sm\" className=\"shrink-0 text-fg-secondary\" />}\n          <Text truncate variant=\"body-lg\" weight=\"semibold\" tone=\"inherit\">\n            {title}\n          </Text>\n        </Heading>\n      )}\n      {tabs && <div className=\"order-last min-w-0 basis-full sm:order-none sm:ml-8 sm:basis-auto\">{tabs}</div>}\n      <div className=\"ml-auto flex shrink-0 items-center gap-8\">{actions}</div>\n    </header>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") PageHeader.displayName = \"PageHeader\";\n"],"mappings":";;;;;;;;AAMA,IAAaG,IAA6B,EACxC,MAAM,EACJ,IAAI,EACF,SAAS,iFACX,EACF,EACF,GACaC,IAAqC,EAAE,MAAM,KAAK,GAWlDC,IAA6B,kBAAyC,SAAoB,EAAE,UAAO,SAAM,SAAM,YAAS,UAAO,gBAAa,GAAK;CAC5J,IAAMC,IAAUJ,EAAY,CAAC,CAAC,WAAW,OAAO;CAChD,OACE,kBAAC,UAAD;EAAa;EAAK,WAAWF,EAAG,8BAA8BG,EAA2B,KAAK,GAAG,SAASI,CAAS;EAAnH,UAAA;GACGC;GACAC,KACC,kBAACH,GAAD;IAAS,WAAU;IAAnB,UAAA,CACGI,KAAQ,kBAACC,GAAD;KAAY;KAAM,MAAK;KAAK,WAAU;IAA8B,CAAA,GAC7E,kBAACV,GAAD;KAAM,UAAA;KAAS,SAAQ;KAAU,QAAO;KAAW,MAAK;KACrD,UAAAQ;IACG,CAAA,CACC;;GAEVG,KAAQ,kBAAC,OAAD;IAAK,WAAU;IAAqE,UAAAA;GAAU,CAAA;GACvG,kBAAC,OAAD;IAAK,WAAU;IAA4C,UAAAC;GAAa,CAAA;EAClE;;AAEZ,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAW,cAAc"}

package/dist/chunks/pagination-D7fAm8qg.js

@@ -0,0 +1,147 @@
+"use client";
+import { t as e } from "./cn-BjnOAUrA.js";
+import { i as t } from "./context-BELWW79w.js";
+import { n } from "./button-IblhXUyZ.js";
+import { t as r } from "./icon-button-Dfwpvmav.js";
+import { forwardRef as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ArrowLeft01Icon as u, ArrowRight01Icon as d } from "@hugeicons/core-free-icons";
+//#region src/components/pagination/pagination.tsx
+var f = { variant: {
+	"load-more": { classes: "" },
+	cursor: { classes: "" },
+	pages: { classes: "" }
+} }, p = { variant: "load-more" }, m = 7;
+function h(e, t) {
+	let n = Math.max(1, Math.floor(t)), r = Math.min(n, Math.max(1, Math.floor(e)));
+	return n <= m ? Array.from({ length: n }, (e, t) => t + 1) : r <= 4 ? [
+		1,
+		2,
+		3,
+		4,
+		5,
+		"gap",
+		n
+	] : r >= n - 3 ? [
+		1,
+		"gap",
+		n - 4,
+		n - 3,
+		n - 2,
+		n - 1,
+		n
+	] : [
+		1,
+		"gap",
+		r - 1,
+		r,
+		r + 1,
+		"gap",
+		n
+	];
+}
+function g(e, t) {
+	return {
+		...e ? { "aria-disabled": !0 } : {},
+		onClick: () => {
+			e || t?.();
+		}
+	};
+}
+var _ = /* @__PURE__ */ i(function({ variant: n = "load-more", hasMore: i, hasPrevious: a, loading: o, onLoadMore: s, onNext: f, onPrevious: p, page: m = 1, pageCount: _ = 1, onPageChange: y, className: b }, x) {
+	let S = t(), C = S("pagination.label", "Pagination"), w = S("pagination.previous", "Previous page"), T = S("pagination.next", "Next page");
+	if (n === "load-more") return /* @__PURE__ */ c(v, {
+		ref: x,
+		label: C,
+		hasMore: !!i,
+		loading: o,
+		onLoadMore: s,
+		className: b
+	});
+	if (n === "cursor") return !i && !a ? null : /* @__PURE__ */ l("nav", {
+		ref: x,
+		"aria-label": C,
+		className: e("flex items-center gap-8", b),
+		children: [/* @__PURE__ */ c(r, {
+			icon: u,
+			"aria-label": w,
+			variant: "secondary",
+			...g(!a, p)
+		}), /* @__PURE__ */ c(r, {
+			icon: d,
+			"aria-label": T,
+			variant: "secondary",
+			...g(!i, f)
+		})]
+	});
+	let E = Math.max(1, Math.floor(_)), D = Math.min(E, Math.max(1, Math.floor(m)));
+	return /* @__PURE__ */ l("nav", {
+		ref: x,
+		"aria-label": C,
+		className: e("flex items-center gap-4", b),
+		children: [
+			/* @__PURE__ */ c(r, {
+				icon: u,
+				"aria-label": w,
+				variant: "secondary",
+				...g(D <= 1, () => y?.(D - 1))
+			}),
+			/* @__PURE__ */ c("span", {
+				className: "flex items-center gap-4 px-4",
+				children: h(D, E).map((t, n) => t === "gap" ? /* @__PURE__ */ c("span", {
+					"aria-hidden": !0,
+					className: "inline-flex h-32 min-w-40 items-center justify-center text-body text-fg-tertiary",
+					children: "…"
+				}, `gap-${n}`) : /* @__PURE__ */ c("button", {
+					type: "button",
+					"aria-current": t === D ? "page" : void 0,
+					"aria-label": S("pagination.page", "Page {page}", { page: String(t) }),
+					onClick: () => {
+						t !== m && y?.(t);
+					},
+					className: e("relative inline-flex h-32 min-w-40 cursor-pointer items-center justify-center rounded-pill px-8 text-body font-medium tabular transition-control tap-target focus-ring-inset", t === D ? "bg-fill-2 text-fg" : "text-fg-secondary hover:bg-fill-1 hover:text-fg active:bg-fill-2"),
+					children: t
+				}, `slot-${n}`))
+			}),
+			/* @__PURE__ */ c(r, {
+				icon: d,
+				"aria-label": T,
+				variant: "secondary",
+				...g(D >= E, () => y?.(D + 1))
+			})
+		]
+	});
+});
+process.env.NODE_ENV !== "production" && (_.displayName = "Pagination");
+var v = /* @__PURE__ */ i(function({ label: r, hasMore: i, loading: l, onLoadMore: u, className: d }, f) {
+	let p = t(), m = p("pagination.loadMore", "Load more"), [h, g] = s(!1), [_, v] = s(!1), y = o(null);
+	return i && _ && v(!1), !i && h && !_ && v(!0), a(() => {
+		_ && y.current?.focus();
+	}, [_]), !i && !_ ? null : /* @__PURE__ */ c("nav", {
+		ref: f,
+		"aria-label": r,
+		className: e("flex items-center justify-center gap-12 py-12", d),
+		onFocus: () => g(!0),
+		onBlur: (e) => {
+			e.currentTarget.contains(e.relatedTarget) || g(!1);
+		},
+		children: i ? /* @__PURE__ */ c(n, {
+			variant: "secondary",
+			size: "sm",
+			loading: l,
+			onClick: u,
+			reserveLabels: [m],
+			children: m
+		}) : /* @__PURE__ */ c("p", {
+			ref: y,
+			tabIndex: -1,
+			className: "flex h-32 items-center text-small text-fg-secondary outline-none",
+			children: p("pagination.allShown", "All rows shown")
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (v.displayName = "Pagination.LoadMore");
+//#endregion
+export { f as n, _ as r, p as t };
+
+//# sourceMappingURL=pagination-D7fAm8qg.js.map

package/dist/chunks/pagination-D7fAm8qg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-D7fAm8qg.js","names":["__icon_ArrowLeft01Icon","__icon_ArrowRight01Icon","cn","useUiText","IconButton","KAESO_PAGINATION_VARIANTS","KAESO_PAGINATION_DEFAULT_VARIANTS","SLOTS","pageSlots","count","pageCount","current","page","i","soft","blocked","run","Pagination","t","label","previous","next","variant","LoadMore","hasMore","hasPrevious","className","ArrowLeft01Icon","onPrevious","ArrowRight01Icon","onNext","onPageChange","p","loadMore","inside","setInside","useState","ended","setEnded","caption","useRef","useLayoutEffect","Button","onLoadMore"],"sources":["../../src/components/pagination/pagination.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState, type FocusEvent } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { ArrowLeft01Icon as __icon_ArrowLeft01Icon, ArrowRight01Icon as __icon_ArrowRight01Icon } from \"@hugeicons/core-free-icons\";\nimport { Button } from \"../button/button.js\";\nimport { IconButton } from \"../icon-button/icon-button.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_PAGINATION_VARIANTS = {\n  variant: {\n    \"load-more\": {\n      classes: \"\",\n    },\n    cursor: { classes: \"\" },\n    pages: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_PAGINATION_DEFAULT_VARIANTS = { variant: \"load-more\" } as const;\n\nexport interface PaginationProps {\n  variant?: keyof typeof KAESO_PAGINATION_VARIANTS.variant | undefined;\n  hasMore?: boolean | undefined;\n  hasPrevious?: boolean | undefined;\n  loading?: boolean | undefined;\n  onLoadMore?: (() => void) | undefined;\n  onNext?: (() => void) | undefined;\n  onPrevious?: (() => void) | undefined;\n  page?: number | undefined;\n  pageCount?: number | undefined;\n  onPageChange?: ((page: number) => void) | undefined;\n  className?: string | undefined;\n}\n\nconst SLOTS = 7;\n\nfunction pageSlots(page: number, pageCount: number): (number | \"gap\")[] {\n  const count = Math.max(1, Math.floor(pageCount));\n  const current = Math.min(count, Math.max(1, Math.floor(page)));\n  if (count <= SLOTS) return Array.from({ length: count }, (_, i) => i + 1);\n  if (current <= 4) return [1, 2, 3, 4, 5, \"gap\", count];\n  if (current >= count - 3) return [1, \"gap\", count - 4, count - 3, count - 2, count - 1, count];\n  return [1, \"gap\", current - 1, current, current + 1, \"gap\", count];\n}\n\nfunction soft(blocked: boolean, run: (() => void) | undefined) {\n  return {\n    ...(blocked ? { \"aria-disabled\": true } : {}),\n    onClick: () => {\n      if (!blocked) run?.();\n    },\n  };\n}\n\nexport const Pagination = /* @__PURE__ */ forwardRef<HTMLElement, PaginationProps>(function Pagination(\n  { variant = \"load-more\", hasMore, hasPrevious, loading, onLoadMore, onNext, onPrevious, page = 1, pageCount = 1, onPageChange, className },\n  ref,\n) {\n  const t = useUiText();\n  const label = t(\"pagination.label\", \"Pagination\");\n  const previous = t(\"pagination.previous\", \"Previous page\");\n  const next = t(\"pagination.next\", \"Next page\");\n\n  if (variant === \"load-more\") {\n    return <LoadMore ref={ref} label={label} hasMore={!!hasMore} loading={loading} onLoadMore={onLoadMore} className={className} />;\n  }\n  if (variant === \"cursor\") {\n    if (!hasMore && !hasPrevious) return null;\n    return (\n      <nav ref={ref} aria-label={label} className={cn(\"flex items-center gap-8\", className)}>\n        <IconButton icon={__icon_ArrowLeft01Icon} aria-label={previous} variant=\"secondary\" {...soft(!hasPrevious, onPrevious)} />\n        <IconButton icon={__icon_ArrowRight01Icon} aria-label={next} variant=\"secondary\" {...soft(!hasMore, onNext)} />\n      </nav>\n    );\n  }\n  const count = Math.max(1, Math.floor(pageCount));\n  const current = Math.min(count, Math.max(1, Math.floor(page)));\n  return (\n    <nav ref={ref} aria-label={label} className={cn(\"flex items-center gap-4\", className)}>\n      <IconButton icon={__icon_ArrowLeft01Icon} aria-label={previous} variant=\"secondary\" {...soft(current <= 1, () => onPageChange?.(current - 1))} />\n      <span className=\"flex items-center gap-4 px-4\">\n        {pageSlots(current, count).map((p, i) =>\n          p === \"gap\" ? (\n            <span key={`gap-${i}`} aria-hidden className=\"inline-flex h-32 min-w-40 items-center justify-center text-body text-fg-tertiary\">\n              …\n            </span>\n          ) : (\n            <button\n              key={`slot-${i}`}\n              type=\"button\"\n              aria-current={p === current ? \"page\" : undefined}\n              aria-label={t(\"pagination.page\", \"Page {page}\", { page: String(p) })}\n              onClick={() => {\n                if (p !== page) onPageChange?.(p);\n              }}\n              className={cn(\n                \"relative inline-flex h-32 min-w-40 cursor-pointer items-center justify-center rounded-pill px-8 text-body font-medium tabular transition-control tap-target focus-ring-inset\",\n                p === current ? \"bg-fill-2 text-fg\" : \"text-fg-secondary hover:bg-fill-1 hover:text-fg active:bg-fill-2\",\n              )}\n            >\n              {p}\n            </button>\n          ),\n        )}\n      </span>\n      <IconButton icon={__icon_ArrowRight01Icon} aria-label={next} variant=\"secondary\" {...soft(current >= count, () => onPageChange?.(current + 1))} />\n    </nav>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Pagination.displayName = \"Pagination\";\n\nconst LoadMore = /* @__PURE__ */ forwardRef<\n  HTMLElement,\n  { label: string; hasMore: boolean; loading: boolean | undefined; onLoadMore: (() => void) | undefined; className: string | undefined }\n>(function PaginationLoadMore({ label, hasMore, loading, onLoadMore, className }, ref) {\n  const t = useUiText();\n  const loadMore = t(\"pagination.loadMore\", \"Load more\");\n  const [inside, setInside] = useState(false);\n  const [ended, setEnded] = useState(false);\n  const caption = useRef<HTMLParagraphElement>(null);\n  if (hasMore && ended) setEnded(false);\n  if (!hasMore && inside && !ended) setEnded(true);\n  useLayoutEffect(() => {\n    if (ended) caption.current?.focus();\n  }, [ended]);\n  if (!hasMore && !ended) return null;\n  return (\n    <nav\n      ref={ref}\n      aria-label={label}\n      className={cn(\"flex items-center justify-center gap-12 py-12\", className)}\n      onFocus={() => setInside(true)}\n      onBlur={(e: FocusEvent<HTMLElement>) => {\n        if (!e.currentTarget.contains(e.relatedTarget)) setInside(false);\n      }}\n    >\n      {hasMore ? (\n        <Button variant=\"secondary\" size=\"sm\" loading={loading} onClick={onLoadMore} reserveLabels={[loadMore]}>\n          {loadMore}\n        </Button>\n      ) : (\n        <p ref={caption} tabIndex={-1} className=\"flex h-32 items-center text-small text-fg-secondary outline-none\">\n          {t(\"pagination.allShown\", \"All rows shown\")}\n        </p>\n      )}\n    </nav>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") LoadMore.displayName = \"Pagination.LoadMore\";\n"],"mappings":"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"}

package/dist/chunks/picker-popover-1FHb1LQG.js

@@ -0,0 +1,119 @@
+"use client";
+import { t as e } from "./cn-BjnOAUrA.js";
+import { n as t, r as n } from "./portal-context-CTatR2Z8.js";
+import { i as r } from "./context-BELWW79w.js";
+import { t as i } from "./icon-CBzOwqrX.js";
+import { d as a, f as o, p as s } from "./tooltip-Tkm-urbi.js";
+import { t as c } from "./icon-button-Dfwpvmav.js";
+import { n as l } from "./select-BqjmQOqx.js";
+import { n as u } from "./command-list-CypqsC4T.js";
+import { forwardRef as d, useState as f, useSyncExternalStore as p } from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { ArrowDown01Icon as _, Cancel01Icon as v } from "@hugeicons/core-free-icons";
+import { Popover as y } from "@base-ui/react/popover";
+import { Dialog as b } from "@base-ui/react/dialog";
+//#region src/components/command-list/picker-popover.tsx
+var x = { width: {
+	sm: { classes: "w-320" },
+	md: { classes: "w-400" },
+	lg: { classes: "w-560" }
+} }, S = { width: "md" }, C = "(max-width: 767px)", w = (e) => {
+	if (typeof window > "u" || !window.matchMedia) return () => {};
+	let t = window.matchMedia(C);
+	return t.addEventListener("change", e), () => t.removeEventListener("change", e);
+}, T = () => typeof window < "u" && !!window.matchMedia?.(C).matches, E = /* @__PURE__ */ d(function({ trigger: i, title: a, open: o, onOpenChange: s, width: l = "md", align: d = "start", children: f }, m) {
+	let _ = r(), S = n(), C = p(w, T, () => !1), E = s ? { onOpenChange: (e) => s(e) } : {}, D = o === void 0 ? {} : { open: o };
+	return C ? /* @__PURE__ */ g(b.Root, {
+		...D,
+		...E,
+		children: [/* @__PURE__ */ h(b.Trigger, { render: i }), /* @__PURE__ */ g(b.Portal, {
+			container: S,
+			children: [/* @__PURE__ */ h(b.Backdrop, { className: "fixed inset-0 z-50 bg-overlay opacity-50 backdrop-motion" }), /* @__PURE__ */ g(b.Popup, {
+				ref: m,
+				"data-side": "bottom",
+				className: "fixed inset-safe-8 z-50 flex flex-col overflow-hidden rounded-sheet bg-raised text-fg shadow-dialog outline-none sheet-motion",
+				children: [/* @__PURE__ */ g("div", {
+					className: "flex min-h-60 shrink-0 items-center gap-12 px-24 py-12 hairline-b",
+					children: [/* @__PURE__ */ h(b.Title, {
+						className: "min-w-0 flex-1 text-title-sm font-semibold text-fg text-balance wrap-anywhere",
+						children: a
+					}), /* @__PURE__ */ h(b.Close, { render: /* @__PURE__ */ h(c, {
+						icon: v,
+						"aria-label": _("pickerPopover.close", "Close"),
+						tooltip: !1
+					}) })]
+				}), /* @__PURE__ */ h(u.Provider, {
+					value: "fill",
+					children: f
+				})]
+			})]
+		})]
+	}) : /* @__PURE__ */ g(y.Root, {
+		...D,
+		...E,
+		modal: !1,
+		children: [/* @__PURE__ */ h(y.Trigger, { render: i }), /* @__PURE__ */ h(y.Portal, {
+			container: S,
+			children: /* @__PURE__ */ h(y.Positioner, {
+				positionMethod: "fixed",
+				collisionBoundary: t(),
+				side: "bottom",
+				align: d,
+				sideOffset: 6,
+				collisionPadding: 8,
+				className: "z-50 outline-none",
+				children: /* @__PURE__ */ h(y.Popup, {
+					ref: m,
+					"aria-label": a,
+					className: e("flex max-w-full-bleed-4 flex-col overflow-hidden rounded-popover bg-raised text-fg shadow-raised outline-none popup-motion", x.width[l].classes),
+					children: /* @__PURE__ */ h(u.Provider, {
+						value: "popover",
+						children: f
+					})
+				})
+			})
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (E.displayName = "PickerPopover");
+var D = /* @__PURE__ */ d(function({ appearance: t = "default", size: n = "md", fullWidth: r, invalid: c, placeholder: u, children: d, className: p, type: v = "button", "aria-label": y, "aria-describedby": b, disabled: x, onFocus: S, onBlur: C, onClickCapture: w, ...T }, E) {
+	let [D, O] = f(!1), k = !!x && D, A = d == null || d === !1, j = o(A ? u : d), M = s(j ? y : void 0), N = a(M.id, b);
+	return /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ g("button", {
+		ref: E,
+		type: v,
+		"data-picker": "",
+		...T,
+		...k ? {
+			"aria-disabled": !0,
+			"data-disabled": ""
+		} : { disabled: x },
+		onFocus: (e) => {
+			O(!0), S?.(e);
+		},
+		onBlur: (e) => {
+			O(!1), C?.(e);
+		},
+		onClickCapture: (e) => {
+			k && (e.preventDefault(), e.stopPropagation()), w?.(e);
+		},
+		...!j && y ? { "aria-label": y } : {},
+		...N ? { "aria-describedby": N } : {},
+		...c ? { "aria-invalid": !0 } : {},
+		className: e("group/picker inline-flex min-w-0 cursor-pointer items-center justify-between rounded-pill font-medium whitespace-nowrap transition-control disabled:cursor-not-allowed", l.size[n].classes, l.appearance[t].classes, c && t !== "default" && "ring-invalid", r && "w-full", p),
+		children: [/* @__PURE__ */ h("span", {
+			className: e("flex min-w-0 flex-1 items-center truncate text-left group-disabled/picker:opacity-40", A ? "font-regular text-fg-tertiary" : "group-disabled/picker:text-fg"),
+			children: A ? u : d
+		}), /* @__PURE__ */ h("span", {
+			className: "flex shrink-0 text-fg-tertiary group-disabled/picker:opacity-40",
+			children: /* @__PURE__ */ h(i, {
+				icon: _,
+				size: "sm"
+			})
+		})]
+	}), M.node] });
+});
+process.env.NODE_ENV !== "production" && (D.displayName = "PickerTrigger");
+//#endregion
+export { D as i, x as n, E as r, S as t };
+
+//# sourceMappingURL=picker-popover-1FHb1LQG.js.map

package/dist/chunks/picker-popover-1FHb1LQG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker-popover-1FHb1LQG.js","names":["BaseDialog","__icon_Cancel01Icon","BasePopover","_Fragment","__icon_ArrowDown01Icon","cn","pageBoundary","usePortalContainer","useUiText","Icon","joinIds","showsText","useHiddenDescription","IconButton","KAESO_SELECT_VARIANTS","CommandListHeightContext","Fragment$1","KAESO_PICKER_POPOVER_VARIANTS","KAESO_PICKER_POPOVER_DEFAULT_VARIANTS","NARROW","subscribeNarrow","q","onChange","isNarrow","PickerPopover","t","container","narrow","useSyncExternalStore","change","onOpenChange","o","state","open","Dialog","trigger","title","Cancel01Icon","Popover","width","PickerTrigger","ariaLabel","describedBy","props","focused","setFocused","useState","held","disabled","empty","children","shows","placeholder","purpose","descriptions","onFocus","onBlur","onClickCapture","invalid","size","appearance","fullWidth","className","ArrowDown01Icon"],"sources":["../../src/components/command-list/picker-popover.tsx"],"sourcesContent":["import { forwardRef, useState, useSyncExternalStore, type ButtonHTMLAttributes, type ReactElement, type ReactNode } from \"react\";\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { cn } from \"../../utils/cn.js\";\nimport { pageBoundary, usePortalContainer } from \"../../utils/portal-context.js\";\nimport { Cancel01Icon as __icon_Cancel01Icon, ArrowDown01Icon as __icon_ArrowDown01Icon } from \"@hugeicons/core-free-icons\";\nimport { Icon } from \"../icon/icon.js\";\nimport { IconButton } from \"../icon-button/icon-button.js\";\nimport { KAESO_SELECT_VARIANTS } from \"../select/select.js\";\nimport { useUiText } from \"../../i18n/context.js\";\nimport { joinIds, showsText, useHiddenDescription } from \"../../utils/hidden-description.js\";\nimport { CommandListHeightContext } from \"./command-list.js\";\n\nexport const KAESO_PICKER_POPOVER_VARIANTS = {\n  width: {\n    sm: { classes: \"w-320\" },\n    md: { classes: \"w-400\" },\n    lg: { classes: \"w-560\" },\n  },\n} as const;\nexport const KAESO_PICKER_POPOVER_DEFAULT_VARIANTS = { width: \"md\" } as const;\n\nconst NARROW = \"(max-width: 767px)\";\nconst subscribeNarrow = (onChange: () => void) => {\n  if (typeof window === \"undefined\" || !window.matchMedia) return () => {};\n  const q = window.matchMedia(NARROW);\n  q.addEventListener(\"change\", onChange);\n  return () => q.removeEventListener(\"change\", onChange);\n};\nconst isNarrow = () => typeof window !== \"undefined\" && !!window.matchMedia?.(NARROW).matches;\n\nexport interface PickerPopoverProps {\n  trigger: ReactElement;\n  title: string;\n  open?: boolean | undefined;\n  onOpenChange?: ((open: boolean) => void) | undefined;\n  width?: keyof typeof KAESO_PICKER_POPOVER_VARIANTS.width | undefined;\n  align?: \"start\" | \"end\" | undefined;\n  children: ReactNode;\n}\n\nexport const PickerPopover = /* @__PURE__ */ forwardRef<HTMLDivElement, PickerPopoverProps>(function PickerPopover(\n  { trigger, title, open, onOpenChange, width = \"md\", align = \"start\", children },\n  ref,\n) {\n  const t = useUiText();\n  const container = usePortalContainer();\n  const narrow = useSyncExternalStore(subscribeNarrow, isNarrow, () => false);\n  const change = onOpenChange ? { onOpenChange: (o: boolean) => onOpenChange(o) } : {};\n  const state = open !== undefined ? { open } : {};\n  if (narrow)\n    return (\n      <BaseDialog.Root {...state} {...change}>\n        <BaseDialog.Trigger render={trigger} />\n        <BaseDialog.Portal container={container}>\n          <BaseDialog.Backdrop className=\"fixed inset-0 z-50 bg-overlay opacity-50 backdrop-motion\" />\n          <BaseDialog.Popup\n            ref={ref}\n            data-side=\"bottom\"\n            className=\"fixed inset-safe-8 z-50 flex flex-col overflow-hidden rounded-sheet bg-raised text-fg shadow-dialog outline-none sheet-motion\"\n          >\n            <div className=\"flex min-h-60 shrink-0 items-center gap-12 px-24 py-12 hairline-b\">\n              <BaseDialog.Title className=\"min-w-0 flex-1 text-title-sm font-semibold text-fg text-balance wrap-anywhere\">{title}</BaseDialog.Title>\n              <BaseDialog.Close render={<IconButton icon={__icon_Cancel01Icon} aria-label={t(\"pickerPopover.close\", \"Close\")} tooltip={false} />} />\n            </div>\n            <CommandListHeightContext.Provider value=\"fill\">{children}</CommandListHeightContext.Provider>\n          </BaseDialog.Popup>\n        </BaseDialog.Portal>\n      </BaseDialog.Root>\n    );\n  return (\n    <BasePopover.Root {...state} {...change} modal={false}>\n      <BasePopover.Trigger render={trigger} />\n      <BasePopover.Portal container={container}>\n        <BasePopover.Positioner\n          positionMethod=\"fixed\"\n          collisionBoundary={pageBoundary()}\n          side=\"bottom\"\n          align={align}\n          sideOffset={6}\n          collisionPadding={8}\n          className=\"z-50 outline-none\"\n        >\n          <BasePopover.Popup\n            ref={ref}\n            aria-label={title}\n            className={cn(\n              \"flex max-w-full-bleed-4 flex-col overflow-hidden rounded-popover bg-raised text-fg shadow-raised outline-none popup-motion\",\n              KAESO_PICKER_POPOVER_VARIANTS.width[width].classes,\n            )}\n          >\n            <CommandListHeightContext.Provider value=\"popover\">{children}</CommandListHeightContext.Provider>\n          </BasePopover.Popup>\n        </BasePopover.Positioner>\n      </BasePopover.Portal>\n    </BasePopover.Root>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") PickerPopover.displayName = \"PickerPopover\";\n\nexport interface PickerTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n  appearance?: keyof typeof KAESO_SELECT_VARIANTS.appearance | undefined;\n  size?: keyof typeof KAESO_SELECT_VARIANTS.size | undefined;\n  fullWidth?: boolean | undefined;\n  invalid?: boolean | undefined;\n  placeholder?: ReactNode | undefined;\n  children?: ReactNode | undefined;\n  \"aria-label\"?: string | undefined;\n  \"data-force\"?: string | undefined;\n}\n\nexport const PickerTrigger = /* @__PURE__ */ forwardRef<HTMLButtonElement, PickerTriggerProps>(function PickerTrigger(\n  {\n    appearance = \"default\",\n    size = \"md\",\n    fullWidth,\n    invalid,\n    placeholder,\n    children,\n    className,\n    type = \"button\",\n    \"aria-label\": ariaLabel,\n    \"aria-describedby\": describedBy,\n    disabled,\n    onFocus,\n    onBlur,\n    onClickCapture,\n    ...props\n  },\n  ref,\n) {\n  const [focused, setFocused] = useState(false);\n  // A natively disabled button that holds focus drops it to <body>; stay focusable until it blurs.\n  const held = !!disabled && focused;\n  const empty = children === undefined || children === null || children === false;\n  const shows = showsText(empty ? placeholder : children);\n  const purpose = useHiddenDescription(shows ? ariaLabel : undefined);\n  const descriptions = joinIds(purpose.id, describedBy);\n  return (\n    <>\n      <button\n        ref={ref}\n        type={type}\n        data-picker=\"\"\n        {...props}\n        {...(held ? { \"aria-disabled\": true, \"data-disabled\": \"\" } : { disabled })}\n        onFocus={(e) => {\n          setFocused(true);\n          onFocus?.(e);\n        }}\n        onBlur={(e) => {\n          setFocused(false);\n          onBlur?.(e);\n        }}\n        onClickCapture={(e) => {\n          if (held) {\n            e.preventDefault();\n            e.stopPropagation();\n          }\n          onClickCapture?.(e);\n        }}\n        {...(!shows && ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n        {...(descriptions ? { \"aria-describedby\": descriptions } : {})}\n        {...(invalid ? { \"aria-invalid\": true } : {})}\n        className={cn(\n          \"group/picker inline-flex min-w-0 cursor-pointer items-center justify-between rounded-pill font-medium whitespace-nowrap transition-control disabled:cursor-not-allowed\",\n          KAESO_SELECT_VARIANTS.size[size].classes,\n          KAESO_SELECT_VARIANTS.appearance[appearance].classes,\n          invalid && appearance !== \"default\" && \"ring-invalid\",\n          fullWidth && \"w-full\",\n          className,\n        )}\n      >\n        <span\n          className={cn(\n            \"flex min-w-0 flex-1 items-center truncate text-left group-disabled/picker:opacity-40\",\n            empty ? \"font-regular text-fg-tertiary\" : \"group-disabled/picker:text-fg\",\n          )}\n        >\n          {empty ? placeholder : children}\n        </span>\n        <span className=\"flex shrink-0 text-fg-tertiary group-disabled/picker:opacity-40\">\n          <Icon icon={__icon_ArrowDown01Icon} size=\"sm\" />\n        </span>\n      </button>\n      {purpose.node}\n    </>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") PickerTrigger.displayName = \"PickerTrigger\";\n"],"mappings":"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"}