@pantoia/ui 0.1.0 → 0.3.0

package/radio-group/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add radio-group
 층     ui
-파일   radio-group/index.tsx · radio-group/AGENTS.md
+파일   radio-group/index.tsx, radio-group/AGENTS.md
 ```
 
 ## 부위
@@ -12,8 +12,8 @@
 |---|---|
 | `RadioGroup` | `RadioGroupProps` |
 | `RadioGroupItem` | `RadioGroupItemProps` |
-| `RadioGroupItemLabel` | — |
-| `RadioGroupItemDescription` | — |
+| `RadioGroupItemLabel` | - |
+| `RadioGroupItemDescription` | - |
 
 ### `RadioGroupItemLabel`
 
@@ -33,7 +33,7 @@
 
 ### `RadioColor`
 
-`'control' | 'info' | 'success' | 'warning' | 'danger'`
+`'neutral' | 'info' | 'success' | 'warning' | 'danger'`
 
 ### `RadioItemContext`
 
@@ -64,17 +64,17 @@
 | `className` | `string` |  |
 | `children` | `ReactNode` |  |
 
-## 변형 — `radioGroupItem`
+## 변형 - `radioGroupItem`
 
-슬롯 `root` · `control`
+슬롯 `root`, `control`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `color` | `control` · `info` · `success` · `warning` · `danger` | `control` |
+| `color` | `neutral`, `info`, `success`, `warning`, `danger` | `neutral` |
 
 ## 함께 받는 것
 
-`label` · `tv`
+`label`, `tv`
 
 ## npm 의존
 

package/radio-group/index.tsx

@@ -6,9 +6,9 @@ import { createContext, use, useId, type ReactNode } from 'react'
 import { Label } from '../label'
 import { tv } from '../tv'
 
-export type RadioColor = 'control' | 'info' | 'success' | 'warning' | 'danger'
+export type RadioColor = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 
-const ColorContext = createContext<RadioColor>('control')
+const ColorContext = createContext<RadioColor>('neutral')
 
 export interface RadioItemContext {
   id: string
@@ -25,23 +25,23 @@ export const radioGroupItem = tv({
       + ' bg-transparent transition-state press press-shrink'
       + ' inline-flex items-center justify-center'
       + ' checked:ring-2'
-      + ' in-invalid:ring-2 in-invalid:ring-danger'
-      + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
-      + ' disabled:ring-line disabled:bg-disabled disabled:cursor-not-allowed'
-      + ' checked:disabled:bg-control-on-disabled checked:disabled:ring-control-on-disabled',
+      + ' in-invalid:ring-2 in-invalid:ring-line-danger'
+      + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
+      + ' disabled:ring-line disabled:bg-bg-neutral-disabled disabled:cursor-not-allowed'
+      + ' checked:disabled:bg-bg-neutral-solid-checked-disabled checked:disabled:ring-transparent',
   },
 
   variants: {
     color: {
-      control: { control: 'checked:bg-control-on checked:ring-control-on' },
-      info: { control: 'checked:bg-info checked:ring-info' },
-      success: { control: 'checked:bg-success checked:ring-success' },
-      warning: { control: 'checked:bg-warning checked:ring-warning' },
-      danger: { control: 'checked:bg-danger checked:ring-danger' },
+      neutral: { control: 'checked:bg-bg-neutral-solid checked:ring-line-neutral-solid' },
+      info: { control: 'checked:bg-bg-info-solid checked:ring-line-info' },
+      success: { control: 'checked:bg-bg-success-solid checked:ring-line-success' },
+      warning: { control: 'checked:bg-bg-warning-solid checked:ring-line-warning' },
+      danger: { control: 'checked:bg-bg-danger-solid checked:ring-line-danger' },
     },
   },
 
-  defaultVariants: { color: 'control' },
+  defaultVariants: { color: 'neutral' },
 })
 
 export interface RadioGroupProps {
@@ -54,11 +54,13 @@ export interface RadioGroupProps {
   children?: ReactNode
 }
 
+const radioGroup = tv({ base: 'flex flex-col gap-3' })
+
 export function RadioGroup({
   value,
   defaultValue,
   onValueChange,
-  color = 'control',
+  color = 'neutral',
   disabled = false,
   className,
   children,
@@ -72,7 +74,7 @@ export function RadioGroup({
         defaultValue={defaultValue}
         onValueChange={onValueChange}
         disabled={disabled}
-        className={tv({ base: 'flex flex-col gap-3' })({ className })}
+        className={radioGroup({ className })}
       >
         {children}
       </RadioGroupPrimitive.Root>
@@ -103,7 +105,7 @@ export function RadioGroupItem({ value, disabled, className, children }: RadioGr
           aria-describedby={`${id}-description`}
           className={ui.control()}
         >
-          <RadioGroupPrimitive.Indicator className="text-fg-on-control size-2.5 rounded-full bg-current" />
+          <RadioGroupPrimitive.Indicator className="text-fg-neutral-solid-contrast size-2.5 rounded-full bg-current" />
         </RadioGroupPrimitive.Item>
 
         <div className="flex min-w-0 flex-col gap-0.5">
@@ -124,6 +126,8 @@ export function RadioGroupItemLabel({ className, children }: { className?: strin
   )
 }
 
+const radioGroupItemDescription = tv({ base: 'text-caption text-fg-subtle' })
+
 export function RadioGroupItemDescription({ className, children }: { className?: string, children?: ReactNode }) {
   const ctx = use(ItemContext)
 
@@ -131,7 +135,7 @@ export function RadioGroupItemDescription({ className, children }: { className?:
     <p
       id={ctx?.descriptionId}
       data-description
-      className={tv({ base: 'text-caption text-fg-subtle' })({ className })}
+      className={radioGroupItemDescription({ className })}
     >
       {children}
     </p>

package/registry.json

@@ -37,7 +37,6 @@
         }
       ],
       "dependencies": [
-        "lucide-react",
         "radix-ui"
       ],
       "registryDependencies": [
@@ -133,9 +132,6 @@
           "target": "callout/AGENTS.md"
         }
       ],
-      "dependencies": [
-        "lucide-react"
-      ],
       "registryDependencies": [
         "tv"
       ],
@@ -159,7 +155,6 @@
         }
       ],
       "dependencies": [
-        "lucide-react",
         "radix-ui"
       ],
       "registryDependencies": [
@@ -169,35 +164,6 @@
         "layer": "ui"
       }
     },
-    {
-      "name": "code-block",
-      "type": "registry:ui",
-      "title": "CodeBlock",
-      "files": [
-        {
-          "path": "code-block/index.tsx",
-          "type": "registry:ui"
-        },
-        {
-          "path": "code-block/index.module.css",
-          "type": "registry:ui"
-        },
-        {
-          "path": "code-block/AGENTS.md",
-          "type": "registry:file",
-          "target": "code-block/AGENTS.md"
-        }
-      ],
-      "dependencies": [
-        "lucide-react"
-      ],
-      "registryDependencies": [
-        "tv"
-      ],
-      "meta": {
-        "layer": "ui"
-      }
-    },
     {
       "name": "combobox",
       "type": "registry:ui",
@@ -214,14 +180,14 @@
         }
       ],
       "dependencies": [
-        "lucide-react",
         "radix-ui"
       ],
       "registryDependencies": [
         "tv"
       ],
       "meta": {
-        "layer": "ui"
+        "layer": "ui",
+        "radius": "rounded-r12"
       }
     },
     {
@@ -239,9 +205,6 @@
           "target": "command-palette/AGENTS.md"
         }
       ],
-      "dependencies": [
-        "lucide-react"
-      ],
       "registryDependencies": [
         "combobox",
         "dialog",
@@ -251,28 +214,6 @@
         "layer": "derived"
       }
     },
-    {
-      "name": "copy-button",
-      "type": "registry:ui",
-      "title": "CopyButton",
-      "files": [
-        {
-          "path": "copy-button/index.tsx",
-          "type": "registry:ui"
-        },
-        {
-          "path": "copy-button/AGENTS.md",
-          "type": "registry:file",
-          "target": "copy-button/AGENTS.md"
-        }
-      ],
-      "registryDependencies": [
-        "button"
-      ],
-      "meta": {
-        "layer": "derived"
-      }
-    },
     {
       "name": "dialog",
       "type": "registry:ui",
@@ -344,14 +285,14 @@
         }
       ],
       "dependencies": [
-        "lucide-react",
         "radix-ui"
       ],
       "registryDependencies": [
         "tv"
       ],
       "meta": {
-        "layer": "ui"
+        "layer": "ui",
+        "radius": "rounded-r12"
       }
     },
     {
@@ -369,9 +310,6 @@
           "target": "field/AGENTS.md"
         }
       ],
-      "dependencies": [
-        "lucide-react"
-      ],
       "registryDependencies": [
         "label",
         "tv"
@@ -464,9 +402,6 @@
           "target": "number-field/AGENTS.md"
         }
       ],
-      "dependencies": [
-        "lucide-react"
-      ],
       "registryDependencies": [
         "tv"
       ],
@@ -541,14 +476,14 @@
         }
       ],
       "dependencies": [
-        "lucide-react",
         "radix-ui"
       ],
       "registryDependencies": [
         "tv"
       ],
       "meta": {
-        "layer": "ui"
+        "layer": "ui",
+        "radius": "rounded-r12"
       }
     },
     {
@@ -667,6 +602,9 @@
       "dependencies": [
         "sonner"
       ],
+      "registryDependencies": [
+        "tv"
+      ],
       "meta": {
         "layer": "ui"
       }

package/select/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add select
 층     ui
-파일   select/index.tsx · select/AGENTS.md
+파일   select/index.tsx, select/AGENTS.md
 ```
 
 ## 부위
@@ -11,11 +11,11 @@
 | 이름 | props |
 |---|---|
 | `Select` | `SelectProps` |
-| `SelectGroup` | — |
-| `SelectItem` | — |
-| `SelectItemText` | — |
-| `SelectItemDescription` | — |
-| `SelectSeparator` | — |
+| `SelectGroup` | - |
+| `SelectItem` | - |
+| `SelectItemText` | - |
+| `SelectItemDescription` | - |
+| `SelectSeparator` | - |
 
 ### `SelectGroup`
 
@@ -74,12 +74,12 @@
 | `arrow` | `boolean` |  |
 | `children` | `ReactNode` |  |
 
-## 변형 — `selectTrigger`
+## 변형 - `selectTrigger`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `surface` | `bare` · `well` | `bare` |
-| `size` | `sm` · `md` · `lg` | `md` |
+| `surface` | `bare`, `well` | `bare` |
+| `size` | `sm`, `md`, `lg` | `md` |
 
 ## 함께 받는 것
 
@@ -87,4 +87,4 @@
 
 ## npm 의존
 
-`lucide-react` · `radix-ui`
+`radix-ui`

package/select/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { Check, ChevronDown, ChevronUp } from 'lucide-react'
 import { Select as SelectPrimitive } from 'radix-ui'
 import type { ComponentProps, ReactNode } from 'react'
 
@@ -10,15 +9,15 @@ export const selectTrigger = tv({
   base: 'flex w-full items-center justify-between gap-tight rounded-r8'
     + ' text-value text-fg'
     + ' transition-state'
-    + ' invalid:ring-2 invalid:ring-danger'
-    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
-    + ' disabled:bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed'
+    + ' invalid:ring-2 invalid:ring-line-danger'
+    + ' 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'
     + ' unset:text-fg-placeholder',
 
   variants: {
     surface: {
       bare: 'bg-transparent ring-1 ring-inset ring-line-strong',
-      well: 'bg-well',
+      well: 'bg-bg-well',
     },
     size: {
       sm: 'h-8 px-3',
@@ -73,45 +72,59 @@ export function Select({
           <SelectPrimitive.Value placeholder={placeholder} />
         </span>
         <SelectPrimitive.Icon className="text-fg-subtle">
-          <ChevronDown 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="m6 9 6 6 6-6" />
+          </svg>
         </SelectPrimitive.Icon>
       </SelectPrimitive.Trigger>
 
       <SelectPrimitive.Portal>
         <SelectPrimitive.Content
-          className="bg-float text-fg rounded-float shadow-s3 z-overlay
-               min-w-(--radix-select-trigger-width) p-1
+          className="float text-fg rounded-r12 z-overlay
+               min-w-(--radix-select-trigger-width) py-1
                open:animate-enter closed:animate-exit"
           position="popper"
           sideOffset={8}
           arrowPadding={16}
         >
           <SelectPrimitive.ScrollUpButton className="text-fg-subtle flex h-6 cursor-default items-center justify-center">
-            <ChevronUp 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="m18 15-6-6-6 6" />
+            </svg>
           </SelectPrimitive.ScrollUpButton>
 
-          <SelectPrimitive.Viewport className="flex flex-col gap-px">
+          <SelectPrimitive.Viewport className="flex flex-col gap-px px-1">
             {children}
           </SelectPrimitive.Viewport>
 
           <SelectPrimitive.ScrollDownButton className="text-fg-subtle flex h-6 cursor-default items-center justify-center">
-            <ChevronDown 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="m6 9 6 6 6-6" />
+            </svg>
           </SelectPrimitive.ScrollDownButton>
 
-          {arrow && <SelectPrimitive.Arrow className="fill-float" width={12} height={6} />}
+          {arrow && (
+            <SelectPrimitive.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>
+            </SelectPrimitive.Arrow>
+          )}
         </SelectPrimitive.Content>
       </SelectPrimitive.Portal>
     </SelectPrimitive.Root>
   )
 }
 
+const selectGroup = tv({ base: 'flex flex-col gap-px' })
+
 export function SelectGroup({ label, className, children }: {
   label?: string
   className?: string
   children?: ReactNode
 }) {
   return (
-    <SelectPrimitive.Group className={tv({ base: 'flex flex-col gap-px' })({ className })}>
+    <SelectPrimitive.Group className={selectGroup({ className })}>
       {label && (
         <SelectPrimitive.Label className="text-caption text-fg-subtle px-2 pb-1 pt-2">
           {label}
@@ -122,6 +135,13 @@ export function SelectGroup({ label, className, children }: {
   )
 }
 
+const selectItem = tv({
+  base: 'flex min-h-9 cursor-default items-center justify-between gap-stack'
+    + ' rounded-r8 px-2 py-1 transition-state'
+    + ' data-highlighted:bg-bg-neutral-hover data-highlighted:outline-none'
+    + ' data-disabled:text-fg-disabled data-disabled:pointer-events-none',
+})
+
 export function SelectItem({ value, disabled, className, children }: {
   value: string
   disabled?: boolean
@@ -132,38 +152,43 @@ export function SelectItem({ value, disabled, className, children }: {
     <SelectPrimitive.Item
       value={value}
       disabled={disabled}
-      className={tv({ base: 'flex min-h-9 cursor-default items-center justify-between gap-stack'
-        + ' rounded-r8 px-2 py-1 transition-state'
-        + ' data-highlighted:bg-hover data-highlighted:outline-none'
-        + ' data-disabled:text-fg-disabled data-disabled:pointer-events-none' })({ className })}
+      className={selectItem({ className })}
     >
       <span className="flex min-w-0 flex-col">
         {children}
       </span>
 
       <SelectPrimitive.ItemIndicator className="text-fg-muted flex shrink-0">
-        <Check 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="M20 6 9 17l-5-5" />
+        </svg>
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
   )
 }
 
+const selectItemText = tv({ base: 'text-label text-fg' })
+
 export function SelectItemText({ className, children }: { className?: string, children?: ReactNode }) {
   return (
-    <SelectPrimitive.ItemText className={tv({ base: 'text-label text-fg' })({ className })}>
+    <SelectPrimitive.ItemText className={selectItemText({ className })}>
       {children}
     </SelectPrimitive.ItemText>
   )
 }
 
+const selectItemDescription = tv({ base: 'text-caption text-fg-subtle' })
+
 export function SelectItemDescription({ className, children }: { className?: string, children?: ReactNode }) {
   return (
-    <span className={tv({ base: 'text-caption text-fg-subtle' })({ className })}>
+    <span className={selectItemDescription({ className })}>
       {children}
     </span>
   )
 }
 
+const selectSeparator = tv({ base: 'bg-line -mx-1 my-1 h-px' })
+
 export function SelectSeparator({ className }: { className?: string }) {
-  return <SelectPrimitive.Separator className={tv({ base: 'bg-line -mx-1 my-1 h-px' })({ className })} />
+  return <SelectPrimitive.Separator className={selectSeparator({ className })} />
 }

package/switch/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add switch
 층     ui
-파일   switch/index.tsx · switch/AGENTS.md
+파일   switch/index.tsx, switch/AGENTS.md
 ```
 
 ## 부위
@@ -20,13 +20,13 @@
 
 | 이름 | 타입 | 필수 |
 |---|---|---|
-| `color` | `'control' \| 'info' \| 'success' \| 'warning' \| 'danger'` |  |
+| `color` | `'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger'` |  |
 
-## 변형 — `uiSwitch`
+## 변형 - `uiSwitch`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `color` | `control` · `info` · `success` · `warning` · `danger` | `control` |
+| `color` | `neutral`, `info`, `success`, `warning`, `danger` | `neutral` |
 
 ## 함께 받는 것
 

package/switch/index.tsx

@@ -7,34 +7,34 @@ import { tv } from '../tv'
 
 export const uiSwitch = tv({
   base: 'h-6 w-10 shrink-0 rounded-full p-0.5 transition-state press press-shrink'
-    + ' bg-well ring-1 ring-inset ring-line-strong'
-    + ' invalid:ring-2 invalid:ring-danger'
-    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
-    + ' disabled:bg-disabled disabled:cursor-not-allowed'
-    + ' checked:disabled:bg-control-on-disabled checked:disabled:ring-control-on-disabled',
+    + ' bg-bg-well ring-1 ring-inset ring-line-strong'
+    + ' invalid:ring-2 invalid:ring-line-danger'
+    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
+    + ' disabled:bg-bg-neutral-disabled disabled:cursor-not-allowed'
+    + ' checked:disabled:bg-bg-neutral-solid-checked-disabled checked:disabled:ring-transparent',
 
   variants: {
     color: {
-      control: 'checked:bg-control-on checked:ring-control-on',
-      info: 'checked:bg-info checked:ring-info',
-      success: 'checked:bg-success checked:ring-success',
-      warning: 'checked:bg-warning checked:ring-warning',
-      danger: 'checked:bg-danger checked:ring-danger',
+      neutral: 'checked:bg-bg-neutral-solid checked:ring-line-neutral-solid',
+      info: 'checked:bg-bg-info-solid checked:ring-line-info',
+      success: 'checked:bg-bg-success-solid checked:ring-line-success',
+      warning: 'checked:bg-bg-warning-solid checked:ring-line-warning',
+      danger: 'checked:bg-bg-danger-solid checked:ring-line-danger',
     },
   },
 
-  defaultVariants: { color: 'control' },
+  defaultVariants: { color: 'neutral' },
 })
 
 export interface SwitchProps extends ComponentProps<typeof SwitchPrimitive.Root> {
-  color?: 'control' | 'info' | 'success' | 'warning' | 'danger'
+  color?: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 }
 
 export function Switch({ color, className, ...rest }: SwitchProps) {
   return (
     <SwitchPrimitive.Root {...rest} className={uiSwitch({ color, className })}>
       <SwitchPrimitive.Thumb
-        className="bg-float block size-5 rounded-full checked:translate-x-4
+        className="bg-bg-neutral-knob block size-5 rounded-full checked:translate-x-4
              transition-transform ease-state motion-reduce:transition-none"
       />
     </SwitchPrimitive.Root>

package/table/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add table
 층     ui
-파일   table/index.tsx · table/AGENTS.md
+파일   table/index.tsx, table/AGENTS.md
 ```
 
 ## 부위
@@ -11,10 +11,10 @@
 | 이름 | props |
 |---|---|
 | `Table` | `TableProps` |
-| `TableHeader` | — |
-| `TableHeadCell` | — |
-| `TableBody` | — |
-| `TableRow` | — |
+| `TableHeader` | - |
+| `TableHeadCell` | - |
+| `TableBody` | - |
+| `TableRow` | - |
 | `TableCell` | `TableCellProps` |
 
 ### `TableHeader`
@@ -65,17 +65,17 @@
 | `mono` | `boolean` |  |
 | `clamp` | `boolean` |  |
 
-## 변형 — `table`
+## 변형 - `table`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `fixed` | `true` | — |
+| `fixed` | `true` | - |
 
-## 변형 — `tableCell`
+## 변형 - `tableCell`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `mono` | `true` · `false` | `false` |
+| `mono` | `true`, `false` | `false` |
 
 ## 함께 받는 것