@pantoia/ui 0.1.0 → 0.2.0

package/code-block/index.module.css

@@ -1,46 +0,0 @@
-.code {
-  margin: 0;
-  padding: 1rem;
-  counter-reset: ln;
-
-  --code-block-keyword: var(--purple-700);
-  --code-block-name: var(--orange-800);
-  --code-block-string: var(--green-800);
-  --code-block-comment: var(--gray-500);
-  --code-block-value: var(--blue-700);
-}
-
-.code-keyword { color: var(--code-block-keyword); }
-.code-name { color: var(--code-block-name); }
-.code-string { color: var(--code-block-string); }
-.code-comment { color: var(--code-block-comment); }
-.code-value { color: var(--code-block-value); }
-.line { display: block; white-space: pre; min-height: 1lh; }
-.wrap .line { white-space: pre-wrap; word-break: break-all; }
-
-.numbers { padding-left: 0; }
-.numbers .line::before {
-  counter-increment: ln;
-  content: counter(ln);
-  display: inline-block;
-  width: 3.4em;
-  padding-right: 0.9em;
-  text-align: right;
-  color: var(--color-fg-subtle);
-  user-select: none;
-  pointer-events: none;
-}
-
-.numbers:not(.wrap) .line::before {
-  position: sticky;
-  left: 0;
-  background: var(--color-well);
-}
-
-.numbers.wrap .line { padding-left: 3.4em; text-indent: -3.4em; }
-
-.clip {
-  max-height: calc(var(--code-block-max-lines) * 1lh + 2rem);
-  overflow-y: hidden;
-  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
-}

package/code-block/index.tsx

@@ -1,127 +0,0 @@
-'use client'
-
-import { ChevronDown } from 'lucide-react'
-import { useCallback, useState, useSyncExternalStore, type CSSProperties, type ReactNode } from 'react'
-
-import { tv } from '../tv'
-
-import s from './index.module.css'
-
-export const codeToken = {
-  keyword: s['code-keyword'],
-  name: s['code-name'],
-  string: s['code-string'],
-  comment: s['code-comment'],
-  value: s['code-value'],
-  none: '',
-} as const
-
-export interface CodeBlockFold {
-  maxLines: number
-  more: string
-  moreCount: string
-  less: string
-}
-
-export const codeBlock = tv({
-  slots: {
-    root: 'bg-well rounded-well text-value font-mono overflow-hidden',
-    viewport: 'scroll-slim overflow-auto'
-      + ' focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring',
-    pre: '',
-    chevron: 'size-4 transition-transform motion-reduce:transition-none',
-  },
-
-  variants: {
-    folded: { false: { chevron: 'rotate-180' } },
-  },
-})
-
-export interface CodeBlockProps {
-  code: string
-  wrap?: boolean
-  numbers?: boolean
-  fold?: CodeBlockFold
-  className?: string
-  header?: ReactNode
-  line?: (line: string, index: number) => ReactNode
-}
-
-export function CodeBlock({
-  code,
-  wrap = false,
-  numbers = false,
-  fold,
-  className,
-  header,
-  line,
-}: CodeBlockProps) {
-  const [folded, setFolded] = useState(true)
-  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 || box.scrollHeight > box.clientHeight),
-    () => false,
-  )
-
-  const lines = code.split('\n')
-  const foldable = !!fold && lines.length > fold.maxLines
-  const rest = lines.length - (fold?.maxLines ?? 0)
-
-  const ui = codeBlock({ folded })
-
-  const pre = [s.code, wrap ? s.wrap : '', numbers ? s.numbers : '', ui.pre()]
-    .filter(Boolean).join(' ')
-
-  const viewport = [ui.viewport(), foldable && folded ? s.clip : '']
-    .filter(Boolean).join(' ')
-
-  return (
-    <div className={ui.root({ className })}>
-      {header}
-
-      <div
-        ref={setBox}
-        tabIndex={overflows ? 0 : undefined}
-        className={viewport}
-        style={{ '--code-block-max-lines': fold?.maxLines } as CSSProperties}
-      ><pre className={pre}>{lines.map((text, i) => (
-        <span key={i} className={s.line}>{line ? line(text, i) : text}</span>
-      ))}</pre></div>
-
-      {foldable && (
-        <button
-          type="button"
-          className="border-line text-caption text-fg-muted flex w-full items-center justify-center
-             gap-tight border-t py-2 transition-state press
-             enabled:hover:bg-hover
-             focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"
-          onClick={() => setFolded(!folded)}
-        >
-          <ChevronDown className={ui.chevron()} />
-          {folded ? (wrap ? fold.more : fold.moreCount.replace('{count}', String(rest))) : fold.less}
-        </button>
-      )}
-    </div>
-  )
-}
-
-export function CodeBlockHeader({ className, children }: { className?: string, children?: ReactNode }) {
-  return (
-    <div
-      className={tv({ base: 'border-line text-caption text-fg-muted'
-        + ' flex items-center gap-stack border-b px-4 py-2' })({ className })}
-    >
-      {children}
-    </div>
-  )
-}

package/copy-button/AGENTS.md

@@ -1,43 +0,0 @@
-# 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`

package/copy-button/index.tsx

@@ -1,119 +0,0 @@
-'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>
-  )
-}