@usetheo/ui 0.13.0 → 0.13.2

package/dist/chunk-JP3SHERK.js

@@ -0,0 +1,154 @@
+"use client";
+import { cn } from './chunk-EWDN56AS.js';
+import { forwardRef, useRef, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var SIZE_CLASS = {
+  sm: "size-8 text-body-sm",
+  md: "size-10 text-body-md",
+  lg: "size-12 text-title-sm"
+};
+function sanitize(raw, inputMode) {
+  const noWhitespace = raw.replace(/\s/g, "");
+  if (inputMode === "numeric") {
+    return noWhitespace.replace(/\D/g, "");
+  }
+  return noWhitespace.toUpperCase().replace(/[^A-Z0-9]/g, "");
+}
+var PinInput = forwardRef(
+  ({
+    className,
+    length = 6,
+    value = "",
+    onChange,
+    onComplete,
+    inputMode = "numeric",
+    size = "md",
+    disabled = false,
+    error = false,
+    autoFocus = false,
+    mask = false,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const inputRefs = useRef([]);
+    const wasCompleteRef = useRef(value.length === length);
+    useEffect(() => {
+      if (!autoFocus) return;
+      if (typeof window === "undefined") return;
+      inputRefs.current[0]?.focus();
+    }, [autoFocus]);
+    useEffect(() => {
+      const isComplete = value.length === length && value.length > 0;
+      if (isComplete && !wasCompleteRef.current) {
+        onComplete?.(value);
+      }
+      wasCompleteRef.current = isComplete;
+    }, [value, length, onComplete]);
+    function commit(next) {
+      const sanitized = sanitize(next, inputMode).slice(0, length);
+      onChange?.(sanitized);
+    }
+    function handleChange(slot, raw) {
+      const sanitized = sanitize(raw, inputMode);
+      if (sanitized.length === 0) {
+        const next2 = `${value.slice(0, slot)}${value.slice(slot + 1)}`;
+        commit(next2);
+        return;
+      }
+      const ch = sanitized[sanitized.length - 1] ?? "";
+      const next = `${value.slice(0, slot)}${ch}${value.slice(slot + 1)}`;
+      commit(next);
+      if (slot < length - 1) {
+        inputRefs.current[slot + 1]?.focus();
+      }
+    }
+    function handleKeyDown(slot, e) {
+      if (disabled) return;
+      const slotChar = value[slot] ?? "";
+      if (e.key === "Backspace") {
+        if (slotChar === "") {
+          if (slot > 0) {
+            inputRefs.current[slot - 1]?.focus();
+          }
+        } else {
+          const next = `${value.slice(0, slot)}${value.slice(slot + 1)}`;
+          commit(next);
+        }
+        e.preventDefault();
+      } else if (e.key === "ArrowLeft") {
+        if (slot > 0) inputRefs.current[slot - 1]?.focus();
+        e.preventDefault();
+      } else if (e.key === "ArrowRight") {
+        if (slot < length - 1) inputRefs.current[slot + 1]?.focus();
+        e.preventDefault();
+      }
+    }
+    function handlePaste(slot, e) {
+      if (disabled) return;
+      e.preventDefault();
+      const pasted = e.clipboardData.getData("text/plain");
+      const sanitized = sanitize(pasted, inputMode);
+      if (sanitized.length === 0) return;
+      const slotArr = Array.from({ length }, (_, i) => value[i] ?? "");
+      const remaining = length - slot;
+      const filled = sanitized.slice(0, remaining);
+      for (let i = 0; i < filled.length; i++) {
+        slotArr[slot + i] = filled[i] ?? "";
+      }
+      const next = slotArr.join("");
+      commit(next);
+      const focusAt = Math.min(slot + filled.length, length - 1);
+      requestAnimationFrame(() => inputRefs.current[focusAt]?.focus());
+    }
+    const slots = Array.from({ length }, (_, i) => i);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "pin-input",
+        ref,
+        role: "group",
+        "aria-label": ariaLabel,
+        className: cn("inline-flex items-center gap-2", className),
+        ...props,
+        children: slots.map((i) => {
+          const ch = value[i] ?? "";
+          const display = mask && ch !== "" ? "\u2022" : ch;
+          return /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: (el) => {
+                inputRefs.current[i] = el;
+              },
+              type: "text",
+              inputMode: inputMode === "numeric" ? "numeric" : "text",
+              pattern: inputMode === "numeric" ? "[0-9]*" : void 0,
+              maxLength: 1,
+              autoComplete: i === 0 ? "one-time-code" : "off",
+              disabled,
+              value: display,
+              onChange: (e) => handleChange(i, e.target.value),
+              onKeyDown: (e) => handleKeyDown(i, e),
+              onPaste: (e) => handlePaste(i, e),
+              "aria-label": `Digit ${i + 1} of ${length}`,
+              className: cn(
+                "rounded-md border border-border bg-card text-center font-medium font-mono",
+                "transition-colors",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                SIZE_CLASS[size],
+                error ? "border-destructive" : "border-border/60 hover:border-border"
+              )
+            },
+            i
+          );
+        })
+      }
+    );
+  }
+);
+PinInput.displayName = "PinInput";
+
+export { PinInput };
+//# sourceMappingURL=chunk-JP3SHERK.js.map
+//# sourceMappingURL=chunk-JP3SHERK.js.map

package/dist/chunk-JP3SHERK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/pin-input/pin-input.tsx"],"names":["next"],"mappings":"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","file":"chunk-JP3SHERK.js","sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport type { ClipboardEvent, HTMLAttributes, KeyboardEvent } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * PinInput — multi-slot OTP / code input primitive.\n *\n * Renders N separate boxes (default 6) that auto-advance focus on\n * input. Paste handling fills all slots from clipboard (whitespace\n * stripped). Arrow keys navigate; backspace clears current slot\n * then moves focus back when empty.\n *\n * Industry-standard pattern for email verification codes (Apple,\n * Stripe, Clerk, Auth0, GitHub two-factor).\n *\n * @example\n *   <PinInput\n *     length={6}\n *     value={code}\n *     onChange={setCode}\n *     onComplete={(v) => verify(v)}\n *     inputMode=\"numeric\"\n *     aria-label=\"Verification code\"\n *   />\n *\n * Note: value is treated as controlled. If you pass a complete value\n * on mount, onComplete will NOT fire — onComplete fires only on\n * transitions from incomplete → complete.\n */\nexport interface PinInputProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"inputMode\"> {\n  length?: number;\n  value?: string;\n  onChange?: (value: string) => void;\n  onComplete?: (value: string) => void;\n  inputMode?: \"numeric\" | \"alphanumeric\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  disabled?: boolean;\n  error?: boolean;\n  \"aria-label\": string;\n  autoFocus?: boolean;\n  mask?: boolean;\n}\n\nconst SIZE_CLASS: Record<NonNullable<PinInputProps[\"size\"]>, string> = {\n  sm: \"size-8 text-body-sm\",\n  md: \"size-10 text-body-md\",\n  lg: \"size-12 text-title-sm\",\n};\n\nfunction sanitize(raw: string, inputMode: \"numeric\" | \"alphanumeric\"): string {\n  const noWhitespace = raw.replace(/\\s/g, \"\");\n  if (inputMode === \"numeric\") {\n    return noWhitespace.replace(/\\D/g, \"\");\n  }\n  return noWhitespace.toUpperCase().replace(/[^A-Z0-9]/g, \"\");\n}\n\nconst PinInput = forwardRef<HTMLDivElement, PinInputProps>(\n  (\n    {\n      className,\n      length = 6,\n      value = \"\",\n      onChange,\n      onComplete,\n      inputMode = \"numeric\",\n      size = \"md\",\n      disabled = false,\n      error = false,\n      autoFocus = false,\n      mask = false,\n      \"aria-label\": ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n    const wasCompleteRef = useRef<boolean>(value.length === length);\n\n    // Auto-focus first slot on mount (SSR-safe)\n    useEffect(() => {\n      if (!autoFocus) return;\n      if (typeof window === \"undefined\") return;\n      inputRefs.current[0]?.focus();\n    }, [autoFocus]);\n\n    // Fire onComplete on transitions from incomplete → complete\n    useEffect(() => {\n      const isComplete = value.length === length && value.length > 0;\n      if (isComplete && !wasCompleteRef.current) {\n        onComplete?.(value);\n      }\n      wasCompleteRef.current = isComplete;\n    }, [value, length, onComplete]);\n\n    function commit(next: string) {\n      const sanitized = sanitize(next, inputMode).slice(0, length);\n      onChange?.(sanitized);\n    }\n\n    function handleChange(slot: number, raw: string) {\n      const sanitized = sanitize(raw, inputMode);\n      if (sanitized.length === 0) {\n        // Clear current slot\n        const next = `${value.slice(0, slot)}${value.slice(slot + 1)}`;\n        commit(next);\n        return;\n      }\n      // Take the last character typed (handles browser autocomplete that fills multiple)\n      const ch = sanitized[sanitized.length - 1] ?? \"\";\n      const next = `${value.slice(0, slot)}${ch}${value.slice(slot + 1)}`;\n      commit(next);\n      // Advance focus\n      if (slot < length - 1) {\n        inputRefs.current[slot + 1]?.focus();\n      }\n    }\n\n    function handleKeyDown(slot: number, e: KeyboardEvent<HTMLInputElement>) {\n      if (disabled) return;\n      const slotChar = value[slot] ?? \"\";\n\n      if (e.key === \"Backspace\") {\n        if (slotChar === \"\") {\n          // Move focus back if current is empty\n          if (slot > 0) {\n            inputRefs.current[slot - 1]?.focus();\n          }\n        } else {\n          // Clear current slot, stay focused\n          const next = `${value.slice(0, slot)}${value.slice(slot + 1)}`;\n          commit(next);\n        }\n        e.preventDefault();\n      } else if (e.key === \"ArrowLeft\") {\n        if (slot > 0) inputRefs.current[slot - 1]?.focus();\n        e.preventDefault();\n      } else if (e.key === \"ArrowRight\") {\n        if (slot < length - 1) inputRefs.current[slot + 1]?.focus();\n        e.preventDefault();\n      }\n    }\n\n    function handlePaste(slot: number, e: ClipboardEvent<HTMLInputElement>) {\n      if (disabled) return;\n      e.preventDefault();\n      const pasted = e.clipboardData.getData(\"text/plain\");\n      const sanitized = sanitize(pasted, inputMode);\n      if (sanitized.length === 0) return;\n      // Build slot-indexed array, then overwrite from `slot` onwards.\n      // Previous string-concat approach didn't pad when value was shorter\n      // than `slot`, which made paste-from-middle-when-empty fill from 0.\n      const slotArr: string[] = Array.from({ length }, (_, i) => value[i] ?? \"\");\n      const remaining = length - slot;\n      const filled = sanitized.slice(0, remaining);\n      for (let i = 0; i < filled.length; i++) {\n        slotArr[slot + i] = filled[i] ?? \"\";\n      }\n      const next = slotArr.join(\"\");\n      commit(next);\n      // Focus the slot after the last filled, or the last slot if completed\n      const focusAt = Math.min(slot + filled.length, length - 1);\n      requestAnimationFrame(() => inputRefs.current[focusAt]?.focus());\n    }\n\n    const slots = Array.from({ length }, (_, i) => i);\n\n    return (\n      <div\n        data-slot=\"pin-input\"\n        ref={ref}\n        // biome-ignore lint/a11y/useSemanticElements: <fieldset> would force a different visual layout (rectangular border by default) and is form-bound; we use a div with role=\"group\" + aria-label for grouping semantics.\n        role=\"group\"\n        aria-label={ariaLabel}\n        className={cn(\"inline-flex items-center gap-2\", className)}\n        {...props}\n      >\n        {slots.map((i) => {\n          const ch = value[i] ?? \"\";\n          const display = mask && ch !== \"\" ? \"•\" : ch;\n          return (\n            <input\n              key={i}\n              ref={(el) => {\n                inputRefs.current[i] = el;\n              }}\n              type=\"text\"\n              inputMode={inputMode === \"numeric\" ? \"numeric\" : \"text\"}\n              pattern={inputMode === \"numeric\" ? \"[0-9]*\" : undefined}\n              maxLength={1}\n              autoComplete={i === 0 ? \"one-time-code\" : \"off\"}\n              disabled={disabled}\n              value={display}\n              onChange={(e) => handleChange(i, e.target.value)}\n              onKeyDown={(e) => handleKeyDown(i, e)}\n              onPaste={(e) => handlePaste(i, e)}\n              aria-label={`Digit ${i + 1} of ${length}`}\n              className={cn(\n                \"rounded-md border border-border bg-card text-center font-medium font-mono\",\n                \"transition-colors\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n                \"disabled:cursor-not-allowed disabled:opacity-50\",\n                SIZE_CLASS[size],\n                error ? \"border-destructive\" : \"border-border/60 hover:border-border\",\n              )}\n            />\n          );\n        })}\n      </div>\n    );\n  },\n);\nPinInput.displayName = \"PinInput\";\n\nexport { PinInput };\n"]}

package/dist/chunk-JR4H3FJ2.js

@@ -0,0 +1,74 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var STATUS_META = {
+  online: {
+    dot: "bg-status-online",
+    label: "Online",
+    aria: "Gateway online"
+  },
+  offline: {
+    dot: "bg-status-offline",
+    label: "Offline",
+    aria: "Gateway offline"
+  },
+  degraded: {
+    dot: "bg-status-degraded",
+    label: "Degraded",
+    aria: "Gateway degraded"
+  },
+  reconnecting: {
+    dot: "bg-status-info",
+    label: "Reconnecting\u2026",
+    aria: "Gateway reconnecting"
+  }
+};
+function formatLatency(ms) {
+  if (ms === void 0) return null;
+  if (!Number.isFinite(ms) || ms < 0) return null;
+  if (ms < 1) return "<1ms";
+  if (ms < 1e3) return `${Math.round(ms)}ms`;
+  return `${(ms / 1e3).toFixed(1)}s`;
+}
+var GatewayStatusIndicator = forwardRef(
+  ({ status, latencyMs, variant = "labeled", className, "data-testid": dataTestId, ...rest }, ref) => {
+    const meta = STATUS_META[status];
+    const latency = formatLatency(latencyMs);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "data-slot": "gateway-status-indicator",
+        ref,
+        role: "img",
+        "aria-label": meta.aria,
+        className: cn("inline-flex items-center gap-2 font-medium text-xs", className),
+        "data-testid": dataTestId ?? "gateway-status-indicator",
+        "data-status": status,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "inline-block size-2 rounded-full",
+                meta.dot,
+                status === "reconnecting" && "animate-pulse"
+              ),
+              "aria-hidden": true
+            }
+          ),
+          variant === "labeled" && /* @__PURE__ */ jsxs("span", { className: "text-foreground", children: [
+            meta.label,
+            latency !== null && /* @__PURE__ */ jsx("span", { className: "ml-1 text-muted-foreground", "data-testid": "gateway-latency", children: latency })
+          ] })
+        ]
+      }
+    );
+  }
+);
+GatewayStatusIndicator.displayName = "GatewayStatusIndicator";
+
+export { GatewayStatusIndicator };
+//# sourceMappingURL=chunk-JR4H3FJ2.js.map
+//# sourceMappingURL=chunk-JR4H3FJ2.js.map

package/dist/chunk-JR4H3FJ2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/gateway-status-indicator/gateway-status-indicator.tsx"],"names":[],"mappings":";;;;AAyBA,IAAM,WAAA,GAAmF;AAAA,EACvF,MAAA,EAAQ;AAAA,IACN,GAAA,EAAK,kBAAA;AAAA,IACL,KAAA,EAAO,QAAA;AAAA,IACP,IAAA,EAAM;AAAA,GACR;AAAA,EACA,OAAA,EAAS;AAAA,IACP,GAAA,EAAK,mBAAA;AAAA,IACL,KAAA,EAAO,SAAA;AAAA,IACP,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,GAAA,EAAK,oBAAA;AAAA,IACL,KAAA,EAAO,UAAA;AAAA,IACP,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,GAAA,EAAK,gBAAA;AAAA,IACL,KAAA,EAAO,oBAAA;AAAA,IACP,IAAA,EAAM;AAAA;AAEV,CAAA;AAEA,SAAS,cAAc,EAAA,EAAuC;AAC5D,EAAA,IAAI,EAAA,KAAO,QAAW,OAAO,IAAA;AAC7B,EAAA,IAAI,CAAC,MAAA,CAAO,QAAA,CAAS,EAAE,CAAA,IAAK,EAAA,GAAK,GAAG,OAAO,IAAA;AAC3C,EAAA,IAAI,EAAA,GAAK,GAAG,OAAO,MAAA;AACnB,EAAA,IAAI,KAAK,GAAA,EAAM,OAAO,GAAG,IAAA,CAAK,KAAA,CAAM,EAAE,CAAC,CAAA,EAAA,CAAA;AACvC,EAAA,OAAO,CAAA,EAAA,CAAI,EAAA,GAAK,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA,CAAA;AAClC;AAEO,IAAM,sBAAA,GAAyB,UAAA;AAAA,EACpC,CACE,EAAE,MAAA,EAAQ,SAAA,EAAW,OAAA,GAAU,SAAA,EAAW,SAAA,EAAW,aAAA,EAAe,UAAA,EAAY,GAAG,IAAA,EAAK,EACxF,GAAA,KACG;AACH,IAAA,MAAM,IAAA,GAAO,YAAY,MAAM,CAAA;AAC/B,IAAA,MAAM,OAAA,GAAU,cAAc,SAAS,CAAA;AACvC,IAAA,uBACE,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,0BAAA;AAAA,QACV,GAAA;AAAA,QACA,IAAA,EAAK,KAAA;AAAA,QACL,cAAY,IAAA,CAAK,IAAA;AAAA,QACjB,SAAA,EAAW,EAAA,CAAG,oDAAA,EAAsD,SAAS,CAAA;AAAA,QAC7E,eAAa,UAAA,IAAc,0BAAA;AAAA,QAC3B,aAAA,EAAa,MAAA;AAAA,QACZ,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,kCAAA;AAAA,gBACA,IAAA,CAAK,GAAA;AAAA,gBACL,WAAW,cAAA,IAAkB;AAAA,eAC/B;AAAA,cACA,aAAA,EAAW;AAAA;AAAA,WACb;AAAA,UACC,OAAA,KAAY,SAAA,oBACX,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,iBAAA,EACb,QAAA,EAAA;AAAA,YAAA,IAAA,CAAK,KAAA;AAAA,YACL,OAAA,KAAY,wBACX,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,4BAAA,EAA6B,aAAA,EAAY,mBACtD,QAAA,EAAA,OAAA,EACH;AAAA,WAAA,EAEJ;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AACA,sBAAA,CAAuB,WAAA,GAAc,wBAAA","file":"chunk-JR4H3FJ2.js","sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * GatewayStatusIndicator — live connection-status dot for a gateway/server.\n *\n * Variants:\n *   - compact  : colored dot only (sidebar footer use)\n *   - labeled  : dot + label + optional latency text\n *\n * `reconnecting` state animates with `animate-pulse` and respects\n * `prefers-reduced-motion` automatically (Tailwind defaults).\n */\n\nexport type GatewayStatus = \"online\" | \"offline\" | \"degraded\" | \"reconnecting\";\n\nexport interface GatewayStatusIndicatorProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"title\"> {\n  status: GatewayStatus;\n  latencyMs?: number;\n  variant?: \"compact\" | \"labeled\";\n  \"data-testid\"?: string;\n}\n\nconst STATUS_META: Record<GatewayStatus, { dot: string; label: string; aria: string }> = {\n  online: {\n    dot: \"bg-status-online\",\n    label: \"Online\",\n    aria: \"Gateway online\",\n  },\n  offline: {\n    dot: \"bg-status-offline\",\n    label: \"Offline\",\n    aria: \"Gateway offline\",\n  },\n  degraded: {\n    dot: \"bg-status-degraded\",\n    label: \"Degraded\",\n    aria: \"Gateway degraded\",\n  },\n  reconnecting: {\n    dot: \"bg-status-info\",\n    label: \"Reconnecting…\",\n    aria: \"Gateway reconnecting\",\n  },\n};\n\nfunction formatLatency(ms: number | undefined): string | null {\n  if (ms === undefined) return null;\n  if (!Number.isFinite(ms) || ms < 0) return null;\n  if (ms < 1) return \"<1ms\";\n  if (ms < 1000) return `${Math.round(ms)}ms`;\n  return `${(ms / 1000).toFixed(1)}s`;\n}\n\nexport const GatewayStatusIndicator = forwardRef<HTMLSpanElement, GatewayStatusIndicatorProps>(\n  (\n    { status, latencyMs, variant = \"labeled\", className, \"data-testid\": dataTestId, ...rest },\n    ref,\n  ) => {\n    const meta = STATUS_META[status];\n    const latency = formatLatency(latencyMs);\n    return (\n      <span\n        data-slot=\"gateway-status-indicator\"\n        ref={ref}\n        role=\"img\"\n        aria-label={meta.aria}\n        className={cn(\"inline-flex items-center gap-2 font-medium text-xs\", className)}\n        data-testid={dataTestId ?? \"gateway-status-indicator\"}\n        data-status={status}\n        {...rest}\n      >\n        <span\n          className={cn(\n            \"inline-block size-2 rounded-full\",\n            meta.dot,\n            status === \"reconnecting\" && \"animate-pulse\",\n          )}\n          aria-hidden\n        />\n        {variant === \"labeled\" && (\n          <span className=\"text-foreground\">\n            {meta.label}\n            {latency !== null && (\n              <span className=\"ml-1 text-muted-foreground\" data-testid=\"gateway-latency\">\n                {latency}\n              </span>\n            )}\n          </span>\n        )}\n      </span>\n    );\n  },\n);\nGatewayStatusIndicator.displayName = \"GatewayStatusIndicator\";\n"]}

package/dist/chunk-JRW53TVG.js

@@ -0,0 +1,53 @@
+import { cn } from './chunk-EWDN56AS.js';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { cva } from 'class-variance-authority';
+import { Minus, Check } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var checkboxVariants = cva(
+  [
+    "peer relative shrink-0 rounded-sm border border-border bg-card",
+    "transition-[background-color,border-color,box-shadow] duration-base ease-out-soft",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+    "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-3.5 before:absolute before:inset-[-5px] before:content-['']",
+        md: "size-4",
+        lg: "size-5"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var iconClassBySize = {
+  sm: "size-2.5",
+  md: "size-3.5",
+  lg: "size-3.5"
+};
+var Checkbox = forwardRef(
+  ({ className, size, ...props }, ref) => {
+    const iconClass = iconClassBySize[size ?? "md"];
+    return /* @__PURE__ */ jsx(
+      CheckboxPrimitive.Root,
+      {
+        "data-slot": "checkbox",
+        "data-size": size,
+        ref,
+        className: cn(checkboxVariants({ size }), className),
+        ...props,
+        children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { className: iconClass, "aria-hidden": "true", strokeWidth: 3 }) : /* @__PURE__ */ jsx(Check, { className: iconClass, "aria-hidden": "true", strokeWidth: 3 }) })
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };
+//# sourceMappingURL=chunk-JRW53TVG.js.map
+//# sourceMappingURL=chunk-JRW53TVG.js.map

package/dist/chunk-JRW53TVG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/checkbox/checkbox.tsx"],"names":[],"mappings":";;;;;;;AAiBA,IAAM,gBAAA,GAAmB,GAAA;AAAA,EACvB;AAAA,IACE,gEAAA;AAAA,IACA,mFAAA;AAAA,IACA,0IAAA;AAAA,IACA,kHAAA;AAAA,IACA,oIAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,kEAAA;AAAA,QACJ,EAAA,EAAI,QAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,IAAA;AAAK;AAElC,CAAA;AAEA,IAAM,eAAA,GAGF;AAAA,EACF,EAAA,EAAI,UAAA;AAAA,EACJ,EAAA,EAAI,UAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAMA,IAAM,QAAA,GAAW,UAAA;AAAA,EACf,CAAC,EAAE,SAAA,EAAW,MAAM,GAAG,KAAA,IAAS,GAAA,KAAQ;AACtC,IAAA,MAAM,SAAA,GAAY,eAAA,CAAgB,IAAA,IAAQ,IAAI,CAAA;AAC9C,IAAA,uBACE,GAAA;AAAA,MAAmB,iBAAA,CAAA,IAAA;AAAA,MAAlB;AAAA,QACC,WAAA,EAAU,UAAA;AAAA,QACV,WAAA,EAAW,IAAA;AAAA,QACX,GAAA;AAAA,QACA,WAAW,EAAA,CAAG,gBAAA,CAAiB,EAAE,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,QAClD,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA,CAAmB,iBAAA,CAAA,SAAA,EAAlB,EAA4B,SAAA,EAAU,+CAAA,EACpC,gBAAM,OAAA,KAAY,eAAA,mBACjB,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAW,SAAA,EAAW,eAAY,MAAA,EAAO,WAAA,EAAa,CAAA,EAAG,CAAA,mBAEhE,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAW,SAAA,EAAW,aAAA,EAAY,MAAA,EAAO,WAAA,EAAa,CAAA,EAAG,CAAA,EAEpE;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AACA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-JRW53TVG.js","sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { Check, Minus } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * Checkbox — built on Radix Checkbox.\n *\n * Supports tri-state via `checked=\"indeterminate\"`. Violet fill when on,\n * border-only when off. Themed via tokens (--primary, --background).\n *\n * The `size` prop accepts `\"sm\" | \"md\" | \"lg\"`. Default `md` preserves the\n * 16px box from before this prop existed. The `sm` size keeps a >=24px\n * effective tap target via an invisible expanded hit area (WCAG 2.5.5).\n */\nconst checkboxVariants = cva(\n  [\n    \"peer relative shrink-0 rounded-sm border border-border bg-card\",\n    \"transition-[background-color,border-color,box-shadow] duration-base ease-out-soft\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n    \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n    \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-3.5 before:absolute before:inset-[-5px] before:content-['']\",\n        md: \"size-4\",\n        lg: \"size-5\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nconst iconClassBySize: Record<\n  NonNullable<VariantProps<typeof checkboxVariants>[\"size\"]>,\n  string\n> = {\n  sm: \"size-2.5\",\n  md: \"size-3.5\",\n  lg: \"size-3.5\",\n};\n\ninterface CheckboxProps\n  extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n    VariantProps<typeof checkboxVariants> {}\n\nconst Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n  ({ className, size, ...props }, ref) => {\n    const iconClass = iconClassBySize[size ?? \"md\"];\n    return (\n      <CheckboxPrimitive.Root\n        data-slot=\"checkbox\"\n        data-size={size}\n        ref={ref}\n        className={cn(checkboxVariants({ size }), className)}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n          {props.checked === \"indeterminate\" ? (\n            <Minus className={iconClass} aria-hidden=\"true\" strokeWidth={3} />\n          ) : (\n            <Check className={iconClass} aria-hidden=\"true\" strokeWidth={3} />\n          )}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  },\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox, checkboxVariants };\n"]}

package/dist/chunk-JS5T2CRO.js

@@ -0,0 +1,86 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { TrendingDown, TrendingUp } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var MetricsPanel = forwardRef(
+  ({ className, title, description, metrics, columns, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "metrics-panel",
+      ref,
+      className: cn("rounded-xl border border-border bg-card p-5 shadow-sm", className),
+      ...props,
+      children: [
+        title || description ? /* @__PURE__ */ jsxs("header", { className: "mb-4 grid gap-0.5", children: [
+          title ? /* @__PURE__ */ jsx("h3", { className: "font-display text-title-md tracking-tight", children: title }) : null,
+          description ? /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: description }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid gap-4",
+            style: {
+              gridTemplateColumns: columns ? `repeat(${columns}, minmax(0, 1fr))` : "repeat(auto-fit, minmax(180px, 1fr))"
+            },
+            children: metrics.map((m) => /* @__PURE__ */ jsx(Tile, { metric: m }, m.label))
+          }
+        )
+      ]
+    }
+  )
+);
+MetricsPanel.displayName = "MetricsPanel";
+function Tile({ metric }) {
+  const interactive = metric.onClick !== void 0;
+  const Tag = interactive ? "button" : "div";
+  const ariaLabel = interactive ? metric.actionLabel ?? `View ${metric.label} details` : void 0;
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      type: interactive ? "button" : void 0,
+      onClick: metric.onClick,
+      "aria-label": ariaLabel,
+      className: cn(
+        "flex flex-col gap-2 rounded-lg border border-border/30 bg-muted/30 p-4 text-left",
+        "transition-colors duration-base ease-out-soft",
+        interactive && "hover:border-primary/40 hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "font-sans text-label-caps text-muted-foreground uppercase", children: metric.label }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-bold font-display text-display-md tabular-nums leading-none", children: metric.value }),
+          metric.unit ? /* @__PURE__ */ jsx("span", { className: "font-mono text-body-sm text-muted-foreground", children: metric.unit }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          metric.delta ? /* @__PURE__ */ jsx(Delta, { metric }) : null,
+          metric.sparkline && metric.sparkline.length > 0 ? /* @__PURE__ */ jsx(Sparkline, { values: metric.sparkline }) : null
+        ] })
+      ]
+    }
+  );
+}
+function Delta({ metric }) {
+  const tone = metric.deltaGood === void 0 ? "text-muted-foreground" : metric.deltaGood ? "text-success" : "text-destructive";
+  const Icon = metric.deltaGood === false ? TrendingDown : TrendingUp;
+  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-1 font-mono text-body-sm", tone), children: [
+    /* @__PURE__ */ jsx(Icon, { className: "size-3" }),
+    " ",
+    metric.delta
+  ] });
+}
+function Sparkline({ values }) {
+  const clamped = values.map((v) => Math.max(0, Math.min(1, v)));
+  return /* @__PURE__ */ jsx("span", { className: "ml-auto flex h-6 items-end gap-[2px]", "aria-hidden": "true", children: clamped.map((v, idx) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "w-[3px] rounded-sm bg-primary/60",
+      style: { height: `${Math.max(8, v * 100)}%` }
+    },
+    idx
+  )) });
+}
+
+export { MetricsPanel };
+//# sourceMappingURL=chunk-JS5T2CRO.js.map
+//# sourceMappingURL=chunk-JS5T2CRO.js.map

package/dist/chunk-JS5T2CRO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/metrics-panel/metrics-panel.tsx"],"names":[],"mappings":"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","file":"chunk-JS5T2CRO.js","sourcesContent":["import { TrendingDown, TrendingUp } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\nexport interface Metric {\n  /**\n   * Short label, e.g. \"Requests/s\", \"p95 latency\", \"Error rate\".\n   */\n  label: string;\n  /**\n   * Pre-formatted value string, e.g. \"1.2k\", \"182ms\", \"0.03%\".\n   * Consumer formats; the component does not parse.\n   */\n  value: string;\n  /**\n   * Optional unit suffix appended after value with .9 opacity.\n   */\n  unit?: string;\n  /**\n   * Optional change vs comparison period, e.g. \"+12%\", \"-4ms\", \"+0.01pp\".\n   */\n  delta?: string;\n  /**\n   * If true, delta is \"good\" (success color); if false, \"bad\" (destructive).\n   * If omitted, delta is rendered in muted (neutral).\n   *\n   * Caller decides semantics — \"more requests\" is good but \"more errors\" is bad.\n   */\n  deltaGood?: boolean;\n  /**\n   * Optional sparkline data, 0..1 normalized. Consumer is responsible for normalization.\n   */\n  sparkline?: number[];\n  /**\n   * Optional onClick to drill into the metric.\n   */\n  onClick?: () => void;\n  /**\n   * Optional override for the clickable tile's accessible name. When the\n   * tile is interactive (`onClick` set), defaults to `View <label> details`.\n   * Has no effect when `onClick` is absent (tile is rendered as a non-link\n   * `<div>` with no button semantics). T4.3.\n   */\n  actionLabel?: string;\n}\n\ninterface MetricsPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: ReactNode;\n  description?: ReactNode;\n  metrics: Metric[];\n  /**\n   * Grid columns. Defaults to auto-fit ~180px min.\n   */\n  columns?: number;\n}\n\n/**\n * MetricsPanel — grid of metric tiles for observability dashboards.\n *\n * Visual: each tile is a soft surface with a big value (font-display),\n * label uppercase muted, optional delta with arrow icon + tone color,\n * optional CSS-only sparkline drawn as flexed bars.\n *\n * No external chart lib — keeps the registry copy-pasteable.\n */\nconst MetricsPanel = forwardRef<HTMLDivElement, MetricsPanelProps>(\n  ({ className, title, description, metrics, columns, ...props }, ref) => (\n    <div\n      data-slot=\"metrics-panel\"\n      ref={ref}\n      className={cn(\"rounded-xl border border-border bg-card p-5 shadow-sm\", className)}\n      {...props}\n    >\n      {title || description ? (\n        <header className=\"mb-4 grid gap-0.5\">\n          {title ? <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3> : null}\n          {description ? <p className=\"text-body-sm text-muted-foreground\">{description}</p> : null}\n        </header>\n      ) : null}\n      <div\n        className=\"grid gap-4\"\n        style={{\n          gridTemplateColumns: columns\n            ? `repeat(${columns}, minmax(0, 1fr))`\n            : \"repeat(auto-fit, minmax(180px, 1fr))\",\n        }}\n      >\n        {metrics.map((m) => (\n          <Tile key={m.label} metric={m} />\n        ))}\n      </div>\n    </div>\n  ),\n);\nMetricsPanel.displayName = \"MetricsPanel\";\n\nfunction Tile({ metric }: { metric: Metric }) {\n  const interactive = metric.onClick !== undefined;\n  const Tag = interactive ? \"button\" : \"div\";\n  // T4.3 (Code Issue 3): clickable tiles need an explicit accessible name\n  // so AT users hear \"View Requests/s details, button\" instead of just\n  // the spoken value cluster. Falls back to metric.actionLabel when the\n  // caller wants custom text (e.g., \"Drill into requests\").\n  const ariaLabel = interactive\n    ? (metric.actionLabel ?? `View ${metric.label} details`)\n    : undefined;\n  return (\n    <Tag\n      type={interactive ? \"button\" : undefined}\n      onClick={metric.onClick}\n      aria-label={ariaLabel}\n      className={cn(\n        \"flex flex-col gap-2 rounded-lg border border-border/30 bg-muted/30 p-4 text-left\",\n        \"transition-colors duration-base ease-out-soft\",\n        interactive &&\n          \"hover:border-primary/40 hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card\",\n      )}\n    >\n      <span className=\"font-sans text-label-caps text-muted-foreground uppercase\">\n        {metric.label}\n      </span>\n      <div className=\"flex items-baseline gap-1.5\">\n        <span className=\"font-bold font-display text-display-md tabular-nums leading-none\">\n          {metric.value}\n        </span>\n        {metric.unit ? (\n          <span className=\"font-mono text-body-sm text-muted-foreground\">{metric.unit}</span>\n        ) : null}\n      </div>\n      <div className=\"flex items-center gap-2\">\n        {metric.delta ? <Delta metric={metric} /> : null}\n        {metric.sparkline && metric.sparkline.length > 0 ? (\n          <Sparkline values={metric.sparkline} />\n        ) : null}\n      </div>\n    </Tag>\n  );\n}\n\nfunction Delta({ metric }: { metric: Metric }) {\n  const tone =\n    metric.deltaGood === undefined\n      ? \"text-muted-foreground\"\n      : metric.deltaGood\n        ? \"text-success\"\n        : \"text-destructive\";\n  const Icon = metric.deltaGood === false ? TrendingDown : TrendingUp;\n  return (\n    <span className={cn(\"inline-flex items-center gap-1 font-mono text-body-sm\", tone)}>\n      <Icon className=\"size-3\" /> {metric.delta}\n    </span>\n  );\n}\n\nfunction Sparkline({ values }: { values: number[] }) {\n  const clamped = values.map((v) => Math.max(0, Math.min(1, v)));\n  return (\n    <span className=\"ml-auto flex h-6 items-end gap-[2px]\" aria-hidden=\"true\">\n      {clamped.map((v, idx) => (\n        <span\n          // biome-ignore lint/suspicious/noArrayIndexKey: positional, values are not stable identifiers\n          key={idx}\n          className=\"w-[3px] rounded-sm bg-primary/60\"\n          style={{ height: `${Math.max(8, v * 100)}%` }}\n        />\n      ))}\n    </span>\n  );\n}\n\nexport { MetricsPanel };\n"]}

package/dist/chunk-JXOCE27Z.js

@@ -0,0 +1,82 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { ArrowUpCircle, X } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var UpdateBanner = forwardRef(
+  ({
+    currentVersion,
+    latestVersion,
+    onUpdate,
+    onDismiss,
+    severity = "info",
+    className,
+    "data-testid": dataTestId,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "update-banner",
+        ref,
+        role: "alert",
+        "aria-live": "polite",
+        className: cn(
+          "flex items-center justify-between gap-3 border-b px-4 py-2 text-sm",
+          severity === "warn" ? "border-warning/40 bg-warning/10 text-warning" : "border-primary/40 bg-primary/10 text-primary",
+          className
+        ),
+        "data-testid": dataTestId ?? "update-banner",
+        "data-severity": severity,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(ArrowUpCircle, { className: "size-4", "aria-hidden": true }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Update available: ",
+              /* @__PURE__ */ jsxs("strong", { "data-testid": "update-banner-latest", children: [
+                "v",
+                latestVersion
+              ] }),
+              " ",
+              "(running ",
+              /* @__PURE__ */ jsxs("span", { "data-testid": "update-banner-current", children: [
+                "v",
+                currentVersion
+              ] }),
+              ")."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onUpdate,
+                className: "rounded-md border border-current px-2 py-1 font-medium text-xs hover:bg-current/10",
+                "data-testid": "update-banner-update-button",
+                children: "Update now"
+              }
+            ),
+            onDismiss !== void 0 && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onDismiss,
+                className: "rounded-md p-1 hover:bg-current/10",
+                "aria-label": "Dismiss update banner",
+                "data-testid": "update-banner-dismiss",
+                children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": true })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+UpdateBanner.displayName = "UpdateBanner";
+
+export { UpdateBanner };
+//# sourceMappingURL=chunk-JXOCE27Z.js.map
+//# sourceMappingURL=chunk-JXOCE27Z.js.map

package/dist/chunk-JXOCE27Z.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/update-banner/update-banner.tsx"],"names":[],"mappings":";;;;;AAqBO,IAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CACE;AAAA,IACE,cAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,MAAA;AAAA,IACX,SAAA;AAAA,IACA,aAAA,EAAe,UAAA;AAAA,IACf,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,eAAA;AAAA,QACV,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,WAAA,EAAU,QAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,oEAAA;AAAA,UACA,QAAA,KAAa,SACT,8CAAA,GACA,8CAAA;AAAA,UACJ;AAAA,SACF;AAAA,QACA,eAAa,UAAA,IAAc,eAAA;AAAA,QAC3B,eAAA,EAAe,QAAA;AAAA,QACd,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAU,QAAA,EAAS,aAAA,EAAW,IAAA,EAAC,CAAA;AAAA,iCAC7C,MAAA,EAAA,EAAK,QAAA,EAAA;AAAA,cAAA,oBAAA;AAAA,8BACc,IAAA,CAAC,QAAA,EAAA,EAAO,aAAA,EAAY,sBAAA,EAAuB,QAAA,EAAA;AAAA,gBAAA,GAAA;AAAA,gBAAE;AAAA,eAAA,EAAc,CAAA;AAAA,cAAU,GAAA;AAAA,cAAI,WAAA;AAAA,8BAClF,IAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,uBAAA,EAAwB,QAAA,EAAA;AAAA,gBAAA,GAAA;AAAA,gBAAE;AAAA,eAAA,EAAe,CAAA;AAAA,cAAO;AAAA,aAAA,EAC7E;AAAA,WAAA,EACF,CAAA;AAAA,0BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,QAAA;AAAA,gBACT,SAAA,EAAU,oFAAA;AAAA,gBACV,aAAA,EAAY,6BAAA;AAAA,gBACb,QAAA,EAAA;AAAA;AAAA,aAED;AAAA,YACC,cAAc,MAAA,oBACb,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,SAAA;AAAA,gBACT,SAAA,EAAU,oCAAA;AAAA,gBACV,YAAA,EAAW,uBAAA;AAAA,gBACX,aAAA,EAAY,uBAAA;AAAA,gBAEZ,QAAA,kBAAA,GAAA,CAAC,CAAA,EAAA,EAAE,SAAA,EAAU,QAAA,EAAS,eAAW,IAAA,EAAC;AAAA;AAAA;AACpC,WAAA,EAEJ;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AACA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"chunk-JXOCE27Z.js","sourcesContent":["import { ArrowUpCircle, X } from \"lucide-react\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * UpdateBanner — top-of-app alert when a newer version is available.\n *\n * Controlled. Dismiss persistence (localStorage/cookie/etc) is the consumer's\n * responsibility (per EC-16 DOCUMENT). Component just fires `onDismiss`.\n */\n\nexport interface UpdateBannerProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  currentVersion: string;\n  latestVersion: string;\n  onUpdate: () => void;\n  onDismiss?: () => void;\n  severity?: \"info\" | \"warn\";\n  \"data-testid\"?: string;\n}\n\nexport const UpdateBanner = forwardRef<HTMLDivElement, UpdateBannerProps>(\n  (\n    {\n      currentVersion,\n      latestVersion,\n      onUpdate,\n      onDismiss,\n      severity = \"info\",\n      className,\n      \"data-testid\": dataTestId,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        data-slot=\"update-banner\"\n        ref={ref}\n        role=\"alert\"\n        aria-live=\"polite\"\n        className={cn(\n          \"flex items-center justify-between gap-3 border-b px-4 py-2 text-sm\",\n          severity === \"warn\"\n            ? \"border-warning/40 bg-warning/10 text-warning\"\n            : \"border-primary/40 bg-primary/10 text-primary\",\n          className,\n        )}\n        data-testid={dataTestId ?? \"update-banner\"}\n        data-severity={severity}\n        {...rest}\n      >\n        <div className=\"flex items-center gap-2\">\n          <ArrowUpCircle className=\"size-4\" aria-hidden />\n          <span>\n            Update available: <strong data-testid=\"update-banner-latest\">v{latestVersion}</strong>{\" \"}\n            (running <span data-testid=\"update-banner-current\">v{currentVersion}</span>).\n          </span>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={onUpdate}\n            className=\"rounded-md border border-current px-2 py-1 font-medium text-xs hover:bg-current/10\"\n            data-testid=\"update-banner-update-button\"\n          >\n            Update now\n          </button>\n          {onDismiss !== undefined && (\n            <button\n              type=\"button\"\n              onClick={onDismiss}\n              className=\"rounded-md p-1 hover:bg-current/10\"\n              aria-label=\"Dismiss update banner\"\n              data-testid=\"update-banner-dismiss\"\n            >\n              <X className=\"size-4\" aria-hidden />\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\nUpdateBanner.displayName = \"UpdateBanner\";\n"]}