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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-react",
-  "version": "0.1.1-canary.2",
+  "version": "0.1.1-canary.3",
   "description": "React components for StandardUI",
   "license": "MIT",
   "type": "module",

package/src/accordion.tsx

@@ -79,6 +79,6 @@ export const AccordionPanel = ({
     )}
     {...props}
   >
-    <div className="px-4 pt-0 pb-4 leading-relaxed">{children}</div>
+    <div className="px-4 pt-2 pb-4 leading-relaxed">{children}</div>
   </BaseAccordion.Panel>
 )

package/src/autocomplete.tsx

@@ -66,8 +66,7 @@ export const AutocompleteInputGroup = ({
 }: AutocompleteInputGroupProps) => (
   <BaseAutocomplete.InputGroup
     className={cn(
-      "relative flex min-h-9 w-full items-center rounded-md border border-border-secondary bg-surface inset-shadow-outline-top outline-none transition-[color,box-shadow]",
-      "has-[[data-popup-open]]:bg-background-tertiary/60",
+      "relative flex min-h-9 w-full items-center rounded-xl border border-border-secondary bg-surface inset-shadow-outline-top outline-none transition-[color,box-shadow]",
       "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-offset-1 focus-within:ring-offset-background-primary focus-within:ring-ring/20",
       "aria-invalid:border-destructive aria-invalid:focus-within:border-destructive aria-invalid:focus-within:ring-destructive/20",
       "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:focus-within:border-destructive has-[[aria-invalid=true]]:focus-within:ring-destructive/20",
@@ -84,7 +83,7 @@ export const AutocompleteInput = ({
 }: AutocompleteInputProps) => (
   <BaseAutocomplete.Input
     className={cn(
-      "h-9 min-w-0 flex-1 cursor-text rounded-md bg-transparent px-3 text-sm text-fg-primary outline-none placeholder:text-fg-quaternary focus-visible:ring-0",
+      "h-9 min-w-0 flex-1 cursor-text rounded-xl bg-transparent px-3 text-sm text-fg-primary outline-none placeholder:text-fg-quaternary focus-visible:ring-0",
       className,
     )}
     {...props}
@@ -134,7 +133,7 @@ export const AutocompleteClear = ({
     {...props}
   >
     {children ?? (
-      <IconCrossSmall size={14} className="size-3.5" aria-hidden />
+      <IconCrossSmall size={16} className="size-4" aria-hidden />
     )}
   </BaseAutocomplete.Clear>
 )
@@ -151,7 +150,7 @@ export const AutocompleteBackdrop = ({
 )
 
 export const AutocompletePositioner = ({
-  sideOffset = 4,
+  sideOffset = 6,
   className,
   ...props
 }: AutocompletePositionerProps) => (
@@ -168,7 +167,7 @@ export const AutocompletePopup = ({
 }: AutocompletePopupProps) => (
   <BaseAutocomplete.Popup
     className={cn(
-      "z-50 max-h-[min(24rem,var(--available-height))] w-[var(--anchor-width)] overflow-hidden rounded-md border border-border-primary bg-surface shadow-md outline-none",
+      "z-50 max-h-[min(24rem,var(--available-height))] w-[var(--anchor-width)] overflow-hidden rounded-xl border border-border-primary-solid bg-surface shadow-lg outline-none",
       motion.popupAnchor,
       className,
     )}
@@ -199,7 +198,7 @@ export const AutocompleteList = ({
   ...props
 }: AutocompleteListProps) => (
   <BaseAutocomplete.List
-    className={cn("max-h-[inherit] overflow-y-auto p-1 outline-none", className)}
+    className={cn("max-h-[inherit] overflow-y-auto p-1.5 outline-none empty:p-0", className)}
     {...props}
   />
 )
@@ -210,7 +209,7 @@ export const AutocompleteItem = ({
 }: AutocompleteItemProps) => (
   <BaseAutocomplete.Item
     className={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 min-h-9 cursor-default items-center gap-2 rounded-sm px-3 py-2 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 data-highlighted:text-fg-primary",
       className,
@@ -224,7 +223,7 @@ export const AutocompleteEmpty = ({
   ...props
 }: AutocompleteEmptyProps) => (
   <BaseAutocomplete.Empty
-    className={cn("px-2.5 py-2 text-sm text-fg-tertiary empty:hidden", className)}
+    className={cn("px-3 py-2 text-sm text-fg-tertiary empty:hidden", className)}
     {...props}
   />
 )
@@ -234,7 +233,7 @@ export const AutocompleteStatus = ({
   ...props
 }: AutocompleteStatusProps) => (
   <BaseAutocomplete.Status
-    className={cn("px-2.5 py-2 text-sm text-fg-tertiary", className)}
+    className={cn("px-3 py-2 text-sm text-fg-tertiary", className)}
     {...props}
   />
 )
@@ -251,7 +250,7 @@ export const AutocompleteGroupLabel = ({
   ...props
 }: AutocompleteGroupLabelProps) => (
   <BaseAutocomplete.GroupLabel
-    className={cn("px-2.5 py-1.5 text-xs text-fg-tertiary", className)}
+    className={cn("px-3 py-1.5 text-xs text-fg-tertiary", className)}
     {...props}
   />
 )

package/src/button.tsx

@@ -3,7 +3,7 @@ import type { ButtonHTMLAttributes, ReactNode } from "react"
 import { cn } from "./lib/cn"
 
 const buttonVariants = cva(
-  "text-sm inline-flex cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap transition-all duration-150 ease-out outline-none focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary disabled:cursor-not-allowed disabled:opacity-50 disabled:active:translate-y-0 active:translate-y-px [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "text-sm inline-flex cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap transition-all duration-[var(--duration-sm)] ease-enter outline-none focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary disabled:cursor-not-allowed disabled:opacity-50 disabled:active:translate-y-0 active:translate-y-px [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {

package/src/checkbox.tsx

@@ -10,7 +10,7 @@ export type CheckboxProps = ComponentProps<typeof BaseCheckbox.Root>
 export const Checkbox = ({ className, ...props }: CheckboxProps) => (
   <BaseCheckbox.Root
     className={cn(
-      "group flex size-4 shrink-0 items-center justify-center rounded-sm border border-border-secondary bg-surface 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:border-brand-primary data-checked:bg-brand-primary data-indeterminate:border-brand-primary data-indeterminate:bg-brand-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      "group flex size-4 shrink-0 items-center justify-center rounded-sm border border-border-secondary bg-surface 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:border-brand-primary data-checked:bg-brand-primary data-indeterminate:border-brand-primary data-indeterminate:bg-brand-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
       className,
     )}
     {...props}

package/src/drawer.tsx

@@ -69,7 +69,7 @@ export const DrawerPopup = ({ className, ...props }: DrawerPopupProps) => (
   <BaseDrawer.Popup
     className={cn(
       "fixed z-50 flex flex-col border-border-primary bg-surface shadow-md outline-none",
-      "transition-[transform,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
+      "transition-[transform,opacity] duration-[var(--duration-lg)] ease-move motion-reduce:transition-none",
       "data-swiping:duration-0",
       // Right panel (swipeDirection="right")
       "data-[swipe-direction=right]:top-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:h-full data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-sm data-[swipe-direction=right]:border-l",

package/src/field.tsx

@@ -49,7 +49,7 @@ export const FieldError = ({ className, ...props }: FieldErrorProps) => (
 export const FieldControl = ({ className, ...props }: FieldControlProps) => (
   <BaseField.Control
     className={cn(
-      "text-sm flex h-9 w-full cursor-text rounded-md border border-border-secondary bg-surface px-3 text-fg-primary inset-shadow-outline-top outline-none transition-[color,box-shadow] duration-150 ease-out placeholder:text-fg-quaternary",
+      "text-sm flex h-9 w-full cursor-text rounded-md border border-border-secondary bg-surface px-3 text-fg-primary inset-shadow-outline-top outline-none transition-[color,box-shadow] duration-[var(--duration-sm)] ease-enter placeholder:text-fg-quaternary",
       "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-invalid:border-destructive data-invalid:focus-visible:border-destructive data-invalid:focus-visible:ring-destructive/20",
       "aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20",

package/src/input.tsx

@@ -5,7 +5,7 @@ import { forwardRef, type InputHTMLAttributes } from "react"
 import { cn } from "./lib/cn"
 
 const inputVariants = cva(
-  "text-sm flex w-full cursor-text rounded-md text-fg-primary transition-[color,box-shadow] duration-150 ease-out placeholder:text-fg-quaternary outline-none aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50",
+  "text-sm flex w-full cursor-text rounded-md text-fg-primary transition-[color,box-shadow] duration-[var(--duration-sm)] ease-enter placeholder:text-fg-quaternary outline-none aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {

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/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,
     )}