acai-ui-library 0.1.13 → 0.1.14

package/dist/index.cjs

@@ -173,7 +173,9 @@ __export(src_exports, {
   HoverCard: () => HoverCard,
   HoverCardContent: () => HoverCardContent,
   HoverCardTrigger: () => HoverCardTrigger,
+  INACTIVE_IMPERSONATION: () => INACTIVE_IMPERSONATION,
   IconInfoLineIcon: () => IconInfoLineIcon,
+  ImpersonationBanner: () => ImpersonationBanner,
   Input: () => Input,
   InputAddon: () => InputAddon,
   InputGroup: () => InputGroup,
@@ -215,6 +217,7 @@ __export(src_exports, {
   NavigationMenuList: () => NavigationMenuList,
   NavigationMenuTrigger: () => NavigationMenuTrigger,
   NavigationMenuViewport: () => NavigationMenuViewport,
+  OPERATION_CLASSES: () => OPERATION_CLASSES,
   Pagination: () => Pagination,
   PaginationContent: () => PaginationContent,
   PaginationEllipsis: () => PaginationEllipsis,
@@ -227,8 +230,10 @@ __export(src_exports, {
   PopoverContent: () => PopoverContent,
   PopoverTrigger: () => PopoverTrigger,
   Progress: () => Progress,
+  READ_ONLY_REASON: () => READ_ONLY_REASON,
   RadioGroup: () => RadioGroup,
   RadioGroupItem: () => RadioGroupItem,
+  ReadOnlyGuard: () => ReadOnlyGuard,
   ResizableHandle: () => ResizableHandle,
   ResizablePanel: () => ResizablePanel,
   ResizablePanelGroup: () => ResizablePanelGroup,
@@ -299,17 +304,24 @@ __export(src_exports, {
   TooltipProvider: () => TooltipProvider,
   TooltipTrigger: () => TooltipTrigger,
   alertVariants: () => alertVariants,
+  approvedOpsOf: () => approvedOpsOf,
   buttonVariants: () => buttonVariants,
   checkboxVariants: () => checkboxVariants,
   cn: () => cn,
+  decodeJwtPayload: () => decodeJwtPayload,
   emptyStateVariants: () => emptyStateVariants,
+  formatRemaining: () => formatRemaining,
   inputVariants: () => inputVariants,
+  isGuarded: () => isGuarded,
+  modeOfOps: () => modeOfOps,
   navigationMenuTriggerStyle: () => navigationMenuTriggerStyle,
+  readImpersonation: () => readImpersonation,
   spinnerVariants: () => spinnerVariants,
   switchVariants: () => switchVariants,
   toast: () => import_sonner.toast,
   toggleVariants: () => toggleVariants,
   useFormField: () => useFormField,
+  useImpersonation: () => useImpersonation,
   useSidebar: () => useSidebar,
   useTheme: () => import_next_themes3.useTheme
 });
@@ -443,7 +455,8 @@ var Input = React2.forwardRef(
     onChange,
     ...props
   }, ref) => {
-    const inputId = id || React2.useId();
+    const generatedId = React2.useId();
+    const inputId = id || generatedId;
     const isControlled = value !== void 0;
     const [internalValue, setInternalValue] = React2.useState(defaultValue);
     const innerRef = React2.useRef(null);
@@ -816,7 +829,8 @@ var checkboxIconSize = {
   lg: "size-4"
 };
 var Checkbox = React7.forwardRef(({ className, label, id, variant, size = "default", ...props }, ref) => {
-  const checkboxId = id || React7.useId();
+  const generatedId = React7.useId();
+  const checkboxId = id || generatedId;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "inline-flex items-center gap-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       CheckboxPrimitive.Root,
@@ -1562,12 +1576,13 @@ var Alert = React17.forwardRef(({ className, variant, ...props }, ref) => /* @__
   }
 ));
 Alert.displayName = "Alert";
-var AlertTitle = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var AlertTitle = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   "h5",
   {
     ref,
     className: cn("mb-1 font-medium leading-none tracking-tight", className),
-    ...props
+    ...props,
+    children
   }
 ));
 AlertTitle.displayName = "AlertTitle";
@@ -1939,7 +1954,7 @@ var Item4 = React24.forwardRef(
   ({ className, clickable, onClick, children, ...props }, ref) => {
     const baseClasses = "flex items-center gap-3 px-4 py-3 rounded-md";
     const interactiveClasses = "cursor-pointer transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] w-full text-start";
-    if (clickable) {
+    if (clickable || onClick) {
       return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "button",
         {
@@ -1956,7 +1971,6 @@ var Item4 = React24.forwardRef(
       "div",
       {
         ref,
-        onClick,
         className: cn(baseClasses, className),
         ...props,
         children
@@ -3522,7 +3536,7 @@ var CardHeader = React39.forwardRef(
 );
 CardHeader.displayName = "CardHeader";
 var CardTitle = React39.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h3", { ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h3", { ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props, children })
 );
 CardTitle.displayName = "CardTitle";
 var CardDescription = React39.forwardRef(
@@ -3890,6 +3904,7 @@ var PaginationLink = ({
   className,
   isActive,
   size = "icon",
+  children,
   ...props
 }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
   "a",
@@ -3902,7 +3917,8 @@ var PaginationLink = ({
       }),
       className
     ),
-    ...props
+    ...props,
+    children
   }
 );
 PaginationLink.displayName = "PaginationLink";
@@ -4660,19 +4676,19 @@ function resolveColor(color, defaultColorClass) {
   return colorMap[color];
 }
 var H1 = React50.forwardRef(
-  ({ className, weight = "semibold", color, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h1", { ref, className: cn("scroll-m-20 text-3xl tracking-tight", resolveColor(color, "text-foreground"), weightMap[weight], className), ...props })
+  ({ className, weight = "semibold", color, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h1", { ref, className: cn("scroll-m-20 text-3xl tracking-tight", resolveColor(color, "text-foreground"), weightMap[weight], className), ...props, children })
 );
 H1.displayName = "H1";
 var H2 = React50.forwardRef(
-  ({ className, weight = "semibold", color, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h2", { ref, className: cn("scroll-m-20 text-2xl tracking-tight", resolveColor(color, "text-foreground"), weightMap[weight], className), ...props })
+  ({ className, weight = "semibold", color, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h2", { ref, className: cn("scroll-m-20 text-2xl tracking-tight", resolveColor(color, "text-foreground"), weightMap[weight], className), ...props, children })
 );
 H2.displayName = "H2";
 var H3 = React50.forwardRef(
-  ({ className, weight = "semibold", color, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h3", { ref, className: cn("scroll-m-20 text-xl tracking-tight", resolveColor(color, "text-foreground"), weightMap[weight], className), ...props })
+  ({ className, weight = "semibold", color, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h3", { ref, className: cn("scroll-m-20 text-xl tracking-tight", resolveColor(color, "text-foreground"), weightMap[weight], className), ...props, children })
 );
 H3.displayName = "H3";
 var H4 = React50.forwardRef(
-  ({ className, weight = "semibold", color, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h4", { ref, className: cn("scroll-m-20 text-lg tracking-tight", resolveColor(color, "text-foreground"), weightMap[weight], className), ...props })
+  ({ className, weight = "semibold", color, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h4", { ref, className: cn("scroll-m-20 text-lg tracking-tight", resolveColor(color, "text-foreground"), weightMap[weight], className), ...props, children })
 );
 H4.displayName = "H4";
 var Body = React50.forwardRef(
@@ -4757,6 +4773,202 @@ var Banner = React51.forwardRef(
   )
 );
 Banner.displayName = "Banner";
+
+// src/components/impersonation-banner.tsx
+var React52 = __toESM(require("react"), 1);
+var import_jsx_runtime61 = require("react/jsx-runtime");
+function toMs(value) {
+  if (value instanceof Date) return value.getTime();
+  if (typeof value === "number") return value;
+  const parsed = Date.parse(value);
+  return Number.isNaN(parsed) ? 0 : parsed;
+}
+function formatRemaining(ms) {
+  const total = Math.max(0, Math.floor(ms / 1e3));
+  const h = Math.floor(total / 3600);
+  const m = Math.floor(total % 3600 / 60);
+  const s = total % 60;
+  const pad = (n) => String(n).padStart(2, "0");
+  return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${m}:${pad(s)}`;
+}
+var ImpersonationBanner = React52.forwardRef(
+  ({ actorLabel, mode, expiresAt, onExit, targetLabel, ops, inline = false, onExpire, className }, ref) => {
+    const endMs = toMs(expiresAt);
+    const [now, setNow] = React52.useState(() => Date.now());
+    const remaining = endMs - now;
+    const expired = remaining <= 0;
+    const onExpireRef = React52.useRef(onExpire);
+    onExpireRef.current = onExpire;
+    React52.useEffect(() => {
+      if (expired) return void 0;
+      const timer = setInterval(() => setNow(Date.now()), 1e3);
+      return () => clearInterval(timer);
+    }, [expired]);
+    const firedFor = React52.useRef(null);
+    React52.useEffect(() => {
+      if (expired && firedFor.current !== endMs) {
+        firedFor.current = endMs;
+        onExpireRef.current?.();
+      }
+    }, [expired, endMs]);
+    const isRead = mode === "READ";
+    const modeText = isRead ? "Read-only" : "Changes allowed";
+    const opsText = ops && ops.length > 0 ? ops.join(", ") : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+      inline ? null : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { "aria-hidden": "true", className: "h-12", "data-impersonation-spacer": "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+        "div",
+        {
+          ref,
+          role: "alert",
+          "data-impersonation-banner": "",
+          "data-mode": mode,
+          className: cn(
+            inline ? "relative" : "fixed inset-x-0 top-0 z-[2147483000]",
+            "flex h-12 items-center gap-3 border-b-2 px-4 text-sm font-medium shadow-md",
+            isRead ? "border-black bg-[#FDE047] text-black" : "border-white bg-[#991B1B] text-white",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "shrink-0 rounded px-2 py-0.5 text-xs font-bold uppercase tracking-wide ring-1 ring-current", children: "Support session" }),
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("p", { className: "min-w-0 flex-1 truncate", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "font-semibold", children: actorLabel }),
+              targetLabel ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+                " is acting as ",
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "font-semibold", children: targetLabel })
+              ] }) : " is acting as this user",
+              " \xB7 ",
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { "data-testid": "impersonation-mode", children: modeText }),
+              opsText ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "hidden sm:inline", children: ` (${opsText})` }) : null
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "shrink-0 tabular-nums", "aria-live": "off", title: "Time left in this support session", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("time", { "data-testid": "impersonation-countdown", dateTime: new Date(endMs).toISOString(), children: expired ? "Expired" : formatRemaining(remaining) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onExit,
+                className: cn(
+                  "shrink-0 rounded-md px-3 py-1 text-sm font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+                  isRead ? "bg-black text-[#FDE047] hover:bg-black/85 focus-visible:ring-black focus-visible:ring-offset-[#FDE047]" : "bg-white text-[#991B1B] hover:bg-white/90 focus-visible:ring-white focus-visible:ring-offset-[#991B1B]"
+                ),
+                children: "Exit"
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+ImpersonationBanner.displayName = "ImpersonationBanner";
+
+// src/components/read-only-guard.tsx
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var READ_ONLY_REASON = "Read-only support session: this action is turned off.";
+function isGuarded({ mode, ops, op = "WRITE" }) {
+  if (ops) return !ops.includes(op);
+  return mode === "READ";
+}
+function ReadOnlyGuard({ mode, ops, op = "WRITE", reason = READ_ONLY_REASON, className, children }) {
+  if (!isGuarded({ mode, ops, op })) return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_jsx_runtime62.Fragment, { children });
+  const swallow = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      "span",
+      {
+        tabIndex: 0,
+        "data-read-only": "",
+        "aria-disabled": "true",
+        className: cn("inline-flex cursor-not-allowed", className),
+        onClickCapture: swallow,
+        onSubmitCapture: swallow,
+        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("fieldset", { disabled: true, className: "contents", children })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TooltipContent, { children: reason })
+  ] }) });
+}
+ReadOnlyGuard.displayName = "ReadOnlyGuard";
+
+// src/lib/impersonation.ts
+var React53 = __toESM(require("react"), 1);
+var OPERATION_CLASSES = ["READ", "WRITE", "DESTRUCTIVE", "FINANCIAL", "SECURITY"];
+var PLATFORM_BLOCKED = /* @__PURE__ */ new Set(["FINANCIAL", "SECURITY"]);
+var INACTIVE_IMPERSONATION = Object.freeze({
+  active: false,
+  mode: null,
+  ops: [],
+  actorSub: null,
+  actorUserType: null,
+  sessionId: null,
+  expiresAt: null
+});
+function base64UrlDecode(segment) {
+  const b64 = segment.replace(/-/g, "+").replace(/_/g, "/");
+  const padded = b64 + "=".repeat((4 - b64.length % 4) % 4);
+  const binary = atob(padded);
+  const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
+  return new TextDecoder().decode(bytes);
+}
+function decodeJwtPayload(token) {
+  if (typeof token !== "string") return null;
+  const parts = token.split(".");
+  if (parts.length !== 3 || !parts[1]) return null;
+  try {
+    const payload = JSON.parse(base64UrlDecode(parts[1]));
+    return payload !== null && typeof payload === "object" && !Array.isArray(payload) ? payload : null;
+  } catch {
+    return null;
+  }
+}
+var nonEmpty = (v) => typeof v === "string" && v.trim() !== "" ? v : null;
+function approvedOpsOf(claims) {
+  let ops;
+  if (Array.isArray(claims.imp_ops)) ops = claims.imp_ops.filter((v) => typeof v === "string");
+  else if (claims.imp_mode === "WRITE") ops = ["READ", "WRITE"];
+  else ops = ["READ"];
+  const set = new Set(ops.filter((op) => !PLATFORM_BLOCKED.has(op)));
+  return OPERATION_CLASSES.filter((c) => set.has(c));
+}
+function modeOfOps(ops) {
+  return ops.every((op) => op === "READ") ? "READ" : "WRITE";
+}
+function readImpersonation(token, now = Date.now()) {
+  const claims = decodeJwtPayload(token);
+  if (!claims) return INACTIVE_IMPERSONATION;
+  const amr = Array.isArray(claims.amr) ? claims.amr : [];
+  if (!amr.includes("impersonation")) return INACTIVE_IMPERSONATION;
+  const act = claims.act !== null && typeof claims.act === "object" ? claims.act : {};
+  const actorSub = nonEmpty(act.sub);
+  const sessionId = nonEmpty(claims.imp_sid);
+  const expiresAt = typeof claims.exp === "number" ? new Date(claims.exp * 1e3) : null;
+  if (!actorSub || !sessionId || !expiresAt || expiresAt.getTime() <= now) return INACTIVE_IMPERSONATION;
+  const ops = approvedOpsOf(claims);
+  return {
+    active: true,
+    mode: modeOfOps(ops),
+    ops,
+    actorSub,
+    actorUserType: nonEmpty(act.userType),
+    sessionId,
+    expiresAt
+  };
+}
+function useImpersonation(token) {
+  const [tick, setTick] = React53.useState(0);
+  const state = React53.useMemo(() => readImpersonation(token), [token, tick]);
+  const expiresAtMs = state.expiresAt?.getTime() ?? null;
+  React53.useEffect(() => {
+    if (expiresAtMs === null) return void 0;
+    const delay = Math.max(0, expiresAtMs - Date.now());
+    const timer = setTimeout(() => setTick((t) => t + 1), Math.min(delay + 50, 2147e6));
+    return () => clearTimeout(timer);
+  }, [expiresAtMs]);
+  return state;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -4902,7 +5114,9 @@ Banner.displayName = "Banner";
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
+  INACTIVE_IMPERSONATION,
   IconInfoLineIcon,
+  ImpersonationBanner,
   Input,
   InputAddon,
   InputGroup,
@@ -4944,6 +5158,7 @@ Banner.displayName = "Banner";
   NavigationMenuList,
   NavigationMenuTrigger,
   NavigationMenuViewport,
+  OPERATION_CLASSES,
   Pagination,
   PaginationContent,
   PaginationEllipsis,
@@ -4956,8 +5171,10 @@ Banner.displayName = "Banner";
   PopoverContent,
   PopoverTrigger,
   Progress,
+  READ_ONLY_REASON,
   RadioGroup,
   RadioGroupItem,
+  ReadOnlyGuard,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
@@ -5028,17 +5245,24 @@ Banner.displayName = "Banner";
   TooltipProvider,
   TooltipTrigger,
   alertVariants,
+  approvedOpsOf,
   buttonVariants,
   checkboxVariants,
   cn,
+  decodeJwtPayload,
   emptyStateVariants,
+  formatRemaining,
   inputVariants,
+  isGuarded,
+  modeOfOps,
   navigationMenuTriggerStyle,
+  readImpersonation,
   spinnerVariants,
   switchVariants,
   toast,
   toggleVariants,
   useFormField,
+  useImpersonation,
   useSidebar,
   useTheme
 });