@pantoia/ui 0.1.0

package/copy-button/index.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+
+import { Button } from '../button'
+
+export type CopyState = 'idle' | 'copied' | 'failed'
+
+function writeLegacy(value: string): boolean {
+  const ta = document.createElement('textarea')
+  ta.value = value
+  ta.setAttribute('readonly', '')
+  ta.style.cssText = 'position:fixed;top:0;left:0;opacity:0;pointer-events:none'
+  document.body.appendChild(ta)
+  ta.select()
+
+  let ok: boolean
+  try { ok = document.execCommand('copy') }
+  catch { ok = false }
+
+  ta.remove()
+  return ok
+}
+
+async function write(value: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(value)
+    return true
+  }
+  catch {
+    return writeLegacy(value)
+  }
+}
+
+export function useCopy(resetAfter = 2000) {
+  const [state, setState] = useState<CopyState>('idle')
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+
+  useEffect(() => () => clearTimeout(timer.current), [])
+
+  const copy = async (value: string) => {
+    clearTimeout(timer.current)
+    const next: CopyState = await write(value) ? 'copied' : 'failed'
+    setState(next)
+    timer.current = setTimeout(() => setState('idle'), resetAfter)
+    return next
+  }
+
+  return { state, copy }
+}
+
+export interface 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
+}
+
+export function CopyButton({
+  value,
+  color = 'neutral',
+  emphasis = 'outline',
+  size = 'md',
+  shape = 'rect',
+  onCopied,
+  onFailed,
+  children,
+  ...rest
+}: CopyButtonProps) {
+  const { state, copy } = useCopy()
+
+  const run = async () => {
+    const result = await copy(value)
+    if (result === 'copied') onCopied?.(value)
+    else onFailed?.()
+  }
+
+  return (
+    <Button {...rest} color={color} emphasis={emphasis} size={size} shape={shape} onClick={run}>
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        className="shrink-0"
+      >
+        {state === 'idle' && (
+          <g>
+            <rect x="8" y="8" width="14" height="14" rx="2" />
+            <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+          </g>
+        )}
+
+        {state === 'copied' && (
+          <path className="animate-draw motion-reduce:animate-none" d="M4 12l5 5L20 6" />
+        )}
+
+        {state === 'failed' && (
+          <g className="animate-enter motion-reduce:animate-none">
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </g>
+        )}
+      </svg>
+
+      {children}
+    </Button>
+  )
+}

package/dialog/AGENTS.md

@@ -0,0 +1,81 @@
+# Dialog
+
+```
+받기   npx @pantoia/ui add dialog
+층     ui
+파일   dialog/index.tsx · dialog/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Dialog` | `DialogProps` |
+| `DialogTrigger` | — |
+| `DialogClose` | — |
+| `DialogContent` | `DialogContentProps` |
+| `DialogTitle` | `ComponentProps<typeof DialogPrimitive.Title>` |
+| `DialogDescription` | `ComponentProps<typeof DialogPrimitive.Description>` |
+| `DialogHeader` | `DialogHeaderProps` |
+| `DialogFooter` | — |
+
+### `DialogTrigger`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `children` | `ReactNode` | 예 |
+
+### `DialogClose`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `children` | `ReactNode` | 예 |
+
+### `DialogFooter`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## props
+
+### `DialogProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `open` | `boolean` |  |
+| `defaultOpen` | `boolean` |  |
+| `onOpenChange` | `(open: boolean) => void` |  |
+| `children` | `ReactNode` |  |
+
+### `DialogContentProps`
+
+`ComponentProps<typeof DialogPrimitive.Content>` 를 확장한다.
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `size` | `'md' \| 'full' \| 'top'` |  |
+
+### `DialogHeaderProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `lead` | `ReactNode` |  |
+| `trail` | `ReactNode` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## 변형 — `dialog`
+
+| 축 | 값 | 기본 |
+|---|---|---|
+| `size` | `md` · `full` · `top` | `md` |
+
+## 함께 받는 것
+
+`tv`
+
+## npm 의존
+
+`radix-ui`

package/dialog/index.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import { Dialog as DialogPrimitive } from 'radix-ui'
+import type { ComponentProps, ReactNode } from 'react'
+
+import { tv } from '../tv'
+
+export const dialog = tv({
+  base: 'bg-float text-fg z-overlay fixed flex flex-col gap-stack overflow-y-auto'
+    + ' open:animate-fade-in closed:animate-fade-out focus-visible:outline-none',
+
+  variants: {
+    size: {
+      md: 'left-1/2 top-1/2 w-full max-w-120 -translate-x-1/2 -translate-y-1/2'
+        + ' rounded-r20 p-6',
+      full: 'inset-0 p-6',
+      top: 'left-1/2 top-24 w-full max-w-144 -translate-x-1/2'
+        + ' rounded-r20 gap-0 overflow-hidden',
+    },
+  },
+
+  defaultVariants: { size: 'md' },
+})
+
+export interface DialogProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  children?: ReactNode
+}
+
+export function Dialog({ open, defaultOpen, onOpenChange, children }: DialogProps) {
+  return (
+    <DialogPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+      {children}
+    </DialogPrimitive.Root>
+  )
+}
+
+export function DialogTrigger({ children }: { children: ReactNode }) {
+  return <DialogPrimitive.Trigger asChild>{children}</DialogPrimitive.Trigger>
+}
+
+export function DialogClose({ children }: { children: ReactNode }) {
+  return <DialogPrimitive.Close asChild>{children}</DialogPrimitive.Close>
+}
+
+export interface DialogContentProps extends ComponentProps<typeof DialogPrimitive.Content> {
+  size?: 'md' | 'full' | 'top'
+}
+
+export function DialogContent({ size, className, children, ...rest }: DialogContentProps) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay className="bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+
+      <DialogPrimitive.Content {...rest} className={dialog({ size, className })}>
+        {children}
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  )
+}
+
+export function DialogTitle({ className, ...rest }: ComponentProps<typeof DialogPrimitive.Title>) {
+  return <DialogPrimitive.Title {...rest} className={tv({ base: 'text-section min-w-0' })({ className })} />
+}
+
+export function DialogDescription({ className, ...rest }: ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description {...rest} className={tv({ base: 'text-prose text-fg-muted' })({ className })} />
+  )
+}
+
+export const dialogHeader = 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 DialogHeaderProps {
+  lead?: ReactNode
+  trail?: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+export function DialogHeader({ lead, trail, className, children }: DialogHeaderProps) {
+  const ui = dialogHeader()
+
+  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 DialogFooter({ className, children }: { className?: string, children?: ReactNode }) {
+  return (
+    <div className={tv({ base: 'flex justify-end gap-2' })({ className })}>
+      {children}
+    </div>
+  )
+}

package/dist/index.js

@@ -0,0 +1,189 @@
+#!/usr/bin/env node
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { argv, cwd, exit, stdin, stdout } from 'node:process';
+import { createInterface } from 'node:readline/promises';
+const HERE = join(import.meta.dirname, '..');
+const CONFIG = 'components.json';
+const DEFAULT_PATH = 'components/ui';
+const USAGE = `pantoia-ui <명령>
+
+  init [--path <디렉터리>]   ${CONFIG} 을 만든다
+  add <이름...> [--force]    소스를 복사한다
+  list                       받을 수 있는 것을 늘어놓는다
+  diff [이름]                복사본과 패키지의 지금 것을 견준다`;
+function fail(message) {
+    console.error(message);
+    exit(1);
+}
+function version() {
+    const manifest = JSON.parse(readFileSync(join(HERE, 'package.json'), 'utf8'));
+    return manifest.version;
+}
+function registry() {
+    const doc = JSON.parse(readFileSync(join(HERE, 'registry.json'), 'utf8'));
+    return doc.items ?? [];
+}
+function find(name) {
+    const item = registry().find(candidate => candidate.name === name);
+    if (!item)
+        fail(`${name} 은 목록에 없다. pantoia-ui list 로 이름을 본다`);
+    return item;
+}
+function configPath() {
+    return join(cwd(), CONFIG);
+}
+function readConfig() {
+    if (!existsSync(configPath()))
+        return undefined;
+    return JSON.parse(readFileSync(configPath(), 'utf8'));
+}
+function writeConfig(config) {
+    const sorted = Object.fromEntries(Object.entries(config.components).sort());
+    writeFileSync(configPath(), `${JSON.stringify({ ...config, components: sorted }, null, 2)}\n`);
+}
+function option(args, flag) {
+    const at = args.indexOf(flag);
+    return at === -1 ? undefined : args[at + 1];
+}
+function resolve(names) {
+    const seen = new Map();
+    const queue = [...names];
+    while (queue.length > 0) {
+        const name = queue.shift();
+        if (seen.has(name))
+            continue;
+        const item = find(name);
+        seen.set(name, item);
+        queue.push(...(item.registryDependencies ?? []));
+    }
+    return [...seen.values()];
+}
+async function confirm(question) {
+    if (!stdin.isTTY)
+        return false;
+    const rl = createInterface({ input: stdin, output: stdout });
+    const answer = await rl.question(`${question} (y/N) `);
+    rl.close();
+    return answer.trim().toLowerCase() === 'y';
+}
+async function copy(item, root, force) {
+    for (const file of item.files ?? []) {
+        const source = readFileSync(join(HERE, file.path), 'utf8');
+        const target = join(root, file.target ?? file.path);
+        if (existsSync(target) && readFileSync(target, 'utf8') !== source) {
+            if (!force && !await confirm(`${file.path} 이 이미 있고 내용이 다르다. 덮어쓰나?`)) {
+                console.log(`  건너뛴다  ${file.path} — 덮어쓰려면 --force`);
+                continue;
+            }
+        }
+        mkdirSync(dirname(target), { recursive: true });
+        writeFileSync(target, source);
+        console.log(`  썼다      ${file.path}`);
+    }
+}
+async function commandInit(args) {
+    const existing = readConfig();
+    if (existing)
+        fail(`${CONFIG} 이 이미 있다`);
+    const path = option(args, '--path') ?? DEFAULT_PATH;
+    writeConfig({ path, components: {} });
+    console.log(`${CONFIG} 을 만들었다 — 소스는 ${path} 아래로 간다`);
+    console.log('스타일을 한 줄 넣는다 — @import "@pantoia/ui/styles.css";');
+}
+async function commandAdd(args) {
+    const names = args.filter(arg => !arg.startsWith('--'));
+    if (names.length === 0)
+        fail('받을 이름을 적는다 — pantoia-ui add button');
+    const force = args.includes('--force');
+    let config = readConfig();
+    if (!config) {
+        config = { path: option(args, '--path') ?? DEFAULT_PATH, components: {} };
+        console.log(`${CONFIG} 이 없어 만들었다 — 소스는 ${config.path} 아래로 간다`);
+    }
+    const items = resolve(names);
+    const root = join(cwd(), config.path);
+    const extra = items.filter(item => !names.includes(item.name));
+    if (extra.length > 0)
+        console.log(`함께 받는다 — ${extra.map(item => item.name).join(' · ')}`);
+    for (const item of items) {
+        console.log(item.name);
+        await copy(item, root, force);
+        config.components[item.name] = version();
+    }
+    writeConfig(config);
+    const dependencies = [...new Set(items.flatMap(item => item.dependencies ?? []))].sort();
+    if (dependencies.length > 0)
+        console.log(`\nnpm 의존을 적는다 — ${dependencies.join(' · ')}`);
+}
+function commandList() {
+    for (const item of registry()) {
+        const together = (item.registryDependencies ?? []).join(' · ');
+        console.log(`${item.name.padEnd(18)}${(item.meta?.layer ?? '').padEnd(9)}${together}`);
+    }
+}
+function lcs(a, b) {
+    const table = Array.from({ length: a.length + 1 }, () => new Array(b.length + 1).fill(0));
+    for (let i = a.length - 1; i >= 0; i--)
+        for (let j = b.length - 1; j >= 0; j--)
+            table[i][j] = a[i] === b[j] ? table[i + 1][j + 1] + 1 : Math.max(table[i + 1][j], table[i][j + 1]);
+    return table;
+}
+function difference(mine, theirs) {
+    const table = lcs(mine, theirs);
+    const out = [];
+    let i = 0;
+    let j = 0;
+    while (i < mine.length && j < theirs.length) {
+        if (mine[i] === theirs[j]) {
+            i++;
+            j++;
+            continue;
+        }
+        if (table[i + 1][j] >= table[i][j + 1])
+            out.push(`- ${mine[i++]}`);
+        else
+            out.push(`+ ${theirs[j++]}`);
+    }
+    while (i < mine.length)
+        out.push(`- ${mine[i++]}`);
+    while (j < theirs.length)
+        out.push(`+ ${theirs[j++]}`);
+    return out;
+}
+async function commandDiff(args) {
+    const config = readConfig();
+    if (!config)
+        fail(`${CONFIG} 이 없다 — pantoia-ui init 을 먼저 돌린다`);
+    const names = args.filter(arg => !arg.startsWith('--'));
+    const wanted = names.length > 0 ? names : Object.keys(config.components);
+    let changed = 0;
+    for (const item of wanted.map(find)) {
+        for (const file of item.files ?? []) {
+            const target = join(cwd(), config.path, file.target ?? file.path);
+            if (!existsSync(target))
+                continue;
+            const mine = readFileSync(target, 'utf8');
+            const theirs = readFileSync(join(HERE, file.path), 'utf8');
+            if (mine === theirs)
+                continue;
+            changed++;
+            console.log(`\n${file.path}`);
+            for (const line of difference(mine.split('\n'), theirs.split('\n')))
+                console.log(line);
+        }
+    }
+    if (changed === 0)
+        console.log('갈린 것이 없다');
+}
+const [command, ...args] = argv.slice(2);
+if (command === 'init')
+    await commandInit(args);
+else if (command === 'add')
+    await commandAdd(args);
+else if (command === 'list')
+    commandList();
+else if (command === 'diff')
+    await commandDiff(args);
+else
+    fail(USAGE);

package/drawer/AGENTS.md

@@ -0,0 +1,66 @@
+# Drawer
+
+```
+받기   npx @pantoia/ui add drawer
+층     ui
+파일   drawer/index.tsx · drawer/index.module.css · drawer/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Drawer` | `DrawerProps` |
+| `DrawerTrigger` | — |
+| `DrawerClose` | — |
+| `DrawerContent` | `ComponentProps<typeof Dialog.Content>` |
+| `DrawerHeader` | `DrawerHeaderProps` |
+| `DrawerTitle` | `ComponentProps<typeof Dialog.Title>` |
+| `DrawerDescription` | `ComponentProps<typeof Dialog.Description>` |
+
+### `DrawerTrigger`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `children` | `ReactNode` | 예 |
+
+### `DrawerClose`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `children` | `ReactNode` | 예 |
+
+## props
+
+### `DrawerProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `side` | `Side` |  |
+| `open` | `boolean` |  |
+| `defaultOpen` | `boolean` |  |
+| `onOpenChange` | `(open: boolean) => void` |  |
+| `children` | `ReactNode` | 예 |
+
+### `DrawerHeaderProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `lead` | `ReactNode` |  |
+| `trail` | `ReactNode` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## 변형 — `drawerContent`
+
+| 축 | 값 | 기본 |
+|---|---|---|
+| `side` | `left` · `right` | — |
+
+## 함께 받는 것
+
+`tv`
+
+## npm 의존
+
+`radix-ui`

package/drawer/index.module.css

@@ -0,0 +1,17 @@
+@keyframes slide-in  { from { translate: var(--drawer-slide) 0; opacity: 0; } }
+@keyframes slide-out { to   { translate: var(--drawer-slide) 0; opacity: 0; } }
+
+.panel {
+  --drawer-slide: -100%;
+  transform: translateX(var(--drawer-swipe-movement-x, 0px));
+  transition: transform var(--dur-enter) var(--ease-enter);
+}
+
+.panel[data-state="open"]  { animation: slide-in  var(--dur-enter) var(--ease-enter); }
+.panel[data-state="closed"]{ animation: slide-out var(--dur-exit)  var(--ease-exit); }
+.panel[data-swiping] { transition-duration: 0ms; }
+.panel-right { --drawer-slide: 100%; }
+
+@media (prefers-reduced-motion: reduce) {
+  .panel { --drawer-slide: 0%; }
+}