@assure-one/design-system 0.16.0 → 1.0.0

package/dist/index.js

@@ -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",
+          "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+          "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(
@@ -3063,7 +3087,7 @@ var SelectTrigger = React36.forwardRef(({ className, children, ...props }, ref)
       "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
       "motion-reduce:transition-none",
       "placeholder:text-fg-4",
-      "focus-visible:border-accent focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+      "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
       "disabled:bg-bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed",
       "data-[placeholder]:text-fg-4",
       "aria-[invalid=true]:border-danger-line aria-[invalid=true]:focus-visible:border-danger-fg",
@@ -3627,6 +3651,7 @@ function ConfirmActionButton({
   title,
   description,
   confirmLabel = "Confirm",
+  pendingLabel,
   cancelLabel = "Cancel",
   onConfirm,
   destructive = true,
@@ -3667,7 +3692,7 @@ function ConfirmActionButton({
         setDialogOpen(next);
       },
       children: [
-        /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: trigger }),
+        trigger != null && /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: trigger }),
         /* @__PURE__ */ jsxs(AlertDialogContent, { className: contentClassName, children: [
           /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
             /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
@@ -3683,7 +3708,7 @@ function ConfirmActionButton({
                 className: cn(
                   !destructive && "bg-pro-fg text-fg-on-pro hover:bg-pro-hover active:bg-pro-active"
                 ),
-                children: confirmLabel
+                children: pending && pendingLabel != null ? pendingLabel : confirmLabel
               }
             )
           ] })
@@ -4164,7 +4189,7 @@ var DatePicker = forwardRef(function DatePicker2({
             "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
             "motion-reduce:transition-none",
             "placeholder:font-body placeholder:text-fg-4",
-            "focus-visible:border-accent focus-visible:outline-none",
+            "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:outline-none",
             "focus-visible:[box-shadow:var(--shadow-focus-ring)]",
             "disabled:bg-bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed",
             "aria-[invalid=true]:border-danger-line aria-[invalid=true]:focus-visible:border-danger-fg",
@@ -4346,7 +4371,7 @@ var DateRangePicker = forwardRef(
               "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
               "motion-reduce:transition-none",
               "hover:bg-bg-2",
-              "focus-visible:border-accent focus-visible:outline-none",
+              "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:outline-none",
               "focus-visible:[box-shadow:var(--shadow-focus-ring)]",
               "disabled:bg-bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed disabled:hover:bg-bg-disabled",
               "data-[invalid=true]:border-danger-line data-[invalid=true]:focus-visible:border-danger-fg",
@@ -4862,7 +4887,7 @@ var inputVariants = cva(
     "flex w-full rounded-input border bg-surface font-body text-fg",
     "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)]",
     "placeholder:text-fg-4",
-    "focus-visible:outline-none focus-visible:border-accent",
+    "focus-visible:outline-none focus-visible:[border-color:var(--focus-ring-border)]",
     "focus-visible:[box-shadow:var(--shadow-focus-ring)]",
     "disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-fg-disabled",
     "aria-[invalid=true]:border-danger-line aria-[invalid=true]:focus-visible:border-danger-fg",
@@ -5473,7 +5498,7 @@ function OTPSlot({ isActive, char, hasFakeCaret, hasError }) {
         "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)]",
         "sm:h-14 sm:w-12 sm:text-xl",
         "border-rule-strong",
-        isActive && "border-accent z-10 [box-shadow:var(--shadow-focus-ring)]",
+        isActive && "[border-color:var(--focus-ring-border)] z-10 [box-shadow:var(--shadow-focus-ring)]",
         hasError && "border-danger-line",
         hasError && isActive && "border-danger-fg [box-shadow:0_0_0_2px_var(--color-danger-bg)]"
       ),
@@ -5862,7 +5887,7 @@ var RadioGroupItem = React36.forwardRef(function RadioGroupItem2({ className, la
         "peer border-rule-strong bg-surface text-pro-fg aspect-square size-4 shrink-0 rounded-full border",
         "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",
+        "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
         "data-[state=checked]:border-pro-fg",
         "disabled:bg-bg-disabled disabled:border-rule disabled:cursor-not-allowed",
         "aria-[invalid=true]:border-danger-line",
@@ -5951,7 +5976,7 @@ var searchInputVariants = cva(
     "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
     "motion-reduce:transition-none",
     "placeholder:text-fg-4",
-    "focus-visible:outline-none focus-visible:border-accent",
+    "focus-visible:outline-none focus-visible:[border-color:var(--focus-ring-border)]",
     "focus-visible:[box-shadow:var(--shadow-focus-ring)]",
     "disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-fg-disabled",
     // Hide the native search-cancel button — we render our own clear button.
@@ -6062,7 +6087,8 @@ function SearchSelect({
   closeOnSelect: closeOnSelectProp = false,
   showGroupCounts = false,
   onCreateNew,
-  createNewLabel = "Create new"
+  createNewLabel = "Create new",
+  descriptionVariant = "inline"
 }) {
   const isSingleMode = value !== void 0 || onValueChange !== void 0;
   const singleSelectedOption = React36.useMemo(
@@ -6219,10 +6245,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"
               ),
@@ -6233,7 +6259,7 @@ function SearchSelect({
                     type: "button",
                     onClick: () => !disabled && setOpen(true),
                     disabled,
-                    className: "flex h-full flex-1 items-center gap-2 text-left outline-none disabled:cursor-not-allowed",
+                    className: "flex h-full min-w-0 flex-1 items-center gap-2 text-left outline-none disabled:cursor-not-allowed",
                     children: [
                       singleValue.icon && /* @__PURE__ */ jsx(
                         "span",
@@ -6246,7 +6272,15 @@ function SearchSelect({
                           children: singleValue.icon
                         }
                       ),
-                      /* @__PURE__ */ jsxs("span", { className: "text-fg flex-1 truncate text-[13px]", children: [
+                      descriptionVariant === "pill" && singleValue.description ? (
+                        // Pill variant: label truncates, description rides after it
+                        // as a discrete shrink-0 badge so dense metadata reads as a
+                        // tag instead of running into the label.
+                        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5 text-[13px]", children: [
+                          /* @__PURE__ */ jsx("span", { className: "text-fg truncate", children: singleValue.label }),
+                          /* @__PURE__ */ jsx("span", { className: "rounded-pill border-rule bg-bg-2 text-fg-3 shrink-0 border px-1.5 py-0.5 text-[11px] leading-none", children: singleValue.description })
+                        ] })
+                      ) : /* @__PURE__ */ jsxs("span", { className: "text-fg min-w-0 flex-1 truncate text-[13px]", children: [
                         singleValue.label,
                         singleValue.description && /* @__PURE__ */ jsxs("span", { className: "text-fg-4", children: [
                           " \xB7 ",
@@ -7507,7 +7541,7 @@ var textareaVariants = cva(
     "flex w-full rounded-input border bg-surface font-body text-fg",
     "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)]",
     "placeholder:text-fg-4",
-    "focus-visible:outline-none focus-visible:border-accent",
+    "focus-visible:outline-none focus-visible:[border-color:var(--focus-ring-border)]",
     "focus-visible:[box-shadow:var(--shadow-focus-ring)]",
     "disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-fg-disabled",
     "aria-[invalid=true]:border-danger-line aria-[invalid=true]:focus-visible:border-danger-fg",
@@ -7981,7 +8015,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;
@@ -8044,12 +8079,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
@@ -8338,6 +8380,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,
@@ -8347,10 +8394,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"
@@ -8486,7 +8535,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",
@@ -10161,30 +10213,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)
@@ -10193,7 +10258,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,
@@ -10202,7 +10267,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}%` }
             }
           )
@@ -10222,7 +10287,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(
@@ -10267,7 +10336,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(
@@ -10275,7 +10352,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),
@@ -10288,9 +10365,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,
@@ -10303,7 +10380,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, {})
@@ -10314,7 +10391,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, {})
@@ -10345,7 +10422,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
     );
@@ -10368,7 +10447,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",
         {
@@ -10486,7 +10565,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,
@@ -10514,7 +10594,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(
@@ -10565,7 +10648,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
       }
@@ -10762,10 +10845,17 @@ function BulkActionBar({
       }
     );
   }
-  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
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("sticky bottom-4 z-[var(--z-sticky)] mt-3 flex justify-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "border-rule bg-surface flex w-fit max-w-full items-center gap-3 overflow-x-auto rounded-card border px-4 py-2 shadow-card", children: content }),
+        footer
+      ]
+    }
+  );
 }
 var PrimaryAction = forwardRef(
   function PrimaryAction2({ arrow, iconRight, children, className, ...props }, ref) {