@spree/dashboard-ui 6.0.2 → 6.0.4

package/src/ui/sidebar.tsx

@@ -361,7 +361,7 @@ function SidebarInset({ className, id = 'main-content', ...props }: React.Compon
         // The inset sheet is the raised surface, so it takes the card colour —
         // pure white in light mode — rather than the page grey, which is now the
         // ground the rail sits on.
-        'relative z-0 flex w-full min-w-0 flex-1 flex-col bg-background md:peer-data-[variant=inset]:bg-card md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:border md:peer-data-[variant=inset]:border-sidebar-border md:peer-data-[variant=inset]:shadow-sm',
+        'relative z-0 flex w-full min-w-0 flex-1 flex-col bg-background md:peer-data-[variant=inset]:bg-card md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-2xl md:peer-data-[variant=inset]:border md:peer-data-[variant=inset]:border-sidebar-border',
         className,
       )}
       {...props}
@@ -548,7 +548,7 @@ function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'
     <div
       data-slot="sidebar-group-content"
       data-sidebar="group-content"
-      className={cn('w-full text-sm', className)}
+      className={cn('w-full text-base', className)}
       {...props}
     />
   )
@@ -587,7 +587,7 @@ const sidebarMenuButtonVariants = cva(
   // badge. Without it the flex line wraps and the label visibly squashes to two
   // lines inside the fixed height until the animation lands. Labels clip
   // instead — which is what the `truncate` below already intends.
-  'peer/menu-button group/menu-button flex gap-2 w-full items-center overflow-hidden whitespace-nowrap rounded-md p-1 text-left font-medium text-base text-sidebar-foreground/80 outline-hidden transition-[color,background-color,border-color,box-shadow] duration-100 ease-out group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-10! group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:overflow-visible group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:[&>span:last-child]:hidden hover:bg-sidebar-accent-hover hover:text-sidebar-foreground focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent-hover data-open:hover:text-sidebar-foreground data-active:bg-accent-strong data-active:text-foreground data-active:font-semibold data-active:hover:bg-accent-strong-hover [&>span:last-child]:truncate',
+  'peer/menu-button group/menu-button flex gap-2 w-full items-center overflow-hidden whitespace-nowrap rounded-lg p-1 text-left font-normal text-base text-sidebar-foreground/80 outline-hidden transition-[color,background-color,border-color,box-shadow] duration-100 ease-out group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-10! group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:overflow-visible group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:[&>span:last-child]:hidden hover:bg-sidebar-accent-hover hover:text-sidebar-foreground focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent-hover data-open:hover:text-sidebar-foreground data-active:bg-sidebar-active data-active:text-foreground data-active:font-semibold data-active:hover:bg-sidebar-active-hover [&>span:last-child]:truncate',
   {
     variants: {
       variant: {
@@ -601,7 +601,7 @@ const sidebarMenuButtonVariants = cva(
         // desktop rail keeps its compact pointer-sized rows.
         default:
           'h-8 text-base in-data-[mobile=true]:h-12 in-data-[mobile=true]:px-2 in-data-[mobile=true]:[&_svg]:size-5',
-        sm: 'h-7 text-xs in-data-[mobile=true]:h-11 in-data-[mobile=true]:text-sm',
+        sm: 'h-7 text-xs in-data-[mobile=true]:h-11 in-data-[mobile=true]:text-base',
         lg: 'h-12 text-base group-data-[collapsible=icon]:p-0!',
       },
     },
@@ -798,7 +798,7 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        'relative flex h-7 in-data-[mobile=true]:h-11 in-data-[mobile=true]:px-2 min-w-0 items-center gap-2 overflow-hidden rounded-lg p-1 font-medium text-sidebar-foreground/80 outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent-hover hover:text-sidebar-foreground focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-base data-[size=sm]:text-xs data-active:font-semibold data-active:text-foreground data-active:bg-transparent data-active:shadow-none data-active:before:absolute data-active:before:-left-4 data-active:before:top-[10%] data-active:before:h-[80%] data-active:before:w-[3px] data-active:before:rounded-sm data-active:before:bg-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'relative flex h-7 in-data-[mobile=true]:h-11 in-data-[mobile=true]:px-2 min-w-0 items-center gap-2 overflow-hidden rounded-lg p-1 font-normal text-sidebar-foreground/80 outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent-hover hover:text-sidebar-foreground focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-base data-[size=sm]:text-xs data-active:font-semibold data-active:text-foreground data-active:bg-transparent data-active:shadow-none data-active:before:absolute data-active:before:-left-4 data-active:before:top-[10%] data-active:before:h-[80%] data-active:before:w-[3px] data-active:before:rounded-sm data-active:before:bg-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
         className,
       )}
       {...props}

package/src/ui/switch.tsx

@@ -22,14 +22,20 @@ function Switch({
       disabled={disabled}
       name={name}
       className={cn(
-        'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[checked]:bg-blue-600 data-[unchecked]:bg-input',
+        // A flat track with a hairline edge instead of depth, and a capsule
+        // knob wider than it is tall, after the macOS switch.
+        // Base UI renders a <span>, which is never `:disabled`, so disabled
+        // styles key off `data-disabled`.
+        'group/switch peer inline-flex h-[18px] w-[34px] shrink-0 cursor-pointer items-center rounded-full p-0.5 shadow-[inset_0_0_0_0.5px_rgb(0_0_0/0.08)] transition-[background-color,box-shadow] duration-200 ease-out outline-none focus-visible:shadow-field-focus data-[checked]:bg-blue-500 data-[unchecked]:bg-switch-off data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
         className,
       )}
       {...props}
     >
       <SwitchPrimitive.Thumb
         className={cn(
-          'pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[checked]:translate-x-4 data-[unchecked]:translate-x-0',
+          // While pressed the knob turns to glass: it grows, clears to a
+          // frosted tint over the track, and keeps a bright rim.
+          'pointer-events-none block h-3.5 w-5 rounded-full bg-white shadow-[0_0_0_0.5px_rgb(0_0_0/0.06),0_1px_2px_rgb(0_0_0/0.1)] transition-[translate,scale,background-color,box-shadow] duration-200 ease-[cubic-bezier(0.3,1.3,0.6,1)] motion-reduce:transition-none data-[checked]:translate-x-2.5 data-[unchecked]:translate-x-0 group-active/switch:scale-x-[1.3] group-active/switch:scale-y-[1.2] group-active/switch:bg-white/35 group-active/switch:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.85),0_1px_4px_rgb(0_0_0/0.15)] group-active/switch:backdrop-blur-[2px] group-data-[disabled]/switch:scale-100 group-data-[disabled]/switch:bg-white',
         )}
       />
     </SwitchPrimitive.Root>

package/src/ui/tabs.tsx

@@ -20,7 +20,25 @@ function Tabs({
   )
 }
 
-/** The track a set of tabs sits in, recessed so the selected tab reads as raised. */
+/**
+ * The track a set of tabs sits in, a glass capsule in the manner of a macOS
+ * segmented control. The selected pill is an indicator that slides between
+ * tabs; until it has measured its tab, the selected tab draws the same pill
+ * itself.
+ */
+// The track: the recessed surface, edged by the faint divider rule. Flat — no
+// blur or sheen, which a control this small would only muddy.
+const TAB_TRACK = 'bg-track-recessed shadow-[inset_0_0_0_1px_var(--border-subtle)]'
+
+// The selected tab's surface: a flat pill set off by its fill and a card's
+// edge, never a drop shadow. A card's white in the light; in the dark the
+// strong accent, the step a dark surface lifts to.
+const TAB_RAISED = 'bg-card shadow-[0_0_0_1px_var(--card-edge)] dark:bg-accent-strong'
+
+// Capsules side by side; a vertical stack keeps rounded rectangles, which read
+// better as a column.
+const TAB_SHAPE = 'rounded-full group-data-[orientation=vertical]/tabs:rounded-lg'
+
 function TabsList({
   className,
   children,
@@ -30,12 +48,23 @@ function TabsList({
     <TabsPrimitive.List
       data-slot="tabs-list"
       className={cn(
-        'inline-flex w-fit items-center justify-center gap-1 rounded-lg bg-track-recessed p-1 text-muted-foreground',
+        'group/tabs-list relative inline-flex w-fit items-center justify-center gap-0.5 rounded-full p-0.5 text-muted-foreground group-data-[orientation=vertical]/tabs:rounded-xl',
+        TAB_TRACK,
         'group-data-[orientation=vertical]/tabs:h-auto group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:flex-col',
         className,
       )}
       {...props}
     >
+      <TabsPrimitive.Indicator
+        data-slot="tabs-indicator"
+        className={cn(
+          TAB_RAISED,
+          TAB_SHAPE,
+          'absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)',
+          // The switch's curve, so the two controls move alike.
+          'transition-[left,top,width,height] duration-200 ease-[cubic-bezier(0.3,1.3,0.6,1)] motion-reduce:transition-none',
+        )}
+      />
       {children}
     </TabsPrimitive.List>
   )
@@ -58,17 +87,22 @@ function TabsTrigger({
       className={cn(
         // min-h-7 + py-1 keeps the hit area past the 24px WCAG target size at
         // every text size; the old h-[calc(100%-1px)] left it to the parent.
-        'inline-flex min-h-7 flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium whitespace-nowrap',
+        'relative z-10 inline-flex min-h-7 flex-1 cursor-pointer items-center justify-center gap-1.5 px-3 py-1 text-base font-medium whitespace-nowrap',
         'transition-[color,background-color,box-shadow] duration-150 ease-out outline-none motion-reduce:transition-none',
+        TAB_SHAPE,
         'group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start',
         // Unselected tabs recede so the selected one reads as chosen; hover
         // promotes to full foreground rather than only shifting the surface,
         // which is the part a colour-blind or low-vision reader can see.
-        'text-muted-foreground hover:text-foreground',
-        // The raised surface lives on the tab itself, as it did before the
-        // indicator: it is the thing that makes the selection legible, and it
-        // must not depend on a separate element rendering correctly behind it.
-        'data-[active]:bg-nested-raised data-[active]:text-foreground data-[active]:shadow-xs',
+        // An unselected tab under the pointer takes a pill one step under the
+        // selected one, as a sidebar item does.
+        'text-muted-foreground hover:text-foreground not-data-[active]:hover:bg-accent-strong dark:not-data-[active]:hover:bg-accent',
+        // The selected tab draws its own pill until the indicator has
+        // measured it, so the selection never depends on that rendering;
+        // then it turns clear and the sliding indicator shows through.
+        cn(TAB_RAISED, 'not-data-[active]:bg-transparent not-data-[active]:shadow-none'),
+        'data-[active]:text-foreground',
+        'group-has-[>[data-slot=tabs-indicator]:not([hidden])]/tabs-list:bg-transparent group-has-[>[data-slot=tabs-indicator]:not([hidden])]/tabs-list:shadow-none',
         // Same focus treatment as Button, so a keyboard user sees one
         // consistent indicator across the dashboard.
         'focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)]',
@@ -80,7 +114,9 @@ function TabsTrigger({
     >
       {children}
       {count !== undefined && (
-        <span className="rounded-full bg-muted px-1.5 py-0.5 text-xs tabular-nums">{count}</span>
+        <span className="rounded-full bg-accent-strong-hover px-1.5 py-0.5 text-xs text-foreground tabular-nums">
+          {count}
+        </span>
       )}
     </TabsPrimitive.Tab>
   )

package/src/ui/textarea.tsx

@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
     <textarea
       data-slot="textarea"
       className={cn(
-        'flex field-sizing-content min-h-16 w-full rounded-md border border-border shadow-control bg-card px-2.5 py-1.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none placeholder:text-muted-foreground focus:border-blue-500 focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive',
+        'flex field-sizing-content min-h-16 w-full cursor-default focus:cursor-text rounded-xl border border-field-border shadow-control bg-card px-2.5 py-1.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none placeholder:text-muted-foreground not-disabled:not-read-only:not-focus:hover:bg-field-hover focus:border-blue-500 focus:shadow-field-focus disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive',
         className,
       )}
       {...props}

package/src/ui/toast.tsx

@@ -121,10 +121,10 @@ function ToastList() {
       <ToastContent>
         <ToastIcon type={toast.type} />
         <div className="flex min-w-0 flex-1 flex-col gap-1">
-          <ToastPrimitive.Title data-slot="toast-title" className="font-medium text-sm" />
+          <ToastPrimitive.Title data-slot="toast-title" className="font-medium text-base" />
           <ToastPrimitive.Description
             data-slot="toast-description"
-            className="text-muted-foreground text-sm"
+            className="text-muted-foreground text-base"
           />
         </div>
         <ToastPrimitive.Action

package/src/ui/tooltip.tsx

@@ -87,7 +87,7 @@ function TooltipContent({
           className={cn(
             // `origin-(--transform-origin)` so it grows out of the element it
             // describes rather than its own centre.
-            'z-50 inline-flex w-fit max-w-[200px] items-center gap-1.5 rounded-lg border border-border bg-popover px-2 py-1 text-sm font-normal text-popover-foreground shadow-md origin-(--transform-origin) data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform,translate,scale] duration-100 ease-out',
+            'z-50 inline-flex w-fit max-w-[200px] items-center gap-1.5 rounded-xl border border-border bg-popover px-2 py-1 text-base font-normal text-popover-foreground shadow-md origin-(--transform-origin) data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform,translate,scale] duration-100 ease-out',
             className,
           )}
           {...props}