@pantoia/ui 0.1.0 → 0.2.0

package/dist/index.js

@@ -6,12 +6,12 @@ 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 <명령>
+const USAGE = `pantoia-ui <명령어>
 
-  init [--path <디렉터리>]   ${CONFIG} 을 만든다
-  add <이름...> [--force]    소스를 복사한다
-  list                       받을 수 있는 것을 늘어놓는다
-  diff [이름]                복사본과 패키지의 지금 것을 견준다`;
+  init [--path <경로>]      컴포넌트를 저장할 위치를 정해요
+  add <이름...> [--force]   컴포넌트를 추가해요
+  list                      추가할 수 있는 컴포넌트를 확인해요
+  diff [이름]               추가한 파일과 최신 파일을 비교해요`;
 function fail(message) {
     console.error(message);
     exit(1);
@@ -27,7 +27,7 @@ function registry() {
 function find(name) {
     const item = registry().find(candidate => candidate.name === name);
     if (!item)
-        fail(`${name} 은 목록에 없다. pantoia-ui list 로 이름을 본다`);
+        fail(`목록에 없는 컴포넌트예요: ${name}\npantoia-ui list 로 이름을 확인하세요.`);
     return item;
 }
 function configPath() {
@@ -59,6 +59,14 @@ function resolve(names) {
     }
     return [...seen.values()];
 }
+async function ask(question, fallback) {
+    if (!stdin.isTTY)
+        return fallback;
+    const rl = createInterface({ input: stdin, output: stdout });
+    const answer = await rl.question(`${question} (${fallback}) `);
+    rl.close();
+    return answer.trim() || fallback;
+}
 async function confirm(question) {
     if (!stdin.isTTY)
         return false;
@@ -67,59 +75,78 @@ async function confirm(question) {
     rl.close();
     return answer.trim().toLowerCase() === 'y';
 }
-async function copy(item, root, force) {
+async function copy(item, base, force) {
+    let skipped = false;
     for (const file of item.files ?? []) {
         const source = readFileSync(join(HERE, file.path), 'utf8');
-        const target = join(root, file.target ?? file.path);
+        const shown = join(base, file.target ?? file.path);
+        const target = join(cwd(), shown);
         if (existsSync(target) && readFileSync(target, 'utf8') !== source) {
-            if (!force && !await confirm(`${file.path} 이 이미 있고 내용이 다르다. 덮어쓰나?`)) {
-                console.log(`  건너뛴다  ${file.path} — 덮어쓰려면 --force`);
+            if (!force && !await confirm(`${shown} 파일이 이미 있고 내용이 달라요. 덮어쓸까요?`)) {
+                console.log(`  ${shown}  (건너뜀)`);
+                skipped = true;
                 continue;
             }
         }
         mkdirSync(dirname(target), { recursive: true });
         writeFileSync(target, source);
-        console.log(`  썼다      ${file.path}`);
+        console.log(`  ${shown}`);
     }
+    return skipped;
 }
 async function commandInit(args) {
     const existing = readConfig();
     if (existing)
-        fail(`${CONFIG} 이 이미 있다`);
-    const path = option(args, '--path') ?? DEFAULT_PATH;
+        fail(`${CONFIG} 이 이미 있어요.`);
+    const path = option(args, '--path')
+        ?? await ask('컴포넌트를 저장할 위치를 입력하세요.', DEFAULT_PATH);
     writeConfig({ path, components: {} });
-    console.log(`${CONFIG} 을 만들었다 — 소스는 ${path} 아래로 간다`);
-    console.log('스타일을 한 줄 넣는다 — @import "@pantoia/ui/styles.css";');
+    console.log(`${CONFIG} 을 만들었어요. 컴포넌트는 ${path} 에 저장돼요.`);
+    console.log('전역 CSS 에 아래 한 줄을 추가하세요.');
+    console.log('');
+    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');
+        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 config = readConfig();
+    if (!config)
+        fail(`${CONFIG} 이 없어요. 먼저 pantoia-ui init 을 실행하세요.`);
     const items = resolve(names);
-    const root = join(cwd(), config.path);
+    const asked = items.filter(item => names.includes(item.name));
     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) {
+    let skipped = false;
+    let first = true;
+    for (const item of asked) {
+        if (!first)
+            console.log('');
+        first = false;
         console.log(item.name);
-        await copy(item, root, force);
+        skipped = await copy(item, config.path, force) || skipped;
         config.components[item.name] = version();
     }
+    if (extra.length > 0) {
+        console.log('');
+        console.log('함께 필요한 파일도 추가했어요.');
+        for (const item of extra) {
+            skipped = await copy(item, config.path, force) || skipped;
+            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(' · ')}`);
+    if (skipped) {
+        console.log('');
+        console.log('덮어쓰려면 --force 옵션을 붙이세요.');
+    }
 }
 function commandList() {
+    console.log(`${'이름'.padEnd(16)}${'종류'.padEnd(7)}같이 추가되는 컴포넌트`);
     for (const item of registry()) {
-        const together = (item.registryDependencies ?? []).join(' · ');
-        console.log(`${item.name.padEnd(18)}${(item.meta?.layer ?? '').padEnd(9)}${together}`);
+        const layer = item.meta?.layer ?? (item.type === 'registry:lib' ? 'lib' : '');
+        const together = (item.registryDependencies ?? []).join(', ');
+        console.log(`${item.name.padEnd(18)}${layer.padEnd(9)}${together}`.trimEnd());
     }
 }
 function lcs(a, b) {
@@ -154,7 +181,7 @@ function difference(mine, theirs) {
 async function commandDiff(args) {
     const config = readConfig();
     if (!config)
-        fail(`${CONFIG} 이 없다 — pantoia-ui init 을 먼저 돌린다`);
+        fail(`${CONFIG} 이 없어요. 먼저 pantoia-ui add 로 컴포넌트를 추가하세요.`);
     const names = args.filter(arg => !arg.startsWith('--'));
     const wanted = names.length > 0 ? names : Object.keys(config.components);
     let changed = 0;
@@ -167,14 +194,16 @@ async function commandDiff(args) {
             const theirs = readFileSync(join(HERE, file.path), 'utf8');
             if (mine === theirs)
                 continue;
+            if (changed === 0)
+                console.log('- 는 내 파일, + 는 최신 파일이에요.');
             changed++;
-            console.log(`\n${file.path}`);
+            console.log(`\n${join(config.path, file.target ?? file.path)}`);
             for (const line of difference(mine.split('\n'), theirs.split('\n')))
                 console.log(line);
         }
     }
     if (changed === 0)
-        console.log('갈린 것이 없다');
+        console.log('달라진 파일이 없어요.');
 }
 const [command, ...args] = argv.slice(2);
 if (command === 'init')

package/drawer/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add drawer
 층     ui
-파일   drawer/index.tsx · drawer/index.module.css · drawer/AGENTS.md
+파일   drawer/index.tsx, drawer/index.module.css, drawer/AGENTS.md
 ```
 
 ## 부위
@@ -11,8 +11,8 @@
 | 이름 | props |
 |---|---|
 | `Drawer` | `DrawerProps` |
-| `DrawerTrigger` | — |
-| `DrawerClose` | — |
+| `DrawerTrigger` | - |
+| `DrawerClose` | - |
 | `DrawerContent` | `ComponentProps<typeof Dialog.Content>` |
 | `DrawerHeader` | `DrawerHeaderProps` |
 | `DrawerTitle` | `ComponentProps<typeof Dialog.Title>` |
@@ -51,11 +51,11 @@
 | `className` | `string` |  |
 | `children` | `ReactNode` |  |
 
-## 변형 — `drawerContent`
+## 변형 - `drawerContent`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `side` | `left` · `right` | — |
+| `side` | `left`, `right` | - |
 
 ## 함께 받는 것
 

package/drawer/index.tsx

@@ -117,7 +117,7 @@ export function DrawerClose({ children }: { children: ReactNode }) {
 }
 
 export const drawerContent = tv({
-  base: 'bg-float text-fg z-overlay fixed inset-y-0'
+  base: 'sheet text-foreground z-overlay fixed inset-y-0'
     + ' flex w-full flex-col gap-stack overflow-y-auto p-4 sm:w-120'
     + ' focus-visible:outline-none',
   variants: {
@@ -137,7 +137,7 @@ export function DrawerContent({
 
   return (
     <Dialog.Portal>
-      <Dialog.Overlay className="bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+      <Dialog.Overlay className="bg-background-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
 
       <Dialog.Content
         {...rest}
@@ -187,12 +187,16 @@ export function DrawerHeader({ lead, trail, className, children }: DrawerHeaderP
   )
 }
 
+const drawerTitle = tv({ base: 'text-section min-w-0' })
+
 export function DrawerTitle({ className, ...rest }: ComponentProps<typeof Dialog.Title>) {
-  return <Dialog.Title {...rest} className={tv({ base: 'text-section min-w-0' })({ className })} />
+  return <Dialog.Title {...rest} className={drawerTitle({ className })} />
 }
 
+const drawerDescription = tv({ base: 'text-prose text-foreground-muted' })
+
 export function DrawerDescription({ className, ...rest }: ComponentProps<typeof Dialog.Description>) {
   return (
-    <Dialog.Description {...rest} className={tv({ base: 'text-prose text-fg-muted' })({ className })} />
+    <Dialog.Description {...rest} className={drawerDescription({ className })} />
   )
 }

package/dropdown-menu/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add dropdown-menu
 층     ui
-파일   dropdown-menu/index.tsx · dropdown-menu/AGENTS.md
+파일   dropdown-menu/index.tsx, dropdown-menu/AGENTS.md
 ```
 
 ## 부위
@@ -11,16 +11,16 @@
 | 이름 | props |
 |---|---|
 | `DropdownMenu` | `DropdownMenuProps` |
-| `DropdownMenuTrigger` | — |
+| `DropdownMenuTrigger` | - |
 | `DropdownMenuContent` | `DropdownMenuContentProps` |
-| `DropdownMenuGroup` | — |
+| `DropdownMenuGroup` | - |
 | `DropdownMenuItem` | `DropdownMenuItemProps` |
-| `DropdownMenuCheckboxItem` | — |
-| `DropdownMenuRadioGroup` | — |
-| `DropdownMenuRadioItem` | — |
-| `DropdownMenuSeparator` | — |
-| `DropdownMenuSub` | — |
-| `DropdownMenuSubTrigger` | — |
+| `DropdownMenuCheckboxItem` | - |
+| `DropdownMenuRadioGroup` | - |
+| `DropdownMenuRadioItem` | - |
+| `DropdownMenuSeparator` | - |
+| `DropdownMenuSub` | - |
+| `DropdownMenuSubTrigger` | - |
 | `DropdownMenuSubContent` | `ComponentProps<typeof MenuPrimitive.SubContent>` |
 
 ### `DropdownMenuTrigger`
@@ -118,11 +118,11 @@
 | `lead` | `ReactNode` |  |
 | `trail` | `ReactNode` |  |
 
-## 변형 — `menuItem`
+## 변형 - `menuItem`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `color` | `neutral` · `danger` | `neutral` |
+| `color` | `neutral`, `danger` | `neutral` |
 
 ## 함께 받는 것
 
@@ -130,4 +130,4 @@
 
 ## npm 의존
 
-`lucide-react` · `radix-ui`
+`lucide-react`, `radix-ui`

package/dropdown-menu/index.tsx

@@ -14,15 +14,15 @@ export const menuItem = tv({
 
   variants: {
     color: {
-      neutral: 'text-fg data-highlighted:bg-hover data-disabled:text-fg-disabled',
-      danger: 'text-danger data-highlighted:bg-danger-weak data-disabled:text-danger/40',
+      neutral: 'text-foreground data-highlighted:bg-bg-neutral-hover data-disabled:text-foreground-disabled',
+      danger: 'text-fg-danger data-highlighted:bg-bg-danger-weak data-disabled:text-fg-danger/40',
     },
   },
 
   defaultVariants: { color: 'neutral' },
 })
 
-const PANEL = 'menu bg-float text-fg rounded-float shadow-s3 z-overlay'
+const PANEL = 'menu float text-foreground rounded-float z-overlay'
   + ' flex min-w-44 flex-col gap-px p-1'
   + ' open:animate-enter closed:animate-exit'
   + ' focus-visible:outline-none'
@@ -51,6 +51,8 @@ export interface DropdownMenuContentProps extends Omit<ComponentProps<typeof Men
   arrow?: boolean
 }
 
+const menuPanel = tv({ base: PANEL })
+
 export function DropdownMenuContent({
   align = 'start',
   arrow = true,
@@ -65,25 +67,33 @@ export function DropdownMenuContent({
         align={align}
         sideOffset={8}
         arrowPadding={16}
-        className={tv({ base: PANEL })({ className })}
+        className={menuPanel({ className })}
       >
         {children}
 
-        {arrow && <MenuPrimitive.Arrow className="fill-float" width={12} height={6} />}
+        {arrow && (
+          <MenuPrimitive.Arrow asChild width={12} height={6}>
+            <svg viewBox="0 0 12 6" preserveAspectRatio="none" className="fill-background-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>
+          </MenuPrimitive.Arrow>
+        )}
       </MenuPrimitive.Content>
     </MenuPrimitive.Portal>
   )
 }
 
+const menuGroup = tv({ base: 'flex flex-col gap-px' })
+
 export function DropdownMenuGroup({ label, className, children }: {
   label?: string
   className?: string
   children?: ReactNode
 }) {
   return (
-    <MenuPrimitive.Group className={tv({ base: 'flex flex-col gap-px' })({ className })}>
+    <MenuPrimitive.Group className={menuGroup({ className })}>
       {label && (
-        <MenuPrimitive.Label className="text-caption text-fg-subtle px-2 pb-1 pt-2">
+        <MenuPrimitive.Label className="text-caption text-foreground-subtle px-2 pb-1 pt-2">
           {label}
         </MenuPrimitive.Label>
       )}
@@ -161,7 +171,7 @@ export function DropdownMenuRadioItem({ value, disabled, className, children }:
     <MenuPrimitive.RadioItem value={value} disabled={disabled} className={menuItem({ className })}>
       <span className="menu-lead grid size-4 shrink-0 place-items-center">
         <MenuPrimitive.ItemIndicator>
-          <span className="bg-control-on in-disabled:bg-control-on-disabled size-2 rounded-full" />
+          <span className="bg-bg-neutral-solid in-disabled:bg-bg-neutral-solid-checked-disabled size-2 rounded-full" />
         </MenuPrimitive.ItemIndicator>
       </span>
 
@@ -170,8 +180,10 @@ export function DropdownMenuRadioItem({ value, disabled, className, children }:
   )
 }
 
+const menuSeparator = tv({ base: 'bg-line -mx-1 my-1 h-px' })
+
 export function DropdownMenuSeparator({ className }: { className?: string }) {
-  return <MenuPrimitive.Separator className={tv({ base: 'bg-line -mx-1 my-1 h-px' })({ className })} />
+  return <MenuPrimitive.Separator className={menuSeparator({ className })} />
 }
 
 export function DropdownMenuSub({ open, defaultOpen, onOpenChange, children }: {
@@ -203,7 +215,7 @@ export function DropdownMenuSubTrigger({ disabled, lead, className, children }:
 
       <span className="min-w-0 grow">{children}</span>
 
-      <ChevronRight className="text-fg-subtle size-4 shrink-0" />
+      <ChevronRight className="text-foreground-subtle size-4 shrink-0" />
     </MenuPrimitive.SubTrigger>
   )
 }
@@ -214,7 +226,7 @@ export function DropdownMenuSubContent({ className, children, ...rest }: Compone
       <MenuPrimitive.SubContent
         {...rest}
         sideOffset={4}
-        className={tv({ base: PANEL })({ className })}
+        className={menuPanel({ className })}
       >
         {children}
       </MenuPrimitive.SubContent>

package/field/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add field
 층     ui
-파일   field/index.tsx · field/AGENTS.md
+파일   field/index.tsx, field/AGENTS.md
 ```
 
 ## 부위
@@ -11,11 +11,11 @@
 | 이름 | props |
 |---|---|
 | `Field` | `FieldProps` |
-| `FieldLabel` | — |
-| `FieldHelp` | — |
+| `FieldLabel` | - |
+| `FieldHelp` | - |
 | `FieldError` | `FieldErrorProps` |
-| `FieldPending` | — |
-| `FieldSuccess` | — |
+| `FieldPending` | - |
+| `FieldSuccess` | - |
 
 ### `FieldLabel`
 
@@ -81,15 +81,15 @@
 | `className` | `string` |  |
 | `children` | `ReactNode` |  |
 
-## 변형 — `field`
+## 변형 - `field`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `layout` | `stack` · `inline` · `split` | `stack` |
+| `layout` | `stack`, `inline`, `split` | `stack` |
 
 ## 함께 받는 것
 
-`label` · `tv`
+`label`, `tv`
 
 ## npm 의존
 

package/field/index.tsx

@@ -66,6 +66,8 @@ export function Field({ invalid = false, layout, className, children }: FieldPro
   )
 }
 
+const fieldLabel = tv({ base: 'group-has-disabled:text-foreground-disabled' })
+
 export function FieldLabel({ className, children }: { className?: string, children?: ReactNode }) {
   const ctx = use(Context)
 
@@ -73,21 +75,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-foreground-subtle'
+    + ' group-has-disabled:text-foreground-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 +106,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,8 +118,7 @@ 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" />
       <span className="flex min-w-0 flex-col gap-0.5">
@@ -118,14 +128,18 @@ export function FieldError({ items, className, children }: FieldErrorProps) {
   )
 }
 
+const fieldPending = tv({
+  base: 'basis-full text-caption text-foreground-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" />
       <span className="min-w-0">{children}</span>
@@ -133,14 +147,18 @@ export function FieldPending({ className, children }: { className?: string, chil
   )
 }
 
+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" />
       <span className="min-w-0">{children}</span>

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

@@ -3,18 +3,18 @@ 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'
+  base: 'w-full rounded-r8 text-value text-foreground'
+    + ' placeholder:text-foreground-placeholder'
+    + ' invalid:ring-2 invalid:ring-line-danger'
+    + ' read-only:text-foreground-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-foreground-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-background-well',
+      well: 'bg-background-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-background-well text-foreground-muted text-micro rounded-mark 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-foreground' })
+
 export function Label({ className, ...rest }: ComponentProps<typeof LabelPrimitive.Root>) {
   return (
     <LabelPrimitive.Root
       {...rest}
-      className={tv({ base: 'text-label text-fg' })({ className })}
+      className={labelText({ className })}
     />
   )
 }