@etus/ui 0.4.0-beta.1 → 0.4.0-beta.3

package/dist/chunk-5ZEYTBTU.js

@@ -0,0 +1,288 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { XCircle, Clock, Loader2, Timer, ArrowUpCircle, Edit3, AlertCircle, CheckCircle2 } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var approvalStatusVariants = cva(
+  "inline-flex items-center font-medium transition-colors duration-150",
+  {
+    variants: {
+      size: {
+        sm: "h-5 text-xs gap-1 px-2 py-0.5",
+        md: "h-6 text-sm gap-1.5 px-2.5 py-0.5",
+        lg: "h-8 text-base gap-2 px-3 py-1"
+      },
+      variant: {
+        default: "rounded-full",
+        compact: "rounded-full",
+        detailed: "rounded-lg flex-col items-start gap-1 h-auto px-3 py-2",
+        timeline: "rounded-none flex-row items-start gap-2 h-auto px-0 py-0 bg-transparent"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default"
+    }
+  }
+);
+var statusColorStyles = {
+  pending: "bg-[color:var(--status-pending-bg)] text-[color:var(--status-pending-text)]",
+  in_review: "bg-[color:var(--status-in-review-bg)] text-[color:var(--status-in-review-text)]",
+  approved: "bg-[color:var(--status-approved-bg)] text-[color:var(--status-approved-text)]",
+  rejected: "bg-[color:var(--status-rejected-bg)] text-[color:var(--status-rejected-text)]",
+  changes_requested: "bg-[color:var(--status-changes-requested-bg)] text-[color:var(--status-changes-requested-text)]",
+  escalated: "bg-[color:var(--status-escalated-bg)] text-[color:var(--status-escalated-text)]",
+  expired: "bg-[color:var(--status-expired-bg)] text-[color:var(--status-expired-text)]",
+  cancelled: "bg-[color:var(--status-cancelled-bg)] text-[color:var(--status-cancelled-text)]"
+};
+var timelineDotStyles = {
+  pending: "bg-[color:var(--status-pending-dot)]",
+  in_review: "bg-[color:var(--status-in-review-dot)]",
+  approved: "bg-[color:var(--status-approved-dot)]",
+  rejected: "bg-[color:var(--status-rejected-dot)]",
+  changes_requested: "bg-[color:var(--status-changes-requested-dot)]",
+  escalated: "bg-[color:var(--status-escalated-dot)]",
+  expired: "bg-[color:var(--status-expired-dot)]",
+  cancelled: "bg-[color:var(--status-cancelled-dot)]"
+};
+var animationStyles = "animate-pulse";
+var statusConfig = {
+  approved: {
+    icon: CheckCircle2,
+    label: "Aprovado",
+    labelEn: "Approved"
+  },
+  cancelled: {
+    icon: AlertCircle,
+    label: "Cancelado",
+    labelEn: "Cancelled"
+  },
+  changes_requested: {
+    icon: Edit3,
+    label: "Altera\xE7\xF5es Solicitadas",
+    labelEn: "Changes Requested"
+  },
+  escalated: {
+    icon: ArrowUpCircle,
+    label: "Escalado",
+    labelEn: "Escalated"
+  },
+  expired: {
+    icon: Timer,
+    label: "Expirado",
+    labelEn: "Expired"
+  },
+  in_review: {
+    icon: Loader2,
+    label: "Em An\xE1lise",
+    labelEn: "In Review"
+  },
+  pending: {
+    icon: Clock,
+    label: "Pendente",
+    labelEn: "Pending"
+  },
+  rejected: {
+    icon: XCircle,
+    label: "Rejeitado",
+    labelEn: "Rejected"
+  }
+};
+function formatTimestamp(date) {
+  return date.toLocaleDateString("pt-BR", {
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    month: "short",
+    year: "numeric"
+  });
+}
+function getInitials(name) {
+  return name.split(" ").map((word) => word[0]).join("").toUpperCase().slice(0, 2);
+}
+var iconSizeMap = {
+  lg: "size-4",
+  md: "size-3.5",
+  sm: "size-3"
+};
+function ApprovalStatus({
+  animated = false,
+  approver,
+  className,
+  comment,
+  showIcon = true,
+  showLabel = true,
+  size = "md",
+  status,
+  timestamp,
+  variant = "default",
+  ...props
+}) {
+  const config = statusConfig[status];
+  const Icon = config.icon;
+  const iconSize = iconSizeMap[size];
+  const ariaLabel = [
+    `Status: ${config.label}`,
+    approver ? `por ${approver.name}` : "",
+    timestamp ? `em ${formatTimestamp(timestamp)}` : ""
+  ].filter(Boolean).join(" ");
+  const shouldAnimate = animated && (status === "pending" || status === "in_review");
+  if (variant === "compact") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          approvalStatusVariants({ size, variant }),
+          statusColorStyles[status],
+          shouldAnimate && animationStyles,
+          "justify-center",
+          className
+        ),
+        "aria-label": ariaLabel,
+        "data-slot": "approval-status",
+        role: "status",
+        title: config.label,
+        ...props,
+        children: showIcon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: iconSize })
+      }
+    );
+  }
+  if (variant === "timeline") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          approvalStatusVariants({ size, variant }),
+          className
+        ),
+        "aria-label": ariaLabel,
+        "aria-live": "polite",
+        "data-slot": "approval-status",
+        role: "status",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "mt-1 size-3 shrink-0 rounded-full",
+                timelineDotStyles[status],
+                shouldAnimate && animationStyles
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              showIcon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: cn(iconSize, "text-muted-foreground") }),
+              showLabel && /* @__PURE__ */ jsx("span", { className: "font-medium", children: config.label })
+            ] }),
+            approver && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("span", { children: approver.name }),
+              approver.role && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50", children: "\xB7" }),
+                /* @__PURE__ */ jsx("span", { children: approver.role })
+              ] })
+            ] }),
+            timestamp && /* @__PURE__ */ jsx(
+              "time",
+              {
+                className: "text-xs text-muted-foreground",
+                dateTime: timestamp.toISOString(),
+                children: formatTimestamp(timestamp)
+              }
+            ),
+            comment && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-sm text-muted-foreground italic", children: [
+              '"',
+              comment,
+              '"'
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  if (variant === "detailed") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          approvalStatusVariants({ size, variant }),
+          "bg-card border rounded-lg",
+          className
+        ),
+        "aria-label": ariaLabel,
+        "aria-live": "polite",
+        "data-slot": "approval-status",
+        role: "status",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 w-full", children: /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
+                statusColorStyles[status],
+                shouldAnimate && animationStyles
+              ),
+              children: [
+                showIcon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "size-3" }),
+                showLabel && config.label
+              ]
+            }
+          ) }),
+          approver && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+            /* @__PURE__ */ jsx("div", { className: "size-6 shrink-0 rounded-full bg-muted flex items-center justify-center text-xs font-medium overflow-hidden", children: approver.avatar ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                alt: approver.name,
+                className: "size-full object-cover",
+                src: approver.avatar
+              }
+            ) : /* @__PURE__ */ jsx("span", { children: getInitials(approver.name) }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: approver.name }),
+              approver.role && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground truncate", children: approver.role })
+            ] })
+          ] }),
+          timestamp && /* @__PURE__ */ jsx(
+            "time",
+            {
+              className: "text-xs text-muted-foreground",
+              dateTime: timestamp.toISOString(),
+              children: formatTimestamp(timestamp)
+            }
+          ),
+          comment && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground italic border-l-2 border-muted pl-2", children: [
+            '"',
+            comment,
+            '"'
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        approvalStatusVariants({ size, variant }),
+        statusColorStyles[status],
+        shouldAnimate && animationStyles,
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-live": "polite",
+      "data-slot": "approval-status",
+      role: "status",
+      ...props,
+      children: [
+        showIcon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: iconSize }),
+        showLabel && /* @__PURE__ */ jsx("span", { children: config.label })
+      ]
+    }
+  );
+}
+
+export { ApprovalStatus, approvalStatusVariants, statusConfig };
+//# sourceMappingURL=chunk-5ZEYTBTU.js.map
+//# sourceMappingURL=chunk-5ZEYTBTU.js.map

package/dist/chunk-5ZEYTBTU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/workflow/ApprovalStatus/ApprovalStatus.variants.ts","../src/components/workflow/ApprovalStatus/ApprovalStatus.tsx"],"names":[],"mappings":";;;;;AAKO,IAAM,sBAAA,GAAyB,GAAA;AAAA,EACpC,qEAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,+BAAA;AAAA,QACJ,EAAA,EAAI,mCAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,cAAA;AAAA,QACT,OAAA,EAAS,cAAA;AAAA,QACT,QAAA,EAAU,wDAAA;AAAA,QACV,QAAA,EAAU;AAAA;AACZ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,IAAA;AAAA,MACN,OAAA,EAAS;AAAA;AACX;AAEJ;AAKO,IAAM,iBAAA,GAA4C;AAAA,EACvD,OAAA,EAAS,6EAAA;AAAA,EACT,SAAA,EAAW,iFAAA;AAAA,EACX,QAAA,EAAU,+EAAA;AAAA,EACV,QAAA,EAAU,+EAAA;AAAA,EACV,iBAAA,EAAmB,iGAAA;AAAA,EACnB,SAAA,EAAW,iFAAA;AAAA,EACX,OAAA,EAAS,6EAAA;AAAA,EACT,SAAA,EAAW;AACb,CAAA;AAKO,IAAM,iBAAA,GAA4C;AAAA,EACvD,OAAA,EAAS,sCAAA;AAAA,EACT,SAAA,EAAW,wCAAA;AAAA,EACX,QAAA,EAAU,uCAAA;AAAA,EACV,QAAA,EAAU,uCAAA;AAAA,EACV,iBAAA,EAAmB,gDAAA;AAAA,EACnB,SAAA,EAAW,wCAAA;AAAA,EACX,OAAA,EAAS,sCAAA;AAAA,EACT,SAAA,EAAW;AACb,CAAA;AAKO,IAAM,eAAA,GAAkB,eAAA;AC9B/B,IAAM,YAAA,GAGF;AAAA,EACF,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,YAAA;AAAA,IACN,KAAA,EAAO,UAAA;AAAA,IACP,OAAA,EAAS;AAAA,GACX;AAAA,EACA,SAAA,EAAW;AAAA,IACT,IAAA,EAAM,WAAA;AAAA,IACN,KAAA,EAAO,WAAA;AAAA,IACP,OAAA,EAAS;AAAA,GACX;AAAA,EACA,iBAAA,EAAmB;AAAA,IACjB,IAAA,EAAM,KAAA;AAAA,IACN,KAAA,EAAO,8BAAA;AAAA,IACP,OAAA,EAAS;AAAA,GACX;AAAA,EACA,SAAA,EAAW;AAAA,IACT,IAAA,EAAM,aAAA;AAAA,IACN,KAAA,EAAO,UAAA;AAAA,IACP,OAAA,EAAS;AAAA,GACX;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,KAAA;AAAA,IACN,KAAA,EAAO,UAAA;AAAA,IACP,OAAA,EAAS;AAAA,GACX;AAAA,EACA,SAAA,EAAW;AAAA,IACT,IAAA,EAAM,OAAA;AAAA,IACN,KAAA,EAAO,eAAA;AAAA,IACP,OAAA,EAAS;AAAA,GACX;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,KAAA;AAAA,IACN,KAAA,EAAO,UAAA;AAAA,IACP,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,OAAA;AAAA,IACN,KAAA,EAAO,WAAA;AAAA,IACP,OAAA,EAAS;AAAA;AAEb;AAKA,SAAS,gBAAgB,IAAA,EAAoB;AAC3C,EAAA,OAAO,IAAA,CAAK,mBAAmB,OAAA,EAAS;AAAA,IACtC,GAAA,EAAK,SAAA;AAAA,IACL,IAAA,EAAM,SAAA;AAAA,IACN,MAAA,EAAQ,SAAA;AAAA,IACR,KAAA,EAAO,OAAA;AAAA,IACP,IAAA,EAAM;AAAA,GACP,CAAA;AACH;AAKA,SAAS,YAAY,IAAA,EAAsB;AACzC,EAAA,OAAO,KACJ,KAAA,CAAM,GAAG,EACT,GAAA,CAAI,CAAC,SAAS,IAAA,CAAK,CAAC,CAAC,CAAA,CACrB,KAAK,EAAE,CAAA,CACP,aAAY,CACZ,KAAA,CAAM,GAAG,CAAC,CAAA;AACf;AAKA,IAAM,WAAA,GAAkD;AAAA,EACtD,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI,UAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAiBA,SAAS,cAAA,CAAe;AAAA,EACtB,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA,GAAW,IAAA;AAAA,EACX,SAAA,GAAY,IAAA;AAAA,EACZ,IAAA,GAAO,IAAA;AAAA,EACP,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,GAAG;AACL,CAAA,EAAwB;AACtB,EAAA,MAAM,MAAA,GAAS,aAAa,MAAM,CAAA;AAClC,EAAA,MAAM,OAAO,MAAA,CAAO,IAAA;AACpB,EAAA,MAAM,QAAA,GAAW,YAAY,IAAI,CAAA;AAGjC,EAAA,MAAM,SAAA,GAAY;AAAA,IAChB,CAAA,QAAA,EAAW,OAAO,KAAK,CAAA,CAAA;AAAA,IACvB,QAAA,GAAW,CAAA,IAAA,EAAO,QAAA,CAAS,IAAI,CAAA,CAAA,GAAK,EAAA;AAAA,IACpC,SAAA,GAAY,CAAA,GAAA,EAAM,eAAA,CAAgB,SAAS,CAAC,CAAA,CAAA,GAAK;AAAA,GACnD,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAGX,EAAA,MAAM,aAAA,GAAgB,QAAA,KAAa,MAAA,KAAW,SAAA,IAAa,MAAA,KAAW,WAAA,CAAA;AAGtE,EAAA,IAAI,YAAY,SAAA,EAAW;AACzB,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,sBAAA,CAAuB,EAAE,IAAA,EAAM,OAAA,EAAS,CAAA;AAAA,UACxC,kBAAkB,MAAM,CAAA;AAAA,UACxB,aAAA,IAAiB,eAAA;AAAA,UACjB,gBAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,YAAA,EAAY,SAAA;AAAA,QACZ,WAAA,EAAU,iBAAA;AAAA,QACV,IAAA,EAAK,QAAA;AAAA,QACL,OAAO,MAAA,CAAO,KAAA;AAAA,QACb,GAAG,KAAA;AAAA,QAEH,sCAAY,GAAA,CAAC,IAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,WAAW,QAAA,EAAU;AAAA;AAAA,KAC7D;AAAA,EAEJ;AAGA,EAAA,IAAI,YAAY,UAAA,EAAY;AAC1B,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,sBAAA,CAAuB,EAAE,IAAA,EAAM,OAAA,EAAS,CAAA;AAAA,UACxC;AAAA,SACF;AAAA,QACA,YAAA,EAAY,SAAA;AAAA,QACZ,WAAA,EAAU,QAAA;AAAA,QACV,WAAA,EAAU,iBAAA;AAAA,QACV,IAAA,EAAK,QAAA;AAAA,QACJ,GAAG,KAAA;AAAA,QAGJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,mCAAA;AAAA,gBACA,kBAAkB,MAAM,CAAA;AAAA,gBACxB,aAAA,IAAiB;AAAA;AACnB;AAAA,WACF;AAAA,0BAGA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBAAA,EAEb,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2BAAA,EACZ,QAAA,EAAA;AAAA,cAAA,QAAA,oBACC,GAAA,CAAC,QAAK,aAAA,EAAY,MAAA,EAAO,WAAW,EAAA,CAAG,QAAA,EAAU,uBAAuB,CAAA,EAAG,CAAA;AAAA,cAE5E,6BACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAA,EAAe,iBAAO,KAAA,EAAM;AAAA,aAAA,EAEhD,CAAA;AAAA,YAGC,QAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yDAAA,EACb,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,MAAA,EAAA,EAAM,mBAAS,IAAA,EAAK,CAAA;AAAA,cACpB,QAAA,CAAS,wBACR,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0BAAA,EAA2B,QAAA,EAAA,MAAA,EAAC,CAAA;AAAA,gCAC5C,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,QAAA,CAAS,IAAA,EAAK;AAAA,eAAA,EACvB;AAAA,aAAA,EAEJ,CAAA;AAAA,YAID,SAAA,oBACC,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAU,+BAAA;AAAA,gBACV,QAAA,EAAU,UAAU,WAAA,EAAY;AAAA,gBAE/B,0BAAgB,SAAS;AAAA;AAAA,aAC5B;AAAA,YAID,OAAA,oBACC,IAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,2CAAA,EAA4C,QAAA,EAAA;AAAA,cAAA,GAAA;AAAA,cACrD,OAAA;AAAA,cAAQ;AAAA,aAAA,EACZ;AAAA,WAAA,EAEJ;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AAGA,EAAA,IAAI,YAAY,UAAA,EAAY;AAC1B,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,sBAAA,CAAuB,EAAE,IAAA,EAAM,OAAA,EAAS,CAAA;AAAA,UACxC,2BAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,YAAA,EAAY,SAAA;AAAA,QACZ,WAAA,EAAU,QAAA;AAAA,QACV,WAAA,EAAU,iBAAA;AAAA,QACV,IAAA,EAAK,QAAA;AAAA,QACJ,GAAG,KAAA;AAAA,QAGJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kCAAA,EACb,QAAA,kBAAA,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,6EAAA;AAAA,gBACA,kBAAkB,MAAM,CAAA;AAAA,gBACxB,aAAA,IAAiB;AAAA,eACnB;AAAA,cAEC,QAAA,EAAA;AAAA,gBAAA,QAAA,oBAAY,GAAA,CAAC,IAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,WAAU,QAAA,EAAS,CAAA;AAAA,gBACxD,aAAa,MAAA,CAAO;AAAA;AAAA;AAAA,WACvB,EACF,CAAA;AAAA,UAGC,QAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gCAAA,EAEb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4GAAA,EACZ,QAAA,EAAA,QAAA,CAAS,MAAA,mBACR,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,KAAK,QAAA,CAAS,IAAA;AAAA,gBACd,SAAA,EAAU,wBAAA;AAAA,gBACV,KAAK,QAAA,CAAS;AAAA;AAAA,gCAGhB,GAAA,CAAC,MAAA,EAAA,EAAM,sBAAY,QAAA,CAAS,IAAI,GAAE,CAAA,EAEtC,CAAA;AAAA,4BAEA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBAAA,EACb,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,8BAAA,EAAgC,QAAA,EAAA,QAAA,CAAS,IAAA,EAAK,CAAA;AAAA,cAC7D,SAAS,IAAA,oBACR,GAAA,CAAC,UAAK,SAAA,EAAU,wCAAA,EACb,mBAAS,IAAA,EACZ;AAAA,aAAA,EAEJ;AAAA,WAAA,EACF,CAAA;AAAA,UAID,SAAA,oBACC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,+BAAA;AAAA,cACV,QAAA,EAAU,UAAU,WAAA,EAAY;AAAA,cAE/B,0BAAgB,SAAS;AAAA;AAAA,WAC5B;AAAA,UAID,OAAA,oBACC,IAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,mEAAA,EAAoE,QAAA,EAAA;AAAA,YAAA,GAAA;AAAA,YAC7E,OAAA;AAAA,YAAQ;AAAA,WAAA,EACZ;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AAGA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,sBAAA,CAAuB,EAAE,IAAA,EAAM,OAAA,EAAS,CAAA;AAAA,QACxC,kBAAkB,MAAM,CAAA;AAAA,QACxB,aAAA,IAAiB,eAAA;AAAA,QACjB;AAAA,OACF;AAAA,MACA,YAAA,EAAY,SAAA;AAAA,MACZ,WAAA,EAAU,QAAA;AAAA,MACV,WAAA,EAAU,iBAAA;AAAA,MACV,IAAA,EAAK,QAAA;AAAA,MACJ,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA,oBAAY,GAAA,CAAC,IAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,WAAW,QAAA,EAAU,CAAA;AAAA,QAC1D,SAAA,oBAAa,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,MAAA,CAAO,KAAA,EAAM;AAAA;AAAA;AAAA,GACpC;AAEJ","file":"chunk-5ZEYTBTU.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * ApprovalStatus variant styles using CVA\n */\nexport const approvalStatusVariants = cva(\n  \"inline-flex items-center font-medium transition-colors duration-150\",\n  {\n    variants: {\n      size: {\n        sm: \"h-5 text-xs gap-1 px-2 py-0.5\",\n        md: \"h-6 text-sm gap-1.5 px-2.5 py-0.5\",\n        lg: \"h-8 text-base gap-2 px-3 py-1\",\n      },\n      variant: {\n        default: \"rounded-full\",\n        compact: \"rounded-full\",\n        detailed: \"rounded-lg flex-col items-start gap-1 h-auto px-3 py-2\",\n        timeline: \"rounded-none flex-row items-start gap-2 h-auto px-0 py-0 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * Status-specific color styles using semantic tokens\n */\nexport const statusColorStyles: Record<string, string> = {\n  pending: \"bg-[color:var(--status-pending-bg)] text-[color:var(--status-pending-text)]\",\n  in_review: \"bg-[color:var(--status-in-review-bg)] text-[color:var(--status-in-review-text)]\",\n  approved: \"bg-[color:var(--status-approved-bg)] text-[color:var(--status-approved-text)]\",\n  rejected: \"bg-[color:var(--status-rejected-bg)] text-[color:var(--status-rejected-text)]\",\n  changes_requested: \"bg-[color:var(--status-changes-requested-bg)] text-[color:var(--status-changes-requested-text)]\",\n  escalated: \"bg-[color:var(--status-escalated-bg)] text-[color:var(--status-escalated-text)]\",\n  expired: \"bg-[color:var(--status-expired-bg)] text-[color:var(--status-expired-text)]\",\n  cancelled: \"bg-[color:var(--status-cancelled-bg)] text-[color:var(--status-cancelled-text)]\",\n}\n\n/**\n * Timeline variant status dot colors using semantic tokens\n */\nexport const timelineDotStyles: Record<string, string> = {\n  pending: \"bg-[color:var(--status-pending-dot)]\",\n  in_review: \"bg-[color:var(--status-in-review-dot)]\",\n  approved: \"bg-[color:var(--status-approved-dot)]\",\n  rejected: \"bg-[color:var(--status-rejected-dot)]\",\n  changes_requested: \"bg-[color:var(--status-changes-requested-dot)]\",\n  escalated: \"bg-[color:var(--status-escalated-dot)]\",\n  expired: \"bg-[color:var(--status-expired-dot)]\",\n  cancelled: \"bg-[color:var(--status-cancelled-dot)]\",\n}\n\n/**\n * Animation styles for pending states\n */\nexport const animationStyles = \"animate-pulse\"\n","import type {\n  ApprovalStatusProps,\n  ApprovalStatusType,\n  StatusConfig,\n} from \"./ApprovalStatus.types\"\nimport type { ComponentType, SVGProps } from \"react\"\n\nimport {\n  AlertCircle,\n  ArrowUpCircle,\n  CheckCircle2,\n  Clock,\n  Edit3,\n  Loader2,\n  Timer,\n  XCircle,\n} from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  animationStyles,\n  approvalStatusVariants,\n  statusColorStyles,\n  timelineDotStyles,\n} from \"./ApprovalStatus.variants\"\n\n/**\n * Status configuration with icons and labels\n */\nconst statusConfig: Record<\n  ApprovalStatusType,\n  StatusConfig & { icon: ComponentType<SVGProps<SVGSVGElement>> }\n> = {\n  approved: {\n    icon: CheckCircle2,\n    label: \"Aprovado\",\n    labelEn: \"Approved\",\n  },\n  cancelled: {\n    icon: AlertCircle,\n    label: \"Cancelado\",\n    labelEn: \"Cancelled\",\n  },\n  changes_requested: {\n    icon: Edit3,\n    label: \"Alterações Solicitadas\",\n    labelEn: \"Changes Requested\",\n  },\n  escalated: {\n    icon: ArrowUpCircle,\n    label: \"Escalado\",\n    labelEn: \"Escalated\",\n  },\n  expired: {\n    icon: Timer,\n    label: \"Expirado\",\n    labelEn: \"Expired\",\n  },\n  in_review: {\n    icon: Loader2,\n    label: \"Em Análise\",\n    labelEn: \"In Review\",\n  },\n  pending: {\n    icon: Clock,\n    label: \"Pendente\",\n    labelEn: \"Pending\",\n  },\n  rejected: {\n    icon: XCircle,\n    label: \"Rejeitado\",\n    labelEn: \"Rejected\",\n  },\n}\n\n/**\n * Format timestamp to localized string\n */\nfunction formatTimestamp(date: Date): string {\n  return date.toLocaleDateString(\"pt-BR\", {\n    day: \"2-digit\",\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n    month: \"short\",\n    year: \"numeric\",\n  })\n}\n\n/**\n * Get initials from a name\n */\nfunction getInitials(name: string): string {\n  return name\n    .split(\" \")\n    .map((word) => word[0])\n    .join(\"\")\n    .toUpperCase()\n    .slice(0, 2)\n}\n\n/**\n * Icon sizes per component size\n */\nconst iconSizeMap: Record<\"lg\" | \"md\" | \"sm\", string> = {\n  lg: \"size-4\",\n  md: \"size-3.5\",\n  sm: \"size-3\",\n}\n\n/**\n * ApprovalStatus displays the current state of an approval workflow\n *\n * @example\n * ```tsx\n * <ApprovalStatus status=\"approved\" />\n * <ApprovalStatus status=\"pending\" animated />\n * <ApprovalStatus\n *   status=\"approved\"\n *   variant=\"detailed\"\n *   approver={{ id: \"1\", name: \"Maria Silva\", role: \"Manager\" }}\n *   timestamp={new Date()}\n * />\n * ```\n */\nfunction ApprovalStatus({\n  animated = false,\n  approver,\n  className,\n  comment,\n  showIcon = true,\n  showLabel = true,\n  size = \"md\",\n  status,\n  timestamp,\n  variant = \"default\",\n  ...props\n}: ApprovalStatusProps) {\n  const config = statusConfig[status]\n  const Icon = config.icon\n  const iconSize = iconSizeMap[size]\n\n  // Build aria-label for accessibility\n  const ariaLabel = [\n    `Status: ${config.label}`,\n    approver ? `por ${approver.name}` : \"\",\n    timestamp ? `em ${formatTimestamp(timestamp)}` : \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \")\n\n  // Animation class for pending states\n  const shouldAnimate = animated && (status === \"pending\" || status === \"in_review\")\n\n  // Compact variant: icon only with tooltip\n  if (variant === \"compact\") {\n    return (\n      <div\n        className={cn(\n          approvalStatusVariants({ size, variant }),\n          statusColorStyles[status],\n          shouldAnimate && animationStyles,\n          \"justify-center\",\n          className\n        )}\n        aria-label={ariaLabel}\n        data-slot=\"approval-status\"\n        role=\"status\"\n        title={config.label}\n        {...props}\n      >\n        {showIcon && <Icon aria-hidden=\"true\" className={iconSize} />}\n      </div>\n    )\n  }\n\n  // Timeline variant: vertical timeline style\n  if (variant === \"timeline\") {\n    return (\n      <div\n        className={cn(\n          approvalStatusVariants({ size, variant }),\n          className\n        )}\n        aria-label={ariaLabel}\n        aria-live=\"polite\"\n        data-slot=\"approval-status\"\n        role=\"status\"\n        {...props}\n      >\n        {/* Timeline dot */}\n        <div\n          className={cn(\n            \"mt-1 size-3 shrink-0 rounded-full\",\n            timelineDotStyles[status],\n            shouldAnimate && animationStyles\n          )}\n        />\n\n        {/* Content */}\n        <div className=\"flex flex-col gap-0.5\">\n          {/* Status with icon */}\n          <div className=\"flex items-center gap-1.5\">\n            {showIcon && (\n              <Icon aria-hidden=\"true\" className={cn(iconSize, \"text-muted-foreground\")} />\n            )}\n            {showLabel && (\n              <span className=\"font-medium\">{config.label}</span>\n            )}\n          </div>\n\n          {/* Approver info */}\n          {approver && (\n            <div className=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n              <span>{approver.name}</span>\n              {approver.role && (\n                <>\n                  <span className=\"text-muted-foreground/50\">·</span>\n                  <span>{approver.role}</span>\n                </>\n              )}\n            </div>\n          )}\n\n          {/* Timestamp */}\n          {timestamp && (\n            <time\n              className=\"text-xs text-muted-foreground\"\n              dateTime={timestamp.toISOString()}\n            >\n              {formatTimestamp(timestamp)}\n            </time>\n          )}\n\n          {/* Comment */}\n          {comment && (\n            <p className=\"mt-1 text-sm text-muted-foreground italic\">\n              \"{comment}\"\n            </p>\n          )}\n        </div>\n      </div>\n    )\n  }\n\n  // Detailed variant: status with approver and timestamp\n  if (variant === \"detailed\") {\n    return (\n      <div\n        className={cn(\n          approvalStatusVariants({ size, variant }),\n          \"bg-card border rounded-lg\",\n          className\n        )}\n        aria-label={ariaLabel}\n        aria-live=\"polite\"\n        data-slot=\"approval-status\"\n        role=\"status\"\n        {...props}\n      >\n        {/* Status badge row */}\n        <div className=\"flex items-center gap-1.5 w-full\">\n          <span\n            className={cn(\n              \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium\",\n              statusColorStyles[status],\n              shouldAnimate && animationStyles\n            )}\n          >\n            {showIcon && <Icon aria-hidden=\"true\" className=\"size-3\" />}\n            {showLabel && config.label}\n          </span>\n        </div>\n\n        {/* Approver info */}\n        {approver && (\n          <div className=\"flex items-center gap-2 w-full\">\n            {/* Avatar */}\n            <div className=\"size-6 shrink-0 rounded-full bg-muted flex items-center justify-center text-xs font-medium overflow-hidden\">\n              {approver.avatar ? (\n                <img\n                  alt={approver.name}\n                  className=\"size-full object-cover\"\n                  src={approver.avatar}\n                />\n              ) : (\n                <span>{getInitials(approver.name)}</span>\n              )}\n            </div>\n\n            <div className=\"flex flex-col min-w-0\">\n              <span className=\"text-sm font-medium truncate\">{approver.name}</span>\n              {approver.role && (\n                <span className=\"text-xs text-muted-foreground truncate\">\n                  {approver.role}\n                </span>\n              )}\n            </div>\n          </div>\n        )}\n\n        {/* Timestamp */}\n        {timestamp && (\n          <time\n            className=\"text-xs text-muted-foreground\"\n            dateTime={timestamp.toISOString()}\n          >\n            {formatTimestamp(timestamp)}\n          </time>\n        )}\n\n        {/* Comment */}\n        {comment && (\n          <p className=\"text-sm text-muted-foreground italic border-l-2 border-muted pl-2\">\n            \"{comment}\"\n          </p>\n        )}\n      </div>\n    )\n  }\n\n  // Default variant: simple badge\n  return (\n    <div\n      className={cn(\n        approvalStatusVariants({ size, variant }),\n        statusColorStyles[status],\n        shouldAnimate && animationStyles,\n        className\n      )}\n      aria-label={ariaLabel}\n      aria-live=\"polite\"\n      data-slot=\"approval-status\"\n      role=\"status\"\n      {...props}\n    >\n      {showIcon && <Icon aria-hidden=\"true\" className={iconSize} />}\n      {showLabel && <span>{config.label}</span>}\n    </div>\n  )\n}\n\nexport { ApprovalStatus, approvalStatusVariants, statusConfig }\n"]}

package/dist/chunk-5ZKKXLPF.js

@@ -0,0 +1,177 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var headerVariants = cva(
+  [
+    // Base styles
+    "flex w-full items-center",
+    // Transition
+    "transition-colors"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-background border-b border-border",
+        transparent: "bg-transparent",
+        floating: "bg-background/80 backdrop-blur-sm border-b border-border/50 shadow-sm"
+      },
+      size: {
+        sm: "h-12",
+        md: "h-14",
+        lg: "h-16"
+      },
+      sticky: {
+        true: "sticky top-0 z-[var(--header-sticky-z-index)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      sticky: false
+    }
+  }
+);
+var headerContainerVariants = cva(
+  [
+    "flex w-full items-center gap-4 px-4"
+  ],
+  {
+    variants: {
+      contained: {
+        true: "mx-auto max-w-7xl",
+        false: ""
+      },
+      layout: {
+        // Brand left, Nav middle, Actions right (default)
+        default: "justify-between",
+        // Brand center; Nav and Actions on sides if provided
+        "logo-centered": "justify-center [&>[data-slot=header-brand]]:order-2 [&>[data-slot=header-nav]]:order-1 [&>[data-slot=header-actions]]:order-3 [&>[data-slot=header-nav]]:flex-1 [&>[data-slot=header-actions]]:flex-1",
+        // Nav left, Brand right (mirror of default)
+        "links-left": "justify-between [&>[data-slot=header-brand]]:order-2 [&>[data-slot=header-nav]]:order-1 [&>[data-slot=header-actions]]:order-3",
+        // Brand + Nav clustered center, Actions right
+        centered: "[&>[data-slot=header-brand]]:flex-none [&>[data-slot=header-nav]]:flex-1 [&>[data-slot=header-nav]]:justify-center [&>[data-slot=header-actions]]:flex-none [&>[data-slot=header-actions]]:ml-auto"
+      }
+    },
+    defaultVariants: {
+      contained: false,
+      layout: "default"
+    }
+  }
+);
+var headerBrandVariants = cva([
+  "flex shrink-0 items-center gap-2"
+]);
+var headerNavVariants = cva([
+  "hidden md:flex items-center gap-1"
+]);
+var headerActionsVariants = cva(
+  [
+    "flex items-center gap-2"
+  ],
+  {
+    variants: {
+      align: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end"
+      }
+    },
+    defaultVariants: {
+      align: "end"
+    }
+  }
+);
+function Header({
+  className,
+  variant = "default",
+  size = "md",
+  sticky = false,
+  contained = false,
+  layout = "default",
+  containerClassName,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: cn(headerVariants({ variant, size, sticky }), className),
+      "data-slot": "header",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            headerContainerVariants({ contained, layout }),
+            containerClassName
+          ),
+          "data-layout": layout,
+          "data-slot": "header-container",
+          children
+        }
+      )
+    }
+  );
+}
+function HeaderBrand({
+  className,
+  asLink = false,
+  href = "/",
+  children,
+  ...props
+}) {
+  if (asLink) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: cn(headerBrandVariants(), className),
+        "data-slot": "header-brand",
+        href,
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(headerBrandVariants(), className),
+      "data-slot": "header-brand",
+      ...props,
+      children
+    }
+  );
+}
+function HeaderNav({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: cn(headerNavVariants(), className),
+      "data-slot": "header-nav",
+      ...props,
+      children
+    }
+  );
+}
+function HeaderActions({
+  className,
+  align = "end",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(headerActionsVariants({ align }), className),
+      "data-slot": "header-actions",
+      ...props,
+      children
+    }
+  );
+}
+
+export { Header, HeaderActions, HeaderBrand, HeaderNav, headerActionsVariants, headerBrandVariants, headerContainerVariants, headerNavVariants, headerVariants };
+//# sourceMappingURL=chunk-5ZKKXLPF.js.map
+//# sourceMappingURL=chunk-5ZKKXLPF.js.map

package/dist/chunk-5ZKKXLPF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Header/Header.variants.ts","../src/components/navigation/Header/Header.tsx"],"names":[],"mappings":"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","file":"chunk-5ZKKXLPF.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * Header root variant styles\n */\nexport const headerVariants = cva(\n  [\n    // Base styles\n    \"flex w-full items-center\",\n    // Transition\n    \"transition-colors\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"bg-background border-b border-border\",\n        transparent: \"bg-transparent\",\n        floating: \"bg-background/80 backdrop-blur-sm border-b border-border/50 shadow-sm\",\n      },\n      size: {\n        sm: \"h-12\",\n        md: \"h-14\",\n        lg: \"h-16\",\n      },\n      sticky: {\n        true: \"sticky top-0 z-[var(--header-sticky-z-index)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n      sticky: false,\n    },\n  }\n)\n\n/**\n * Header container variant styles (inner wrapper)\n */\nexport const headerContainerVariants = cva(\n  [\n    \"flex w-full items-center gap-4 px-4\",\n  ],\n  {\n    variants: {\n      contained: {\n        true: \"mx-auto max-w-7xl\",\n        false: \"\",\n      },\n      layout: {\n        // Brand left, Nav middle, Actions right (default)\n        default: \"justify-between\",\n        // Brand center; Nav and Actions on sides if provided\n        \"logo-centered\":\n          \"justify-center [&>[data-slot=header-brand]]:order-2 [&>[data-slot=header-nav]]:order-1 [&>[data-slot=header-actions]]:order-3 [&>[data-slot=header-nav]]:flex-1 [&>[data-slot=header-actions]]:flex-1\",\n        // Nav left, Brand right (mirror of default)\n        \"links-left\":\n          \"justify-between [&>[data-slot=header-brand]]:order-2 [&>[data-slot=header-nav]]:order-1 [&>[data-slot=header-actions]]:order-3\",\n        // Brand + Nav clustered center, Actions right\n        centered:\n          \"[&>[data-slot=header-brand]]:flex-none [&>[data-slot=header-nav]]:flex-1 [&>[data-slot=header-nav]]:justify-center [&>[data-slot=header-actions]]:flex-none [&>[data-slot=header-actions]]:ml-auto\",\n      },\n    },\n    defaultVariants: {\n      contained: false,\n      layout: \"default\",\n    },\n  }\n)\n\n/**\n * HeaderBrand variant styles\n */\nexport const headerBrandVariants = cva([\n  \"flex shrink-0 items-center gap-2\",\n])\n\n/**\n * HeaderNav variant styles\n */\nexport const headerNavVariants = cva([\n  \"hidden md:flex items-center gap-1\",\n])\n\n/**\n * HeaderActions variant styles\n */\nexport const headerActionsVariants = cva(\n  [\n    \"flex items-center gap-2\",\n  ],\n  {\n    variants: {\n      align: {\n        start: \"justify-start\",\n        center: \"justify-center\",\n        end: \"justify-end\",\n      },\n    },\n    defaultVariants: {\n      align: \"end\",\n    },\n  }\n)\n","\"use client\"\n\nimport type {\n  HeaderActionsProps,\n  HeaderBrandProps,\n  HeaderNavProps,\n  HeaderProps,\n} from \"./Header.types\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  headerActionsVariants,\n  headerBrandVariants,\n  headerContainerVariants,\n  headerNavVariants,\n  headerVariants,\n} from \"./Header.variants\"\n\n/**\n * Header - A responsive header component for site navigation.\n *\n * Supports multiple visual variants, sizes, and sticky positioning.\n *\n * @example\n * <Header variant=\"default\" size=\"md\" sticky>\n *   <HeaderBrand asLink href=\"/\">Logo</HeaderBrand>\n *   <HeaderNav>\n *     <a href=\"/about\">About</a>\n *     <a href=\"/contact\">Contact</a>\n *   </HeaderNav>\n *   <HeaderActions>\n *     <Button>Sign In</Button>\n *   </HeaderActions>\n * </Header>\n */\nfunction Header({\n  className,\n  variant = \"default\",\n  size = \"md\",\n  sticky = false,\n  contained = false,\n  layout = \"default\",\n  containerClassName,\n  children,\n  ...props\n}: HeaderProps) {\n  return (\n    <header\n      className={cn(headerVariants({ variant, size, sticky }), className)}\n      data-slot=\"header\"\n      {...props}\n    >\n      <div\n        className={cn(\n          headerContainerVariants({ contained, layout }),\n          containerClassName\n        )}\n        data-layout={layout}\n        data-slot=\"header-container\"\n      >\n        {children}\n      </div>\n    </header>\n  )\n}\n\n/**\n * HeaderBrand - Logo/brand area of the header.\n *\n * Can optionally render as a link when asLink is true.\n */\nfunction HeaderBrand({\n  className,\n  asLink = false,\n  href = \"/\",\n  children,\n  ...props\n}: HeaderBrandProps) {\n  if (asLink) {\n    return (\n      <a\n        className={cn(headerBrandVariants(), className)}\n        data-slot=\"header-brand\"\n        href={href}\n        {...(props as React.ComponentProps<\"a\">)}\n      >\n        {children}\n      </a>\n    )\n  }\n\n  return (\n    <div\n      className={cn(headerBrandVariants(), className)}\n      data-slot=\"header-brand\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * HeaderNav - Navigation container for header links.\n */\nfunction HeaderNav({ className, children, ...props }: HeaderNavProps) {\n  return (\n    <nav\n      className={cn(headerNavVariants(), className)}\n      data-slot=\"header-nav\"\n      {...props}\n    >\n      {children}\n    </nav>\n  )\n}\n\n/**\n * HeaderActions - Actions container for buttons/controls.\n */\nfunction HeaderActions({\n  className,\n  align = \"end\",\n  children,\n  ...props\n}: HeaderActionsProps) {\n  return (\n    <div\n      className={cn(headerActionsVariants({ align }), className)}\n      data-slot=\"header-actions\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport { Header, HeaderActions, HeaderBrand, HeaderNav }\n"]}