@exxatdesignux/ui 0.2.19 → 0.4.0

package/dist/components/ui/page-header.js

@@ -0,0 +1,372 @@
+"use client";
+import 'lucide-react';
+import { Slot, Separator as Separator$1, Tooltip as Tooltip$1, Avatar as Avatar$1 } from 'radix-ui';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var avatarRootVariants = cva(
+  "group/avatar relative flex shrink-0 overflow-hidden select-none",
+  {
+    variants: {
+      size: {
+        sm: "size-6",
+        default: "size-8",
+        lg: "size-10"
+      },
+      shape: {
+        circle: "rounded-full",
+        square: "rounded-none",
+        "rounded-sm": "rounded-sm",
+        "rounded-md": "rounded-md",
+        "rounded-lg": "rounded-lg",
+        "rounded-xl": "rounded-xl"
+      },
+      variant: {
+        default: "",
+        ring: "ring-2 ring-ring",
+        "ring-offset": "ring-2 ring-ring ring-offset-2 ring-offset-background",
+        group: "ring-2 ring-background"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      shape: "circle",
+      variant: "default"
+    }
+  }
+);
+var AVATAR_INSET_AFTER = {
+  circle: "after:rounded-full",
+  square: "after:rounded-none",
+  "rounded-sm": "after:rounded-sm",
+  "rounded-md": "after:rounded-md",
+  "rounded-lg": "after:rounded-lg",
+  "rounded-xl": "after:rounded-xl"
+};
+var avatarImageShape = cn(
+  "aspect-square size-full object-cover",
+  "group-data-[shape=circle]/avatar:rounded-full",
+  "group-data-[shape=square]/avatar:rounded-none",
+  "group-data-[shape=rounded-sm]/avatar:rounded-sm",
+  "group-data-[shape=rounded-md]/avatar:rounded-md",
+  "group-data-[shape=rounded-lg]/avatar:rounded-lg",
+  "group-data-[shape=rounded-xl]/avatar:rounded-xl"
+);
+var avatarFallbackShape = cn(
+  "flex size-full items-center justify-center bg-muted text-sm text-muted-foreground",
+  "group-data-[shape=circle]/avatar:rounded-full",
+  "group-data-[shape=square]/avatar:rounded-none",
+  "group-data-[shape=rounded-sm]/avatar:rounded-sm",
+  "group-data-[shape=rounded-md]/avatar:rounded-md",
+  "group-data-[shape=rounded-lg]/avatar:rounded-lg",
+  "group-data-[shape=rounded-xl]/avatar:rounded-xl",
+  "group-data-[size=sm]/avatar:text-xs"
+);
+function Avatar({
+  className,
+  size = "default",
+  shape = "circle",
+  variant = "default",
+  insetBorder = false,
+  ...props
+}) {
+  const shapeKey = shape ?? "circle";
+  const insetClass = insetBorder && cn(
+    "after:pointer-events-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten",
+    AVATAR_INSET_AFTER[shapeKey]
+  );
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Root,
+    {
+      "data-slot": "avatar",
+      "data-size": size,
+      "data-shape": shape,
+      className: cn(avatarRootVariants({ size, shape, variant }), insetClass, className),
+      ...props
+    }
+  );
+}
+function AvatarImage({
+  className,
+  referrerPolicy = "no-referrer",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Image,
+    {
+      "data-slot": "avatar-image",
+      referrerPolicy,
+      className: cn(avatarImageShape, className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(avatarFallbackShape, className),
+      ...props
+    }
+  );
+}
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-input bg-background hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:bg-input/15 dark:hover:bg-input/25",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:hover:bg-interactive-hover-subtle",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5",
+        xs: "h-6 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-3 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pe-3.5 has-data-[icon=inline-start]:ps-3.5",
+        icon: "size-9",
+        "icon-xs": "size-6 in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(({ className, variant = "default", size = "default", asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size }), className),
+      ...props
+    }
+  );
+});
+Button.displayName = "Button";
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator$1.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip$1.Trigger,
+    {
+      "data-slot": "tooltip-trigger",
+      suppressHydrationWarning: true,
+      className: cn("cursor-pointer", className),
+      ...props
+    }
+  );
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(
+    Tooltip$1.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })
+      ]
+    }
+  ) });
+}
+function PageHeaderCollaborationAccess({
+  people,
+  limit,
+  onOpenCollaborators,
+  addCollaboratorLabel
+}) {
+  if (people.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "group",
+        "aria-label": "People with access",
+        className: "flex shrink-0 items-center",
+        children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "lg",
+            onClick: onOpenCollaborators,
+            disabled: !onOpenCollaborators,
+            children: [
+              /* @__PURE__ */ jsx("i", { className: "fa-light fa-user-plus", "aria-hidden": "true" }),
+              addCollaboratorLabel
+            ]
+          }
+        )
+      }
+    );
+  }
+  const visible = people.slice(0, limit);
+  const overflow = Math.max(0, people.length - visible.length);
+  const names = people.map((p) => p.name).join(", ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": names ? `People with access: ${names}` : "People with access",
+      className: "flex shrink-0 items-center gap-2 sm:gap-2.5",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
+        visible.map((c) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "relative shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              "aria-label": `Open collaborators \u2014 ${c.name}`,
+              onClick: onOpenCollaborators,
+              disabled: !onOpenCollaborators,
+              children: /* @__PURE__ */ jsxs(Avatar, { size: "sm", shape: "circle", className: "pointer-events-none", children: [
+                c.imageUrl ? /* @__PURE__ */ jsx(AvatarImage, { src: c.imageUrl, alt: "", referrerPolicy: "no-referrer" }) : null,
+                /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs font-semibold", children: (c.initials ?? c.name.slice(0, 2)).toUpperCase() })
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: c.name })
+        ] }, c.id)),
+        overflow > 0 && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-[11px] font-semibold tabular-nums text-muted-foreground ring-1 ring-border/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            "aria-label": `Open collaborators \u2014 ${overflow} more people with access`,
+            onClick: onOpenCollaborators,
+            disabled: !onOpenCollaborators,
+            children: [
+              "+",
+              overflow
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function PageHeader({
+  title,
+  subtitle,
+  variant = "default",
+  accessInfo,
+  collaborators,
+  collaboratorDisplayLimit = 3,
+  onCollaboratorsOpen,
+  addCollaboratorLabel = "Add collaborator",
+  actions,
+  className,
+  showTitleBlock = true
+}) {
+  const isCollaboration = variant === "collaboration";
+  const showAccess = Boolean(isCollaboration && accessInfo);
+  const showCollaborationAccess = isCollaboration;
+  const showActionsColumn = Boolean(actions) || showCollaborationAccess;
+  const showCollaboratorActionsSeparator = showCollaborationAccess && Boolean(actions);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-1 px-4 pt-2 pb-4 lg:px-6",
+        "sm:flex-row sm:items-end sm:gap-4",
+        showTitleBlock ? "sm:justify-between" : "sm:justify-end",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col gap-0.5", !showTitleBlock && "sr-only"), children: [
+          /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: "text-2xl font-semibold tracking-tight leading-tight text-foreground",
+              style: { fontFamily: "var(--font-heading)" },
+              suppressHydrationWarning: true,
+              children: title
+            }
+          ),
+          showAccess && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-snug text-muted-foreground", children: accessInfo }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground leading-none", children: subtitle })
+        ] }),
+        showActionsColumn && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-3 shrink-0 sm:ms-auto sm:justify-end", children: [
+          showCollaborationAccess ? /* @__PURE__ */ jsx(
+            PageHeaderCollaborationAccess,
+            {
+              people: collaborators ?? [],
+              limit: collaboratorDisplayLimit,
+              onOpenCollaborators: onCollaboratorsOpen,
+              addCollaboratorLabel
+            }
+          ) : null,
+          showCollaboratorActionsSeparator ? /* @__PURE__ */ jsx(
+            Separator,
+            {
+              orientation: "vertical",
+              decorative: true,
+              className: "h-8 shrink-0"
+            }
+          ) : null,
+          actions
+        ] })
+      ]
+    }
+  );
+}
+
+export { PageHeader };
+//# sourceMappingURL=page-header.js.map
+//# sourceMappingURL=page-header.js.map

package/dist/components/ui/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/avatar.tsx","../../../src/components/ui/button.tsx","../../../src/components/ui/separator.tsx","../../../src/components/ui/tooltip.tsx","../../../src/components/ui/page-header.tsx"],"names":["AvatarPrimitive","cva","jsx","SeparatorPrimitive","TooltipPrimitive","jsxs"],"mappings":";;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACMA,IAAM,kBAAA,GAAqB,GAAA;AAAA,EACzB,iEAAA;AAAA,EACA;AAAA,IACA,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,QAAA;AAAA,QACJ,OAAA,EAAS,QAAA;AAAA,QACT,EAAA,EAAI;AAAA,OACN;AAAA,MACA,KAAA,EAAO;AAAA,QACL,MAAA,EAAQ,cAAA;AAAA,QACR,MAAA,EAAQ,cAAA;AAAA,QACR,YAAA,EAAc,YAAA;AAAA,QACd,YAAA,EAAc,YAAA;AAAA,QACd,YAAA,EAAc,YAAA;AAAA,QACd,YAAA,EAAc;AAAA,OAChB;AAAA,MACA,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,EAAA;AAAA,QACT,IAAA,EAAM,kBAAA;AAAA,QACN,aAAA,EAAe,uDAAA;AAAA,QACf,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,SAAA;AAAA,MACN,KAAA,EAAO,QAAA;AAAA,MACP,OAAA,EAAS;AAAA;AACX;AAEF,CAAA;AAEA,IAAM,kBAAA,GAAoG;AAAA,EACxG,MAAA,EAAQ,oBAAA;AAAA,EACR,MAAA,EAAQ,oBAAA;AAAA,EACR,YAAA,EAAc,kBAAA;AAAA,EACd,YAAA,EAAc,kBAAA;AAAA,EACd,YAAA,EAAc,kBAAA;AAAA,EACd,YAAA,EAAc;AAChB,CAAA;AAEA,IAAM,gBAAA,GAAmB,EAAA;AAAA,EACvB,sCAAA;AAAA,EACA,+CAAA;AAAA,EACA,+CAAA;AAAA,EACA,iDAAA;AAAA,EACA,iDAAA;AAAA,EACA,iDAAA;AAAA,EACA;AACF,CAAA;AAEA,IAAM,mBAAA,GAAsB,EAAA;AAAA,EAC1B,mFAAA;AAAA,EACA,+CAAA;AAAA,EACA,+CAAA;AAAA,EACA,iDAAA;AAAA,EACA,iDAAA;AAAA,EACA,iDAAA;AAAA,EACA,iDAAA;AAAA,EACA;AACF,CAAA;AAWA,SAAS,MAAA,CAAO;AAAA,EACd,SAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,KAAA,GAAQ,QAAA;AAAA,EACR,OAAA,GAAU,SAAA;AAAA,EACV,WAAA,GAAc,KAAA;AAAA,EACd,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,MAAM,WAAW,KAAA,IAAS,QAAA;AAC1B,EAAA,MAAM,aACJ,WAAA,IACA,EAAA;AAAA,IACE,6IAAA;AAAA,IACA,mBAAmB,QAAQ;AAAA,GAC7B;AACF,EAAA,uBACE,GAAA;AAAA,IAACA,QAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,YAAA,EAAY,KAAA;AAAA,MACZ,SAAA,EAAW,EAAA,CAAG,kBAAA,CAAmB,EAAE,IAAA,EAAM,OAAO,OAAA,EAAS,CAAA,EAAG,UAAA,EAAY,SAAS,CAAA;AAAA,MAChF,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,WAAA,CAAY;AAAA,EACnB,SAAA;AAAA,EACA,cAAA,GAAiB,aAAA;AAAA,EACjB,GAAG;AACL,CAAA,EAAuD;AACrD,EAAA,uBACE,GAAA;AAAA,IAACA,QAAA,CAAgB,KAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,cAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,gBAAA,EAAkB,SAAS,CAAA;AAAA,MACxC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,uBACE,GAAA;AAAA,IAACA,QAAA,CAAgB,QAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,mBAAA,EAAqB,SAAS,CAAA;AAAA,MAC3C,GAAG;AAAA;AAAA,GACN;AAEJ;AChIA,IAAM,cAAA,GAAiBC,GAAAA;AAAA,EACrB,ulBAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,wDAAA;AAAA,QACT,OAAA,EACE,0NAAA;AAAA,QACF,SAAA,EACE,iIAAA;AAAA,QACF,KAAA,EACE,8LAAA;AAAA,QACF,WAAA,EACE,6NAAA;AAAA,QACF,IAAA,EAAM;AAAA,OACR;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EACE,wFAAA;AAAA,QACF,EAAA,EAAI,0KAAA;AAAA,QACJ,EAAA,EAAI,8KAAA;AAAA,QACJ,EAAA,EAAI,yFAAA;AAAA,QACJ,IAAA,EAAM,QAAA;AAAA,QACN,SAAA,EACE,oFAAA;AAAA,QACF,SAAA,EACE,+CAAA;AAAA,QACF,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;AAEA,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA,CAMnB,CAAC,EAAE,WAAW,OAAA,GAAU,SAAA,EAAW,IAAA,GAAO,SAAA,EAAW,OAAA,GAAU,KAAA,EAAO,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC1F,EAAA,MAAM,IAAA,GAAO,OAAA,GAAU,IAAA,CAAK,IAAA,GAAO,QAAA;AAEnC,EAAA,uBACEC,GAAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,QAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MACzD,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,MAAA,CAAO,WAAA,GAAc,QAAA;ACxDrB,SAAS,SAAA,CAAU;AAAA,EACjB,SAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,UAAA,GAAa,IAAA;AAAA,EACb,GAAG;AACL,CAAA,EAAyD;AACvD,EAAA,uBACEA,GAAAA;AAAA,IAACC,WAAA,CAAmB,IAAA;AAAA,IAAnB;AAAA,MACC,WAAA,EAAU,WAAA;AAAA,MACV,UAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,sKAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;ACLA,SAAS,OAAA,CAAQ;AAAA,EACf,GAAG;AACL,CAAA,EAAuD;AACrD,EAAA,uBAAOD,IAACE,SAAA,CAAiB,IAAA,EAAjB,EAAsB,WAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAC/D;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,uBACEF,GAAAA;AAAA,IAACE,SAAA,CAAiB,OAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,wBAAA,EAAwB,IAAA;AAAA,MACxB,SAAA,EAAW,EAAA,CAAG,gBAAA,EAAkB,SAAS,CAAA;AAAA,MACxC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,UAAA,GAAa,CAAA;AAAA,EACb,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,uBACEF,GAAAA,CAACE,SAAA,CAAiB,MAAA,EAAjB,EACC,QAAA,kBAAAC,IAAAA;AAAA,IAACD,SAAA,CAAiB,OAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,UAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,4rBAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACDF,GAAAA,CAACE,SAAA,CAAiB,KAAA,EAAjB,EAAuB,WAAU,oGAAA,EAAqG;AAAA;AAAA;AAAA,GACzI,EACF,CAAA;AAEJ;AC6BA,SAAS,6BAAA,CAA8B;AAAA,EACrC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAA,EAKG;AACD,EAAA,IAAI,MAAA,CAAO,WAAW,CAAA,EAAG;AACvB,IAAA,uBACEF,GAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,OAAA;AAAA,QACL,YAAA,EAAW,oBAAA;AAAA,QACX,SAAA,EAAU,4BAAA;AAAA,QAEV,QAAA,kBAAAG,IAAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAQ,SAAA;AAAA,YACR,IAAA,EAAK,IAAA;AAAA,YACL,OAAA,EAAS,mBAAA;AAAA,YACT,UAAU,CAAC,mBAAA;AAAA,YAEX,QAAA,EAAA;AAAA,8BAAAH,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,uBAAA,EAAwB,eAAY,MAAA,EAAO,CAAA;AAAA,cACvD;AAAA;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,MAAM,OAAA,GAAU,MAAA,CAAO,KAAA,CAAM,CAAA,EAAG,KAAK,CAAA;AACrC,EAAA,MAAM,WAAW,IAAA,CAAK,GAAA,CAAI,GAAG,MAAA,CAAO,MAAA,GAAS,QAAQ,MAAM,CAAA;AAC3D,EAAA,MAAM,KAAA,GAAQ,OAAO,GAAA,CAAI,CAAC,MAAM,CAAA,CAAE,IAAI,CAAA,CAAE,IAAA,CAAK,IAAI,CAAA;AAEjD,EAAA,uBACEA,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,OAAA;AAAA,MACL,YAAA,EAAY,KAAA,GAAQ,CAAA,oBAAA,EAAuB,KAAK,CAAA,CAAA,GAAK,oBAAA;AAAA,MACrD,SAAA,EAAU,6CAAA;AAAA,MAEV,QAAA,kBAAAG,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oCAAA,EACZ,QAAA,EAAA;AAAA,QAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,CAAA,qBACZA,KAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAAH,GAAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EACrB,QAAA,kBAAAA,GAAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,SAAA,EAAU,yKAAA;AAAA,cACV,YAAA,EAAY,CAAA,0BAAA,EAAwB,CAAA,CAAE,IAAI,CAAA,CAAA;AAAA,cAC1C,OAAA,EAAS,mBAAA;AAAA,cACT,UAAU,CAAC,mBAAA;AAAA,cAEX,QAAA,kBAAAG,KAAC,MAAA,EAAA,EAAO,IAAA,EAAK,MAAK,KAAA,EAAM,QAAA,EAAS,WAAU,qBAAA,EACxC,QAAA,EAAA;AAAA,gBAAA,CAAA,CAAE,QAAA,mBACDH,GAAAA,CAAC,WAAA,EAAA,EAAY,GAAA,EAAK,CAAA,CAAE,QAAA,EAAU,GAAA,EAAI,EAAA,EAAG,cAAA,EAAe,aAAA,EAAc,CAAA,GAChE,IAAA;AAAA,gCACJA,GAAAA,CAAC,cAAA,EAAA,EAAe,SAAA,EAAU,yBACtB,QAAA,EAAA,CAAA,CAAA,CAAE,QAAA,IAAY,CAAA,CAAE,IAAA,CAAK,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA,EAAG,aAAY,EAClD;AAAA,eAAA,EACF;AAAA;AAAA,WACF,EACF,CAAA;AAAA,0BACAA,GAAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAK,QAAA,EAAU,YAAE,IAAA,EAAK;AAAA,SAAA,EAAA,EAnB1B,CAAA,CAAE,EAoBhB,CACD,CAAA;AAAA,QACA,QAAA,GAAW,qBACVG,IAAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,SAAA,EAAU,oSAAA;AAAA,YACV,YAAA,EAAY,6BAAwB,QAAQ,CAAA,wBAAA,CAAA;AAAA,YAC5C,OAAA,EAAS,mBAAA;AAAA,YACT,UAAU,CAAC,mBAAA;AAAA,YACZ,QAAA,EAAA;AAAA,cAAA,GAAA;AAAA,cACG;AAAA;AAAA;AAAA;AACJ,OAAA,EAEJ;AAAA;AAAA,GACF;AAEJ;AAEO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,UAAA;AAAA,EACA,aAAA;AAAA,EACA,wBAAA,GAA2B,CAAA;AAAA,EAC3B,mBAAA;AAAA,EACA,oBAAA,GAAuB,kBAAA;AAAA,EACvB,OAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA,GAAiB;AACnB,CAAA,EAAoB;AAClB,EAAA,MAAM,kBAAkB,OAAA,KAAY,eAAA;AACpC,EAAA,MAAM,UAAA,GAAa,OAAA,CAAQ,eAAA,IAAmB,UAAU,CAAA;AACxD,EAAA,MAAM,uBAAA,GAA0B,eAAA;AAChC,EAAA,MAAM,iBAAA,GAAoB,OAAA,CAAQ,OAAO,CAAA,IAAK,uBAAA;AAC9C,EAAA,MAAM,gCAAA,GACJ,uBAAA,IAA2B,OAAA,CAAQ,OAAO,CAAA;AAE5C,EAAA,uBACEA,IAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,4CAAA;AAAA,QACA,mCAAA;AAAA,QACA,iBAAiB,oBAAA,GAAuB,gBAAA;AAAA,QACxC;AAAA,OACF;AAAA,MAGA,QAAA,EAAA;AAAA,wBAAAA,IAAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,iCAAiC,CAAC,cAAA,IAAkB,SAAS,CAAA,EAC9E,QAAA,EAAA;AAAA,0BAAAH,GAAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,qEAAA;AAAA,cACV,KAAA,EAAO,EAAE,UAAA,EAAY,qBAAA,EAAsB;AAAA,cAC3C,wBAAA,EAAwB,IAAA;AAAA,cAEvB,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UACC,8BACCA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kGACZ,QAAA,EAAA,UAAA,EACH,CAAA;AAAA,UAED,4BACCA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,8CAA8C,QAAA,EAAA,QAAA,EAAS;AAAA,SAAA,EAExE,CAAA;AAAA,QAEC,iBAAA,oBACCG,IAAAA,CAAC,KAAA,EAAA,EAAI,WAAU,+EAAA,EACZ,QAAA,EAAA;AAAA,UAAA,uBAAA,mBACCH,GAAAA;AAAA,YAAC,6BAAA;AAAA,YAAA;AAAA,cACC,MAAA,EAAQ,iBAAiB,EAAC;AAAA,cAC1B,KAAA,EAAO,wBAAA;AAAA,cACP,mBAAA,EAAqB,mBAAA;AAAA,cACrB;AAAA;AAAA,WACF,GACE,IAAA;AAAA,UACH,mDACCA,GAAAA;AAAA,YAAC,SAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAY,UAAA;AAAA,cACZ,UAAA,EAAU,IAAA;AAAA,cACV,SAAA,EAAU;AAAA;AAAA,WACZ,GACE,IAAA;AAAA,UACH;AAAA,SAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ","file":"page-header.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Plus } from \"lucide-react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Badge } from \"./badge\"\n\n/** Maps to Shadcn Studio avatar demos (shape / ring / stack). Uses theme tokens only. */\nconst avatarRootVariants = cva(\n  \"group/avatar relative flex shrink-0 overflow-hidden select-none\",\n  {\n  variants: {\n    size: {\n      sm: \"size-6\",\n      default: \"size-8\",\n      lg: \"size-10\",\n    },\n    shape: {\n      circle: \"rounded-full\",\n      square: \"rounded-none\",\n      \"rounded-sm\": \"rounded-sm\",\n      \"rounded-md\": \"rounded-md\",\n      \"rounded-lg\": \"rounded-lg\",\n      \"rounded-xl\": \"rounded-xl\",\n    },\n    variant: {\n      default: \"\",\n      ring: \"ring-2 ring-ring\",\n      \"ring-offset\": \"ring-2 ring-ring ring-offset-2 ring-offset-background\",\n      group: \"ring-2 ring-background\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n    shape: \"circle\",\n    variant: \"default\",\n  },\n  }\n)\n\nconst AVATAR_INSET_AFTER: Record<NonNullable<VariantProps<typeof avatarRootVariants>[\"shape\"]>, string> = {\n  circle: \"after:rounded-full\",\n  square: \"after:rounded-none\",\n  \"rounded-sm\": \"after:rounded-sm\",\n  \"rounded-md\": \"after:rounded-md\",\n  \"rounded-lg\": \"after:rounded-lg\",\n  \"rounded-xl\": \"after:rounded-xl\",\n}\n\nconst avatarImageShape = cn(\n  \"aspect-square size-full object-cover\",\n  \"group-data-[shape=circle]/avatar:rounded-full\",\n  \"group-data-[shape=square]/avatar:rounded-none\",\n  \"group-data-[shape=rounded-sm]/avatar:rounded-sm\",\n  \"group-data-[shape=rounded-md]/avatar:rounded-md\",\n  \"group-data-[shape=rounded-lg]/avatar:rounded-lg\",\n  \"group-data-[shape=rounded-xl]/avatar:rounded-xl\"\n)\n\nconst avatarFallbackShape = cn(\n  \"flex size-full items-center justify-center bg-muted text-sm text-muted-foreground\",\n  \"group-data-[shape=circle]/avatar:rounded-full\",\n  \"group-data-[shape=square]/avatar:rounded-none\",\n  \"group-data-[shape=rounded-sm]/avatar:rounded-sm\",\n  \"group-data-[shape=rounded-md]/avatar:rounded-md\",\n  \"group-data-[shape=rounded-lg]/avatar:rounded-lg\",\n  \"group-data-[shape=rounded-xl]/avatar:rounded-xl\",\n  \"group-data-[size=sm]/avatar:text-xs\"\n)\n\ntype AvatarProps = React.ComponentProps<typeof AvatarPrimitive.Root> &\n  VariantProps<typeof avatarRootVariants> & {\n    /**\n     * Subtle inner hairline on the avatar edge (token `border-border`).\n     * Default **false** — full-bleed circle for photos/logos (Shadcn Studio–style profile look).\n     */\n    insetBorder?: boolean\n  }\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  shape = \"circle\",\n  variant = \"default\",\n  insetBorder = false,\n  ...props\n}: AvatarProps) {\n  const shapeKey = shape ?? \"circle\"\n  const insetClass =\n    insetBorder &&\n    cn(\n      \"after:pointer-events-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\",\n      AVATAR_INSET_AFTER[shapeKey]\n    )\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      data-shape={shape}\n      className={cn(avatarRootVariants({ size, shape, variant }), insetClass, className)}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  referrerPolicy = \"no-referrer\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      referrerPolicy={referrerPolicy}\n      className={cn(avatarImageShape, className)}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(avatarFallbackShape, className)}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * A row of avatars with an overflow counter — **never overlapping**.\n *\n * Overlapping face piles (Slack / GitHub style) have known UX problems in\n * dense product chrome: ring-on-background contrast is fragile in dark mode,\n * click targets stack, and screen readers announce ambiguous groupings.\n * `AvatarGroup` therefore renders children side-by-side with a small inline\n * gap. See `.cursor/rules/exxat-person-identity-display.mdc` (MUST NOT —\n * overlapping avatars) and the `PageHeader` collaboration variant which\n * uses the same gapped row.\n */\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex items-center gap-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n// ── Shadcn Studio–style compositions (tokens + a11y checklist: sr-only status, meaningful alt on image) ──\n\ntype AvatarShape = NonNullable<VariantProps<typeof avatarRootVariants>[\"shape\"]>\ntype AvatarVariant = NonNullable<VariantProps<typeof avatarRootVariants>[\"variant\"]>\ntype AvatarSize = NonNullable<VariantProps<typeof avatarRootVariants>[\"size\"]>\n\ntype AvatarInitialsProps = Omit<AvatarProps, \"children\"> & {\n  initials: string\n  /** When true, initials are hidden from accessibility tree (pair with visible name). Default true. */\n  decorative?: boolean\n  /** Extra classes on `AvatarFallback` (e.g. font weight). */\n  fallbackClassName?: string\n}\n\n/** Initials-only chip using `--avatar-initials-bg` / `--avatar-initials-fg` (Exxat tokens). */\nfunction AvatarInitials({\n  initials,\n  decorative = true,\n  fallbackClassName,\n  className,\n  ...avatarProps\n}: AvatarInitialsProps) {\n  return (\n    <Avatar className={className} {...avatarProps}>\n      <AvatarFallback\n        aria-hidden={decorative ? true : undefined}\n        className={cn(\n          \"border-0 bg-[var(--avatar-initials-bg)] font-semibold text-[var(--avatar-initials-fg)]\",\n          fallbackClassName\n        )}\n      >\n        {initials}\n      </AvatarFallback>\n    </Avatar>\n  )\n}\n\ntype AvatarStatusTone = \"online\" | \"busy\" | \"away\"\n\nconst avatarStatusDot: Record<AvatarStatusTone, string> = {\n  online: \"bg-emerald-600 dark:bg-emerald-400\",\n  busy: \"bg-destructive\",\n  away: \"bg-amber-600 dark:bg-amber-400\",\n}\n\n/** Presence dot (Studio avatars 7–9). Wraps a single `Avatar`. */\nfunction AvatarStatus({\n  children,\n  status,\n  label,\n  className,\n  position = \"bottom-end\",\n}: {\n  children: React.ReactNode\n  status: AvatarStatusTone\n  /** Announced to screen readers (e.g. \"Busy\"). */\n  label: string\n  className?: string\n  /** `bottom-end` matches `AvatarBadge`; `top-end` matches some Studio away demos. */\n  position?: \"bottom-end\" | \"top-end\"\n}) {\n  const pos =\n    position === \"top-end\"\n      ? \"-top-0.5 -end-0.5 bottom-auto start-auto\"\n      : \"-end-0.5 -bottom-0.5 top-auto start-auto\"\n  return (\n    <span className={cn(\"relative inline-flex w-fit shrink-0\", className)}>\n      {children}\n      <span\n        className={cn(\n          \"pointer-events-none absolute z-10 size-3 rounded-full border-2 border-background\",\n          pos,\n          avatarStatusDot[status]\n        )}\n        aria-hidden\n      />\n      <span className=\"sr-only\">{label}</span>\n    </span>\n  )\n}\n\n/** Numeric badge overlay (Studio avatar 11). */\nfunction AvatarNotificationCount({\n  children,\n  count,\n  className,\n  badgeClassName,\n}: {\n  children: React.ReactNode\n  count: number | string\n  className?: string\n  badgeClassName?: string\n}) {\n  return (\n    <span className={cn(\"relative inline-flex w-fit shrink-0\", className)}>\n      {children}\n      <Badge\n        className={cn(\n          \"absolute -top-2.5 -end-2.5 z-10 h-5 min-w-5 justify-center px-1 tabular-nums\",\n          badgeClassName\n        )}\n      >\n        {count}\n      </Badge>\n    </span>\n  )\n}\n\n/** Verified check overlay (Studio avatar 12) — primary token fill. */\nfunction AvatarVerified({\n  children,\n  label = \"Verified\",\n  className,\n}: {\n  children: React.ReactNode\n  label?: string\n  className?: string\n}) {\n  return (\n    <span className={cn(\"relative inline-flex w-fit shrink-0\", className)}>\n      {children}\n      <span className=\"pointer-events-none absolute -top-1.5 -end-1.5 z-10 inline-flex size-4 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm\">\n        <Check className=\"size-2.5\" strokeWidth={3} aria-hidden />\n        <span className=\"sr-only\">{label}</span>\n      </span>\n    </span>\n  )\n}\n\n/** Leo assistant mark — centralized; same icon treatment as Ask Leo sidebar. */\nfunction AvatarLeoAssistant({\n  className,\n  size = \"sm\",\n  ...props\n}: Omit<AvatarProps, \"children\" | \"shape\">) {\n  return (\n    <Avatar size={size} shape=\"circle\" insetBorder={false} className={className} {...props}>\n      <AvatarFallback className=\"bg-brand/15 p-0\">\n        <span className=\"sr-only\">Leo</span>\n        <i\n          className=\"fa-duotone fa-solid fa-star-christmas text-xs text-brand\"\n          aria-hidden=\"true\"\n        />\n      </AvatarFallback>\n    </Avatar>\n  )\n}\n\n/** “Add profile” affordance (Studio avatar 10). `onClick` on the button. */\nfunction AvatarPlusAction({\n  children,\n  actionLabel,\n  onClick,\n  className,\n  buttonClassName,\n}: {\n  children: React.ReactNode\n  actionLabel: string\n  onClick?: () => void\n  className?: string\n  buttonClassName?: string\n}) {\n  return (\n    <span className={cn(\"relative inline-flex w-fit shrink-0\", className)}>\n      {children}\n      <button\n        type=\"button\"\n        onClick={onClick}\n        className={cn(\n          \"focus-visible:ring-ring/50 absolute -end-1 -bottom-1 z-10 inline-flex size-7 cursor-pointer items-center justify-center rounded-full bg-background shadow-sm ring-1 ring-border focus-visible:ring-[3px] focus-visible:outline-none\",\n          buttonClassName\n        )}\n      >\n        <Plus className=\"size-4 text-muted-foreground\" aria-hidden />\n        <span className=\"sr-only\">{actionLabel}</span>\n      </button>\n    </span>\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n  AvatarInitials,\n  AvatarStatus,\n  AvatarNotificationCount,\n  AvatarVerified,\n  AvatarPlusAction,\n  AvatarLeoAssistant,\n  avatarRootVariants,\n}\nexport type {\n  AvatarProps,\n  AvatarInitialsProps,\n  AvatarShape,\n  AvatarVariant,\n  AvatarSize,\n  AvatarStatusTone,\n}\n","import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-input bg-background hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:bg-input/15 dark:hover:bg-input/25\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:hover:bg-interactive-hover-subtle\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5\",\n        xs: \"h-6 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 px-3 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pe-3.5 has-data-[icon=inline-start]:ps-3.5\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Button = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> &\n    VariantProps<typeof buttonVariants> & {\n      asChild?: boolean\n    }\n>(({ className, variant = \"default\", size = \"default\", asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n})\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return (\n    <TooltipPrimitive.Trigger\n      data-slot=\"tooltip-trigger\"\n      suppressHydrationWarning\n      className={cn(\"cursor-pointer\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n","\"use client\"\n\n/**\n * PageHeader — Full-width content area header.\n *\n * Sits at the top of a page's main content, BELOW the breadcrumb / topbar.\n * Uses Ivy Presto (Adobe Fonts) for the title via the `--font-heading`\n * CSS variable.\n *\n * **Variant `collaboration`** — optional access line + collaborator faces\n * (or **Add collaborator** when the roster is empty) ahead of the primary\n * `actions` slot. The full **Invite people** flow lives in the consuming\n * page's `actions` overflow menu — this primitive only renders the face row.\n *\n * WCAG 2.1 AA:\n *  - `<h1>` landmark — one per page (WCAG 1.3.1)\n *  - Sufficient colour contrast >= 4.5:1 on title + subtitle (SC 1.4.3)\n *  - Face row: `role=\"group\"` + aggregate `aria-label`; each face has a\n *    `Tooltip` name (SC 4.1.2)\n *\n * Promotion note: this file lived at `apps/web/components/page-header.tsx`\n * until 2026-05-20. It moved into `@exxatdesignux/ui` so other apps (and\n * future docs sites) can compose hub headers without duplicating the\n * collaboration variant, h1 styling, or face-row a11y wiring. The\n * `CollaboratorAccessRole` union is duplicated here as a narrow string\n * literal so the primitive stays free of `apps/web/lib/` couplings — the\n * authoritative role labels / icons / capability helpers continue to live\n * in `apps/web/lib/collaborator-access.ts`.\n */\n\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"./avatar\"\nimport { Button } from \"./button\"\nimport { Separator } from \"./separator\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"./tooltip\"\nimport { cn } from \"../../lib/utils\"\n\n/**\n * Library access role for shared hubs. Mirrors\n * `apps/web/lib/collaborator-access.ts > CollaboratorAccessRole` — kept\n * structurally identical so the apps/web type and this type are mutually\n * assignable wherever consumers pass collaborator rosters to `PageHeader`.\n */\nexport type PageHeaderCollaboratorAccessRole =\n  | \"owner\"\n  | \"editor\"\n  | \"commenter\"\n  | \"viewer\"\n\nexport type PageHeaderVariant = \"default\" | \"collaboration\"\n\nexport interface PageHeaderCollaborator {\n  id: string\n  name: string\n  imageUrl?: string | null\n  initials?: string\n  email?: string\n  access?: PageHeaderCollaboratorAccessRole\n  /** Org / directory role tags (e.g. Faculty, Program coordinator). */\n  roles?: string[]\n}\n\nexport interface PageHeaderProps {\n  /** Primary page title — rendered as `<h1>` in Ivy Presto serif. */\n  title: string\n  /** Short descriptor or date shown below the title (and below `accessInfo` when set). */\n  subtitle?: React.ReactNode\n  /** Layout preset — `collaboration` enables access line + face row ahead of `actions`. */\n  variant?: PageHeaderVariant\n  /**\n   * Role / access copy or badges — rendered between the title and subtitle\n   * when `variant=\"collaboration\"` (e.g. lock icon + \"Editors can modify\").\n   */\n  accessInfo?: React.ReactNode\n  /** People with access — shown as a horizontal row of faces when `variant=\"collaboration\"`. */\n  collaborators?: PageHeaderCollaborator[]\n  /** Max faces before a `+N` chip — default 3. */\n  collaboratorDisplayLimit?: number\n  /** Opens the invite collaborators sheet when a face, overflow chip, or empty-state CTA is activated. */\n  onCollaboratorsOpen?: () => void\n  /** Label for the empty-roster header control — default `\"Add collaborator\"`. */\n  addCollaboratorLabel?: string\n  /** Optional slot for right-aligned actions (buttons, selectors, etc.). */\n  actions?: React.ReactNode\n  /** Extra className for the outer wrapper. */\n  className?: string\n  /** When false, the title + subtitle are visually hidden (actions remain). */\n  showTitleBlock?: boolean\n}\n\nfunction PageHeaderCollaborationAccess({\n  people,\n  limit,\n  onOpenCollaborators,\n  addCollaboratorLabel,\n}: {\n  people: PageHeaderCollaborator[]\n  limit: number\n  onOpenCollaborators?: () => void\n  addCollaboratorLabel: string\n}) {\n  if (people.length === 0) {\n    return (\n      <div\n        role=\"group\"\n        aria-label=\"People with access\"\n        className=\"flex shrink-0 items-center\"\n      >\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"lg\"\n          onClick={onOpenCollaborators}\n          disabled={!onOpenCollaborators}\n        >\n          <i className=\"fa-light fa-user-plus\" aria-hidden=\"true\" />\n          {addCollaboratorLabel}\n        </Button>\n      </div>\n    )\n  }\n\n  const visible = people.slice(0, limit)\n  const overflow = Math.max(0, people.length - visible.length)\n  const names = people.map((p) => p.name).join(\", \")\n\n  return (\n    <div\n      role=\"group\"\n      aria-label={names ? `People with access: ${names}` : \"People with access\"}\n      className=\"flex shrink-0 items-center gap-2 sm:gap-2.5\"\n    >\n      <div className=\"flex shrink-0 items-center gap-1.5\">\n        {visible.map((c) => (\n          <Tooltip key={c.id}>\n            <TooltipTrigger asChild>\n              <button\n                type=\"button\"\n                className=\"relative shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n                aria-label={`Open collaborators — ${c.name}`}\n                onClick={onOpenCollaborators}\n                disabled={!onOpenCollaborators}\n              >\n                <Avatar size=\"sm\" shape=\"circle\" className=\"pointer-events-none\">\n                  {c.imageUrl ? (\n                    <AvatarImage src={c.imageUrl} alt=\"\" referrerPolicy=\"no-referrer\" />\n                  ) : null}\n                  <AvatarFallback className=\"text-xs font-semibold\">\n                    {(c.initials ?? c.name.slice(0, 2)).toUpperCase()}\n                  </AvatarFallback>\n                </Avatar>\n              </button>\n            </TooltipTrigger>\n            <TooltipContent side=\"bottom\">{c.name}</TooltipContent>\n          </Tooltip>\n        ))}\n        {overflow > 0 && (\n          <button\n            type=\"button\"\n            className=\"flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-[11px] font-semibold tabular-nums text-muted-foreground ring-1 ring-border/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n            aria-label={`Open collaborators — ${overflow} more people with access`}\n            onClick={onOpenCollaborators}\n            disabled={!onOpenCollaborators}\n          >\n            +{overflow}\n          </button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport function PageHeader({\n  title,\n  subtitle,\n  variant = \"default\",\n  accessInfo,\n  collaborators,\n  collaboratorDisplayLimit = 3,\n  onCollaboratorsOpen,\n  addCollaboratorLabel = \"Add collaborator\",\n  actions,\n  className,\n  showTitleBlock = true,\n}: PageHeaderProps) {\n  const isCollaboration = variant === \"collaboration\"\n  const showAccess = Boolean(isCollaboration && accessInfo)\n  const showCollaborationAccess = isCollaboration\n  const showActionsColumn = Boolean(actions) || showCollaborationAccess\n  const showCollaboratorActionsSeparator =\n    showCollaborationAccess && Boolean(actions)\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col gap-1 px-4 pt-2 pb-4 lg:px-6\",\n        \"sm:flex-row sm:items-end sm:gap-4\",\n        showTitleBlock ? \"sm:justify-between\" : \"sm:justify-end\",\n        className,\n      )}\n    >\n      {/* Title block — hidden visually when showTitleBlock is false; keep h1 for a11y. */}\n      <div className={cn(\"flex min-w-0 flex-col gap-0.5\", !showTitleBlock && \"sr-only\")}>\n        <h1\n          className=\"text-2xl font-semibold tracking-tight leading-tight text-foreground\"\n          style={{ fontFamily: \"var(--font-heading)\" }}\n          suppressHydrationWarning\n        >\n          {title}\n        </h1>\n        {showAccess && (\n          <div className=\"flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-snug text-muted-foreground\">\n            {accessInfo}\n          </div>\n        )}\n        {subtitle && (\n          <p className=\"text-sm text-muted-foreground leading-none\">{subtitle}</p>\n        )}\n      </div>\n\n      {showActionsColumn && (\n        <div className=\"flex flex-wrap items-center gap-2 sm:gap-3 shrink-0 sm:ms-auto sm:justify-end\">\n          {showCollaborationAccess ? (\n            <PageHeaderCollaborationAccess\n              people={collaborators ?? []}\n              limit={collaboratorDisplayLimit}\n              onOpenCollaborators={onCollaboratorsOpen}\n              addCollaboratorLabel={addCollaboratorLabel}\n            />\n          ) : null}\n          {showCollaboratorActionsSeparator ? (\n            <Separator\n              orientation=\"vertical\"\n              decorative\n              className=\"h-8 shrink-0\"\n            />\n          ) : null}\n          {actions}\n        </div>\n      )}\n    </div>\n  )\n}\n"]}

package/dist/components/ui/payment-card-fields.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { CardImages } from 'react-payment-inputs/images';
+export { usePaymentInputs } from 'react-payment-inputs';
+
+/** Stacked number + expiry/CVC (Studio 06). Single hook — do not split across separate roots. */
+declare function PaymentCardFieldsGroup({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { PaymentCardFieldsGroup };

package/dist/components/ui/payment-card-fields.js

@@ -0,0 +1,80 @@
+"use client";
+import * as React from 'react';
+import { CreditCard } from 'lucide-react';
+import { usePaymentInputs } from 'react-payment-inputs';
+export { usePaymentInputs } from 'react-payment-inputs';
+import images from 'react-payment-inputs/images';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Input = React.forwardRef(
+  function Input2({ className, type, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type,
+        "data-slot": "input",
+        className: cn(
+          "h-8 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+function PaymentCardFieldsGroup({ className }) {
+  const id = React.useId();
+  const { meta, getCardNumberProps, getExpiryDateProps, getCVCProps, getCardImageProps } = usePaymentInputs();
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full max-w-xs space-y-0", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative focus-within:z-1", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ...getCardNumberProps(),
+          id: `card-number-${id}`,
+          className: "peer rounded-b-none pe-11 shadow-none"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 peer-disabled:opacity-50", children: [
+        meta.cardType ? /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-6 overflow-hidden",
+            ...getCardImageProps({
+              images
+            })
+          }
+        ) : /* @__PURE__ */ jsx(CreditCard, { className: "size-4", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Card network" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "-mt-px flex", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 focus-within:z-1", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          ...getExpiryDateProps(),
+          id: `card-expiry-${id}`,
+          className: "rounded-t-none rounded-e-none shadow-none"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "-ms-px min-w-0 flex-1 focus-within:z-1", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          ...getCVCProps(),
+          id: `card-cvc-${id}`,
+          className: "rounded-t-none rounded-s-none shadow-none"
+        }
+      ) })
+    ] })
+  ] });
+}
+
+export { PaymentCardFieldsGroup };
+//# sourceMappingURL=payment-card-fields.js.map
+//# sourceMappingURL=payment-card-fields.js.map

package/dist/components/ui/payment-card-fields.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/input.tsx","../../../src/components/ui/payment-card-fields.tsx"],"names":["Input","React2","jsx"],"mappings":";;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,KAAA,GAAc,KAAA,CAAA,UAAA;AAAA,EAClB,SAASA,OAAM,EAAE,SAAA,EAAW,MAAM,GAAG,KAAA,IAAS,GAAA,EAAK;AACjD,IAAA,uBACE,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA;AAAA,QACA,WAAA,EAAU,OAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,4nBAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF,CAAA;ACAO,SAAS,sBAAA,CAAuB,EAAE,SAAA,EAAU,EAA2B;AAC5E,EAAA,MAAM,KAAWC,KAAA,CAAA,KAAA,EAAM;AACvB,EAAA,MAAM,EAAE,IAAA,EAAM,kBAAA,EAAoB,oBAAoB,WAAA,EAAa,iBAAA,KACjE,gBAAA,EAAiB;AAEnB,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,2BAAA,EAA6B,SAAS,CAAA,EACvD,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2BAAA,EACb,QAAA,EAAA;AAAA,sBAAAC,GAAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACE,GAAG,kBAAA,EAAmB;AAAA,UACvB,EAAA,EAAI,eAAe,EAAE,CAAA,CAAA;AAAA,UACrB,SAAA,EAAU;AAAA;AAAA,OACZ;AAAA,sBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mIAAA,EACZ,QAAA,EAAA;AAAA,QAAA,IAAA,CAAK,2BACJA,GAAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,qBAAA;AAAA,YACT,GAAG,iBAAA,CAAkB;AAAA,cACpB;AAAA,aACD;AAAA;AAAA,4BAGHA,GAAAA,CAAC,cAAW,SAAA,EAAU,QAAA,EAAS,eAAW,IAAA,EAAC,CAAA;AAAA,wBAE7CA,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,WAAU,QAAA,EAAA,cAAA,EAAY;AAAA,OAAA,EACxC;AAAA,KAAA,EACF,CAAA;AAAA,oBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACb,QAAA,EAAA;AAAA,sBAAAA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCAAA,EACb,QAAA,kBAAAA,GAAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACE,GAAG,kBAAA,EAAmB;AAAA,UACvB,EAAA,EAAI,eAAe,EAAE,CAAA,CAAA;AAAA,UACrB,SAAA,EAAU;AAAA;AAAA,OACZ,EACF,CAAA;AAAA,sBACAA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0CACb,QAAA,kBAAAA,GAAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACE,GAAG,WAAA,EAAY;AAAA,UAChB,EAAA,EAAI,YAAY,EAAE,CAAA,CAAA;AAAA,UAClB,SAAA,EAAU;AAAA;AAAA,OACZ,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ","file":"payment-card-fields.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n  function Input({ className, type, ...props }, ref) {\n    return (\n      <input\n        ref={ref}\n        type={type}\n        data-slot=\"input\"\n        className={cn(\n          \"h-8 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n          className\n        )}\n        {...props}\n      />\n    )\n  },\n)\n\nexport { Input }\n","\"use client\"\n\n/**\n * Credit card inputs — matches Shadcn Studio input-mask 03–06 (`react-payment-inputs` + `Input`).\n * One `usePaymentInputs()` instance drives number + expiry + CVC; use this group (or `usePaymentInputs` yourself in a parent).\n */\n\nimport * as React from \"react\"\nimport { CreditCard } from \"lucide-react\"\nimport { usePaymentInputs } from \"react-payment-inputs\"\nimport images, { type CardImages } from \"react-payment-inputs/images\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Input } from \"./input\"\n\nexport { usePaymentInputs } from \"react-payment-inputs\"\nexport type { CardImages }\n\n/** Stacked number + expiry/CVC (Studio 06). Single hook — do not split across separate roots. */\nexport function PaymentCardFieldsGroup({ className }: { className?: string }) {\n  const id = React.useId()\n  const { meta, getCardNumberProps, getExpiryDateProps, getCVCProps, getCardImageProps } =\n    usePaymentInputs()\n\n  return (\n    <div className={cn(\"w-full max-w-xs space-y-0\", className)}>\n      <div className=\"relative focus-within:z-1\">\n        <Input\n          {...getCardNumberProps()}\n          id={`card-number-${id}`}\n          className=\"peer rounded-b-none pe-11 shadow-none\"\n        />\n        <div className=\"text-muted-foreground pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 peer-disabled:opacity-50\">\n          {meta.cardType ? (\n            <svg\n              className=\"w-6 overflow-hidden\"\n              {...getCardImageProps({\n                images: images as unknown as CardImages,\n              })}\n            />\n          ) : (\n            <CreditCard className=\"size-4\" aria-hidden />\n          )}\n          <span className=\"sr-only\">Card network</span>\n        </div>\n      </div>\n      <div className=\"-mt-px flex\">\n        <div className=\"min-w-0 flex-1 focus-within:z-1\">\n          <Input\n            {...getExpiryDateProps()}\n            id={`card-expiry-${id}`}\n            className=\"rounded-t-none rounded-e-none shadow-none\"\n          />\n        </div>\n        <div className=\"-ms-px min-w-0 flex-1 focus-within:z-1\">\n          <Input\n            {...getCVCProps()}\n            id={`card-cvc-${id}`}\n            className=\"rounded-t-none rounded-s-none shadow-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/components/ui/popover.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Popover as Popover$1 } from 'radix-ui';
+
+declare function Popover({ ...props }: React.ComponentProps<typeof Popover$1.Root>): react_jsx_runtime.JSX.Element;
+declare function PopoverTrigger({ className, ...props }: React.ComponentProps<typeof Popover$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof Popover$1.Anchor>): react_jsx_runtime.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof Popover$1.Content>): react_jsx_runtime.JSX.Element;
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/dist/components/ui/popover.js

@@ -0,0 +1,47 @@
+"use client";
+import { Popover as Popover$1 } from 'radix-ui';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Root, { ...props });
+}
+function PopoverTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Trigger, { className: cn("cursor-pointer", className), ...props });
+}
+function PopoverAnchor({ ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Anchor, { ...props });
+}
+function PopoverContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+    Popover$1.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "z-50 rounded-lg border border-border bg-popover shadow-md outline-none",
+        "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=top]:slide-in-from-bottom-2",
+        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
+//# sourceMappingURL=popover.js.map
+//# sourceMappingURL=popover.js.map

package/dist/components/ui/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/popover.tsx"],"names":["PopoverPrimitive"],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACCA,SAAS,OAAA,CAAQ,EAAE,GAAG,KAAA,EAAM,EAAuD;AACjF,EAAA,uBAAO,GAAA,CAACA,SAAA,CAAiB,IAAA,EAAjB,EAAuB,GAAG,KAAA,EAAO,CAAA;AAC3C;AAEA,SAAS,cAAA,CAAe,EAAE,SAAA,EAAW,GAAG,OAAM,EAA0D;AACtG,EAAA,uBAAO,GAAA,CAACA,SAAA,CAAiB,OAAA,EAAjB,EAAyB,SAAA,EAAW,GAAG,gBAAA,EAAkB,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC1F;AAEA,SAAS,aAAA,CAAc,EAAE,GAAG,KAAA,EAAM,EAAyD;AACzF,EAAA,uBAAO,GAAA,CAACA,SAAA,CAAiB,MAAA,EAAjB,EAAyB,GAAG,KAAA,EAAO,CAAA;AAC7C;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,KAAA,GAAQ,OAAA;AAAA,EACR,UAAA,GAAa,CAAA;AAAA,EACb,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,uBACE,GAAA,CAACA,SAAA,CAAiB,MAAA,EAAjB,EACC,QAAA,kBAAA,GAAA;AAAA,IAACA,SAAA,CAAiB,OAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,KAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,wEAAA;AAAA,QACA,8DAAA;AAAA,QACA,4DAAA;AAAA,QACA,8DAAA;AAAA,QACA,+EAAA;AAAA,QACA,+EAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ","file":"popover.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\nimport { cn } from \"../../lib/utils\"\n\nfunction Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root {...props} />\n}\n\nfunction PopoverTrigger({ className, ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger className={cn(\"cursor-pointer\", className)} {...props} />\n}\n\nfunction PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 rounded-lg border border-border bg-popover shadow-md outline-none\",\n          \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n          \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n          \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n          \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          \"data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }\n"]}