arxatec-ui 0.1.71 → 0.1.72

package/dist/components/inline_duration_field/index.js

@@ -0,0 +1,89 @@
+import { cn as e } from "../../utilities/class/index.js";
+import { Popover as t, PopoverContent as n, PopoverTrigger as r } from "../popover/index.js";
+import { useEditableFields as i } from "../editable_fields/hooks/index.js";
+import { INLINE_FIELD_ROW as a } from "../inline_editable_text/constants/index.js";
+import { DURATION_PRESETS_SECONDS as o } from "./constants/index.js";
+import { durationToParts as s, formatDurationLabel as c, hourValues as l, minuteValues as u, partsToSeconds as d } from "./utils/index.js";
+import { DurationColumn as f } from "./components/duration_column/index.js";
+import { useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/inline_duration_field/index.tsx
+var g = ({ value: g, onChange: _, ariaLabel: v, emptyText: y, testId: b, disabled: x }) => {
+	let { labels: S } = i(), [C, w] = p(!1), { hours: T, minutes: E } = s(g), D = c(g), O = g <= 0, k = S.hours, A = S.minutes, j = (e, t) => {
+		_(d(e, t));
+	};
+	return /* @__PURE__ */ h(t, {
+		open: C,
+		onOpenChange: w,
+		children: [/* @__PURE__ */ m(r, {
+			asChild: !0,
+			children: /* @__PURE__ */ m("button", {
+				type: "button",
+				title: v,
+				"aria-label": v,
+				"aria-expanded": C,
+				"data-testid": b,
+				disabled: x,
+				className: e(a, "w-auto px-2 tabular-nums disabled:pointer-events-none disabled:opacity-50", O && "text-muted-foreground"),
+				children: O ? y : D
+			})
+		}), /* @__PURE__ */ h(n, {
+			align: "start",
+			className: "w-auto overflow-hidden p-0",
+			onWheel: (e) => e.stopPropagation(),
+			children: [
+				/* @__PURE__ */ m("div", {
+					className: "flex gap-1 border-b border-border px-2 py-2",
+					children: o.map((t) => /* @__PURE__ */ m("button", {
+						type: "button",
+						onClick: () => {
+							_(t), w(!1);
+						},
+						className: e("rounded-md px-2 py-1 text-xs tabular-nums text-muted-foreground hover:bg-accent hover:text-foreground", g === t && "bg-accent font-medium text-accent-foreground"),
+						children: c(t)
+					}, t))
+				}),
+				/* @__PURE__ */ h("div", {
+					className: "grid grid-cols-[1fr_auto_1fr] items-center gap-x-1 px-2 pt-2",
+					children: [
+						/* @__PURE__ */ m("p", {
+							className: "text-center text-xs font-medium text-muted-foreground",
+							children: k
+						}),
+						/* @__PURE__ */ m("span", {}),
+						/* @__PURE__ */ m("p", {
+							className: "text-center text-xs font-medium text-muted-foreground",
+							children: A
+						})
+					]
+				}),
+				/* @__PURE__ */ h("div", {
+					className: "grid grid-cols-[1fr_auto_1fr] items-center gap-x-1 px-2 pb-2",
+					children: [
+						/* @__PURE__ */ m(f, {
+							ariaLabel: k,
+							values: l(T),
+							selected: T,
+							onChange: (e) => j(e, E)
+						}),
+						/* @__PURE__ */ m("span", {
+							"aria-hidden": !0,
+							className: "text-lg font-medium text-muted-foreground",
+							children: ":"
+						}),
+						/* @__PURE__ */ m(f, {
+							ariaLabel: A,
+							values: u(),
+							selected: E,
+							onChange: (e) => j(T, e)
+						})
+					]
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { g as InlineDurationField };
+
+//# sourceMappingURL=index.js.map

package/dist/components/inline_duration_field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/inline_duration_field/index.tsx"],"sourcesContent":["import { useEditableFields } from \"@/components/editable_fields/hooks\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/popover\";\nimport { useState } from \"react\";\nimport { cn } from \"@/utilities/class\";\nimport { INLINE_FIELD_ROW } from \"../inline_editable_text/constants\";\nimport { DurationColumn } from \"./components/duration_column\";\nimport { DURATION_PRESETS_SECONDS } from \"./constants\";\nimport {\n  durationToParts,\n  formatDurationLabel,\n  hourValues,\n  minuteValues,\n  partsToSeconds,\n} from \"./utils\";\n\nexport interface InlineDurationFieldProps {\n  value: number;\n  onChange: (seconds: number) => void;\n  ariaLabel: string;\n  emptyText: string;\n  testId?: string;\n  disabled?: boolean;\n}\n\nexport const InlineDurationField = ({\n  value,\n  onChange,\n  ariaLabel,\n  emptyText,\n  testId,\n  disabled,\n}: InlineDurationFieldProps) => {\n  const { labels } = useEditableFields();\n  const [open, setOpen] = useState(false);\n  const { hours, minutes } = durationToParts(value);\n  const label = formatDurationLabel(value);\n  const isEmpty = value <= 0;\n  const hoursLabel = labels.hours;\n  const minutesLabel = labels.minutes;\n\n  const commit = (nextHours: number, nextMinutes: number) => {\n    onChange(partsToSeconds(nextHours, nextMinutes));\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          title={ariaLabel}\n          aria-label={ariaLabel}\n          aria-expanded={open}\n          data-testid={testId}\n          disabled={disabled}\n          className={cn(\n            INLINE_FIELD_ROW,\n            \"w-auto px-2 tabular-nums disabled:pointer-events-none disabled:opacity-50\",\n            isEmpty && \"text-muted-foreground\",\n          )}\n        >\n          {isEmpty ? emptyText : label}\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"w-auto overflow-hidden p-0\"\n        onWheel={(event) => event.stopPropagation()}\n      >\n        <div className=\"flex gap-1 border-b border-border px-2 py-2\">\n          {DURATION_PRESETS_SECONDS.map((preset) => (\n            <button\n              key={preset}\n              type=\"button\"\n              onClick={() => {\n                onChange(preset);\n                setOpen(false);\n              }}\n              className={cn(\n                \"rounded-md px-2 py-1 text-xs tabular-nums text-muted-foreground hover:bg-accent hover:text-foreground\",\n                value === preset &&\n                  \"bg-accent font-medium text-accent-foreground\",\n              )}\n            >\n              {formatDurationLabel(preset)}\n            </button>\n          ))}\n        </div>\n\n        <div className=\"grid grid-cols-[1fr_auto_1fr] items-center gap-x-1 px-2 pt-2\">\n          <p className=\"text-center text-xs font-medium text-muted-foreground\">\n            {hoursLabel}\n          </p>\n          <span />\n          <p className=\"text-center text-xs font-medium text-muted-foreground\">\n            {minutesLabel}\n          </p>\n        </div>\n\n        <div className=\"grid grid-cols-[1fr_auto_1fr] items-center gap-x-1 px-2 pb-2\">\n          <DurationColumn\n            ariaLabel={hoursLabel}\n            values={hourValues(hours)}\n            selected={hours}\n            onChange={(next) => commit(next, minutes)}\n          />\n          <span\n            aria-hidden\n            className=\"text-lg font-medium text-muted-foreground\"\n          >\n            :\n          </span>\n          <DurationColumn\n            ariaLabel={minutesLabel}\n            values={minuteValues()}\n            selected={minutes}\n            onChange={(next) => commit(hours, next)}\n          />\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n};\n"],"mappings":";;;;;;;;;;AAwBA,IAAa,KAAuB,EAClC,UACA,aACA,cACA,cACA,WACA,kBAC8B;CAC9B,IAAM,EAAE,cAAW,GAAmB,EAChC,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,EAAE,UAAO,eAAY,EAAgB,EAAM,EAC3C,IAAQ,EAAoB,EAAM,EAClC,IAAU,KAAS,GACnB,IAAa,EAAO,OACpB,IAAe,EAAO,SAEtB,KAAU,GAAmB,MAAwB;AACzD,IAAS,EAAe,GAAW,EAAY,CAAC;;AAGlD,QACE,kBAAC,GAAD;EAAe;EAAM,cAAc;YAAnC,CACE,kBAAC,GAAD;GAAgB,SAAA;aACd,kBAAC,UAAD;IACE,MAAK;IACL,OAAO;IACP,cAAY;IACZ,iBAAe;IACf,eAAa;IACH;IACV,WAAW,EACT,GACA,6EACA,KAAW,wBACZ;cAEA,IAAU,IAAY;IAChB,CAAA;GACM,CAAA,EACjB,kBAAC,GAAD;GACE,OAAM;GACN,WAAU;GACV,UAAU,MAAU,EAAM,iBAAiB;aAH7C;IAKE,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAyB,KAAK,MAC7B,kBAAC,UAAD;MAEE,MAAK;MACL,eAAe;AAEb,OADA,EAAS,EAAO,EAChB,EAAQ,GAAM;;MAEhB,WAAW,EACT,yGACA,MAAU,KACR,+CACH;gBAEA,EAAoB,EAAO;MACrB,EAbF,EAaE,CACT;KACE,CAAA;IAEN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,KAAD;OAAG,WAAU;iBACV;OACC,CAAA;MACJ,kBAAC,QAAD,EAAQ,CAAA;MACR,kBAAC,KAAD;OAAG,WAAU;iBACV;OACC,CAAA;MACA;;IAEN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,GAAD;OACE,WAAW;OACX,QAAQ,EAAW,EAAM;OACzB,UAAU;OACV,WAAW,MAAS,EAAO,GAAM,EAAQ;OACzC,CAAA;MACF,kBAAC,QAAD;OACE,eAAA;OACA,WAAU;iBACX;OAEM,CAAA;MACP,kBAAC,GAAD;OACE,WAAW;OACX,QAAQ,GAAc;OACtB,UAAU;OACV,WAAW,MAAS,EAAO,GAAO,EAAK;OACvC,CAAA;MACE;;IACS;KACT"}

package/dist/components/inline_duration_field/utils/index.d.ts

@@ -0,0 +1,11 @@
+export declare const durationToParts: (seconds: number) => {
+    hours: number;
+    minutes: number;
+};
+export declare const partsToSeconds: (hours: number, minutes: number) => number;
+export declare const formatDurationLabel: (seconds: number) => string;
+export declare const hourValues: (currentHours?: number) => number[];
+export declare const minuteValues: () => number[];
+export declare const SCROLL_AREA_VIEWPORT_SELECTOR = "[data-slot=scroll-area-viewport]";
+export declare const getScrollViewport: (root: HTMLElement) => HTMLElement;
+export declare const attachWheelScroll: (node: HTMLElement) => () => void;

package/dist/components/inline_duration_field/utils/index.js

@@ -0,0 +1,21 @@
+//#region src/components/inline_duration_field/utils/index.ts
+var e = (e) => {
+	let t = Math.max(0, Math.floor(e));
+	return {
+		hours: Math.floor(t / 3600),
+		minutes: Math.floor(t % 3600 / 60)
+	};
+}, t = (e, t) => Math.max(0, e) * 3600 + Math.max(0, t) * 60, n = (t) => {
+	if (t <= 0) return "";
+	let { hours: n, minutes: r } = e(t);
+	return n > 0 && r > 0 ? `${n}h ${r}m` : n > 0 ? `${n}h` : `${r}m`;
+}, r = (e = 0) => Array.from({ length: Math.max(23, e) + 1 }, (e, t) => t), i = () => Array.from({ length: 60 }, (e, t) => t), a = (e) => e.querySelector("[data-slot=scroll-area-viewport]") ?? e, o = (e) => {
+	let t = (t) => {
+		t.preventDefault(), t.stopPropagation(), e.scrollTop += t.deltaY;
+	};
+	return e.addEventListener("wheel", t, { passive: !1 }), () => e.removeEventListener("wheel", t);
+};
+//#endregion
+export { o as attachWheelScroll, e as durationToParts, n as formatDurationLabel, a as getScrollViewport, r as hourValues, i as minuteValues, t as partsToSeconds };
+
+//# sourceMappingURL=index.js.map

package/dist/components/inline_duration_field/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/inline_duration_field/utils/index.ts"],"sourcesContent":["import { DURATION_MAX_HOURS, DURATION_MAX_MINUTES } from \"../constants\";\n\nexport const durationToParts = (seconds: number) => {\n  const safe = Math.max(0, Math.floor(seconds));\n  return {\n    hours: Math.floor(safe / 3600),\n    minutes: Math.floor((safe % 3600) / 60),\n  };\n};\n\nexport const partsToSeconds = (hours: number, minutes: number) =>\n  Math.max(0, hours) * 3600 + Math.max(0, minutes) * 60;\n\nexport const formatDurationLabel = (seconds: number) => {\n  if (seconds <= 0) return \"\";\n  const { hours, minutes } = durationToParts(seconds);\n  if (hours > 0 && minutes > 0) return `${hours}h ${minutes}m`;\n  if (hours > 0) return `${hours}h`;\n  return `${minutes}m`;\n};\n\nexport const hourValues = (currentHours = 0) =>\n  Array.from(\n    { length: Math.max(DURATION_MAX_HOURS, currentHours) + 1 },\n    (_, index) => index,\n  );\n\nexport const minuteValues = () =>\n  Array.from({ length: DURATION_MAX_MINUTES + 1 }, (_, index) => index);\n\nexport const SCROLL_AREA_VIEWPORT_SELECTOR = \"[data-slot=scroll-area-viewport]\";\n\nexport const getScrollViewport = (root: HTMLElement) =>\n  root.querySelector<HTMLElement>(SCROLL_AREA_VIEWPORT_SELECTOR) ?? root;\n\nexport const attachWheelScroll = (node: HTMLElement) => {\n  const onWheel = (event: WheelEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    node.scrollTop += event.deltaY;\n  };\n\n  node.addEventListener(\"wheel\", onWheel, { passive: false });\n  return () => node.removeEventListener(\"wheel\", onWheel);\n};\n"],"mappings":";AAEA,IAAa,KAAmB,MAAoB;CAClD,IAAM,IAAO,KAAK,IAAI,GAAG,KAAK,MAAM,EAAQ,CAAC;AAC7C,QAAO;EACL,OAAO,KAAK,MAAM,IAAO,KAAK;EAC9B,SAAS,KAAK,MAAO,IAAO,OAAQ,GAAG;EACxC;GAGU,KAAkB,GAAe,MAC5C,KAAK,IAAI,GAAG,EAAM,GAAG,OAAO,KAAK,IAAI,GAAG,EAAQ,GAAG,IAExC,KAAuB,MAAoB;AACtD,KAAI,KAAW,EAAG,QAAO;CACzB,IAAM,EAAE,UAAO,eAAY,EAAgB,EAAQ;AAGnD,QAFI,IAAQ,KAAK,IAAU,IAAU,GAAG,EAAM,IAAI,EAAQ,KACtD,IAAQ,IAAU,GAAG,EAAM,KACxB,GAAG,EAAQ;GAGP,KAAc,IAAe,MACxC,MAAM,KACJ,EAAE,QAAQ,KAAK,IAAA,IAAwB,EAAa,GAAG,GAAG,GACzD,GAAG,MAAU,EACf,EAEU,UACX,MAAM,KAAK,EAAE,QAAA,IAAkC,GAAG,GAAG,MAAU,EAAM,EAI1D,KAAqB,MAChC,EAAK,cAAA,mCAAyD,IAAI,GAEvD,KAAqB,MAAsB;CACtD,IAAM,KAAW,MAAsB;AAGrC,EAFA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,EAAK,aAAa,EAAM;;AAI1B,QADA,EAAK,iBAAiB,SAAS,GAAS,EAAE,SAAS,IAAO,CAAC,QAC9C,EAAK,oBAAoB,SAAS,EAAQ"}

package/dist/components/inline_editable_text/constants/index.d.ts

@@ -0,0 +1,2 @@
+export declare const SHARED_BOX = "-mx-2 w-full rounded-md border px-2 py-1 text-left text-sm";
+export declare const INLINE_FIELD_ROW: string;

package/dist/components/inline_editable_text/constants/index.js

@@ -0,0 +1,7 @@
+import { cn as e } from "../../../utilities/class/index.js";
+//#region src/components/inline_editable_text/constants/index.ts
+var t = "-mx-2 w-full rounded-md border px-2 py-1 text-left text-sm", n = e(t, "min-h-8 border-transparent transition-colors", "hover:border-input hover:bg-muted/40", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none");
+//#endregion
+export { n as INLINE_FIELD_ROW, t as SHARED_BOX };
+
+//# sourceMappingURL=index.js.map

package/dist/components/inline_editable_text/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/inline_editable_text/constants/index.ts"],"sourcesContent":["import { cn } from \"@/utilities/class\";\n\nexport const SHARED_BOX =\n  \"-mx-2 w-full rounded-md border px-2 py-1 text-left text-sm\";\n\nexport const INLINE_FIELD_ROW = cn(\n  SHARED_BOX,\n  \"min-h-8 border-transparent transition-colors\",\n  \"hover:border-input hover:bg-muted/40\",\n  \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none\",\n);\n"],"mappings":";;AAEA,IAAa,IACX,8DAEW,IAAmB,EAC9B,GACA,gDACA,wCACA,2GACD"}

package/dist/components/inline_editable_text/index.d.ts

@@ -0,0 +1,16 @@
+export interface InlineEditableTextProps {
+    value: string;
+    onCommit: (value: string) => void;
+    onChange?: (value: string) => void;
+    onCancel?: () => void;
+    ariaLabel: string;
+    placeholder?: string;
+    emptyText?: string;
+    multiline?: boolean;
+    disabled?: boolean;
+    validate?: (value: string) => string | null;
+    selectOnEdit?: boolean;
+    className?: string;
+    testId?: string;
+}
+export declare function InlineEditableText({ value, onCommit, onChange, onCancel, ariaLabel, placeholder, emptyText, multiline, disabled, validate, selectOnEdit, className, testId, }: InlineEditableTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inline_editable_text/index.js

@@ -0,0 +1,109 @@
+import { cn as e } from "../../utilities/class/index.js";
+import { useEditableFields as t } from "../editable_fields/hooks/index.js";
+import { INLINE_FIELD_ROW as n, SHARED_BOX as r } from "./constants/index.js";
+import { useLayoutEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/inline_editable_text/index.tsx
+var l = 320;
+function u(e) {
+	e.style.height = "auto", e.style.height = `${Math.min(e.scrollHeight, l)}px`;
+}
+function d({ value: l, onCommit: d, onChange: f, onCancel: p, ariaLabel: m, placeholder: h, emptyText: g, multiline: _ = !1, disabled: v = !1, validate: y, selectOnEdit: b = !1, className: x, testId: S }) {
+	let { labels: C } = t(), [w, T] = o(!1), [E, D] = o(l), [O, k] = o(null), A = a(null), j = a(!1);
+	i(() => {
+		if (!w) return;
+		let e = A.current;
+		if (e) {
+			if (e.focus(), b) e.select();
+			else {
+				let t = e.value.length;
+				e.setSelectionRange(t, t);
+			}
+			e instanceof HTMLTextAreaElement && u(e);
+		}
+	}, [w, b]);
+	let M = () => {
+		v || (D(l), k(null), T(!0));
+	}, N = () => {
+		j.current = !0, p?.(), D(l), k(null), T(!1);
+	}, P = () => {
+		let e = E.trim(), t = y?.(e) ?? null;
+		if (t !== null) {
+			k(t), j.current = !0, A.current?.focus();
+			return;
+		}
+		T(!1), k(null), e !== l && (D(e), d(e));
+	}, F = (e) => {
+		D(e), f?.(e);
+	}, I = (e) => {
+		if (e.key === "Escape") {
+			e.preventDefault(), e.stopPropagation(), N();
+			return;
+		}
+		e.key === "Enter" && (_ && !e.metaKey && !e.ctrlKey || (e.preventDefault(), P()));
+	}, L = () => {
+		if (j.current) {
+			j.current = !1;
+			return;
+		}
+		P();
+	};
+	if (w) {
+		let t = e(r, "border-input bg-card outline-none transition-colors", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", O && "border-destructive", x);
+		return /* @__PURE__ */ c("div", { children: [
+			_ ? /* @__PURE__ */ s("textarea", {
+				ref: (e) => {
+					A.current = e;
+				},
+				"aria-label": m,
+				"aria-invalid": O !== null,
+				"data-testid": S,
+				rows: 1,
+				value: E,
+				placeholder: h ?? C.empty,
+				className: e(t, "resize-none overflow-y-auto"),
+				onChange: (e) => {
+					F(e.target.value), u(e.target);
+				},
+				onKeyDown: I,
+				onBlur: L
+			}) : /* @__PURE__ */ s("input", {
+				ref: (e) => {
+					A.current = e;
+				},
+				"aria-label": m,
+				"aria-invalid": O !== null,
+				"data-testid": S,
+				value: E,
+				placeholder: h ?? C.empty,
+				className: t,
+				onChange: (e) => F(e.target.value),
+				onKeyDown: I,
+				onBlur: L
+			}),
+			O ? /* @__PURE__ */ s("p", {
+				className: "mt-1 text-xs text-destructive",
+				"data-testid": S ? `${S}-error` : void 0,
+				children: O
+			}) : null,
+			/* @__PURE__ */ s("p", {
+				className: "sr-only",
+				children: C.hint
+			})
+		] });
+	}
+	let R = l.trim() === "";
+	return /* @__PURE__ */ s("button", {
+		type: "button",
+		"aria-label": m,
+		"data-testid": S,
+		disabled: v,
+		onClick: M,
+		className: e(n, "disabled:pointer-events-none disabled:opacity-50", _ ? "whitespace-pre-wrap break-words" : "truncate", R && "text-muted-foreground", x),
+		children: R ? g ?? h ?? C.empty : l
+	});
+}
+//#endregion
+export { d as InlineEditableText };
+
+//# sourceMappingURL=index.js.map

package/dist/components/inline_editable_text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/inline_editable_text/index.tsx"],"sourcesContent":["import { useEditableFields } from \"@/components/editable_fields/hooks\";\nimport {\n  useLayoutEffect,\n  useRef,\n  useState,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from \"react\";\nimport { cn } from \"@/utilities/class\";\nimport { INLINE_FIELD_ROW, SHARED_BOX } from \"./constants\";\n\nexport interface InlineEditableTextProps {\n  value: string;\n  onCommit: (value: string) => void;\n  onChange?: (value: string) => void;\n  onCancel?: () => void;\n  ariaLabel: string;\n  placeholder?: string;\n  emptyText?: string;\n  multiline?: boolean;\n  disabled?: boolean;\n  validate?: (value: string) => string | null;\n  selectOnEdit?: boolean;\n  className?: string;\n  testId?: string;\n}\n\nconst TEXTAREA_MAX_HEIGHT_PX = 320;\n\nfunction resizeToContent(element: HTMLTextAreaElement) {\n  element.style.height = \"auto\";\n  element.style.height = `${Math.min(element.scrollHeight, TEXTAREA_MAX_HEIGHT_PX)}px`;\n}\n\nexport function InlineEditableText({\n  value,\n  onCommit,\n  onChange,\n  onCancel,\n  ariaLabel,\n  placeholder,\n  emptyText,\n  multiline = false,\n  disabled = false,\n  validate,\n  selectOnEdit = false,\n  className,\n  testId,\n}: InlineEditableTextProps) {\n  const { labels } = useEditableFields();\n\n  const [isEditing, setIsEditing] = useState(false);\n  const [draft, setDraft] = useState(value);\n  const [error, setError] = useState<string | null>(null);\n\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n  const skipNextBlurRef = useRef(false);\n\n  useLayoutEffect(() => {\n    if (!isEditing) return;\n    const element = inputRef.current;\n    if (!element) return;\n\n    element.focus();\n    if (selectOnEdit) {\n      element.select();\n    } else {\n      const end = element.value.length;\n      element.setSelectionRange(end, end);\n    }\n    if (element instanceof HTMLTextAreaElement) resizeToContent(element);\n  }, [isEditing, selectOnEdit]);\n\n  const startEditing = () => {\n    if (disabled) return;\n    setDraft(value);\n    setError(null);\n    setIsEditing(true);\n  };\n\n  const cancel = () => {\n    skipNextBlurRef.current = true;\n    onCancel?.();\n    setDraft(value);\n    setError(null);\n    setIsEditing(false);\n  };\n\n  const commit = () => {\n    const next = draft.trim();\n\n    const invalid = validate?.(next) ?? null;\n    if (invalid !== null) {\n      setError(invalid);\n      skipNextBlurRef.current = true;\n      inputRef.current?.focus();\n      return;\n    }\n\n    setIsEditing(false);\n    setError(null);\n    if (next === value) return;\n    setDraft(next);\n    onCommit(next);\n  };\n\n  const handleChange = (next: string) => {\n    setDraft(next);\n    onChange?.(next);\n  };\n\n  const onKeyDown = (\n    event: ReactKeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,\n  ) => {\n    if (event.key === \"Escape\") {\n      event.preventDefault();\n      event.stopPropagation();\n      cancel();\n      return;\n    }\n\n    if (event.key !== \"Enter\") return;\n\n    if (multiline && !event.metaKey && !event.ctrlKey) return;\n\n    event.preventDefault();\n    commit();\n  };\n\n  const onBlur = () => {\n    if (skipNextBlurRef.current) {\n      skipNextBlurRef.current = false;\n      return;\n    }\n    commit();\n  };\n\n  if (isEditing) {\n    const editClassName = cn(\n      SHARED_BOX,\n      \"border-input bg-card outline-none transition-colors\",\n      \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n      error && \"border-destructive\",\n      className,\n    );\n\n    return (\n      <div>\n        {multiline ? (\n          <textarea\n            ref={(node) => {\n              inputRef.current = node;\n            }}\n            aria-label={ariaLabel}\n            aria-invalid={error !== null}\n            data-testid={testId}\n            rows={1}\n            value={draft}\n            placeholder={placeholder ?? labels.empty}\n            className={cn(editClassName, \"resize-none overflow-y-auto\")}\n            onChange={(event) => {\n              handleChange(event.target.value);\n              resizeToContent(event.target);\n            }}\n            onKeyDown={onKeyDown}\n            onBlur={onBlur}\n          />\n        ) : (\n          <input\n            ref={(node) => {\n              inputRef.current = node;\n            }}\n            aria-label={ariaLabel}\n            aria-invalid={error !== null}\n            data-testid={testId}\n            value={draft}\n            placeholder={placeholder ?? labels.empty}\n            className={editClassName}\n            onChange={(event) => handleChange(event.target.value)}\n            onKeyDown={onKeyDown}\n            onBlur={onBlur}\n          />\n        )}\n        {error ? (\n          <p\n            className=\"mt-1 text-xs text-destructive\"\n            data-testid={testId ? `${testId}-error` : undefined}\n          >\n            {error}\n          </p>\n        ) : null}\n        <p className=\"sr-only\">{labels.hint}</p>\n      </div>\n    );\n  }\n\n  const isEmpty = value.trim() === \"\";\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      data-testid={testId}\n      disabled={disabled}\n      onClick={startEditing}\n      className={cn(\n        INLINE_FIELD_ROW,\n        \"disabled:pointer-events-none disabled:opacity-50\",\n        multiline ? \"whitespace-pre-wrap break-words\" : \"truncate\",\n        isEmpty && \"text-muted-foreground\",\n        className,\n      )}\n    >\n      {isEmpty ? (emptyText ?? placeholder ?? labels.empty) : value}\n    </button>\n  );\n}\n"],"mappings":"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"}

package/dist/components/inline_field_trigger/index.d.ts

@@ -0,0 +1,3 @@
+import { ButtonHTMLAttributes } from 'react';
+export type InlineFieldTriggerProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const InlineFieldTrigger: import('react').ForwardRefExoticComponent<InlineFieldTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/inline_field_trigger/index.js

@@ -0,0 +1,16 @@
+import { cn as e } from "../../utilities/class/index.js";
+import { INLINE_FIELD_ROW as t } from "../inline_editable_text/constants/index.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/inline_field_trigger/index.tsx
+var i = n(({ className: n, type: i = "button", ...a }, o) => /* @__PURE__ */ r("button", {
+	ref: o,
+	type: i,
+	className: e(t, n),
+	...a
+}));
+i.displayName = "InlineFieldTrigger";
+//#endregion
+export { i as InlineFieldTrigger };
+
+//# sourceMappingURL=index.js.map

package/dist/components/inline_field_trigger/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/inline_field_trigger/index.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"@/utilities/class\";\nimport { INLINE_FIELD_ROW } from \"../inline_editable_text/constants\";\n\nexport type InlineFieldTriggerProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const InlineFieldTrigger = forwardRef<\n  HTMLButtonElement,\n  InlineFieldTriggerProps\n>(({ className, type = \"button\", ...props }, ref) => (\n  <button\n    ref={ref}\n    type={type}\n    className={cn(INLINE_FIELD_ROW, className)}\n    {...props}\n  />\n));\nInlineFieldTrigger.displayName = \"InlineFieldTrigger\";\n"],"mappings":";;;;;AAMA,IAAa,IAAqB,GAG/B,EAAE,cAAW,UAAO,UAAU,GAAG,KAAS,MAC3C,kBAAC,UAAD;CACO;CACC;CACN,WAAW,EAAG,GAAkB,EAAU;CAC1C,GAAI;CACJ,CAAA,CACF;AACF,EAAmB,cAAc"}

package/dist/components/inline_markdown_field/index.d.ts

@@ -0,0 +1,14 @@
+export interface InlineMarkdownFieldProps {
+    value: string;
+    onCommit: (value: string) => void;
+    onChange?: (value: string) => void;
+    onCancel?: () => void;
+    placeholder?: string;
+    emptyText?: string;
+    disabled?: boolean;
+    collapsible?: boolean;
+    testId?: string;
+    ariaLabel?: string;
+    editorClassName?: string;
+}
+export declare const InlineMarkdownField: ({ value, onCommit, onChange, onCancel, placeholder, emptyText, disabled, collapsible, testId, ariaLabel, editorClassName, }: InlineMarkdownFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inline_markdown_field/index.js

@@ -0,0 +1,70 @@
+import { cn as e } from "../../utilities/class/index.js";
+import { DescriptionMarkdownEditor as t } from "../description_markdown_editor/index.js";
+import { useEditableFields as n } from "../editable_fields/hooks/index.js";
+import { INLINE_FIELD_ROW as r } from "../inline_editable_text/constants/index.js";
+import { useEffect as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/inline_markdown_field/index.tsx
+function l(e) {
+	let t = e?.querySelector("[contenteditable=\"true\"]");
+	if (!t) return;
+	t.focus();
+	let n = window.getSelection();
+	if (!n) return;
+	let r = document.createRange();
+	r.selectNodeContents(t), r.collapse(!1), n.removeAllRanges(), n.addRange(r);
+}
+var u = ({ value: u, onCommit: d, onChange: f, onCancel: p, placeholder: m, emptyText: h, disabled: g = !1, collapsible: _ = !1, testId: v, ariaLabel: y, editorClassName: b = "min-h-[120px] text-sm" }) => {
+	let { labels: x } = n(), [S, C] = s(u), [w, T] = s(!_), E = o(u), D = o(!1), O = o(null);
+	i(() => {
+		u !== E.current && (E.current = u, !D.current && C(u));
+	}, [u]), a(() => {
+		!_ || !w || l(O.current);
+	}, [_, w]);
+	let k = () => {
+		_ && T(!1);
+	}, A = () => {
+		k(), S !== u && d(S);
+	}, j = () => {
+		p?.(), C(u), k();
+	}, M = (e) => {
+		e.currentTarget.contains(e.relatedTarget) || (D.current = !1, A());
+	};
+	if (_ && !w) {
+		let t = u.trim() === "";
+		return /* @__PURE__ */ c("button", {
+			type: "button",
+			"aria-label": y,
+			"data-testid": v,
+			disabled: g,
+			onClick: () => {
+				C(u), T(!0);
+			},
+			className: e(r, "line-clamp-3 whitespace-pre-wrap break-words", "disabled:pointer-events-none disabled:opacity-50", t && "text-muted-foreground"),
+			children: t ? h ?? m ?? x.empty : u
+		});
+	}
+	return /* @__PURE__ */ c("div", {
+		ref: O,
+		"data-testid": v,
+		onFocus: () => {
+			D.current = !0;
+		},
+		onBlur: M,
+		children: /* @__PURE__ */ c(t, {
+			value: S,
+			onChange: (e) => {
+				C(e), f?.(e);
+			},
+			onSubmit: A,
+			onEscape: j,
+			placeholder: m,
+			disabled: g,
+			editorClassName: b
+		})
+	});
+};
+//#endregion
+export { u as InlineMarkdownField };
+
+//# sourceMappingURL=index.js.map

package/dist/components/inline_markdown_field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/inline_markdown_field/index.tsx"],"sourcesContent":["import { useEditableFields } from \"@/components/editable_fields/hooks\";\nimport { DescriptionMarkdownEditor } from \"@/components/description_markdown_editor\";\nimport {\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type FocusEvent,\n} from \"react\";\nimport { cn } from \"@/utilities/class\";\nimport { INLINE_FIELD_ROW } from \"../inline_editable_text/constants\";\n\nexport interface InlineMarkdownFieldProps {\n  value: string;\n  onCommit: (value: string) => void;\n  onChange?: (value: string) => void;\n  onCancel?: () => void;\n  placeholder?: string;\n  emptyText?: string;\n  disabled?: boolean;\n  collapsible?: boolean;\n  testId?: string;\n  ariaLabel?: string;\n  editorClassName?: string;\n}\n\nfunction focusEditor(container: HTMLElement | null) {\n  const editable = container?.querySelector<HTMLElement>(\n    '[contenteditable=\"true\"]',\n  );\n  if (!editable) return;\n\n  editable.focus();\n  const selection = window.getSelection();\n  if (!selection) return;\n\n  const range = document.createRange();\n  range.selectNodeContents(editable);\n  range.collapse(false);\n  selection.removeAllRanges();\n  selection.addRange(range);\n}\n\nexport const InlineMarkdownField = ({\n  value,\n  onCommit,\n  onChange,\n  onCancel,\n  placeholder,\n  emptyText,\n  disabled = false,\n  collapsible = false,\n  testId,\n  ariaLabel,\n  editorClassName = \"min-h-[120px] text-sm\",\n}: InlineMarkdownFieldProps) => {\n  const { labels } = useEditableFields();\n\n  const [draft, setDraft] = useState(value);\n  const [isEditing, setIsEditing] = useState(!collapsible);\n  const serverRef = useRef(value);\n  const isFocusedRef = useRef(false);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    if (value === serverRef.current) return;\n    serverRef.current = value;\n    if (isFocusedRef.current) return;\n    setDraft(value);\n  }, [value]);\n\n  useLayoutEffect(() => {\n    if (!collapsible || !isEditing) return;\n    focusEditor(containerRef.current);\n  }, [collapsible, isEditing]);\n\n  const close = () => {\n    if (collapsible) setIsEditing(false);\n  };\n\n  const commit = () => {\n    close();\n    if (draft === value) return;\n    onCommit(draft);\n  };\n\n  const cancel = () => {\n    onCancel?.();\n    setDraft(value);\n    close();\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n    if (event.currentTarget.contains(event.relatedTarget)) return;\n    isFocusedRef.current = false;\n    commit();\n  };\n\n  if (collapsible && !isEditing) {\n    const isEmpty = value.trim() === \"\";\n\n    return (\n      <button\n        type=\"button\"\n        aria-label={ariaLabel}\n        data-testid={testId}\n        disabled={disabled}\n        onClick={() => {\n          setDraft(value);\n          setIsEditing(true);\n        }}\n        className={cn(\n          INLINE_FIELD_ROW,\n          \"line-clamp-3 whitespace-pre-wrap break-words\",\n          \"disabled:pointer-events-none disabled:opacity-50\",\n          isEmpty && \"text-muted-foreground\",\n        )}\n      >\n        {isEmpty ? (emptyText ?? placeholder ?? labels.empty) : value}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      data-testid={testId}\n      onFocus={() => {\n        isFocusedRef.current = true;\n      }}\n      onBlur={handleBlur}\n    >\n      <DescriptionMarkdownEditor\n        value={draft}\n        onChange={(markdown) => {\n          setDraft(markdown);\n          onChange?.(markdown);\n        }}\n        onSubmit={commit}\n        onEscape={cancel}\n        placeholder={placeholder}\n        disabled={disabled}\n        editorClassName={editorClassName}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AA0BA,SAAS,EAAY,GAA+B;CAClD,IAAM,IAAW,GAAW,cAC1B,6BACD;AACD,KAAI,CAAC,EAAU;AAEf,GAAS,OAAO;CAChB,IAAM,IAAY,OAAO,cAAc;AACvC,KAAI,CAAC,EAAW;CAEhB,IAAM,IAAQ,SAAS,aAAa;AAIpC,CAHA,EAAM,mBAAmB,EAAS,EAClC,EAAM,SAAS,GAAM,EACrB,EAAU,iBAAiB,EAC3B,EAAU,SAAS,EAAM;;AAG3B,IAAa,KAAuB,EAClC,UACA,aACA,aACA,aACA,gBACA,cACA,cAAW,IACX,iBAAc,IACd,WACA,cACA,qBAAkB,8BACY;CAC9B,IAAM,EAAE,cAAW,GAAmB,EAEhC,CAAC,GAAO,KAAY,EAAS,EAAM,EACnC,CAAC,GAAW,KAAgB,EAAS,CAAC,EAAY,EAClD,IAAY,EAAO,EAAM,EACzB,IAAe,EAAO,GAAM,EAC5B,IAAe,EAA8B,KAAK;AASxD,CAPA,QAAgB;AACV,QAAU,EAAU,YACxB,EAAU,UAAU,GAChB,GAAa,WACjB,EAAS,EAAM;IACd,CAAC,EAAM,CAAC,EAEX,QAAsB;AAChB,GAAC,KAAe,CAAC,KACrB,EAAY,EAAa,QAAQ;IAChC,CAAC,GAAa,EAAU,CAAC;CAE5B,IAAM,UAAc;AAClB,EAAI,KAAa,EAAa,GAAM;IAGhC,UAAe;AACnB,KAAO,EACH,MAAU,KACd,EAAS,EAAM;IAGX,UAAe;AAGnB,EAFA,KAAY,EACZ,EAAS,EAAM,EACf,GAAO;IAGH,KAAc,MAAsC;AACpD,IAAM,cAAc,SAAS,EAAM,cAAc,KACrD,EAAa,UAAU,IACvB,GAAQ;;AAGV,KAAI,KAAe,CAAC,GAAW;EAC7B,IAAM,IAAU,EAAM,MAAM,KAAK;AAEjC,SACE,kBAAC,UAAD;GACE,MAAK;GACL,cAAY;GACZ,eAAa;GACH;GACV,eAAe;AAEb,IADA,EAAS,EAAM,EACf,EAAa,GAAK;;GAEpB,WAAW,EACT,GACA,gDACA,oDACA,KAAW,wBACZ;aAEA,IAAW,KAAa,KAAe,EAAO,QAAS;GACjD,CAAA;;AAIb,QACE,kBAAC,OAAD;EACE,KAAK;EACL,eAAa;EACb,eAAe;AACb,KAAa,UAAU;;EAEzB,QAAQ;YAER,kBAAC,GAAD;GACE,OAAO;GACP,WAAW,MAAa;AAEtB,IADA,EAAS,EAAS,EAClB,IAAW,EAAS;;GAEtB,UAAU;GACV,UAAU;GACG;GACH;GACO;GACjB,CAAA;EACE,CAAA"}

package/dist/components/inline_option_field/index.d.ts

@@ -0,0 +1,19 @@
+import { LucideIcon } from 'lucide-react';
+import { ReactNode } from 'react';
+export interface InlineOption {
+    value: string;
+    label: string;
+    icon?: LucideIcon;
+}
+export interface InlineOptionFieldProps {
+    value: string | null;
+    options: InlineOption[];
+    onChange: (next: string | null) => void;
+    ariaLabel: string;
+    emptyText: string;
+    testId?: string;
+    clearLabel?: string;
+    disabled?: boolean;
+    renderOption?: (option: InlineOption) => ReactNode;
+}
+export declare const InlineOptionField: ({ value, options, onChange, ariaLabel, emptyText, testId, clearLabel, disabled, renderOption, }: InlineOptionFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inline_option_field/index.js

@@ -0,0 +1,56 @@
+import { cn as e } from "../../utilities/class/index.js";
+import { Popover as t, PopoverContent as n, PopoverTrigger as r } from "../popover/index.js";
+import { INLINE_FIELD_ROW as i } from "../inline_editable_text/constants/index.js";
+import { useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/inline_option_field/index.tsx
+var l = ({ value: l, options: u, onChange: d, ariaLabel: f, emptyText: p, testId: m, clearLabel: h, disabled: g, renderOption: _ }) => {
+	let [v, y] = a(!1), b = u.find((e) => e.value === l) ?? null, x = b?.icon, S = (e) => {
+		y(!1), e !== l && d(e);
+	};
+	return /* @__PURE__ */ c(t, {
+		open: v,
+		onOpenChange: y,
+		children: [/* @__PURE__ */ s(r, {
+			asChild: !0,
+			children: /* @__PURE__ */ s("button", {
+				type: "button",
+				title: f,
+				"aria-label": f,
+				"data-testid": m,
+				disabled: g,
+				className: e(i, "w-auto px-2 disabled:pointer-events-none disabled:opacity-50", !b && "text-muted-foreground"),
+				children: b ? _?.(b) ?? /* @__PURE__ */ c("span", {
+					className: "flex items-center gap-2",
+					children: [x ? /* @__PURE__ */ s(x, { className: "size-4 shrink-0" }) : null, b.label]
+				}) : p
+			})
+		}), /* @__PURE__ */ s(n, {
+			align: "start",
+			className: "w-auto min-w-52 p-1",
+			children: /* @__PURE__ */ c("div", {
+				className: "flex flex-col",
+				children: [u.map((t) => {
+					let n = t.icon;
+					return /* @__PURE__ */ s("button", {
+						type: "button",
+						"data-testid": m ? `${m}-option-${t.value}` : void 0,
+						onClick: () => S(t.value),
+						className: e("flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-accent", t.value === l && "bg-accent"),
+						children: _?.(t) ?? /* @__PURE__ */ c(o, { children: [n ? /* @__PURE__ */ s(n, { className: "size-4 shrink-0" }) : null, t.label] })
+					}, t.value);
+				}), h ? /* @__PURE__ */ s("button", {
+					type: "button",
+					"data-testid": m ? `${m}-clear` : void 0,
+					onClick: () => S(null),
+					className: "flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-muted-foreground hover:bg-accent",
+					children: h
+				}) : null]
+			})
+		})]
+	});
+};
+//#endregion
+export { l as InlineOptionField };
+
+//# sourceMappingURL=index.js.map

package/dist/components/inline_option_field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/inline_option_field/index.tsx"],"sourcesContent":["import { Popover, PopoverContent, PopoverTrigger } from \"@/components/popover\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { useState, type ReactNode } from \"react\";\nimport { cn } from \"@/utilities/class\";\nimport { INLINE_FIELD_ROW } from \"../inline_editable_text/constants\";\n\nexport interface InlineOption {\n  value: string;\n  label: string;\n  icon?: LucideIcon;\n}\n\nexport interface InlineOptionFieldProps {\n  value: string | null;\n  options: InlineOption[];\n  onChange: (next: string | null) => void;\n  ariaLabel: string;\n  emptyText: string;\n  testId?: string;\n  clearLabel?: string;\n  disabled?: boolean;\n  renderOption?: (option: InlineOption) => ReactNode;\n}\n\nexport const InlineOptionField = ({\n  value,\n  options,\n  onChange,\n  ariaLabel,\n  emptyText,\n  testId,\n  clearLabel,\n  disabled,\n  renderOption,\n}: InlineOptionFieldProps) => {\n  const [open, setOpen] = useState(false);\n  const selected = options.find((option) => option.value === value) ?? null;\n  const SelectedIcon = selected?.icon;\n\n  const choose = (next: string | null) => {\n    setOpen(false);\n    if (next === value) return;\n    onChange(next);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          title={ariaLabel}\n          aria-label={ariaLabel}\n          data-testid={testId}\n          disabled={disabled}\n          className={cn(\n            INLINE_FIELD_ROW,\n            \"w-auto px-2 disabled:pointer-events-none disabled:opacity-50\",\n            !selected && \"text-muted-foreground\",\n          )}\n        >\n          {selected\n            ? (renderOption?.(selected) ?? (\n                <span className=\"flex items-center gap-2\">\n                  {SelectedIcon ? (\n                    <SelectedIcon className=\"size-4 shrink-0\" />\n                  ) : null}\n                  {selected.label}\n                </span>\n              ))\n            : emptyText}\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-auto min-w-52 p-1\">\n        <div className=\"flex flex-col\">\n          {options.map((option) => {\n            const Icon = option.icon;\n            return (\n              <button\n                key={option.value}\n                type=\"button\"\n                data-testid={\n                  testId ? `${testId}-option-${option.value}` : undefined\n                }\n                onClick={() => choose(option.value)}\n                className={cn(\n                  \"flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-accent\",\n                  option.value === value && \"bg-accent\",\n                )}\n              >\n                {renderOption?.(option) ?? (\n                  <>\n                    {Icon ? <Icon className=\"size-4 shrink-0\" /> : null}\n                    {option.label}\n                  </>\n                )}\n              </button>\n            );\n          })}\n          {clearLabel ? (\n            <button\n              type=\"button\"\n              data-testid={testId ? `${testId}-clear` : undefined}\n              onClick={() => choose(null)}\n              className=\"flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-muted-foreground hover:bg-accent\"\n            >\n              {clearLabel}\n            </button>\n          ) : null}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n};\n"],"mappings":";;;;;;AAwBA,IAAa,KAAqB,EAChC,UACA,YACA,aACA,cACA,cACA,WACA,eACA,aACA,sBAC4B;CAC5B,IAAM,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,IAAW,EAAQ,MAAM,MAAW,EAAO,UAAU,EAAM,IAAI,MAC/D,IAAe,GAAU,MAEzB,KAAU,MAAwB;AACtC,IAAQ,GAAM,EACV,MAAS,KACb,EAAS,EAAK;;AAGhB,QACE,kBAAC,GAAD;EAAe;EAAM,cAAc;YAAnC,CACE,kBAAC,GAAD;GAAgB,SAAA;aACd,kBAAC,UAAD;IACE,MAAK;IACL,OAAO;IACP,cAAY;IACZ,eAAa;IACH;IACV,WAAW,EACT,GACA,gEACA,CAAC,KAAY,wBACd;cAEA,IACI,IAAe,EAAS,IACvB,kBAAC,QAAD;KAAM,WAAU;eAAhB,CACG,IACC,kBAAC,GAAD,EAAc,WAAU,mBAAoB,CAAA,GAC1C,MACH,EAAS,MACL;SAET;IACG,CAAA;GACM,CAAA,EACjB,kBAAC,GAAD;GAAgB,OAAM;GAAQ,WAAU;aACtC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,EAAQ,KAAK,MAAW;KACvB,IAAM,IAAO,EAAO;AACpB,YACE,kBAAC,UAAD;MAEE,MAAK;MACL,eACE,IAAS,GAAG,EAAO,UAAU,EAAO,UAAU,KAAA;MAEhD,eAAe,EAAO,EAAO,MAAM;MACnC,WAAW,EACT,oFACA,EAAO,UAAU,KAAS,YAC3B;gBAEA,IAAe,EAAO,IACrB,kBAAA,GAAA,EAAA,UAAA,CACG,IAAO,kBAAC,GAAD,EAAM,WAAU,mBAAoB,CAAA,GAAG,MAC9C,EAAO,MACP,EAAA,CAAA;MAEE,EAjBF,EAAO,MAiBL;MAEX,EACD,IACC,kBAAC,UAAD;KACE,MAAK;KACL,eAAa,IAAS,GAAG,EAAO,UAAU,KAAA;KAC1C,eAAe,EAAO,KAAK;KAC3B,WAAU;eAET;KACM,CAAA,GACP,KACA;;GACS,CAAA,CACT"}

package/dist/components/offline_banner/index.d.ts

@@ -0,0 +1,12 @@
+export interface OfflineBannerLabels {
+    offline: string;
+    reconnected: string;
+    close: string;
+}
+export interface OfflineBannerProps {
+    isOnline: boolean;
+    labels?: Partial<OfflineBannerLabels>;
+    className?: string;
+    reconnectedDurationMs?: number;
+}
+export declare function OfflineBanner({ isOnline, labels, className, reconnectedDurationMs, }: OfflineBannerProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/offline_banner/index.js

@@ -0,0 +1,76 @@
+import { cn as e } from "../../utilities/class/index.js";
+/* empty css       */
+import { useEffect as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Wifi as a, WifiOff as o, X as s } from "lucide-react";
+//#region src/components/offline_banner/index.tsx
+var c = 300;
+function l({ isOnline: l, labels: u, className: d, reconnectedDurationMs: f = 3e3 }) {
+	let p = {
+		offline: "No tienes internet",
+		reconnected: "Vuelves a estar conectado",
+		close: "Cerrar",
+		...u
+	}, [m, h] = n(() => ({
+		isOnline: l,
+		status: l ? null : "offline",
+		lastStatus: "offline",
+		mounted: !l
+	}));
+	if (m.isOnline !== l) {
+		let e = l ? "reconnected" : "offline";
+		h({
+			isOnline: l,
+			status: e,
+			lastStatus: e,
+			mounted: !0
+		});
+	}
+	let { status: g, lastStatus: _, mounted: v } = m;
+	if (t(() => {
+		if (g !== "reconnected") return;
+		let e = setTimeout(() => h((e) => ({
+			...e,
+			status: null
+		})), f);
+		return () => clearTimeout(e);
+	}, [g, f]), t(() => {
+		if (g !== null || !v) return;
+		let e = setTimeout(() => h((e) => ({
+			...e,
+			mounted: !1
+		})), c);
+		return () => clearTimeout(e);
+	}, [g, v]), !v) return null;
+	let y = _ === "offline", b = y ? o : a;
+	return /* @__PURE__ */ i("div", {
+		role: "status",
+		"aria-live": "polite",
+		"data-state": g === null ? "closed" : "open",
+		className: e("arxatec-offline-banner fixed inset-x-0 top-0 z-[100]", "flex items-center justify-center gap-2", "py-2 pr-10 pl-4 text-center text-sm font-medium", "transition-all duration-300 ease-out border-border border-b", y ? "bg-sidebar text-foreground" : "bg-primary text-background", g === null ? "-translate-y-full opacity-0" : "translate-y-0 opacity-100", d),
+		children: [
+			/* @__PURE__ */ r(b, {
+				className: "size-4 shrink-0",
+				"aria-hidden": !0
+			}),
+			/* @__PURE__ */ r("span", { children: y ? p.offline : p.reconnected }),
+			y ? /* @__PURE__ */ r("button", {
+				type: "button",
+				onClick: () => h((e) => ({
+					...e,
+					status: null
+				})),
+				"aria-label": p.close,
+				className: "absolute top-1/2 right-3 -translate-y-1/2 rounded-md p-1 opacity-80 transition-opacity hover:opacity-100",
+				children: /* @__PURE__ */ r(s, {
+					className: "size-4",
+					"aria-hidden": !0
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { l as OfflineBanner };
+
+//# sourceMappingURL=index.js.map

package/dist/components/offline_banner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/offline_banner/index.tsx"],"sourcesContent":["import \"./styles.css\";\nimport { Wifi, WifiOff, X } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/utilities/class\";\n\nconst TRANSITION_MS = 300;\ntype Status = \"offline\" | \"reconnected\";\n\nexport interface OfflineBannerLabels {\n  offline: string;\n  reconnected: string;\n  close: string;\n}\n\nexport interface OfflineBannerProps {\n  isOnline: boolean;\n  labels?: Partial<OfflineBannerLabels>;\n  className?: string;\n  reconnectedDurationMs?: number;\n}\n\ninterface ConnectionState {\n  isOnline: boolean;\n  status: Status | null;\n  lastStatus: Status;\n  mounted: boolean;\n}\n\nexport function OfflineBanner({\n  isOnline,\n  labels,\n  className,\n  reconnectedDurationMs = 3000,\n}: OfflineBannerProps) {\n  const copy = {\n    offline: \"No tienes internet\",\n    reconnected: \"Vuelves a estar conectado\",\n    close: \"Cerrar\",\n    ...labels,\n  };\n  const [connection, setConnection] = useState<ConnectionState>(() => ({\n    isOnline,\n    status: isOnline ? null : \"offline\",\n    lastStatus: \"offline\",\n    mounted: !isOnline,\n  }));\n\n  if (connection.isOnline !== isOnline) {\n    const status = isOnline ? \"reconnected\" : \"offline\";\n    setConnection({ isOnline, status, lastStatus: status, mounted: true });\n  }\n\n  const { status, lastStatus, mounted } = connection;\n\n  useEffect(() => {\n    if (status !== \"reconnected\") return;\n    const timer = setTimeout(\n      () => setConnection((current) => ({ ...current, status: null })),\n      reconnectedDurationMs,\n    );\n    return () => clearTimeout(timer);\n  }, [status, reconnectedDurationMs]);\n\n  useEffect(() => {\n    if (status !== null || !mounted) return;\n    const timer = setTimeout(\n      () => setConnection((current) => ({ ...current, mounted: false })),\n      TRANSITION_MS,\n    );\n    return () => clearTimeout(timer);\n  }, [status, mounted]);\n\n  if (!mounted) return null;\n  const isOffline = lastStatus === \"offline\";\n  const Icon = isOffline ? WifiOff : Wifi;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      data-state={status === null ? \"closed\" : \"open\"}\n      className={cn(\n        \"arxatec-offline-banner fixed inset-x-0 top-0 z-[100]\",\n        \"flex items-center justify-center gap-2\",\n        \"py-2 pr-10 pl-4 text-center text-sm font-medium\",\n        \"transition-all duration-300 ease-out border-border border-b\",\n        isOffline ? \"bg-sidebar text-foreground\" : \"bg-primary text-background\",\n        status !== null\n          ? \"translate-y-0 opacity-100\"\n          : \"-translate-y-full opacity-0\",\n        className,\n      )}\n    >\n      <Icon className=\"size-4 shrink-0\" aria-hidden />\n      <span>{isOffline ? copy.offline : copy.reconnected}</span>\n      {isOffline ? (\n        <button\n          type=\"button\"\n          onClick={() =>\n            setConnection((current) => ({ ...current, status: null }))\n          }\n          aria-label={copy.close}\n          className=\"absolute top-1/2 right-3 -translate-y-1/2 rounded-md p-1 opacity-80 transition-opacity hover:opacity-100\"\n        >\n          <X className=\"size-4\" aria-hidden />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAKA,IAAM,IAAgB;AAuBtB,SAAgB,EAAc,EAC5B,aACA,WACA,cACA,2BAAwB,OACH;CACrB,IAAM,IAAO;EACX,SAAS;EACT,aAAa;EACb,OAAO;EACP,GAAG;EACJ,EACK,CAAC,GAAY,KAAiB,SAAiC;EACnE;EACA,QAAQ,IAAW,OAAO;EAC1B,YAAY;EACZ,SAAS,CAAC;EACX,EAAE;AAEH,KAAI,EAAW,aAAa,GAAU;EACpC,IAAM,IAAS,IAAW,gBAAgB;AAC1C,IAAc;GAAE;GAAU;GAAQ,YAAY;GAAQ,SAAS;GAAM,CAAC;;CAGxE,IAAM,EAAE,WAAQ,eAAY,eAAY;AAoBxC,KAlBA,QAAgB;AACd,MAAI,MAAW,cAAe;EAC9B,IAAM,IAAQ,iBACN,GAAe,OAAa;GAAE,GAAG;GAAS,QAAQ;GAAM,EAAE,EAChE,EACD;AACD,eAAa,aAAa,EAAM;IAC/B,CAAC,GAAQ,EAAsB,CAAC,EAEnC,QAAgB;AACd,MAAI,MAAW,QAAQ,CAAC,EAAS;EACjC,IAAM,IAAQ,iBACN,GAAe,OAAa;GAAE,GAAG;GAAS,SAAS;GAAO,EAAE,EAClE,EACD;AACD,eAAa,aAAa,EAAM;IAC/B,CAAC,GAAQ,EAAQ,CAAC,EAEjB,CAAC,EAAS,QAAO;CACrB,IAAM,IAAY,MAAe,WAC3B,IAAO,IAAY,IAAU;AAEnC,QACE,kBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY,MAAW,OAAO,WAAW;EACzC,WAAW,EACT,wDACA,0CACA,mDACA,+DACA,IAAY,+BAA+B,8BAC3C,MAAW,OAEP,gCADA,6BAEJ,EACD;YAdH;GAgBE,kBAAC,GAAD;IAAM,WAAU;IAAkB,eAAA;IAAc,CAAA;GAChD,kBAAC,QAAD,EAAA,UAAO,IAAY,EAAK,UAAU,EAAK,aAAmB,CAAA;GACzD,IACC,kBAAC,UAAD;IACE,MAAK;IACL,eACE,GAAe,OAAa;KAAE,GAAG;KAAS,QAAQ;KAAM,EAAE;IAE5D,cAAY,EAAK;IACjB,WAAU;cAEV,kBAAC,GAAD;KAAG,WAAU;KAAS,eAAA;KAAc,CAAA;IAC7B,CAAA,GACP;GACA"}

package/dist/components/property_row/index.d.ts

@@ -0,0 +1,10 @@
+import { LucideIcon } from 'lucide-react';
+import { ReactNode } from 'react';
+export interface PropertyRowProps {
+    icon: LucideIcon;
+    label: string;
+    stacked?: boolean;
+    status?: ReactNode;
+    children: ReactNode;
+}
+export declare const PropertyRow: ({ icon: Icon, label, stacked, status, children, }: PropertyRowProps) => import("react/jsx-runtime").JSX.Element;