@pantoia/ui 0.1.0

package/table/AGENTS.md

@@ -0,0 +1,82 @@
+# Table
+
+```
+받기   npx @pantoia/ui add table
+층     ui
+파일   table/index.tsx · table/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Table` | `TableProps` |
+| `TableHeader` | — |
+| `TableHeadCell` | — |
+| `TableBody` | — |
+| `TableRow` | — |
+| `TableCell` | `TableCellProps` |
+
+### `TableHeader`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `TableHeadCell`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `TableBody`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `TableRow`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## props
+
+### `TableProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `label` | `string` | 예 |
+| `fixed` | `boolean` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `TableCellProps`
+
+`TdHTMLAttributes<HTMLTableCellElement>` 를 확장한다.
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `mono` | `boolean` |  |
+| `clamp` | `boolean` |  |
+
+## 변형 — `table`
+
+| 축 | 값 | 기본 |
+|---|---|---|
+| `fixed` | `true` | — |
+
+## 변형 — `tableCell`
+
+| 축 | 값 | 기본 |
+|---|---|---|
+| `mono` | `true` · `false` | `false` |
+
+## 함께 받는 것
+
+`tv`

package/table/index.tsx

@@ -0,0 +1,120 @@
+'use client'
+
+import { createContext, use, useCallback, useState, useSyncExternalStore, type ReactNode, type TdHTMLAttributes } from 'react'
+
+import { tv } from '../tv'
+
+const FixedContext = createContext(false)
+
+export const table = tv({
+  base: 'w-full border-collapse',
+  variants: {
+    fixed: { true: 'table-fixed' },
+  },
+})
+
+export interface TableProps {
+  label: string
+  fixed?: boolean
+  className?: string
+  children?: ReactNode
+}
+
+export function Table({ label, fixed = false, className, children }: TableProps) {
+  const [box, setBox] = useState<HTMLDivElement | null>(null)
+
+  const subscribe = useCallback((onChange: () => void) => {
+    if (!box) return () => {}
+    const observer = new ResizeObserver(onChange)
+    observer.observe(box)
+    if (box.firstElementChild) observer.observe(box.firstElementChild)
+    return () => observer.disconnect()
+  }, [box])
+
+  const overflows = useSyncExternalStore(
+    subscribe,
+    () => box !== null && box.scrollWidth > box.clientWidth,
+    () => false,
+  )
+
+  return (
+    <FixedContext value={fixed}>
+      <div className={tv({ base: 'rounded-panel border border-line overflow-hidden' })({ className })}>
+        <div
+          ref={setBox}
+          tabIndex={overflows ? 0 : undefined}
+          aria-label={overflows ? label : undefined}
+          role={overflows ? 'region' : undefined}
+          className="overflow-x-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"
+        >
+          <table className={table({ fixed })}>
+            <caption className="sr-only">{label}</caption>
+            {children}
+          </table>
+        </div>
+      </div>
+    </FixedContext>
+  )
+}
+
+export function TableHeader({ className, children }: { className?: string, children?: ReactNode }) {
+  return (
+    <thead>
+      <tr className={tv({ base: 'bg-well border-b border-line' })({ className })}>
+        {children}
+      </tr>
+    </thead>
+  )
+}
+
+export function TableHeadCell({ className, children }: { className?: string, children?: ReactNode }) {
+  return (
+    <th
+      scope="col"
+      className={tv({ base: 'text-caption text-fg-muted h-9 px-4 text-left whitespace-nowrap' })({ className })}
+    >
+      {children}
+    </th>
+  )
+}
+
+export function TableBody({ className, children }: { className?: string, children?: ReactNode }) {
+  return <tbody className={className}>{children}</tbody>
+}
+
+export function TableRow({ className, children }: { className?: string, children?: ReactNode }) {
+  return (
+    <tr
+      className={tv({ base: 'border-b border-line last:border-b-0 transition-state'
+        + ' hover:bg-hover' })({ className })}
+    >
+      {children}
+    </tr>
+  )
+}
+
+export const tableCell = tv({
+  base: 'text-label text-fg h-11 px-4',
+
+  variants: {
+    mono: { true: 'font-mono', false: '' },
+  },
+
+  defaultVariants: { mono: false },
+})
+
+export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+  mono?: boolean
+  clamp?: boolean
+}
+
+export function TableCell({ mono = false, clamp, className, children, ...rest }: TableCellProps) {
+  const fixed = use(FixedContext)
+  const clamped = clamp ?? fixed
+
+  return (
+    <td {...rest} className={tableCell({ mono, className })}>
+      {clamped ? <span className="line-clamp-2">{children}</span> : children}
+    </td>
+  )
+}

package/tabs/AGENTS.md

@@ -0,0 +1,60 @@
+# Tabs
+
+```
+받기   npx @pantoia/ui add tabs
+층     ui
+파일   tabs/index.tsx · tabs/index.module.css · tabs/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Tabs` | `TabsProps` |
+| `TabsList` | — |
+| `TabsTrigger` | — |
+| `TabsContent` | — |
+
+### `TabsList`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `TabsTrigger`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string` | 예 |
+| `disabled` | `boolean` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `TabsContent`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string` | 예 |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## props
+
+### `TabsProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string` |  |
+| `defaultValue` | `string` |  |
+| `onValueChange` | `(value: string) => void` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## 함께 받는 것
+
+`tv`
+
+## npm 의존
+
+`radix-ui`

package/tabs/index.module.css

@@ -0,0 +1,14 @@
+.underline {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background: var(--color-fg);
+  width: var(--tabs-indicator-size);
+  translate: var(--tabs-indicator-position) 0;
+  transition: translate var(--dur-state) var(--ease-state),
+              width var(--dur-state) var(--ease-state);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .underline { transition: none; }
+}

package/tabs/index.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+import { Tabs as TabsPrimitive } from 'radix-ui'
+import { useEffect, useRef, type ReactNode } from 'react'
+
+import { tv } from '../tv'
+
+import s from './index.module.css'
+
+const ACTIVE = '[data-state="active"]'
+
+export interface TabsProps {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  className?: string
+  children?: ReactNode
+}
+
+export function Tabs({ value, defaultValue, onValueChange, className, children }: TabsProps) {
+  return (
+    <TabsPrimitive.Root
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={onValueChange}
+      className={tv({ base: 'flex flex-col gap-stack' })({ className })}
+    >
+      {children}
+    </TabsPrimitive.Root>
+  )
+}
+
+export function TabsList({ className, children }: { className?: string, children?: ReactNode }) {
+  const list = useRef<HTMLDivElement>(null)
+  const bar = useRef<HTMLSpanElement>(null)
+
+  useEffect(() => {
+    const root = list.current
+    const mark = bar.current
+    if (!root || !mark) return
+
+    const measure = () => {
+      const active = root.querySelector<HTMLElement>(ACTIVE)
+      mark.style.setProperty('--tabs-indicator-size', `${active?.offsetWidth ?? 0}px`)
+      mark.style.setProperty('--tabs-indicator-position', `${active?.offsetLeft ?? 0}px`)
+    }
+
+    measure()
+
+    const attrs = new MutationObserver(measure)
+    attrs.observe(root, { attributes: true, subtree: true, attributeFilter: ['data-state'] })
+
+    const box = new ResizeObserver(measure)
+    box.observe(root)
+
+    return () => { attrs.disconnect(); box.disconnect() }
+  }, [])
+
+  return (
+    <div
+      className={tv({ base: 'border-line scroll-slim overflow-x-auto border-b' })({ className })}
+    >
+      <TabsPrimitive.List ref={list} className="relative flex w-max min-w-full">
+        {children}
+
+        <span ref={bar} className={s.underline} />
+      </TabsPrimitive.List>
+    </div>
+  )
+}
+
+export function TabsTrigger({ value, disabled, className, children }: {
+  value: string
+  disabled?: boolean
+  className?: string
+  children?: ReactNode
+}) {
+  return (
+    <TabsPrimitive.Trigger
+      value={value}
+      disabled={disabled}
+      className={tv({ base: 'text-label text-fg-muted inline-flex h-9 items-center gap-tight px-3 transition-state'
+        + ' [&_svg]:size-4'
+        + ' press-shrink enabled:hover:text-fg'
+        + ' disabled:text-fg-disabled disabled:cursor-not-allowed'
+        + ' aria-selected:text-fg'
+        + ' focus-visible:outline-2 focus-visible:-outline-offset-2'
+        + ' focus-visible:outline-ring' })({ className })}
+    >
+      {children}
+    </TabsPrimitive.Trigger>
+  )
+}
+
+export function TabsContent({ value, className, children }: {
+  value: string
+  className?: string
+  children?: ReactNode
+}) {
+  return (
+    <TabsPrimitive.Content value={value} className={className}>
+      {children}
+    </TabsPrimitive.Content>
+  )
+}

package/test-utils.ts

@@ -0,0 +1,10 @@
+export { act, cleanup, fireEvent, render, renderHook, screen, waitFor, within } from '@testing-library/react'
+export { default as userEvent } from '@testing-library/user-event'
+
+export function cls(el: Element | null): string[] {
+  return (el?.getAttribute('class') ?? '').split(/\s+/).filter(Boolean)
+}
+
+export function has(el: Element | null, needle: string): boolean {
+  return cls(el).some(part => part.includes(needle))
+}

package/textarea/AGENTS.md

@@ -0,0 +1,35 @@
+# Textarea
+
+```
+받기   npx @pantoia/ui add textarea
+층     ui
+파일   textarea/index.tsx · textarea/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Textarea` | `TextareaProps` |
+
+## props
+
+### `TextareaProps`
+
+`TextareaHTMLAttributes<HTMLTextAreaElement>` 를 확장한다.
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `surface` | `'bare' \| 'well'` |  |
+| `size` | `'sm' \| 'md' \| 'lg'` |  |
+
+## 변형 — `textarea`
+
+| 축 | 값 | 기본 |
+|---|---|---|
+| `surface` | `bare` · `well` | `bare` |
+| `size` | `sm` · `md` · `lg` | `md` |
+
+## 함께 받는 것
+
+`tv`

package/textarea/index.tsx

@@ -0,0 +1,37 @@
+import type { TextareaHTMLAttributes } from 'react'
+
+import { tv } from '../tv'
+
+export const textarea = tv({
+  base: 'w-full rounded-r8 text-value text-fg'
+    + ' placeholder:text-fg-placeholder'
+    + ' invalid:ring-2 invalid:ring-danger'
+    + ' read-only:text-fg-muted'
+    + ' resize-y'
+    + ' transition-state'
+    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+    + ' disabled:bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed',
+
+  variants: {
+    surface: {
+      bare: 'bg-transparent ring-1 ring-inset ring-line-strong read-only:bg-well',
+      well: 'bg-well',
+    },
+    size: {
+      sm: 'p-2',
+      md: 'p-3',
+      lg: 'p-3 text-t16',
+    },
+  },
+
+  defaultVariants: { surface: 'bare', size: 'md' },
+})
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  surface?: 'bare' | 'well'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export function Textarea({ surface, size, rows = 3, className, ...rest }: TextareaProps) {
+  return <textarea {...rest} rows={rows} className={textarea({ surface, size, className })} />
+}

package/toast/AGENTS.md

@@ -0,0 +1,42 @@
+# Toast
+
+```
+받기   npx @pantoia/ui add toast
+층     ui
+파일   toast/index.tsx · toast/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Toast` | `ToastProps` |
+
+## props
+
+### `ToastTone`
+
+`'neutral' | 'success' | 'warning' | 'danger' | 'info'`
+
+### `ToastOptions`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `description` | `string` |  |
+| `action` | `{ label: string, onClick: () => void }` |  |
+| `toasterId` | `string` |  |
+
+### `ToastProps`
+
+`Omit<ComponentProps<typeof SonnerToaster>, 'id' | 'position' | 'duration' | 'expand'>` 를 확장한다.
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `toasterId` | `string` |  |
+| `position` | `'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'` |  |
+| `duration` | `number` |  |
+| `expand` | `boolean` |  |
+
+## npm 의존
+
+`sonner`

package/toast/index.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import type { ComponentProps } from 'react'
+import { toast as sonner, Toaster as SonnerToaster } from 'sonner'
+
+export type ToastTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info'
+
+export type ToastOptions = {
+  description?: string
+  action?: { label: string, onClick: () => void }
+  toasterId?: string
+}
+
+const show = (tone: ToastTone, message: string, options?: ToastOptions) => {
+  if (tone === 'neutral') return sonner(message, options)
+  if (tone === 'danger') return sonner.error(message, options)
+  return sonner[tone](message, options)
+}
+
+export const toast = {
+  show,
+  neutral: (m: string, o?: ToastOptions) => show('neutral', m, o),
+  success: (m: string, o?: ToastOptions) => show('success', m, o),
+  warning: (m: string, o?: ToastOptions) => show('warning', m, o),
+  danger: (m: string, o?: ToastOptions) => show('danger', m, o),
+  info: (m: string, o?: ToastOptions) => show('info', m, o),
+  dismiss: (id?: string | number) => sonner.dismiss(id),
+}
+
+export interface ToastProps
+  extends Omit<ComponentProps<typeof SonnerToaster>, 'id' | 'position' | 'duration' | 'expand'> {
+  toasterId?: string
+  position?: 'top-left' | 'top-center' | 'top-right'
+    | 'bottom-left' | 'bottom-center' | 'bottom-right'
+  duration?: number
+  expand?: boolean
+}
+
+export function Toast({ toasterId, position = 'bottom-center', duration = 4000, expand = false, ...rest }: ToastProps) {
+  return (
+    <SonnerToaster
+      {...rest}
+      id={toasterId}
+      position={position}
+      duration={duration}
+      expand={expand}
+      offset={16}
+      gap={8}
+      className="z-toast"
+      toastOptions={{
+        unstyled: true,
+        classNames: {
+          toast: 'bg-float border border-line rounded-r8 shadow-s3'
+            + ' flex w-full items-center gap-stack p-4',
+          content: 'min-w-0 flex-1',
+          title: 'text-label text-fg',
+          description: 'text-caption text-fg-muted',
+          icon: 'shrink-0',
+          actionButton: 'text-label text-fg shrink-0 rounded-r8 px-3 h-8'
+            + ' bg-well transition-state press press-shrink enabled:hover:bg-fg-muted/10'
+            + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+            + ' disabled:text-fg-disabled disabled:cursor-not-allowed',
+          success: 'text-success',
+          error: 'text-danger',
+          warning: 'text-warning',
+          info: 'text-info',
+        },
+      }}
+    />
+  )
+}

package/toggle/AGENTS.md

@@ -0,0 +1,37 @@
+# Toggle
+
+```
+받기   npx @pantoia/ui add toggle
+층     ui
+파일   toggle/index.tsx · toggle/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Toggle` | `ToggleProps` |
+
+## props
+
+### `ToggleProps`
+
+`ComponentProps<typeof TogglePrimitive.Root>` 를 확장한다.
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `surface` | `'bare' \| 'canvas'` |  |
+
+## 변형 — `toggle`
+
+| 축 | 값 | 기본 |
+|---|---|---|
+| `surface` | `bare` · `canvas` | `bare` |
+
+## 함께 받는 것
+
+`tv`
+
+## npm 의존
+
+`radix-ui`

package/toggle/index.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import { Toggle as TogglePrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+
+import { tv } from '../tv'
+
+export const toggle = tv({
+  base: 'text-label rounded-full inline-flex h-8 items-center gap-tight px-3'
+    + ' [&_svg]:size-4'
+    + ' ring-1 ring-inset ring-line-strong transition-state press press-shrink'
+    + ' text-fg-muted'
+    + ' enabled:hover:bg-hover'
+    + ' on:bg-control-on on:ring-control-on on:enabled:text-fg-on-control'
+    + ' on:enabled:hover:bg-control-on-hover'
+    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+    + ' disabled:text-fg-disabled disabled:ring-line disabled:cursor-not-allowed'
+    + ' on:disabled:bg-control-on-disabled on:disabled:ring-control-on-disabled on:disabled:text-fg-on-control',
+
+  variants: {
+    surface: {
+      bare: '',
+      canvas: 'bg-canvas',
+    },
+  },
+
+  defaultVariants: { surface: 'bare' },
+})
+
+export interface ToggleProps extends ComponentProps<typeof TogglePrimitive.Root> {
+  surface?: 'bare' | 'canvas'
+}
+
+export function Toggle({ surface, className, ...rest }: ToggleProps) {
+  return <TogglePrimitive.Root {...rest} className={toggle({ surface, className })} />
+}