@logicplanes/kaeso-ui 0.4.2 → 0.4.4

package/dist/components/dialog.js

@@ -1,138 +1,172 @@
 "use client";
 import { i as e } from "../chunks/context-BELWW79w.js";
-import { n as t } from "../chunks/button-Dzu7_csE.js";
+import { n as t } from "../chunks/button-CzuxqawA.js";
 import { n } from "../chunks/resize-motion-DS3rIIqy.js";
-import { a as r, c as i, i as a, l as o, n as s, o as c, r as l, s as u, t as d, u as f } from "../chunks/dialog-DQ9vZ7vr.js";
-import { Fragment as p, useEffect as m, useId as h, useLayoutEffect as g, useMemo as _, useRef as v, useState as y } from "react";
-import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { a as r, c as i, i as a, l as o, n as s, o as c, r as l, s as u, t as d, u as f } from "../chunks/dialog-Cg9A_6SF.js";
+import { Fragment as p, createContext as m, forwardRef as h, useContext as g, useEffect as _, useId as ee, useLayoutEffect as v, useMemo as y, useRef as b, useState as x } from "react";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/components/dialog/step-dialog.tsx
-function C() {
+var T = {
+	size: {
+		sm: { classes: c.size.sm.classes },
+		md: { classes: c.size.md.classes },
+		lg: { classes: c.size.lg.classes }
+	},
+	tone: {
+		default: { classes: "" },
+		danger: { classes: "" }
+	}
+}, E = {
+	size: "sm",
+	tone: "default"
+}, D = /* @__PURE__ */ m(null);
+function O() {
+	return g(D);
+}
+function k() {
 	return typeof window < "u" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
 }
-var w = (e) => e?.closest("[data-dialog-body]") ?? null;
-function T({ open: n, onOpenChange: r, title: i, steps: a, submitLabel: o, onSubmit: c, submitting: l, tone: u = "default", size: d = "sm", inline: p, defaultStep: _ = 0, result: T }) {
-	let [E, D] = y(_), O = h(), k = e(), [A, j] = y(!1), [M, N] = y(null), [P, F] = y({
+var A = (e) => e?.closest("[data-dialog-body]") ?? null, j = /* @__PURE__ */ h(function({ open: n, onOpenChange: r, title: i, steps: a, submitLabel: o, onSubmit: c, submitting: l, tone: u = "default", size: d = "sm", inline: p, defaultStep: m = 0, result: h }, g) {
+	let [T, E] = x(m), O = ee(), j = e(), [M, N] = x(!1), [P, F] = x(!1), [I, L] = x(null), [R, te] = x({
 		open: n,
-		defaultStep: _
+		defaultStep: m
 	});
-	(P.open !== n || P.defaultStep !== _) && (F({
+	(R.open !== n || R.defaultStep !== m) && (te({
 		open: n,
-		defaultStep: _
-	}), (n || P.defaultStep !== _) && (D(_), j(!1), N(null)));
-	let I = v([]), L = v(null), R = v(!1), z = v(E), B = (e) => {
-		R.current = !0, j(!0), N(C() ? null : e > E ? "forward" : "back"), D(e);
+		defaultStep: m
+	}), (n || R.defaultStep !== m) && (E(m), N(!1), L(null)));
+	let z = b([]), B = b(null), V = b(!1), H = b(T), U = (e) => {
+		V.current = !0, N(!0), L(k() ? null : e > T ? "forward" : "back"), E(e);
 	};
-	g(() => {
-		if (z.current === E) return;
-		z.current = E;
-		let e = w(I.current[E]);
+	v(() => {
+		if (H.current === T) return;
+		H.current = T;
+		let e = A(z.current[T]);
 		e && (e.scrollTop = 0);
-	}, [E]);
-	let V = !!T;
-	g(() => {
-		if (!V) return;
-		let e = w(L.current);
-		e && (e.scrollTop = 0), f(L.current);
-	}, [V]), m(() => {
-		R.current && (R.current = !1, f(I.current[E]));
-	}, [E]);
-	let H = a[Math.min(E, a.length - 1)], U = E >= a.length - 1, W = H?.blockedReason, G = () => {
-		W || l || (U ? c() : B(E + 1));
-	}, K = {
-		current: E + 1,
+	}, [T]);
+	let W = !!h;
+	v(() => {
+		if (!W) return;
+		let e = A(B.current);
+		e && (e.scrollTop = 0), f(B.current);
+	}, [W]), _(() => {
+		V.current && (V.current = !1, f(z.current[T]));
+	}, [T]);
+	let G = a[Math.min(T, a.length - 1)], K = T >= a.length - 1, q = G?.blockedReason, J = () => {
+		if (q || l || P) return;
+		if (K) return c();
+		let e = G?.onContinue;
+		if (!e) return U(T + 1);
+		let t = T + 1;
+		F(!0), Promise.resolve().then(e).then((e) => e && U(t), () => {}).finally(() => F(!1));
+	}, Y = b(J);
+	v(() => {
+		Y.current = J;
+	});
+	let [X, ne] = x(0);
+	_(() => {
+		X && Y.current();
+	}, [X]);
+	let re = y(() => ({ advance: () => ne((e) => e + 1) }), []), Z = !!l || P, Q = {
+		current: T + 1,
 		total: a.length
-	}, q = k("stepDialog.continue", "Continue"), [J, Y = ""] = k("stepDialog.stepAnnouncement", "Step {current} of {total}: {title}", K).split("{title}"), X = /* @__PURE__ */ x("div", {
+	}, ie = j("stepDialog.continue", "Continue"), [ae, oe = ""] = j("stepDialog.stepAnnouncement", "Step {current} of {total}: {title}", Q).split("{title}"), se = /* @__PURE__ */ C("div", {
 		className: "-m-8 overflow-clip p-8",
-		children: a.map((e, t) => /* @__PURE__ */ S("section", {
+		children: a.map((e, t) => /* @__PURE__ */ w("section", {
 			ref: (e) => {
-				I.current[t] = e;
+				z.current[t] = e;
 			},
 			"aria-labelledby": `${O}-step-${e.id}`,
-			...t === E ? M ? { "data-enter": M } : {} : { hidden: !0 },
+			...t === T ? I ? { "data-enter": I } : {} : { hidden: !0 },
 			className: "flex min-w-0 flex-col gap-16 step-motion",
-			children: [/* @__PURE__ */ S("div", {
+			children: [/* @__PURE__ */ w("div", {
 				className: "flex flex-col gap-4",
-				children: [/* @__PURE__ */ x("h3", {
+				children: [/* @__PURE__ */ C("h3", {
 					id: `${O}-step-${e.id}`,
 					tabIndex: -1,
 					className: "text-body-lg font-semibold text-fg outline-none",
 					children: e.title
-				}), e.description && /* @__PURE__ */ x("p", {
+				}), e.description && /* @__PURE__ */ C("p", {
 					className: "text-small text-fg-secondary",
 					children: e.description
 				})]
 			}), e.content]
 		}, e.id))
-	}), Z = {
+	}), $ = {
 		...n === void 0 ? {} : { open: n },
 		...r ? { onOpenChange: r } : {},
 		...p ? { inline: p } : {},
 		persistent: !0
 	};
-	return T ? /* @__PURE__ */ S(s, {
-		...Z,
+	return h ? /* @__PURE__ */ w(s, {
+		ref: g,
+		...$,
 		anchor: "top",
-		size: T.size ?? d,
-		title: T.title,
-		description: T.description,
-		footer: T.footer,
-		children: [/* @__PURE__ */ x("p", {
+		size: h.size ?? d,
+		title: h.title,
+		description: h.description,
+		footer: h.footer,
+		children: [/* @__PURE__ */ C("p", {
 			className: "sr-only",
 			"aria-live": "polite",
-			children: T.title
-		}), /* @__PURE__ */ x("div", {
+			children: h.title
+		}), /* @__PURE__ */ C("div", {
 			className: "-m-8 overflow-clip p-8",
-			children: /* @__PURE__ */ x("section", {
-				ref: L,
-				...C() ? {} : { "data-enter": "forward" },
+			children: /* @__PURE__ */ C("section", {
+				ref: B,
+				...k() ? {} : { "data-enter": "forward" },
 				className: "flex min-w-0 flex-col step-motion",
-				children: T.content
+				children: h.content
 			})
 		})]
-	}) : /* @__PURE__ */ S(s, {
-		...Z,
+	}) : /* @__PURE__ */ w(s, {
+		ref: g,
+		...$,
 		anchor: "top",
-		busy: !!l,
+		busy: Z,
 		size: d,
 		title: i,
-		description: a.length > 1 ? k("stepDialog.stepOf", "Step {current} of {total}", K) : void 0,
-		onSubmit: G,
-		footer: /* @__PURE__ */ S(b, { children: [E > 0 ? /* @__PURE__ */ x(t, {
-			onClick: () => B(E - 1),
-			disabled: !!l,
-			children: k("stepDialog.back", "Back")
-		}) : /* @__PURE__ */ x(t, {
+		description: a.length > 1 ? j("stepDialog.stepOf", "Step {current} of {total}", Q) : void 0,
+		onSubmit: J,
+		footer: /* @__PURE__ */ w(S, { children: [T > 0 ? /* @__PURE__ */ C(t, {
+			onClick: () => U(T - 1),
+			disabled: Z,
+			children: j("stepDialog.back", "Back")
+		}) : /* @__PURE__ */ C(t, {
 			onClick: () => r?.(!1),
-			disabled: !!l,
-			children: k("stepDialog.cancel", "Cancel")
-		}), /* @__PURE__ */ x(t, {
-			variant: U && u === "danger" ? "danger" : "primary",
-			loading: U && l,
-			disabled: !!W,
-			...W ? { disabledReason: W } : {},
-			onClick: G,
-			children: U ? o : q
+			disabled: Z,
+			children: j("stepDialog.cancel", "Cancel")
+		}), /* @__PURE__ */ C(t, {
+			variant: K && u === "danger" ? "danger" : "primary",
+			loading: K ? l : P,
+			disabled: !!q,
+			...q ? { disabledReason: q } : {},
+			onClick: J,
+			children: K ? o : G?.continueLabel ?? ie
 		})] }),
-		children: [/* @__PURE__ */ x("p", {
+		children: [/* @__PURE__ */ C("p", {
 			className: "sr-only",
 			"aria-live": "polite",
-			children: A && H && /* @__PURE__ */ S(b, { children: [
-				J,
-				H.title,
-				Y
+			children: M && G && /* @__PURE__ */ w(S, { children: [
+				ae,
+				G.title,
+				oe
 			] })
-		}), X]
+		}), /* @__PURE__ */ C(D.Provider, {
+			value: re,
+			children: se
+		})]
 	});
-}
-process.env.NODE_ENV !== "production" && (T.displayName = "StepDialog");
+});
+process.env.NODE_ENV !== "production" && (j.displayName = "StepDialog");
 //#endregion
 //#region src/components/dialog/scope.tsx
-var E = (e) => e.open || !e.mounted ? e : {
+var M = {}, N = {}, P = (e) => e.open || !e.mounted ? e : {
 	...e,
 	mounted: !1
 };
-function D({ open: e, children: t }) {
-	let [r, i] = y({
+function F({ open: e, children: t }) {
+	let [r, i] = x({
 		open: e,
 		session: 0,
 		mounted: e
@@ -142,23 +176,23 @@ function D({ open: e, children: t }) {
 		session: e ? r.session + 1 : r.session,
 		mounted: e || r.mounted
 	});
-	let a = v(/* @__PURE__ */ new Set()), o = v(!e);
-	m(() => {
-		o.current = !e, !e && a.current.size === 0 && i(E);
+	let a = b(/* @__PURE__ */ new Set()), o = b(!e);
+	_(() => {
+		o.current = !e, !e && a.current.size === 0 && i(P);
 	}, [e]);
-	let s = _(() => ({
+	let s = y(() => ({
 		showing: (e) => void a.current.add(e),
 		hidden: (e) => {
-			a.current.delete(e), o.current && a.current.size === 0 && i(E);
+			a.current.delete(e), o.current && a.current.size === 0 && i(P);
 		}
 	}), []);
-	return r.mounted ? /* @__PURE__ */ x(n.Provider, {
+	return r.mounted ? /* @__PURE__ */ C(n.Provider, {
 		value: s,
-		children: /* @__PURE__ */ x(p, { children: t }, r.session)
+		children: /* @__PURE__ */ C(p, { children: t }, r.session)
 	}) : null;
 }
-process.env.NODE_ENV !== "production" && (D.displayName = "DialogScope");
+process.env.NODE_ENV !== "production" && (F.displayName = "DialogScope");
 //#endregion
-export { d as AlertDialog, s as Dialog, D as DialogScope, l as KAESO_ALERT_DIALOG_DEFAULT_VARIANTS, a as KAESO_ALERT_DIALOG_VARIANTS, r as KAESO_DIALOG_DEFAULT_VARIANTS, c as KAESO_DIALOG_VARIANTS, u as KAESO_LAYER_DIALOG_DEFAULT_VARIANTS, i as KAESO_LAYER_DIALOG_VARIANTS, o as LayerDialog, T as StepDialog };
+export { d as AlertDialog, s as Dialog, F as DialogScope, l as KAESO_ALERT_DIALOG_DEFAULT_VARIANTS, a as KAESO_ALERT_DIALOG_VARIANTS, r as KAESO_DIALOG_DEFAULT_VARIANTS, N as KAESO_DIALOG_SCOPE_DEFAULT_VARIANTS, M as KAESO_DIALOG_SCOPE_VARIANTS, c as KAESO_DIALOG_VARIANTS, u as KAESO_LAYER_DIALOG_DEFAULT_VARIANTS, i as KAESO_LAYER_DIALOG_VARIANTS, E as KAESO_STEP_DIALOG_DEFAULT_VARIANTS, T as KAESO_STEP_DIALOG_VARIANTS, o as LayerDialog, j as StepDialog, O as useStepDialog };
 
 //# sourceMappingURL=dialog.js.map

package/dist/components/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":["_Fragment","useUiText","Button","KAESO_DIALOG_DEFAULT_VARIANTS","KAESO_LAYER_DIALOG_VARIANTS","KAESO_ALERT_DIALOG_VARIANTS","LayerDialog","Dialog","KAESO_DIALOG_VARIANTS","KAESO_ALERT_DIALOG_DEFAULT_VARIANTS","KAESO_LAYER_DIALOG_DEFAULT_VARIANTS","AlertDialog","focusDialogSection","Fragment$1","reducedMotion","bodyOf","el","StepDialog","index","setIndex","useState","defaultStep","uid","useId","t","announced","setAnnounced","enter","setEnter","opened","setOpened","open","sections","useRef","resultSection","moved","shown","go","to","body","finished","result","useLayoutEffect","useEffect","step","steps","last","blocked","next","submitting","onSubmit","progress","continueLabel","heardBefore","heardAfter","stepList","i","s","frame","onOpenChange","inline","size","tone","submitLabel","unmountClosed","DialogScope","state","setState","showing","closed","tracker","useMemo","id","DialogScopeContext","Fragment"],"sources":["../../src/components/dialog/step-dialog.tsx","../../src/components/dialog/scope.tsx"],"sourcesContent":["import { useEffect, useId, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { Button } from \"../button/button.js\";\nimport { Dialog, KAESO_DIALOG_VARIANTS } from \"./dialog.js\";\nimport { focusDialogSection } from \"./focus.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport interface DialogStep {\n  id: string;\n  title: ReactNode;\n  description?: ReactNode | undefined;\n  content: ReactNode;\n  blockedReason?: string | undefined;\n}\n\nexport interface StepDialogResult {\n  title: ReactNode;\n  description?: ReactNode | undefined;\n  content: ReactNode;\n  footer: ReactNode;\n  size?: keyof typeof KAESO_DIALOG_VARIANTS.size | undefined;\n}\n\nexport interface StepDialogProps {\n  open?: boolean | undefined;\n  onOpenChange?: ((open: boolean) => void) | undefined;\n  title: ReactNode;\n  steps: DialogStep[];\n  submitLabel: string;\n  onSubmit: () => void;\n  submitting?: boolean | undefined;\n  tone?: \"default\" | \"danger\" | undefined;\n  size?: keyof typeof KAESO_DIALOG_VARIANTS.size | undefined;\n  inline?: boolean | undefined;\n  defaultStep?: number | undefined;\n  result?: StepDialogResult | undefined;\n}\n\nfunction reducedMotion() {\n  return typeof window !== \"undefined\" && !!window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\nconst bodyOf = (el: HTMLElement | null | undefined) => el?.closest<HTMLElement>(\"[data-dialog-body]\") ?? null;\n\nexport function StepDialog({\n  open,\n  onOpenChange,\n  title,\n  steps,\n  submitLabel,\n  onSubmit,\n  submitting,\n  tone = \"default\",\n  size = \"sm\",\n  inline,\n  defaultStep = 0,\n  result,\n}: StepDialogProps) {\n  const [index, setIndex] = useState(defaultStep);\n  const uid = useId();\n  const t = useUiText();\n  const [announced, setAnnounced] = useState(false);\n  const [enter, setEnter] = useState<\"forward\" | \"back\" | null>(null);\n  const [opened, setOpened] = useState({ open, defaultStep });\n  if (opened.open !== open || opened.defaultStep !== defaultStep) {\n    setOpened({ open, defaultStep });\n    if (open || opened.defaultStep !== defaultStep) {\n      setIndex(defaultStep);\n      setAnnounced(false);\n      setEnter(null);\n    }\n  }\n  const sections = useRef<(HTMLElement | null)[]>([]);\n  const resultSection = useRef<HTMLElement | null>(null);\n  const moved = useRef(false);\n  const shown = useRef(index);\n  const go = (to: number) => {\n    moved.current = true;\n    setAnnounced(true);\n    setEnter(reducedMotion() ? null : to > index ? \"forward\" : \"back\");\n    setIndex(to);\n  };\n  useLayoutEffect(() => {\n    if (shown.current === index) return;\n    shown.current = index;\n    const body = bodyOf(sections.current[index]);\n    if (body) body.scrollTop = 0;\n  }, [index]);\n  const finished = !!result;\n  useLayoutEffect(() => {\n    if (!finished) return;\n    const body = bodyOf(resultSection.current);\n    if (body) body.scrollTop = 0;\n    focusDialogSection(resultSection.current);\n  }, [finished]);\n  useEffect(() => {\n    if (!moved.current) return;\n    moved.current = false;\n    focusDialogSection(sections.current[index]);\n  }, [index]);\n  const step = steps[Math.min(index, steps.length - 1)];\n  const last = index >= steps.length - 1;\n  const blocked = step?.blockedReason;\n  const next = () => {\n    if (blocked || submitting) return;\n    if (last) onSubmit();\n    else go(index + 1);\n  };\n  const progress = { current: index + 1, total: steps.length };\n  const continueLabel = t(\"stepDialog.continue\", \"Continue\");\n  const [heardBefore, heardAfter = \"\"] = t(\"stepDialog.stepAnnouncement\", \"Step {current} of {total}: {title}\", progress).split(\"{title}\");\n  const stepList = (\n    <div className=\"-m-8 overflow-clip p-8\">\n      {steps.map((s, i) => (\n        <section\n          key={s.id}\n          ref={(el) => {\n            sections.current[i] = el;\n          }}\n          aria-labelledby={`${uid}-step-${s.id}`}\n          {...(i !== index ? { hidden: true } : enter ? { \"data-enter\": enter } : {})}\n          className=\"flex min-w-0 flex-col gap-16 step-motion\"\n        >\n          <div className=\"flex flex-col gap-4\">\n            <h3 id={`${uid}-step-${s.id}`} tabIndex={-1} className=\"text-body-lg font-semibold text-fg outline-none\">\n              {s.title}\n            </h3>\n            {s.description && <p className=\"text-small text-fg-secondary\">{s.description}</p>}\n          </div>\n          {s.content}\n        </section>\n      ))}\n    </div>\n  );\n  const frame = {\n    ...(open !== undefined ? { open } : {}),\n    ...(onOpenChange ? { onOpenChange } : {}),\n    ...(inline ? { inline } : {}),\n    persistent: true,\n  };\n  if (result)\n    return (\n      <Dialog {...frame} anchor=\"top\" size={result.size ?? size} title={result.title} description={result.description} footer={result.footer}>\n        <p className=\"sr-only\" aria-live=\"polite\">\n          {result.title}\n        </p>\n        <div className=\"-m-8 overflow-clip p-8\">\n          <section ref={resultSection} {...(reducedMotion() ? {} : { \"data-enter\": \"forward\" })} className=\"flex min-w-0 flex-col step-motion\">\n            {result.content}\n          </section>\n        </div>\n      </Dialog>\n    );\n  return (\n    <Dialog\n      {...frame}\n      anchor=\"top\"\n      busy={!!submitting}\n      size={size}\n      title={title}\n      description={steps.length > 1 ? t(\"stepDialog.stepOf\", \"Step {current} of {total}\", progress) : undefined}\n      onSubmit={next}\n      footer={\n        <>\n          {index > 0 ? (\n            <Button onClick={() => go(index - 1)} disabled={!!submitting}>\n              {t(\"stepDialog.back\", \"Back\")}\n            </Button>\n          ) : (\n            <Button onClick={() => onOpenChange?.(false)} disabled={!!submitting}>\n              {t(\"stepDialog.cancel\", \"Cancel\")}\n            </Button>\n          )}\n          <Button\n            variant={last && tone === \"danger\" ? \"danger\" : \"primary\"}\n            loading={last && submitting}\n            disabled={!!blocked}\n            {...(blocked ? { disabledReason: blocked } : {})}\n            onClick={next}\n          >\n            {last ? submitLabel : continueLabel}\n          </Button>\n        </>\n      }\n    >\n      <p className=\"sr-only\" aria-live=\"polite\">\n        {announced && step && (\n          <>\n            {heardBefore}\n            {step.title}\n            {heardAfter}\n          </>\n        )}\n      </p>\n      {stepList}\n    </Dialog>\n  );\n}\nif (process.env.NODE_ENV !== \"production\") StepDialog.displayName = \"StepDialog\";\n","import { Fragment, useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { DialogScopeContext, type DialogScopeTracker } from \"../../utils/dialog-scope.js\";\n\nexport interface DialogScopeProps {\n  open: boolean;\n  children: ReactNode;\n}\n\ninterface ScopeState {\n  open: boolean;\n  session: number;\n  mounted: boolean;\n}\n\nconst unmountClosed = (s: ScopeState): ScopeState => (s.open || !s.mounted ? s : { ...s, mounted: false });\n\nexport function DialogScope({ open, children }: DialogScopeProps) {\n  const [state, setState] = useState<ScopeState>({ open, session: 0, mounted: open });\n  if (state.open !== open) setState({ open, session: open ? state.session + 1 : state.session, mounted: open || state.mounted });\n  const showing = useRef(new Set<string>());\n  const closed = useRef(!open);\n  useEffect(() => {\n    closed.current = !open;\n    if (!open && showing.current.size === 0) setState(unmountClosed);\n  }, [open]);\n  const tracker = useMemo<DialogScopeTracker>(\n    () => ({\n      showing: (id) => void showing.current.add(id),\n      hidden: (id) => {\n        showing.current.delete(id);\n        if (closed.current && showing.current.size === 0) setState(unmountClosed);\n      },\n    }),\n    [],\n  );\n  if (!state.mounted) return null;\n  return (\n    <DialogScopeContext.Provider value={tracker}>\n      <Fragment key={state.session}>{children}</Fragment>\n    </DialogScopeContext.Provider>\n  );\n}\nif (process.env.NODE_ENV !== \"production\") DialogScope.displayName = \"DialogScope\";\n"],"mappings":"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"}
+{"version":3,"file":"dialog.js","names":["_Fragment","useUiText","Button","KAESO_DIALOG_DEFAULT_VARIANTS","KAESO_LAYER_DIALOG_VARIANTS","KAESO_ALERT_DIALOG_VARIANTS","LayerDialog","Dialog","KAESO_DIALOG_VARIANTS","KAESO_ALERT_DIALOG_DEFAULT_VARIANTS","KAESO_LAYER_DIALOG_DEFAULT_VARIANTS","AlertDialog","focusDialogSection","Fragment$1","KAESO_STEP_DIALOG_VARIANTS","KAESO_STEP_DIALOG_DEFAULT_VARIANTS","StepDialogContext","useStepDialog","useContext","reducedMotion","bodyOf","el","StepDialog","index","setIndex","useState","defaultStep","uid","useId","t","announced","setAnnounced","continuing","setContinuing","enter","setEnter","opened","setOpened","open","sections","useRef","resultSection","moved","shown","go","to","body","finished","result","useLayoutEffect","useEffect","step","steps","last","blocked","next","submitting","onSubmit","check","ok","latestNext","advanced","setAdvanced","controls","useMemo","n","waiting","progress","continueLabel","heardBefore","heardAfter","stepList","i","s","frame","onOpenChange","inline","size","tone","submitLabel","KAESO_DIALOG_SCOPE_VARIANTS","KAESO_DIALOG_SCOPE_DEFAULT_VARIANTS","unmountClosed","DialogScope","state","setState","showing","closed","tracker","id","DialogScopeContext","Fragment"],"sources":["../../src/components/dialog/step-dialog.tsx","../../src/components/dialog/scope.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { Button } from \"../button/button.js\";\nimport { Dialog, KAESO_DIALOG_VARIANTS } from \"./dialog.js\";\nimport { focusDialogSection } from \"./focus.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_STEP_DIALOG_VARIANTS = {\n  size: {\n    sm: { classes: KAESO_DIALOG_VARIANTS.size.sm.classes },\n    md: { classes: KAESO_DIALOG_VARIANTS.size.md.classes },\n    lg: { classes: KAESO_DIALOG_VARIANTS.size.lg.classes },\n  },\n  tone: {\n    default: { classes: \"\" },\n    danger: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_STEP_DIALOG_DEFAULT_VARIANTS = { size: \"sm\", tone: \"default\" } as const;\n\nexport interface DialogStep {\n  id: string;\n  title: ReactNode;\n  description?: ReactNode | undefined;\n  content: ReactNode;\n  blockedReason?: string | undefined;\n  continueLabel?: string | undefined;\n  onContinue?: (() => Promise<boolean> | boolean) | undefined;\n}\n\nexport interface StepDialogResult {\n  title: ReactNode;\n  description?: ReactNode | undefined;\n  content: ReactNode;\n  footer: ReactNode;\n  size?: keyof typeof KAESO_DIALOG_VARIANTS.size | undefined;\n}\n\nexport interface StepDialogProps {\n  open?: boolean | undefined;\n  onOpenChange?: ((open: boolean) => void) | undefined;\n  title: ReactNode;\n  steps: DialogStep[];\n  submitLabel: string;\n  onSubmit: () => void;\n  submitting?: boolean | undefined;\n  tone?: keyof typeof KAESO_STEP_DIALOG_VARIANTS.tone | undefined;\n  size?: keyof typeof KAESO_STEP_DIALOG_VARIANTS.size | undefined;\n  inline?: boolean | undefined;\n  defaultStep?: number | undefined;\n  result?: StepDialogResult | undefined;\n}\n\nexport interface StepDialogControls {\n  advance: () => void;\n}\n\nconst StepDialogContext = /* @__PURE__ */ createContext<StepDialogControls | null>(null);\n\nexport function useStepDialog(): StepDialogControls | null {\n  return useContext(StepDialogContext);\n}\n\nfunction reducedMotion() {\n  return typeof window !== \"undefined\" && !!window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\nconst bodyOf = (el: HTMLElement | null | undefined) => el?.closest<HTMLElement>(\"[data-dialog-body]\") ?? null;\n\nexport const StepDialog = /* @__PURE__ */ forwardRef<HTMLDivElement, StepDialogProps>(function StepDialog(\n  { open, onOpenChange, title, steps, submitLabel, onSubmit, submitting, tone = \"default\", size = \"sm\", inline, defaultStep = 0, result },\n  ref,\n) {\n  const [index, setIndex] = useState(defaultStep);\n  const uid = useId();\n  const t = useUiText();\n  const [announced, setAnnounced] = useState(false);\n  const [continuing, setContinuing] = useState(false);\n  const [enter, setEnter] = useState<\"forward\" | \"back\" | null>(null);\n  const [opened, setOpened] = useState({ open, defaultStep });\n  if (opened.open !== open || opened.defaultStep !== defaultStep) {\n    setOpened({ open, defaultStep });\n    if (open || opened.defaultStep !== defaultStep) {\n      setIndex(defaultStep);\n      setAnnounced(false);\n      setEnter(null);\n    }\n  }\n  const sections = useRef<(HTMLElement | null)[]>([]);\n  const resultSection = useRef<HTMLElement | null>(null);\n  const moved = useRef(false);\n  const shown = useRef(index);\n  const go = (to: number) => {\n    moved.current = true;\n    setAnnounced(true);\n    setEnter(reducedMotion() ? null : to > index ? \"forward\" : \"back\");\n    setIndex(to);\n  };\n  useLayoutEffect(() => {\n    if (shown.current === index) return;\n    shown.current = index;\n    const body = bodyOf(sections.current[index]);\n    if (body) body.scrollTop = 0;\n  }, [index]);\n  const finished = !!result;\n  useLayoutEffect(() => {\n    if (!finished) return;\n    const body = bodyOf(resultSection.current);\n    if (body) body.scrollTop = 0;\n    focusDialogSection(resultSection.current);\n  }, [finished]);\n  useEffect(() => {\n    if (!moved.current) return;\n    moved.current = false;\n    focusDialogSection(sections.current[index]);\n  }, [index]);\n  const step = steps[Math.min(index, steps.length - 1)];\n  const last = index >= steps.length - 1;\n  const blocked = step?.blockedReason;\n  const next = () => {\n    if (blocked || submitting || continuing) return;\n    if (last) return onSubmit();\n    const check = step?.onContinue;\n    if (!check) return go(index + 1);\n    const to = index + 1;\n    setContinuing(true);\n    void Promise.resolve()\n      .then(check)\n      .then(\n        (ok) => ok && go(to),\n        () => {},\n      )\n      .finally(() => setContinuing(false));\n  };\n  const latestNext = useRef(next);\n  useLayoutEffect(() => {\n    latestNext.current = next;\n  });\n  const [advanced, setAdvanced] = useState(0);\n  useEffect(() => {\n    if (advanced) latestNext.current();\n  }, [advanced]);\n  const controls = useMemo<StepDialogControls>(() => ({ advance: () => setAdvanced((n) => n + 1) }), []);\n  const waiting = !!submitting || continuing;\n  const progress = { current: index + 1, total: steps.length };\n  const continueLabel = t(\"stepDialog.continue\", \"Continue\");\n  const [heardBefore, heardAfter = \"\"] = t(\"stepDialog.stepAnnouncement\", \"Step {current} of {total}: {title}\", progress).split(\"{title}\");\n  const stepList = (\n    <div className=\"-m-8 overflow-clip p-8\">\n      {steps.map((s, i) => (\n        <section\n          key={s.id}\n          ref={(el) => {\n            sections.current[i] = el;\n          }}\n          aria-labelledby={`${uid}-step-${s.id}`}\n          {...(i !== index ? { hidden: true } : enter ? { \"data-enter\": enter } : {})}\n          className=\"flex min-w-0 flex-col gap-16 step-motion\"\n        >\n          <div className=\"flex flex-col gap-4\">\n            <h3 id={`${uid}-step-${s.id}`} tabIndex={-1} className=\"text-body-lg font-semibold text-fg outline-none\">\n              {s.title}\n            </h3>\n            {s.description && <p className=\"text-small text-fg-secondary\">{s.description}</p>}\n          </div>\n          {s.content}\n        </section>\n      ))}\n    </div>\n  );\n  const frame = {\n    ...(open !== undefined ? { open } : {}),\n    ...(onOpenChange ? { onOpenChange } : {}),\n    ...(inline ? { inline } : {}),\n    persistent: true,\n  };\n  if (result)\n    return (\n      <Dialog ref={ref} {...frame} anchor=\"top\" size={result.size ?? size} title={result.title} description={result.description} footer={result.footer}>\n        <p className=\"sr-only\" aria-live=\"polite\">\n          {result.title}\n        </p>\n        <div className=\"-m-8 overflow-clip p-8\">\n          <section ref={resultSection} {...(reducedMotion() ? {} : { \"data-enter\": \"forward\" })} className=\"flex min-w-0 flex-col step-motion\">\n            {result.content}\n          </section>\n        </div>\n      </Dialog>\n    );\n  return (\n    <Dialog\n      ref={ref}\n      {...frame}\n      anchor=\"top\"\n      busy={waiting}\n      size={size}\n      title={title}\n      description={steps.length > 1 ? t(\"stepDialog.stepOf\", \"Step {current} of {total}\", progress) : undefined}\n      onSubmit={next}\n      footer={\n        <>\n          {index > 0 ? (\n            <Button onClick={() => go(index - 1)} disabled={waiting}>\n              {t(\"stepDialog.back\", \"Back\")}\n            </Button>\n          ) : (\n            <Button onClick={() => onOpenChange?.(false)} disabled={waiting}>\n              {t(\"stepDialog.cancel\", \"Cancel\")}\n            </Button>\n          )}\n          <Button\n            variant={last && tone === \"danger\" ? \"danger\" : \"primary\"}\n            loading={last ? submitting : continuing}\n            disabled={!!blocked}\n            {...(blocked ? { disabledReason: blocked } : {})}\n            onClick={next}\n          >\n            {last ? submitLabel : (step?.continueLabel ?? continueLabel)}\n          </Button>\n        </>\n      }\n    >\n      <p className=\"sr-only\" aria-live=\"polite\">\n        {announced && step && (\n          <>\n            {heardBefore}\n            {step.title}\n            {heardAfter}\n          </>\n        )}\n      </p>\n      <StepDialogContext.Provider value={controls}>{stepList}</StepDialogContext.Provider>\n    </Dialog>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") StepDialog.displayName = \"StepDialog\";\n","import { Fragment, useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { DialogScopeContext, type DialogScopeTracker } from \"../../utils/dialog-scope.js\";\n\nexport const KAESO_DIALOG_SCOPE_VARIANTS = {} as const;\nexport const KAESO_DIALOG_SCOPE_DEFAULT_VARIANTS = {} as const;\n\nexport interface DialogScopeProps {\n  open: boolean;\n  children: ReactNode;\n}\n\ninterface ScopeState {\n  open: boolean;\n  session: number;\n  mounted: boolean;\n}\n\nconst unmountClosed = (s: ScopeState): ScopeState => (s.open || !s.mounted ? s : { ...s, mounted: false });\n\nexport function DialogScope({ open, children }: DialogScopeProps) {\n  const [state, setState] = useState<ScopeState>({ open, session: 0, mounted: open });\n  if (state.open !== open) setState({ open, session: open ? state.session + 1 : state.session, mounted: open || state.mounted });\n  const showing = useRef(new Set<string>());\n  const closed = useRef(!open);\n  useEffect(() => {\n    closed.current = !open;\n    if (!open && showing.current.size === 0) setState(unmountClosed);\n  }, [open]);\n  const tracker = useMemo<DialogScopeTracker>(\n    () => ({\n      showing: (id) => void showing.current.add(id),\n      hidden: (id) => {\n        showing.current.delete(id);\n        if (closed.current && showing.current.size === 0) setState(unmountClosed);\n      },\n    }),\n    [],\n  );\n  if (!state.mounted) return null;\n  return (\n    <DialogScopeContext.Provider value={tracker}>\n      <Fragment key={state.session}>{children}</Fragment>\n    </DialogScopeContext.Provider>\n  );\n}\nif (process.env.NODE_ENV !== \"production\") DialogScope.displayName = \"DialogScope\";\n"],"mappings":"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"}

package/dist/components/display-options.js

@@ -3,28 +3,29 @@ import { t as e } from "../chunks/cn-Dj6sRgkF.js";
 import { t } from "../chunks/dev-CR1p7gCm.js";
 import { i as n, r } from "../chunks/context-BELWW79w.js";
 import { t as i } from "../chunks/icon-D7ja-_Yk.js";
-import { t as a } from "../chunks/icon-button-CPYR21Sz.js";
-import { a as o } from "../chunks/tag-DNdX1XRR.js";
-import { r as s } from "../chunks/switch-b-VkStWj.js";
-import { r as c } from "../chunks/segmented-C97zvDR1.js";
+import { t as a } from "../chunks/icon-button-CrdF_eMG.js";
+import { a as o } from "../chunks/tag-D_M1s2qS.js";
+import { r as s } from "../chunks/switch-BNMq_kGt.js";
+import { r as c } from "../chunks/segmented-CErcoxwi.js";
 import { r as l } from "../chunks/select-x4XVsdCI.js";
-import { i as u } from "../chunks/popover-CFMwaeIP.js";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { SlidersHorizontalIcon as p, ViewOffSlashIcon as m } from "@hugeicons/core-free-icons";
+import { i as u } from "../chunks/popover-DNN4S47w.js";
+import { forwardRef as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { SlidersHorizontalIcon as m, ViewOffSlashIcon as h } from "@hugeicons/core-free-icons";
 //#region src/components/display-options/display-options.tsx
-var h = { trigger: {
+var g = { trigger: {
 	secondary: { classes: "" },
 	ghost: { classes: "" }
-} }, g = { trigger: "secondary" };
-function _({ view: e, rows: t, toggles: a, properties: u, footer: p }) {
-	let h = n(), g = r(), _ = u ? u.options.filter((e) => u.value.includes(e.value) && u.hidden?.includes(e.value)) : [];
-	return /* @__PURE__ */ f("div", {
+} }, _ = { trigger: "secondary" };
+function v({ view: e, rows: t, toggles: a, properties: u, footer: d }) {
+	let m = n(), g = r(), _ = u ? u.options.filter((e) => u.value.includes(e.value) && u.hidden?.includes(e.value)) : [];
+	return /* @__PURE__ */ p("div", {
 		className: "flex w-320 flex-col",
 		children: [
-			e && /* @__PURE__ */ d("div", {
+			e && /* @__PURE__ */ f("div", {
 				className: "p-12 pb-8",
-				children: /* @__PURE__ */ d(c, {
-					"aria-label": h("displayOptions.view", "View"),
+				children: /* @__PURE__ */ f(c, {
+					"aria-label": m("displayOptions.view", "View"),
 					options: e.options,
 					value: e.value,
 					onValueChange: e.onChange,
@@ -33,17 +34,17 @@ function _({ view: e, rows: t, toggles: a, properties: u, footer: p }) {
 					className: "bg-item-hover"
 				})
 			}),
-			t && t.length > 0 && /* @__PURE__ */ d("div", {
+			t && t.length > 0 && /* @__PURE__ */ f("div", {
 				className: "flex flex-col px-12 py-4",
-				children: t.map((e) => /* @__PURE__ */ f("div", {
+				children: t.map((e) => /* @__PURE__ */ p("div", {
 					className: "flex h-40 items-center justify-between gap-12",
-					children: [/* @__PURE__ */ f("span", {
+					children: [/* @__PURE__ */ p("span", {
 						className: "flex items-center gap-8 text-body text-fg-secondary",
-						children: [e.icon && /* @__PURE__ */ d(i, {
+						children: [e.icon && /* @__PURE__ */ f(i, {
 							icon: e.icon,
 							size: "sm"
 						}), e.label]
-					}), /* @__PURE__ */ d(l, {
+					}), /* @__PURE__ */ f(l, {
 						size: "sm",
 						appearance: "default",
 						"aria-label": e.label,
@@ -53,9 +54,9 @@ function _({ view: e, rows: t, toggles: a, properties: u, footer: p }) {
 					})]
 				}, e.label))
 			}),
-			a && a.length > 0 && /* @__PURE__ */ d("div", {
+			a && a.length > 0 && /* @__PURE__ */ f("div", {
 				className: "flex flex-col px-12 py-4 hairline-t",
-				children: a.map((e) => /* @__PURE__ */ d(s, {
+				children: a.map((e) => /* @__PURE__ */ f(s, {
 					size: "sm",
 					label: e.label,
 					checked: e.checked,
@@ -63,64 +64,66 @@ function _({ view: e, rows: t, toggles: a, properties: u, footer: p }) {
 					className: "h-40"
 				}, e.label))
 			}),
-			u && /* @__PURE__ */ f("div", {
+			u && /* @__PURE__ */ p("div", {
 				className: "flex flex-col gap-8 p-12 hairline-t",
 				children: [
-					/* @__PURE__ */ d("span", {
+					/* @__PURE__ */ f("span", {
 						className: "text-caption font-medium text-fg-secondary",
-						children: h("displayOptions.properties", "Display properties")
+						children: m("displayOptions.properties", "Display properties")
 					}),
-					/* @__PURE__ */ d("div", {
+					/* @__PURE__ */ f("div", {
 						className: "flex flex-wrap gap-6",
 						children: u.options.map((e) => {
 							let t = u.value.includes(e.value), n = t && _.includes(e);
-							return /* @__PURE__ */ d(o, {
+							return /* @__PURE__ */ f(o, {
 								size: "sm",
 								variant: t ? "soft" : "outline",
 								pressed: t,
 								...n ? {
-									icon: m,
-									"aria-description": h("displayOptions.doesNotFit", "Doesn't fit at this width")
+									icon: h,
+									"aria-description": m("displayOptions.doesNotFit", "Doesn't fit at this width")
 								} : {},
 								onClick: () => u.onChange(t ? u.value.filter((t) => t !== e.value) : [...u.value, e.value]),
 								children: e.label
 							}, e.value);
 						})
 					}),
-					_.length > 0 && /* @__PURE__ */ d("span", {
+					_.length > 0 && /* @__PURE__ */ f("span", {
 						className: "text-caption text-fg-tertiary",
-						children: h("displayOptions.hiddenProperties", "{count, plural, one {{properties} doesn't fit at this width.} other {{properties} don't fit at this width.}}", {
+						children: m("displayOptions.hiddenProperties", "{count, plural, one {{properties} doesn't fit at this width.} other {{properties} don't fit at this width.}}", {
 							count: _.length,
 							properties: new Intl.ListFormat(g, { type: "conjunction" }).format(_.map((e) => e.label))
 						})
 					})
 				]
 			}),
-			p && /* @__PURE__ */ d("div", {
+			d && /* @__PURE__ */ f("div", {
 				className: "p-12 hairline-t",
-				children: p
+				children: d
 			})
 		]
 	});
 }
-function v({ trigger: r = "secondary", inline: i, ...o }) {
-	let s = n();
-	return !o.view && !o.rows?.length && !o.toggles?.length && !o.properties && t("DisplayOptions: pass view, rows, toggles or properties; an empty panel is never useful."), i ? /* @__PURE__ */ d("div", {
+var y = /* @__PURE__ */ d(function({ trigger: r = "secondary", inline: i, ...o }, s) {
+	let c = n();
+	return !o.view && !o.rows?.length && !o.toggles?.length && !o.properties && t("DisplayOptions: pass view, rows, toggles or properties; an empty panel is never useful."), i ? /* @__PURE__ */ f("div", {
+		ref: s,
 		className: e("rounded-popover bg-raised shadow-raised"),
-		children: /* @__PURE__ */ d(_, { ...o })
-	}) : /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(u.Trigger, { children: /* @__PURE__ */ d(a, {
-		icon: p,
-		"aria-label": s("displayOptions.displayOptions", "Display options"),
+		children: /* @__PURE__ */ f(v, { ...o })
+	}) : /* @__PURE__ */ p(u, { children: [/* @__PURE__ */ f(u.Trigger, { children: /* @__PURE__ */ f(a, {
+		ref: s,
+		icon: m,
+		"aria-label": c("displayOptions.displayOptions", "Display options"),
 		variant: r
-	}) }), /* @__PURE__ */ d(u.Content, {
+	}) }), /* @__PURE__ */ f(u.Content, {
 		padding: "none",
 		align: "end",
-		"aria-label": s("displayOptions.displayOptions", "Display options"),
-		children: /* @__PURE__ */ d(_, { ...o })
+		"aria-label": c("displayOptions.displayOptions", "Display options"),
+		children: /* @__PURE__ */ f(v, { ...o })
 	})] });
-}
-process.env.NODE_ENV !== "production" && (v.displayName = "DisplayOptions");
+});
+process.env.NODE_ENV !== "production" && (y.displayName = "DisplayOptions");
 //#endregion
-export { v as DisplayOptions, g as KAESO_DISPLAY_OPTIONS_DEFAULT_VARIANTS, h as KAESO_DISPLAY_OPTIONS_VARIANTS };
+export { y as DisplayOptions, _ as KAESO_DISPLAY_OPTIONS_DEFAULT_VARIANTS, g as KAESO_DISPLAY_OPTIONS_VARIANTS };
 
 //# sourceMappingURL=display-options.js.map

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

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

package/dist/components/filter-chip.js

@@ -2,9 +2,9 @@
 import { t as e } from "../chunks/cn-Dj6sRgkF.js";
 import { i as t, r as n } from "../chunks/context-BELWW79w.js";
 import { t as r } from "../chunks/icon-D7ja-_Yk.js";
-import { i } from "../chunks/menu-fl_QQb38.js";
-import { t as a } from "../chunks/command-list-0RR4DpUe.js";
-import { r as o } from "../chunks/picker-popover-DShea4b8.js";
+import { c as i } from "../chunks/menu-DEmBfdPm.js";
+import { t as a } from "../chunks/command-list-C2Y7V_lt.js";
+import { r as o } from "../chunks/picker-popover-BxyU1U9F.js";
 import { forwardRef as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 import { Cancel01Icon as m } from "@hugeicons/core-free-icons";