@pantoia/ui 0.1.0 → 0.2.0

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,15 +34,15 @@
 | `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` | - |
 
 ## 함께 받는 것
 

package/number-field/index.tsx

@@ -9,21 +9,22 @@ 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',
-    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',
-    input: 'text-value text-fg w-full min-w-0 bg-transparent text-center outline-none'
-      + ' disabled:text-fg-disabled disabled:cursor-not-allowed',
+      + ' has-focus-visible:outline-line-focus-ring',
+    step: 'text-foreground-muted grid shrink-0 place-items-center rounded-r8'
+      + ' transition-state press press-shrink enabled:not-aria-disabled:hover:bg-bg-neutral-hover'
+      + ' disabled:text-foreground-disabled disabled:cursor-not-allowed'
+      + ' aria-disabled:text-foreground-disabled aria-disabled:cursor-not-allowed',
+    input: 'text-value text-foreground w-full min-w-0 bg-transparent text-center outline-none'
+      + ' disabled:text-foreground-disabled disabled:cursor-not-allowed',
   },
 
   variants: {
     surface: {
       bare: { root: 'bg-transparent ring-1 ring-inset ring-line-strong' },
-      well: { root: 'bg-well' },
+      well: { root: 'bg-background-well' },
     },
     size: {
       sm: { root: 'h-8', step: 'size-8' },
@@ -31,7 +32,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-background-well', input: 'text-foreground-muted' },
     },
   },
 
@@ -55,8 +56,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 +72,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 +136,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 +184,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}
@@ -212,7 +217,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}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pantoia/ui",
-  "version": "0.1.0",
-  "description": "Pantoia 디자인 시스템 — 소스를 복사해 가는 컴포넌트 스물여덟",
+  "version": "0.2.0",
+  "description": "Pantoia Design System",
   "homepage": "https://design.pantoia.com",
   "repository": {
     "type": "git",
@@ -43,7 +43,6 @@
   },
   "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": {
@@ -60,14 +59,12 @@
     "tailwindcss": "^4.3.3"
   },
   "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/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-foreground rounded-float 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-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>
+          </PopoverPrimitive.Arrow>
+        )}
       </PopoverPrimitive.Content>
     </PopoverPrimitive.Portal>
   )

package/press.css

@@ -1,5 +1,5 @@
-:root, .light { --pressed-dim: rgba(0,23,51,0.12); }
-.dark         { --pressed-dim: rgba(209,209,253,0.14); }
+:root, .light { --pds-pressed-dim: rgba(0,23,51,0.12); }
+.dark         { --pds-pressed-dim: rgba(209,209,253,0.14); }
 
 :root { --scale-press: 0.97; }
 
@@ -15,22 +15,22 @@
     position: absolute;
     inset: 0;
     border-radius: inherit;
-    background: var(--pressed-dim);
+    background: var(--pds-pressed-dim);
     opacity: 0;
     pointer-events: none;
     transition: opacity var(--dur-state) var(--ease-state);
   }
 
-  &:active:not(:disabled)::after,
-  &[data-pressed]:not(:disabled)::after {
+  &:active:not(:disabled):not([aria-disabled="true"])::after,
+  &[data-pressed]:not(:disabled):not([aria-disabled="true"])::after {
     opacity: 1;
     transition-duration: 0s;
   }
 }
 
 @utility press-shrink {
-  &:active:not(:disabled),
-  &[data-pressed]:not(:disabled) {
+  &:active:not(:disabled):not([aria-disabled="true"]),
+  &[data-pressed]:not(:disabled):not([aria-disabled="true"]) {
     scale: var(--scale-press);
     transition-duration: 0s;
   }

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-foreground-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

@@ -169,35 +169,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",
@@ -251,28 +222,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",
@@ -667,6 +616,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`
+`lucide-react`, `radix-ui`