@pantoia/ui 0.3.0 → 0.4.0

package/command-palette/index.tsx

@@ -4,13 +4,14 @@ import { useState } from 'react'
 
 import {
   Combobox,
+  ComboboxCollection,
   ComboboxEmpty,
+  ComboboxGroup,
   ComboboxInput,
   ComboboxItem,
   ComboboxItemDescription,
   ComboboxItemText,
   ComboboxViewport,
-  contains,
 } from '../combobox'
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from '../dialog'
 import { Kbd } from '../kbd'
@@ -18,52 +19,68 @@ import { Kbd } from '../kbd'
 export interface CommandPaletteItem {
   value: string
   label: string
-  group?: string
+  description?: string
+  textValue?: string
+}
+
+export interface CommandPaletteGroup {
+  label: string
+  items: CommandPaletteItem[]
 }
 
 export interface CommandPaletteProps {
   open?: boolean
   defaultOpen?: boolean
   onOpenChange?: (open: boolean) => void
-  items: CommandPaletteItem[]
+  items: CommandPaletteItem[] | CommandPaletteGroup[]
   title: string
+  description?: string
   placeholder: string
   emptyText: string
   onSelect?: (value: string) => void
   className?: string
 }
 
+const searchText = (item: CommandPaletteItem) => item.textValue ?? item.label
+
+const isGrouped = (items: CommandPaletteProps['items']): items is CommandPaletteGroup[] =>
+  items.length > 0 && 'items' in items[0]!
+
+function renderItem(item: CommandPaletteItem) {
+  return (
+    <ComboboxItem key={item.value} value={item}>
+      <ComboboxItemText>{item.label}</ComboboxItemText>
+      {item.description && (
+        <ComboboxItemDescription>{item.description}</ComboboxItemDescription>
+      )}
+    </ComboboxItem>
+  )
+}
+
 export function CommandPalette({
   open,
   defaultOpen = false,
   onOpenChange,
   items,
   title,
+  description,
   placeholder,
   emptyText,
   onSelect,
   className,
 }: CommandPaletteProps) {
   const [own, setOwn] = useState(defaultOpen)
-  const [search, setSearch] = useState('')
-  const [seen, setSeen] = useState(defaultOpen)
 
   const isOpen = open ?? own
 
-  if (seen !== isOpen) {
-    setSeen(isOpen)
-    if (!isOpen) setSearch('')
-  }
-
   const setOpen = (next: boolean) => {
     if (open === undefined) setOwn(next)
     onOpenChange?.(next)
   }
 
-  const filtered = search ? items.filter(i => contains(i.label, search)) : items
-
-  const pick = (value: string) => {
-    onSelect?.(value)
+  const pick = (item: CommandPaletteItem | null) => {
+    if (!item) return
+    onSelect?.(item.value)
     setOpen(false)
   }
 
@@ -71,19 +88,22 @@ export function CommandPalette({
     <Dialog open={isOpen} onOpenChange={setOpen}>
       <DialogContent size="top" className={className}>
         <DialogTitle className="sr-only">{title}</DialogTitle>
-        <DialogDescription className="sr-only">
-          {placeholder}
-        </DialogDescription>
+        {description && <DialogDescription className="sr-only">{description}</DialogDescription>}
 
-        <Combobox open onValueChange={pick}>
+        <Combobox<CommandPaletteItem>
+          inline
+          open={isOpen}
+          items={items}
+          itemToStringLabel={searchText}
+          value={null}
+          onValueChange={pick}
+        >
           <div className="border-line flex h-14 items-center gap-stack border-b px-4">
             <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}
               placeholder={placeholder}
               className="text-t16"
               autoFocus
@@ -91,19 +111,18 @@ export function CommandPalette({
             <Kbd>Esc</Kbd>
           </div>
 
+          <ComboboxEmpty className="m-2 py-6">
+            {emptyText}
+          </ComboboxEmpty>
+
           <ComboboxViewport className="max-h-80 gap-1 p-2">
-            <ComboboxEmpty className="py-6">
-              {emptyText}
-            </ComboboxEmpty>
-
-            {filtered.map(item => (
-              <ComboboxItem key={item.value} value={item.value}>
-                <ComboboxItemText>{item.label}</ComboboxItemText>
-                {item.group && (
-                  <ComboboxItemDescription>{item.group}</ComboboxItemDescription>
-                )}
-              </ComboboxItem>
-            ))}
+            {isGrouped(items)
+              ? (group: CommandPaletteGroup) => (
+                  <ComboboxGroup key={group.label} label={group.label} items={group.items}>
+                    <ComboboxCollection>{renderItem}</ComboboxCollection>
+                  </ComboboxGroup>
+                )
+              : renderItem}
           </ComboboxViewport>
         </Combobox>
       </DialogContent>

package/dialog/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Dialog as DialogPrimitive } from 'radix-ui'
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
 import type { ComponentProps, ReactNode } from 'react'
 
 import { tv } from '../tv'
@@ -22,54 +22,58 @@ export const dialog = tv({
   defaultVariants: { size: 'md' },
 })
 
-export interface DialogProps {
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  children?: ReactNode
-}
+export type DialogProps = ComponentProps<typeof DialogPrimitive.Root>
 
-export function Dialog({ open, defaultOpen, onOpenChange, children }: DialogProps) {
-  return (
-    <DialogPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-      {children}
-    </DialogPrimitive.Root>
-  )
+export function Dialog(props: DialogProps) {
+  return <DialogPrimitive.Root {...props} />
 }
 
-export function DialogTrigger({ children }: { children: ReactNode }) {
-  return <DialogPrimitive.Trigger asChild>{children}</DialogPrimitive.Trigger>
+export type DialogTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>
+
+export function DialogTrigger(props: DialogTriggerProps) {
+  return <DialogPrimitive.Trigger {...props} />
 }
 
-export function DialogClose({ children }: { children: ReactNode }) {
-  return <DialogPrimitive.Close asChild>{children}</DialogPrimitive.Close>
+export type DialogCloseProps = ComponentProps<typeof DialogPrimitive.Close>
+
+export function DialogClose(props: DialogCloseProps) {
+  return <DialogPrimitive.Close {...props} />
 }
 
-export interface DialogContentProps extends ComponentProps<typeof DialogPrimitive.Content> {
+export type DialogContentProps = Omit<ComponentProps<typeof DialogPrimitive.Popup>, 'className'> & {
   size?: 'md' | 'full' | 'top'
+  className?: string
 }
 
 export function DialogContent({ size, className, children, ...rest }: DialogContentProps) {
   return (
     <DialogPrimitive.Portal>
-      <DialogPrimitive.Overlay className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+      <DialogPrimitive.Backdrop className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
 
-      <DialogPrimitive.Content {...rest} className={dialog({ size, className })}>
+      <DialogPrimitive.Popup {...rest} className={dialog({ size, className })}>
         {children}
-      </DialogPrimitive.Content>
+      </DialogPrimitive.Popup>
     </DialogPrimitive.Portal>
   )
 }
 
 const dialogTitle = tv({ base: 'text-section min-w-0' })
 
-export function DialogTitle({ className, ...rest }: ComponentProps<typeof DialogPrimitive.Title>) {
+export type DialogTitleProps = Omit<ComponentProps<typeof DialogPrimitive.Title>, 'className'> & {
+  className?: string
+}
+
+export function DialogTitle({ className, ...rest }: DialogTitleProps) {
   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>) {
+export type DialogDescriptionProps = Omit<ComponentProps<typeof DialogPrimitive.Description>, 'className'> & {
+  className?: string
+}
+
+export function DialogDescription({ className, ...rest }: DialogDescriptionProps) {
   return (
     <DialogPrimitive.Description {...rest} className={dialogDescription({ className })} />
   )
@@ -103,7 +107,7 @@ export function DialogHeader({ lead, trail, className, children }: DialogHeaderP
   )
 }
 
-const dialogFooter = tv({ base: 'flex justify-end gap-2' })
+const dialogFooter = tv({ base: 'mt-auto flex justify-end gap-2' })
 
 export function DialogFooter({ className, children }: { className?: string, children?: ReactNode }) {
   return (

package/dist/index.js

@@ -39,7 +39,7 @@ const USAGE = `npx @pantoia/ui <명령어>
   init [--path <경로>] [--css <경로>]   컴포넌트를 저장할 위치와 전역 CSS 파일을 정해요
   add <이름...> [--force]              컴포넌트를 추가해요
   list                                 추가할 수 있는 컴포넌트를 확인해요
-  diff [이름]                          추가한 파일과 최신 파일을 비교해요`;
+  diff [이름]                          추가한 파일을 설치된 패키지의 파일과 비교해요`;
 function fail(message) {
     console.error(message);
     exit(1);
@@ -139,7 +139,7 @@ async function installPackages() {
     let fonts = FONTS.every(spec => have.has(packageName(spec)));
     if (!fonts) {
         console.log('');
-        fonts = await confirm(`글꼴 패키지를 설치할까요? ${FONTS.map(packageName).join(', ')}`, true);
+        fonts = await confirm(`글꼴 패키지 ${FONTS.map(packageName).join(', ')}를 설치할까요?`, true);
         if (fonts)
             specs.push(...FONTS);
     }
@@ -199,7 +199,7 @@ async function importStyles(css, head, tail) {
 }
 async function commandInit(args) {
     if (readConfig())
-        fail(`${CONFIG}이 이미 있어요.`);
+        fail(`${CONFIG}이 이미 있어요. 컴포넌트는 npx @pantoia/ui add로 추가하세요.`);
     const detected = detect();
     const path = option(args, '--path') ?? await ask('컴포넌트를 저장할 위치를 입력하세요.', detected.path);
     const css = option(args, '--css') ?? await ask('전역 CSS 파일 위치를 입력하세요.', detected.css);
@@ -270,7 +270,7 @@ async function commandAdd(args) {
     }
 }
 function commandList() {
-    console.log(`${'이름'.padEnd(16)}${'종류'.padEnd(7)}같이 추가되는 컴포넌트`);
+    console.log(`${'이름'.padEnd(16)}${'종류'.padEnd(7)}함께 추가되는 컴포넌트`);
     for (const item of registry()) {
         const layer = item.meta?.layer ?? (item.type === 'registry:lib' ? 'lib' : '');
         const together = (item.registryDependencies ?? []).join(', ');
@@ -323,7 +323,7 @@ async function commandDiff(args) {
             if (mine === theirs)
                 continue;
             if (changed === 0)
-                console.log('- 는 내 파일, + 는 최신 파일이에요.');
+                console.log('- 줄은 내 파일, + 줄은 설치된 패키지의 파일이에요.');
             changed++;
             console.log(`\n${join(config.path, file.target ?? file.path)}`);
             for (const line of difference(mine.split('\n'), theirs.split('\n')))

package/drawer/index.module.css

@@ -7,8 +7,8 @@
   transition: transform var(--dur-enter) var(--ease-enter);
 }
 
-.panel[data-state="open"]  { animation: slide-in  var(--dur-enter) var(--ease-enter); }
-.panel[data-state="closed"]{ animation: slide-out var(--dur-exit)  var(--ease-exit); }
+.panel[data-open]   { animation: slide-in  var(--dur-enter) var(--ease-enter); }
+.panel[data-closed] { animation: slide-out var(--dur-exit)  var(--ease-exit); }
 .panel[data-swiping] { transition-duration: 0ms; }
 .panel-right { --drawer-slide: 100%; }
 

package/drawer/index.tsx

@@ -1,16 +1,7 @@
 'use client'
 
-import { Dialog } from 'radix-ui'
-import {
-  createContext,
-  use,
-  useRef,
-  useState,
-  type ComponentProps,
-  type PointerEvent as ReactPointerEvent,
-  type ReactNode,
-  type RefObject,
-} from 'react'
+import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer'
+import { createContext, use, type ComponentProps, type ReactNode } from 'react'
 
 import { tv } from '../tv'
 
@@ -18,102 +9,30 @@ import s from './index.module.css'
 
 type Side = 'left' | 'right'
 
-const DrawerContext = createContext<{ side: Side, close: () => void }>({
-  side: 'left',
-  close: () => {},
-})
-
-const SWIPE_THRESHOLD = 40
-const SWIPE_VELOCITY = 0.3
-const MIN_DRAG = 1
-const IGNORE = 'button,a,input,select,textarea,label,[role="button"]'
-
-const MOVEMENT = '--drawer-swipe-movement-x'
-
-type Drag = { id: number, from: number, at: number, dx: number, v: number, on: boolean }
-
-function useSwipeDismiss(el: RefObject<HTMLDivElement | null>, side: Side, close: () => void) {
-  const drag = useRef<Drag | null>(null)
-
-  const onPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
-    if (e.button !== 0) return
-    if ((e.target as Element).closest(IGNORE)) return
-
-    drag.current = { id: e.pointerId, from: e.clientX, at: performance.now(), dx: 0, v: 0, on: false }
-  }
-
-  const onPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {
-    const d = drag.current
-    if (!d || d.id !== e.pointerId || !el.current) return
-
-    const raw = e.clientX - d.from
-    const dx = side === 'left' ? Math.min(0, raw) : Math.max(0, raw)
-    const now = performance.now()
-    const span = now - d.at
-
-    if (span > 0) d.v = (dx - d.dx) / span
-    d.dx = dx
-    d.at = now
-
-    if (!d.on && Math.abs(dx) >= MIN_DRAG) {
-      d.on = true
-      el.current.setAttribute('data-swiping', '')
-      el.current.setPointerCapture(e.pointerId)
-    }
-
-    if (d.on) el.current.style.setProperty(MOVEMENT, `${dx}px`)
-  }
-
-  const onPointerUp = (e: ReactPointerEvent<HTMLDivElement>) => {
-    const d = drag.current
-    if (!d || d.id !== e.pointerId) return
-    drag.current = null
-
-    if (!d.on) return
-    el.current?.removeAttribute('data-swiping')
-
-    const gone = side === 'left' ? -d.dx : d.dx
-    const speed = side === 'left' ? -d.v : d.v
-
-    if (gone >= SWIPE_THRESHOLD || speed > SWIPE_VELOCITY) close()
-    else el.current?.style.removeProperty(MOVEMENT)
-  }
+const DrawerSide = createContext<Side>('left')
 
-  return { onPointerDown, onPointerMove, onPointerUp, onPointerCancel: onPointerUp }
-}
-
-export interface DrawerProps {
+export type DrawerProps = Omit<DrawerPrimitive.Root.Props, 'swipeDirection'> & {
   side?: Side
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  children: ReactNode
 }
 
-export function Drawer({ side = 'left', open, defaultOpen = false, onOpenChange, children }: DrawerProps) {
-  const [own, setOwn] = useState(defaultOpen)
-  const isOpen = open ?? own
-
-  const set = (next: boolean) => {
-    if (open === undefined) setOwn(next)
-    onOpenChange?.(next)
-  }
-
+export function Drawer({ side = 'left', ...rest }: DrawerProps) {
   return (
-    <DrawerContext value={{ side, close: () => set(false) }}>
-      <Dialog.Root open={isOpen} onOpenChange={set} modal>
-        {children}
-      </Dialog.Root>
-    </DrawerContext>
+    <DrawerSide value={side}>
+      <DrawerPrimitive.Root {...rest} swipeDirection={side} />
+    </DrawerSide>
   )
 }
 
-export function DrawerTrigger({ children }: { children: ReactNode }) {
-  return <Dialog.Trigger asChild>{children}</Dialog.Trigger>
+export type DrawerTriggerProps = ComponentProps<typeof DrawerPrimitive.Trigger>
+
+export function DrawerTrigger(props: DrawerTriggerProps) {
+  return <DrawerPrimitive.Trigger {...props} />
 }
 
-export function DrawerClose({ children }: { children: ReactNode }) {
-  return <Dialog.Close asChild>{children}</Dialog.Close>
+export type DrawerCloseProps = ComponentProps<typeof DrawerPrimitive.Close>
+
+export function DrawerClose(props: DrawerCloseProps) {
+  return <DrawerPrimitive.Close {...props} />
 }
 
 export const drawerContent = tv({
@@ -125,37 +44,32 @@ export const drawerContent = tv({
   },
 })
 
-export function DrawerContent({
-  className,
-  style,
-  children,
-  ...rest
-}: ComponentProps<typeof Dialog.Content>) {
-  const { side, close } = use(DrawerContext)
-  const el = useRef<HTMLDivElement>(null)
-  const swipe = useSwipeDismiss(el, side, close)
+export type DrawerContentProps = Omit<ComponentProps<typeof DrawerPrimitive.Popup>, 'className'> & {
+  className?: string
+}
+
+export function DrawerContent({ className, style, ...rest }: DrawerContentProps) {
+  const side = use(DrawerSide)
 
   return (
-    <Dialog.Portal>
-      <Dialog.Overlay className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
-
-      <Dialog.Content
-        {...rest}
-        ref={el}
-        style={{ touchAction: 'pan-y', ...style }}
-        onPointerDown={swipe.onPointerDown}
-        onPointerMove={swipe.onPointerMove}
-        onPointerUp={swipe.onPointerUp}
-        onPointerCancel={swipe.onPointerCancel}
-        className={[
-          s.panel,
-          side === 'right' ? s['panel-right'] : '',
-          drawerContent({ side, className }),
-        ].filter(Boolean).join(' ')}
-      >
-        {children}
-      </Dialog.Content>
-    </Dialog.Portal>
+    <DrawerPrimitive.Portal>
+      <DrawerPrimitive.Backdrop className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+
+      <DrawerPrimitive.Viewport>
+        <DrawerPrimitive.Popup
+          {...rest}
+          style={state => ({
+            touchAction: 'pan-y',
+            ...(typeof style === 'function' ? style(state) : style),
+          })}
+          className={[
+            s.panel,
+            side === 'right' ? s['panel-right'] : '',
+            drawerContent({ side, className }),
+          ].filter(Boolean).join(' ')}
+        />
+      </DrawerPrimitive.Viewport>
+    </DrawerPrimitive.Portal>
   )
 }
 
@@ -189,14 +103,22 @@ export function DrawerHeader({ lead, trail, className, children }: DrawerHeaderP
 
 const drawerTitle = tv({ base: 'text-section min-w-0' })
 
-export function DrawerTitle({ className, ...rest }: ComponentProps<typeof Dialog.Title>) {
-  return <Dialog.Title {...rest} className={drawerTitle({ className })} />
+export type DrawerTitleProps = Omit<ComponentProps<typeof DrawerPrimitive.Title>, 'className'> & {
+  className?: string
+}
+
+export function DrawerTitle({ className, ...rest }: DrawerTitleProps) {
+  return <DrawerPrimitive.Title {...rest} className={drawerTitle({ className })} />
 }
 
 const drawerDescription = tv({ base: 'text-prose text-fg-muted' })
 
-export function DrawerDescription({ className, ...rest }: ComponentProps<typeof Dialog.Description>) {
+export type DrawerDescriptionProps = Omit<ComponentProps<typeof DrawerPrimitive.Description>, 'className'> & {
+  className?: string
+}
+
+export function DrawerDescription({ className, ...rest }: DrawerDescriptionProps) {
   return (
-    <Dialog.Description {...rest} className={drawerDescription({ className })} />
+    <DrawerPrimitive.Description {...rest} className={drawerDescription({ className })} />
   )
 }