sparkdesign 0.4.7 → 0.4.9

package/cli/registry/basic/accordion.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+
+import { cn } from "@/lib/utils"
+import { ArrowDownSLine } from "./icons-inline"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    data-slot="accordion-item"
+    className={cn("border-b border-border-tertiary last:border-b-0", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+    chevronIcon?: React.ReactNode
+  }
+>(({ className, children, chevronIcon, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      data-slot="accordion-trigger"
+      className={cn(
+        "group flex flex-1 items-center justify-between gap-2 py-4 text-left text-sm font-medium text-text transition-all outline-none hover:text-text-secondary",
+        "focus-visible:ring-2 focus-visible:ring-primary-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <span
+        className="inline-flex shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180"
+        aria-hidden
+      >
+        {chevronIcon ?? <ArrowDownSLine className="size-4 text-text-secondary" />}
+      </span>
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = "AccordionTrigger"
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    data-slot="accordion-content"
+    className={cn(
+      "overflow-hidden text-sm text-text-secondary data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className
+    )}
+    {...props}
+  >
+    <div className="pb-4 pt-0">{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = "AccordionContent"
+
+export type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
+export type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+export type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+  chevronIcon?: React.ReactNode
+}
+export type AccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/cli/registry/basic/alert-dialog.tsx

@@ -3,6 +3,7 @@ import { motion } from 'framer-motion'
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
+import { MOTION_FADE, MOTION_SLIDE_UP } from '@/lib/motion'
 import { getThemeFromDocument } from './theme-from-document'
 
 const AlertDialog = AlertDialogPrimitive.Root
@@ -16,9 +17,7 @@ const AlertDialogOverlay = React.forwardRef<
   <AlertDialogPrimitive.Overlay ref={ref} asChild {...props}>
     <motion.div
       className={cn('fixed inset-0 z-50 bg-bg-mask/60', className)}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 0.15 }}
+      {...MOTION_FADE}
     />
   </AlertDialogPrimitive.Overlay>
 ))
@@ -59,9 +58,7 @@ const AlertDialogContent = React.forwardRef<
         <AlertDialogPrimitive.Content ref={ref} asChild {...props}>
           <motion.div
             className={cn(contentVariants({ size }), className)}
-            initial={{ opacity: 0, y: 8 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
+            {...MOTION_SLIDE_UP}
           >
             {children}
           </motion.div>

package/cli/registry/basic/badge.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base [&>svg]:size-3 [&>svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-text-on-primary hover:bg-primary-hover",
+        secondary: "border-transparent bg-fill-secondary text-text hover:bg-fill",
+        destructive: "border-transparent bg-error text-text-on-primary hover:bg-error-hover",
+        outline: "border-border-tertiary bg-transparent text-text",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export type BadgeProps = React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & {
+    asChild?: boolean
+  }
+
+export { Badge, badgeVariants }

package/cli/registry/basic/button.tsx

@@ -1,9 +1,11 @@
 import { forwardRef } from 'react'
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { Slot } from 'radix-ui'
 import { cva, type VariantProps } from 'class-variance-authority'
+import { Spinner } from './spinner'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-1.5 font-medium transition-colors duration-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer',
+  'inline-flex items-center justify-center gap-1.5 font-medium transition-[color,background-color,border-color,box-shadow,transform] duration-200 active:scale-[0.98] focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer',
   {
     variants: {
       variant: {
@@ -13,6 +15,7 @@ const buttonVariants = cva(
         outline: 'border border-border-tertiary bg-bg-container text-text hover:bg-fill-secondary',
         ghost: 'bg-transparent text-text-secondary hover:bg-fill-secondary hover:text-text',
         text: 'bg-transparent text-text-secondary hover:text-text',
+        destructive: 'bg-error text-text-on-primary hover:bg-error-hover',
       },
       size: {
         sm: 'h-7 px-2 text-xs',
@@ -49,6 +52,8 @@ export interface ButtonProps
   textButton?: boolean
   prefixIcon?: ReactNode
   suffixIcon?: ReactNode
+  loading?: boolean
+  asChild?: boolean
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -62,13 +67,17 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       suffixIcon,
       rounded = 'square',
       disabled = false,
+      loading = false,
+      asChild = false,
       className,
       ...props
     },
     ref
   ) => {
+    const Comp = asChild ? Slot.Root : 'button'
+    const isDisabled = disabled || loading
     return (
-      <button
+      <Comp
         ref={ref}
         className={buttonVariants({
           variant: textButton ? 'text' : variant,
@@ -77,21 +86,30 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           textOnly: textButton,
           className,
         })}
-        disabled={disabled}
+        disabled={isDisabled}
+        aria-busy={loading || undefined}
         {...props}
       >
-        {prefixIcon && (
-          <span className="inline-flex shrink-0 items-center justify-center [&>*]:block [&>*]:leading-none">
-            {prefixIcon}
-          </span>
+        {asChild ? (
+          children
+        ) : (
+          <>
+            {loading ? (
+              <Spinner className="shrink-0" />
+            ) : prefixIcon ? (
+              <span className="inline-flex shrink-0 items-center justify-center [&>*]:block [&>*]:leading-none">
+                {prefixIcon}
+              </span>
+            ) : null}
+            {children}
+            {suffixIcon && (
+              <span className="inline-flex shrink-0 items-center justify-center [&>*]:block [&>*]:leading-none">
+                {suffixIcon}
+              </span>
+            )}
+          </>
         )}
-        {children}
-        {suffixIcon && (
-          <span className="inline-flex shrink-0 items-center justify-center [&>*]:block [&>*]:leading-none">
-            {suffixIcon}
-          </span>
-        )}
-      </button>
+      </Comp>
     )
   }
 )

package/cli/registry/basic/card.tsx

@@ -1,15 +1,27 @@
 import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
+const cardVariants = cva('flex flex-col gap-4 rounded-xl text-text py-6', {
+  variants: {
+    variant: {
+      outline: 'border border-border-tertiary bg-bg-container shadow-sm transition-shadow hover:shadow-md',
+      filled: 'bg-fill-tertiary',
+      ghost: 'bg-transparent',
+    },
+  },
+  defaultVariants: { variant: 'outline' },
+})
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardVariants> {}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = 'outline', ...props }, ref) => (
     <div
       ref={ref}
-      className={cn(
-        'flex flex-col gap-4 rounded-xl border border-border-tertiary bg-bg-container text-text shadow-sm',
-        'py-6',
-        className,
-      )}
+      className={cn(cardVariants({ variant }), className)}
       {...props}
     />
   ),
@@ -84,7 +96,6 @@ const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
 )
 CardFooter.displayName = 'CardFooter'
 
-export type CardProps = React.HTMLAttributes<HTMLDivElement>
 export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>
 export type CardTitleProps = React.HTMLAttributes<HTMLDivElement>
 export type CardDescriptionProps = React.HTMLAttributes<HTMLDivElement>
@@ -100,4 +111,5 @@ export {
   CardAction,
   CardContent,
   CardFooter,
+  cardVariants,
 }

package/cli/registry/basic/collapsible-card.tsx

@@ -1,6 +1,7 @@
-import { useState, useRef, useLayoutEffect, type ReactNode } from 'react'
+import { useState, useRef, useLayoutEffect, type KeyboardEvent, type ReactNode } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { cn } from '@/lib/utils'
+import { MOTION_EXPAND } from '@/lib/motion'
 import { ArrowDownSLine } from './icons-inline'
 
 export interface CollapsibleCardProps {
@@ -88,6 +89,13 @@ export function CollapsibleCard({
     setTimeout(() => setIsAnimating(false), 300)
   }
 
+  const handleToggleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!collapsible) return
+    if (event.key !== 'Enter' && event.key !== ' ') return
+    event.preventDefault()
+    handleToggle()
+  }
+
   const showArrow = collapsible && (isHovered || headerIcon == null)
   const headerIconNode = showArrow
     ? <ArrowDownSLine className={cn('w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0 transition-transform duration-200 text-text-secondary', isExpanded ? 'rotate-0' : '-rotate-90')} />
@@ -122,7 +130,9 @@ export function CollapsibleCard({
         <div
           className={cn('flex flex-row items-center gap-2 flex-1 min-w-0', collapsible && 'cursor-pointer')}
           onClick={handleToggle}
+          onKeyDown={handleToggleKeyDown}
           role={collapsible ? 'button' : undefined}
+          tabIndex={collapsible ? 0 : undefined}
           aria-expanded={collapsible ? isExpanded : undefined}
         >
           <div className="w-[var(--font-size-sm)] h-[var(--font-size-sm)] flex items-center justify-center shrink-0 text-text-secondary [&>svg]:w-[var(--font-size-sm)] [&>svg]:h-[var(--font-size-sm)]">
@@ -150,10 +160,7 @@ export function CollapsibleCard({
       <AnimatePresence initial={false}>
         {isExpanded && (
           <motion.div
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: 'auto', opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: 0.2, ease: [0.2, 0.8, 0.2, 1] }}
+            {...MOTION_EXPAND}
             className={cn('overflow-hidden', isAnimating && 'select-none')}
           >
             {/* 隐藏测量用，用于获取内容实际高度 */}

package/cli/registry/basic/combobox.tsx

@@ -1,73 +1,131 @@
 import * as React from 'react'
+import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react'
+
 import { cn } from '@/lib/utils'
-import { Input } from './input'
+import { Button } from './button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from './command'
+import { Popover, PopoverContent, PopoverTrigger } from './popover'
 
 export interface ComboboxOption {
   value: string
   label: string
   disabled?: boolean
+  keywords?: string[]
 }
 
-export interface ComboboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface ComboboxProps {
   options: ComboboxOption[]
   value?: string
+  defaultValue?: string
   onValueChange?: (value: string) => void
-  placeholder?: string
-  emptyText?: string
+  placeholder?: React.ReactNode
+  searchPlaceholder?: string
+  emptyText?: React.ReactNode
+  disabled?: boolean
+  className?: string
+  contentClassName?: string
+  align?: 'start' | 'center' | 'end'
+  triggerClassName?: string
+  id?: string
+  name?: string
+  'aria-label'?: string
 }
 
 function Combobox({
   options,
   value,
+  defaultValue,
   onValueChange,
-  placeholder = 'Search...',
+  placeholder = 'Select an option…',
+  searchPlaceholder = 'Search…',
   emptyText = 'No option found.',
+  disabled,
   className,
-  ...props
+  contentClassName,
+  triggerClassName,
+  align = 'start',
+  id,
+  name,
+  'aria-label': ariaLabel,
 }: ComboboxProps) {
-  const [query, setQuery] = React.useState('')
-  const selected = options.find((option) => option.value === value)
-  const filtered = options.filter((option) =>
-    option.label.toLowerCase().includes(query.toLowerCase()),
+  const isControlled = value !== undefined
+  const [internal, setInternal] = React.useState<string | undefined>(defaultValue)
+  const [open, setOpen] = React.useState(false)
+  const current = isControlled ? value : internal
+  const selected = options.find((option) => option.value === current)
+
+  const handleSelect = React.useCallback(
+    (next: string) => {
+      const resolved = next === current ? '' : next
+      if (!isControlled) setInternal(resolved)
+      onValueChange?.(resolved)
+      setOpen(false)
+    },
+    [current, isControlled, onValueChange],
   )
 
   return (
-    <div className={cn('w-full rounded-lg border border-border-tertiary bg-bg-container p-1', className)} {...props}>
-      <Input
-        role="combobox"
-        aria-expanded="true"
-        value={query || selected?.label || ''}
-        onChange={(event) => setQuery(event.target.value)}
-        placeholder={placeholder}
-        className="border-0 bg-transparent shadow-none"
-      />
-      <div role="listbox" className="mt-1 max-h-60 overflow-auto rounded-md">
-        {filtered.length > 0 ? (
-          filtered.map((option) => (
-            <button
-              key={option.value}
-              type="button"
-              role="option"
-              aria-selected={option.value === value}
-              disabled={option.disabled}
-              className={cn(
-                'flex w-full items-center rounded-md px-3 py-2 text-left text-sm text-text transition-colors',
-                'hover:bg-fill-secondary focus:bg-fill-secondary focus:outline-none',
-                'disabled:pointer-events-none disabled:opacity-50',
-                option.value === value && 'bg-fill-secondary',
-              )}
-              onClick={() => {
-                onValueChange?.(option.value)
-                setQuery('')
-              }}
-            >
-              {option.label}
-            </button>
-          ))
-        ) : (
-          <div className="px-3 py-2 text-sm text-text-tertiary">{emptyText}</div>
-        )}
-      </div>
+    <div className={cn('w-60', className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            id={id}
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            aria-label={ariaLabel}
+            disabled={disabled}
+            className={cn(
+              'w-full justify-between font-normal',
+              !selected && 'text-text-tertiary',
+              triggerClassName,
+            )}
+            suffixIcon={<ChevronsUpDownIcon className="size-4 shrink-0 opacity-60" />}
+          >
+            <span className="truncate text-left">
+              {selected ? selected.label : placeholder}
+            </span>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          align={align}
+          className={cn('w-[var(--radix-popover-trigger-width)] min-w-56 p-0', contentClassName)}
+        >
+          <Command>
+            <CommandInput placeholder={searchPlaceholder} />
+            <CommandList>
+              <CommandEmpty>{emptyText}</CommandEmpty>
+              <CommandGroup>
+                {options.map((option) => (
+                  <CommandItem
+                    key={option.value}
+                    value={option.value}
+                    keywords={[option.label, ...(option.keywords ?? [])]}
+                    disabled={option.disabled}
+                    onSelect={handleSelect}
+                  >
+                    <CheckIcon
+                      className={cn(
+                        'mr-2 size-4',
+                        option.value === current ? 'opacity-100' : 'opacity-0',
+                      )}
+                    />
+                    <span className="truncate">{option.label}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {name ? <input type="hidden" name={name} value={current ?? ''} /> : null}
     </div>
   )
 }

package/cli/registry/basic/context-menu.tsx

@@ -3,6 +3,7 @@ import { motion } from 'framer-motion'
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
+import { MOTION_SCALE_IN } from '@/lib/motion'
 import { ArrowRightLine, CheckLine } from './icons-inline'
 import { getThemeFromDocument } from './theme-from-document'
 
@@ -40,9 +41,7 @@ const ContextMenuContent = React.forwardRef<
           {...props}
         >
           <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.12, ease: [0.4, 0, 0.2, 1] }}
+            {...MOTION_SCALE_IN}
           >
             {children}
           </motion.div>

package/cli/registry/basic/date-picker.tsx

@@ -1,13 +1,84 @@
 import * as React from 'react'
-import { Input, type InputProps } from './input'
+import { format } from 'date-fns'
+import { CalendarIcon } from 'lucide-react'
 
-export interface DatePickerProps extends Omit<InputProps, 'type'> {
-  type?: 'date' | 'datetime-local' | 'month' | 'time' | 'week'
+import { cn } from '@/lib/utils'
+import { Button } from './button'
+import { Calendar } from './calendar'
+import { Popover, PopoverContent, PopoverTrigger } from './popover'
+
+export interface DatePickerProps {
+  value?: Date
+  defaultValue?: Date
+  onChange?: (date: Date | undefined) => void
+  placeholder?: React.ReactNode
+  disabled?: boolean
+  className?: string
+  align?: 'start' | 'center' | 'end'
+  formatString?: string
+  id?: string
+  name?: string
+  'aria-label'?: string
 }
 
-const DatePicker = React.forwardRef<HTMLInputElement, DatePickerProps>(
-  ({ type = 'date', ...props }, ref) => <Input ref={ref} type={type} {...props} />,
-)
-DatePicker.displayName = 'DatePicker'
+function DatePicker({
+  value,
+  defaultValue,
+  onChange,
+  placeholder = 'Pick a date',
+  disabled,
+  className,
+  align = 'start',
+  formatString = 'PPP',
+  id,
+  name,
+  'aria-label': ariaLabel,
+}: DatePickerProps) {
+  const isControlled = value !== undefined
+  const [internal, setInternal] = React.useState<Date | undefined>(defaultValue)
+  const [open, setOpen] = React.useState(false)
+  const selected = isControlled ? value : internal
+
+  const handleSelect = React.useCallback(
+    (next: Date | undefined) => {
+      if (!isControlled) setInternal(next)
+      onChange?.(next)
+      if (next) setOpen(false)
+    },
+    [isControlled, onChange],
+  )
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          variant="outline"
+          disabled={disabled}
+          aria-label={ariaLabel ?? (typeof placeholder === 'string' ? placeholder : 'Pick a date')}
+          className={cn(
+            'w-60 justify-start text-left font-normal',
+            !selected && 'text-text-tertiary',
+            className,
+          )}
+          suffixIcon={<CalendarIcon className="ml-auto size-4 opacity-60" />}
+        >
+          {selected ? format(selected, formatString) : <span>{placeholder}</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align={align}>
+        <Calendar
+          mode="single"
+          selected={selected}
+          onSelect={handleSelect}
+          autoFocus
+        />
+        {name ? (
+          <input type="hidden" name={name} value={selected ? selected.toISOString() : ''} />
+        ) : null}
+      </PopoverContent>
+    </Popover>
+  )
+}
 
 export { DatePicker }

package/cli/registry/basic/dialog.tsx

@@ -3,6 +3,7 @@ import { motion } from 'framer-motion'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
+import { MOTION_FADE, MOTION_SLIDE_UP } from '@/lib/motion'
 import { CloseLine } from './icons-inline'
 import { getThemeFromDocument } from './theme-from-document'
 
@@ -18,10 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay ref={ref} asChild {...props}>
     <motion.div
       className={cn('fixed inset-0 z-50 bg-bg-mask/60', className)}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-      transition={{ duration: 0.15 }}
+      {...MOTION_FADE}
     />
   </DialogPrimitive.Overlay>
 ))
@@ -81,10 +79,7 @@ const DialogContent = React.forwardRef<
           <DialogPrimitive.Content ref={ref} asChild {...props}>
             <motion.div
               className={cn(contentVariants({ size }), className)}
-              initial={{ opacity: 0, y: 8 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 8 }}
-              transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
+              {...MOTION_SLIDE_UP}
             >
               {children}
               {!hideCloseButton && (