@pantoia/ui 0.16.2 → 0.17.0

package/date-picker/index.tsx

@@ -23,6 +23,11 @@ export const pickerShell = tv({
       + ' read-only:text-fg disabled:cursor-not-allowed',
     text: 'min-w-0 truncate tabular-nums',
     icon: 'text-fg-subtle size-4 shrink-0',
+    root: 'relative flex min-w-0',
+    spacer: 'ms-auto size-5 shrink-0',
+    clear: 'text-fg-subtle absolute top-1/2 right-8 grid size-5 -translate-y-1/2 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',
   },
 
   variants: {
@@ -251,6 +256,10 @@ export interface PickerTriggerProps {
   'aria-invalid'?: boolean
 }
 
+export type PickerClearProps =
+  | { clearable?: false, clearLabel?: never, onValueChange?: (value: string) => void }
+  | { clearable: true, clearLabel?: string, onValueChange?: (value: string | null) => void }
+
 export type PickerShellProps = PickerTriggerProps & {
   value: string | null
   text: ReactNode
@@ -258,13 +267,18 @@ export type PickerShellProps = PickerTriggerProps & {
   title: string
   open: boolean
   onOpenChange: (open: boolean) => void
+  clearable?: boolean
+  clearLabel?: string
+  onClear?: () => void
   children: ReactNode
 }
 
-export function PickerShell({ title, open, onOpenChange, children, value, text, placeholder, id, disabled, surface = 'bare', size, className, ...aria }: PickerShellProps) {
+export function PickerShell({ title, open, onOpenChange, clearable = false, clearLabel = '지우기', onClear, children, value, text, placeholder, id, disabled, surface = 'bare', size, className, ...aria }: PickerShellProps) {
   const wide = useSyncExternalStore(subscribe, () => media()?.matches ?? false, () => false)
   const popup = useRef<HTMLDivElement>(null)
+  const root = useRef<HTMLSpanElement>(null)
   const ui = pickerShell({ surface, empty: value === null })
+  const showClear = clearable && value !== null && !disabled
 
   const trigger = (onClick?: () => void) => (
     <FieldPrimitive.Control
@@ -286,6 +300,7 @@ export function PickerShell({ title, open, onOpenChange, children, value, text,
             className={input({ surface, size, className: ui.trigger({ className }) })}
           >
             <span className={ui.text()}>{value === null ? placeholder : text}</span>
+            {showClear ? <span aria-hidden="true" className={ui.spacer()} /> : null}
             <svg className={ui.icon()} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
               <path d="m6 9 6 6 6-6" />
             </svg>
@@ -295,10 +310,38 @@ export function PickerShell({ title, open, onOpenChange, children, value, text,
     />
   )
 
+  const withClear = (node: ReactNode) => {
+    if (!clearable) return node
+
+    return (
+      <span ref={root} className={ui.root()}>
+        {node}
+        {showClear
+          ? (
+              <button
+                type="button"
+                aria-label={clearLabel}
+                className={ui.clear()}
+                onClick={() => {
+                  onClear?.()
+                  root.current?.querySelector('button')?.focus()
+                }}
+              >
+                <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>
+            )
+          : null}
+      </span>
+    )
+  }
+
   if (!wide) {
     return (
       <>
-        {trigger(() => onOpenChange(true))}
+        {withClear(trigger(() => onOpenChange(true)))}
         <BottomSheet open={open} onOpenChange={next => onOpenChange(next)}>
           <BottomSheetContent initialFocus={false}>
             <BottomSheetHeader closable>
@@ -313,7 +356,7 @@ export function PickerShell({ title, open, onOpenChange, children, value, text,
 
   return (
     <Popover open={open} onOpenChange={next => onOpenChange(next)}>
-      <PopoverTrigger render={trigger()} />
+      {withClear(<PopoverTrigger render={trigger()} />)}
       <PopoverContent
         ref={popup}
         aria-label={title}
@@ -328,10 +371,9 @@ export function PickerShell({ title, open, onOpenChange, children, value, text,
   )
 }
 
-export type DatePickerProps = PickerTriggerProps & {
+export type DatePickerProps = PickerTriggerProps & PickerClearProps & {
   value?: string | null
   defaultValue?: string | null
-  onValueChange?: (value: string) => void
   min?: string
   max?: string
   today?: string
@@ -344,6 +386,8 @@ export function DatePicker({
   value,
   defaultValue = null,
   onValueChange,
+  clearable,
+  clearLabel,
   min,
   max,
   today,
@@ -355,9 +399,24 @@ export function DatePicker({
   const [open, setOpen] = useState(false)
   const [inner, setInner] = useState<string | null>(defaultValue)
   const current = value === undefined ? inner : value
+  const change = onValueChange as ((next: string | null) => void) | undefined
 
   return (
-    <PickerShell {...trigger} title={title} value={current} text={current === null ? null : format(current)} placeholder={placeholder} open={open} onOpenChange={setOpen}>
+    <PickerShell
+      {...trigger}
+      title={title}
+      value={current}
+      text={current === null ? null : format(current)}
+      placeholder={placeholder}
+      open={open}
+      onOpenChange={setOpen}
+      clearable={clearable}
+      clearLabel={clearLabel}
+      onClear={() => {
+        change?.(null)
+        if (value === undefined) setInner(null)
+      }}
+    >
       <Calendar
         value={current}
         min={min}
@@ -367,7 +426,7 @@ export function DatePicker({
           setOpen(false)
           if (next === current) return
 
-          onValueChange?.(next)
+          change?.(next)
           if (value === undefined) setInner(next)
         }}
       />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoia/ui",
-  "version": "0.16.2",
+  "version": "0.17.0",
   "description": "Pantoia Design System",
   "homepage": "https://design.pantoia.com",
   "repository": {

package/skills/pantoia-design/SKILL.md

@@ -151,7 +151,7 @@ disabled는 이럴 때만 준다.
 ```
 팔레트 단계   그 단계를 참조하는 토큰이 모두 바뀐다
 토큰          그 토큰을 쓰는 곳이 모두 바뀐다
-className     그 한 곳만 바뀐다
+className     그 1곳만 바뀐다
 ```
 
 ## 컴포넌트
@@ -211,15 +211,15 @@ Select와 Combobox            목록에서 고르면 Select, 입력해서 찾으
 Checkbox와 Switch            여러 개를 고르면 Checkbox, 설정을 바로 켜고 끄면 Switch
 Toggle과 Switch              도구 모음에서 상태를 누르면 Toggle, 설정이면 Switch
 Badge와 Button               누를 수 없으면 Badge, 누르면 Button
-Tabs와 Accordion             한 번에 하나만 보이면 Tabs, 여러 개를 펴 두면 Accordion
+Tabs와 Accordion             한 번에 1개만 보이면 Tabs, 여러 개를 펴 두면 Accordion
 SegmentedControl과 Tabs      같은 내용의 보기 방식을 바꾸면 SegmentedControl, 다른 내용으로 바꾸면 Tabs
-SegmentedControl과 Toggle    여럿 중 하나를 고르면 SegmentedControl, 하나를 켜고 끄면 Toggle
+SegmentedControl과 Toggle    여럿 중 1개를 고르면 SegmentedControl, 1개를 켜고 끄면 Toggle
 SegmentedControl과 ToggleGroup   이어진 트랙 안에서 고르면 SegmentedControl, 떨어진 pill 여러 개 중에 고르면 ToggleGroup
-Collapsible과 Accordion      한 영역을 접으면 Collapsible, 여러 영역을 함께 다루면 Accordion
+Collapsible과 Accordion      영역 1개를 접으면 Collapsible, 여러 영역을 함께 다루면 Accordion
 Tooltip과 Popover            짧은 설명이면 Tooltip, 안에서 조작하면 Popover
 ```
 
-Avatar의 배경색은 color나 seed 중 하나로 정한다. seed에는 사용자 id처럼 바뀌지 않는 값을 넘기고, 같은 seed는 어느 앱에서나 같은 색이다.
+Avatar의 배경색은 color나 seed 중 1개로 정한다. seed에는 사용자 id처럼 바뀌지 않는 값을 넘기고, 같은 seed는 어느 앱에서나 같은 색이다.
 
 Dialog, AlertDialog, Drawer, BottomSheet의 Footer는 layout으로 버튼을 배치한다. end, between, fill, grow-last 중에 고르고, 화면 폭마다 다르면 { narrow, wide }를 넘긴다. 기준은 sm이고, ModalFooter는 Dialog 모양이면 wide, BottomSheet 모양이면 narrow를 쓴다.
 
@@ -228,6 +228,7 @@ Dialog, AlertDialog, Drawer, BottomSheet의 Footer는 layout으로 버튼을 배
 Modal은 기준 폭(기본 xs, 480px)보다 넓으면 Dialog, 좁으면 BottomSheet로 연다.
 
 DatePicker는 `YYYY-MM-DD`, TimePicker는 `HH:mm` 글자 값을 쓴다. 48rem보다 넓으면 Popover, 좁으면 BottomSheet로 연다. 폭은 wrapper로 정한다.
+DatePicker와 TimePicker는 기본으로 값을 비울 수 없다. 비울 수 있어야 하면 `clearable`을 켠다. 값이 있을 때 지우기 버튼이 보이고, 누르면 `onValueChange`가 `null`을 받는다. 버튼 이름은 `clearLabel`로 바꾼다.
 
 Input, Textarea, NumberField, Select, ComboboxAnchor, DatePicker, TimePicker의 surface는 폼에서는 bare나 well을 쓰고, 표 셀, 헤더, 문장 안에서 값을 바로 고칠 때는 ghost를 쓴다.
 
@@ -238,7 +239,7 @@ Field는 라벨, 도움말, 오류 메시지를 입력 컨트롤에 묶는다. I
 Select는 고른 항목의 `SelectItemText`나 글자를 트리거에 보인다. `SelectItem`을 다른 컴포넌트로 감싸면 `items`로 라벨을 넘긴다.
 Combobox 항목이 `{ value, label }`이 아닌 객체면 `itemToStringLabel`로 `ComboboxInput`에 보일 글자를 정한다.
 
-앱에 한 번만 두는 것이다. 앱은 `isolate`로 감싼다.
+아래 컴포넌트는 앱에 1번만 둔다. 앱은 `isolate`로 감싼다.
 
 ```tsx
 import { Toast, toast } from '@/components/ui/toast'

package/time-picker/index.tsx

@@ -2,7 +2,7 @@
 
 import { useState, type KeyboardEvent } from 'react'
 
-import { PickerShell, type PickerTriggerProps } from '../date-picker'
+import { type PickerClearProps, PickerShell, type PickerTriggerProps } from '../date-picker'
 import { tv } from '../tv'
 
 const DEFAULT_HOUR = 9
@@ -89,10 +89,9 @@ function Column({ label, items, anchor, picked, focusFirst, onPick }: ColumnProp
   )
 }
 
-export type TimePickerProps = PickerTriggerProps & {
+export type TimePickerProps = PickerTriggerProps & PickerClearProps & {
   value?: string | null
   defaultValue?: string | null
-  onValueChange?: (value: string) => void
   step?: number
   title?: string
   placeholder?: string
@@ -102,6 +101,8 @@ export function TimePicker({
   value,
   defaultValue = null,
   onValueChange,
+  clearable,
+  clearLabel,
   step = 1,
   title = '시각 선택',
   placeholder = '시각을 선택하세요',
@@ -114,10 +115,12 @@ export function TimePicker({
   const { hour, minute } = partsOf(current)
   const minutes = Array.from({ length: Math.ceil(60 / step) }, (_, index) => index * step)
 
+  const change = onValueChange as ((next: string | null) => void) | undefined
+
   const set = (nextHour: number, nextMinute: number) => {
     const next = `${pad(nextHour)}:${pad(nextMinute)}`
 
-    onValueChange?.(next)
+    change?.(next)
     if (value === undefined) setInner(next)
   }
 
@@ -127,7 +130,21 @@ export function TimePicker({
   }
 
   return (
-    <PickerShell {...trigger} title={title} value={current} text={current === null ? null : clockText(current)} placeholder={placeholder} open={open} onOpenChange={setOpen}>
+    <PickerShell
+      {...trigger}
+      title={title}
+      value={current}
+      text={current === null ? null : clockText(current)}
+      placeholder={placeholder}
+      open={open}
+      onOpenChange={setOpen}
+      clearable={clearable}
+      clearLabel={clearLabel}
+      onClear={() => {
+        change?.(null)
+        if (value === undefined) setInner(null)
+      }}
+    >
       <div className={timePicker().root()}>
         <Column
           label="오전 오후"