@boyernick/standard-ui-react 0.1.1-canary.2 → 0.1.1-canary.4

package/src/lib/motion.ts

@@ -1,23 +1,118 @@
 /**
  * Shared motion classes for StandardUI.
- * Prefer CSS `scale` on centered modals so `translate` centering stays intact.
- * Anchored popups use `transform-origin` from Base UI.
+ *
+ * Every value resolves to a token in `@boyernick/standard-ui-tokens` — the
+ * `--ease-*` ladder and the `--duration-*` scale. Nothing here hardcodes a
+ * curve or a millisecond count.
+ *
+ * The easing ladder is ordered by *onset* — how quickly a transition commits:
+ *
+ *   passive  ambient, system-initiated       (slowest onset)
+ *   enter    surfaces arriving
+ *   move     things travelling across a surface
+ *   snap     direct response to a pointer    (sharpest onset)
+ *
+ * Two kinds of token live here, and they behave differently:
+ *
+ *   Mount tokens  — backdrop, popupCenter, popupAnchor, accordionPanel.
+ *     These carry separate enter and exit behaviour. Base UI flags the exit
+ *     with `data-ending-style`, and the `data-ending-style:` variants below
+ *     re-declare duration and easing for that direction. Exits always run at
+ *     `--duration-exit`, so dismissing anything costs the same no matter how
+ *     long the entrance took.
+ *
+ *   State tokens — tabsIndicator, colors, transform, all.
+ *     These animate between states on a mounted element, so there is no enter
+ *     or exit to distinguish; they take a single curve.
+ *
+ * Fades are linear on purpose. Perceived brightness is already non-linear, so
+ * easing an opacity change makes it look like it sticks at the end.
  */
+
+const DURATION = {
+  xs: "duration-[var(--duration-xs)]",
+  sm: "duration-[var(--duration-sm)]",
+  md: "duration-[var(--duration-md)]",
+  lg: "duration-[var(--duration-lg)]",
+} as const
+
+/** Every exit runs at the same length — see `--duration-exit`. */
+const EXIT_DURATION = "data-ending-style:duration-[var(--duration-exit)]"
+
+const REDUCED = "motion-reduce:transition-none"
+
 export const motion = {
-  backdrop:
-    "transition-opacity duration-150 ease-out motion-reduce:transition-none data-starting-style:opacity-0 data-ending-style:opacity-0",
-  /** Centered dialog / alert — scale property, not transform */
-  popupCenter:
-    "transition-[scale,opacity] duration-150 ease-out motion-reduce:transition-none data-starting-style:scale-[0.96] data-starting-style:opacity-0 data-ending-style:scale-[0.96] data-ending-style:opacity-0",
-  /** Select, tooltip, menus — transform-origin from Base UI */
-  popupAnchor:
-    "origin-[var(--transform-origin)] transition-[transform,scale,opacity] duration-150 ease-out motion-reduce:transition-none data-starting-style:scale-[0.96] data-starting-style:opacity-0 data-ending-style:scale-[0.96] data-ending-style:opacity-0",
-  accordionPanel:
-    "transition-[height] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none data-starting-style:h-0 data-ending-style:h-0",
-  tabsIndicator:
-    "transition-[translate,width] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
-  colors: "transition-colors duration-150 ease-out motion-reduce:transition-none",
-  transform:
-    "transition-transform duration-150 ease-out motion-reduce:transition-none",
-  all: "transition-all duration-150 ease-out motion-reduce:transition-none",
+  /** Overlay scrims. Linear both ways — see the note on fades above. */
+  backdrop: [
+    "transition-opacity",
+    DURATION.sm,
+    "ease-linear",
+    REDUCED,
+    "data-starting-style:opacity-0",
+    "data-ending-style:opacity-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-linear",
+  ].join(" "),
+
+  /** Centred dialog / alert — animates `scale`, so translate centring holds. */
+  popupCenter: [
+    "transition-[scale,opacity]",
+    DURATION.md,
+    "ease-enter",
+    REDUCED,
+    "data-starting-style:scale-[0.96] data-starting-style:opacity-0",
+    "data-ending-style:scale-[0.96] data-ending-style:opacity-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-move",
+  ].join(" "),
+
+  /** Select, tooltip, menus — transform-origin comes from Base UI. */
+  popupAnchor: [
+    "origin-[var(--transform-origin)]",
+    "transition-[transform,scale,opacity]",
+    DURATION.sm,
+    "ease-enter",
+    REDUCED,
+    "data-starting-style:scale-[0.96] data-starting-style:opacity-0",
+    "data-ending-style:scale-[0.96] data-ending-style:opacity-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-move",
+  ].join(" "),
+
+  /** Height expand and collapse. */
+  accordionPanel: [
+    "transition-[height]",
+    DURATION.md,
+    "ease-move",
+    REDUCED,
+    "data-starting-style:h-0",
+    "data-ending-style:h-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-move",
+  ].join(" "),
+
+  /** Sliding tab underline or pill — follows a pointer, so it snaps. */
+  tabsIndicator: [
+    "transition-[translate,width]",
+    DURATION.md,
+    "ease-snap",
+    REDUCED,
+  ].join(" "),
+
+  /** Hover and pressed colour changes. */
+  colors: ["transition-colors", DURATION.sm, "ease-enter", REDUCED].join(" "),
+
+  /** Icon rotates and simple transforms. */
+  transform: [
+    "transition-transform",
+    DURATION.sm,
+    "ease-move",
+    REDUCED,
+  ].join(" "),
+
+  /** Every property. Reach for a narrower token first. */
+  all: ["transition-all", DURATION.sm, "ease-enter", REDUCED].join(" "),
+
+  /** Long, ambient movement — progress fills, meters, background shifts. */
+  passive: ["transition-all", DURATION.lg, "ease-passive", REDUCED].join(" "),
 } as const

package/src/menu.tsx

@@ -34,7 +34,7 @@ export type MenuSubmenuTriggerProps = ComponentProps<
 export type MenuViewportProps = ComponentProps<typeof BaseMenu.Viewport>
 
 const menuItemClassName = cn(
-  "flex min-h-8 cursor-default items-center gap-2 rounded-xs px-2.5 py-1.5 text-sm text-fg-primary outline-none select-none",
+  "flex h-8 cursor-default items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-primary outline-none select-none",
   motion.colors,
   "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-background-tertiary",
 )
@@ -59,7 +59,7 @@ export const MenuBackdrop = ({ className, ...props }: MenuBackdropProps) => (
 )
 
 export const MenuPositioner = ({
-  sideOffset = 4,
+  sideOffset = 8,
   className,
   ...props
 }: MenuPositionerProps) => (
@@ -73,7 +73,7 @@ export const MenuPositioner = ({
 export const MenuPopup = ({ className, ...props }: MenuPopupProps) => (
   <BaseMenu.Popup
     className={cn(
-      "z-50 min-w-40 overflow-hidden rounded-md border border-border-primary bg-surface p-1 shadow-md outline-none",
+      "z-50 min-w-40 overflow-hidden rounded-xl border border-[var(--border-faint)] bg-surface p-1.5 shadow-lg outline-none",
       motion.popupAnchor,
       className,
     )}

package/src/meter.tsx

@@ -53,7 +53,7 @@ export const MeterIndicator = ({
 }: MeterIndicatorProps) => (
   <BaseMeter.Indicator
     className={cn(
-      "h-full rounded-full bg-brand-primary transition-[width] duration-300 ease-out motion-reduce:transition-none",
+      "h-full rounded-full bg-brand-primary transition-[width] duration-[var(--duration-lg)] ease-enter motion-reduce:transition-none",
       className,
     )}
     {...props}

package/src/navigation-menu.tsx

@@ -101,7 +101,7 @@ export const NavigationMenuIcon = ({
 }: NavigationMenuIconProps) => (
   <BaseNavigationMenu.Icon
     className={cn(
-      "inline-flex text-fg-tertiary transition-transform duration-150 ease-out motion-reduce:transition-none data-popup-open:rotate-180",
+      "inline-flex text-fg-tertiary transition-transform duration-[var(--duration-sm)] ease-enter motion-reduce:transition-none data-popup-open:rotate-180",
       className,
     )}
     {...props}
@@ -178,7 +178,7 @@ export const NavigationMenuPopup = ({
   <BaseNavigationMenu.Popup
     className={cn(
       "relative z-50 w-[var(--popup-width)] overflow-hidden rounded-xl border border-border-primary bg-surface shadow-md outline-none",
-      "h-[var(--popup-height)] transition-[width,height,opacity] duration-200 ease-out motion-reduce:transition-none",
+      "h-[var(--popup-height)] transition-[width,height,opacity] duration-[var(--duration-md)] ease-enter motion-reduce:transition-none",
       "data-starting-style:opacity-0 data-ending-style:opacity-0",
       className,
     )}

package/src/progress.tsx

@@ -52,7 +52,7 @@ export const ProgressIndicator = ({
 }: ProgressIndicatorProps) => (
   <BaseProgress.Indicator
     className={cn(
-      "h-full rounded-full bg-brand-primary transition-[width] duration-300 ease-out motion-reduce:transition-none",
+      "h-full rounded-full bg-brand-primary transition-[width] duration-[var(--duration-lg)] ease-enter motion-reduce:transition-none",
       className,
     )}
     {...props}

package/src/scroll-area.tsx

@@ -49,7 +49,7 @@ export const ScrollAreaScrollbar = ({
 }: ScrollAreaScrollbarProps) => (
   <BaseScrollArea.Scrollbar
     className={cn(
-      "flex touch-none p-0.5 opacity-100 transition-opacity duration-150 ease-out motion-reduce:transition-none data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2",
+      "flex touch-none p-0.5 opacity-100 transition-opacity duration-[var(--duration-sm)] ease-enter motion-reduce:transition-none data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2",
       className,
     )}
     {...props}

package/src/slider.tsx

@@ -38,7 +38,7 @@ export const SliderIndicator = ({
 }: SliderIndicatorProps) => (
   <BaseSlider.Indicator
     className={cn(
-      "absolute h-full rounded-full bg-brand-primary transition-[width] duration-150 ease-out motion-reduce:transition-none",
+      "absolute h-full rounded-full bg-brand-primary transition-[width] duration-[var(--duration-sm)] ease-enter motion-reduce:transition-none",
       className,
     )}
     {...props}

package/src/switch.tsx

@@ -9,11 +9,11 @@ export type SwitchProps = ComponentProps<typeof BaseSwitch.Root>
 export const Switch = ({ className, ...props }: SwitchProps) => (
   <BaseSwitch.Root
     className={cn(
-      "relative inline-flex h-6 w-10 shrink-0 items-center rounded-full bg-background-quaternary transition-colors duration-150 ease-out motion-reduce:transition-none outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-checked:bg-brand-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      "relative inline-flex h-6 w-10 shrink-0 items-center rounded-full bg-background-quaternary transition-colors duration-[var(--duration-sm)] ease-enter motion-reduce:transition-none outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-checked:bg-brand-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
       className,
     )}
     {...props}
   >
-    <BaseSwitch.Thumb className="pointer-events-none block size-5 translate-x-0.5 rounded-full bg-surface shadow-sm transition-transform duration-150 ease-out motion-reduce:transition-none data-checked:translate-x-[1.125rem]" />
+    <BaseSwitch.Thumb className="pointer-events-none block size-5 translate-x-0.5 rounded-full bg-surface shadow-sm transition-transform duration-[var(--duration-sm)] ease-enter motion-reduce:transition-none data-checked:translate-x-[1.125rem]" />
   </BaseSwitch.Root>
 )

package/src/text-animate.tsx

@@ -122,9 +122,9 @@ export const TextAnimate = ({
         className={cn(
           "inline-block text-fg-primary",
           effect === "fade" &&
-            "animate-[text-fade-in_0.6s_ease-out_both] motion-reduce:animate-none",
+            "animate-[text-fade-in_0.6s_var(--ease-enter)_both] motion-reduce:animate-none",
           effect === "blur" &&
-            "animate-[text-blur-in_0.7s_ease-out_both] motion-reduce:animate-none",
+            "animate-[text-blur-in_0.7s_var(--ease-enter)_both] motion-reduce:animate-none",
           className,
         )}
         style={{ animationDelay: `${delay}ms` }}

package/src/textarea.tsx

@@ -3,7 +3,7 @@ import type { TextareaHTMLAttributes } from "react"
 import { cn } from "./lib/cn"
 
 const textareaVariants = cva(
-  "flex min-h-20 w-full cursor-text resize-y rounded-md px-3 py-2 text-sm text-fg-primary transition-[color,box-shadow] duration-150 ease-out placeholder:text-fg-quaternary outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20 disabled:cursor-not-allowed disabled:opacity-50",
+  "flex min-h-20 w-full cursor-text resize-y rounded-md px-3 py-2 text-sm text-fg-primary transition-[color,box-shadow] duration-[var(--duration-sm)] ease-enter placeholder:text-fg-quaternary outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20 disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {

package/src/toast.tsx

@@ -41,7 +41,7 @@ export const ToastRoot = ({ className, ...props }: ToastRootProps) => (
     className={cn(
       "relative z-[calc(1000-var(--toast-index))] mb-2 box-border w-full rounded-xl border border-border-primary bg-surface p-4 shadow-lg outline-none",
       "h-[var(--toast-frontmost-height,var(--toast-height))]",
-      "transition-[transform,opacity] duration-200 ease-out motion-reduce:transition-none",
+      "transition-[transform,opacity] duration-[var(--duration-md)] ease-enter motion-reduce:transition-none",
       "data-starting-style:opacity-0 data-starting-style:translate-y-2",
       "data-ending-style:opacity-0 data-ending-style:translate-y-2",
       "data-expanded:h-[var(--toast-height)] data-expanded:translate-y-[var(--toast-offset-y)]",
@@ -56,7 +56,7 @@ export const ToastRoot = ({ className, ...props }: ToastRootProps) => (
 export const ToastContent = ({ className, ...props }: ToastContentProps) => (
   <BaseToast.Content
     className={cn(
-      "flex flex-col gap-1 overflow-hidden transition-opacity duration-150",
+      "flex flex-col gap-1 overflow-hidden transition-opacity duration-[var(--duration-sm)]",
       "data-behind:pointer-events-none data-behind:opacity-0 data-expanded:data-behind:opacity-100",
       className,
     )}