@pantoia/ui 0.1.0

package/combobox/index.tsx

@@ -0,0 +1,420 @@
+'use client'
+
+import { Check, ChevronDown, X } from 'lucide-react'
+import { Popover as PopoverPrimitive } from 'radix-ui'
+import {
+  createContext,
+  use,
+  useEffect,
+  useId,
+  useState,
+  type ComponentProps,
+  type InputHTMLAttributes,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ReactNode,
+} from 'react'
+
+import { tv } from '../tv'
+
+interface ComboboxContext {
+  id: string
+  value: string | undefined
+  open: boolean
+  active: string | undefined
+  search: string
+  setSearch: (search: string) => void
+  setOpen: (open: boolean) => void
+  pick: (value: string) => void
+  move: (step: number) => void
+  setActive: (value: string | undefined) => void
+  itemId: (value: string) => string
+  count: number
+  ignoreFilter: boolean
+  see: (visible: boolean) => () => void
+}
+
+const USABLE = '[role="option"]:not([data-disabled])'
+
+const Context = createContext<ComboboxContext | null>(null)
+
+const useCombobox = () => {
+  const ctx = use(Context)
+  if (!ctx) throw new Error('Combobox 부품은 Combobox 안에서만 선다')
+  return ctx
+}
+
+export interface ComboboxProps {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  ignoreFilter?: boolean
+  className?: string
+  children?: ReactNode
+}
+
+export function Combobox({
+  value,
+  defaultValue,
+  onValueChange,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  ignoreFilter = true,
+  className,
+  children,
+}: ComboboxProps) {
+  const id = useId()
+  const [ownValue, setOwnValue] = useState(defaultValue)
+  const [ownOpen, setOwnOpen] = useState(defaultOpen)
+  const [active, setActive] = useState<string | undefined>(undefined)
+  const [search, setSearch] = useState('')
+  const [count, setCount] = useState(0)
+  const [seen, setSeen] = useState(false)
+
+  const isOpen = open ?? ownOpen
+  const current = value ?? ownValue
+
+  if (seen !== isOpen) {
+    setSeen(isOpen)
+    if (!isOpen) setActive(undefined)
+  }
+
+  const setOpen = (next: boolean) => {
+    if (open === undefined) setOwnOpen(next)
+    onOpenChange?.(next)
+  }
+
+  const pick = (next: string) => {
+    if (value === undefined) setOwnValue(next)
+    onValueChange?.(next)
+    setSearch(next)
+    setOpen(false)
+  }
+
+  const see = (visible: boolean) => {
+    if (!visible) return () => {}
+    setCount(n => n + 1)
+    return () => setCount(n => n - 1)
+  }
+
+  const move = (step: number) => {
+    const list = document.getElementById(`${id}-list`)
+    if (!list) return
+
+    const usable = [...list.querySelectorAll<HTMLElement>(USABLE)].map(el => el.dataset.value!)
+    if (usable.length === 0) return
+
+    const at = active === undefined ? -1 : usable.indexOf(active)
+    const next = at === -1
+      ? (step > 0 ? 0 : usable.length - 1)
+      : (at + step + usable.length) % usable.length
+
+    setActive(usable[next])
+  }
+
+  return (
+    <Context value={{
+      id,
+      value: current,
+      open: isOpen,
+      active,
+      search,
+      setSearch,
+      setOpen,
+      pick,
+      see,
+      move,
+      setActive,
+      itemId: (item: string) => `${id}-${item}`,
+      count,
+      ignoreFilter,
+    }}
+    >
+      <PopoverPrimitive.Root open={isOpen} onOpenChange={setOpen}>
+        <div className={className}>{children}</div>
+      </PopoverPrimitive.Root>
+    </Context>
+  )
+}
+
+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'
+    + ' has-focus-visible:outline-2 has-focus-visible:outline-offset-2'
+    + ' has-focus-visible:outline-ring',
+
+  variants: {
+    surface: {
+      bare: 'ring-1 ring-inset ring-line-strong',
+      well: 'bg-well',
+    },
+    size: { sm: 'h-8', md: 'h-9', lg: 'h-10 [&_input]:text-t16' },
+  },
+
+  defaultVariants: { surface: 'bare', size: 'md' },
+})
+
+export interface ComboboxAnchorProps {
+  surface?: 'bare' | 'well'
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+  children?: ReactNode
+}
+
+export function ComboboxAnchor({ surface, size, className, children }: ComboboxAnchorProps) {
+  return (
+    <PopoverPrimitive.Anchor className={comboboxAnchor({ surface, size, className })}>
+      {children}
+    </PopoverPrimitive.Anchor>
+  )
+}
+
+export interface ComboboxInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+  value?: string
+  onValueChange?: (value: string) => void
+}
+
+export function ComboboxInput({ value, onValueChange, className, ...rest }: ComboboxInputProps) {
+  const ctx = useCombobox()
+  const text = value ?? ctx.search
+  const [seen, setSeen] = useState(ctx.search)
+
+  if (seen !== ctx.search) {
+    setSeen(ctx.search)
+    if (ctx.search !== text) onValueChange?.(ctx.search)
+  }
+
+  const change = (next: string) => {
+    ctx.setSearch(next)
+    onValueChange?.(next)
+    if (!ctx.open) ctx.setOpen(true)
+  }
+
+  const onKeyDown = (e: ReactKeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault()
+      if (!ctx.open) ctx.setOpen(true)
+      else ctx.move(e.key === 'ArrowDown' ? 1 : -1)
+      return
+    }
+
+    if (e.key === 'Enter' && ctx.open && ctx.active !== undefined) {
+      e.preventDefault()
+      ctx.pick(ctx.active)
+      return
+    }
+
+    if (e.key === 'Escape' && ctx.open) {
+      e.preventDefault()
+      ctx.setOpen(false)
+    }
+  }
+
+  return (
+    <input
+      {...rest}
+      role="combobox"
+      aria-expanded={ctx.open}
+      aria-controls={ctx.open ? `${ctx.id}-list` : undefined}
+      aria-autocomplete="list"
+      aria-activedescendant={ctx.active === undefined ? undefined : ctx.itemId(ctx.active)}
+      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 })}
+    />
+  )
+}
+
+export function ComboboxTrigger({ label = '목록 열기', disabled, className }: {
+  label?: string
+  disabled?: boolean
+  className?: string
+}) {
+  const ctx = useCombobox()
+
+  return (
+    <button
+      type="button"
+      tabIndex={-1}
+      aria-label={label}
+      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 })}
+    >
+      <ChevronDown
+        className="size-4 transition-transform open:rotate-180 motion-reduce:transition-none"
+      />
+    </button>
+  )
+}
+
+export function ComboboxCancel({ label = '지우기', className }: { label?: string, className?: string }) {
+  const ctx = useCombobox()
+
+  return (
+    <button
+      type="button"
+      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 })}
+    >
+      <X className="size-4" />
+    </button>
+  )
+}
+
+export type ComboboxContentProps =
+  Omit<ComponentProps<typeof PopoverPrimitive.Content>, 'align' | 'sideOffset' | 'onOpenAutoFocus'>
+
+export function ComboboxContent({ className, children, ...rest }: ComboboxContentProps) {
+  const label = rest['aria-label']
+
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        {...rest}
+        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 })}
+      >
+        <ComboboxViewport label={label} className="max-h-72">
+          {children}
+        </ComboboxViewport>
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+export function ComboboxViewport({ label, className, children }: {
+  label?: string
+  className?: string
+  children?: ReactNode
+}) {
+  const ctx = useCombobox()
+
+  return (
+    <div
+      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 })}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface ComboboxItemProps {
+  value: string
+  textValue?: string
+  disabled?: boolean
+  className?: string
+  children?: ReactNode
+}
+
+export function ComboboxItem({ value, textValue, disabled = false, className, children }: ComboboxItemProps) {
+  const ctx = useCombobox()
+  const shown = ctx.ignoreFilter || contains(textValue ?? value, ctx.search)
+
+  useEffect(() => ctx.see(shown), [ctx, shown])
+
+  if (!shown) return null
+
+  return (
+    <div
+      id={ctx.itemId(value)}
+      role="option"
+      data-value={value}
+      aria-selected={ctx.value === value}
+      data-highlighted={ctx.active === value ? '' : undefined}
+      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 })}
+    >
+      <span className="flex min-w-0 flex-col gap-0.5">
+        {children}
+      </span>
+
+      {ctx.value === value && (
+        <span className="text-fg-muted flex shrink-0">
+          <Check className="size-4" />
+        </span>
+      )}
+    </div>
+  )
+}
+
+export function ComboboxItemText({ className, children }: { className?: string, children?: ReactNode }) {
+  return (
+    <span className={tv({ base: 'text-label text-fg' })({ className })}>
+      {children}
+    </span>
+  )
+}
+
+export function ComboboxItemDescription({ className, children }: { className?: string, children?: ReactNode }) {
+  return (
+    <span className={tv({ base: 'text-caption text-fg-subtle' })({ className })}>
+      {children}
+    </span>
+  )
+}
+
+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 })}>
+      {label && (
+        <span className="text-caption text-fg-subtle px-2 pb-1 pt-2">
+          {label}
+        </span>
+      )}
+      {children}
+    </div>
+  )
+}
+
+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 })}>
+      {children}
+    </div>
+  )
+}
+
+export function ComboboxSeparator({ className }: { className?: string }) {
+  return <div className={tv({ base: 'bg-line -mx-1 my-1 h-px' })({ className })} />
+}
+
+export function contains(text: string, search: string) {
+  return text.normalize('NFC').toLocaleLowerCase().includes(search.normalize('NFC').toLocaleLowerCase())
+}

package/command-palette/AGENTS.md

@@ -0,0 +1,44 @@
+# CommandPalette
+
+```
+받기   npx @pantoia/ui add command-palette
+층     derived
+파일   command-palette/index.tsx · command-palette/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `CommandPalette` | `CommandPaletteProps` |
+
+## props
+
+### `CommandPaletteItem`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string` | 예 |
+| `label` | `string` | 예 |
+| `group` | `string` |  |
+
+### `CommandPaletteProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `open` | `boolean` |  |
+| `defaultOpen` | `boolean` |  |
+| `onOpenChange` | `(open: boolean) => void` |  |
+| `items` | `CommandPaletteItem[]` | 예 |
+| `title` | `string` | 예 |
+| `placeholder` | `string` | 예 |
+| `emptyText` | `string` | 예 |
+| `onSelect` | `(value: string) => void` |  |
+
+## 함께 받는 것
+
+`combobox` · `dialog` · `kbd`
+
+## npm 의존
+
+`lucide-react`

package/command-palette/index.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import { Search } from 'lucide-react'
+import { useState } from 'react'
+
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemDescription,
+  ComboboxItemText,
+  ComboboxViewport,
+  contains,
+} from '../combobox'
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from '../dialog'
+import { Kbd } from '../kbd'
+
+export interface CommandPaletteItem {
+  value: string
+  label: string
+  group?: string
+}
+
+export interface CommandPaletteProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  items: CommandPaletteItem[]
+  title: string
+  placeholder: string
+  emptyText: string
+  onSelect?: (value: string) => void
+}
+
+export function CommandPalette({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  items,
+  title,
+  placeholder,
+  emptyText,
+  onSelect,
+}: 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)
+    setOpen(false)
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setOpen}>
+      <DialogContent size="top">
+        <DialogTitle className="sr-only">{title}</DialogTitle>
+        <DialogDescription className="sr-only">
+          {placeholder}
+        </DialogDescription>
+
+        <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" />
+            <ComboboxInput
+              value={search}
+              onValueChange={setSearch}
+              placeholder={placeholder}
+              className="text-t16"
+              autoFocus
+            />
+            <Kbd>Esc</Kbd>
+          </div>
+
+          <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>
+            ))}
+          </ComboboxViewport>
+        </Combobox>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/copy-button/AGENTS.md

@@ -0,0 +1,43 @@
+# CopyButton
+
+```
+받기   npx @pantoia/ui add copy-button
+층     derived
+파일   copy-button/index.tsx · copy-button/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `CopyButton` | `CopyButtonProps` |
+
+## 도우미
+
+`useCopy(resetAfter = 2000)`
+
+## props
+
+### `CopyState`
+
+`'idle' | 'copied' | 'failed'`
+
+### `CopyButtonProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string` | 예 |
+| `color` | `'primary' \| 'neutral' \| 'danger'` |  |
+| `emphasis` | `'solid' \| 'weak' \| 'outline' \| 'ghost'` |  |
+| `size` | `'sm' \| 'md' \| 'lg'` |  |
+| `shape` | `'rect' \| 'square' \| 'pill' \| 'circle'` |  |
+| `onCopied` | `(value: string) => void` |  |
+| `onFailed` | `() => void` |  |
+| `disabled` | `boolean` |  |
+| `className` | `string` |  |
+| `aria-label` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## 함께 받는 것
+
+`button`