@assure-one/design-system 0.4.0 → 0.5.0

package/dist/index.js

@@ -2120,6 +2120,74 @@ function FilterIcon({ size = 24, ...props }) {
     }
   ) });
 }
+function CheckCircleSolidIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx(Icon, { size, ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      fill: "currentColor",
+      d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 0 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
+    }
+  ) });
+}
+function XCircleSolidIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx(Icon, { size, ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      fill: "currentColor",
+      d: "M12 2.25C6.615 2.25 2.25 6.615 2.25 12s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 0 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z"
+    }
+  ) });
+}
+function AlertTriangleSolidIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx(Icon, { size, ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      fill: "currentColor",
+      d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
+    }
+  ) });
+}
+function InfoCircleSolidIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx(Icon, { size, ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      fill: "currentColor",
+      d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.342l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.341l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
+    }
+  ) });
+}
+function TrendingUpIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx(Icon, { size, ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M2 17l6.5-6.5 5 5L22 7M16 7h6v6",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function TrendingDownIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx(Icon, { size, ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M2 7l6.5 6.5 5-5L22 17M16 17h6v-6",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
 var Accordion = React36.forwardRef(function Accordion2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Root,
@@ -2622,12 +2690,18 @@ var buttonVariants = cva(
         ghost: "bg-transparent text-fg-2 hover:bg-bg-2 hover:text-fg",
         outline: "border border-rule-strong bg-bg text-fg-2 hover:bg-bg-2 hover:border-fg-4",
         link: "bg-transparent text-accent underline-offset-4 hover:underline p-0 h-auto",
-        accent: "bg-accent text-fg-on-accent hover:bg-accent-hover active:bg-accent-active"
+        accent: "bg-accent text-fg-on-accent hover:bg-accent-hover active:bg-accent-active",
+        dashed: "border-2 border-dashed border-rule bg-transparent text-fg-3 hover:border-fg-4 hover:bg-bg-2 hover:text-fg"
       },
       size: {
         sm: "h-8 px-3 text-sm gap-1.5",
         md: "h-10 px-4 text-sm gap-2",
         lg: "h-12 px-6 text-base gap-2",
+        // Icon-only sizes. Hit target ≥ 24px (WCAG 2.5.5 floor).
+        // `icon-xs` / `icon-sm` are for dense in-row action stacks where
+        // `size="icon"` (40×40) would visually crowd the row.
+        "icon-xs": "size-6 [&_svg]:size-3.5",
+        "icon-sm": "size-7 [&_svg]:size-4",
         icon: "size-10"
       }
     },
@@ -3065,8 +3139,8 @@ function Select({
             children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
           }
         ),
-        /* @__PURE__ */ jsx(SelectContent, { className: contentClassName, children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, disabled: opt.disabled, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 truncate", children: [
-          opt.label,
+        /* @__PURE__ */ jsx(SelectContent, { className: contentClassName, children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, disabled: opt.disabled, children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "line-clamp-1", children: opt.label }),
           opt.labelSuffix
         ] }) }, opt.value)) })
       ]
@@ -3084,16 +3158,17 @@ function ClientSelect({
   placeholder = "Select a client..."
 }) {
   const radixValue = value ?? void 0;
+  const selected = value ? clients.find((c) => c.id === value) : void 0;
   const handleChange = (next) => {
     onChange(next === "" ? null : next);
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), children: [
     /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value ?? "" }),
     /* @__PURE__ */ jsxs(SelectRoot, { value: radixValue, onValueChange: handleChange, children: [
-      /* @__PURE__ */ jsx(SelectTrigger, { "aria-invalid": !!error || void 0, "aria-label": placeholder, children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }),
-      /* @__PURE__ */ jsx(SelectContent, { children: clients.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-fg-3 px-3 py-6 text-center text-xs", children: "No clients yet" }) : clients.map((c) => /* @__PURE__ */ jsx(SelectItem, { value: c.id, children: /* @__PURE__ */ jsxs("span", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-fg text-[13px] font-medium", children: c.label }),
-        c.email && /* @__PURE__ */ jsx("span", { className: "text-fg-3 text-xs", children: c.email })
+      /* @__PURE__ */ jsx(SelectTrigger, { "aria-invalid": !!error || void 0, "aria-label": placeholder, children: /* @__PURE__ */ jsx(SelectValue, { placeholder, children: selected?.label ?? "" }) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: clients.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-fg-3 px-3 py-6 text-center text-xs", children: "No clients yet" }) : clients.map((c) => /* @__PURE__ */ jsx(SelectItem, { value: c.id, children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-fg line-clamp-1 text-[13px] font-medium", children: c.label }),
+        c.email && /* @__PURE__ */ jsx("span", { className: "text-fg-3 line-clamp-1 text-xs", children: c.email })
       ] }) }, c.id)) })
     ] }),
     error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-danger-fg mt-1.5 text-xs", children: error })
@@ -3430,7 +3505,7 @@ function CommandPalette({
                                 ),
                                 /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
                                   /* @__PURE__ */ jsx("div", { className: "text-fg text-sm font-medium", children: item.label }),
-                                  item.description && /* @__PURE__ */ jsx("div", { className: "text-fg-3 truncate text-xs", children: item.description })
+                                  item.description && /* @__PURE__ */ jsx("div", { className: "text-fg-3 line-clamp-1 text-xs", children: item.description })
                                 ] }),
                                 item.shortcut && /* @__PURE__ */ jsx("kbd", { className: cn(kbdClass, "hidden shrink-0 sm:inline-flex"), children: item.shortcut })
                               ]
@@ -4276,6 +4351,19 @@ function FormSuccess({ children, className, ...props }) {
     }
   );
 }
+var FormSection = forwardRef(function FormSection2({ title, description, action, headSpacing = "mt-4", className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("fieldset", { ref, className: cn("min-w-0", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("legend", { className: "text-fg text-sm font-semibold", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-0.5 text-xs leading-relaxed", children: description })
+      ] }),
+      action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: headSpacing, children })
+  ] });
+});
+FormSection.displayName = "FormSection";
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
 var HoverCardPortal = HoverCardPrimitive.Portal;
@@ -4398,67 +4486,45 @@ var Input = forwardRef(function Input2({
   ] });
 });
 Input.displayName = "Input";
-var SHORTCUT_SECTIONS = [
-  {
-    title: "Create",
-    icon: /* @__PURE__ */ jsx(CornerDownLeftIcon, { className: "size-3" }),
-    shortcuts: [
-      { keys: ["C"], description: "New Client" },
-      { keys: ["T"], description: "Create Task" },
-      { keys: ["E"], description: "New Engagement" },
-      { keys: ["M"], description: "Compose Message" }
-    ]
-  },
-  {
-    title: "Go to",
-    icon: null,
-    shortcuts: [
-      { keys: ["G", "O"], description: "Overview" },
-      { keys: ["G", "C"], description: "Clients" },
-      { keys: ["G", "W"], description: "Workflow" },
-      { keys: ["G", "D"], description: "Documents" },
-      { keys: ["G", "B"], description: "Billing" },
-      { keys: ["G", "M"], description: "Communications" },
-      { keys: ["G", "A"], description: "Calendar" },
-      { keys: ["G", "R"], description: "Reports" },
-      { keys: ["G", "S"], description: "Settings" }
-    ]
-  },
-  {
-    title: "General",
-    icon: /* @__PURE__ */ jsx(CommandIcon, { className: "size-3" }),
-    shortcuts: [
-      { keys: ["\u2318", "K"], description: "Command palette" },
-      { keys: ["/"], description: "Focus search" },
-      { keys: ["?"], description: "Keyboard shortcuts" },
-      { keys: ["Esc"], description: "Close / go back" }
-    ]
-  }
-];
+var GENERAL_SECTION = {
+  title: "General",
+  icon: /* @__PURE__ */ jsx(CommandIcon, { className: "size-3" }),
+  shortcuts: [
+    { keys: ["\u2318", "K"], description: "Command palette" },
+    { keys: ["/"], description: "Focus search" },
+    { keys: ["?"], description: "Keyboard shortcuts" },
+    { keys: ["Esc"], description: "Close / go back" }
+  ]
+};
 var kbdClass2 = cn(
   "inline-flex items-center justify-center min-w-[18px] h-[18px] px-[5px]",
   "font-mono text-[10.5px] text-fg-3 bg-bg-2 border border-rule rounded-icon",
   "[border-bottom-width:1.5px]"
 );
-function KeyboardShortcutsDialog() {
+function KeyboardShortcutsDialog({
+  sections,
+  hotkey = "?"
+} = {}) {
   const [open, setOpen] = React36.useState(false);
   React36.useEffect(() => {
+    if (hotkey === null) return;
     function handleKeyDown(e) {
       const target = e.target;
       if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || target?.isContentEditable) {
         return;
       }
-      if (e.key === "?" && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      if (e.key === hotkey && !e.metaKey && !e.ctrlKey && !e.altKey) {
         e.preventDefault();
         setOpen((prev) => !prev);
       }
     }
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, []);
+  }, [hotkey]);
+  const allSections = sections ? [...sections, GENERAL_SECTION] : [GENERAL_SECTION];
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { size: "md", className: "p-0", children: [
     /* @__PURE__ */ jsx(DialogHeader, { className: "border-rule mb-0 border-b px-5 py-4 pr-12", children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-sm font-semibold", children: "Keyboard Shortcuts" }) }),
-    /* @__PURE__ */ jsx("div", { className: "scrollbar-thin max-h-[60vh] overflow-y-auto px-5 py-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-x-6 gap-y-5", children: SHORTCUT_SECTIONS.map((section) => /* @__PURE__ */ jsxs("div", { className: cn(section.title === "Go to" && "row-span-2"), children: [
+    /* @__PURE__ */ jsx("div", { className: "scrollbar-thin max-h-[60vh] overflow-y-auto px-5 py-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-x-6 gap-y-5", children: allSections.map((section) => /* @__PURE__ */ jsxs("div", { className: cn(section.wide && "row-span-2"), children: [
       /* @__PURE__ */ jsxs(
         "h3",
         {
@@ -4489,7 +4555,7 @@ function KeyboardShortcutsDialog() {
     ] }, section.title)) }) }),
     /* @__PURE__ */ jsx("div", { className: "border-rule bg-bg-2/40 border-t px-5 py-3", children: /* @__PURE__ */ jsxs("p", { className: "text-fg-3 text-[11px]", children: [
       "Press ",
-      /* @__PURE__ */ jsx("kbd", { className: kbdClass2, children: "?" }),
+      /* @__PURE__ */ jsx("kbd", { className: kbdClass2, children: hotkey ?? "?" }),
       " anytime to toggle this dialog"
     ] }) })
   ] }) });
@@ -4506,23 +4572,106 @@ var Label4 = React36.forwardRef(
   }
 );
 Label4.displayName = LabelPrimitive.Root.displayName;
-var LinkButton = forwardRef(function LinkButton2({ href, variant = "primary", size = "md", iconLeft, iconRight, children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
-    Link,
+var LinkButton = forwardRef(function LinkButton2({
+  href,
+  variant = "primary",
+  size = "md",
+  iconLeft,
+  iconRight,
+  children,
+  className,
+  external,
+  target,
+  rel,
+  ...props
+}, ref) {
+  const classes = cn(buttonVariants({ variant, size }), className);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    iconLeft && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", "aria-hidden": "true", children: iconLeft }),
+    children,
+    iconRight && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", "aria-hidden": "true", children: iconRight })
+  ] });
+  if (external) {
+    const safeRel = rel ?? (target === "_blank" ? "noopener noreferrer" : void 0);
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref,
+        href,
+        className: classes,
+        target,
+        rel: safeRel,
+        ...props,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Link, { ref, href, className: classes, target, rel, ...props, children: content });
+});
+LinkButton.displayName = "LinkButton";
+var Skeleton = forwardRef(function Skeleton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
     {
       ref,
-      href,
-      className: cn(buttonVariants({ variant, size }), className),
+      className: cn("skeleton bg-bg-3 rounded-icon animate-pulse", className),
+      "aria-hidden": "true",
+      ...props
+    }
+  );
+});
+Skeleton.displayName = "Skeleton";
+var SkeletonText = forwardRef(function SkeletonText2({ lines = 3, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), "aria-hidden": "true", ...props, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "skeleton bg-bg-3 rounded-icon h-4 animate-pulse",
+        i === lines - 1 && "w-3/4"
+      )
+    },
+    i
+  )) });
+});
+SkeletonText.displayName = "SkeletonText";
+var SkeletonCircle = forwardRef(
+  function SkeletonCircle2({ size = 40, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("skeleton bg-bg-3 animate-pulse rounded-full", className),
+        style: { width: size, height: size },
+        "aria-hidden": "true",
+        ...props
+      }
+    );
+  }
+);
+SkeletonCircle.displayName = "SkeletonCircle";
+var LoadingRows = forwardRef(function LoadingRows2({
+  count = 3,
+  rowHeight = "h-14",
+  gap = "gap-2",
+  rowClassName,
+  label = "Loading",
+  className,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": label,
+      className: cn("flex flex-col", gap, className),
       ...props,
-      children: [
-        iconLeft && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", "aria-hidden": "true", children: iconLeft }),
-        children,
-        iconRight && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", "aria-hidden": "true", children: iconRight })
-      ]
+      children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: cn(rowHeight, "w-full", rowClassName) }, i))
     }
   );
 });
-LinkButton.displayName = "LinkButton";
+LoadingRows.displayName = "LoadingRows";
 var sizeStyles = {
   sm: { icon: 20, text: "text-sm", gap: "gap-2" },
   md: { icon: 24, text: "text-[17px]", gap: "gap-2.5" },
@@ -4535,15 +4684,17 @@ function Logo({
   className,
   iconClassName,
   textClassName,
+  productName = "Pro",
   inverted = false
 }) {
   const s = sizeStyles[size];
+  const ariaLabel = productName ? `Assure ${productName}` : "Assure";
   return /* @__PURE__ */ jsxs(
     Link,
     {
       href,
       className: cn("inline-flex items-center", s.gap, className),
-      "aria-label": "Assure Pro",
+      "aria-label": ariaLabel,
       children: [
         /* @__PURE__ */ jsx(
           Image2,
@@ -4567,8 +4718,10 @@ function Logo({
             ),
             children: [
               /* @__PURE__ */ jsx("span", { children: "Assure" }),
-              " ",
-              /* @__PURE__ */ jsx("span", { className: cn("font-medium", inverted ? "text-pro-fg" : "text-pro-fg"), children: "Pro" })
+              productName && /* @__PURE__ */ jsxs(Fragment, { children: [
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "text-pro-fg font-medium", children: productName })
+              ] })
             ]
           }
         )
@@ -4599,7 +4752,7 @@ function MultiFilterPill({
         ),
         children: [
           icon && /* @__PURE__ */ jsx("span", { className: "[&>svg]:size-3.5", "aria-hidden": "true", children: icon }),
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: displayLabel }),
+          /* @__PURE__ */ jsx("span", { className: "line-clamp-1", children: displayLabel }),
           active ? /* @__PURE__ */ jsx(
             "span",
             {
@@ -4679,7 +4832,7 @@ function MultiFilterPill({
                           "aria-hidden": "true"
                         }
                       ),
-                      /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label })
+                      /* @__PURE__ */ jsx("span", { className: "line-clamp-1", children: opt.label })
                     ]
                   }
                 ) }, opt.key);
@@ -5478,7 +5631,7 @@ function SearchSelect({
                     ),
                     children: [
                       /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 shrink-0 text-transparent", "aria-hidden": "true" }),
-                      /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
+                      /* @__PURE__ */ jsx("span", { className: "line-clamp-1", children: option.label })
                     ]
                   },
                   option.id
@@ -5498,7 +5651,7 @@ function SearchSelect({
                       ),
                       children: [
                         /* @__PURE__ */ jsx(PlusIcon, { className: "size-4 shrink-0", "aria-hidden": "true" }),
-                        /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+                        /* @__PURE__ */ jsxs("span", { className: "line-clamp-1", children: [
                           "Create \u201C",
                           trimmedSearch,
                           "\u201D"
@@ -5790,7 +5943,7 @@ function SideDrawer({
 function SideDrawerHeader({ title, subtitle, onClose, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("border-rule bg-surface shrink-0 border-b px-6 py-4", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx("h2", { className: "font-display text-fg truncate text-base leading-tight font-medium tracking-tight", children: title }),
+      /* @__PURE__ */ jsx("h2", { className: "font-display text-fg line-clamp-1 text-base leading-tight font-medium tracking-tight", children: title }),
       subtitle && /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-1 text-sm", children: subtitle })
     ] }),
     onClose && /* @__PURE__ */ jsx(
@@ -5829,46 +5982,6 @@ function SideDrawerFooter({ children, className }) {
 SideDrawer.Header = SideDrawerHeader;
 SideDrawer.Body = SideDrawerBody;
 SideDrawer.Footer = SideDrawerFooter;
-var Skeleton = forwardRef(function Skeleton2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn("skeleton bg-bg-3 rounded-icon animate-pulse", className),
-      "aria-hidden": "true",
-      ...props
-    }
-  );
-});
-Skeleton.displayName = "Skeleton";
-var SkeletonText = forwardRef(function SkeletonText2({ lines = 3, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), "aria-hidden": "true", ...props, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "skeleton bg-bg-3 rounded-icon h-4 animate-pulse",
-        i === lines - 1 && "w-3/4"
-      )
-    },
-    i
-  )) });
-});
-SkeletonText.displayName = "SkeletonText";
-var SkeletonCircle = forwardRef(
-  function SkeletonCircle2({ size = 40, className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("skeleton bg-bg-3 animate-pulse rounded-full", className),
-        style: { width: size, height: size },
-        "aria-hidden": "true",
-        ...props
-      }
-    );
-  }
-);
-SkeletonCircle.displayName = "SkeletonCircle";
 var Slider = React36.forwardRef(
   function Slider2({
     className,
@@ -6575,32 +6688,55 @@ function ToastProvider({ children }) {
     )
   ] });
 }
-var variantStyles = {
-  default: "bg-surface border-rule text-fg",
-  success: "bg-success-bg border-success-line text-success-fg",
-  destructive: "bg-danger-bg border-danger-line text-danger-fg",
-  warning: "bg-warning-bg border-warning-line text-warning-fg"
+var variantConfig = {
+  default: { chip: "bg-pro-bg", icon: "text-pro-fg", bar: "bg-pro-fg", Icon: InfoCircleSolidIcon },
+  success: {
+    chip: "bg-success-bg",
+    icon: "text-success-fg",
+    bar: "bg-success-fg",
+    Icon: CheckCircleSolidIcon
+  },
+  destructive: {
+    chip: "bg-danger-bg",
+    icon: "text-danger-fg",
+    bar: "bg-danger-fg",
+    Icon: XCircleSolidIcon
+  },
+  warning: {
+    chip: "bg-warning-bg",
+    icon: "text-warning-fg",
+    bar: "bg-warning-fg",
+    Icon: AlertTriangleSolidIcon
+  }
 };
 function ToastItem({ toast, onDismiss }) {
   const timerRef = useRef(void 0);
   const [exiting, setExiting] = useState(false);
+  const [filled, setFilled] = useState(false);
+  const duration = toast.duration ?? 5e3;
+  const showProgress = duration > 0;
   const close = useCallback(() => {
     setExiting(true);
     setTimeout(() => onDismiss(toast.id), 150);
   }, [toast.id, onDismiss]);
   useEffect(() => {
-    const duration = toast.duration ?? 5e3;
-    if (duration <= 0) return;
+    if (!showProgress) return;
     timerRef.current = setTimeout(close, duration);
     return () => clearTimeout(timerRef.current);
-  }, [toast.duration, close]);
-  return /* @__PURE__ */ jsx(
+  }, [showProgress, duration, close]);
+  useEffect(() => {
+    if (!showProgress) return;
+    const raf = requestAnimationFrame(() => setFilled(true));
+    return () => cancelAnimationFrame(raf);
+  }, [showProgress]);
+  const { chip, icon, bar, Icon: Icon3 } = variantConfig[toast.variant ?? "default"];
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       role: "status",
       "data-state": exiting ? "closed" : "open",
       className: cn(
-        "rounded-card shadow-card pointer-events-auto w-80 border p-4",
+        "bg-surface border-rule text-fg rounded-card shadow-card pointer-events-auto relative w-80 overflow-hidden border p-4",
         "font-body",
         // Unified data-state animation (spec §5.27) — same model as Dialog/Tooltip:
         //   open  → fade+slide in over --duration-overlay (200ms), ease-out-quart
@@ -6609,29 +6745,68 @@ function ToastItem({ toast, onDismiss }) {
         "data-[state=open]:duration-[var(--duration-overlay)] data-[state=open]:ease-[var(--ease-out-quart)]",
         "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right-8 data-[state=closed]:fade-out-0",
         "data-[state=closed]:duration-[var(--duration-fast)] data-[state=closed]:ease-[var(--ease-in)]",
-        "motion-reduce:animate-none",
-        variantStyles[toast.variant ?? "default"]
+        "motion-reduce:animate-none"
       ),
-      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm leading-tight font-semibold", children: toast.title }),
-          toast.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm leading-snug opacity-80", children: toast.description })
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "inline-flex size-8 shrink-0 items-center justify-center rounded-[9px]",
+                chip,
+                icon
+              ),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(Icon3, { className: "size-5" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-fg text-sm leading-tight font-semibold", children: toast.title }),
+            toast.description && /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-0.5 text-sm leading-snug", children: toast.description }),
+            toast.action && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  toast.action?.onClick();
+                  close();
+                },
+                className: cn(
+                  "text-pro-fg mt-2 text-sm font-semibold",
+                  "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] hover:underline motion-reduce:transition-none",
+                  "focus-visible:[box-shadow:var(--shadow-focus-ring)] rounded-sm focus-visible:outline-none"
+                ),
+                children: toast.action.label
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: close,
+              className: cn(
+                "text-fg-4 hover:text-fg-2 rounded-icon -mr-1 inline-flex size-5 shrink-0 items-center justify-center",
+                "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+                "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
+              ),
+              "aria-label": "Dismiss",
+              children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5", "aria-hidden": "true" })
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx(
-          "button",
+        showProgress && /* @__PURE__ */ jsx("div", { className: "bg-rule absolute inset-x-0 bottom-0 h-1", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+          "div",
           {
-            type: "button",
-            onClick: close,
             className: cn(
-              "rounded-icon inline-flex size-5 shrink-0 items-center justify-center",
-              "opacity-70 transition-opacity duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] hover:opacity-100 motion-reduce:transition-none",
-              "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
+              "h-full transition-[width] ease-linear motion-reduce:transition-none",
+              bar
             ),
-            "aria-label": "Dismiss",
-            children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5", "aria-hidden": "true" })
+            style: { width: filled ? "100%" : "0%", transitionDuration: `${duration}ms` }
           }
-        )
-      ] })
+        ) })
+      ]
     }
   );
 }
@@ -6774,11 +6949,9 @@ function SidebarProvider({
   storageKey,
   shortcut = DEFAULT_SHORTCUT
 }) {
-  const [uncontrolled, setUncontrolled] = React36.useState(() => {
-    if (controlled !== void 0) return controlled;
-    const stored = readStorage(storageKey);
-    return stored ?? defaultState;
-  });
+  const [uncontrolled, setUncontrolled] = React36.useState(
+    controlled ?? defaultState
+  );
   React36.useEffect(() => {
     if (controlled !== void 0) return;
     const stored = readStorage(storageKey);
@@ -6890,7 +7063,6 @@ var Sidebar = React36.forwardRef(function Sidebar2({ className, collapsible = fa
         "data-peek": peek ? "true" : void 0,
         "data-labels": labelsHidden ? "hide" : "show",
         "data-collapsible": collapsible ? "true" : void 0,
-        suppressHydrationWarning: true,
         onMouseEnter: handleEnter,
         onMouseLeave: handleLeave,
         style: { width: effectiveWidth, ...style },
@@ -6980,7 +7152,9 @@ var SidebarBrandText = React36.forwardRef(
         ref,
         "aria-hidden": "false",
         className: cn(
-          "min-w-0 truncate",
+          // line-clamp-1 (not `truncate`) so multi-word wordmarks clip at a
+          // word boundary instead of mid-word when the rail is narrow.
+          "min-w-0 line-clamp-1",
           // Smooth fade + width collapse on rail. Keeps the wordmark
           // legible up to the moment the column reaches rail width, then
           // fully drops out (visibility:hidden cuts hit-testing).
@@ -7098,7 +7272,10 @@ var SidebarLink = React36.forwardRef(
             "span",
             {
               className: cn(
-                "min-w-0 flex-1 truncate",
+                // line-clamp-1 (not `truncate`) so multi-word labels clip at a
+                // word boundary; collapses cleanly with the rail-mode max-width
+                // animation since both rules only constrain visible content.
+                "min-w-0 flex-1 line-clamp-1",
                 "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
                 "max-w-full opacity-100",
                 "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible"
@@ -7119,7 +7296,10 @@ var SidebarLinkLabel = React36.forwardRef(
       {
         ref,
         className: cn(
-          "min-w-0 flex-1 truncate",
+          // line-clamp-1 (not `truncate`) so multi-word labels clip at a
+          // word boundary; collapses cleanly with the rail-mode max-width
+          // animation since both rules only constrain visible content.
+          "min-w-0 flex-1 line-clamp-1",
           // Fade + collapse instead of hard display:none so a single
           // 180ms opacity tween covers all labels in lockstep with the
           // 220ms aside-width transition — no snap on the last frame.
@@ -7237,7 +7417,10 @@ var SidebarLinkGroup = React36.forwardRef(
       "span",
       {
         className: cn(
-          "min-w-0 flex-1 truncate",
+          // line-clamp-1 (not `truncate`) so multi-word labels clip at a
+          // word boundary; collapses cleanly with the rail-mode max-width
+          // animation since both rules only constrain visible content.
+          "min-w-0 flex-1 line-clamp-1",
           "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
           "max-w-full opacity-100",
           "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible"
@@ -7331,8 +7514,8 @@ var SidebarUser = React36.forwardRef(function SidebarUser2({ name, subtitle, ava
           "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible"
         ),
         children: [
-          /* @__PURE__ */ jsx("div", { className: "text-fg truncate text-[13px] font-medium", children: name }),
-          subtitle != null && /* @__PURE__ */ jsx("div", { className: "text-fg-4 truncate font-mono text-[10.5px]", children: subtitle })
+          /* @__PURE__ */ jsx("div", { className: "text-fg line-clamp-1 text-[13px] font-medium", children: name }),
+          subtitle != null && /* @__PURE__ */ jsx("div", { className: "text-fg-4 line-clamp-1 font-mono text-[10.5px]", children: subtitle })
         ]
       }
     )
@@ -7401,7 +7584,7 @@ var AppHeaderSearch = forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsx(SearchIcon, { className: "size-[13px] shrink-0", strokeWidth: 1.8, "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { className: "truncate text-left", children: placeholder }),
+          /* @__PURE__ */ jsx("span", { className: "line-clamp-1 text-left", children: placeholder }),
           shortcut !== null && shortcut !== void 0 && shortcut !== "" && /* @__PURE__ */ jsx(
             "kbd",
             {
@@ -7424,11 +7607,15 @@ var AppHeaderActions = forwardRef(
   }
 );
 AppHeaderActions.displayName = "AppHeaderActions";
-var PageHeader = forwardRef(function PageHeader2({ eyebrow, title, meta, className, ...props }, ref) {
+var PageHeader = forwardRef(function PageHeader2({ eyebrow, title, description, actions, meta, className, ...props }, ref) {
   return /* @__PURE__ */ jsxs("header", { ref, className: cn("mb-7", className), ...props, children: [
     eyebrow && /* @__PURE__ */ jsx("div", { className: "mb-1.5", children: eyebrow }),
-    /* @__PURE__ */ jsx("h1", { className: "font-display text-fg text-[26px] leading-tight tracking-tight", children: title }),
-    meta && /* @__PURE__ */ jsx("div", { className: "text-fg-3 mt-2 flex items-center gap-2 text-sm", children: meta })
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("h1", { className: "font-display text-fg text-[26px] leading-tight tracking-tight", children: title }),
+      actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+    ] }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-2 max-w-2xl text-sm leading-relaxed", children: description }),
+    meta && /* @__PURE__ */ jsx("div", { className: "text-fg-3 mt-2 flex flex-wrap items-center gap-2 text-sm", children: meta })
   ] });
 });
 PageHeader.displayName = "PageHeader";
@@ -7460,6 +7647,173 @@ var PageHeaderSep = forwardRef(function PageHeaderSep2({ children, className, ..
   );
 });
 PageHeaderSep.displayName = "PageHeaderSep";
+var columnsToGridCols = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4"
+};
+var MetadataGrid = forwardRef(function MetadataGrid2({ columns = 2, gapX = "gap-x-6", gapY = "gap-y-3", className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      ref,
+      className: cn("grid", columnsToGridCols[columns], gapX, gapY, className),
+      ...props,
+      children
+    }
+  );
+});
+MetadataGrid.displayName = "MetadataGrid";
+var spanToColSpan = {
+  1: "col-span-1",
+  2: "col-span-2",
+  3: "col-span-3",
+  4: "col-span-4"
+};
+function DataItem({ label, value, span = 1, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", spanToColSpan[span], className), children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-fg-4 text-[11px] font-medium uppercase tracking-wider", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "text-fg mt-0.5 break-words text-sm", children: value })
+  ] });
+}
+var toneToTile = {
+  info: "bg-info/10 text-info",
+  success: "bg-success-fg/10 text-success-fg",
+  warning: "bg-warning-fg/10 text-warning-fg",
+  destructive: "bg-danger-fg/10 text-danger-fg",
+  accent: "bg-accent/10 text-accent",
+  muted: "bg-bg-3 text-fg-3"
+};
+var toneToValue = {
+  info: "text-info",
+  success: "text-success-fg",
+  warning: "text-warning-fg",
+  destructive: "text-danger-fg",
+  accent: "text-accent",
+  muted: "text-fg"
+};
+var sentimentChip = {
+  positive: "bg-success-bg text-success-fg",
+  negative: "bg-danger-bg text-danger-fg",
+  neutral: "bg-bg-3 text-fg-3"
+};
+var sentimentText = {
+  positive: "text-success-fg",
+  negative: "text-danger-fg",
+  neutral: "text-fg-3"
+};
+var directionToSentiment = {
+  up: "positive",
+  down: "negative",
+  flat: "neutral"
+};
+var directionToIcon = {
+  up: TrendingUpIcon,
+  down: TrendingDownIcon,
+  flat: MinusIcon
+};
+var directionToSrLabel = {
+  up: "Up",
+  down: "Down",
+  flat: "No change"
+};
+function Sparkline({ data, className }) {
+  if (data.length < 2) return null;
+  const w = 100;
+  const h = 28;
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const coords = data.map((d, i) => {
+    const x = i / (data.length - 1) * w;
+    const y = h - (d - min) / range * (h - 2) - 1;
+    return [x, y];
+  });
+  const line = coords.map(([x, y]) => `${x.toFixed(2)},${y.toFixed(2)}`).join(" ");
+  const area = `0,${h} ${line} ${w},${h}`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${w} ${h}`,
+      preserveAspectRatio: "none",
+      className: cn("h-7 w-full", className),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("polygon", { points: area, fill: "currentColor", className: "opacity-10" }),
+        /* @__PURE__ */ jsx(
+          "polyline",
+          {
+            points: line,
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            vectorEffect: "non-scaling-stroke"
+          }
+        )
+      ]
+    }
+  );
+}
+var KpiCard = forwardRef(function KpiCard2({ label, value, icon, tone = "muted", delta, trend, hint, action, toneValue, className, ...props }, ref) {
+  const deltaSentiment = delta ? delta.sentiment ?? directionToSentiment[delta.direction] : null;
+  const DeltaIcon = delta ? directionToIcon[delta.direction] : null;
+  const sparkColor = deltaSentiment ? sentimentText[deltaSentiment] : toneToValue[tone];
+  return /* @__PURE__ */ jsxs(Card, { ref, className: cn("p-4", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+      icon && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg]:size-5",
+            toneToTile[tone]
+          ),
+          children: icon
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-2xl font-bold tracking-tight tabular-nums",
+                toneValue ? toneToValue[tone] : "text-fg"
+              ),
+              children: value
+            }
+          ),
+          delta && DeltaIcon && deltaSentiment && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[11px] font-semibold tabular-nums",
+                sentimentChip[deltaSentiment]
+              ),
+              children: [
+                /* @__PURE__ */ jsx(DeltaIcon, { className: "size-3" }),
+                /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                  directionToSrLabel[delta.direction],
+                  " "
+                ] }),
+                delta.value
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-fg-3 text-xs", children: label }),
+        delta?.label && /* @__PURE__ */ jsx("p", { className: "text-fg-4 mt-0.5 text-[11px]", children: delta.label }),
+        hint && /* @__PURE__ */ jsx("p", { className: "text-fg-4 mt-0.5 text-[11px]", children: hint })
+      ] }),
+      action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
+    ] }),
+    trend && trend.length > 1 && /* @__PURE__ */ jsx(Sparkline, { data: trend, className: cn("mt-3", sparkColor) })
+  ] });
+});
+KpiCard.displayName = "KpiCard";
 var DataTable = forwardRef(function DataTable2({ withToolbar, className, children, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -7830,7 +8184,7 @@ var DetailSpineHeader = forwardRef(
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx("div", { className: "font-display text-fg truncate text-base leading-tight font-medium", children: title }),
+        /* @__PURE__ */ jsx("div", { className: "font-display text-fg line-clamp-1 text-base leading-tight font-medium", children: title }),
         /* @__PURE__ */ jsx("div", { className: "font-spec text-fg-4 text-[11px]", children: subtitle })
       ] })
     ] });
@@ -7909,27 +8263,51 @@ var KanbanColumn = forwardRef(function KanbanColumn2({ title, count, className,
   );
 });
 KanbanColumn.displayName = "KanbanColumn";
-var kanbanCardVariants = cva(
-  cn(
-    "bg-surface border border-rule rounded-card shadow-quiet p-3 space-y-2 cursor-grab",
-    "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none"
-  ),
-  {
-    variants: {
-      variant: {
-        default: "",
-        pro: "border-l-2 border-l-pro-fg",
-        warn: "border-l-2 border-l-warning-fg",
-        danger: "border-l-2 border-l-danger-fg"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
+var kanbanCardBase = cn(
+  "bg-surface border border-rule rounded-card shadow-quiet p-3 space-y-2 cursor-grab",
+  "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] hover:border-rule-strong motion-reduce:transition-none"
 );
-var KanbanCard = forwardRef(function KanbanCard2({ variant, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn(kanbanCardVariants({ variant }), className), ...props, children });
+var priorityConfig = {
+  high: { label: "High", variant: "destructive" },
+  medium: { label: "Med", variant: "warning" },
+  low: { label: "Low", variant: "secondary" }
+};
+var dueStatusClass = {
+  overdue: "text-danger-fg font-semibold",
+  soon: "text-warning-fg font-semibold",
+  default: "text-fg-3 font-medium"
+};
+var KanbanCard = forwardRef(function KanbanCard2({ className, label, title, client, priority, dueDate, dueStatus, assignee, children, ...props }, ref) {
+  const isRich = title !== void 0;
+  const pri = priority ? priorityConfig[priority] : null;
+  const hasFooter = Boolean(dueDate || assignee);
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(kanbanCardBase, className), ...props, children: isRich ? /* @__PURE__ */ jsxs("div", { children: [
+    (label || pri) && /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-start justify-between gap-2", children: [
+      label ? /* @__PURE__ */ jsx(Badge, { variant: "info", size: "sm", children: label }) : /* @__PURE__ */ jsx("span", {}),
+      pri && /* @__PURE__ */ jsx(Badge, { variant: pri.variant, size: "sm", children: pri.label })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-fg text-[13px] leading-snug font-semibold", children: title }),
+    client && /* @__PURE__ */ jsxs("p", { className: "text-fg-3 mt-1 flex items-center gap-1.5 text-xs", children: [
+      /* @__PURE__ */ jsx(UserIcon, { className: "size-3 shrink-0", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: client })
+    ] }),
+    hasFooter && /* @__PURE__ */ jsxs("div", { className: "border-rule-soft mt-3 flex items-center justify-between border-t pt-2.5", children: [
+      dueDate ? /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "flex items-center gap-1 text-xs",
+            dueStatusClass[dueStatus ?? "default"]
+          ),
+          children: [
+            /* @__PURE__ */ jsx(CalendarIcon, { className: "size-3 shrink-0", "aria-hidden": "true" }),
+            dueDate
+          ]
+        }
+      ) : /* @__PURE__ */ jsx("span", {}),
+      assignee && /* @__PURE__ */ jsx(Avatar, { size: "xs", name: assignee.name, src: assignee.src, title: assignee.name })
+    ] })
+  ] }) : children });
 });
 KanbanCard.displayName = "KanbanCard";
 var Toolbar = forwardRef(function Toolbar2({ className, children, ...props }, ref) {
@@ -8059,6 +8437,6 @@ var KbdHint = forwardRef(function KbdHint2({ className, children, ...props }, re
 });
 KbdHint.displayName = "KbdHint";
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityItem, ActivityList, Alert, AlertCircleIcon, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTriangleIcon, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, AspectRatio, AtSignIcon, Avatar, Badge, BarChartIcon, BellIcon, Blockquote, BoldIcon, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BriefcaseIcon, Building2Icon, BuildingIcon, Button, Calendar, CalendarIcon, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatBubbleIcon, CheckCircle2Icon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, ClientSelect, ClipboardCheckIcon, ClockIcon, CloseIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, ComingSoon, CommandIcon, CommandPalette, ConfirmActionButton, Content15 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyIcon, CornerDownLeftIcon, CreditCardIcon, DATE_DISPLAY_PLACEHOLDER, DangerAction, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DatePicker, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleChip, DocumentIcon, DollarSignIcon, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EyeIcon, EyeOffIcon, Eyebrow, FileIcon, FileReturnIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FlagIcon, FolderClosedIcon, FolderOpenIcon, FolderPlusIcon, FormError, FormSuccess, GlobeIcon, GoogleBrandIcon, HelpCircleIcon, HistoryIcon, HomeIcon, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, IconAction, InboxIcon, InfoIcon, Input, ItalicIcon, Kanban, KanbanCard, KanbanColumn, KanbanIcon, KbdHint, KeyIcon, KeyboardShortcutsDialog, Label4 as Label, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkAction, LinkButton, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, Logo, MailIcon, Main, MapPinIcon, MenuIcon, MessageCircleIcon, MessageCircleWarningIcon, MicrosoftBrandIcon, MinusIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoveIcon, MultiFilterPill, MultiSelectField, MutedSpec, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, Pagination, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PaperclipIcon, PenSignIcon, PencilIcon, PhoneIcon, PhoneInput, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, PrimaryAction, ProgressBar, ProgressRing, RadioGroup3 as RadioGroup, RadioGroupItem, ReceiptIcon, ReplyIcon, RotateCcwIcon, SaveIcon, ScrollArea, ScrollBar, SearchIcon, SearchInput, SearchSelect, SecondaryAction, Section, SectionHead, SectionHeader, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SendIcon, Separator4 as Separator, SettingsIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShieldIcon, SideDrawer, Sidebar, SidebarBrand, SidebarBrandText, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, Skeleton, SkeletonCircle, SkeletonText, SlashIcon, Slider, SmartphoneIcon, SparkleIcon, SparklesIcon, StarIcon, StarRating, Stat, Stepper, StrikethroughIcon, SubmitButton, SunIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableIcon, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagIcon, TeamIcon, TeamMemberSelect, Textarea, ToastProvider, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Trash2Icon, TrashIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VisuallyHidden, WorkflowIcon, XIcon, ZoomInIcon, ZoomOutIcon, alertVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, displayToIso, filterChipVariants, inputVariants, isoToDisplay, kanbanCardVariants, labelVariants, progressBarVariants, progressRingVariants, radii, reference, searchInputVariants, shadows, sidebarLinkBadgeVariants, spacing, starRatingVariants, surfaces, systemTokens, textareaVariants, typography, useSidebarState, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityItem, ActivityList, Alert, AlertCircleIcon, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTriangleIcon, AlertTriangleSolidIcon, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, AspectRatio, AtSignIcon, Avatar, Badge, BarChartIcon, BellIcon, Blockquote, BoldIcon, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BriefcaseIcon, Building2Icon, BuildingIcon, Button, Calendar, CalendarIcon, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatBubbleIcon, CheckCircle2Icon, CheckCircleSolidIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, ClientSelect, ClipboardCheckIcon, ClockIcon, CloseIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, ComingSoon, CommandIcon, CommandPalette, ConfirmActionButton, Content15 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyIcon, CornerDownLeftIcon, CreditCardIcon, DATE_DISPLAY_PLACEHOLDER, DangerAction, DataItem, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DatePicker, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleChip, DocumentIcon, DollarSignIcon, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EyeIcon, EyeOffIcon, Eyebrow, FileIcon, FileReturnIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FlagIcon, FolderClosedIcon, FolderOpenIcon, FolderPlusIcon, FormError, FormSection, FormSuccess, GlobeIcon, GoogleBrandIcon, HelpCircleIcon, HistoryIcon, HomeIcon, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, IconAction, InboxIcon, InfoCircleSolidIcon, InfoIcon, Input, ItalicIcon, Kanban, KanbanCard, KanbanColumn, KanbanIcon, KbdHint, KeyIcon, KeyboardShortcutsDialog, KpiCard, Label4 as Label, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkAction, LinkButton, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LoadingRows, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, Logo, MailIcon, Main, MapPinIcon, MenuIcon, MessageCircleIcon, MessageCircleWarningIcon, MetadataGrid, MicrosoftBrandIcon, MinusIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoveIcon, MultiFilterPill, MultiSelectField, MutedSpec, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, Pagination, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PaperclipIcon, PenSignIcon, PencilIcon, PhoneIcon, PhoneInput, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, PrimaryAction, ProgressBar, ProgressRing, RadioGroup3 as RadioGroup, RadioGroupItem, ReceiptIcon, ReplyIcon, RotateCcwIcon, SaveIcon, ScrollArea, ScrollBar, SearchIcon, SearchInput, SearchSelect, SecondaryAction, Section, SectionHead, SectionHeader, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SendIcon, Separator4 as Separator, SettingsIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShieldIcon, SideDrawer, Sidebar, SidebarBrand, SidebarBrandText, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, Skeleton, SkeletonCircle, SkeletonText, SlashIcon, Slider, SmartphoneIcon, SparkleIcon, SparklesIcon, StarIcon, StarRating, Stat, Stepper, StrikethroughIcon, SubmitButton, SunIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableIcon, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagIcon, TeamIcon, TeamMemberSelect, Textarea, ToastProvider, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Trash2Icon, TrashIcon, TrendingDownIcon, TrendingUpIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VisuallyHidden, WorkflowIcon, XCircleSolidIcon, XIcon, ZoomInIcon, ZoomOutIcon, alertVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, displayToIso, filterChipVariants, inputVariants, isoToDisplay, labelVariants, progressBarVariants, progressRingVariants, radii, reference, searchInputVariants, shadows, sidebarLinkBadgeVariants, spacing, starRatingVariants, surfaces, systemTokens, textareaVariants, typography, useSidebarState, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map