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

package/dist/chunk-IRKDMISK.js

@@ -0,0 +1,62 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var alertVariants = cva(
+  "relative w-full rounded-[var(--alert-root-radius)] border px-[var(--alert-root-padding-x)] py-[var(--alert-root-padding-y)] text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-[var(--alert-root-gap)] gap-y-0.5 items-start [&>svg]:size-[var(--alert-icon-size)] [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-[color:var(--alert-variant-default-bg)] text-[color:var(--alert-variant-default-fg)] border-[color:var(--alert-variant-default-border)]",
+        destructive: "bg-[color:var(--alert-variant-destructive-bg)] text-[color:var(--alert-variant-destructive-fg)] border-[color:var(--alert-variant-destructive-border)] [&>svg]:text-current *:data-[slot=alert-description]:text-[color:var(--alert-variant-destructive-fg)]/90",
+        info: "bg-[color:var(--alert-variant-info-bg)] text-[color:var(--alert-variant-info-fg)] border-[color:var(--alert-variant-info-border)] [&>svg]:text-current *:data-[slot=alert-description]:text-[color:var(--alert-variant-info-fg)]/90",
+        success: "bg-[color:var(--alert-variant-success-bg)] text-[color:var(--alert-variant-success-fg)] border-[color:var(--alert-variant-success-border)] [&>svg]:text-current *:data-[slot=alert-description]:text-[color:var(--alert-variant-success-fg)]/90",
+        warning: "bg-[color:var(--alert-variant-warning-bg)] text-[color:var(--alert-variant-warning-fg)] border-[color:var(--alert-variant-warning-border)] [&>svg]:text-current *:data-[slot=alert-description]:text-[color:var(--alert-variant-warning-fg)]/90"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Alert({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(alertVariants({ variant }), className),
+      "data-slot": "alert",
+      role: "alert",
+      ...props
+    }
+  );
+}
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      ),
+      "data-slot": "alert-title",
+      ...props
+    }
+  );
+}
+function AlertDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      ),
+      "data-slot": "alert-description",
+      ...props
+    }
+  );
+}
+
+export { Alert, AlertDescription, AlertTitle, alertVariants };
+//# sourceMappingURL=chunk-IRKDMISK.js.map
+//# sourceMappingURL=chunk-IRKDMISK.js.map

package/dist/chunk-IRKDMISK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Alert/Alert.variants.ts","../src/components/feedback/Alert/Alert.tsx"],"names":[],"mappings":";;;;AAKO,IAAM,aAAA,GAAgB,GAAA;AAAA,EAC3B,gWAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,4IAAA;AAAA,QACT,WAAA,EACE,iQAAA;AAAA,QACF,IAAA,EAAM,qOAAA;AAAA,QACN,OAAA,EACE,iPAAA;AAAA,QACF,OAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ;ACfA,SAAS,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,GAAG,OAAM,EAAe;AAC3D,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,EAAA,CAAG,aAAA,CAAc,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MACnD,WAAA,EAAU,OAAA;AAAA,MACV,IAAA,EAAK,OAAA;AAAA,MACJ,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,UAAA,CAAW,EAAE,SAAA,EAAW,GAAG,OAAM,EAAoB;AAC5D,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,6DAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,WAAA,EAAU,aAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,gBAAA,CAAiB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA0B;AACxE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,gGAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,WAAA,EAAU,mBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-IRKDMISK.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * Alert variant styles using CVA\n */\nexport const alertVariants = cva(\n  \"relative w-full rounded-[var(--alert-root-radius)] border px-[var(--alert-root-padding-x)] py-[var(--alert-root-padding-y)] text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-[var(--alert-root-gap)] gap-y-0.5 items-start [&>svg]:size-[var(--alert-icon-size)] [&>svg]:translate-y-0.5 [&>svg]:text-current\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-[color:var(--alert-variant-default-bg)] text-[color:var(--alert-variant-default-fg)] border-[color:var(--alert-variant-default-border)]\",\n        destructive:\n          \"bg-[color:var(--alert-variant-destructive-bg)] text-[color:var(--alert-variant-destructive-fg)] border-[color:var(--alert-variant-destructive-border)] [&>svg]:text-current *:data-[slot=alert-description]:text-[color:var(--alert-variant-destructive-fg)]/90\",\n        info: \"bg-[color:var(--alert-variant-info-bg)] text-[color:var(--alert-variant-info-fg)] border-[color:var(--alert-variant-info-border)] [&>svg]:text-current *:data-[slot=alert-description]:text-[color:var(--alert-variant-info-fg)]/90\",\n        success:\n          \"bg-[color:var(--alert-variant-success-bg)] text-[color:var(--alert-variant-success-fg)] border-[color:var(--alert-variant-success-border)] [&>svg]:text-current *:data-[slot=alert-description]:text-[color:var(--alert-variant-success-fg)]/90\",\n        warning:\n          \"bg-[color:var(--alert-variant-warning-bg)] text-[color:var(--alert-variant-warning-fg)] border-[color:var(--alert-variant-warning-border)] [&>svg]:text-current *:data-[slot=alert-description]:text-[color:var(--alert-variant-warning-fg)]/90\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n","import type {\n  AlertDescriptionProps,\n  AlertProps,\n  AlertTitleProps,\n} from \"./Alert.types\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { alertVariants } from \"./Alert.variants\"\n\nfunction Alert({ className, variant, ...props }: AlertProps) {\n  return (\n    <div\n      className={cn(alertVariants({ variant }), className)}\n      data-slot=\"alert\"\n      role=\"alert\"\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: AlertTitleProps) {\n  return (\n    <div\n      className={cn(\n        \"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight\",\n        className\n      )}\n      data-slot=\"alert-title\"\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({ className, ...props }: AlertDescriptionProps) {\n  return (\n    <div\n      className={cn(\n        \"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\n        className\n      )}\n      data-slot=\"alert-description\"\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertDescription, AlertTitle, alertVariants }\nexport type { AlertDescriptionProps, AlertProps, AlertTitleProps }\n"]}

package/dist/chunk-IXJHHR3Y.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-IXJHHR3Y.js.map
+//# sourceMappingURL=chunk-IXJHHR3Y.js.map

package/dist/chunk-IXJHHR3Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-IXJHHR3Y.js"}

package/dist/chunk-JDTAG7KZ.js

@@ -0,0 +1,33 @@
+import { Loader2, OctagonX, TriangleAlert, Info, CircleCheck } from 'lucide-react';
+import { Toaster as Toaster$1 } from 'sonner';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/feedback/Toast/Toast.tsx
+var Toaster = ({ theme = "system", ...props }) => {
+  const resolvedTheme = theme;
+  return /* @__PURE__ */ jsx(
+    Toaster$1,
+    {
+      icons: {
+        success: /* @__PURE__ */ jsx(CircleCheck, { className: "size-4" }),
+        info: /* @__PURE__ */ jsx(Info, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-4" }),
+        error: /* @__PURE__ */ jsx(OctagonX, { className: "size-4" }),
+        loading: /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" })
+      },
+      style: {
+        "--normal-bg": "var(--popover-bg)",
+        "--normal-text": "var(--popover-fg)",
+        "--normal-border": "var(--popover-border)",
+        "--border-radius": "var(--popover-radius)"
+      },
+      className: "toaster group",
+      theme: resolvedTheme,
+      ...props
+    }
+  );
+};
+
+export { Toaster };
+//# sourceMappingURL=chunk-JDTAG7KZ.js.map
+//# sourceMappingURL=chunk-JDTAG7KZ.js.map

package/dist/chunk-JDTAG7KZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Toast/Toast.tsx"],"names":["Sonner"],"mappings":";;;;;AAaA,IAAM,UAAU,CAAC,EAAE,QAAQ,QAAA,EAAU,GAAG,OAAM,KAAoB;AAChE,EAAA,MAAM,aAAA,GAAgB,KAAA;AAEtB,EAAA,uBACE,GAAA;AAAA,IAACA,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,OAAA,kBAAS,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAU,QAAA,EAAS,CAAA;AAAA,QACzC,IAAA,kBAAM,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,CAAA;AAAA,QAC/B,OAAA,kBAAS,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAU,QAAA,EAAS,CAAA;AAAA,QAC3C,KAAA,kBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,QAAA,EAAS,CAAA;AAAA,QACpC,OAAA,kBAAS,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAU,qBAAA,EAAsB;AAAA,OACpD;AAAA,MACA,KAAA,EACE;AAAA,QACE,aAAA,EAAe,mBAAA;AAAA,QACf,eAAA,EAAiB,mBAAA;AAAA,QACjB,iBAAA,EAAmB,uBAAA;AAAA,QACnB,iBAAA,EAAmB;AAAA,OACrB;AAAA,MAEF,SAAA,EAAU,eAAA;AAAA,MACV,KAAA,EAAO,aAAA;AAAA,MACN,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-JDTAG7KZ.js","sourcesContent":["\"use client\"\n\nimport type { ToasterProps } from \"./Toast.types\"\n\nimport {\n  CircleCheck,\n  Info,\n  Loader2,\n  OctagonX,\n  TriangleAlert,\n} from \"lucide-react\"\nimport { Toaster as Sonner } from \"sonner\"\n\nconst Toaster = ({ theme = \"system\", ...props }: ToasterProps) => {\n  const resolvedTheme = theme as NonNullable<ToasterProps[\"theme\"]>\n\n  return (\n    <Sonner\n      icons={{\n        success: <CircleCheck className=\"size-4\" />,\n        info: <Info className=\"size-4\" />,\n        warning: <TriangleAlert className=\"size-4\" />,\n        error: <OctagonX className=\"size-4\" />,\n        loading: <Loader2 className=\"size-4 animate-spin\" />,\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover-bg)\",\n          \"--normal-text\": \"var(--popover-fg)\",\n          \"--normal-border\": \"var(--popover-border)\",\n          \"--border-radius\": \"var(--popover-radius)\",\n        } as React.CSSProperties\n      }\n      className=\"toaster group\"\n      theme={resolvedTheme}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\nexport type { ToasterProps, ToastOptions, ToastPosition, ToastPromiseOptions, ToastTheme } from \"./Toast.types\"\n"]}

package/dist/chunk-JLVL76SW.js

@@ -0,0 +1,544 @@
+import { Avatar, AvatarImage, AvatarFallback } from './chunk-HNYBLROK.js';
+import { Button } from './chunk-RPV77BCQ.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { Check, X, User, TrendingUp, ChevronRight, Forward, Clock } from 'lucide-react';
+import { useId, useState } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var approvalFlowVariants = cva(
+  "relative rounded-lg border bg-card p-6 transition-all duration-300",
+  {
+    variants: {
+      variant: {
+        linear: "",
+        parallel: "",
+        conditional: "",
+        hybrid: ""
+      },
+      layout: {
+        horizontal: "flex flex-row gap-4 overflow-x-auto",
+        vertical: "flex flex-col gap-4",
+        compact: "flex flex-col gap-2 p-4"
+      }
+    },
+    defaultVariants: {
+      variant: "linear",
+      layout: "horizontal"
+    }
+  }
+);
+var approvalFlowStepVariants = cva(
+  "relative flex transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  {
+    variants: {
+      layout: {
+        horizontal: "flex-col items-center gap-2 min-w-40",
+        vertical: "flex-row gap-4",
+        compact: "flex-row gap-3"
+      },
+      status: {
+        pending: "",
+        in_progress: "",
+        awaiting: "",
+        approved: "",
+        rejected: "",
+        escalated: "",
+        skipped: "opacity-50"
+      }
+    },
+    defaultVariants: {
+      layout: "horizontal",
+      status: "pending"
+    }
+  }
+);
+var approvalFlowMarkerVariants = cva(
+  "flex shrink-0 items-center justify-center rounded-full border-2 transition-all duration-300",
+  {
+    variants: {
+      status: {
+        pending: "border-muted-foreground/50 bg-muted text-muted-foreground",
+        in_progress: "border-primary bg-primary text-primary-foreground animate-pulse",
+        awaiting: "border-warning bg-warning text-warning-foreground",
+        approved: "border-success bg-success text-success-foreground",
+        rejected: "border-destructive bg-destructive text-destructive-foreground",
+        escalated: "border-warning bg-warning text-warning-foreground",
+        skipped: "border-muted-foreground/30 bg-muted/50 text-muted-foreground/50"
+      },
+      size: {
+        sm: "h-8 w-8 text-xs",
+        default: "h-10 w-10 text-sm",
+        lg: "h-12 w-12 text-base"
+      }
+    },
+    defaultVariants: {
+      status: "pending",
+      size: "default"
+    }
+  }
+);
+var approvalFlowConnectorVariants = cva(
+  "transition-colors duration-300",
+  {
+    variants: {
+      layout: {
+        horizontal: "h-0.5 flex-1 min-w-10",
+        vertical: "w-0.5 min-h-10 ml-5",
+        compact: "w-0.5 min-h-6 ml-4"
+      },
+      status: {
+        pending: "bg-muted-foreground/30",
+        in_progress: "bg-primary/50",
+        awaiting: "bg-warning/50",
+        approved: "bg-success",
+        rejected: "bg-destructive/50",
+        escalated: "bg-warning/50",
+        skipped: "bg-muted-foreground/20"
+      },
+      style: {
+        solid: "",
+        dashed: "border-dashed border-2 bg-transparent"
+      }
+    },
+    compoundVariants: [
+      {
+        layout: "horizontal",
+        style: "dashed",
+        className: "border-l-0 border-r-0 border-t-2 border-b-0 h-0"
+      },
+      {
+        layout: "vertical",
+        style: "dashed",
+        className: "border-t-0 border-b-0 border-l-2 border-r-0 w-0"
+      },
+      {
+        layout: "compact",
+        style: "dashed",
+        className: "border-t-0 border-b-0 border-l-2 border-r-0 w-0"
+      }
+    ],
+    defaultVariants: {
+      layout: "horizontal",
+      status: "pending",
+      style: "solid"
+    }
+  }
+);
+var approvalFlowStepCardVariants = cva(
+  "rounded-md border bg-background p-4 transition-all duration-200",
+  {
+    variants: {
+      status: {
+        pending: "border-muted",
+        in_progress: "border-primary shadow-sm ring-1 ring-primary/20",
+        awaiting: "border-warning shadow-sm",
+        approved: "border-success/50 bg-success/5",
+        rejected: "border-destructive/50 bg-destructive/5",
+        escalated: "border-warning/50 bg-warning/5",
+        skipped: "border-muted/50 bg-muted/10"
+      },
+      layout: {
+        horizontal: "w-full max-w-52",
+        vertical: "flex-1",
+        compact: "flex-1 py-2"
+      }
+    },
+    defaultVariants: {
+      status: "pending",
+      layout: "horizontal"
+    }
+  }
+);
+var approvalFlowActionsVariants = cva(
+  "flex gap-2 transition-opacity duration-200",
+  {
+    variants: {
+      layout: {
+        horizontal: "flex-wrap justify-center mt-2",
+        vertical: "flex-wrap",
+        compact: "flex-wrap"
+      },
+      visible: {
+        true: "opacity-100",
+        false: "opacity-0 pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      layout: "horizontal",
+      visible: true
+    }
+  }
+);
+function getInitials(name) {
+  return name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
+}
+function getStatusIcon(status) {
+  switch (status) {
+    case "approved":
+      return /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" });
+    case "rejected":
+      return /* @__PURE__ */ jsx(X, { className: "h-4 w-4" });
+    case "in_progress":
+    case "awaiting":
+      return /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4" });
+    case "escalated":
+      return /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4" });
+    case "skipped":
+      return /* @__PURE__ */ jsx(Forward, { className: "h-4 w-4" });
+    default:
+      return null;
+  }
+}
+function getStatusLabel(status) {
+  const labels = {
+    pending: "Pending",
+    in_progress: "In progress",
+    awaiting: "Awaiting approval",
+    approved: "Approved",
+    rejected: "Rejected",
+    escalated: "Escalated",
+    skipped: "Skipped"
+  };
+  return labels[status];
+}
+function ApprovalFlowMarker({
+  index,
+  status = "pending"
+}) {
+  const icon = getStatusIcon(status);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: approvalFlowMarkerVariants({ status }),
+      "data-slot": "approval-flow-marker",
+      "data-status": status,
+      children: icon ?? /* @__PURE__ */ jsx("span", { className: "font-medium", children: index + 1 })
+    }
+  );
+}
+function ApprovalFlowConnector({
+  layout = "horizontal",
+  status = "pending",
+  isConditional = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: approvalFlowConnectorVariants({
+        layout,
+        status,
+        style: isConditional ? "dashed" : "solid"
+      }),
+      "aria-hidden": "true",
+      "data-slot": "approval-flow-connector"
+    }
+  );
+}
+function ApproverAvatar({ approver }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", title: `${approver.name} (${approver.role})`, children: /* @__PURE__ */ jsxs(Avatar, { size: "sm", children: [
+    approver.avatar ? /* @__PURE__ */ jsx(AvatarImage, { alt: approver.name, src: approver.avatar }) : null,
+    /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(approver.name) })
+  ] }) });
+}
+function ApprovalFlowStepContent({
+  step,
+  layout = "horizontal"
+}) {
+  const showApproversCount = step.approvers.length > 3;
+  const visibleApprovers = showApproversCount ? step.approvers.slice(0, 3) : step.approvers;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: approvalFlowStepCardVariants({ status: step.status, layout }),
+      "data-slot": "approval-flow-step-card",
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("div", { "data-slot": "approval-flow-step-title", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: step.title }) }),
+        step.description && /* @__PURE__ */ jsx("div", { "data-slot": "approval-flow-step-description", children: /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: step.description }) }),
+        step.approvers.length > 0 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center gap-1",
+            "data-slot": "approval-flow-step-approvers",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex -space-x-2", children: visibleApprovers.map((approver) => /* @__PURE__ */ jsx(ApproverAvatar, { approver }, approver.id)) }),
+              showApproversCount && /* @__PURE__ */ jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: [
+                "+",
+                step.approvers.length - 3,
+                " more"
+              ] })
+            ]
+          }
+        ),
+        step.requiredApprovals && step.requiredApprovals > 1 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "text-xs text-muted-foreground",
+            "data-slot": "approval-flow-step-required",
+            children: [
+              "Requires ",
+              step.requiredApprovals,
+              " of ",
+              step.approvers.length,
+              " approvals"
+            ]
+          }
+        ),
+        step.deadline && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center gap-1 text-xs text-muted-foreground",
+            "data-slot": "approval-flow-step-deadline",
+            children: [
+              /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Due: ",
+                step.deadline.toLocaleDateString()
+              ] })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function ApprovalFlowStep({
+  step,
+  index,
+  isCurrent,
+  isLast,
+  showConnector = true,
+  layout = "horizontal",
+  readOnly = false,
+  allowDelegation = true,
+  allowEscalation = true,
+  onApprove,
+  onReject,
+  onDelegate,
+  onEscalate,
+  className,
+  ...props
+}) {
+  const stepId = useId();
+  const statusLabel = getStatusLabel(step.status);
+  const normalizedLayout = layout ?? "horizontal";
+  const canAct = isCurrent && !readOnly && (step.status === "in_progress" || step.status === "awaiting");
+  const handleKeyDown = (event) => {
+    const target = event.currentTarget;
+    const parent = target.parentElement;
+    if (!parent) return;
+    const siblings = [
+      ...parent.querySelectorAll('[data-slot="approval-flow-step"]')
+    ];
+    const currentIndex = siblings.indexOf(target);
+    let nextIndex = -1;
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        event.preventDefault();
+        nextIndex = Math.min(currentIndex + 1, siblings.length - 1);
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        event.preventDefault();
+        nextIndex = Math.max(currentIndex - 1, 0);
+        break;
+      default:
+        return;
+    }
+    const nextElement = siblings[nextIndex];
+    if (nextIndex !== -1 && nextElement) {
+      nextElement.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        approvalFlowStepVariants({ layout: normalizedLayout, status: step.status }),
+        className
+      ),
+      "aria-current": isCurrent ? "step" : void 0,
+      "aria-describedby": `${stepId}-description`,
+      "aria-label": `${step.title} - ${statusLabel}`,
+      "data-active": isCurrent ? "" : void 0,
+      "data-slot": "approval-flow-step",
+      "data-status": step.status,
+      role: "listitem",
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: [
+        (normalizedLayout === "vertical" || normalizedLayout === "compact") && /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx(ApprovalFlowMarker, { index, status: step.status }),
+          showConnector && !isLast && /* @__PURE__ */ jsx(ApprovalFlowConnector, { layout: normalizedLayout, status: step.status })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [
+          normalizedLayout === "horizontal" && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(ApprovalFlowMarker, { index, status: step.status }) }),
+          /* @__PURE__ */ jsx(ApprovalFlowStepContent, { layout: normalizedLayout, step }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: approvalFlowActionsVariants({
+                layout: normalizedLayout,
+                visible: canAct
+              }),
+              "data-slot": "approval-flow-step-actions",
+              id: `${stepId}-description`,
+              children: canAct && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    "aria-label": `Approve ${step.title}`,
+                    size: "sm",
+                    variant: "default",
+                    onClick: onApprove,
+                    children: [
+                      /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }),
+                      "Approve"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    "aria-label": `Reject ${step.title}`,
+                    size: "sm",
+                    variant: "destructive",
+                    onClick: onReject,
+                    children: [
+                      /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+                      "Reject"
+                    ]
+                  }
+                ),
+                allowDelegation && /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    "aria-label": `Delegate ${step.title}`,
+                    size: "sm",
+                    variant: "outline",
+                    onClick: onDelegate,
+                    children: [
+                      /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }),
+                      "Delegate"
+                    ]
+                  }
+                ),
+                allowEscalation && /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    "aria-label": `Escalate ${step.title}`,
+                    size: "sm",
+                    variant: "outline",
+                    onClick: onEscalate,
+                    children: [
+                      /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4" }),
+                      "Escalate"
+                    ]
+                  }
+                )
+              ] })
+            }
+          )
+        ] }),
+        normalizedLayout === "horizontal" && showConnector && !isLast && /* @__PURE__ */ jsxs("div", { className: "flex items-center self-start mt-5", children: [
+          /* @__PURE__ */ jsx(ApprovalFlowConnector, { layout: normalizedLayout, status: step.status }),
+          /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground shrink-0" })
+        ] })
+      ]
+    }
+  );
+}
+function ApprovalFlow({
+  "aria-label": ariaLabel = "Approval workflow",
+  className,
+  steps,
+  currentStep = 0,
+  variant = "linear",
+  layout = "horizontal",
+  allowDelegation = true,
+  allowEscalation = true,
+  showTimeline: _showTimeline = true,
+  showComments: _showComments = true,
+  readOnly = false,
+  history: _history,
+  onApprove,
+  onReject,
+  onDelegate,
+  onEscalate,
+  onStepChange: _onStepChange,
+  onComplete: _onComplete,
+  ...props
+}) {
+  const [_activeStepIndex, setActiveStepIndex] = useState(currentStep);
+  const effectiveLayout = layout;
+  const handleApprove = (stepId) => {
+    onApprove?.({ stepId });
+  };
+  const handleReject = (stepId) => {
+    onReject?.({ stepId, reason: "" });
+  };
+  const handleDelegate = (stepId) => {
+    onDelegate?.({
+      stepId,
+      delegateTo: { id: "", name: "", email: "", role: "" }
+    });
+  };
+  const handleEscalate = (stepId) => {
+    onEscalate?.({
+      stepId,
+      escalateTo: { id: "", name: "", email: "", role: "" }
+    });
+  };
+  const handleStepFocus = (index) => {
+    setActiveStepIndex(index);
+  };
+  const hasSteps = steps.length > 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: cn(approvalFlowVariants({ variant, layout: effectiveLayout }), className),
+      "data-slot": "approval-flow",
+      "data-variant": variant,
+      role: "list",
+      ...props,
+      children: hasSteps ? steps.map((step, index) => /* @__PURE__ */ jsx(
+        ApprovalFlowStep,
+        {
+          allowDelegation,
+          allowEscalation,
+          index,
+          isCurrent: index === currentStep,
+          isLast: index === steps.length - 1,
+          layout: effectiveLayout,
+          readOnly,
+          showConnector: variant !== "conditional",
+          step,
+          onApprove: () => {
+            handleApprove(step.id);
+          },
+          onDelegate: () => {
+            handleDelegate(step.id);
+          },
+          onEscalate: () => {
+            handleEscalate(step.id);
+          },
+          onFocus: () => {
+            handleStepFocus(index);
+          },
+          onReject: () => {
+            handleReject(step.id);
+          }
+        },
+        step.id
+      )) : null
+    }
+  );
+}
+
+export { ApprovalFlow, ApprovalFlowConnector, ApprovalFlowMarker, ApprovalFlowStep, approvalFlowActionsVariants, approvalFlowConnectorVariants, approvalFlowMarkerVariants, approvalFlowStepCardVariants, approvalFlowStepVariants, approvalFlowVariants };
+//# sourceMappingURL=chunk-JLVL76SW.js.map
+//# sourceMappingURL=chunk-JLVL76SW.js.map