@logicplanes/kaeso-ui 0.4.4 → 0.4.5

package/dist/chunks/popover-Bl5QYqnh.js

@@ -0,0 +1,51 @@
+"use client";
+import { t as e } from "./cn-BjnOAUrA.js";
+import { t } from "./dev-CR1p7gCm.js";
+import { n, r } from "./portal-context-CTatR2Z8.js";
+import { n as i } from "./inset-BUzyXLK4.js";
+import { n as a, r as o, t as s } from "./popover-root-D3q89WNF.js";
+import { forwardRef as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Popover as d } from "@base-ui/react/popover";
+//#region src/components/popover/popover.tsx
+var f = { padding: {
+	form: { classes: "p-12" },
+	list: { classes: "p-6" },
+	none: { classes: "p-0" }
+} }, p = { padding: "form" }, m = "z-50 rounded-popover bg-raised text-body text-fg shadow-raised outline-none popup-motion max-h-(--available-height) max-w-(--available-width) overflow-auto overscroll-contain scrollbar-quiet", h = /* @__PURE__ */ c(function({ children: a, side: o = "bottom", align: s = "start", sideOffset: c = 6, padding: p = "form", title: h, className: g, "aria-label": _ }, v) {
+	return !h && !_ && t("Popover.Content: pass a title or an aria-label, so the popover's dialog has a name."), /* @__PURE__ */ l(d.Portal, {
+		container: r(),
+		children: /* @__PURE__ */ l(d.Positioner, {
+			positionMethod: "fixed",
+			collisionBoundary: n(),
+			side: o,
+			align: s,
+			sideOffset: c,
+			collisionPadding: 8,
+			className: "z-50 outline-none",
+			children: /* @__PURE__ */ u(d.Popup, {
+				ref: v,
+				..._ ? { "aria-label": _ } : {},
+				className: e(m, f.padding[p].classes, g),
+				children: [h && /* @__PURE__ */ l(d.Title, {
+					className: "mb-8 text-body font-semibold text-fg wrap-anywhere",
+					children: h
+				}), /* @__PURE__ */ l(i, {
+					inset: !1,
+					children: a
+				})]
+			})
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (h.displayName = "Popover.Content");
+var g = /* @__PURE__ */ Object.assign(a, {
+	Trigger: o,
+	Content: h,
+	Close: s
+});
+process.env.NODE_ENV !== "production" && (g.displayName = "Popover");
+//#endregion
+export { g as i, f as n, m as r, p as t };
+
+//# sourceMappingURL=popover-Bl5QYqnh.js.map

package/dist/chunks/popover-Bl5QYqnh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-Bl5QYqnh.js","names":["BasePopover","Popover","cn","InsetContent","PopoverRoot","PopoverTrigger","PopoverClose","KAESO_POPOVER_VARIANTS","KAESO_POPOVER_DEFAULT_VARIANTS","POPOVER_POPUP","Content","ariaLabel","title","devWarn","Popover","usePortalContainer","pageBoundary","padding","className","Popover$1"],"sources":["../../src/components/popover/popover.tsx"],"sourcesContent":["import { InsetContent } from \"../../utils/inset.js\";\nimport { pageBoundary, usePortalContainer } from \"../../utils/portal-context.js\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { cn } from \"../../utils/cn.js\";\nimport { devWarn } from \"../../utils/dev.js\";\nimport { PopoverClose, PopoverRoot, PopoverTrigger } from \"./popover-root.js\";\n\nexport type { PopoverProps } from \"./popover-root.js\";\n\nexport const KAESO_POPOVER_VARIANTS = {\n  padding: {\n    form: { classes: \"p-12\" },\n    list: { classes: \"p-6\" },\n    none: { classes: \"p-0\" },\n  },\n} as const;\nexport const KAESO_POPOVER_DEFAULT_VARIANTS = { padding: \"form\" } as const;\n\ntype Side = \"top\" | \"bottom\" | \"left\" | \"right\";\ntype Align = \"start\" | \"center\" | \"end\";\n\nexport const POPOVER_POPUP =\n  \"z-50 rounded-popover bg-raised text-body text-fg shadow-raised outline-none popup-motion max-h-(--available-height) max-w-(--available-width) overflow-auto overscroll-contain scrollbar-quiet\";\n\nexport interface PopoverContentProps {\n  children: ReactNode;\n  side?: Side | undefined;\n  align?: Align | undefined;\n  sideOffset?: number | undefined;\n  padding?: keyof typeof KAESO_POPOVER_VARIANTS.padding | undefined;\n  title?: ReactNode | undefined;\n  \"aria-label\"?: string | undefined;\n  className?: string | undefined;\n}\n\nconst Content = /* @__PURE__ */ forwardRef<HTMLDivElement, PopoverContentProps>(function PopoverContent(\n  { children, side = \"bottom\", align = \"start\", sideOffset = 6, padding = \"form\", title, className, \"aria-label\": ariaLabel },\n  ref,\n) {\n  if (!title && !ariaLabel) devWarn(\"Popover.Content: pass a title or an aria-label, so the popover's dialog has a name.\");\n  return (\n    <BasePopover.Portal container={usePortalContainer()}>\n      <BasePopover.Positioner\n        positionMethod=\"fixed\"\n        collisionBoundary={pageBoundary()}\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        collisionPadding={8}\n        className=\"z-50 outline-none\"\n      >\n        <BasePopover.Popup\n          ref={ref}\n          {...(ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n          className={cn(POPOVER_POPUP, KAESO_POPOVER_VARIANTS.padding[padding].classes, className)}\n        >\n          {title && <BasePopover.Title className=\"mb-8 text-body font-semibold text-fg wrap-anywhere\">{title}</BasePopover.Title>}\n          <InsetContent inset={false}>{children}</InsetContent>\n        </BasePopover.Popup>\n      </BasePopover.Positioner>\n    </BasePopover.Portal>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Content.displayName = \"Popover.Content\";\n\nexport const Popover = /* @__PURE__ */ Object.assign(PopoverRoot, { Trigger: PopoverTrigger, Content, Close: PopoverClose });\nif (process.env.NODE_ENV !== \"production\") Popover.displayName = \"Popover\";\n"],"mappings":";;;;;;;;;;AAUA,IAAaO,IAAyB,EACpC,SAAS;CACP,MAAM,EAAE,SAAS,OAAO;CACxB,MAAM,EAAE,SAAS,MAAM;CACvB,MAAM,EAAE,SAAS,MAAM;AACzB,EACF,GACaC,IAAiC,EAAE,SAAS,OAAO,GAKnDC,IACX,kMAaIC,IAA0B,kBAAgD,SAC9E,EAAE,aAAU,UAAO,UAAU,WAAQ,SAAS,gBAAa,GAAG,aAAU,QAAQ,UAAO,cAAW,cAAcC,KAChH,GACA;CAEA,OADI,CAACC,KAAS,CAACD,KAAWE,EAAQ,qFAAqF,GAErH,kBAACb,EAAY,QAAb;EAAoB,WAAWe,EAAmB;EAChD,UAAA,kBAACf,EAAY,YAAb;GACE,gBAAe;GACf,mBAAmBgB,EAAa;GAC1B;GACC;GACK;GACZ,kBAAkB;GAClB,WAAU;GAEV,UAAA,kBAAChB,EAAY,OAAb;IACO;IACL,GAAKW,IAAY,EAAE,cAAcA,EAAU,IAAI,CAAC;IAChD,WAAWT,EAAGO,GAAeF,EAAuB,QAAQU,EAAQ,CAAC,SAASC,CAAS;IAHzF,UAAA,CAKGN,KAAS,kBAACZ,EAAY,OAAb;KAAmB,WAAU;KAAsD,UAAAY;IAAyB,CAAA,GACtH,kBAACT,GAAD;KAAc,OAAO;KAAQ;IAAuB,CAAA,CACnC;;EACG,CAAA;CACN,CAAA;AAExB,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAQ,cAAc;AAEjE,IAAaF,IAA0B,uBAAO,OAAOG,GAAa;CAAE,SAASC;CAAgB;CAAS,OAAOC;AAAa,CAAC;AAC3H,QAAA,IAAA,aAA6B,iBAAc,EAAQ,cAAc"}

package/dist/chunks/{portal-context-BBbzDKmY.js → portal-context-CTatR2Z8.js}

@@ -24,10 +24,20 @@ process.env.NODE_ENV !== "production" && (s.displayName = "PortalContainer");
 function c() {
 	return t(o) ?? void 0;
 }
-function l() {
-	return typeof document > "u" ? "clipping-ancestors" : document.documentElement;
+var l = {
+	x: 0,
+	y: 0,
+	get width() {
+		return document.documentElement.clientWidth;
+	},
+	get height() {
+		return document.documentElement.clientHeight;
+	}
+};
+function u() {
+	return typeof document > "u" ? "clipping-ancestors" : l;
 }
 //#endregion
-export { l as n, c as r, s as t };
+export { u as n, c as r, s as t };
 
-//# sourceMappingURL=portal-context-BBbzDKmY.js.map
+//# sourceMappingURL=portal-context-CTatR2Z8.js.map

package/dist/chunks/portal-context-CTatR2Z8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-context-CTatR2Z8.js","names":["PortalCtx","PortalContainer","el","useState","node","attach","useCallback","host","children","className","usePortalContainer","use","viewportRect","pageBoundary"],"sources":["../../src/utils/portal-context.tsx"],"sourcesContent":["import { createContext, use, useCallback, useState, type ReactNode } from \"react\";\n\nconst PortalCtx = /* @__PURE__ */ createContext<HTMLElement | null>(null);\n\nexport function PortalContainer({ children, className }: { children: ReactNode; className?: string | undefined }) {\n  const [el] = useState<HTMLDivElement | null>(() => {\n    if (typeof document === \"undefined\") return null;\n    const node = document.createElement(\"div\");\n    node.setAttribute(\"data-portal-container\", \"\");\n    return node;\n  });\n  const attach = useCallback(\n    (host: HTMLDivElement | null) => {\n      if (host && el && el.parentNode !== host) host.appendChild(el);\n    },\n    [el],\n  );\n  return (\n    <PortalCtx.Provider value={el}>\n      {children}\n      <div ref={attach} className={className ?? \"absolute top-0 left-0 size-0\"} data-portal-host=\"\" />\n    </PortalCtx.Provider>\n  );\n}\nif (process.env.NODE_ENV !== \"production\") PortalContainer.displayName = \"PortalContainer\";\n\nexport function usePortalContainer(): HTMLElement | undefined {\n  return use(PortalCtx) ?? undefined;\n}\n\nexport interface BoundaryRect {\n  readonly x: number;\n  readonly y: number;\n  readonly width: number;\n  readonly height: number;\n}\n\nconst viewportRect: BoundaryRect = {\n  x: 0,\n  y: 0,\n  get width() {\n    return document.documentElement.clientWidth;\n  },\n  get height() {\n    return document.documentElement.clientHeight;\n  },\n};\n\nexport function pageBoundary(): BoundaryRect | \"clipping-ancestors\" {\n  return typeof document === \"undefined\" ? \"clipping-ancestors\" : viewportRect;\n}\n"],"mappings":";;;;AAEA,IAAMA,IAA4B,kBAAkC,IAAI;AAExE,SAAgBC,EAAgB,EAAE,aAAU,gBAAsE;CAChH,IAAM,CAACC,KAAMC,QAAsC;EACjD,IAAI,OAAO,WAAa,KAAa,OAAO;EAC5C,IAAMC,IAAO,SAAS,cAAc,KAAK;EAEzC,OADAA,EAAK,aAAa,yBAAyB,EAAE,GACtCA;CACT,CAAC,GACKC,IAASC,GACZ,MAAgC;EAC/B,AAAIC,KAAQL,KAAMA,EAAG,eAAeK,KAAMA,EAAK,YAAYL,CAAE;CAC/D,GACA,CAACA,CAAE,CACL;CACA,OACE,kBAACF,EAAU,UAAX;EAAoB,OAAOE;EAA3B,UAAA,CACGM,GACD,kBAAC,OAAD;GAAK,KAAKH;GAAQ,WAAWI,KAAa;GAAgC,oBAAiB;EAAI,CAAA,CAC7E;;AAExB;AACA,QAAA,IAAA,aAA6B,iBAAc,EAAgB,cAAc;AAEzE,SAAgBC,IAA8C;CAC5D,OAAOC,EAAIX,CAAS,KAAK,KAAA;AAC3B;AASA,IAAMY,IAA6B;CACjC,GAAG;CACH,GAAG;CACH,IAAI,QAAQ;EACV,OAAO,SAAS,gBAAgB;CAClC;CACA,IAAI,SAAS;EACX,OAAO,SAAS,gBAAgB;CAClC;AACF;AAEA,SAAgBC,IAAoD;CAClE,OAAO,OAAO,WAAa,MAAc,uBAAuBD;AAClE"}

package/dist/chunks/{radio-CDDFpdtL.js → radio-C6GtzF_t.js}

@@ -1,5 +1,5 @@
 "use client";
-import { t as e } from "./cn-Dj6sRgkF.js";
+import { t as e } from "./cn-BjnOAUrA.js";
 import { t } from "./labelled-D5udSPUI.js";
 import { createContext as n, forwardRef as r, useContext as i, useId as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
@@ -9,9 +9,15 @@ import { RadioGroup as l } from "@base-ui/react/radio-group";
 var u = { variant: {
 	default: { classes: "flex flex-col" },
 	cards: { classes: "flex flex-col overflow-hidden rounded-group bg-raised shadow-xs" }
-} }, d = { variant: "default" }, f = /* @__PURE__ */ n({ variant: "default" }), p = /* @__PURE__ */ r(function({ value: t, defaultValue: n, onValueChange: r, disabled: i, name: a, variant: s = "default", orientation: c = "vertical", className: d, children: p, ...m }, h) {
+} }, d = { variant: "default" }, f = /* @__PURE__ */ n({
+	variant: "default",
+	disabled: !1
+}), p = /* @__PURE__ */ r(function({ value: t, defaultValue: n, onValueChange: r, disabled: i, name: a, variant: s = "default", orientation: c = "vertical", className: d, children: p, ...m }, h) {
 	return /* @__PURE__ */ o(f.Provider, {
-		value: { variant: s },
+		value: {
+			variant: s,
+			disabled: !!i
+		},
 		children: /* @__PURE__ */ o(l, {
 			ref: h,
 			...t === void 0 ? {} : { value: t },
@@ -36,58 +42,67 @@ var m = /* @__PURE__ */ r(function({ value: t, disabled: n, id: r, className: i,
 		...s ? { "aria-labelledby": s } : {},
 		...l ? { "aria-describedby": l } : {},
 		...u ? { "data-force": u } : {},
-		className: e("relative inline-flex size-18 shrink-0 cursor-pointer items-center justify-center rounded-pill bg-raised shadow-selector radio-donut focus-ring tap-target", "not-checked:hover:shadow-selector-hover disabled:cursor-not-allowed disabled:bg-fill-1 disabled:shadow-none", i)
+		"data-choice": "",
+		className: e("relative -m-3 inline-flex size-24 shrink-0 cursor-pointer items-center justify-center rounded-pill outline-none tap-target disabled:cursor-not-allowed", i),
+		children: /* @__PURE__ */ o("span", {
+			"aria-hidden": !0,
+			"data-shape": "dot",
+			className: "size-18 rounded-pill choice-mark"
+		})
 	});
 });
 process.env.NODE_ENV !== "production" && (m.displayName = "Radio.Circle");
 var h = /* @__PURE__ */ r(function({ label: n, description: r, id: c, className: l, ...u }, d) {
-	let { variant: p } = i(f), h = a(), g = c ?? `k-radio-${h}`, _ = t(g, n, r, u);
+	let { variant: p, disabled: h } = i(f), g = !!u.disabled || h, _ = a(), v = c ?? `k-radio-${_}`, y = t(v, n, r, u);
 	return p === "cards" ? /* @__PURE__ */ s("label", {
-		htmlFor: g,
-		className: e("flex min-h-56 cursor-pointer items-center gap-16 px-20 py-12 transition-control hover:bg-fill-1 not-first:hairline-t has-[:disabled]:cursor-not-allowed", l),
+		htmlFor: v,
+		"data-choice-row": "",
+		...u["data-force"] ? { "data-force": u["data-force"] } : {},
+		className: e("flex min-h-56 cursor-pointer items-center gap-16 px-20 py-12 transition-control not-first:hairline-t", g ? "cursor-not-allowed" : "hover:bg-raised-hover active:bg-raised-pressed focus-ring-card-row-within", l),
 		children: [/* @__PURE__ */ s("span", {
 			className: "flex min-w-0 flex-1 flex-col gap-2",
 			children: [/* @__PURE__ */ o("span", {
-				id: _.labelId,
-				className: e("text-body-lg font-medium text-fg", u.disabled && "text-fg-disabled"),
+				id: y.labelId,
+				className: e("text-body-lg font-medium text-fg", g && "text-fg-disabled"),
 				children: n
 			}), r && /* @__PURE__ */ o("span", {
-				id: _.descriptionId,
-				className: "text-small text-fg-secondary",
+				id: y.descriptionId,
+				className: e("text-small text-pretty", g ? "text-fg-disabled" : "text-fg-secondary"),
 				children: r
 			})]
 		}), /* @__PURE__ */ o(m, {
 			ref: d,
-			id: g,
+			id: v,
 			...u,
-			..._.aria
+			...y.aria
 		})]
 	}) : n ? /* @__PURE__ */ s("label", {
-		htmlFor: g,
-		className: e("inline-flex min-h-32 cursor-pointer items-start gap-10 py-6 select-none", u.disabled && "cursor-not-allowed", l),
+		htmlFor: v,
+		"data-choice-row": "",
+		className: e("inline-flex min-h-32 cursor-pointer items-start gap-10 py-6 select-none coarse:min-h-44 coarse:py-12", g && "cursor-not-allowed", l),
 		children: [/* @__PURE__ */ o("span", {
 			className: "flex h-20 items-center",
 			children: /* @__PURE__ */ o(m, {
 				ref: d,
-				id: g,
+				id: v,
 				...u,
-				..._.aria
+				...y.aria
 			})
 		}), /* @__PURE__ */ s("span", {
 			className: "flex flex-col",
 			children: [/* @__PURE__ */ o("span", {
-				id: _.labelId,
-				className: e("text-body text-fg", u.disabled && "text-fg-disabled"),
+				id: y.labelId,
+				className: e("text-body text-fg", g && "text-fg-disabled"),
 				children: n
 			}), r && /* @__PURE__ */ o("span", {
-				id: _.descriptionId,
-				className: "text-small text-fg-secondary",
+				id: y.descriptionId,
+				className: e("text-small text-pretty", g ? "text-fg-disabled" : "text-fg-secondary"),
 				children: r
 			})]
 		})]
 	}) : /* @__PURE__ */ o(m, {
 		ref: d,
-		id: g,
+		id: v,
 		className: l,
 		...u
 	});
@@ -107,4 +122,4 @@ process.env.NODE_ENV !== "production" && (v.displayName = "RadioCards");
 //#endregion
 export { m as a, v as i, u as n, _ as o, g as r, d as t };
 
-//# sourceMappingURL=radio-CDDFpdtL.js.map
+//# sourceMappingURL=radio-C6GtzF_t.js.map

package/dist/chunks/radio-C6GtzF_t.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-C6GtzF_t.js","names":["RadioGroup","BaseRadioGroup","BaseRadio","Radio","cn","KAESO_RADIO_VARIANTS","KAESO_RADIO_DEFAULT_VARIANTS","Ctx","Group","props","disabled","RadioGroup","value","defaultValue","onValueChange","v","name","variant","orientation","className","RadioCircle","ariaLabel","labelledBy","describedBy","force","Radio","id","Root","groupDisabled","useContext","off","auto","useId","rid","named","labelled","label","description","Radio$1","RadioGroup$1","RadioCards"],"sources":["../../src/components/radio/radio.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext, useId, type ReactNode } from \"react\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { cn } from \"../../utils/cn.js\";\nimport { labelled } from \"./labelled.js\";\n\nexport const KAESO_RADIO_VARIANTS = {\n  variant: {\n    default: { classes: \"flex flex-col\" },\n    cards: {\n      classes: \"flex flex-col overflow-hidden rounded-group bg-raised shadow-xs\",\n    },\n  },\n} as const;\nexport const KAESO_RADIO_DEFAULT_VARIANTS = { variant: \"default\" } as const;\n\nconst Ctx = /* @__PURE__ */ createContext<{ variant: keyof typeof KAESO_RADIO_VARIANTS.variant; disabled: boolean }>({ variant: \"default\", disabled: false });\n\nexport interface RadioGroupProps {\n  value?: string | undefined;\n  defaultValue?: string | undefined;\n  onValueChange?: ((value: string) => void) | undefined;\n  disabled?: boolean | undefined;\n  name?: string | undefined;\n  variant?: keyof typeof KAESO_RADIO_VARIANTS.variant | undefined;\n  orientation?: \"vertical\" | \"horizontal\" | undefined;\n  \"aria-label\"?: string | undefined;\n  \"aria-labelledby\"?: string | undefined;\n  className?: string | undefined;\n  children: ReactNode;\n}\n\nconst Group = /* @__PURE__ */ forwardRef<HTMLDivElement, RadioGroupProps>(function RadioGroup(\n  { value, defaultValue, onValueChange, disabled, name, variant = \"default\", orientation = \"vertical\", className, children, ...props },\n  ref,\n) {\n  return (\n    <Ctx.Provider value={{ variant, disabled: !!disabled }}>\n      <BaseRadioGroup\n        ref={ref}\n        {...(value !== undefined ? { value } : {})}\n        {...(defaultValue !== undefined ? { defaultValue } : {})}\n        {...(onValueChange ? { onValueChange: (v: unknown) => onValueChange(String(v)) } : {})}\n        {...(disabled !== undefined ? { disabled } : {})}\n        {...(name ? { name } : {})}\n        className={cn(\n          KAESO_RADIO_VARIANTS.variant[variant].classes,\n          orientation === \"horizontal\" && variant === \"default\" && \"flex-row flex-wrap gap-x-24\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </BaseRadioGroup>\n    </Ctx.Provider>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Group.displayName = \"RadioGroup\";\n\nexport interface RadioProps {\n  value: string;\n  label?: ReactNode | undefined;\n  description?: ReactNode | undefined;\n  disabled?: boolean | undefined;\n  id?: string | undefined;\n  \"aria-label\"?: string | undefined;\n  \"aria-labelledby\"?: string | undefined;\n  \"aria-describedby\"?: string | undefined;\n  className?: string | undefined;\n  \"data-force\"?: string | undefined;\n}\n\nexport const RadioCircle = /* @__PURE__ */ forwardRef<HTMLButtonElement, RadioProps>(function RadioCircle(\n  { value, disabled, id, className, \"aria-label\": ariaLabel, \"aria-labelledby\": labelledBy, \"aria-describedby\": describedBy, \"data-force\": force },\n  ref,\n) {\n  return (\n    <BaseRadio.Root\n      ref={ref}\n      value={value}\n      {...(disabled !== undefined ? { disabled } : {})}\n      {...(id ? { id } : {})}\n      {...(ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n      {...(labelledBy ? { \"aria-labelledby\": labelledBy } : {})}\n      {...(describedBy ? { \"aria-describedby\": describedBy } : {})}\n      {...(force ? { \"data-force\": force } : {})}\n      data-choice=\"\"\n      className={cn(\n        \"relative -m-3 inline-flex size-24 shrink-0 cursor-pointer items-center justify-center rounded-pill outline-none tap-target disabled:cursor-not-allowed\",\n        className,\n      )}\n    >\n      <span aria-hidden data-shape=\"dot\" className=\"size-18 rounded-pill choice-mark\" />\n    </BaseRadio.Root>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") RadioCircle.displayName = \"Radio.Circle\";\n\nconst Root = /* @__PURE__ */ forwardRef<HTMLButtonElement, RadioProps>(function Radio({ label, description, id, className, ...props }, ref) {\n  const { variant, disabled: groupDisabled } = useContext(Ctx);\n  const off = !!props.disabled || groupDisabled;\n  const auto = useId();\n  const rid = id ?? `k-radio-${auto}`;\n  const named = labelled(rid, label, description, props);\n  if (variant === \"cards\") {\n    return (\n      <label\n        htmlFor={rid}\n        data-choice-row=\"\"\n        {...(props[\"data-force\"] ? { \"data-force\": props[\"data-force\"] } : {})}\n        className={cn(\n          \"flex min-h-56 cursor-pointer items-center gap-16 px-20 py-12 transition-control not-first:hairline-t\",\n          off ? \"cursor-not-allowed\" : \"hover:bg-raised-hover active:bg-raised-pressed focus-ring-card-row-within\",\n          className,\n        )}\n      >\n        <span className=\"flex min-w-0 flex-1 flex-col gap-2\">\n          <span id={named.labelId} className={cn(\"text-body-lg font-medium text-fg\", off && \"text-fg-disabled\")}>\n            {label}\n          </span>\n          {description && (\n            <span id={named.descriptionId} className={cn(\"text-small text-pretty\", off ? \"text-fg-disabled\" : \"text-fg-secondary\")}>\n              {description}\n            </span>\n          )}\n        </span>\n        <RadioCircle ref={ref} id={rid} {...props} {...named.aria} />\n      </label>\n    );\n  }\n  if (!label) return <RadioCircle ref={ref} id={rid} className={className} {...props} />;\n  return (\n    <label\n      htmlFor={rid}\n      data-choice-row=\"\"\n      className={cn(\n        \"inline-flex min-h-32 cursor-pointer items-start gap-10 py-6 select-none coarse:min-h-44 coarse:py-12\",\n        off && \"cursor-not-allowed\",\n        className,\n      )}\n    >\n      <span className=\"flex h-20 items-center\">\n        <RadioCircle ref={ref} id={rid} {...props} {...named.aria} />\n      </span>\n      <span className=\"flex flex-col\">\n        <span id={named.labelId} className={cn(\"text-body text-fg\", off && \"text-fg-disabled\")}>\n          {label}\n        </span>\n        {description && (\n          <span id={named.descriptionId} className={cn(\"text-small text-pretty\", off ? \"text-fg-disabled\" : \"text-fg-secondary\")}>\n            {description}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Root.displayName = \"Radio\";\n\nexport const Radio = /* @__PURE__ */ Object.assign(Root, { Group, Circle: RadioCircle });\nexport const RadioGroup = Group;\nexport type RadioCardsProps = Omit<RadioGroupProps, \"variant\">;\n\nexport const RadioCards = /* @__PURE__ */ forwardRef<HTMLDivElement, RadioCardsProps>(function RadioCards(props, ref) {\n  return <Group ref={ref} variant=\"cards\" {...props} />;\n});\nif (process.env.NODE_ENV !== \"production\") RadioCards.displayName = \"RadioCards\";\n"],"mappings":"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"}

package/dist/chunks/range-popup-lGiZsG3s.js

@@ -0,0 +1,160 @@
+"use client";
+import { t as e } from "./cn-BjnOAUrA.js";
+import { i as t } from "./context-BELWW79w.js";
+import { t as n } from "./icon-CBzOwqrX.js";
+import { n as r } from "./button-IblhXUyZ.js";
+import { i } from "./popover-Bl5QYqnh.js";
+import { t as a } from "./calendar-Dc6_dl0f.js";
+import { n as o, r as s, t as c } from "./iso-field-DoqHBg8n.js";
+import { useId as l, useRef as u, useState as d, useSyncExternalStore as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Tick02Icon as h } from "@hugeicons/core-free-icons";
+//#region src/components/date-picker/range-popup.tsx
+function g(e, t) {
+	let n = [...e.currentTarget.querySelectorAll("[role=option]")], r = n.indexOf(document.activeElement);
+	if (r < 0) return;
+	let i = {
+		ArrowDown: t,
+		ArrowUp: -t,
+		...t > 1 ? {
+			ArrowRight: 1,
+			ArrowLeft: -1
+		} : {}
+	}, a = e.key === "Home" ? 0 : e.key === "End" ? n.length - 1 : i[e.key] === void 0 ? null : r + i[e.key];
+	a !== null && (e.preventDefault(), n[Math.max(0, Math.min(n.length - 1, a))]?.focus());
+}
+var _ = "(max-width: 767px)";
+function v(e) {
+	if (typeof window > "u" || !window.matchMedia) return () => {};
+	let t = window.matchMedia(_);
+	return t.addEventListener("change", e), () => t.removeEventListener("change", e);
+}
+var y = () => typeof window < "u" && !!window.matchMedia?.(_).matches, b = () => !f(v, y, () => !1), x = (e) => new Date(e.getFullYear(), e.getMonth(), 1), S = (e, t) => new Date(e.getFullYear(), e.getMonth() + t, 1), C = (e, t) => e?.toDateString() === t?.toDateString();
+function w({ range: f, preset: _, presets: v, onPick: y, onClose: w, weekStartsOn: T, disabledDays: E }) {
+	let D = b(), O = t(), k = D ? 2 : 1, [A, j] = d(f ?? void 0), [M, N] = d(_ === null), [P, F] = d(() => x(f?.to ?? f?.from ?? /* @__PURE__ */ new Date())), I = l(), [L, R] = d(null), z = u(null), B = S(P, 1 - k), V = (e) => e >= B && x(e) <= P, H = M ? null : _, U = (e) => {
+		j(e), e?.from && R((e) => e?.problem === "missing" ? null : e), N(!0);
+	}, W = (e, t) => {
+		if (E?.(t)) return !1;
+		let n = e === "from" ? A?.to : A?.from;
+		return U(e === "from" ? {
+			from: t,
+			to: n && n < t ? t : n
+		} : {
+			from: n && n > t ? t : n,
+			to: t
+		}), V(t) || F(e === "to" || k === 1 ? x(t) : S(x(t), k - 1)), !0;
+	}, G = C(A?.from, f?.from) && C(A?.to ?? A?.from, f?.to), K = e("flex min-h-34 w-full cursor-pointer items-center justify-between gap-10 rounded-item px-10 text-left text-body font-medium text-fg transition-control select-none coarse:min-h-44", "hover:bg-item-hover active:bg-item-pressed focus-ring-inset", D && "coarse:min-h-40"), q = (t) => /* @__PURE__ */ p(n, {
+		icon: h,
+		size: "sm",
+		className: e("shrink-0 text-fg", !t && "invisible")
+	}), J = (e) => L?.field === e ? L.problem : null, Y = (e) => (t) => R(t ? {
+		field: e,
+		problem: t
+	} : L?.field === e ? null : L);
+	return /* @__PURE__ */ p(i.Content, {
+		padding: "none",
+		"aria-label": O("datePicker.chooseRange", "Choose a date range"),
+		className: e(!D && "w-360 max-w-(--available-width)"),
+		children: /* @__PURE__ */ m("div", {
+			className: e("flex", !D && "flex-col"),
+			children: [/* @__PURE__ */ m("div", {
+				className: e("shrink-0 gap-2 p-6", D ? "flex min-w-160 flex-col hairline-r" : "grid grid-cols-2 hairline-b"),
+				role: "listbox",
+				"aria-label": O("datePicker.presets", "Presets"),
+				"aria-orientation": D ? "vertical" : void 0,
+				onKeyDown: (e) => g(e, D ? 1 : 2),
+				children: [v.map((e) => {
+					let t = e.id ?? e.label;
+					return /* @__PURE__ */ m("button", {
+						type: "button",
+						role: "option",
+						"aria-selected": H === t,
+						tabIndex: H === t ? 0 : -1,
+						className: K,
+						onClick: () => y(e.range(), t),
+						children: [/* @__PURE__ */ p("span", {
+							className: "min-w-0",
+							children: e.label
+						}), q(H === t)]
+					}, t);
+				}), /* @__PURE__ */ m("button", {
+					type: "button",
+					role: "option",
+					"aria-selected": H === null,
+					tabIndex: H === null || !v.some((e) => (e.id ?? e.label) === H) ? 0 : -1,
+					className: K,
+					onClick: () => N(!0),
+					children: [/* @__PURE__ */ p("span", {
+						className: "min-w-0",
+						children: O("datePicker.custom", "Custom")
+					}), q(H === null)]
+				})]
+			}), /* @__PURE__ */ m("div", {
+				className: e("flex flex-col p-12", !D && "items-center"),
+				children: [
+					/* @__PURE__ */ p(a, {
+						mode: "range",
+						numberOfMonths: k,
+						selected: A,
+						month: B,
+						onMonthChange: (e) => F(S(e, k - 1)),
+						onSelect: (e) => U(e),
+						weekStartsOn: T,
+						disabled: E
+					}),
+					/* @__PURE__ */ m("div", {
+						ref: z,
+						className: "mt-12 flex items-center gap-8 self-stretch",
+						children: [
+							/* @__PURE__ */ p(o, {
+								label: O("datePicker.startDate", "Start date"),
+								value: A?.from,
+								invalid: J("from") !== null,
+								errorId: I,
+								onProblem: Y("from"),
+								onCommit: (e) => W("from", e)
+							}),
+							/* @__PURE__ */ p("span", {
+								className: "text-fg-tertiary",
+								"aria-hidden": !0,
+								children: "–"
+							}),
+							/* @__PURE__ */ p(o, {
+								label: O("datePicker.endDate", "End date"),
+								value: A?.to,
+								invalid: J("to") !== null,
+								errorId: I,
+								onProblem: Y("to"),
+								onCommit: (e) => W("to", e)
+							}),
+							/* @__PURE__ */ p(r, {
+								size: "sm",
+								variant: "primary",
+								onClick: () => {
+									A?.from ? G && !M ? w() : y({
+										from: A.from,
+										to: A.to ?? A.from
+									}, null) : (R({
+										field: "from",
+										problem: "missing"
+									}), z.current?.querySelector("input")?.focus());
+								},
+								children: O("datePicker.apply", "Apply")
+							})
+						]
+					}),
+					/* @__PURE__ */ p("p", {
+						id: I,
+						role: "alert",
+						className: e(c, "w-0 min-w-full"),
+						children: L ? s(O, L.problem) : ""
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { w as RangePopup };
+
+//# sourceMappingURL=range-popup-lGiZsG3s.js.map

package/dist/chunks/range-popup-lGiZsG3s.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-popup-lGiZsG3s.js","names":["__icon_Tick02Icon","cn","useUiText","Icon","Button","Calendar","IsoField","isoProblemText","ISO_PROBLEM","moveAmongOptions","options","at","step","columns","to","NARROW","subscribeNarrow","q","onChange","isNarrow","useWide","useSyncExternalStore","monthOf","d","addMonths","n","sameDay","a","b","RangePopup","wide","t","months","draft","setDraft","useState","range","custom","setCustom","preset","last","setLast","errorId","useId","problem","setProblem","fields","useRef","first","shows","selected","edit","next","was","typed","disabledDays","other","which","unchanged","item","check","Tick02Icon","on","problemOf","field","report","p","Popover","presets","id","onPick","m","r","onClose"],"sources":["../../src/components/date-picker/range-popup.tsx"],"sourcesContent":["import { useId, useRef, useState, useSyncExternalStore, type KeyboardEvent } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar, type CalendarProps } from \"../calendar/calendar.js\";\nimport { cn } from \"../../utils/cn.js\";\nimport { Popover } from \"../popover/popover.js\";\nimport { Button } from \"../button/button.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Tick02Icon as __icon_Tick02Icon } from \"@hugeicons/core-free-icons\";\nimport { ISO_PROBLEM, IsoField, isoProblemText, type IsoProblem } from \"./iso-field.js\";\nimport type { DateRangePreset } from \"./date-picker.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nfunction moveAmongOptions(e: KeyboardEvent<HTMLDivElement>, columns: number) {\n  const options = [...e.currentTarget.querySelectorAll<HTMLElement>(\"[role=option]\")];\n  const at = options.indexOf(document.activeElement as HTMLElement);\n  if (at < 0) return;\n  const step: Record<string, number> = { ArrowDown: columns, ArrowUp: -columns, ...(columns > 1 ? { ArrowRight: 1, ArrowLeft: -1 } : {}) };\n  const to = e.key === \"Home\" ? 0 : e.key === \"End\" ? options.length - 1 : step[e.key] !== undefined ? at + step[e.key]! : null;\n  if (to === null) return;\n  e.preventDefault();\n  options[Math.max(0, Math.min(options.length - 1, to))]?.focus();\n}\n\nexport interface RangePopupProps {\n  range: DateRange | null;\n  preset: string | null;\n  presets: DateRangePreset[];\n  onPick: (range: DateRange, preset: string | null) => void;\n  onClose: () => void;\n  weekStartsOn: CalendarProps[\"weekStartsOn\"];\n  disabledDays: ((date: Date) => boolean) | undefined;\n}\n\nconst NARROW = \"(max-width: 767px)\";\nfunction 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;\nconst useWide = () => !useSyncExternalStore(subscribeNarrow, isNarrow, () => false);\n\nconst monthOf = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1);\nconst addMonths = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth() + n, 1);\nconst sameDay = (a: Date | undefined, b: Date | undefined) => a?.toDateString() === b?.toDateString();\n\nexport function RangePopup({ range, preset, presets, onPick, onClose, weekStartsOn, disabledDays }: RangePopupProps) {\n  const wide = useWide();\n  const t = useUiText();\n  const months = wide ? 2 : 1;\n  const [draft, setDraft] = useState<DateRange | undefined>(range ?? undefined);\n  const [custom, setCustom] = useState(preset === null);\n  const [last, setLast] = useState(() => monthOf(range?.to ?? range?.from ?? new Date()));\n  const errorId = useId();\n  const [problem, setProblem] = useState<{ field: \"from\" | \"to\"; problem: IsoProblem } | null>(null);\n  const fields = useRef<HTMLDivElement | null>(null);\n  const first = addMonths(last, 1 - months);\n  const shows = (d: Date) => d >= first && monthOf(d) <= last;\n  const selected = custom ? null : preset;\n  const edit = (next: DateRange | undefined) => {\n    setDraft(next);\n    if (next?.from) setProblem((was) => (was?.problem === \"missing\" ? null : was));\n    setCustom(true);\n  };\n  const typed = (which: \"from\" | \"to\", d: Date) => {\n    if (disabledDays?.(d)) return false;\n    const other = which === \"from\" ? draft?.to : draft?.from;\n    const next = which === \"from\" ? { from: d, to: other && other < d ? d : other } : { from: other && other > d ? d : other, to: d };\n    edit(next);\n    if (!shows(d)) setLast(which === \"to\" || months === 1 ? monthOf(d) : addMonths(monthOf(d), months - 1));\n    return true;\n  };\n  const unchanged = sameDay(draft?.from, range?.from) && sameDay(draft?.to ?? draft?.from, range?.to);\n  const item = cn(\n    \"flex min-h-34 w-full cursor-pointer items-center justify-between gap-10 rounded-item px-10 text-left text-body font-medium text-fg transition-control select-none coarse:min-h-44\",\n    \"hover:bg-item-hover active:bg-item-pressed focus-ring-inset\",\n    wide && \"coarse:min-h-40\",\n  );\n  const check = (on: boolean) => <Icon icon={__icon_Tick02Icon} size=\"sm\" className={cn(\"shrink-0 text-fg\", !on && \"invisible\")} />;\n  const problemOf = (field: \"from\" | \"to\") => (problem?.field === field ? problem.problem : null);\n  const report = (field: \"from\" | \"to\") => (p: IsoProblem) => setProblem(p ? { field, problem: p } : problem?.field === field ? null : problem);\n\n  return (\n    <Popover.Content padding=\"none\" aria-label={t(\"datePicker.chooseRange\", \"Choose a date range\")} className={cn(!wide && \"w-360 max-w-(--available-width)\")}>\n      <div className={cn(\"flex\", !wide && \"flex-col\")}>\n        <div\n          className={cn(\"shrink-0 gap-2 p-6\", wide ? \"flex min-w-160 flex-col hairline-r\" : \"grid grid-cols-2 hairline-b\")}\n          role=\"listbox\"\n          aria-label={t(\"datePicker.presets\", \"Presets\")}\n          aria-orientation={wide ? \"vertical\" : undefined}\n          onKeyDown={(e) => moveAmongOptions(e, wide ? 1 : 2)}\n        >\n          {presets.map((p) => {\n            const id = p.id ?? p.label;\n            return (\n              <button\n                key={id}\n                type=\"button\"\n                role=\"option\"\n                aria-selected={selected === id}\n                tabIndex={selected === id ? 0 : -1}\n                className={item}\n                onClick={() => onPick(p.range(), id)}\n              >\n                <span className=\"min-w-0\">{p.label}</span>\n                {check(selected === id)}\n              </button>\n            );\n          })}\n          <button\n            type=\"button\"\n            role=\"option\"\n            aria-selected={selected === null}\n            tabIndex={selected === null || !presets.some((p) => (p.id ?? p.label) === selected) ? 0 : -1}\n            className={item}\n            onClick={() => setCustom(true)}\n          >\n            <span className=\"min-w-0\">{t(\"datePicker.custom\", \"Custom\")}</span>\n            {check(selected === null)}\n          </button>\n        </div>\n        <div className={cn(\"flex flex-col p-12\", !wide && \"items-center\")}>\n          <Calendar\n            mode=\"range\"\n            numberOfMonths={months}\n            selected={draft}\n            month={first}\n            onMonthChange={(m) => setLast(addMonths(m, months - 1))}\n            onSelect={(r) => edit(r as DateRange | undefined)}\n            weekStartsOn={weekStartsOn}\n            disabled={disabledDays}\n          />\n          <div ref={fields} className=\"mt-12 flex items-center gap-8 self-stretch\">\n            <IsoField\n              label={t(\"datePicker.startDate\", \"Start date\")}\n              value={draft?.from}\n              invalid={problemOf(\"from\") !== null}\n              errorId={errorId}\n              onProblem={report(\"from\")}\n              onCommit={(d) => typed(\"from\", d)}\n            />\n            <span className=\"text-fg-tertiary\" aria-hidden>\n              –\n            </span>\n            <IsoField\n              label={t(\"datePicker.endDate\", \"End date\")}\n              value={draft?.to}\n              invalid={problemOf(\"to\") !== null}\n              errorId={errorId}\n              onProblem={report(\"to\")}\n              onCommit={(d) => typed(\"to\", d)}\n            />\n            <Button\n              size=\"sm\"\n              variant=\"primary\"\n              onClick={() => {\n                if (!draft?.from) {\n                  setProblem({ field: \"from\", problem: \"missing\" });\n                  fields.current?.querySelector(\"input\")?.focus();\n                  return;\n                }\n                if (unchanged && !custom) onClose();\n                else onPick({ from: draft.from, to: draft.to ?? draft.from }, null);\n              }}\n            >\n              {t(\"datePicker.apply\", \"Apply\")}\n            </Button>\n          </div>\n          <p id={errorId} role=\"alert\" className={cn(ISO_PROBLEM, \"w-0 min-w-full\")}>\n            {problem ? isoProblemText(t, problem.problem) : \"\"}\n          </p>\n        </div>\n      </div>\n    </Popover.Content>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/reasoning-frame-C3HdQRRS.js

@@ -0,0 +1,51 @@
+"use client";
+import { t as e } from "./cn-BjnOAUrA.js";
+import { t } from "./icon-CBzOwqrX.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { ArrowRight01Icon as a } from "@hugeicons/core-free-icons";
+import { Collapsible as o } from "@base-ui/react/collapsible";
+//#region src/components/playground/reasoning-frame.tsx
+var s = /* @__PURE__ */ n(function({ heading: n, preview: s, previewHidden: c = !1, live: l = !1, open: u, defaultOpen: d, onOpenChange: f, children: p, className: m, "data-force": h }, g) {
+	return /* @__PURE__ */ i(o.Root, {
+		ref: g,
+		...u === void 0 ? {} : { open: u },
+		...d === void 0 ? {} : { defaultOpen: d },
+		...f ? { onOpenChange: (e) => f(e) } : {},
+		className: e("flex min-w-0 flex-col", m),
+		children: [/* @__PURE__ */ i(o.Trigger, {
+			...h ? { "data-force": h } : {},
+			className: "group/think flex h-32 min-w-0 cursor-pointer items-center gap-6 rounded-pill px-12 text-left text-small text-fg-secondary transition-control hover:bg-fill-1 hover:text-fg active:bg-fill-2 focus-ring-inset coarse:h-44",
+			children: [
+				/* @__PURE__ */ r(t, {
+					icon: a,
+					size: "xs",
+					className: "shrink-0 text-fg-tertiary transition-transform duration-180 ease-overlay group-hover/think:text-fg-secondary group-data-panel-open/think:rotate-90"
+				}),
+				/* @__PURE__ */ r("span", {
+					className: e("shrink-0 font-medium", l && "animate-pulse-quiet reduced:animate-none"),
+					children: n
+				}),
+				/* @__PURE__ */ r("span", {
+					"aria-hidden": c || void 0,
+					className: "min-w-0 flex-1 truncate text-fg-tertiary group-data-panel-open/think:invisible",
+					children: s
+				})
+			]
+		}), /* @__PURE__ */ r(o.Panel, {
+			className: "collapse-motion",
+			children: /* @__PURE__ */ i("div", {
+				className: "relative pt-4 pb-8 pl-32",
+				children: [/* @__PURE__ */ r("span", {
+					"aria-hidden": !0,
+					className: "absolute top-4 left-18 bottom-8 w-1 rounded-pill bg-line forced-line"
+				}), p]
+			})
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (s.displayName = "ReasoningFrame");
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=reasoning-frame-C3HdQRRS.js.map

package/dist/chunks/reasoning-frame-C3HdQRRS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reasoning-frame-C3HdQRRS.js","names":["BaseCollapsible","__icon_ArrowRight01Icon","cn","ReasoningFrame","force","Collapsible","open","defaultOpen","onOpenChange","o","className","Icon","ArrowRight01Icon","live","heading","previewHidden","preview","children"],"sources":["../../src/components/playground/reasoning-frame.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from \"react\";\nimport { Collapsible as BaseCollapsible } from \"@base-ui/react/collapsible\";\nimport { cn } from \"../../utils/cn.js\";\nimport { ArrowRight01Icon as __icon_ArrowRight01Icon } from \"@hugeicons/core-free-icons\";\nimport { Icon } from \"../icon/icon.js\";\n\nexport interface ReasoningFrameProps {\n  heading: ReactNode;\n  preview?: ReactNode | undefined;\n  previewHidden?: boolean | undefined;\n  live?: boolean | undefined;\n  open?: boolean | undefined;\n  defaultOpen?: boolean | undefined;\n  onOpenChange?: ((open: boolean) => void) | undefined;\n  children: ReactNode;\n  className?: string | undefined;\n  \"data-force\"?: string | undefined;\n}\n\nexport const ReasoningFrame = /* @__PURE__ */ forwardRef<HTMLDivElement, ReasoningFrameProps>(function ReasoningFrame(\n  { heading, preview, previewHidden = false, live = false, open, defaultOpen, onOpenChange, children, className, \"data-force\": force },\n  ref,\n) {\n  return (\n    <BaseCollapsible.Root\n      ref={ref}\n      {...(open !== undefined ? { open } : {})}\n      {...(defaultOpen !== undefined ? { defaultOpen } : {})}\n      {...(onOpenChange ? { onOpenChange: (o: boolean) => onOpenChange(o) } : {})}\n      className={cn(\"flex min-w-0 flex-col\", className)}\n    >\n      <BaseCollapsible.Trigger\n        {...(force ? { \"data-force\": force } : {})}\n        className=\"group/think flex h-32 min-w-0 cursor-pointer items-center gap-6 rounded-pill px-12 text-left text-small text-fg-secondary transition-control hover:bg-fill-1 hover:text-fg active:bg-fill-2 focus-ring-inset coarse:h-44\"\n      >\n        <Icon\n          icon={__icon_ArrowRight01Icon}\n          size=\"xs\"\n          className=\"shrink-0 text-fg-tertiary transition-transform duration-180 ease-overlay group-hover/think:text-fg-secondary group-data-panel-open/think:rotate-90\"\n        />\n        <span className={cn(\"shrink-0 font-medium\", live && \"animate-pulse-quiet reduced:animate-none\")}>{heading}</span>\n        <span aria-hidden={previewHidden || undefined} className=\"min-w-0 flex-1 truncate text-fg-tertiary group-data-panel-open/think:invisible\">\n          {preview}\n        </span>\n      </BaseCollapsible.Trigger>\n      <BaseCollapsible.Panel className=\"collapse-motion\">\n        <div className=\"relative pt-4 pb-8 pl-32\">\n          <span aria-hidden className=\"absolute top-4 left-18 bottom-8 w-1 rounded-pill bg-line forced-line\" />\n          {children}\n        </div>\n      </BaseCollapsible.Panel>\n    </BaseCollapsible.Root>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") ReasoningFrame.displayName = \"ReasoningFrame\";\n"],"mappings":";;;;;;;;AAmBA,IAAaG,IAAiC,kBAAgD,SAC5F,EAAE,YAAS,YAAS,mBAAgB,IAAO,UAAO,IAAO,SAAM,gBAAa,iBAAc,aAAU,cAAW,cAAcC,KAC7H,GACA;CACA,OACE,kBAACJ,EAAgB,MAAjB;EACO;EACL,GAAKM,MAAS,KAAA,IAAuB,CAAC,IAAZ,EAAE,QAAK;EACjC,GAAKC,MAAgB,KAAA,IAA8B,CAAC,IAAnB,EAAE,eAAY;EAC/C,GAAKC,IAAe,EAAE,eAAe,MAAeA,EAAaC,CAAC,EAAE,IAAI,CAAC;EACzE,WAAWP,EAAG,yBAAyBQ,CAAS;EALlD,UAAA,CAOE,kBAACV,EAAgB,SAAjB;GACE,GAAKI,IAAQ,EAAE,cAAcA,EAAM,IAAI,CAAC;GACxC,WAAU;GAFZ,UAAA;IAIE,kBAACO,GAAD;KACE,MAAMV;KACN,MAAK;KACL,WAAU;IACX,CAAA;IACD,kBAAC,QAAD;KAAM,WAAWC,EAAG,wBAAwBW,KAAQ,0CAA0C;KAAI,UAAAC;IAAc,CAAA;IAChH,kBAAC,QAAD;KAAM,eAAaC,KAAiB,KAAA;KAAW,WAAU;KACtD,UAAAC;IACG,CAAA;GACiB;EACzB,CAAA,GAAA,kBAAChB,EAAgB,OAAjB;GAAuB,WAAU;GAC/B,UAAA,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,QAAD;KAAM,eAAA;KAAY,WAAU;IAAwE,CAAA,GACnGiB,CACE;;EACgB,CAAA,CACH;;AAE1B,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAe,cAAc"}