@pantoia/ui 0.1.0 → 0.3.0

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>
-  )
-}

package/press.css

@@ -1,37 +0,0 @@
-:root, .light { --pressed-dim: rgba(0,23,51,0.12); }
-.dark         { --pressed-dim: rgba(209,209,253,0.14); }
-
-:root { --scale-press: 0.97; }
-
-@media (prefers-reduced-motion: reduce) {
-  :root { --scale-press: 1; }
-}
-
-@utility press {
-  position: relative;
-
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    background: var(--pressed-dim);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity var(--dur-state) var(--ease-state);
-  }
-
-  &:active:not(:disabled)::after,
-  &[data-pressed]:not(:disabled)::after {
-    opacity: 1;
-    transition-duration: 0s;
-  }
-}
-
-@utility press-shrink {
-  &:active:not(:disabled),
-  &[data-pressed]:not(:disabled) {
-    scale: var(--scale-press);
-    transition-duration: 0s;
-  }
-}

package/styles.css

@@ -1,347 +0,0 @@
-@import "pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css";
-@import "./press.css";
-
-@custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));
-
-@custom-variant current (&[aria-current="page"]);
-
-@custom-variant invalid (&[aria-invalid="true"]);
-
-@custom-variant invalid-within (&:has([aria-invalid="true"]));
-
-@custom-variant in-invalid (&:where([aria-invalid="true"] *));
-
-@custom-variant described (&:has([data-description]));
-
-@custom-variant checked (&:where([data-state="checked"], [data-state="indeterminate"]));
-@custom-variant open    (&[data-state="open"]);
-@custom-variant closed  (&[data-state="closed"]);
-@custom-variant on      (&[data-state="on"]);
-@custom-variant selected (&[data-selected]:not([data-selected="false"]));
-@custom-variant unset    (&[data-placeholder]);
-
-@custom-variant menu-gutter (.menu:has(.menu-lead) &:not(:has(.menu-lead)));
-
-:root, .light {
-  --gray-50:#f9fafb;   --gray-100:#f2f4f6; --gray-200:#e5e8eb; --gray-300:#d1d6db;
-  --gray-400:#b0b8c1;  --gray-500:#8b95a1; --gray-600:#6b7684; --gray-700:#4e5968;
-  --gray-800:#333d4b;  --gray-900:#191f28;
-
-  --purple-50:#f5f1fd;  --purple-100:#e4d6ff; --purple-200:#ceb0ff; --purple-300:#bb8ffa;
-  --purple-400:#aa74f2; --purple-500:#9c63e4; --purple-600:#8750c9; --purple-700:#7543b0;
-  --purple-800:#633997; --purple-900:#54317f;
-
-  --blue-50:#e8f3ff;  --blue-100:#c9e2ff; --blue-200:#90c2ff; --blue-300:#64a8ff;
-  --blue-400:#4593fc; --blue-500:#3182f6; --blue-600:#2272eb; --blue-700:#1b64da;
-  --blue-800:#1957c2; --blue-900:#194aa6;
-
-  --green-50:#f0faf6;  --green-100:#aeefd5; --green-200:#76e4b8; --green-300:#3fd599;
-  --green-400:#15c47e; --green-500:#03b26c; --green-600:#02a262; --green-700:#029359;
-  --green-800:#028450; --green-900:#027648;
-
-  --orange-50:#fff3e0;  --orange-100:#ffe0b0; --orange-200:#ffcd80; --orange-300:#ffbd51;
-  --orange-400:#ffa927; --orange-500:#fe9800; --orange-600:#fb8800; --orange-700:#f57800;
-  --orange-800:#ed6700; --orange-900:#e45600;
-
-  --red-50:#ffeeee;  --red-100:#ffd4d6; --red-200:#feafb4; --red-300:#fb8890;
-  --red-400:#f66570; --red-500:#f04452; --red-600:#e42939; --red-700:#d22030;
-  --red-800:#bc1b2a; --red-900:#a51926;
-}
-
-.dark {
-  --gray-50:#202027;   --gray-100:#2c2c35; --gray-200:#3c3c47; --gray-300:#4d4d59;
-  --gray-400:#62626d;  --gray-500:#7e7e87; --gray-600:#9e9ea4; --gray-700:#c3c3c6;
-  --gray-800:#e4e4e5;  --gray-900:#ffffff;
-
-  --purple-50:#362949;  --purple-100:#462e66; --purple-200:#583682; --purple-300:#6b3fa0;
-  --purple-400:#8451c4; --purple-500:#9c63e4; --purple-600:#ad75f7; --purple-700:#c094ff;
-  --purple-800:#d6baff; --purple-900:#eadeff;
-
-  --blue-50:#202c4d;  --blue-100:#23386a; --blue-200:#25478c; --blue-300:#265ab3;
-  --blue-400:#2970d9; --blue-500:#3485fa; --blue-600:#449bff; --blue-700:#61b0ff;
-  --blue-800:#8fcdff; --blue-900:#c8e7ff;
-
-  --green-50:#153729;  --green-100:#135338; --green-200:#136d47; --green-300:#138a59;
-  --green-400:#13a065; --green-500:#16bb76; --green-600:#26cf88; --green-700:#4ee4a6;
-  --green-800:#82f6c5; --green-900:#ccffea;
-
-  --orange-50:#3d2500;  --orange-100:#563200; --orange-200:#804600; --orange-300:#a85f00;
-  --orange-400:#cf7200; --orange-500:#f18600; --orange-600:#fd9528; --orange-700:#ffa861;
-  --orange-800:#ffc39e; --orange-900:#ffe4d6;
-
-  --red-50:#3c2020;  --red-100:#562025; --red-200:#7a242d; --red-300:#9e2733;
-  --red-400:#ca2f3d; --red-500:#f04251; --red-600:#fa616d; --red-700:#fe818b;
-  --red-800:#ffa8ad; --red-900:#ffd1d3;
-}
-
-@theme {
-  --color-*: initial;
-  --text-*: initial;
-  --leading-*: initial;
-  --font-weight-*: initial;
-}
-
-@theme {
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-bold:   700;
-
-  --font-sans: "Pretendard Variable", "Pretendard", -apple-system, system-ui, sans-serif;
-  --font-mono: "JetBrains Mono", "Pretendard Variable", "Pretendard", ui-monospace, monospace;
-
-  --text-display:    28px; --text-display--line-height:    38px; --text-display--font-weight:    700;
-  --text-title:      24px; --text-title--line-height:      32px; --text-title--font-weight:      700;
-  --text-section:    20px; --text-section--line-height:    27px; --text-section--font-weight:    700;
-  --text-subsection: 16px; --text-subsection--line-height: 22px; --text-subsection--font-weight: 700;
-  --text-label:      14px; --text-label--line-height:      19px; --text-label--font-weight:      500;
-  --text-caption:    13px; --text-caption--line-height:    18px; --text-caption--font-weight:    400;
-  --text-micro:      11px; --text-micro--line-height:      15px; --text-micro--font-weight:      500;
-
-  --text-t10: 10px; --text-t10--line-height: 14px; --text-t10--font-weight: 400;
-  --text-t11: 11px; --text-t11--line-height: 15px; --text-t11--font-weight: 400;
-  --text-t12: 12px; --text-t12--line-height: 16px; --text-t12--font-weight: 400;
-  --text-t13: 13px; --text-t13--line-height: 18px; --text-t13--font-weight: 400;
-  --text-t14: 14px; --text-t14--line-height: 19px; --text-t14--font-weight: 400;
-  --text-t16: 16px; --text-t16--line-height: 22px; --text-t16--font-weight: 400;
-  --text-t18: 18px; --text-t18--line-height: 24px; --text-t18--font-weight: 400;
-  --text-t20: 20px; --text-t20--line-height: 27px; --text-t20--font-weight: 400;
-  --text-t24: 24px; --text-t24--line-height: 32px; --text-t24--font-weight: 400;
-  --text-t28: 28px; --text-t28--line-height: 38px; --text-t28--font-weight: 400;
-  --text-t32: 32px; --text-t32--line-height: 43px; --text-t32--font-weight: 400;
-  --text-t40: 40px; --text-t40--line-height: 54px; --text-t40--font-weight: 400;
-  --text-t48: 48px; --text-t48--line-height: 65px; --text-t48--font-weight: 400;
-  --text-t56: 56px; --text-t56--line-height: 76px; --text-t56--font-weight: 400;
-  --text-t64: 64px; --text-t64--line-height: 86px; --text-t64--font-weight: 400;
-}
-
-@theme inline {
-  --text-prose: var(--ui-prose);
-  --text-prose--line-height: var(--ui-prose-lh);
-  --text-prose--font-weight: 400;
-
-  --text-value: var(--ui-value);
-  --text-value--line-height: var(--ui-value-lh);
-  --text-value--font-weight: 400;
-}
-
-:root {
-  --ui-prose: 16px; --ui-prose-lh: 24px;
-  --ui-value: 16px; --ui-value-lh: 22px;
-
-  @variant sm { --ui-prose: 14px; --ui-prose-lh: 22px; }
-  @variant sm { --ui-value: 14px; --ui-value-lh: 19px; }
-}
-
-@font-face {
-  font-family: "JetBrains Mono";
-  src: url("@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff2") format("woff2");
-  font-weight: 400;
-  font-display: swap;
-  /* [TODO] size-adjust 를 지운다 — 시각 기준 이미지가 서고 나서 */
-  size-adjust: 96%;
-  unicode-range: U+0000-00FF, U+2000-206F;
-}
-
-@layer base {
-  :root { color-scheme: light; }
-  .dark { color-scheme: dark; }
-
-  body {
-    background-color: var(--color-canvas);
-    color: var(--color-fg);
-    font-family: var(--font-sans);
-  }
-
-  code, pre, kbd, samp { font-family: var(--font-mono); }
-}
-
-@theme inline {
-  --color-white:#ffffff;
-  --color-black:#000000;
-
-  --color-canvas: var(--ui-canvas);
-  --color-well: var(--ui-well);
-  --color-panel: var(--ui-panel);
-  --color-float: var(--ui-float);
-  --color-disabled: var(--gray-200);
-
-  --color-hover: var(--ui-hover);
-  --color-selected: var(--ui-selected);
-  --color-selected-hover: var(--ui-selected-hover);
-
-  --color-control-on: var(--gray-900);
-  --color-control-on-hover: var(--gray-800);
-  --color-control-on-disabled: var(--gray-600);
-  --color-fg-on-control: var(--gray-50);
-
-  --color-fg: var(--gray-900);
-  --color-fg-muted: var(--gray-700);
-  --color-fg-subtle: var(--gray-500);
-  --color-fg-placeholder: var(--gray-400);
-  --color-fg-disabled: var(--gray-600);
-  --color-fg-on-solid:#ffffff;
-
-  --color-line: var(--gray-200);
-  --color-line-strong: var(--gray-300);
-  --color-ring: var(--blue-500);
-
-  --color-neutral-solid: var(--gray-900);
-  --color-neutral-solid-hover: var(--gray-800);
-
-  --color-primary-solid: var(--purple-500);
-  --color-primary-solid-hover: var(--purple-600);
-  --color-primary-weak: var(--purple-50);
-  --color-primary-on-weak: var(--purple-700);
-  --color-primary-stroke: var(--purple-200);
-
-  --color-info: var(--blue-500);
-  --color-info-weak: var(--blue-50);
-  --color-info-on-weak: var(--blue-700);
-  --color-info-stroke: var(--blue-200);
-
-  --color-success: var(--green-500);
-  --color-success-weak: var(--green-50);
-  --color-success-on-weak: var(--green-700);
-  --color-success-stroke: var(--green-200);
-
-  --color-warning: var(--orange-500);
-  --color-warning-weak: var(--orange-50);
-  --color-warning-on-weak: var(--orange-700);
-  --color-warning-stroke: var(--orange-200);
-
-  --color-danger: var(--red-500);
-  --color-danger-weak: var(--red-50);
-  --color-danger-on-weak: var(--red-700);
-  --color-danger-stroke: var(--red-200);
-  --color-danger-solid: var(--red-500);
-  --color-danger-solid-hover: var(--red-600);
-}
-
-:root, .light {
-  --ui-canvas:#ffffff;
-  --ui-well:#f2f4f6;
-  --ui-panel:#ffffff;
-  --ui-float:#ffffff;
-  --ui-hover: rgba(0,23,51,0.02);
-  --ui-selected: rgba(2,32,71,0.05);
-  --ui-selected-hover: rgba(0,27,55,0.1);
-}
-
-.dark {
-  --ui-canvas:#17171c;
-  --ui-well:#101013;
-  --ui-panel:#202027;
-  --ui-float:#2c2c35;
-  --ui-hover: rgba(209,209,253,0.05);
-  --ui-selected: rgba(217,217,255,0.11);
-  --ui-selected-hover: rgba(222,222,255,0.19);
-}
-
-@theme {
-  --spacing-tight:    4px;
-  --spacing-stack:   16px;
-  --spacing-block:   32px;
-  --spacing-section: 48px;
-  --spacing-gutter:  16px;
-
-  --container-app: 1280px;
-}
-
-@theme {
-  --radius-*: initial;
-
-  --radius-mark:   4px;
-  --radius-well:   8px;
-  --radius-panel: 12px;
-  --radius-float: 16px;
-
-  --radius-r2:   2px;  --radius-r4:   4px;  --radius-r6:   6px;
-  --radius-r8:   8px;  --radius-r10: 10px;  --radius-r12: 12px;
-  --radius-r14: 14px;  --radius-r16: 16px;  --radius-r20: 20px;
-  --radius-r24: 24px;
-}
-
-@theme {
-  --ease-*: initial;
-
-  --ease-state: cubic-bezier(.35, 0, .65, 1);
-  --ease-enter: cubic-bezier(0, 0, .15, 1);
-  --ease-exit:  cubic-bezier(.35, 0, 1, 1);
-}
-
-:root {
-  --dur-state: 150ms;
-  --dur-enter: 200ms;
-  --dur-exit:  150ms;
-  --enter-scale: 0.95;
-  --draw-len: 24;
-}
-
-@utility transition-state {
-  transition-property: color, background-color, box-shadow, scale;
-  transition-duration: var(--dur-state);
-  transition-timing-function: var(--ease-state);
-}
-
-@keyframes enter { from { opacity: 0; scale: var(--enter-scale); } }
-@keyframes exit  { to   { opacity: 0; scale: var(--enter-scale); } }
-
-@utility animate-enter { animation: enter var(--dur-enter) var(--ease-enter); }
-@utility animate-exit  { animation: exit  var(--dur-exit)  var(--ease-exit);  }
-
-@keyframes draw { from { stroke-dashoffset: var(--draw-len); } }
-
-@utility animate-draw {
-  stroke-dasharray: var(--draw-len);
-  animation: draw var(--dur-enter) var(--ease-enter);
-}
-
-@keyframes fade-in  { from { opacity: 0; } }
-@keyframes fade-out { to   { opacity: 0; } }
-
-@utility animate-fade-in  { animation: fade-in  var(--dur-enter) var(--ease-enter); }
-@utility animate-fade-out { animation: fade-out var(--dur-exit)  var(--ease-exit);  }
-
-@media (prefers-reduced-motion: reduce) {
-  :root { --enter-scale: 1; }
-}
-
-@theme {
-  --shadow-*: initial;
-
-  --shadow-s1: 0 1px  4px 0 var(--shade-1);
-  --shadow-s2: 0 2px 10px 0 var(--shade-2);
-  --shadow-s3: 0 4px 16px 0 var(--shade-3);
-}
-
-:root, .light { --shade-1:#00000014; --shade-2:#0000001a; --shade-3:#0000001f; }
-.dark { --shade-1:#00000080; --shade-2:#000000ad; --shade-3:#000000cc; }
-
-@theme inline {
-  --color-overlay: var(--ui-overlay);
-}
-:root, .light { --ui-overlay: rgba(0,0,0,0.2); }
-.dark { --ui-overlay: rgba(0,0,0,0.56); }
-
-@utility z-sticky  { z-index: 10; }
-@utility z-overlay { z-index: 50; }
-@utility z-toast   { z-index: 60; }
-
-:root { --header-h: 56px; }
-
-@utility side-rail {
-  position: sticky;
-  top: var(--header-h);
-  max-height: calc(100dvh - var(--header-h));
-  overflow-y: auto;
-}
-
-@utility scroll-slim {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-line-strong) transparent;
-}
-
-@utility scroll-hidden {
-  scrollbar-width: none;
-  &::-webkit-scrollbar { display: none; }
-}