@pantoia/ui 0.1.0 → 0.2.0

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`
+`lucide-react`, `radix-ui`

package/combobox/index.tsx

@@ -7,6 +7,7 @@ import {
   use,
   useEffect,
   useId,
+  useRef,
   useState,
   type ComponentProps,
   type InputHTMLAttributes,
@@ -23,6 +24,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 +75,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 +90,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 +134,8 @@ export function Combobox({
       open: isOpen,
       active,
       search,
-      setSearch,
+      setSearch: changeSearch,
+      setNotify,
       setOpen,
       pick,
       see,
@@ -143,15 +156,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-background-well',
     },
     size: { sm: 'h-8', md: 'h-9', lg: 'h-10 [&_input]:text-t16' },
   },
@@ -179,19 +192,24 @@ export interface ComboboxInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
   onValueChange?: (value: string) => void
 }
 
+const comboboxInput = tv({
+  base: 'text-value text-foreground placeholder:text-foreground-placeholder'
+    + ' w-full min-w-0 bg-transparent outline-none'
+    + ' disabled:text-foreground-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 +244,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-foreground-subtle grid size-5 shrink-0 place-items-center rounded-r8'
+    + ' transition-state press-shrink hover:text-foreground'
+    + ' 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,10 +271,7 @@ 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"
@@ -260,6 +280,13 @@ export function ComboboxTrigger({ label = '목록 열기', disabled, className }
   )
 }
 
+const comboboxCancel = tv({
+  base: 'text-foreground-subtle grid size-5 shrink-0 place-items-center rounded-full'
+    + ' transition-state press-shrink hover:text-foreground'
+    + ' 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,10 +296,7 @@ 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" />
     </button>
@@ -282,6 +306,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-foreground rounded-float 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 +322,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 +332,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 +346,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 +361,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-foreground-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,17 +386,14 @@ 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}
       </span>
 
       {ctx.value === value && (
-        <span className="text-fg-muted flex shrink-0">
+        <span className="text-foreground-muted flex shrink-0">
           <Check className="size-4" />
         </span>
       )}
@@ -367,31 +401,37 @@ export function ComboboxItem({ value, textValue, disabled = false, className, ch
   )
 }
 
+const comboboxItemText = tv({ base: 'text-label text-foreground' })
+
 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-foreground-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">
+        <span className="text-caption text-foreground-subtle px-2 pb-1 pt-2">
           {label}
         </span>
       )}
@@ -400,19 +440,23 @@ export function ComboboxGroup({ label, className, children }: {
   )
 }
 
+const comboboxEmpty = tv({ base: 'text-caption text-foreground-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,10 +34,11 @@
 | `placeholder` | `string` | 예 |
 | `emptyText` | `string` | 예 |
 | `onSelect` | `(value: string) => void` |  |
+| `className` | `string` |  |
 
 ## 함께 받는 것
 
-`combobox` · `dialog` · `kbd`
+`combobox`, `dialog`, `kbd`
 
 ## npm 의존
 

package/command-palette/index.tsx

@@ -31,6 +31,7 @@ export interface CommandPaletteProps {
   placeholder: string
   emptyText: string
   onSelect?: (value: string) => void
+  className?: string
 }
 
 export function CommandPalette({
@@ -42,6 +43,7 @@ export function CommandPalette({
   placeholder,
   emptyText,
   onSelect,
+  className,
 }: CommandPaletteProps) {
   const [own, setOwn] = useState(defaultOpen)
   const [search, setSearch] = useState('')
@@ -68,7 +70,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 +78,7 @@ 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" />
+            <Search className="text-foreground-subtle size-5 shrink-0" />
             <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-foreground 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-background-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-foreground-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>
   )