@assure-one/design-system 0.15.1 → 0.17.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';
@@ -90,9 +90,9 @@ var colors = {
 };
 var typography = {
   family: {
-    display: '"Geist", "Inter", -apple-system, system-ui, sans-serif',
+    display: '"Inter", -apple-system, system-ui, sans-serif',
     body: '"Inter", -apple-system, system-ui, sans-serif',
-    mono: '"Geist Mono", "JetBrains Mono", ui-monospace, monospace'
+    mono: '"Inter", -apple-system, system-ui, sans-serif'
   },
   weight: {
     regular: 400,
@@ -230,11 +230,24 @@ var systemTokens = {
     dangerBg: "var(--color-danger-bg)",
     dangerLine: "var(--color-danger-line)"
   },
+  gradient: {
+    brand: "var(--gradient-brand)",
+    pro: "var(--gradient-pro)",
+    audit: "var(--gradient-audit)",
+    books: "var(--gradient-books)",
+    tax: "var(--gradient-tax)"
+  },
   shadow: {
     quiet: "var(--shadow-quiet)",
     card: "var(--shadow-card)",
     pop: "var(--shadow-pop)",
-    focusRing: "var(--shadow-focus-ring)"
+    focusRing: "var(--shadow-focus-ring)",
+    xs: "var(--shadow-xs)",
+    sm: "var(--shadow-sm)",
+    md: "var(--shadow-md)",
+    lg: "var(--shadow-lg)",
+    xl: "var(--shadow-xl)",
+    "2xl": "var(--shadow-2xl)"
   },
   radius: {
     btn: "var(--radius-btn)",
@@ -2235,6 +2248,7 @@ var AccordionTrigger = React36.forwardRef(function AccordionTrigger2({ children,
         "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
         "hover:text-fg-2",
         "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:text-fg",
         "[&[data-state=open]>svg]:rotate-180",
         className
       ),
@@ -3013,7 +3027,16 @@ var CardAction = forwardRef(
   }
 );
 CardAction.displayName = "CardAction";
-var Checkbox = React36.forwardRef(function Checkbox2({ label, indeterminate, checked, defaultChecked, className, id: providedId, ...props }, ref) {
+var Checkbox = React36.forwardRef(function Checkbox2({
+  label,
+  indeterminate,
+  checked,
+  defaultChecked,
+  shape = "square",
+  className,
+  id: providedId,
+  ...props
+}, ref) {
   const generatedId = React36.useId();
   const id = providedId ?? generatedId;
   const resolvedChecked = indeterminate ? "indeterminate" : checked;
@@ -3026,18 +3049,19 @@ var Checkbox = React36.forwardRef(function Checkbox2({ label, indeterminate, che
         checked: resolvedChecked,
         defaultChecked,
         className: cn(
-          "peer border-rule-strong bg-surface text-fg-on-pro flex size-4 shrink-0 items-center justify-center rounded-[4px] border",
+          "peer border-rule-strong bg-surface text-pro-fg flex size-4 shrink-0 items-center justify-center border",
+          shape === "circle" ? "rounded-full" : "rounded-[4px]",
           "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)]",
           "hover:border-fg-4",
           "focus-visible:border-accent focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
-          "data-[state=checked]:border-pro-fg data-[state=checked]:bg-pro-fg",
-          "data-[state=indeterminate]:border-pro-fg data-[state=indeterminate]:bg-pro-fg",
+          "data-[state=checked]:border-pro-fg data-[state=checked]:bg-pro-bg",
+          "data-[state=indeterminate]:border-pro-fg data-[state=indeterminate]:bg-pro-bg",
           "disabled:bg-bg-disabled disabled:border-rule disabled:text-fg-disabled disabled:cursor-not-allowed",
           "aria-[invalid=true]:border-danger-line",
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: resolvedChecked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": "true" }) })
+        children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: resolvedChecked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": "true" }) : shape === "circle" ? /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-current", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": "true" }) })
       }
     ),
     label && /* @__PURE__ */ jsx(
@@ -6220,10 +6244,10 @@ function SearchSelect({
             "div",
             {
               className: cn(
-                "rounded-input border-rule-strong bg-surface relative flex h-9 w-full items-center border",
-                "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+                "rounded-input border-rule-strong bg-surface relative flex h-9 w-full items-center border outline-none",
+                "transition-[color,background-color,border-color] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
                 "motion-reduce:transition-none",
-                "focus-within:border-accent focus-within:[box-shadow:var(--shadow-focus-ring)]",
+                "focus-within:[outline:1px_solid_var(--color-pro-fg)] focus-within:[outline-offset:-1px]",
                 showValue && "hover:bg-bg-2 gap-2 pr-2 pl-3",
                 disabled && "bg-bg-disabled cursor-not-allowed"
               ),
@@ -7990,7 +8014,8 @@ function SidebarProvider({
 SidebarProvider.displayName = "SidebarProvider";
 var PEEK_ENTER_DELAY_MS = 100;
 var PEEK_LEAVE_DELAY_MS = 200;
-var Sidebar = React36.forwardRef(function Sidebar2({ className, collapsible = false, onMouseEnter, onMouseLeave, style, ...props }, ref) {
+var Sidebar = React36.forwardRef(function Sidebar2({ className, collapsible = false, variant = "classic", onMouseEnter, onMouseLeave, style, ...props }, ref) {
+  const isFloating = variant === "floating";
   const ctx = React36.useContext(SidebarContext);
   const state = collapsible && ctx ? ctx.state : "expanded";
   const peekLockCount = collapsible && ctx ? ctx.peekLockCount : 0;
@@ -8053,12 +8078,19 @@ var Sidebar = React36.forwardRef(function Sidebar2({ className, collapsible = fa
         "data-overlay": overlay ? "true" : void 0,
         "data-labels": labelsHidden ? "hide" : "show",
         "data-collapsible": collapsible ? "true" : void 0,
+        "data-variant": variant,
         onMouseEnter: handleEnter,
         onMouseLeave: handleLeave,
         style: { width: effectiveWidth, ...style },
         className: cn(
-          "group/sidebar scrollbar-thin flex h-dvh shrink-0 flex-col overflow-y-auto",
-          "border-rule bg-bg-2 border-r px-3 pt-4 pb-4",
+          "group/sidebar scrollbar-thin flex shrink-0 flex-col overflow-y-auto px-3 pt-4 pb-4",
+          // Classic: full-height column flush to the left edge with a right
+          // rule. The legacy look.
+          !isFloating && "h-dvh border-rule bg-bg-2 border-r",
+          // Floating: a detached, rounded card inset from the viewport with a
+          // soft shadow — the modern SaaS pattern. The clear figure/ground gap
+          // (Aesthetic-Usability) reads as its own surface above the canvas.
+          isFloating && "border-rule bg-surface shadow-card m-2.5 h-[calc(100dvh-1.25rem)] rounded-2xl border",
           // 220ms feels right for a ~192px width sweep — slower than the
           // 150ms `--duration-fast` (which reads as a snap on this size of
           // movement) but well short of `--duration-slow` (which feels
@@ -8347,6 +8379,11 @@ var SidebarLink = React36.forwardRef(
           // when the column widens during peek. The label simply collapses
           // to width 0 via <SidebarLinkLabel>.
           "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:opacity-85",
+          // Floating variant: softer corners + a taller hit area (Fitts's
+          // law — a larger target is faster and lower-error to acquire), and
+          // a full pill highlight for active instead of the left rail bar.
+          "group-data-[variant=floating]/sidebar:gap-3 group-data-[variant=floating]/sidebar:rounded-lg group-data-[variant=floating]/sidebar:py-2",
+          "group-data-[variant=floating]/sidebar:data-[active=true]:before:hidden",
           className
         ),
         ...props,
@@ -8356,10 +8393,12 @@ var SidebarLink = React36.forwardRef(
             "span",
             {
               className: cn(
-                // 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",
+                // Flex row so a trailing <SidebarLinkBadge> (ml-auto) aligns
+                // to the right edge with a gap from the label, instead of
+                // butting against it. A line-clamp box swallows the badge's
+                // auto margin, which is why "Billing$48k" rendered glued.
+                // Single-line label clips via overflow; badge stays put.
+                "flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden whitespace-nowrap",
                 "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"
@@ -8495,7 +8534,10 @@ var SidebarLinkGroup = React36.forwardRef(
       "data-[active=true]:before:top-1/2 data-[active=true]:before:left-0",
       "data-[active=true]:before:h-4 data-[active=true]:before:w-[2px] data-[active=true]:before:-translate-y-1/2",
       "data-[active=true]:before:bg-pro-fg data-[active=true]:before:rounded-r-full",
-      "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:opacity-85"
+      "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:opacity-85",
+      // Floating variant — match SidebarLink: taller hit area, pill active.
+      "group-data-[variant=floating]/sidebar:gap-3 group-data-[variant=floating]/sidebar:rounded-lg group-data-[variant=floating]/sidebar:py-2",
+      "group-data-[variant=floating]/sidebar:data-[active=true]:before:hidden"
     );
     const labelSpan = /* @__PURE__ */ jsx(
       "span",
@@ -9901,16 +9943,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"
               }
             ),
@@ -9933,7 +9975,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",
       {
@@ -9944,21 +9986,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
         ]
       }
@@ -9982,27 +10040,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
@@ -10010,23 +10066,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 })
+            ] })
           ] })
         ]
       }
@@ -10034,6 +10099,26 @@ var NotificationItem = forwardRef(
   }
 );
 NotificationItem.displayName = "NotificationItem";
+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));
@@ -10127,30 +10212,43 @@ function useStopwatch() {
   }, [setPhase]);
   return { phase, elapsedMs, isRunning: phase === "running", start, pause, resume, stop, reset };
 }
-var TimeLogger = forwardRef(function TimeLogger2({ className, children, ...props }, ref) {
+var TimeLogger = forwardRef(function TimeLogger2({ className, orientation = "vertical", children, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
-      className: cn("bg-surface text-fg-2 flex w-full flex-col", className),
+      "data-orientation": orientation,
+      className: cn(
+        "group/timelogger bg-surface text-fg-2 flex w-full",
+        orientation === "horizontal" ? "flex-row items-stretch" : "flex-col",
+        className
+      ),
       ...props,
       children
     }
   );
 });
 TimeLogger.displayName = "TimeLogger";
+var horizontalSegment = "group-data-[orientation=horizontal]/timelogger:border-t-0 group-data-[orientation=horizontal]/timelogger:border-l group-data-[orientation=horizontal]/timelogger:first:border-l-0";
 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, {}) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-fg flex items-center gap-2.5 text-[17px] font-semibold", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "bg-pro-bg text-pro-fg flex size-7 shrink-0 items-center justify-center rounded-lg [&_svg]:size-[17px]",
+              "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) }),
+          /* @__PURE__ */ jsx("b", { className: "text-fg font-semibold", children: formatDuration(loggedMinutes * 60) }),
           " /",
           " ",
           formatDuration(goalMinutes * 60)
@@ -10159,7 +10257,7 @@ var TimeLoggerHeader = forwardRef(
       hasGoal && /* @__PURE__ */ jsx(
         "div",
         {
-          className: "bg-bg-3 relative h-[3px] w-full",
+          className: "bg-bg-3 relative h-1 w-full",
           role: "progressbar",
           "aria-label": "Daily goal progress",
           "aria-valuemin": 0,
@@ -10168,7 +10266,7 @@ var TimeLoggerHeader = forwardRef(
           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",
+              className: "h-full rounded-r-full bg-[image:var(--gradient-pro)] transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
               style: { width: `${pct}%` }
             }
           )
@@ -10188,7 +10286,11 @@ var TimeLoggerContextRow = forwardRef(
       "div",
       {
         ref,
-        className: cn("border-rule-soft flex items-center gap-2.5 border-t px-4 py-2.5", className),
+        className: cn(
+          "border-rule-soft flex items-center gap-2.5 border-t px-4 py-3",
+          horizontalSegment,
+          className
+        ),
         ...props,
         children: [
           onClientSelect ? /* @__PURE__ */ jsxs(
@@ -10233,7 +10335,15 @@ var TimeLoggerTimer = forwardRef(
       "div",
       {
         ref,
-        className: cn("border-rule-soft flex items-center gap-2 border-t px-4 py-2.5", className),
+        className: cn(
+          "border-rule-soft flex items-center gap-2.5 border-t px-4 py-4",
+          // In a horizontal bar this segment is usually the `flex-1` grower;
+          // min-w-0 lets the clock shrink instead of pushing the trailing
+          // segment off the edge.
+          "group-data-[orientation=horizontal]/timelogger:min-w-0",
+          horizontalSegment,
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ jsx(
@@ -10241,7 +10351,7 @@ var TimeLoggerTimer = forwardRef(
             {
               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]"
+                showClock ? "font-mono text-[28px] font-semibold tracking-tight tabular-nums" : "text-[15px]"
               ),
               value: showClock ? formatClock(elapsedMs) : value ?? "",
               onChange: (event) => onValueChange?.(event.target.value),
@@ -10254,9 +10364,9 @@ var TimeLoggerTimer = forwardRef(
             Button,
             {
               type: "button",
-              variant: "secondary",
+              variant: "ghost",
               size: "icon",
-              className: "rounded-full",
+              className: "text-fg-3 hover:bg-bg-3 hover:text-fg size-10 rounded-full",
               "aria-label": phase === "paused" ? "Resume timer" : "Pause timer",
               disabled: phase === "idle" || phase === "stopped",
               onClick: phase === "paused" ? onResume : onPause,
@@ -10269,7 +10379,7 @@ var TimeLoggerTimer = forwardRef(
               type: "button",
               variant: "destructive",
               size: "icon",
-              className: "rounded-full",
+              className: "shadow-card hover:shadow-pop size-12 rounded-full transition-[transform,box-shadow] active:scale-95 motion-reduce:transition-none",
               "aria-label": "Stop timer",
               onClick: onStop,
               children: /* @__PURE__ */ jsx(StopIcon, {})
@@ -10280,7 +10390,7 @@ var TimeLoggerTimer = forwardRef(
               type: "button",
               variant: "primary",
               size: "icon",
-              className: "rounded-full",
+              className: "shadow-card hover:shadow-pop size-12 rounded-full bg-[image:var(--gradient-brand)] transition-[transform,box-shadow] active:scale-95 motion-reduce:transition-none",
               "aria-label": "Start timer",
               onClick: onStart,
               children: /* @__PURE__ */ jsx(PlayIcon, {})
@@ -10311,7 +10421,9 @@ var TimeLoggerField = forwardRef(
       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",
+      "border-rule-soft flex w-full items-center gap-3 border-t px-4 py-3 text-left",
+      "group-data-[orientation=horizontal]/timelogger:w-auto",
+      horizontalSegment,
       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
     );
@@ -10334,7 +10446,7 @@ var TimeLoggerField = forwardRef(
 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: [
+    return /* @__PURE__ */ jsxs("div", { className: "border-rule-soft flex items-center gap-3 border-t px-4 py-3", children: [
       /* @__PURE__ */ jsx(
         "span",
         {
@@ -10452,7 +10564,8 @@ var TimeLoggerActions = forwardRef(
       {
         ref,
         className: cn(
-          "border-rule bg-surface-2 flex items-center gap-2 border-t px-4 py-2.5",
+          "border-rule bg-surface-2 flex items-center gap-2 border-t px-4 py-3",
+          horizontalSegment,
           className
         ),
         ...props,
@@ -10480,7 +10593,10 @@ var TimeLoggerEntry = forwardRef(
       "div",
       {
         ref,
-        className: cn("border-rule-soft flex items-center gap-3 border-t px-4 py-2", className),
+        className: cn(
+          "border-rule-soft hover:bg-surface-2 flex items-center gap-3 border-t px-4 py-2.5 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ jsx(
@@ -10531,7 +10647,7 @@ var TimeLoggerFooter = forwardRef(
       "div",
       {
         ref,
-        className: cn("border-rule flex gap-2 border-t px-4 py-2.5 [&>*]:flex-1", className),
+        className: cn("border-rule flex gap-2 border-t px-4 py-3 [&>*]:flex-1", className),
         ...props,
         children
       }
@@ -10819,6 +10935,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, 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, 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 };
+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