acai-ui-library 0.1.13 → 0.1.15

package/dist/index.d.cts

@@ -62,6 +62,9 @@ export { Toaster } from './components/sonner.cjs';
 export { Body, Caption, Code, H1, H2, H3, H4, Lead, Muted, Small, TypographyColor, TypographyWeight } from './components/typography.cjs';
 export { ThemeProvider } from './components/theme-provider.cjs';
 export { Banner, BannerProps } from './components/banner.cjs';
+export { ImpersonationBanner, ImpersonationBannerProps, formatRemaining } from './components/impersonation-banner.cjs';
+export { READ_ONLY_REASON, ReadOnlyGuard, ReadOnlyGuardProps, isGuarded } from './components/read-only-guard.cjs';
+export { INACTIVE_IMPERSONATION, ImpersonationMode, ImpersonationState, OPERATION_CLASSES, OperationClass, approvedOpsOf, decodeJwtPayload, modeOfOps, readImpersonation, useImpersonation } from './lib/impersonation.cjs';
 export { ThemeProviderProps, useTheme } from 'next-themes';
 export { toast } from 'sonner';
 import 'clsx';

package/dist/index.d.ts

@@ -62,6 +62,9 @@ export { Toaster } from './components/sonner.js';
 export { Body, Caption, Code, H1, H2, H3, H4, Lead, Muted, Small, TypographyColor, TypographyWeight } from './components/typography.js';
 export { ThemeProvider } from './components/theme-provider.js';
 export { Banner, BannerProps } from './components/banner.js';
+export { ImpersonationBanner, ImpersonationBannerProps, formatRemaining } from './components/impersonation-banner.js';
+export { READ_ONLY_REASON, ReadOnlyGuard, ReadOnlyGuardProps, isGuarded } from './components/read-only-guard.js';
+export { INACTIVE_IMPERSONATION, ImpersonationMode, ImpersonationState, OPERATION_CLASSES, OperationClass, approvedOpsOf, decodeJwtPayload, modeOfOps, readImpersonation, useImpersonation } from './lib/impersonation.js';
 export { ThemeProviderProps, useTheme } from 'next-themes';
 export { toast } from 'sonner';
 import 'clsx';

package/dist/index.js

@@ -126,7 +126,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);
@@ -499,7 +500,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__ */ jsxs6("div", { className: "inline-flex items-center gap-2", children: [
     /* @__PURE__ */ jsx7(
       CheckboxPrimitive.Root,
@@ -561,7 +563,7 @@ import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cva as cva5 } from "class-variance-authority";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var switchVariants = cva5(
-  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-[var(--hc-grey-200)] aria-[invalid=true]:ring-2 aria-[invalid=true]:ring-destructive aria-[invalid=true]:ring-offset-2",
+  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-[var(--hc-grey-400,#7C7C83)] aria-[invalid=true]:ring-2 aria-[invalid=true]:ring-destructive aria-[invalid=true]:ring-offset-2",
   {
     variants: {
       variant: {
@@ -596,7 +598,7 @@ var Switch = React9.forwardRef(({ className, variant, size = "default", ...props
       SwitchPrimitives.Thumb,
       {
         className: cn(
-          "pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform duration-200 [[disabled]_&]:bg-[var(--hc-grey-300)]",
+          "pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform duration-200 [[disabled]_&]:bg-[var(--hc-grey-300,#A2A2A6)]",
           thumbStyles[size ?? "default"]
         )
       }
@@ -1249,12 +1251,13 @@ var Alert = React17.forwardRef(({ className, variant, ...props }, ref) => /* @__
   }
 ));
 Alert.displayName = "Alert";
-var AlertTitle = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+var AlertTitle = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx19(
   "h5",
   {
     ref,
     className: cn("mb-1 font-medium leading-none tracking-tight", className),
-    ...props
+    ...props,
+    children
   }
 ));
 AlertTitle.displayName = "AlertTitle";
@@ -1626,7 +1629,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__ */ jsx27(
         "button",
         {
@@ -1643,7 +1646,6 @@ var Item4 = React24.forwardRef(
       "div",
       {
         ref,
-        onClick,
         className: cn(baseClasses, className),
         ...props,
         children
@@ -2364,7 +2366,7 @@ var DropdownMenuSubContent = React32.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-[6px] border border-[var(--hc-color-border-subtle)] bg-popover p-1 text-popover-foreground shadow-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-[6px] border border-[var(--hc-color-border-subtle)] bg-popover p-1 text-popover-foreground shadow-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:pointer-events-none data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -2377,7 +2379,7 @@ var DropdownMenuContent = React32.forwardRef(({ className, sideOffset = 4, ...pr
     ref,
     sideOffset,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-[6px] border border-[var(--hc-color-border-subtle)] bg-popover p-1 text-popover-foreground shadow-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-[6px] border border-[var(--hc-color-border-subtle)] bg-popover p-1 text-popover-foreground shadow-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:pointer-events-none data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -3209,7 +3211,7 @@ var CardHeader = React39.forwardRef(
 );
 CardHeader.displayName = "CardHeader";
 var CardTitle = React39.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx42("h3", { ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx42("h3", { ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props, children })
 );
 CardTitle.displayName = "CardTitle";
 var CardDescription = React39.forwardRef(
@@ -3584,6 +3586,7 @@ var PaginationLink = ({
   className,
   isActive,
   size = "icon",
+  children,
   ...props
 }) => /* @__PURE__ */ jsx47(
   "a",
@@ -3596,7 +3599,8 @@ var PaginationLink = ({
       }),
       className
     ),
-    ...props
+    ...props,
+    children
   }
 );
 PaginationLink.displayName = "PaginationLink";
@@ -4354,19 +4358,19 @@ function resolveColor(color, defaultColorClass) {
   return colorMap[color];
 }
 var H1 = React50.forwardRef(
-  ({ className, weight = "semibold", color, ...props }, ref) => /* @__PURE__ */ jsx58("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__ */ jsx58("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__ */ jsx58("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__ */ jsx58("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__ */ jsx58("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__ */ jsx58("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__ */ jsx58("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__ */ jsx58("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(
@@ -4451,6 +4455,202 @@ var Banner = React51.forwardRef(
   )
 );
 Banner.displayName = "Banner";
+
+// src/components/impersonation-banner.tsx
+import * as React52 from "react";
+import { Fragment as Fragment3, jsx as jsx61, jsxs as jsxs41 } from "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__ */ jsxs41(Fragment3, { children: [
+      inline ? null : /* @__PURE__ */ jsx61("div", { "aria-hidden": "true", className: "h-12", "data-impersonation-spacer": "" }),
+      /* @__PURE__ */ jsxs41(
+        "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__ */ jsx61("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__ */ jsxs41("p", { className: "min-w-0 flex-1 truncate", children: [
+              /* @__PURE__ */ jsx61("span", { className: "font-semibold", children: actorLabel }),
+              targetLabel ? /* @__PURE__ */ jsxs41(Fragment3, { children: [
+                " is acting as ",
+                /* @__PURE__ */ jsx61("span", { className: "font-semibold", children: targetLabel })
+              ] }) : " is acting as this user",
+              " \xB7 ",
+              /* @__PURE__ */ jsx61("span", { "data-testid": "impersonation-mode", children: modeText }),
+              opsText ? /* @__PURE__ */ jsx61("span", { className: "hidden sm:inline", children: ` (${opsText})` }) : null
+            ] }),
+            /* @__PURE__ */ jsx61("span", { className: "shrink-0 tabular-nums", "aria-live": "off", title: "Time left in this support session", children: /* @__PURE__ */ jsx61("time", { "data-testid": "impersonation-countdown", dateTime: new Date(endMs).toISOString(), children: expired ? "Expired" : formatRemaining(remaining) }) }),
+            /* @__PURE__ */ jsx61(
+              "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
+import { Fragment as Fragment4, jsx as jsx62, jsxs as jsxs42 } from "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__ */ jsx62(Fragment4, { children });
+  const swallow = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsx62(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxs42(Tooltip, { children: [
+    /* @__PURE__ */ jsx62(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx62(
+      "span",
+      {
+        tabIndex: 0,
+        "data-read-only": "",
+        "aria-disabled": "true",
+        className: cn("inline-flex cursor-not-allowed", className),
+        onClickCapture: swallow,
+        onSubmitCapture: swallow,
+        children: /* @__PURE__ */ jsx62("fieldset", { disabled: true, className: "contents", children })
+      }
+    ) }),
+    /* @__PURE__ */ jsx62(TooltipContent, { children: reason })
+  ] }) });
+}
+ReadOnlyGuard.displayName = "ReadOnlyGuard";
+
+// src/lib/impersonation.ts
+import * as React53 from "react";
+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;
+}
 export {
   Accordion,
   AccordionContent,
@@ -4595,7 +4795,9 @@ export {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
+  INACTIVE_IMPERSONATION,
   IconInfoLineIcon,
+  ImpersonationBanner,
   Input,
   InputAddon,
   InputGroup,
@@ -4637,6 +4839,7 @@ export {
   NavigationMenuList,
   NavigationMenuTrigger,
   NavigationMenuViewport,
+  OPERATION_CLASSES,
   Pagination,
   PaginationContent,
   PaginationEllipsis,
@@ -4649,8 +4852,10 @@ export {
   PopoverContent,
   PopoverTrigger,
   Progress,
+  READ_ONLY_REASON,
   RadioGroup,
   RadioGroupItem,
+  ReadOnlyGuard,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
@@ -4721,17 +4926,24 @@ export {
   TooltipProvider,
   TooltipTrigger,
   alertVariants,
+  approvedOpsOf,
   buttonVariants,
   checkboxVariants,
   cn,
+  decodeJwtPayload,
   emptyStateVariants,
+  formatRemaining,
   inputVariants,
+  isGuarded,
+  modeOfOps,
   navigationMenuTriggerStyle,
+  readImpersonation,
   spinnerVariants,
   switchVariants,
   toast,
   toggleVariants,
   useFormField,
+  useImpersonation,
   useSidebar,
   useTheme2 as useTheme
 };