@pantoia/ui 0.1.0

package/drawer/index.tsx

@@ -0,0 +1,198 @@
+'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 { tv } from '../tv'
+
+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)
+  }
+
+  return { onPointerDown, onPointerMove, onPointerUp, onPointerCancel: onPointerUp }
+}
+
+export interface DrawerProps {
+  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)
+  }
+
+  return (
+    <DrawerContext value={{ side, close: () => set(false) }}>
+      <Dialog.Root open={isOpen} onOpenChange={set} modal>
+        {children}
+      </Dialog.Root>
+    </DrawerContext>
+  )
+}
+
+export function DrawerTrigger({ children }: { children: ReactNode }) {
+  return <Dialog.Trigger asChild>{children}</Dialog.Trigger>
+}
+
+export function DrawerClose({ children }: { children: ReactNode }) {
+  return <Dialog.Close asChild>{children}</Dialog.Close>
+}
+
+export const drawerContent = tv({
+  base: 'bg-float text-fg z-overlay fixed inset-y-0'
+    + ' flex w-full flex-col gap-stack overflow-y-auto p-4 sm:w-120'
+    + ' focus-visible:outline-none',
+  variants: {
+    side: { left: 'left-0', right: 'right-0' },
+  },
+})
+
+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)
+
+  return (
+    <Dialog.Portal>
+      <Dialog.Overlay className="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>
+  )
+}
+
+export const drawerHeader = tv({
+  slots: {
+    root: 'flex items-start gap-stack',
+    lead: 'shrink-0',
+    body: 'flex min-w-0 grow flex-col gap-tight',
+    trail: 'shrink-0',
+  },
+})
+
+export interface DrawerHeaderProps {
+  lead?: ReactNode
+  trail?: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+export function DrawerHeader({ lead, trail, className, children }: DrawerHeaderProps) {
+  const ui = drawerHeader()
+
+  return (
+    <div className={ui.root({ className })}>
+      {lead && <div className={ui.lead()}>{lead}</div>}
+      <div className={ui.body()}>{children}</div>
+      {trail && <div className={ui.trail()}>{trail}</div>}
+    </div>
+  )
+}
+
+export function DrawerTitle({ className, ...rest }: ComponentProps<typeof Dialog.Title>) {
+  return <Dialog.Title {...rest} className={tv({ base: 'text-section min-w-0' })({ className })} />
+}
+
+export function DrawerDescription({ className, ...rest }: ComponentProps<typeof Dialog.Description>) {
+  return (
+    <Dialog.Description {...rest} className={tv({ base: 'text-prose text-fg-muted' })({ className })} />
+  )
+}

package/dropdown-menu/AGENTS.md

@@ -0,0 +1,133 @@
+# DropdownMenu
+
+```
+받기   npx @pantoia/ui add dropdown-menu
+층     ui
+파일   dropdown-menu/index.tsx · dropdown-menu/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `DropdownMenu` | `DropdownMenuProps` |
+| `DropdownMenuTrigger` | — |
+| `DropdownMenuContent` | `DropdownMenuContentProps` |
+| `DropdownMenuGroup` | — |
+| `DropdownMenuItem` | `DropdownMenuItemProps` |
+| `DropdownMenuCheckboxItem` | — |
+| `DropdownMenuRadioGroup` | — |
+| `DropdownMenuRadioItem` | — |
+| `DropdownMenuSeparator` | — |
+| `DropdownMenuSub` | — |
+| `DropdownMenuSubTrigger` | — |
+| `DropdownMenuSubContent` | `ComponentProps<typeof MenuPrimitive.SubContent>` |
+
+### `DropdownMenuTrigger`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `children` | `ReactNode` | 예 |
+
+### `DropdownMenuGroup`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `label` | `string` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `DropdownMenuCheckboxItem`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `checked` | `boolean` |  |
+| `onCheckedChange` | `(checked: boolean) => void` |  |
+| `disabled` | `boolean` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `DropdownMenuRadioGroup`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string` |  |
+| `onValueChange` | `(value: string) => void` |  |
+| `children` | `ReactNode` |  |
+
+### `DropdownMenuRadioItem`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string` | 예 |
+| `disabled` | `boolean` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `DropdownMenuSeparator`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+
+### `DropdownMenuSub`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `open` | `boolean` |  |
+| `defaultOpen` | `boolean` |  |
+| `onOpenChange` | `(open: boolean) => void` |  |
+| `children` | `ReactNode` |  |
+
+### `DropdownMenuSubTrigger`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `disabled` | `boolean` |  |
+| `lead` | `ReactNode` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## props
+
+### `DropdownMenuProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `open` | `boolean` |  |
+| `defaultOpen` | `boolean` |  |
+| `onOpenChange` | `(open: boolean) => void` |  |
+| `children` | `ReactNode` |  |
+
+### `DropdownMenuContentProps`
+
+`Omit<ComponentProps<typeof MenuPrimitive.Content>, 'align'>` 를 확장한다.
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `align` | `'start' \| 'center' \| 'end'` |  |
+| `arrow` | `boolean` |  |
+
+### `DropdownMenuItemProps`
+
+`Omit<ComponentProps<typeof MenuPrimitive.Item>, 'color'>` 를 확장한다.
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `color` | `'neutral' \| 'danger'` |  |
+| `lead` | `ReactNode` |  |
+| `trail` | `ReactNode` |  |
+
+## 변형 — `menuItem`
+
+| 축 | 값 | 기본 |
+|---|---|---|
+| `color` | `neutral` · `danger` | `neutral` |
+
+## 함께 받는 것
+
+`tv`
+
+## npm 의존
+
+`lucide-react` · `radix-ui`

package/dropdown-menu/index.tsx

@@ -0,0 +1,223 @@
+'use client'
+
+import { Check, ChevronRight } from 'lucide-react'
+import { DropdownMenu as MenuPrimitive } from 'radix-ui'
+import type { ComponentProps, ReactNode } from 'react'
+
+import { tv } from '../tv'
+
+export const menuItem = tv({
+  base: 'flex h-9 cursor-default items-center gap-2 rounded-r8 px-2 menu-gutter:ps-8'
+    + ' [&_svg]:size-4 [&_svg]:shrink-0'
+    + ' text-label transition-state'
+    + ' data-highlighted:outline-none data-disabled:pointer-events-none',
+
+  variants: {
+    color: {
+      neutral: 'text-fg data-highlighted:bg-hover data-disabled:text-fg-disabled',
+      danger: 'text-danger data-highlighted:bg-danger-weak data-disabled:text-danger/40',
+    },
+  },
+
+  defaultVariants: { color: 'neutral' },
+})
+
+const PANEL = 'menu bg-float text-fg rounded-float shadow-s3 z-overlay'
+  + ' flex min-w-44 flex-col gap-px p-1'
+  + ' open:animate-enter closed:animate-exit'
+  + ' focus-visible:outline-none'
+
+export interface DropdownMenuProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  children?: ReactNode
+}
+
+export function DropdownMenu({ open, defaultOpen, onOpenChange, children }: DropdownMenuProps) {
+  return (
+    <MenuPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+      {children}
+    </MenuPrimitive.Root>
+  )
+}
+
+export function DropdownMenuTrigger({ children }: { children: ReactNode }) {
+  return <MenuPrimitive.Trigger asChild>{children}</MenuPrimitive.Trigger>
+}
+
+export interface DropdownMenuContentProps extends Omit<ComponentProps<typeof MenuPrimitive.Content>, 'align'> {
+  align?: 'start' | 'center' | 'end'
+  arrow?: boolean
+}
+
+export function DropdownMenuContent({
+  align = 'start',
+  arrow = true,
+  className,
+  children,
+  ...rest
+}: DropdownMenuContentProps) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Content
+        {...rest}
+        align={align}
+        sideOffset={8}
+        arrowPadding={16}
+        className={tv({ base: PANEL })({ className })}
+      >
+        {children}
+
+        {arrow && <MenuPrimitive.Arrow className="fill-float" width={12} height={6} />}
+      </MenuPrimitive.Content>
+    </MenuPrimitive.Portal>
+  )
+}
+
+export function DropdownMenuGroup({ label, className, children }: {
+  label?: string
+  className?: string
+  children?: ReactNode
+}) {
+  return (
+    <MenuPrimitive.Group className={tv({ base: 'flex flex-col gap-px' })({ className })}>
+      {label && (
+        <MenuPrimitive.Label className="text-caption text-fg-subtle px-2 pb-1 pt-2">
+          {label}
+        </MenuPrimitive.Label>
+      )}
+      {children}
+    </MenuPrimitive.Group>
+  )
+}
+
+export interface DropdownMenuItemProps extends Omit<ComponentProps<typeof MenuPrimitive.Item>, 'color'> {
+  color?: 'neutral' | 'danger'
+  lead?: ReactNode
+  trail?: ReactNode
+}
+
+export function DropdownMenuItem({ color, lead, trail, className, children, ...rest }: DropdownMenuItemProps) {
+  return (
+    <MenuPrimitive.Item {...rest} className={menuItem({ color, className })}>
+      {lead && (
+        <span className="menu-lead grid size-4 shrink-0 place-items-center">
+          {lead}
+        </span>
+      )}
+
+      <span className="min-w-0 grow">{children}</span>
+      {trail}
+    </MenuPrimitive.Item>
+  )
+}
+
+export function DropdownMenuCheckboxItem({ checked, onCheckedChange, disabled, className, children }: {
+  checked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  disabled?: boolean
+  className?: string
+  children?: ReactNode
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      disabled={disabled}
+      className={menuItem({ className })}
+      onSelect={e => e.preventDefault()}
+    >
+      <span className="menu-lead grid size-4 shrink-0 place-items-center">
+        <MenuPrimitive.ItemIndicator>
+          <Check className="size-4" />
+        </MenuPrimitive.ItemIndicator>
+      </span>
+
+      <span className="min-w-0 grow">{children}</span>
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+export function DropdownMenuRadioGroup({ value, onValueChange, children }: {
+  value?: string
+  onValueChange?: (value: string) => void
+  children?: ReactNode
+}) {
+  return (
+    <MenuPrimitive.RadioGroup value={value} onValueChange={onValueChange}>
+      {children}
+    </MenuPrimitive.RadioGroup>
+  )
+}
+
+export function DropdownMenuRadioItem({ value, disabled, className, children }: {
+  value: string
+  disabled?: boolean
+  className?: string
+  children?: ReactNode
+}) {
+  return (
+    <MenuPrimitive.RadioItem value={value} disabled={disabled} className={menuItem({ className })}>
+      <span className="menu-lead grid size-4 shrink-0 place-items-center">
+        <MenuPrimitive.ItemIndicator>
+          <span className="bg-control-on in-disabled:bg-control-on-disabled size-2 rounded-full" />
+        </MenuPrimitive.ItemIndicator>
+      </span>
+
+      <span className="min-w-0 grow">{children}</span>
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+export function DropdownMenuSeparator({ className }: { className?: string }) {
+  return <MenuPrimitive.Separator className={tv({ base: 'bg-line -mx-1 my-1 h-px' })({ className })} />
+}
+
+export function DropdownMenuSub({ open, defaultOpen, onOpenChange, children }: {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  children?: ReactNode
+}) {
+  return (
+    <MenuPrimitive.Sub open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+      {children}
+    </MenuPrimitive.Sub>
+  )
+}
+
+export function DropdownMenuSubTrigger({ disabled, lead, className, children }: {
+  disabled?: boolean
+  lead?: ReactNode
+  className?: string
+  children?: ReactNode
+}) {
+  return (
+    <MenuPrimitive.SubTrigger disabled={disabled} className={menuItem({ className })}>
+      {lead && (
+        <span className="menu-lead grid size-4 shrink-0 place-items-center">
+          {lead}
+        </span>
+      )}
+
+      <span className="min-w-0 grow">{children}</span>
+
+      <ChevronRight className="text-fg-subtle size-4 shrink-0" />
+    </MenuPrimitive.SubTrigger>
+  )
+}
+
+export function DropdownMenuSubContent({ className, children, ...rest }: ComponentProps<typeof MenuPrimitive.SubContent>) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.SubContent
+        {...rest}
+        sideOffset={4}
+        className={tv({ base: PANEL })({ className })}
+      >
+        {children}
+      </MenuPrimitive.SubContent>
+    </MenuPrimitive.Portal>
+  )
+}

package/field/AGENTS.md

@@ -0,0 +1,96 @@
+# Field
+
+```
+받기   npx @pantoia/ui add field
+층     ui
+파일   field/index.tsx · field/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Field` | `FieldProps` |
+| `FieldLabel` | — |
+| `FieldHelp` | — |
+| `FieldError` | `FieldErrorProps` |
+| `FieldPending` | — |
+| `FieldSuccess` | — |
+
+### `FieldLabel`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `FieldHelp`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `FieldPending`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `FieldSuccess`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## props
+
+### `FieldContext`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `id` | `string` | 예 |
+| `labelId` | `string` | 예 |
+| `messageId` | `string` | 예 |
+
+### `FieldControl`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `id` | `string` | 예 |
+| `aria-labelledby` | `string` | 예 |
+| `aria-invalid` | `'true' \| undefined` | 예 |
+| `aria-describedby` | `string` | 예 |
+
+### `FieldProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `invalid` | `boolean` |  |
+| `layout` | `'stack' \| 'inline' \| 'split'` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode \| ((args: { control: FieldControl }) => ReactNode)` |  |
+
+### `FieldErrorProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `items` | `string \| string[]` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## 변형 — `field`
+
+| 축 | 값 | 기본 |
+|---|---|---|
+| `layout` | `stack` · `inline` · `split` | `stack` |
+
+## 함께 받는 것
+
+`label` · `tv`
+
+## npm 의존
+
+`lucide-react`