@pantoia/ui 0.1.0

package/field/index.tsx

@@ -0,0 +1,149 @@
+'use client'
+
+import { CircleAlert, CircleCheck, LoaderCircle } from 'lucide-react'
+import { createContext, use, useId, type ReactNode } from 'react'
+
+import { Label } from '../label'
+import { tv } from '../tv'
+
+export const field = tv({
+  base: 'group flex flex-wrap gap-x-2 gap-y-tight',
+
+  variants: {
+    layout: {
+      stack: 'flex-col',
+      inline: 'flex-row items-center',
+      split: 'flex-row items-center justify-between',
+    },
+  },
+
+  defaultVariants: { layout: 'stack' },
+})
+
+export interface FieldContext {
+  id: string
+  labelId: string
+  messageId: string
+}
+
+export interface FieldControl {
+  id: string
+  'aria-labelledby': string
+  'aria-invalid': 'true' | undefined
+  'aria-describedby': string
+}
+
+const Context = createContext<FieldContext | null>(null)
+
+export interface FieldProps {
+  invalid?: boolean
+  layout?: 'stack' | 'inline' | 'split'
+  className?: string
+  children?: ReactNode | ((args: { control: FieldControl }) => ReactNode)
+}
+
+export function Field({ invalid = false, layout, className, children }: FieldProps) {
+  const id = useId()
+  const ctx: FieldContext = {
+    id,
+    labelId: `${id}-label`,
+    messageId: `${id}-message`,
+  }
+
+  const control: FieldControl = {
+    'id': id,
+    'aria-labelledby': ctx.labelId,
+    'aria-invalid': invalid ? 'true' : undefined,
+    'aria-describedby': ctx.messageId,
+  }
+
+  return (
+    <Context value={ctx}>
+      <div className={field({ layout, className })}>
+        {typeof children === 'function' ? children({ control }) : children}
+      </div>
+    </Context>
+  )
+}
+
+export function FieldLabel({ className, children }: { className?: string, children?: ReactNode }) {
+  const ctx = use(Context)
+
+  return (
+    <Label
+      id={ctx?.labelId}
+      htmlFor={ctx?.id}
+      className={tv({ base: 'group-has-disabled:text-fg-disabled' })({ className })}
+    >
+      {children}
+    </Label>
+  )
+}
+
+export function FieldHelp({ className, children }: { className?: string, children?: ReactNode }) {
+  const ctx = use(Context)
+
+  return (
+    <p
+      id={ctx?.messageId}
+      className={tv({ base: 'basis-full text-caption text-fg-subtle'
+        + ' group-has-disabled:text-fg-disabled' })({ className })}
+    >
+      {children}
+    </p>
+  )
+}
+
+export interface FieldErrorProps {
+  items?: string | string[]
+  className?: string
+  children?: ReactNode
+}
+
+export function FieldError({ items, className, children }: FieldErrorProps) {
+  const ctx = use(Context)
+  const list = items == null ? [] : Array.isArray(items) ? items : [items]
+
+  return (
+    <p
+      id={ctx?.messageId}
+      className={tv({ base: 'basis-full text-caption text-danger'
+        + ' flex items-start gap-tight' })({ className })}
+    >
+      <CircleAlert className="mt-0.5 size-4 shrink-0" />
+      <span className="flex min-w-0 flex-col gap-0.5">
+        {children ?? list.map(t => <span key={t}>{t}</span>)}
+      </span>
+    </p>
+  )
+}
+
+export function FieldPending({ className, children }: { className?: string, children?: ReactNode }) {
+  const ctx = use(Context)
+
+  return (
+    <p
+      id={ctx?.messageId}
+      className={tv({ base: 'basis-full text-caption text-fg-subtle'
+        + ' flex items-start gap-tight' })({ className })}
+    >
+      <LoaderCircle className="mt-0.5 size-4 shrink-0 animate-spin motion-reduce:animate-none" />
+      <span className="min-w-0">{children}</span>
+    </p>
+  )
+}
+
+export function FieldSuccess({ className, children }: { className?: string, children?: ReactNode }) {
+  const ctx = use(Context)
+
+  return (
+    <p
+      id={ctx?.messageId}
+      className={tv({ base: 'basis-full text-caption text-success'
+        + ' flex items-start gap-tight' })({ className })}
+    >
+      <CircleCheck className="mt-0.5 size-4 shrink-0" />
+      <span className="min-w-0">{children}</span>
+    </p>
+  )
+}

package/input/AGENTS.md

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

package/input/index.tsx

@@ -0,0 +1,36 @@
+import type { InputHTMLAttributes } from 'react'
+
+import { tv } from '../tv'
+
+export const input = 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'
+    + ' 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: 'h-8 px-3',
+      md: 'h-9 px-3',
+      lg: 'h-10 px-3 text-t16',
+    },
+  },
+
+  defaultVariants: { surface: 'bare', size: 'md' },
+})
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  surface?: 'bare' | 'well'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export function Input({ surface, size, className, ...rest }: InputProps) {
+  return <input {...rest} className={input({ surface, size, className })} />
+}

package/kbd/AGENTS.md

@@ -0,0 +1,17 @@
+# Kbd
+
+```
+받기   npx @pantoia/ui add kbd
+층     ui
+파일   kbd/index.tsx · kbd/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Kbd` | `HTMLAttributes<HTMLElement>` |
+
+## 함께 받는 것
+
+`tv`

package/kbd/index.tsx

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react'
+
+import { tv } from '../tv'
+
+export function Kbd({ className, ...rest }: HTMLAttributes<HTMLElement>) {
+  return (
+    <kbd
+      {...rest}
+      className={tv({ base: 'bg-well text-fg-muted text-micro rounded-mark inline-flex items-center'
+        + ' border border-line px-1.5 py-0.5 font-mono' })({ className })}
+    />
+  )
+}

package/label/AGENTS.md

@@ -0,0 +1,21 @@
+# Label
+
+```
+받기   npx @pantoia/ui add label
+층     ui
+파일   label/index.tsx · label/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Label` | `ComponentProps<typeof LabelPrimitive.Root>` |
+
+## 함께 받는 것
+
+`tv`
+
+## npm 의존
+
+`radix-ui`

package/label/index.tsx

@@ -0,0 +1,13 @@
+import { Label as LabelPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+
+import { tv } from '../tv'
+
+export function Label({ className, ...rest }: ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      {...rest}
+      className={tv({ base: 'text-label text-fg' })({ className })}
+    />
+  )
+}

package/number-field/AGENTS.md

@@ -0,0 +1,53 @@
+# NumberField
+
+```
+받기   npx @pantoia/ui add number-field
+층     ui
+파일   number-field/index.tsx · number-field/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `NumberField` | `NumberFieldProps` |
+
+## props
+
+### `NumberFieldProps`
+
+`Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'min' | 'max' | 'step'>` 를 확장한다.
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `number \| undefined` |  |
+| `defaultValue` | `number` |  |
+| `onValueChange` | `(value: number \| undefined) => void` |  |
+| `decrementLabel` | `string` | 예 |
+| `incrementLabel` | `string` | 예 |
+| `min` | `number` |  |
+| `max` | `number` |  |
+| `step` | `number` |  |
+| `surface` | `'bare' \| 'well'` |  |
+| `size` | `'sm' \| 'md' \| 'lg'` |  |
+| `disabled` | `boolean` |  |
+| `readOnly` | `boolean` |  |
+| `className` | `string` |  |
+
+## 변형 — `numberField`
+
+슬롯 `root` · `step` · `input`
+
+| 축 | 값 | 기본 |
+|---|---|---|
+| `surface` | `bare` · `well` | `bare` |
+| `size` | `sm` · `md` · `lg` | `md` |
+| `readonly` | `true` | — |
+
+## 함께 받는 것
+
+`tv`
+
+## npm 의존
+
+`lucide-react`

package/number-field/index.tsx

@@ -0,0 +1,227 @@
+'use client'
+
+import { Minus, Plus } from 'lucide-react'
+import { useEffect, useRef, useState, type InputHTMLAttributes, type PointerEvent as ReactPointerEvent, type KeyboardEvent as ReactKeyboardEvent } from 'react'
+
+import { tv } from '../tv'
+
+export const numberField = tv({
+  slots: {
+    root: 'flex items-center rounded-r8'
+      + ' 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',
+    step: 'text-fg-muted grid shrink-0 place-items-center rounded-r8'
+      + ' transition-state press press-shrink enabled:hover:bg-hover'
+      + ' disabled:text-fg-disabled disabled:cursor-not-allowed',
+    input: 'text-value text-fg w-full min-w-0 bg-transparent text-center outline-none'
+      + ' disabled:text-fg-disabled disabled:cursor-not-allowed',
+  },
+
+  variants: {
+    surface: {
+      bare: { root: 'bg-transparent ring-1 ring-inset ring-line-strong' },
+      well: { root: 'bg-well' },
+    },
+    size: {
+      sm: { root: 'h-8', step: 'size-8' },
+      md: { root: 'h-9', step: 'size-9' },
+      lg: { root: 'h-10', step: 'size-10', input: 'text-t16' },
+    },
+    readonly: {
+      true: { root: 'bg-well', input: 'text-fg-muted' },
+    },
+  },
+
+  defaultVariants: { surface: 'bare', size: 'md' },
+})
+
+const HOLD_DELAY = 400
+const HOLD_EVERY = 60
+
+const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n))
+
+const GROUPED = new Intl.NumberFormat('en-US')
+
+const TYPING = /[^0-9.-]/g
+
+function snap(n: number, min: number, step: number) {
+  const from = Number.isFinite(min) ? min : 0
+  return from + Math.round((n - from) / step) * step
+}
+
+function useHold(step: () => void, blocked: boolean) {
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const beat = useRef<ReturnType<typeof setInterval> | undefined>(undefined)
+  const [pressed, setPressed] = useState(false)
+
+  const stop = () => {
+    clearTimeout(timer.current)
+    clearInterval(beat.current)
+    setPressed(false)
+  }
+
+  useEffect(() => stop, [])
+
+  const onPointerDown = (e: ReactPointerEvent<HTMLButtonElement>) => {
+    if (e.button !== 0 || blocked) return
+
+    step()
+    setPressed(true)
+    e.currentTarget.setPointerCapture(e.pointerId)
+
+    timer.current = setTimeout(() => {
+      beat.current = setInterval(step, HOLD_EVERY)
+    }, HOLD_DELAY)
+  }
+
+  return { pressed, onPointerDown, onPointerUp: stop, onPointerCancel: stop, onLostPointerCapture: stop }
+}
+
+export interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'min' | 'max' | 'step'> {
+  value?: number | undefined
+  defaultValue?: number
+  onValueChange?: (value: number | undefined) => void
+  decrementLabel: string
+  incrementLabel: string
+  min?: number
+  max?: number
+  step?: number
+  surface?: 'bare' | 'well'
+  size?: 'sm' | 'md' | 'lg'
+  disabled?: boolean
+  readOnly?: boolean
+  className?: string
+}
+
+export function NumberField(props: NumberFieldProps) {
+  const {
+    value,
+    defaultValue,
+    onValueChange,
+    decrementLabel,
+    incrementLabel,
+    min = Number.NEGATIVE_INFINITY,
+    max = Number.POSITIVE_INFINITY,
+    step = 1,
+    surface,
+    size,
+    disabled = false,
+    readOnly = false,
+    className,
+    ...rest
+  } = props
+
+  const controlled = 'value' in props
+  const [own, setOwn] = useState<number | undefined>(defaultValue)
+  const [typing, setTyping] = useState<string | null>(null)
+  const current = controlled ? value : own
+
+  const ui = numberField({ surface, size, readonly: readOnly })
+
+  const set = (next: number | undefined) => {
+    const after = next === undefined ? undefined : clamp(next, min, max)
+    if (!controlled) setOwn(after)
+    if (after !== current) onValueChange?.(after)
+  }
+
+  const blocked = disabled || readOnly
+  const from = current ?? (Number.isFinite(min) ? min : 0)
+  const atMin = current !== undefined && current <= min
+  const atMax = current !== undefined && current >= max
+
+  const down = useHold(() => { setTyping(null); set(from - step) }, blocked)
+  const up = useHold(() => { setTyping(null); set(from + step) }, blocked)
+
+  const onKeyDown = (e: ReactKeyboardEvent<HTMLInputElement>) => {
+    if (blocked) return
+
+    const moves: Record<string, number> = {
+      ArrowUp: from + step,
+      ArrowDown: from - step,
+      PageUp: from + step * 10,
+      PageDown: from - step * 10,
+      Home: min,
+      End: max,
+    }
+
+    const next = moves[e.key]
+    if (next === undefined || !Number.isFinite(next)) return
+
+    e.preventDefault()
+    setTyping(null)
+    set(next)
+  }
+
+  const onWheel = (e: React.WheelEvent<HTMLInputElement>) => {
+    e.currentTarget.blur()
+  }
+
+  const onInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value.replace(TYPING, '')
+    setTyping(min >= 0 ? raw.replace(/-/g, '') : raw)
+  }
+
+  const onBlur = () => {
+    if (typing === null) return
+
+    const parsed = Number(typing)
+    const empty = typing.trim() === ''
+    setTyping(null)
+
+    if (empty) set(undefined)
+    else if (Number.isFinite(parsed)) set(snap(parsed, min, step))
+  }
+
+  return (
+    <div className={ui.root({ className })}>
+      <button
+        type="button"
+        aria-label={decrementLabel}
+        disabled={blocked || atMin}
+        data-pressed={down.pressed ? '' : undefined}
+        className={ui.step()}
+        onPointerDown={down.onPointerDown}
+        onPointerUp={down.onPointerUp}
+        onPointerCancel={down.onPointerCancel}
+        onLostPointerCapture={down.onLostPointerCapture}
+      >
+        <Minus className="size-4" />
+      </button>
+
+      <input
+        {...rest}
+        type="text"
+        inputMode="decimal"
+        role="spinbutton"
+        aria-valuenow={current}
+        aria-valuemin={Number.isFinite(min) ? min : undefined}
+        aria-valuemax={Number.isFinite(max) ? max : undefined}
+        value={typing ?? (current === undefined ? '' : GROUPED.format(current))}
+        disabled={disabled}
+        readOnly={readOnly}
+        onChange={onInput}
+        onBlur={onBlur}
+        onKeyDown={onKeyDown}
+        onWheel={onWheel}
+        className={ui.input()}
+      />
+
+      <button
+        type="button"
+        aria-label={incrementLabel}
+        disabled={blocked || atMax}
+        data-pressed={up.pressed ? '' : undefined}
+        className={ui.step()}
+        onPointerDown={up.onPointerDown}
+        onPointerUp={up.onPointerUp}
+        onPointerCancel={up.onPointerCancel}
+        onLostPointerCapture={up.onLostPointerCapture}
+      >
+        <Plus className="size-4" />
+      </button>
+    </div>
+  )
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@pantoia/ui",
+  "version": "0.1.0",
+  "description": "Pantoia 디자인 시스템 — 소스를 복사해 가는 컴포넌트 스물여덟",
+  "homepage": "https://design.pantoia.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pantoia/pantoia-design.git",
+    "directory": "packages/registry"
+  },
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "pantoia-ui": "./dist/index.js"
+  },
+  "files": [
+    "*/index.tsx",
+    "*/index.module.css",
+    "*/AGENTS.md",
+    "dist",
+    "tv.ts",
+    "test-utils.ts",
+    "styles.css",
+    "press.css",
+    "registry.json"
+  ],
+  "exports": {
+    "./tv": "./tv.ts",
+    "./styles.css": "./styles.css",
+    "./press.css": "./press.css",
+    "./registry.json": "./registry.json",
+    "./test-utils": "./test-utils.ts",
+    "./*": "./*/index.tsx"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "prepack": "tsc cli/index.ts --ignoreConfig --outDir dist --target es2022 --module esnext --moduleResolution bundler --skipLibCheck --types node",
+    "lint": "eslint . --max-warnings 0",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@fontsource/jetbrains-mono": "5.3.0",
+    "lucide-react": "^1.39.0",
+    "pretendard": "1.3.9",
+    "radix-ui": "^1.6.7",
+    "sonner": "^2.0.8",
+    "tailwind-variants": "^3.3.1"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19",
+    "tailwindcss": "^4.3.3"
+  },
+  "devDependencies": {
+    "@pantoia/eslint-config": "*",
+    "@pantoia/typescript-config": "*",
+    "@types/node": "26.4.0",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.5",
+    "eslint": "10.9.1",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "typescript": "6.0.3"
+  }
+}