@pantoia/ui 0.1.0 → 0.3.0

package/checkbox/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { Check, Minus } from 'lucide-react'
 import { Checkbox as CheckboxPrimitive } from 'radix-ui'
 import {
   createContext,
@@ -15,26 +14,26 @@ import {
 import { tv } from '../tv'
 
 export const checkbox = tv({
-  base: 'size-5 shrink-0 rounded-mark inline-flex items-center justify-center'
+  base: 'size-5 shrink-0 rounded-r4 inline-flex items-center justify-center'
     + ' bg-transparent ring-1 ring-inset ring-line-strong'
     + ' transition-state press press-shrink'
     + ' checked:ring-2'
-    + ' invalid:ring-2 invalid:ring-danger'
-    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
-    + ' disabled:ring-line disabled:bg-disabled disabled:cursor-not-allowed'
-    + ' checked:disabled:bg-control-on-disabled checked:disabled:ring-control-on-disabled',
+    + ' invalid:ring-2 invalid:ring-line-danger'
+    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
+    + ' disabled:ring-line disabled:bg-bg-neutral-disabled disabled:cursor-not-allowed'
+    + ' checked:disabled:bg-bg-neutral-solid-checked-disabled checked:disabled:ring-transparent',
 
   variants: {
     color: {
-      control: 'checked:bg-control-on checked:ring-control-on',
-      info: 'checked:bg-info checked:ring-info',
-      success: 'checked:bg-success checked:ring-success',
-      warning: 'checked:bg-warning checked:ring-warning',
-      danger: 'checked:bg-danger checked:ring-danger',
+      neutral: 'checked:bg-bg-neutral-solid checked:ring-line-neutral-solid',
+      info: 'checked:bg-bg-info-solid checked:ring-line-info',
+      success: 'checked:bg-bg-success-solid checked:ring-line-success',
+      warning: 'checked:bg-bg-warning-solid checked:ring-line-warning',
+      danger: 'checked:bg-bg-danger-solid checked:ring-line-danger',
     },
   },
 
-  defaultVariants: { color: 'control' },
+  defaultVariants: { color: 'neutral' },
 })
 
 interface GroupContext {
@@ -56,6 +55,8 @@ export interface CheckboxGroupProps {
   children?: ReactNode
 }
 
+const checkboxGroup = tv({ base: 'flex flex-col gap-3' })
+
 export function CheckboxGroup({
   value,
   defaultValue,
@@ -94,7 +95,7 @@ export function CheckboxGroup({
         ref={root}
         role="group"
         onKeyDown={onKeyDown}
-        className={tv({ base: 'flex flex-col gap-3' })({ className })}
+        className={checkboxGroup({ className })}
       >
         {children}
       </div>
@@ -108,7 +109,7 @@ export interface CheckboxProps extends Omit<ComponentProps<typeof CheckboxPrimit
   onCheckedChange?: (checked: boolean) => void
   indeterminate?: boolean
   onIndeterminateChange?: (indeterminate: boolean) => void
-  color?: 'control' | 'info' | 'success' | 'warning' | 'danger'
+  color?: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 }
 
 export function Checkbox({
@@ -143,8 +144,10 @@ export function Checkbox({
       onCheckedChange={change}
       className={checkbox({ color, className })}
     >
-      <CheckboxPrimitive.Indicator className="text-fg-on-control flex">
-        {indeterminate ? <Minus className="size-4" /> : <Check className="size-4" />}
+      <CheckboxPrimitive.Indicator className="text-fg-neutral-solid-contrast flex">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+          {indeterminate ? <path d="M5 12h14" /> : <path d="M20 6 9 17l-5-5" />}
+        </svg>
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )

package/combobox/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add combobox
 층     ui
-파일   combobox/index.tsx · combobox/AGENTS.md
+파일   combobox/index.tsx, combobox/AGENTS.md
 ```
 
 ## 부위
@@ -13,16 +13,16 @@
 | `Combobox` | `ComboboxProps` |
 | `ComboboxAnchor` | `ComboboxAnchorProps` |
 | `ComboboxInput` | `ComboboxInputProps` |
-| `ComboboxTrigger` | — |
-| `ComboboxCancel` | — |
+| `ComboboxTrigger` | - |
+| `ComboboxCancel` | - |
 | `ComboboxContent` | `ComboboxContentProps` |
-| `ComboboxViewport` | — |
+| `ComboboxViewport` | - |
 | `ComboboxItem` | `ComboboxItemProps` |
-| `ComboboxItemText` | — |
-| `ComboboxItemDescription` | — |
-| `ComboboxGroup` | — |
-| `ComboboxEmpty` | — |
-| `ComboboxSeparator` | — |
+| `ComboboxItemText` | - |
+| `ComboboxItemDescription` | - |
+| `ComboboxGroup` | - |
+| `ComboboxEmpty` | - |
+| `ComboboxSeparator` | - |
 
 ### `ComboboxTrigger`
 
@@ -134,12 +134,12 @@
 | `className` | `string` |  |
 | `children` | `ReactNode` |  |
 
-## 변형 — `comboboxAnchor`
+## 변형 - `comboboxAnchor`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `surface` | `bare` · `well` | `bare` |
-| `size` | `sm` · `md` · `lg` | `md` |
+| `surface` | `bare`, `well` | `bare` |
+| `size` | `sm`, `md`, `lg` | `md` |
 
 ## 함께 받는 것
 
@@ -147,4 +147,4 @@
 
 ## npm 의존
 
-`lucide-react` · `radix-ui`
+`radix-ui`

package/combobox/index.tsx

@@ -1,12 +1,12 @@
 'use client'
 
-import { Check, ChevronDown, X } from 'lucide-react'
 import { Popover as PopoverPrimitive } from 'radix-ui'
 import {
   createContext,
   use,
   useEffect,
   useId,
+  useRef,
   useState,
   type ComponentProps,
   type InputHTMLAttributes,
@@ -23,6 +23,7 @@ interface ComboboxContext {
   active: string | undefined
   search: string
   setSearch: (search: string) => void
+  setNotify: (notify: ((search: string) => void) | undefined) => void
   setOpen: (open: boolean) => void
   pick: (value: string) => void
   move: (step: number) => void
@@ -73,6 +74,7 @@ export function Combobox({
   const [search, setSearch] = useState('')
   const [count, setCount] = useState(0)
   const [seen, setSeen] = useState(false)
+  const notifyRef = useRef<((search: string) => void) | undefined>(undefined)
 
   const isOpen = open ?? ownOpen
   const current = value ?? ownValue
@@ -87,10 +89,19 @@ export function Combobox({
     onOpenChange?.(next)
   }
 
+  const setNotify = (next: ((search: string) => void) | undefined) => {
+    notifyRef.current = next
+  }
+
+  const changeSearch = (next: string) => {
+    setSearch(next)
+    notifyRef.current?.(next)
+  }
+
   const pick = (next: string) => {
     if (value === undefined) setOwnValue(next)
     onValueChange?.(next)
-    setSearch(next)
+    changeSearch(next)
     setOpen(false)
   }
 
@@ -122,7 +133,8 @@ export function Combobox({
       open: isOpen,
       active,
       search,
-      setSearch,
+      setSearch: changeSearch,
+      setNotify,
       setOpen,
       pick,
       see,
@@ -143,15 +155,15 @@ export function Combobox({
 export const comboboxAnchor = tv({
   base: 'flex items-center gap-tight rounded-r8 px-3'
     + ' transition-state'
-    + ' invalid-within:ring-2 invalid-within:ring-danger'
-    + ' has-disabled:bg-disabled has-disabled:cursor-not-allowed'
+    + ' invalid-within:ring-2 invalid-within:ring-line-danger'
+    + ' has-disabled:bg-bg-neutral-disabled has-disabled:cursor-not-allowed'
     + ' has-focus-visible:outline-2 has-focus-visible:outline-offset-2'
-    + ' has-focus-visible:outline-ring',
+    + ' has-focus-visible:outline-line-focus-ring',
 
   variants: {
     surface: {
       bare: 'ring-1 ring-inset ring-line-strong',
-      well: 'bg-well',
+      well: 'bg-bg-well',
     },
     size: { sm: 'h-8', md: 'h-9', lg: 'h-10 [&_input]:text-t16' },
   },
@@ -179,19 +191,24 @@ export interface ComboboxInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
   onValueChange?: (value: string) => void
 }
 
+const comboboxInput = tv({
+  base: 'text-value text-fg placeholder:text-fg-placeholder'
+    + ' w-full min-w-0 bg-transparent outline-none'
+    + ' disabled:text-fg-disabled disabled:cursor-not-allowed',
+})
+
 export function ComboboxInput({ value, onValueChange, className, ...rest }: ComboboxInputProps) {
   const ctx = useCombobox()
   const text = value ?? ctx.search
-  const [seen, setSeen] = useState(ctx.search)
+  const { setNotify } = ctx
 
-  if (seen !== ctx.search) {
-    setSeen(ctx.search)
-    if (ctx.search !== text) onValueChange?.(ctx.search)
-  }
+  useEffect(() => {
+    setNotify(onValueChange)
+    return () => setNotify(undefined)
+  })
 
   const change = (next: string) => {
     ctx.setSearch(next)
-    onValueChange?.(next)
     if (!ctx.open) ctx.setOpen(true)
   }
 
@@ -226,13 +243,18 @@ export function ComboboxInput({ value, onValueChange, className, ...rest }: Comb
       value={text}
       onChange={e => change(e.target.value)}
       onKeyDown={onKeyDown}
-      className={tv({ base: 'text-value text-fg placeholder:text-fg-placeholder'
-        + ' w-full min-w-0 bg-transparent outline-none'
-        + ' disabled:text-fg-disabled disabled:cursor-not-allowed' })({ className })}
+      className={comboboxInput({ className })}
     />
   )
 }
 
+const comboboxTrigger = tv({
+  base: 'text-fg-subtle grid size-5 shrink-0 place-items-center rounded-r8'
+    + ' transition-state press-shrink hover:text-fg'
+    + ' focus-visible:outline-2 focus-visible:outline-offset-2'
+    + ' focus-visible:outline-line-focus-ring',
+})
+
 export function ComboboxTrigger({ label = '목록 열기', disabled, className }: {
   label?: string
   disabled?: boolean
@@ -248,18 +270,22 @@ export function ComboboxTrigger({ label = '목록 열기', disabled, className }
       disabled={disabled}
       data-state={ctx.open ? 'open' : 'closed'}
       onClick={() => ctx.setOpen(!ctx.open)}
-      className={tv({ base: 'text-fg-subtle grid size-5 shrink-0 place-items-center rounded-r8'
-        + ' transition-state press-shrink hover:text-fg'
-        + ' focus-visible:outline-2 focus-visible:outline-offset-2'
-        + ' focus-visible:outline-ring' })({ className })}
+      className={comboboxTrigger({ className })}
     >
-      <ChevronDown
-        className="size-4 transition-transform open:rotate-180 motion-reduce:transition-none"
-      />
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4 transition-transform open:rotate-180 motion-reduce:transition-none">
+        <path d="m6 9 6 6 6-6" />
+      </svg>
     </button>
   )
 }
 
+const comboboxCancel = tv({
+  base: 'text-fg-subtle grid size-5 shrink-0 place-items-center rounded-full'
+    + ' transition-state press-shrink hover:text-fg'
+    + ' focus-visible:outline-2 focus-visible:outline-offset-2'
+    + ' focus-visible:outline-line-focus-ring',
+})
+
 export function ComboboxCancel({ label = '지우기', className }: { label?: string, className?: string }) {
   const ctx = useCombobox()
 
@@ -269,12 +295,12 @@ export function ComboboxCancel({ label = '지우기', className }: { label?: str
       tabIndex={-1}
       aria-label={label}
       onClick={() => ctx.setSearch('')}
-      className={tv({ base: 'text-fg-subtle grid size-5 shrink-0 place-items-center rounded-full'
-        + ' transition-state press-shrink hover:text-fg'
-        + ' focus-visible:outline-2 focus-visible:outline-offset-2'
-        + ' focus-visible:outline-ring' })({ className })}
+      className={comboboxCancel({ className })}
     >
-      <X className="size-4" />
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
     </button>
   )
 }
@@ -282,6 +308,12 @@ export function ComboboxCancel({ label = '지우기', className }: { label?: str
 export type ComboboxContentProps =
   Omit<ComponentProps<typeof PopoverPrimitive.Content>, 'align' | 'sideOffset' | 'onOpenAutoFocus'>
 
+const comboboxContent = tv({
+  base: 'float text-fg rounded-r12 z-overlay'
+    + ' w-(--radix-popover-trigger-width)'
+    + ' open:animate-enter closed:animate-exit',
+})
+
 export function ComboboxContent({ className, children, ...rest }: ComboboxContentProps) {
   const label = rest['aria-label']
 
@@ -292,9 +324,7 @@ export function ComboboxContent({ className, children, ...rest }: ComboboxConten
         align="start"
         sideOffset={4}
         onOpenAutoFocus={e => e.preventDefault()}
-        className={tv({ base: 'bg-float text-fg rounded-float shadow-s3 z-overlay'
-          + ' w-(--radix-popover-trigger-width) p-1'
-          + ' open:animate-enter closed:animate-exit' })({ className })}
+        className={comboboxContent({ className })}
       >
         <ComboboxViewport label={label} className="max-h-72">
           {children}
@@ -304,6 +334,8 @@ export function ComboboxContent({ className, children, ...rest }: ComboboxConten
   )
 }
 
+const comboboxViewport = tv({ base: 'flex flex-col gap-px overflow-y-auto p-1' })
+
 export function ComboboxViewport({ label, className, children }: {
   label?: string
   className?: string
@@ -316,7 +348,7 @@ export function ComboboxViewport({ label, className, children }: {
       id={`${ctx.id}-list`}
       role={ctx.count > 0 ? 'listbox' : undefined}
       aria-label={ctx.count > 0 ? label : undefined}
-      className={tv({ base: 'flex flex-col gap-px overflow-y-auto' })({ className })}
+      className={comboboxViewport({ className })}
     >
       {children}
     </div>
@@ -331,6 +363,13 @@ export interface ComboboxItemProps {
   children?: ReactNode
 }
 
+const comboboxItem = tv({
+  base: 'flex min-h-9 cursor-default items-center justify-between gap-stack'
+    + ' shrink-0 rounded-r8 px-2 py-1 transition-state'
+    + ' data-highlighted:bg-bg-neutral-hover data-highlighted:outline-none'
+    + ' data-disabled:text-fg-disabled data-disabled:pointer-events-none',
+})
+
 export function ComboboxItem({ value, textValue, disabled = false, className, children }: ComboboxItemProps) {
   const ctx = useCombobox()
   const shown = ctx.ignoreFilter || contains(textValue ?? value, ctx.search)
@@ -349,10 +388,7 @@ export function ComboboxItem({ value, textValue, disabled = false, className, ch
       data-disabled={disabled ? '' : undefined}
       onPointerMove={() => !disabled && ctx.setActive(value)}
       onClick={() => !disabled && ctx.pick(value)}
-      className={tv({ base: 'flex min-h-9 cursor-default items-center justify-between gap-stack'
-        + ' shrink-0 rounded-r8 px-2 py-1 transition-state'
-        + ' data-highlighted:bg-hover data-highlighted:outline-none'
-        + ' data-disabled:text-fg-disabled data-disabled:pointer-events-none' })({ className })}
+      className={comboboxItem({ className })}
     >
       <span className="flex min-w-0 flex-col gap-0.5">
         {children}
@@ -360,36 +396,44 @@ export function ComboboxItem({ value, textValue, disabled = false, className, ch
 
       {ctx.value === value && (
         <span className="text-fg-muted flex shrink-0">
-          <Check className="size-4" />
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
         </span>
       )}
     </div>
   )
 }
 
+const comboboxItemText = tv({ base: 'text-label text-fg' })
+
 export function ComboboxItemText({ className, children }: { className?: string, children?: ReactNode }) {
   return (
-    <span className={tv({ base: 'text-label text-fg' })({ className })}>
+    <span className={comboboxItemText({ className })}>
       {children}
     </span>
   )
 }
 
+const comboboxItemDescription = tv({ base: 'text-caption text-fg-subtle' })
+
 export function ComboboxItemDescription({ className, children }: { className?: string, children?: ReactNode }) {
   return (
-    <span className={tv({ base: 'text-caption text-fg-subtle' })({ className })}>
+    <span className={comboboxItemDescription({ className })}>
       {children}
     </span>
   )
 }
 
+const comboboxGroup = tv({ base: 'flex flex-col gap-px' })
+
 export function ComboboxGroup({ label, className, children }: {
   label?: string
   className?: string
   children?: ReactNode
 }) {
   return (
-    <div role="group" className={tv({ base: 'flex flex-col gap-px' })({ className })}>
+    <div role="group" className={comboboxGroup({ className })}>
       {label && (
         <span className="text-caption text-fg-subtle px-2 pb-1 pt-2">
           {label}
@@ -400,19 +444,23 @@ export function ComboboxGroup({ label, className, children }: {
   )
 }
 
+const comboboxEmpty = tv({ base: 'text-caption text-fg-subtle px-2 py-3 text-center' })
+
 export function ComboboxEmpty({ className, children }: { className?: string, children?: ReactNode }) {
   const ctx = useCombobox()
   if (ctx.count > 0) return null
 
   return (
-    <div role="presentation" className={tv({ base: 'text-caption text-fg-subtle px-2 py-3 text-center' })({ className })}>
+    <div role="presentation" className={comboboxEmpty({ className })}>
       {children}
     </div>
   )
 }
 
+const comboboxSeparator = tv({ base: 'bg-line -mx-1 my-1 h-px' })
+
 export function ComboboxSeparator({ className }: { className?: string }) {
-  return <div className={tv({ base: 'bg-line -mx-1 my-1 h-px' })({ className })} />
+  return <div className={comboboxSeparator({ className })} />
 }
 
 export function contains(text: string, search: string) {

package/command-palette/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add command-palette
 층     derived
-파일   command-palette/index.tsx · command-palette/AGENTS.md
+파일   command-palette/index.tsx, command-palette/AGENTS.md
 ```
 
 ## 부위
@@ -34,11 +34,8 @@
 | `placeholder` | `string` | 예 |
 | `emptyText` | `string` | 예 |
 | `onSelect` | `(value: string) => void` |  |
+| `className` | `string` |  |
 
 ## 함께 받는 것
 
-`combobox` · `dialog` · `kbd`
-
-## npm 의존
-
-`lucide-react`
+`combobox`, `dialog`, `kbd`

package/command-palette/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { Search } from 'lucide-react'
 import { useState } from 'react'
 
 import {
@@ -31,6 +30,7 @@ export interface CommandPaletteProps {
   placeholder: string
   emptyText: string
   onSelect?: (value: string) => void
+  className?: string
 }
 
 export function CommandPalette({
@@ -42,6 +42,7 @@ export function CommandPalette({
   placeholder,
   emptyText,
   onSelect,
+  className,
 }: CommandPaletteProps) {
   const [own, setOwn] = useState(defaultOpen)
   const [search, setSearch] = useState('')
@@ -68,7 +69,7 @@ export function CommandPalette({
 
   return (
     <Dialog open={isOpen} onOpenChange={setOpen}>
-      <DialogContent size="top">
+      <DialogContent size="top" className={className}>
         <DialogTitle className="sr-only">{title}</DialogTitle>
         <DialogDescription className="sr-only">
           {placeholder}
@@ -76,7 +77,10 @@ export function CommandPalette({
 
         <Combobox open onValueChange={pick}>
           <div className="border-line flex h-14 items-center gap-stack border-b px-4">
-            <Search className="text-fg-subtle size-5 shrink-0" />
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-fg-subtle size-5 shrink-0">
+              <path d="m21 21-4.34-4.34" />
+              <circle cx="11" cy="11" r="8" />
+            </svg>
             <ComboboxInput
               value={search}
               onValueChange={setSearch}

package/dialog/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add dialog
 층     ui
-파일   dialog/index.tsx · dialog/AGENTS.md
+파일   dialog/index.tsx, dialog/AGENTS.md
 ```
 
 ## 부위
@@ -11,13 +11,13 @@
 | 이름 | props |
 |---|---|
 | `Dialog` | `DialogProps` |
-| `DialogTrigger` | — |
-| `DialogClose` | — |
+| `DialogTrigger` | - |
+| `DialogClose` | - |
 | `DialogContent` | `DialogContentProps` |
 | `DialogTitle` | `ComponentProps<typeof DialogPrimitive.Title>` |
 | `DialogDescription` | `ComponentProps<typeof DialogPrimitive.Description>` |
 | `DialogHeader` | `DialogHeaderProps` |
-| `DialogFooter` | — |
+| `DialogFooter` | - |
 
 ### `DialogTrigger`
 
@@ -66,11 +66,11 @@
 | `className` | `string` |  |
 | `children` | `ReactNode` |  |
 
-## 변형 — `dialog`
+## 변형 - `dialog`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `size` | `md` · `full` · `top` | `md` |
+| `size` | `md`, `full`, `top` | `md` |
 
 ## 함께 받는 것
 

package/dialog/index.tsx

@@ -6,7 +6,7 @@ import type { ComponentProps, ReactNode } from 'react'
 import { tv } from '../tv'
 
 export const dialog = tv({
-  base: 'bg-float text-fg z-overlay fixed flex flex-col gap-stack overflow-y-auto'
+  base: 'sheet text-fg z-overlay fixed flex flex-col gap-stack overflow-y-auto'
     + ' open:animate-fade-in closed:animate-fade-out focus-visible:outline-none',
 
   variants: {
@@ -52,7 +52,7 @@ export interface DialogContentProps extends ComponentProps<typeof DialogPrimitiv
 export function DialogContent({ size, className, children, ...rest }: DialogContentProps) {
   return (
     <DialogPrimitive.Portal>
-      <DialogPrimitive.Overlay className="bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+      <DialogPrimitive.Overlay className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
 
       <DialogPrimitive.Content {...rest} className={dialog({ size, className })}>
         {children}
@@ -61,13 +61,17 @@ export function DialogContent({ size, className, children, ...rest }: DialogCont
   )
 }
 
+const dialogTitle = tv({ base: 'text-section min-w-0' })
+
 export function DialogTitle({ className, ...rest }: ComponentProps<typeof DialogPrimitive.Title>) {
-  return <DialogPrimitive.Title {...rest} className={tv({ base: 'text-section min-w-0' })({ className })} />
+  return <DialogPrimitive.Title {...rest} className={dialogTitle({ className })} />
 }
 
+const dialogDescription = tv({ base: 'text-prose text-fg-muted' })
+
 export function DialogDescription({ className, ...rest }: ComponentProps<typeof DialogPrimitive.Description>) {
   return (
-    <DialogPrimitive.Description {...rest} className={tv({ base: 'text-prose text-fg-muted' })({ className })} />
+    <DialogPrimitive.Description {...rest} className={dialogDescription({ className })} />
   )
 }
 
@@ -99,9 +103,11 @@ export function DialogHeader({ lead, trail, className, children }: DialogHeaderP
   )
 }
 
+const dialogFooter = tv({ base: 'flex justify-end gap-2' })
+
 export function DialogFooter({ className, children }: { className?: string, children?: ReactNode }) {
   return (
-    <div className={tv({ base: 'flex justify-end gap-2' })({ className })}>
+    <div className={dialogFooter({ className })}>
       {children}
     </div>
   )