@pantoia/ui 0.1.0 → 0.3.0

package/field/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { CircleAlert, CircleCheck, LoaderCircle } from 'lucide-react'
 import { createContext, use, useId, type ReactNode } from 'react'
 
 import { Label } from '../label'
@@ -66,6 +65,8 @@ export function Field({ invalid = false, layout, className, children }: FieldPro
   )
 }
 
+const fieldLabel = tv({ base: 'group-has-disabled:text-fg-disabled' })
+
 export function FieldLabel({ className, children }: { className?: string, children?: ReactNode }) {
   const ctx = use(Context)
 
@@ -73,21 +74,25 @@ export function FieldLabel({ className, children }: { className?: string, childr
     <Label
       id={ctx?.labelId}
       htmlFor={ctx?.id}
-      className={tv({ base: 'group-has-disabled:text-fg-disabled' })({ className })}
+      className={fieldLabel({ className })}
     >
       {children}
     </Label>
   )
 }
 
+const fieldHelp = tv({
+  base: 'basis-full text-caption text-fg-subtle'
+    + ' group-has-disabled:text-fg-disabled',
+})
+
 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 })}
+      className={fieldHelp({ className })}
     >
       {children}
     </p>
@@ -100,6 +105,11 @@ export interface FieldErrorProps {
   children?: ReactNode
 }
 
+const fieldError = tv({
+  base: 'basis-full text-caption text-fg-danger'
+    + ' flex items-start gap-tight',
+})
+
 export function FieldError({ items, className, children }: FieldErrorProps) {
   const ctx = use(Context)
   const list = items == null ? [] : Array.isArray(items) ? items : [items]
@@ -107,10 +117,13 @@ export function FieldError({ items, className, children }: FieldErrorProps) {
   return (
     <p
       id={ctx?.messageId}
-      className={tv({ base: 'basis-full text-caption text-danger'
-        + ' flex items-start gap-tight' })({ className })}
+      className={fieldError({ className })}
     >
-      <CircleAlert className="mt-0.5 size-4 shrink-0" />
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="mt-0.5 size-4 shrink-0">
+        <circle cx="12" cy="12" r="10" />
+        <line x1="12" x2="12" y1="8" y2="12" />
+        <line x1="12" x2="12.01" y1="16" y2="16" />
+      </svg>
       <span className="flex min-w-0 flex-col gap-0.5">
         {children ?? list.map(t => <span key={t}>{t}</span>)}
       </span>
@@ -118,31 +131,44 @@ export function FieldError({ items, className, children }: FieldErrorProps) {
   )
 }
 
+const fieldPending = tv({
+  base: 'basis-full text-caption text-fg-subtle'
+    + ' flex items-start gap-tight',
+})
+
 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 })}
+      className={fieldPending({ className })}
     >
-      <LoaderCircle className="mt-0.5 size-4 shrink-0 animate-spin motion-reduce:animate-none" />
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="mt-0.5 size-4 shrink-0 animate-spin motion-reduce:animate-none">
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+      </svg>
       <span className="min-w-0">{children}</span>
     </p>
   )
 }
 
+const fieldSuccess = tv({
+  base: 'basis-full text-caption text-fg-success'
+    + ' flex items-start gap-tight',
+})
+
 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 })}
+      className={fieldSuccess({ className })}
     >
-      <CircleCheck className="mt-0.5 size-4 shrink-0" />
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="mt-0.5 size-4 shrink-0">
+        <circle cx="12" cy="12" r="10" />
+        <path d="m16 9-5.5 5.5L8 12" />
+      </svg>
       <span className="min-w-0">{children}</span>
     </p>
   )

package/input/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add input
 층     ui
-파일   input/index.tsx · input/AGENTS.md
+파일   input/index.tsx, input/AGENTS.md
 ```
 
 ## 부위
@@ -23,12 +23,12 @@
 | `surface` | `'bare' \| 'well'` |  |
 | `size` | `'sm' \| 'md' \| 'lg'` |  |
 
-## 변형 — `input`
+## 변형 - `input`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `surface` | `bare` · `well` | `bare` |
-| `size` | `sm` · `md` · `lg` | `md` |
+| `surface` | `bare`, `well` | `bare` |
+| `size` | `sm`, `md`, `lg` | `md` |
 
 ## 함께 받는 것
 

package/input/index.tsx

@@ -5,16 +5,16 @@ 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'
+    + ' invalid:ring-2 invalid:ring-line-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',
+    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
+    + ' disabled:bg-bg-neutral-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',
+      bare: 'bg-transparent ring-1 ring-inset ring-line-strong read-only:bg-bg-well',
+      well: 'bg-bg-well',
     },
     size: {
       sm: 'h-8 px-3',

package/kbd/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add kbd
 층     ui
-파일   kbd/index.tsx · kbd/AGENTS.md
+파일   kbd/index.tsx, kbd/AGENTS.md
 ```
 
 ## 부위

package/kbd/index.tsx

@@ -2,12 +2,16 @@ import type { HTMLAttributes } from 'react'
 
 import { tv } from '../tv'
 
+const kbd = tv({
+  base: 'bg-bg-well text-fg-muted text-micro rounded-r4 inline-flex items-center'
+    + ' border border-line px-1.5 py-0.5 font-mono',
+})
+
 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 })}
+      className={kbd({ className })}
     />
   )
 }

package/label/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add label
 층     ui
-파일   label/index.tsx · label/AGENTS.md
+파일   label/index.tsx, label/AGENTS.md
 ```
 
 ## 부위

package/label/index.tsx

@@ -3,11 +3,13 @@ import type { ComponentProps } from 'react'
 
 import { tv } from '../tv'
 
+const labelText = tv({ base: 'text-label text-fg' })
+
 export function Label({ className, ...rest }: ComponentProps<typeof LabelPrimitive.Root>) {
   return (
     <LabelPrimitive.Root
       {...rest}
-      className={tv({ base: 'text-label text-fg' })({ className })}
+      className={labelText({ className })}
     />
   )
 }

package/number-field/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add number-field
 층     ui
-파일   number-field/index.tsx · number-field/AGENTS.md
+파일   number-field/index.tsx, number-field/AGENTS.md
 ```
 
 ## 부위
@@ -34,20 +34,16 @@
 | `readOnly` | `boolean` |  |
 | `className` | `string` |  |
 
-## 변형 — `numberField`
+## 변형 - `numberField`
 
-슬롯 `root` · `step` · `input`
+슬롯 `root`, `step`, `input`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `surface` | `bare` · `well` | `bare` |
-| `size` | `sm` · `md` · `lg` | `md` |
-| `readonly` | `true` | — |
+| `surface` | `bare`, `well` | `bare` |
+| `size` | `sm`, `md`, `lg` | `md` |
+| `readonly` | `true` | - |
 
 ## 함께 받는 것
 
 `tv`
-
-## npm 의존
-
-`lucide-react`

package/number-field/index.tsx

@@ -1,6 +1,5 @@
 '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'
@@ -9,13 +8,14 @@ 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'
+      + ' invalid-within:ring-2 invalid-within:ring-line-danger'
+      + ' has-disabled:bg-bg-neutral-disabled has-disabled:cursor-not-allowed'
       + ' has-focus-visible:outline-2 has-focus-visible:outline-offset-2'
-      + ' has-focus-visible:outline-ring',
+      + ' has-focus-visible:outline-line-focus-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',
+      + ' transition-state press press-shrink enabled:not-aria-disabled:hover:bg-bg-neutral-hover'
+      + ' disabled:text-fg-disabled disabled:cursor-not-allowed'
+      + ' aria-disabled:text-fg-disabled aria-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',
   },
@@ -23,7 +23,7 @@ export const numberField = tv({
   variants: {
     surface: {
       bare: { root: 'bg-transparent ring-1 ring-inset ring-line-strong' },
-      well: { root: 'bg-well' },
+      well: { root: 'bg-bg-well' },
     },
     size: {
       sm: { root: 'h-8', step: 'size-8' },
@@ -31,7 +31,7 @@ export const numberField = tv({
       lg: { root: 'h-10', step: 'size-10', input: 'text-t16' },
     },
     readonly: {
-      true: { root: 'bg-well', input: 'text-fg-muted' },
+      true: { root: 'bg-bg-well', input: 'text-fg-muted' },
     },
   },
 
@@ -55,8 +55,11 @@ function snap(n: number, min: number, step: number) {
 function useHold(step: () => void, blocked: boolean) {
   const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
   const beat = useRef<ReturnType<typeof setInterval> | undefined>(undefined)
+  const latest = useRef(step)
   const [pressed, setPressed] = useState(false)
 
+  useEffect(() => { latest.current = step })
+
   const stop = () => {
     clearTimeout(timer.current)
     clearInterval(beat.current)
@@ -68,12 +71,12 @@ function useHold(step: () => void, blocked: boolean) {
   const onPointerDown = (e: ReactPointerEvent<HTMLButtonElement>) => {
     if (e.button !== 0 || blocked) return
 
-    step()
+    latest.current()
     setPressed(true)
     e.currentTarget.setPointerCapture(e.pointerId)
 
     timer.current = setTimeout(() => {
-      beat.current = setInterval(step, HOLD_EVERY)
+      beat.current = setInterval(() => { latest.current() }, HOLD_EVERY)
     }, HOLD_DELAY)
   }
 
@@ -132,8 +135,8 @@ export function NumberField(props: NumberFieldProps) {
   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 down = useHold(() => { setTyping(null); set(from - step) }, blocked || atMin)
+  const up = useHold(() => { setTyping(null); set(from + step) }, blocked || atMax)
 
   const onKeyDown = (e: ReactKeyboardEvent<HTMLInputElement>) => {
     if (blocked) return
@@ -180,7 +183,8 @@ export function NumberField(props: NumberFieldProps) {
       <button
         type="button"
         aria-label={decrementLabel}
-        disabled={blocked || atMin}
+        disabled={blocked}
+        aria-disabled={atMin || undefined}
         data-pressed={down.pressed ? '' : undefined}
         className={ui.step()}
         onPointerDown={down.onPointerDown}
@@ -188,7 +192,9 @@ export function NumberField(props: NumberFieldProps) {
         onPointerCancel={down.onPointerCancel}
         onLostPointerCapture={down.onLostPointerCapture}
       >
-        <Minus className="size-4" />
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+          <path d="M5 12h14" />
+        </svg>
       </button>
 
       <input
@@ -212,7 +218,8 @@ export function NumberField(props: NumberFieldProps) {
       <button
         type="button"
         aria-label={incrementLabel}
-        disabled={blocked || atMax}
+        disabled={blocked}
+        aria-disabled={atMax || undefined}
         data-pressed={up.pressed ? '' : undefined}
         className={ui.step()}
         onPointerDown={up.onPointerDown}
@@ -220,7 +227,10 @@ export function NumberField(props: NumberFieldProps) {
         onPointerCancel={up.onPointerCancel}
         onLostPointerCapture={up.onLostPointerCapture}
       >
-        <Plus className="size-4" />
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+          <path d="M5 12h14" />
+          <path d="M12 5v14" />
+        </svg>
       </button>
     </div>
   )

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pantoia/ui",
-  "version": "0.1.0",
-  "description": "Pantoia 디자인 시스템 — 소스를 복사해 가는 컴포넌트 스물여덟",
+  "version": "0.3.0",
+  "description": "Pantoia Design System",
   "homepage": "https://design.pantoia.com",
   "repository": {
     "type": "git",
@@ -20,14 +20,18 @@
     "dist",
     "tv.ts",
     "test-utils.ts",
-    "styles.css",
-    "press.css",
+    "tailwind.css",
+    "palette.css",
+    "tokens.css",
+    "utilities.css",
     "registry.json"
   ],
   "exports": {
     "./tv": "./tv.ts",
-    "./styles.css": "./styles.css",
-    "./press.css": "./press.css",
+    "./tailwind.css": "./tailwind.css",
+    "./palette.css": "./palette.css",
+    "./tokens.css": "./tokens.css",
+    "./utilities.css": "./utilities.css",
     "./registry.json": "./registry.json",
     "./test-utils": "./test-utils.ts",
     "./*": "./*/index.tsx"
@@ -39,17 +43,13 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=24"
+    "node": ">=20.11"
   },
   "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"
@@ -57,17 +57,15 @@
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19",
-    "tailwindcss": "^4.3.3"
+    "tailwindcss": "^4.0.0"
   },
   "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"
+    "typescript": "7.0.2"
   }
 }

package/palette.css

@@ -0,0 +1,114 @@
+:root, .light {
+  --pds-gray-50:#f9fafb;   --pds-gray-100:#f2f4f6; --pds-gray-200:#e5e8eb; --pds-gray-300:#d1d6db;
+  --pds-gray-400:#b0b8c1;  --pds-gray-500:#8b95a1; --pds-gray-600:#6b7684; --pds-gray-700:#4e5968;
+  --pds-gray-800:#333d4b;  --pds-gray-900:#191f28;
+
+  --pds-brand-50:#f5f1fd;  --pds-brand-100:#e4d6ff; --pds-brand-200:#ceb0ff; --pds-brand-300:#bb8ffa;
+  --pds-brand-400:#aa74f2; --pds-brand-500:#9c63e4; --pds-brand-600:#8750c9; --pds-brand-700:#7543b0;
+  --pds-brand-800:#633997; --pds-brand-900:#54317f;
+
+  --pds-blue-50:#e8f3ff;  --pds-blue-100:#c9e2ff; --pds-blue-200:#90c2ff; --pds-blue-300:#64a8ff;
+  --pds-blue-400:#4593fc; --pds-blue-500:#3182f6; --pds-blue-600:#2272eb; --pds-blue-700:#1b64da;
+  --pds-blue-800:#1957c2; --pds-blue-900:#194aa6;
+
+  --pds-green-50:#f0faf6;  --pds-green-100:#aeefd5; --pds-green-200:#76e4b8; --pds-green-300:#3fd599;
+  --pds-green-400:#15c47e; --pds-green-500:#03b26c; --pds-green-600:#02a262; --pds-green-700:#029359;
+  --pds-green-800:#028450; --pds-green-900:#027648;
+
+  --pds-orange-50:#fff3e0;  --pds-orange-100:#ffe0b0; --pds-orange-200:#ffcd80; --pds-orange-300:#ffbd51;
+  --pds-orange-400:#ffa927; --pds-orange-500:#fe9800; --pds-orange-600:#fb8800; --pds-orange-700:#f57800;
+  --pds-orange-800:#ed6700; --pds-orange-900:#e45600;
+
+  --pds-red-50:#ffeeee;  --pds-red-100:#ffd4d6; --pds-red-200:#feafb4; --pds-red-300:#fb8890;
+  --pds-red-400:#f66570; --pds-red-500:#f04452; --pds-red-600:#e42939; --pds-red-700:#d22030;
+  --pds-red-800:#bc1b2a; --pds-red-900:#a51926;
+}
+
+.dark {
+  --pds-gray-50:#202027;   --pds-gray-100:#2c2c35; --pds-gray-200:#3c3c47; --pds-gray-300:#4d4d59;
+  --pds-gray-400:#62626d;  --pds-gray-500:#7e7e87; --pds-gray-600:#9e9ea4; --pds-gray-700:#c3c3c6;
+  --pds-gray-800:#e4e4e5;  --pds-gray-900:#ffffff;
+
+  --pds-brand-50:#362949;  --pds-brand-100:#462e66; --pds-brand-200:#583682; --pds-brand-300:#6b3fa0;
+  --pds-brand-400:#8451c4; --pds-brand-500:#9c63e4; --pds-brand-600:#ad75f7; --pds-brand-700:#c094ff;
+  --pds-brand-800:#d6baff; --pds-brand-900:#eadeff;
+
+  --pds-blue-50:#202c4d;  --pds-blue-100:#23386a; --pds-blue-200:#25478c; --pds-blue-300:#265ab3;
+  --pds-blue-400:#2970d9; --pds-blue-500:#3485fa; --pds-blue-600:#449bff; --pds-blue-700:#61b0ff;
+  --pds-blue-800:#8fcdff; --pds-blue-900:#c8e7ff;
+
+  --pds-green-50:#153729;  --pds-green-100:#135338; --pds-green-200:#136d47; --pds-green-300:#138a59;
+  --pds-green-400:#13a065; --pds-green-500:#16bb76; --pds-green-600:#26cf88; --pds-green-700:#4ee4a6;
+  --pds-green-800:#82f6c5; --pds-green-900:#ccffea;
+
+  --pds-orange-50:#3d2500;  --pds-orange-100:#563200; --pds-orange-200:#804600; --pds-orange-300:#a85f00;
+  --pds-orange-400:#cf7200; --pds-orange-500:#f18600; --pds-orange-600:#fd9528; --pds-orange-700:#ffa861;
+  --pds-orange-800:#ffc39e; --pds-orange-900:#ffe4d6;
+
+  --pds-red-50:#3c2020;  --pds-red-100:#562025; --pds-red-200:#7a242d; --pds-red-300:#9e2733;
+  --pds-red-400:#ca2f3d; --pds-red-500:#f04251; --pds-red-600:#fa616d; --pds-red-700:#fe818b;
+  --pds-red-800:#ffa8ad; --pds-red-900:#ffd1d3;
+}
+
+@theme inline {
+  --color-pds-gray-50:                          var(--pds-gray-50);
+  --color-pds-gray-100:                         var(--pds-gray-100);
+  --color-pds-gray-200:                         var(--pds-gray-200);
+  --color-pds-gray-300:                         var(--pds-gray-300);
+  --color-pds-gray-400:                         var(--pds-gray-400);
+  --color-pds-gray-500:                         var(--pds-gray-500);
+  --color-pds-gray-600:                         var(--pds-gray-600);
+  --color-pds-gray-700:                         var(--pds-gray-700);
+  --color-pds-gray-800:                         var(--pds-gray-800);
+  --color-pds-gray-900:                         var(--pds-gray-900);
+  --color-pds-brand-50:                         var(--pds-brand-50);
+  --color-pds-brand-100:                        var(--pds-brand-100);
+  --color-pds-brand-200:                        var(--pds-brand-200);
+  --color-pds-brand-300:                        var(--pds-brand-300);
+  --color-pds-brand-400:                        var(--pds-brand-400);
+  --color-pds-brand-500:                        var(--pds-brand-500);
+  --color-pds-brand-600:                        var(--pds-brand-600);
+  --color-pds-brand-700:                        var(--pds-brand-700);
+  --color-pds-brand-800:                        var(--pds-brand-800);
+  --color-pds-brand-900:                        var(--pds-brand-900);
+  --color-pds-blue-50:                          var(--pds-blue-50);
+  --color-pds-blue-100:                         var(--pds-blue-100);
+  --color-pds-blue-200:                         var(--pds-blue-200);
+  --color-pds-blue-300:                         var(--pds-blue-300);
+  --color-pds-blue-400:                         var(--pds-blue-400);
+  --color-pds-blue-500:                         var(--pds-blue-500);
+  --color-pds-blue-600:                         var(--pds-blue-600);
+  --color-pds-blue-700:                         var(--pds-blue-700);
+  --color-pds-blue-800:                         var(--pds-blue-800);
+  --color-pds-blue-900:                         var(--pds-blue-900);
+  --color-pds-green-50:                         var(--pds-green-50);
+  --color-pds-green-100:                        var(--pds-green-100);
+  --color-pds-green-200:                        var(--pds-green-200);
+  --color-pds-green-300:                        var(--pds-green-300);
+  --color-pds-green-400:                        var(--pds-green-400);
+  --color-pds-green-500:                        var(--pds-green-500);
+  --color-pds-green-600:                        var(--pds-green-600);
+  --color-pds-green-700:                        var(--pds-green-700);
+  --color-pds-green-800:                        var(--pds-green-800);
+  --color-pds-green-900:                        var(--pds-green-900);
+  --color-pds-orange-50:                        var(--pds-orange-50);
+  --color-pds-orange-100:                       var(--pds-orange-100);
+  --color-pds-orange-200:                       var(--pds-orange-200);
+  --color-pds-orange-300:                       var(--pds-orange-300);
+  --color-pds-orange-400:                       var(--pds-orange-400);
+  --color-pds-orange-500:                       var(--pds-orange-500);
+  --color-pds-orange-600:                       var(--pds-orange-600);
+  --color-pds-orange-700:                       var(--pds-orange-700);
+  --color-pds-orange-800:                       var(--pds-orange-800);
+  --color-pds-orange-900:                       var(--pds-orange-900);
+  --color-pds-red-50:                           var(--pds-red-50);
+  --color-pds-red-100:                          var(--pds-red-100);
+  --color-pds-red-200:                          var(--pds-red-200);
+  --color-pds-red-300:                          var(--pds-red-300);
+  --color-pds-red-400:                          var(--pds-red-400);
+  --color-pds-red-500:                          var(--pds-red-500);
+  --color-pds-red-600:                          var(--pds-red-600);
+  --color-pds-red-700:                          var(--pds-red-700);
+  --color-pds-red-800:                          var(--pds-red-800);
+  --color-pds-red-900:                          var(--pds-red-900);
+}

package/popover/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add popover
 층     ui
-파일   popover/index.tsx · popover/AGENTS.md
+파일   popover/index.tsx, popover/AGENTS.md
 ```
 
 ## 부위
@@ -11,9 +11,9 @@
 | 이름 | props |
 |---|---|
 | `Popover` | `PopoverProps` |
-| `PopoverTrigger` | — |
-| `PopoverAnchor` | — |
-| `PopoverClose` | — |
+| `PopoverTrigger` | - |
+| `PopoverAnchor` | - |
+| `PopoverClose` | - |
 | `PopoverContent` | `PopoverContentProps` |
 
 ### `PopoverTrigger`

package/popover/index.tsx

@@ -38,6 +38,12 @@ export interface PopoverContentProps extends Omit<ComponentProps<typeof PopoverP
   arrow?: boolean
 }
 
+const popoverContent = tv({
+  base: 'float text-fg rounded-r16 z-overlay p-4'
+    + ' open:animate-enter closed:animate-exit'
+    + ' focus-visible:outline-none',
+})
+
 export function PopoverContent({
   side = 'bottom',
   align = 'center',
@@ -54,12 +60,16 @@ export function PopoverContent({
         align={align}
         sideOffset={8}
         arrowPadding={16}
-        className={tv({ base: 'bg-float text-fg rounded-float shadow-s3 z-overlay p-4'
-          + ' open:animate-enter closed:animate-exit'
-          + ' focus-visible:outline-none' })({ className })}
+        className={popoverContent({ className })}
       >
         {children}
-        {arrow && <PopoverPrimitive.Arrow className="fill-float" width={12} height={6} />}
+        {arrow && (
+          <PopoverPrimitive.Arrow asChild width={12} height={6}>
+            <svg viewBox="0 0 12 6" preserveAspectRatio="none" className="fill-bg-panel -translate-y-px">
+              <path d="M0 0L4.58579 4.58579C5.36683 5.36683 6.63316 5.36684 7.41421 4.58579L12 0" className="stroke-line stroke-1" />
+            </svg>
+          </PopoverPrimitive.Arrow>
+        )}
       </PopoverPrimitive.Content>
     </PopoverPrimitive.Portal>
   )