@assure-one/design-system 0.14.0 → 0.16.0

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React36 from 'react';
-import { forwardRef, useState, useCallback, useId, useRef, useImperativeHandle, useMemo, useEffect, createContext, Fragment as Fragment$1, useContext } from 'react';
+import { forwardRef, useState, useCallback, useId, useRef, useImperativeHandle, useMemo, useEffect, createContext, useContext } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -2189,6 +2189,27 @@ function TrendingDownIcon({ size = 24, ...props }) {
     }
   ) });
 }
+function PlayIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx(Icon, { size, ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M8 5.14v13.72a1 1 0 001.54.84l10.78-6.86a1 1 0 000-1.68L9.54 4.3A1 1 0 008 5.14z",
+      fill: "currentColor",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function PauseIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsxs(Icon, { size, ...props, children: [
+    /* @__PURE__ */ jsx("rect", { x: "7", y: "5", width: "3.5", height: "14", rx: "1", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("rect", { x: "13.5", y: "5", width: "3.5", height: "14", rx: "1", fill: "currentColor" })
+  ] });
+}
+function StopIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx(Icon, { size, ...props, children: /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2", fill: "currentColor" }) });
+}
 var Accordion = React36.forwardRef(function Accordion2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Root,
@@ -2434,7 +2455,7 @@ var AlertTitle = forwardRef(
 );
 AlertTitle.displayName = "AlertTitle";
 var AlertDescription = forwardRef(function AlertDescription2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm opacity-90", className), ...props });
+  return /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm", className), ...props });
 });
 AlertDescription.displayName = "AlertDescription";
 var AspectRatio = React36.forwardRef(function AspectRatio2({ className, ratio = 16 / 9, ...props }, ref) {
@@ -2530,7 +2551,8 @@ var Avatar = React36.forwardRef(
             statusDotSizes[resolvedSize],
             statusStyles[status]
           ),
-          "aria-label": status
+          role: "img",
+          "aria-label": `${status} status`
         }
       )
     ] });
@@ -2713,6 +2735,48 @@ var BreadcrumbSeparator = forwardRef(
   }
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+var spinnerVariants = cva(
+  "inline-flex shrink-0 items-center justify-center [&_svg]:motion-reduce:animate-none",
+  {
+    variants: {
+      size: {
+        xs: "[&_svg]:size-3",
+        sm: "[&_svg]:size-4",
+        md: "[&_svg]:size-5",
+        lg: "[&_svg]:size-6"
+      },
+      tone: {
+        current: "text-current",
+        muted: "text-fg-3",
+        accent: "text-accent",
+        success: "text-success-fg",
+        warning: "text-warning-fg",
+        destructive: "text-danger-fg"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      tone: "current"
+    }
+  }
+);
+var Spinner = forwardRef(function Spinner2({ size, tone, label, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      role: label ? "status" : void 0,
+      "aria-live": label ? "polite" : void 0,
+      className: cn(spinnerVariants({ size, tone }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(LoaderIcon, { className: "animate-spin", "aria-hidden": "true" }),
+        label && /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+      ]
+    }
+  );
+});
+Spinner.displayName = "Spinner";
 var buttonVariants = cva(
   cn(
     "inline-flex items-center justify-center rounded-btn font-medium whitespace-nowrap",
@@ -2726,14 +2790,14 @@ var buttonVariants = cva(
     variants: {
       variant: {
         primary: "bg-pro-fg text-fg-on-pro hover:bg-pro-hover active:bg-pro-active",
-        secondary: "bg-bg-2 text-fg-2 border border-rule hover:bg-bg-3 hover:border-rule-strong",
-        destructive: "bg-danger-fg text-white hover:bg-danger-fg/90 active:bg-danger-fg/80",
-        success: "bg-success-fg text-white hover:bg-success-fg/90 active:bg-success-fg/80",
-        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",
+        secondary: "bg-control-secondary-bg text-control-fg border border-control-border hover:bg-control-active-bg hover:border-control-border-strong",
+        destructive: "bg-danger-fg text-fg-on-danger hover:bg-danger-fg-hover active:bg-danger-fg-active",
+        success: "bg-success-fg text-fg-on-success hover:bg-success-fg-hover active:bg-success-fg-active",
+        ghost: "bg-control-bg text-control-fg hover:bg-control-hover-bg hover:text-control-hover-fg",
+        outline: "border border-control-border-strong bg-control-bg text-control-fg hover:bg-control-hover-bg hover:border-control-border-hover",
         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",
-        dashed: "border-2 border-dashed border-rule bg-transparent text-fg-3 hover:border-fg-4 hover:bg-bg-2 hover:text-fg"
+        dashed: "border-2 border-dashed border-control-border bg-control-bg text-control-muted-fg hover:border-control-border-hover hover:bg-control-hover-bg hover:text-control-hover-fg"
       },
       size: {
         sm: "h-8 px-3 text-[13px] gap-1.5",
@@ -2753,30 +2817,6 @@ var buttonVariants = cva(
     }
   }
 );
-var Spinner = () => /* @__PURE__ */ jsxs("svg", { className: "size-4 animate-spin", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
-  /* @__PURE__ */ jsx(
-    "circle",
-    {
-      cx: "12",
-      cy: "12",
-      r: "10",
-      stroke: "currentColor",
-      strokeWidth: "3",
-      strokeLinecap: "round",
-      className: "opacity-25"
-    }
-  ),
-  /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M4 12a8 8 0 018-8",
-      stroke: "currentColor",
-      strokeWidth: "3",
-      strokeLinecap: "round",
-      className: "opacity-75"
-    }
-  )
-] });
 var Button = forwardRef(function Button2({
   variant,
   size,
@@ -2801,7 +2841,7 @@ var Button = forwardRef(function Button2({
       className: cn(buttonVariants({ variant, size }), className),
       ...props,
       children: [
-        loading ? /* @__PURE__ */ jsx(Spinner, {}) : iconLeft && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", "aria-hidden": "true", children: iconLeft }),
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : iconLeft && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", "aria-hidden": "true", children: iconLeft }),
         children,
         iconRight && !loading && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", "aria-hidden": "true", children: iconRight })
       ]
@@ -2890,7 +2930,7 @@ function Calendar({
         ),
         today: "[&_button]:font-semibold [&_button]:text-accent",
         selected: "[&_button]:bg-pro-fg [&_button]:text-fg-on-pro [&_button]:hover:bg-pro-hover [&_button]:focus-visible:bg-pro-fg",
-        outside: "[&_button]:text-fg-5",
+        outside: "[&_button]:text-fg-4",
         disabled: "[&_button]:text-fg-disabled",
         hidden: "invisible",
         ...classNames
@@ -3176,7 +3216,7 @@ function Select({
           SelectTrigger,
           {
             "aria-invalid": ariaInvalid || void 0,
-            "aria-label": ariaLabel,
+            "aria-label": ariaLabel ?? placeholder,
             className: cn(triggerClassName, className),
             children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
           }
@@ -3590,16 +3630,30 @@ function ConfirmActionButton({
   cancelLabel = "Cancel",
   onConfirm,
   destructive = true,
-  contentClassName
+  contentClassName,
+  open,
+  defaultOpen = false,
+  onOpenChange
 }) {
-  const [open, setOpen] = React36.useState(false);
+  const isControlled = open !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = React36.useState(defaultOpen);
+  const resolvedOpen = isControlled ? open : uncontrolledOpen;
   const [pending, setPending] = React36.useState(false);
+  const setDialogOpen = React36.useCallback(
+    (nextOpen) => {
+      onOpenChange?.(nextOpen);
+      if (!isControlled) {
+        setUncontrolledOpen(nextOpen);
+      }
+    },
+    [isControlled, onOpenChange]
+  );
   const handleConfirm = async (event) => {
     event.preventDefault();
     setPending(true);
     try {
       await onConfirm();
-      setOpen(false);
+      setDialogOpen(false);
     } finally {
       setPending(false);
     }
@@ -3607,10 +3661,10 @@ function ConfirmActionButton({
   return /* @__PURE__ */ jsxs(
     AlertDialog,
     {
-      open,
+      open: resolvedOpen,
       onOpenChange: (next) => {
         if (pending) return;
-        setOpen(next);
+        setDialogOpen(next);
       },
       children: [
         /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: trigger }),
@@ -4443,9 +4497,9 @@ var DropdownMenuSubTrigger = React36.forwardRef(({ className, inset, children, .
     ref,
     className: cn(
       "rounded-pill flex cursor-default items-center gap-2 px-2 py-1.5 text-sm outline-none select-none",
-      "text-fg-2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-      "focus:bg-bg-2 focus:text-fg",
-      "data-[state=open]:bg-bg-2 data-[state=open]:text-fg",
+      "text-menu-item-fg transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+      "focus:bg-menu-item-hover-bg focus:text-menu-item-hover-fg",
+      "data-[state=open]:bg-menu-item-hover-bg data-[state=open]:text-menu-item-hover-fg",
       "data-[disabled]:text-fg-disabled data-[disabled]:pointer-events-none",
       inset && "pl-8",
       className
@@ -4469,7 +4523,7 @@ var DropdownMenuSubContent = React36.forwardRef(({ className, ...props }, ref) =
     {
       ref,
       className: cn(
-        "rounded-card border-rule bg-surface text-fg shadow-pop z-[var(--z-dropdown)] min-w-[8rem] overflow-hidden border p-1",
+        "rounded-card border-menu-border bg-menu-bg text-menu-fg shadow-pop z-[var(--z-dropdown)] min-w-[8rem] overflow-hidden border p-1",
         "transition-[opacity,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
         "data-[state=closed]:scale-95 data-[state=closed]:opacity-0",
         "data-[state=open]:scale-100 data-[state=open]:opacity-100",
@@ -4488,7 +4542,7 @@ var DropdownMenuContent = React36.forwardRef(({ className, sideOffset = 6, align
     sideOffset,
     align,
     className: cn(
-      "rounded-card border-rule bg-surface text-fg shadow-pop z-[var(--z-dropdown)] min-w-[10rem] overflow-hidden border p-1",
+      "rounded-card border-menu-border bg-menu-bg text-menu-fg shadow-pop z-[var(--z-dropdown)] min-w-[10rem] overflow-hidden border p-1",
       "transition-[opacity,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
       "data-[state=closed]:scale-95 data-[state=closed]:opacity-0",
       "data-[state=open]:scale-100 data-[state=open]:opacity-100",
@@ -4505,12 +4559,12 @@ var DropdownMenuItem = React36.forwardRef(({ className, destructive, inset, ...p
     ref,
     className: cn(
       "rounded-pill relative flex cursor-default items-center gap-2 px-2 py-1.5 text-sm outline-none select-none",
-      "text-fg-2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-      "focus:bg-bg-2 focus:text-fg",
+      "text-menu-item-fg transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+      "focus:bg-menu-item-hover-bg focus:text-menu-item-hover-fg",
       "data-[disabled]:text-fg-disabled data-[disabled]:pointer-events-none",
       "[&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
-      destructive && "text-danger-fg focus:bg-danger-bg focus:text-danger-fg",
+      destructive && "text-menu-item-destructive-fg focus:bg-menu-item-destructive-hover-bg focus:text-menu-item-destructive-hover-fg",
       className
     ),
     ...props
@@ -4524,8 +4578,8 @@ var DropdownMenuCheckboxItem = React36.forwardRef(({ className, children, checke
     checked,
     className: cn(
       "rounded-pill relative flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8 text-sm outline-none select-none",
-      "text-fg-2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-      "focus:bg-bg-2 focus:text-fg",
+      "text-menu-item-fg transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+      "focus:bg-menu-item-hover-bg focus:text-menu-item-hover-fg",
       "data-[disabled]:text-fg-disabled data-[disabled]:pointer-events-none",
       className
     ),
@@ -4543,8 +4597,8 @@ var DropdownMenuRadioItem = React36.forwardRef(({ className, children, ...props
     ref,
     className: cn(
       "rounded-pill relative flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8 text-sm outline-none select-none",
-      "text-fg-2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-      "focus:bg-bg-2 focus:text-fg",
+      "text-menu-item-fg transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+      "focus:bg-menu-item-hover-bg focus:text-menu-item-hover-fg",
       "data-[disabled]:text-fg-disabled data-[disabled]:pointer-events-none",
       className
     ),
@@ -4561,7 +4615,7 @@ var DropdownMenuLabel = React36.forwardRef(({ className, inset, ...props }, ref)
   {
     ref,
     className: cn(
-      "text-fg-3 px-2 py-1.5 font-mono text-[11px] tracking-wider uppercase",
+      "text-menu-label-fg px-2 py-1.5 font-mono text-[11px] tracking-wider uppercase",
       inset && "pl-8",
       className
     ),
@@ -4573,7 +4627,7 @@ var DropdownMenuSeparator = React36.forwardRef(({ className, ...props }, ref) =>
   DropdownMenuPrimitive.Separator,
   {
     ref,
-    className: cn("bg-rule -mx-1 my-1 h-px", className),
+    className: cn("bg-menu-border -mx-1 my-1 h-px", className),
     ...props
   }
 ));
@@ -4581,7 +4635,7 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "span",
   {
-    className: cn("text-fg-4 ml-auto font-mono text-[11px] tracking-wider", className),
+    className: cn("text-menu-shortcut-fg ml-auto font-mono text-[11px] tracking-wider", className),
     ...props
   }
 );
@@ -5137,7 +5191,7 @@ function Logo({
               /* @__PURE__ */ jsx("span", { children: "Assure" }),
               productName && /* @__PURE__ */ jsxs(Fragment, { children: [
                 " ",
-                /* @__PURE__ */ jsx("span", { className: "text-pro-fg font-medium", children: productName })
+                /* @__PURE__ */ jsx("span", { className: cn("font-medium", inverted ? "text-[#d8cfff]" : "text-pro-fg"), children: productName })
               ] })
             ]
           }
@@ -5163,37 +5217,35 @@ function MultiFilterPill({
   const active = selected.size > 0;
   const displayLabel = active ? selected.size === 1 ? options.find((o) => o.key === [...selected][0])?.label ?? label : `${label} \xB7 ${selected.size}` : label;
   return /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsxs(
-      PopoverTrigger,
+    active ? /* @__PURE__ */ jsxs(
+      "div",
       {
         className: cn(
           "rounded-pill font-body inline-flex items-center border font-medium",
           TRIGGER_SIZE[size],
+          "border-pro-line bg-pro-bg text-pro-fg hover:bg-pro-bg-hover",
           "transition-[color,background-color,border-color,box-shadow] 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",
-          active ? "border-pro-line bg-pro-bg text-pro-fg hover:bg-pro-bg-hover" : "border-rule bg-surface text-fg-2 hover:border-rule-strong hover:bg-bg-2 hover:text-fg"
+          "motion-reduce:transition-none"
         ),
         children: [
-          icon && /* @__PURE__ */ jsx("span", { className: "[&>svg]:size-3.5", "aria-hidden": "true", children: icon }),
-          /* @__PURE__ */ jsx("span", { className: "line-clamp-1", children: displayLabel }),
-          active ? /* @__PURE__ */ jsx(
-            "span",
+          /* @__PURE__ */ jsxs(
+            PopoverTrigger,
             {
-              role: "button",
-              tabIndex: 0,
-              onClick: (e) => {
-                e.stopPropagation();
-                e.preventDefault();
-                onClear();
-              },
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  onClear();
-                }
-              },
+              className: cn(
+                "inline-flex min-w-0 flex-1 items-center gap-1.5 rounded-pill outline-none",
+                "focus-visible:[box-shadow:var(--shadow-focus-ring)]"
+              ),
+              children: [
+                icon && /* @__PURE__ */ jsx("span", { className: "[&>svg]:size-3.5", "aria-hidden": "true", children: icon }),
+                /* @__PURE__ */ jsx("span", { className: "line-clamp-1", children: displayLabel })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClear,
               className: cn(
                 "ml-0.5 inline-flex size-4 items-center justify-center rounded-full",
                 "text-pro-fg transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
@@ -5204,7 +5256,24 @@ function MultiFilterPill({
               "aria-label": `Clear ${label} filter`,
               children: /* @__PURE__ */ jsx(XIcon, { className: "size-3", "aria-hidden": "true" })
             }
-          ) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-fg-4 size-3 shrink-0", "aria-hidden": "true" })
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(
+      PopoverTrigger,
+      {
+        className: cn(
+          "rounded-pill font-body inline-flex items-center border font-medium",
+          TRIGGER_SIZE[size],
+          "border-rule bg-surface text-fg-2 hover:border-rule-strong hover:bg-bg-2 hover:text-fg",
+          "transition-[color,background-color,border-color,box-shadow] 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"
+        ),
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "[&>svg]:size-3.5", "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "line-clamp-1", children: displayLabel }),
+          /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-fg-4 size-3 shrink-0", "aria-hidden": "true" })
         ]
       }
     ),
@@ -5355,7 +5424,8 @@ function OTPInput({
   onChange,
   onComplete,
   id,
-  disabled
+  disabled,
+  "aria-label": ariaLabel
 }) {
   const errorId = id ? `${id}-error` : void 0;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
@@ -5374,6 +5444,7 @@ function OTPInput({
         onChange,
         onComplete,
         disabled,
+        "aria-label": ariaLabel ?? "One-time password",
         "aria-invalid": error ? true : void 0,
         "aria-describedby": error ? errorId : void 0,
         containerClassName: cn(
@@ -5476,7 +5547,7 @@ var Pagination = forwardRef(function Pagination2({
     "nav",
     {
       ref,
-      "aria-label": "Pagination",
+      "aria-label": `Pagination, page ${currentPage} of ${totalPages}`,
       className: cn("flex items-center justify-between gap-4", className),
       ...props,
       children: [
@@ -5823,7 +5894,14 @@ var ScrollArea = React36.forwardRef(function ScrollArea2({ className, children,
       className: cn("relative overflow-hidden", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+        /* @__PURE__ */ jsx(
+          ScrollAreaPrimitive.Viewport,
+          {
+            tabIndex: 0,
+            className: "h-full w-full rounded-[inherit] focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+            children
+          }
+        ),
         /* @__PURE__ */ jsx(ScrollBar, {}),
         /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
       ]
@@ -6070,8 +6148,21 @@ function SearchSelect({
     }
   }, [onCreate, trimmedSearch]);
   const inputRef = React36.useRef(null);
+  const listboxId = React36.useId();
+  const setInputRef = React36.useCallback((node) => {
+    inputRef.current = node;
+    node?.removeAttribute("aria-labelledby");
+    node?.setAttribute("aria-controls", listboxId);
+    node?.removeAttribute("aria-activedescendant");
+  }, [listboxId]);
   const singleValue = closeOnSelect ? selected[0] ?? null : null;
   const showValue = singleValue !== null && !open;
+  const popoverOpen = open && !disabled;
+  React36.useEffect(() => {
+    inputRef.current?.removeAttribute("aria-labelledby");
+    inputRef.current?.setAttribute("aria-controls", listboxId);
+    inputRef.current?.removeAttribute("aria-activedescendant");
+  });
   React36.useEffect(() => {
     if (open && closeOnSelect) {
       const raf = requestAnimationFrame(() => inputRef.current?.focus());
@@ -6110,10 +6201,12 @@ function SearchSelect({
       },
       item.id
     )) }),
-    /* @__PURE__ */ jsx(Popover, { open: open && !disabled, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(
+    !popoverOpen && /* @__PURE__ */ jsx("div", { id: listboxId, role: "listbox", hidden: true }),
+    /* @__PURE__ */ jsx(Popover, { open: popoverOpen, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(
       Command,
       {
         shouldFilter: true,
+        label: placeholder,
         className: "overflow-visible bg-transparent",
         onKeyDown: (e) => {
           if (e.key === "Escape") {
@@ -6210,7 +6303,7 @@ function SearchSelect({
                 /* @__PURE__ */ jsx(
                   Command.Input,
                   {
-                    ref: inputRef,
+                    ref: setInputRef,
                     value: search,
                     onValueChange: (v) => {
                       setSearch(v);
@@ -6220,6 +6313,8 @@ function SearchSelect({
                       if (!disabled) setOpen(true);
                     },
                     placeholder,
+                    "aria-label": placeholder,
+                    "aria-controls": listboxId,
                     disabled,
                     className: cn(
                       "font-body text-fg flex-1 bg-transparent py-2 pr-3 pl-9 text-[13px] outline-none",
@@ -6268,6 +6363,7 @@ function SearchSelect({
                 /* @__PURE__ */ jsxs(
                   Command.List,
                   {
+                    id: listboxId,
                     className: cn(
                       // No top padding: a sticky group heading pins at top-0, so any
                       // top padding would leave a strip above it where the previous
@@ -6533,38 +6629,51 @@ var sheetVariants = cva(
     defaultVariants: { side: "right" }
   }
 );
-var SheetContent = React36.forwardRef(({ side, className, children, showCloseButton = true, ...props }, ref) => {
-  const ctx = React36.use(SheetSideContext);
-  const resolvedSide = side ?? ctx.side ?? "right";
-  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
-    /* @__PURE__ */ jsx(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
-      {
-        ref,
-        className: cn(sheetVariants({ side: resolvedSide }), className),
-        ...props,
-        children: [
-          children,
-          showCloseButton && /* @__PURE__ */ jsx(
-            DialogPrimitive.Close,
-            {
-              className: cn(
-                "absolute top-4 right-4 inline-flex size-7 items-center justify-center",
-                "rounded-icon text-fg-4 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-                "hover:bg-overlay-hover hover:text-fg",
-                "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
-                "disabled:pointer-events-none"
-              ),
-              "aria-label": "Close",
-              children: /* @__PURE__ */ jsx(XIcon, { className: "size-4", "aria-hidden": "true" })
-            }
-          )
-        ]
-      }
-    )
-  ] });
-});
+var sheetWidthClasses = {
+  sm: "w-[95vw] max-w-[95vw] sm:w-[420px]",
+  md: "w-[95vw] max-w-[95vw] sm:w-[520px]",
+  lg: "w-[95vw] max-w-[95vw] sm:w-[640px]",
+  xl: "w-[95vw] max-w-[95vw] sm:w-[760px]",
+  full: "w-full max-w-none"
+};
+var SheetContent = React36.forwardRef(
+  ({ side, width = "default", customWidth, className, children, showCloseButton = true, style, ...props }, ref) => {
+    const ctx = React36.use(SheetSideContext);
+    const resolvedSide = side ?? ctx.side ?? "right";
+    const supportsWidth = resolvedSide === "left" || resolvedSide === "right";
+    const widthClass = supportsWidth && width !== "default" ? sheetWidthClasses[width] : null;
+    const widthStyle = supportsWidth && customWidth ? { width: customWidth, maxWidth: "95vw", ...style } : style;
+    return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+      /* @__PURE__ */ jsx(SheetOverlay, {}),
+      /* @__PURE__ */ jsxs(
+        DialogPrimitive.Content,
+        {
+          ref,
+          className: cn(sheetVariants({ side: resolvedSide }), widthClass, className),
+          style: widthStyle,
+          ...props,
+          children: [
+            children,
+            showCloseButton && /* @__PURE__ */ jsx(
+              DialogPrimitive.Close,
+              {
+                className: cn(
+                  "absolute top-4 right-4 inline-flex size-7 items-center justify-center",
+                  "rounded-icon text-fg-4 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+                  "hover:bg-overlay-hover hover:text-fg",
+                  "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+                  "disabled:pointer-events-none"
+                ),
+                "aria-label": "Close",
+                children: /* @__PURE__ */ jsx(XIcon, { className: "size-4", "aria-hidden": "true" })
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
 SheetContent.displayName = DialogPrimitive.Content.displayName;
 var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5 p-6 pr-12 pb-0", className), ...props });
 SheetHeader.displayName = "SheetHeader";
@@ -6728,6 +6837,7 @@ var Slider = React36.forwardRef(
       if (typeof v === "number") return v;
       return min;
     })();
+    const accessibleName = props["aria-label"] ?? label ?? "Slider value";
     return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
       (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
         label ? /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-fg text-[13px] leading-none font-medium", children: label }) : /* @__PURE__ */ jsx("span", {}),
@@ -6762,7 +6872,7 @@ var Slider = React36.forwardRef(
                   "data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed",
                   "data-[disabled]:border-fg-disabled data-[disabled]:bg-bg-disabled"
                 ),
-                "aria-label": label
+                "aria-label": accessibleName
               }
             )
           ]
@@ -7527,6 +7637,7 @@ function ToastProvider({ children }) {
       "div",
       {
         className: "pointer-events-none fixed top-4 right-4 z-[var(--z-toast)] flex flex-col gap-2",
+        role: "region",
         "aria-live": "polite",
         "aria-label": "Notifications",
         children: toasts.map((t) => /* @__PURE__ */ jsx(ToastItem, { toast: t, onDismiss: removeToast }, t.id))
@@ -7753,13 +7864,21 @@ var Main = forwardRef(function Main2({ className, ...props }, ref) {
   );
 });
 Main.displayName = "Main";
-var Content15 = forwardRef(function Content16({ padBottom, className, style, ...props }, ref) {
+var Content15 = forwardRef(function Content16({ padTop, padBottom, className, style, ...props }, ref) {
+  const paddingStyle = padTop || padBottom ? {
+    ...padTop ? { paddingTop: padTop } : null,
+    ...padBottom ? { paddingBottom: padBottom } : null,
+    ...style
+  } : style;
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
+      role: "region",
+      "aria-label": "Page content",
+      tabIndex: 0,
       className: cn("flex-1 overflow-y-auto p-[var(--content-pad)]", className),
-      style: padBottom ? { paddingBottom: padBottom, ...style } : style,
+      style: paddingStyle,
       ...props
     }
   );
@@ -8172,9 +8291,19 @@ var SidebarSection = React36.forwardRef(
   }
 );
 SidebarSection.displayName = "SidebarSection";
+function getTextContent(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(getTextContent).filter(Boolean).join(" ");
+  if (React36.isValidElement(node)) {
+    return getTextContent(node.props.children);
+  }
+  return "";
+}
 var SidebarLink = React36.forwardRef(
-  function SidebarLink2({ href, icon, active = false, asChild, className, children, ...props }, ref) {
+  function SidebarLink2({ href, icon, active = false, asChild, className, children, "aria-label": ariaLabel, ...props }, ref) {
     const Comp = asChild ? Slot : "a";
+    const accessibleLabel = ariaLabel ?? (asChild ? void 0 : getTextContent(children) || void 0);
     return /* @__PURE__ */ jsx(
       Comp,
       {
@@ -8182,6 +8311,7 @@ var SidebarLink = React36.forwardRef(
         ...asChild ? {} : { href },
         "data-active": active ? "true" : void 0,
         "aria-current": active ? "page" : void 0,
+        "aria-label": accessibleLabel,
         className: cn(
           "group/link relative mb-px flex items-center gap-2.5 rounded-md px-2.5 py-1.5",
           "text-fg-2 text-[13px] font-normal no-underline",
@@ -8381,6 +8511,7 @@ var SidebarLinkGroup = React36.forwardRef(
             href,
             "data-active": active ? "true" : void 0,
             "aria-current": active ? "page" : void 0,
+            "aria-label": getTextContent(label) || void 0,
             onClick: handleBodyClick,
             className: bodyClassName,
             children: [
@@ -8875,11 +9006,21 @@ function Sparkline({ data, className }) {
     }
   );
 }
-var KpiCard = forwardRef(function KpiCard2({ label, value, icon, tone = "muted", delta, trend, hint, action, toneValue, className, ...props }, ref) {
+function KpiCardBody({
+  label,
+  value,
+  icon,
+  tone = "muted",
+  delta,
+  trend,
+  hint,
+  action,
+  toneValue
+}) {
   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: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
       icon && /* @__PURE__ */ jsx(
         "div",
@@ -8923,15 +9064,82 @@ var KpiCard = forwardRef(function KpiCard2({ label, value, icon, tone = "muted",
           )
         ] }),
         /* @__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 })
+        delta?.label && /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-0.5 text-[11px]", children: delta.label }),
+        hint && /* @__PURE__ */ jsx("p", { className: "text-fg-3 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) })
   ] });
+}
+var KpiCard = forwardRef(function KpiCard2({ label, value, icon, tone = "muted", delta, trend, hint, action, toneValue, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(Card, { ref, className: cn("p-4", className), ...props, children: /* @__PURE__ */ jsx(
+    KpiCardBody,
+    {
+      label,
+      value,
+      icon,
+      tone,
+      delta,
+      trend,
+      hint,
+      action,
+      toneValue
+    }
+  ) });
 });
 KpiCard.displayName = "KpiCard";
+var SelectableKpiCard = forwardRef(
+  function SelectableKpiCard2({
+    label,
+    value,
+    icon,
+    tone = "muted",
+    delta,
+    trend,
+    hint,
+    action,
+    toneValue,
+    selected = false,
+    className,
+    type,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: type ?? "button",
+        "aria-pressed": selected,
+        "data-selected": selected ? "true" : "false",
+        className: cn(
+          cardVariants({ variant: "interactive" }),
+          "block w-full p-4 text-left",
+          "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+          "disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-fg-disabled disabled:shadow-none",
+          selected && "border-pro-fg/40 bg-pro-bg hover:bg-pro-bg-hover ring-1 ring-pro-fg/30",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          KpiCardBody,
+          {
+            label,
+            value,
+            icon,
+            tone,
+            delta,
+            trend,
+            hint,
+            action,
+            toneValue
+          }
+        )
+      }
+    );
+  }
+);
+SelectableKpiCard.displayName = "SelectableKpiCard";
 var DataTable = forwardRef(function DataTable2({ withToolbar, className, children, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -9394,7 +9602,21 @@ var ActivityEventItem = forwardRef(
 );
 ActivityEventItem.displayName = "ActivityEventItem";
 var Kanban = forwardRef(function Kanban2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-start gap-4 overflow-x-auto", className), ...props, children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "region",
+      tabIndex: 0,
+      "aria-label": "Kanban board",
+      className: cn(
+        "flex items-start gap-4 overflow-x-auto focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
 });
 Kanban.displayName = "Kanban";
 var KanbanColumn = forwardRef(function KanbanColumn2({ title, count, className, children, ...props }, ref) {
@@ -9670,16 +9892,16 @@ var NotificationPanelHeader = forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-fg text-sm font-semibold", children: title }),
-            unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "bg-accent/10 text-accent rounded-pill px-1.5 py-0.5 text-[11px] font-semibold tabular-nums", children: unreadCount > 99 ? "99+" : unreadCount })
+            /* @__PURE__ */ jsx("h3", { className: "text-fg text-[15px] font-semibold", children: title }),
+            unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "bg-pro-bg text-pro-fg rounded-pill px-1.5 py-0.5 text-[11px] font-semibold tabular-nums", children: unreadCount > 99 ? "99+" : unreadCount })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            onMarkAllRead && unreadCount > 0 && /* @__PURE__ */ jsx(
+            onMarkAllRead && /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
                 onClick: onMarkAllRead,
-                className: "text-fg-3 hover:text-fg text-xs font-medium",
+                className: "text-pro-fg rounded-md px-1.5 py-1 text-sm font-medium hover:bg-[color:var(--color-pro-bg)] focus-visible:ring-accent outline-none focus-visible:ring-2",
                 children: "Mark all read"
               }
             ),
@@ -9702,7 +9924,7 @@ var NotificationPanelHeader = forwardRef(
 NotificationPanelHeader.displayName = "NotificationPanelHeader";
 var FILTER_OPTIONS = ["all", "unread"];
 var NotificationFilter = forwardRef(
-  function NotificationFilter2({ value, onValueChange, actions, className, ...props }, ref) {
+  function NotificationFilter2({ value, onValueChange, counts, actions, className, ...props }, ref) {
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -9713,21 +9935,37 @@ var NotificationFilter = forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx("div", { className: "bg-bg-2 inline-flex rounded-lg p-0.5 text-xs font-medium", children: FILTER_OPTIONS.map((option) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => onValueChange(option),
-              "aria-pressed": value === option,
-              className: cn(
-                "rounded-md px-2.5 py-1 capitalize transition-colors",
-                "focus-visible:ring-accent outline-none focus-visible:ring-2",
-                value === option ? "bg-surface text-fg shadow-quiet ring-rule-soft ring-1" : "text-fg-3 hover:text-fg"
-              ),
-              children: option
-            },
-            option
-          )) }),
+          /* @__PURE__ */ jsx("div", { className: "inline-flex items-center gap-1 text-sm font-medium", children: FILTER_OPTIONS.map((option) => {
+            const selected = value === option;
+            const count = counts?.[option];
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onValueChange(option),
+                "aria-pressed": selected,
+                className: cn(
+                  "inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1 capitalize transition-colors",
+                  "focus-visible:ring-accent outline-none focus-visible:ring-2",
+                  selected ? "bg-surface text-pro-fg ring-1 ring-[color:var(--color-pro-line)]" : "text-fg-3 hover:text-fg"
+                ),
+                children: [
+                  option,
+                  count != null && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "rounded-md px-1.5 py-px text-[11px] font-semibold tabular-nums",
+                        selected ? "bg-pro-bg text-pro-fg" : "bg-bg-2 text-fg-4"
+                      ),
+                      children: count
+                    }
+                  )
+                ]
+              },
+              option
+            );
+          }) }),
           actions
         ]
       }
@@ -9751,27 +9989,25 @@ var NotificationList = forwardRef(
 NotificationList.displayName = "NotificationList";
 var NotificationItem = forwardRef(
   function NotificationItem2({ title, body, typeLabel, client, time, sender, icon, iconClassName, unread, className, ...props }, ref) {
-    const meta = body ? [] : [typeLabel, client].filter(Boolean);
     return /* @__PURE__ */ jsxs(
       "button",
       {
         ref,
         type: "button",
         className: cn(
-          "flex w-full gap-3 px-4 py-2.5 text-left outline-none",
+          "flex w-full gap-3 px-4 py-3 text-left outline-none",
           "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
           unread ? "bg-pro-bg hover:bg-pro-bg-hover focus-visible:bg-pro-bg-hover" : "hover:bg-bg-2/60 focus-visible:bg-bg-2/60",
           className
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx("span", { className: "flex w-1.5 shrink-0 justify-center", "aria-hidden": "true", children: unread && /* @__PURE__ */ jsx("span", { className: "bg-pro-fg mt-[13px] size-1.5 rounded-full" }) }),
-          sender ? /* @__PURE__ */ jsx(Avatar, { size: "sm", name: sender.name, src: sender.src, className: "mt-0.5" }) : /* @__PURE__ */ jsx(
+          sender ? /* @__PURE__ */ jsx(Avatar, { size: "md", name: sender.name, src: sender.src, className: "mt-0.5" }) : /* @__PURE__ */ jsx(
             "div",
             {
               "aria-hidden": "true",
               className: cn(
-                "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-lg [&_svg]:size-3.5",
+                "mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-xl [&_svg]:size-4",
                 iconClassName ?? "bg-bg-2 text-fg-3"
               ),
               children: icon
@@ -9779,23 +10015,32 @@ var NotificationItem = forwardRef(
           ),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
             unread && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Unread. " }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
               /* @__PURE__ */ jsx(
                 "p",
                 {
                   className: cn(
-                    "line-clamp-2 min-w-0 flex-1 text-[13.5px] leading-snug font-medium",
+                    "min-w-0 truncate text-[13.5px] leading-snug font-semibold",
                     unread ? "text-fg" : "text-fg-2"
                   ),
                   children: title
                 }
               ),
-              time && /* @__PURE__ */ jsx("span", { className: "text-fg-4 shrink-0 text-xs whitespace-nowrap tabular-nums", children: time })
+              unread && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "bg-pro-fg size-1.5 shrink-0 rounded-full" })
             ] }),
-            body ? /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-0.5 truncate text-xs", children: body }) : meta.length > 0 && /* @__PURE__ */ jsx("p", { className: "text-fg-4 mt-0.5 truncate text-[11.5px]", children: meta.map((part, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
-              part
-            ] }, i)) })
+            body && /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-0.5 truncate text-xs", children: body }),
+            (typeLabel || client || time) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-2", children: [
+              typeLabel && /* @__PURE__ */ jsx("span", { className: "text-fg-4 text-[11px]", children: typeLabel }),
+              client && /* @__PURE__ */ jsx(
+                Badge,
+                {
+                  variant: "outline",
+                  className: "rounded-md px-1.5 py-0.5 text-[11px] font-medium",
+                  children: client
+                }
+              ),
+              time && /* @__PURE__ */ jsx("span", { className: "text-fg-4 text-xs whitespace-nowrap tabular-nums", children: time })
+            ] })
           ] })
         ]
       }
@@ -9803,34 +10048,559 @@ var NotificationItem = forwardRef(
   }
 );
 NotificationItem.displayName = "NotificationItem";
-var Toolbar = forwardRef(function Toolbar2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-2", className), ...props, children });
-});
-Toolbar.displayName = "Toolbar";
-var filterChipVariants = cva(
-  cn(
-    "inline-flex items-center gap-1.5 rounded-pill font-medium border",
-    "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
-    "motion-reduce:transition-none",
-    "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
-    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-fg-disabled disabled:border-rule"
-  ),
-  {
-    variants: {
-      active: {
-        true: "bg-pro-bg text-pro-fg border-pro-fg/30 hover:bg-pro-bg-hover",
-        false: "bg-bg-2 text-fg-2 border-rule hover:bg-bg-3"
-      },
-      // Control text scale shared with Button / MultiFilterPill: sm = 13px,
-      // md = 14px, lg = 16px. Defaults to the dense `sm` tier (toolbar control).
-      size: {
-        sm: "h-8 px-3 text-[13px]",
-        md: "h-9 px-3.5 text-sm",
-        lg: "h-10 px-4 text-base"
-      }
-    },
-    defaultVariants: {
-      active: false,
+var NotificationPanelFooter = forwardRef(
+  function NotificationPanelFooter2({ className, children = "View all notifications", ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(
+          "border-rule text-fg hover:bg-bg-2 w-full border-t px-4 py-3 text-center text-sm font-medium",
+          "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "focus-visible:ring-accent outline-none focus-visible:ring-2",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+NotificationPanelFooter.displayName = "NotificationPanelFooter";
+var padded = (n) => String(n).padStart(2, "0");
+function formatClock(ms) {
+  const total = Math.max(0, Math.floor(ms / 1e3));
+  return `${Math.floor(total / 3600)}:${padded(Math.floor(total % 3600 / 60))}:${padded(total % 60)}`;
+}
+function formatDuration(totalSeconds) {
+  const minutes = Math.round(totalSeconds / 60);
+  const h = Math.floor(minutes / 60);
+  const m = minutes % 60;
+  if (h && m) return `${h}h ${m}m`;
+  if (h) return `${h}h`;
+  return `${m}m`;
+}
+function parseDuration(input) {
+  const text = input.trim().toLowerCase();
+  if (!text) return null;
+  const clock = text.match(/^(\d{1,2}):(\d{2})$/);
+  if (clock) return (Number(clock[1]) * 60 + Number(clock[2])) * 60;
+  let seconds = 0;
+  let matched = false;
+  const unit = /(\d+(?:\.\d+)?)\s*(h|hr|hrs|hour|hours|m|min|mins|minute|minutes|s|sec|secs)/g;
+  let part;
+  while ((part = unit.exec(text)) !== null) {
+    matched = true;
+    const value = parseFloat(part[1]);
+    if (part[2].startsWith("h")) seconds += value * 3600;
+    else if (part[2].startsWith("m")) seconds += value * 60;
+    else seconds += value;
+  }
+  if (!matched && /^\d+$/.test(text)) return Number(text) * 60;
+  return matched ? Math.round(seconds) : null;
+}
+function formatCurrency(amount, currency = "USD") {
+  try {
+    return new Intl.NumberFormat("en-US", { style: "currency", currency }).format(amount);
+  } catch {
+    return `$${amount.toFixed(2)}`;
+  }
+}
+var TICK_MS = 250;
+function useStopwatch() {
+  const [phase, setPhaseState] = useState("idle");
+  const [elapsedMs, setElapsedMs] = useState(0);
+  const accumulatedRef = useRef(0);
+  const startedAtRef = useRef(0);
+  const phaseRef = useRef("idle");
+  const setPhase = useCallback((next) => {
+    phaseRef.current = next;
+    setPhaseState(next);
+  }, []);
+  useEffect(() => {
+    if (phase !== "running") return;
+    const id = setInterval(() => {
+      setElapsedMs(accumulatedRef.current + (Date.now() - startedAtRef.current));
+    }, TICK_MS);
+    return () => clearInterval(id);
+  }, [phase]);
+  const start = useCallback(
+    (fromMs = 0) => {
+      accumulatedRef.current = fromMs;
+      startedAtRef.current = Date.now();
+      setElapsedMs(fromMs);
+      setPhase("running");
+    },
+    [setPhase]
+  );
+  const pause = useCallback(() => {
+    if (phaseRef.current !== "running") return;
+    accumulatedRef.current += Date.now() - startedAtRef.current;
+    setElapsedMs(accumulatedRef.current);
+    setPhase("paused");
+  }, [setPhase]);
+  const resume = useCallback(() => {
+    if (phaseRef.current !== "paused") return;
+    startedAtRef.current = Date.now();
+    setPhase("running");
+  }, [setPhase]);
+  const stop = useCallback(() => {
+    if (phaseRef.current === "idle") return;
+    if (phaseRef.current === "running") {
+      accumulatedRef.current += Date.now() - startedAtRef.current;
+      setElapsedMs(accumulatedRef.current);
+    }
+    setPhase("stopped");
+  }, [setPhase]);
+  const reset = useCallback(() => {
+    accumulatedRef.current = 0;
+    startedAtRef.current = 0;
+    setElapsedMs(0);
+    setPhase("idle");
+  }, [setPhase]);
+  return { phase, elapsedMs, isRunning: phase === "running", start, pause, resume, stop, reset };
+}
+var TimeLogger = forwardRef(function TimeLogger2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("bg-surface text-fg-2 flex w-full flex-col", className),
+      ...props,
+      children
+    }
+  );
+});
+TimeLogger.displayName = "TimeLogger";
+var TimeLoggerHeader = forwardRef(
+  function TimeLoggerHeader2({ title = "Track Time", icon, loggedMinutes = 0, goalMinutes, className, ...props }, ref) {
+    const hasGoal = goalMinutes != null;
+    const pct = hasGoal && goalMinutes > 0 ? Math.min(100, loggedMinutes / goalMinutes * 100) : 0;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col", className), ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-fg flex items-center gap-2 text-base font-semibold [&_svg]:size-[18px]", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-pro-fg", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx(ClockIcon, {}) }),
+          title
+        ] }),
+        hasGoal && /* @__PURE__ */ jsxs("div", { className: "text-fg-3 font-mono text-[13px] tabular-nums", children: [
+          /* @__PURE__ */ jsx("b", { className: "text-fg font-medium", children: formatDuration(loggedMinutes * 60) }),
+          " /",
+          " ",
+          formatDuration(goalMinutes * 60)
+        ] })
+      ] }),
+      hasGoal && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bg-bg-3 relative h-[3px] w-full",
+          role: "progressbar",
+          "aria-label": "Daily goal progress",
+          "aria-valuemin": 0,
+          "aria-valuemax": goalMinutes,
+          "aria-valuenow": Math.min(loggedMinutes, goalMinutes),
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "bg-pro-fg h-full rounded-r-full transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+              style: { width: `${pct}%` }
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+TimeLoggerHeader.displayName = "TimeLoggerHeader";
+var TimeLoggerContextRow = forwardRef(
+  function TimeLoggerContextRow2({ client, engagement, avatar, onClientSelect, member, className, ...props }, ref) {
+    const text = /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-fg block truncate text-sm font-medium", children: client }),
+      engagement && /* @__PURE__ */ jsx("span", { className: "text-fg-3 block truncate text-xs", children: engagement })
+    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("border-rule-soft flex items-center gap-2.5 border-t px-4 py-2.5", className),
+        ...props,
+        children: [
+          onClientSelect ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onClientSelect,
+              className: "rounded-btn hover:bg-surface-2 focus-visible:bg-surface-2 -m-1 flex min-w-0 flex-1 items-center gap-2.5 p-1 text-left transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)] motion-reduce:transition-none",
+              children: [
+                avatar,
+                text
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [
+            avatar,
+            text
+          ] }),
+          member && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: member })
+        ]
+      }
+    );
+  }
+);
+TimeLoggerContextRow.displayName = "TimeLoggerContextRow";
+var TimeLoggerTimer = forwardRef(
+  function TimeLoggerTimer2({
+    phase,
+    elapsedMs,
+    value,
+    onValueChange,
+    placeholder = "Enter time (ex: 3h 20m) or start timer",
+    onStart,
+    onPause,
+    onResume,
+    onStop,
+    className,
+    ...props
+  }, ref) {
+    const showClock = phase !== "idle";
+    const canStop = phase === "running" || phase === "paused";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("border-rule-soft flex items-center gap-2 border-t px-4 py-2.5", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: cn(
+                "text-fg placeholder:text-fg-4 min-w-0 flex-1 border-0 bg-transparent outline-none",
+                showClock ? "font-mono text-[22px] font-medium tracking-tight tabular-nums" : "text-[15px]"
+              ),
+              value: showClock ? formatClock(elapsedMs) : value ?? "",
+              onChange: (event) => onValueChange?.(event.target.value),
+              placeholder,
+              readOnly: showClock,
+              "aria-label": "Tracked time"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "icon",
+              className: "rounded-full",
+              "aria-label": phase === "paused" ? "Resume timer" : "Pause timer",
+              disabled: phase === "idle" || phase === "stopped",
+              onClick: phase === "paused" ? onResume : onPause,
+              children: phase === "paused" ? /* @__PURE__ */ jsx(PlayIcon, {}) : /* @__PURE__ */ jsx(PauseIcon, {})
+            }
+          ),
+          canStop ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "destructive",
+              size: "icon",
+              className: "rounded-full",
+              "aria-label": "Stop timer",
+              onClick: onStop,
+              children: /* @__PURE__ */ jsx(StopIcon, {})
+            }
+          ) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "primary",
+              size: "icon",
+              className: "rounded-full",
+              "aria-label": "Start timer",
+              onClick: onStart,
+              children: /* @__PURE__ */ jsx(PlayIcon, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TimeLoggerTimer.displayName = "TimeLoggerTimer";
+var TimeLoggerField = forwardRef(
+  function TimeLoggerField2({ icon, label, onSelect, trailing, muted, className, children, ...props }, ref) {
+    const interactive = Boolean(onSelect);
+    const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "text-fg-4 flex size-[17px] shrink-0 items-center justify-center [&_svg]:size-[17px]",
+          "aria-hidden": "true",
+          children: icon
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+        label && /* @__PURE__ */ jsx("span", { className: "text-fg-3 block text-[11px] leading-tight", children: label }),
+        /* @__PURE__ */ jsx("span", { className: cn("block truncate", muted ? "text-fg-3" : "text-fg-2"), children })
+      ] }),
+      trailing !== void 0 ? trailing : interactive ? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "text-fg-4 size-4 shrink-0" }) : null
+    ] });
+    const classes = cn(
+      "border-rule-soft flex w-full items-center gap-3 border-t px-4 py-2.5 text-left",
+      interactive && "hover:bg-surface-2 focus-visible:bg-surface-2 cursor-pointer transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] outline-none motion-reduce:transition-none",
+      className
+    );
+    if (interactive) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          type: "button",
+          onClick: onSelect,
+          className: classes,
+          ...props,
+          children: inner
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { ref, className: classes, ...props, children: inner });
+  }
+);
+TimeLoggerField.displayName = "TimeLoggerField";
+var TimeLoggerNotes = forwardRef(
+  function TimeLoggerNotes2({ value, onValueChange, icon, placeholder = "Add notes", className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs("div", { className: "border-rule-soft flex items-center gap-3 border-t px-4 py-2.5", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "text-fg-4 flex size-[17px] shrink-0 items-center justify-center [&_svg]:size-[17px]",
+          "aria-hidden": "true",
+          children: icon ?? /* @__PURE__ */ jsx(FileTextIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "text",
+          value: value ?? "",
+          onChange: (event) => onValueChange?.(event.target.value),
+          placeholder,
+          "aria-label": "Notes",
+          className: cn(
+            "text-fg placeholder:text-fg-4 min-w-0 flex-1 border-0 bg-transparent text-sm outline-none",
+            className
+          ),
+          ...props
+        }
+      )
+    ] });
+  }
+);
+TimeLoggerNotes.displayName = "TimeLoggerNotes";
+var TimeLoggerBillable = forwardRef(
+  function TimeLoggerBillable2({
+    billable,
+    onBillableChange,
+    label,
+    tiers,
+    tierId,
+    onTierChange,
+    currency = "USD",
+    amount,
+    className,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex min-w-0 items-center gap-2.5", className), ...props, children: [
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          size: "sm",
+          checked: billable,
+          onCheckedChange: onBillableChange,
+          "aria-label": "Billable"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-fg-3 text-[13px] whitespace-nowrap", children: label ?? (billable ? "Billable" : "Non-billable") }),
+      tiers && tiers.length > 0 && /* @__PURE__ */ jsxs(Popover, { children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Billing settings",
+            className: "text-fg-4 hover:text-fg-2 hover:bg-bg-2 rounded-btn flex size-6 items-center justify-center transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)] motion-reduce:transition-none [&_svg]:size-4",
+            children: /* @__PURE__ */ jsx(SettingsIcon, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(PopoverContent, { align: "start", side: "top", className: "w-56 p-1.5", children: [
+          /* @__PURE__ */ jsxs("p", { className: "text-fg-3 px-2 pt-1 pb-1.5 font-mono text-[10px] tracking-wider uppercase", children: [
+            "Pricing tier \xB7 ",
+            currency
+          ] }),
+          tiers.map((tier) => {
+            const selected = tier.id === tierId;
+            return /* @__PURE__ */ jsx(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onTierChange?.(tier.id),
+                className: "hover:bg-surface-2 flex w-full items-center gap-2 rounded-md px-2 py-2 text-left transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)] motion-reduce:transition-none",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "flex-1 truncate text-[13px]",
+                        selected ? "text-pro-fg font-medium" : "text-fg"
+                      ),
+                      children: tier.name
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("span", { className: "text-fg-3 font-mono text-[12.5px] tabular-nums", children: [
+                    formatCurrency(tier.rate, currency),
+                    "/hr"
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    CheckIcon,
+                    {
+                      className: cn(
+                        "text-pro-fg size-4 shrink-0",
+                        selected ? "opacity-100" : "opacity-0"
+                      )
+                    }
+                  )
+                ]
+              }
+            ) }, tier.id);
+          })
+        ] })
+      ] }),
+      amount != null && /* @__PURE__ */ jsx("span", { className: "text-fg-2 font-mono text-[12.5px] font-medium tabular-nums", children: amount })
+    ] });
+  }
+);
+TimeLoggerBillable.displayName = "TimeLoggerBillable";
+var TimeLoggerActions = forwardRef(
+  function TimeLoggerActions2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "border-rule bg-surface-2 flex items-center gap-2 border-t px-4 py-2.5",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+TimeLoggerActions.displayName = "TimeLoggerActions";
+var TimeLoggerEntryList = forwardRef(
+  function TimeLoggerEntryList2({ dayLabel, total, className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("border-bg-2 border-t-[7px]", className), ...props, children: [
+      (dayLabel || total) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 pt-2.5 pb-1 text-xs", children: [
+        dayLabel && /* @__PURE__ */ jsx("span", { className: "text-fg-3 font-medium", children: dayLabel }),
+        total && /* @__PURE__ */ jsx("span", { className: "text-fg-2 font-mono tabular-nums", children: total })
+      ] }),
+      children
+    ] });
+  }
+);
+TimeLoggerEntryList.displayName = "TimeLoggerEntryList";
+var TimeLoggerEntry = forwardRef(
+  function TimeLoggerEntry2({ title, meta, duration, onResume, onDelete, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("border-rule-soft flex items-center gap-3 border-t px-4 py-2", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "border-pro-fg size-[15px] shrink-0 rounded-full border-[1.5px] shadow-[inset_0_0_0_3px_var(--color-pro-fg)]"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-fg truncate text-[13px]", children: title }),
+            meta && /* @__PURE__ */ jsx("p", { className: "text-fg-3 truncate text-[11.5px]", children: meta })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-fg-2 font-mono text-[13px] tabular-nums", children: duration }),
+          onResume && /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              className: "text-fg-3 hover:text-pro-fg hover:bg-pro-bg rounded-full",
+              "aria-label": "Resume entry",
+              onClick: onResume,
+              children: /* @__PURE__ */ jsx(PlayIcon, {})
+            }
+          ),
+          onDelete && /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              className: "text-fg-3 hover:text-danger-fg hover:bg-danger-bg rounded-full",
+              "aria-label": "Delete entry",
+              onClick: onDelete,
+              children: /* @__PURE__ */ jsx(Trash2Icon, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TimeLoggerEntry.displayName = "TimeLoggerEntry";
+var TimeLoggerFooter = forwardRef(
+  function TimeLoggerFooter2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("border-rule flex gap-2 border-t px-4 py-2.5 [&>*]:flex-1", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+TimeLoggerFooter.displayName = "TimeLoggerFooter";
+var Toolbar = forwardRef(function Toolbar2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-2", className), ...props, children });
+});
+Toolbar.displayName = "Toolbar";
+var filterChipVariants = cva(
+  cn(
+    "inline-flex items-center gap-1.5 rounded-pill font-medium border",
+    "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+    "motion-reduce:transition-none",
+    "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-fg-disabled disabled:border-rule"
+  ),
+  {
+    variants: {
+      active: {
+        true: "bg-pro-bg text-pro-fg border-pro-fg/30 hover:bg-pro-bg-hover",
+        false: "bg-bg-2 text-fg-2 border-rule hover:bg-bg-3"
+      },
+      // Control text scale shared with Button / MultiFilterPill: sm = 13px,
+      // md = 14px, lg = 16px. Defaults to the dense `sm` tier (toolbar control).
+      size: {
+        sm: "h-8 px-3 text-[13px]",
+        md: "h-9 px-3.5 text-sm",
+        lg: "h-10 px-4 text-base"
+      }
+    },
+    defaultVariants: {
+      active: false,
       size: "sm"
     }
   }
@@ -9852,6 +10622,151 @@ var FilterChip = forwardRef(function FilterChip2({ active = false, size, count,
   );
 });
 FilterChip.displayName = "FilterChip";
+var BulkActionBarContext = React36.createContext({ tone: "surface" });
+function actionClasses(tone, destructive) {
+  const base = cn(
+    "inline-flex h-8 items-center gap-1.5 rounded-btn px-3 text-[13px] font-medium",
+    "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+    "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+    "disabled:pointer-events-none disabled:opacity-45",
+    "motion-reduce:transition-none",
+    "[&_svg]:size-4 [&_svg]:shrink-0"
+  );
+  if (tone === "inverse") {
+    return cn(
+      base,
+      "data-[state=open]:bg-selection-floating-active-bg",
+      destructive ? "bg-danger-fg text-fg-on-danger hover:bg-danger-fg-hover active:bg-danger-fg-active" : "text-selection-floating-muted-fg hover:bg-selection-floating-hover-bg hover:text-selection-floating-fg"
+    );
+  }
+  return cn(
+    base,
+    "data-[state=open]:bg-control-active-bg",
+    destructive ? "text-control-destructive-fg hover:bg-control-destructive-hover-bg" : "text-control-fg hover:bg-control-hover-bg hover:text-control-hover-fg"
+  );
+}
+var BulkActionBarAction = React36.forwardRef(function BulkActionBarAction2({ asChild = false, destructive, className, type, ...props }, ref) {
+  const { tone } = React36.use(BulkActionBarContext);
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      type: asChild ? void 0 : type ?? "button",
+      className: cn(actionClasses(tone, destructive), className),
+      ...props
+    }
+  );
+});
+BulkActionBarAction.displayName = "BulkActionBarAction";
+function BulkActionBarSeparator({ className }) {
+  const { tone } = React36.use(BulkActionBarContext);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "h-4 w-px shrink-0",
+        tone === "inverse" ? "bg-selection-floating-rule" : "bg-control-border",
+        className
+      )
+    }
+  );
+}
+function BulkActionBarClear({
+  variant,
+  clearLabel,
+  clearDisabled,
+  onClear
+}) {
+  if (variant === "page-floating") {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onClear,
+        disabled: clearDisabled,
+        className: cn(
+          "text-selection-floating-muted-fg ml-1 inline-flex size-7 items-center justify-center rounded-icon",
+          "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+          "hover:bg-selection-floating-hover-bg hover:text-selection-floating-fg",
+          "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+          "disabled:pointer-events-none disabled:opacity-45 motion-reduce:transition-none"
+        ),
+        "aria-label": clearLabel,
+        children: /* @__PURE__ */ jsx(XIcon, { className: "size-4", "aria-hidden": "true" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClear, disabled: clearDisabled, children: clearLabel });
+}
+function BulkActionBar({
+  variant = "table-inline",
+  selectedCount,
+  label,
+  children,
+  onClear,
+  clearLabel = "Clear selection",
+  clearDisabled,
+  footer,
+  className,
+  ...props
+}) {
+  if (selectedCount === 0) return null;
+  const labelText = label ?? `${selectedCount} selected`;
+  const tone = variant === "page-floating" ? "inverse" : "surface";
+  const content = /* @__PURE__ */ jsxs(BulkActionBarContext, { value: { tone }, children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium tabular-nums", children: labelText }),
+    /* @__PURE__ */ jsx(BulkActionBarSeparator, {}),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1", children }),
+    /* @__PURE__ */ jsx("div", { className: "min-w-2 flex-1" }),
+    /* @__PURE__ */ jsx(
+      BulkActionBarClear,
+      {
+        variant,
+        clearLabel,
+        clearDisabled,
+        onClear
+      }
+    )
+  ] });
+  if (variant === "sidebar-anchored") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "fixed right-6 bottom-6 left-[calc(var(--shell-sidebar-w)+1.5rem)] z-[var(--z-sticky)]",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "border-rule bg-surface text-fg flex items-center gap-3 rounded-card border px-6 py-3 shadow-card", children: content }),
+          footer
+        ]
+      }
+    );
+  }
+  if (variant === "page-floating") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "fixed bottom-4 left-1/2 z-[var(--z-sticky)] -translate-x-1/2",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-selection-floating-bg text-selection-floating-fg flex items-center gap-2 rounded-card px-3.5 py-1.5 shadow-pop", children: content }),
+          footer
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("sticky bottom-4 z-[var(--z-sticky)] mt-3", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "border-rule bg-surface mx-auto flex max-w-3xl flex-wrap items-center gap-3 rounded-full border px-4 py-2 shadow-card", children: content }),
+    footer
+  ] });
+}
 var PrimaryAction = forwardRef(
   function PrimaryAction2({ arrow, iconRight, children, className, ...props }, ref) {
     return /* @__PURE__ */ jsx(
@@ -9938,6 +10853,6 @@ var KbdHint = forwardRef(function KbdHint2({ className, children, ...props }, re
 });
 KbdHint.displayName = "KbdHint";
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityEventItem, 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, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, 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, DateRangePicker, 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, MessageBubble, MessageBubbleAction, MessageBubbleTombstone, MessageCircleIcon, MessageCircleWarningIcon, MessageComposer, MetadataGrid, MicrosoftBrandIcon, MinusIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoveIcon, MultiFilterPill, MultiSelectField, MutedSpec, NotificationFilter, NotificationItem, NotificationList, NotificationPanel, NotificationPanelHeader, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, Pagination, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PaperclipIcon, PenSignIcon, PencilIcon, PhoneIcon, PhoneInput, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, PrimaryAction, PriorityIcon, 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, SidebarBrandSwitcher, SidebarBrandSwitcherTile, SidebarBrandText, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarPinButton, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, Skeleton, SkeletonCircle, SkeletonText, SlashIcon, Slider, SmartphoneIcon, SparkleIcon, SparklesIcon, StarIcon, StarRating, Stat, StatusIcon, 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, YEAR_DISPLAY_PLACEHOLDER, ZoomInIcon, ZoomOutIcon, alertVariants, applyMask, applyYearMask, badgeVariants, buttonVariants, cardVariants, cn, colors, dateToIso, displayToIso, filterChipVariants, inputVariants, isoToDate, isoToDisplay, isoToYear, labelVariants, progressBarVariants, progressRingVariants, radii, reference, searchInputVariants, shadows, sidebarLinkBadgeVariants, spacing, starRatingVariants, surfaces, systemTokens, textareaVariants, typography, useSidebarPeekLock, useSidebarState, useToast, yearToIso };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityEventItem, 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, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, AtSignIcon, Avatar, Badge, BarChartIcon, BellIcon, Blockquote, BoldIcon, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BriefcaseIcon, Building2Icon, BuildingIcon, BulkActionBar, BulkActionBarAction, BulkActionBarSeparator, 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, DateRangePicker, 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, MessageBubble, MessageBubbleAction, MessageBubbleTombstone, MessageCircleIcon, MessageCircleWarningIcon, MessageComposer, MetadataGrid, MicrosoftBrandIcon, MinusIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoveIcon, MultiFilterPill, MultiSelectField, MutedSpec, NotificationFilter, NotificationItem, NotificationList, NotificationPanel, NotificationPanelFooter, NotificationPanelHeader, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, Pagination, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PaperclipIcon, PauseIcon, PenSignIcon, PencilIcon, PhoneIcon, PhoneInput, PlayIcon, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, PrimaryAction, PriorityIcon, 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, SelectableKpiCard, SendIcon, Separator4 as Separator, SettingsIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShieldIcon, SideDrawer, Sidebar, SidebarBrand, SidebarBrandSwitcher, SidebarBrandSwitcherTile, SidebarBrandText, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarPinButton, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, Skeleton, SkeletonCircle, SkeletonText, SlashIcon, Slider, SmartphoneIcon, SparkleIcon, SparklesIcon, Spinner, StarIcon, StarRating, Stat, StatusIcon, Stepper, StopIcon, StrikethroughIcon, SubmitButton, SunIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableIcon, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagIcon, TeamIcon, TeamMemberSelect, Textarea, TimeLogger, TimeLoggerActions, TimeLoggerBillable, TimeLoggerContextRow, TimeLoggerEntry, TimeLoggerEntryList, TimeLoggerField, TimeLoggerFooter, TimeLoggerHeader, TimeLoggerNotes, TimeLoggerTimer, ToastProvider, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Trash2Icon, TrashIcon, TrendingDownIcon, TrendingUpIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VisuallyHidden, WorkflowIcon, XCircleSolidIcon, XIcon, YEAR_DISPLAY_PLACEHOLDER, ZoomInIcon, ZoomOutIcon, alertVariants, applyMask, applyYearMask, badgeVariants, buttonVariants, cardVariants, cn, colors, dateToIso, displayToIso, filterChipVariants, formatClock, formatCurrency, formatDuration, inputVariants, isoToDate, isoToDisplay, isoToYear, labelVariants, parseDuration, progressBarVariants, progressRingVariants, radii, reference, searchInputVariants, shadows, sidebarLinkBadgeVariants, spacing, spinnerVariants, starRatingVariants, surfaces, systemTokens, textareaVariants, typography, useSidebarPeekLock, useSidebarState, useStopwatch, useToast, yearToIso };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map