@pantoia/ui 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,17 +1,45 @@
 #!/usr/bin/env node
+import { spawnSync } from 'node:child_process';
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
-import { argv, cwd, exit, stdin, stdout } from 'node:process';
+import { argv, cwd, exit, platform, stdin, stdout } from 'node:process';
 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 STYLES = '@import "@pantoia/ui/tailwind.css";';
+const TAILWIND = /^@import\s+["']tailwindcss["'][^;]*;\s*$/;
+const IMPORTED = /@import\s+["']@pantoia\/ui\//;
+const FONTS = ['pretendard@^1.3.9', '@fontsource/jetbrains-mono@^5.3.0'];
+const FONT_IMPORT = '@import "pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css";';
+const MONO = '"JetBrains Mono"';
+const MONO_FACE = [
+    '@font-face {',
+    `  font-family: ${MONO};`,
+    '  src: url("@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff2") format("woff2");',
+    '  font-weight: 400;',
+    '  font-display: swap;',
+    '  unicode-range: U+0000-00FF, U+2000-206F;',
+    '}',
+];
+const MANAGERS = [
+    { lock: 'pnpm-lock.yaml', command: 'pnpm', verb: 'add' },
+    { lock: 'yarn.lock', command: 'yarn', verb: 'add' },
+    { lock: 'bun.lock', command: 'bun', verb: 'add' },
+    { lock: 'bun.lockb', command: 'bun', verb: 'add' },
+    { lock: 'package-lock.json', command: 'npm', verb: 'install' },
+];
+const LAYOUTS = [
+    { css: 'app/globals.css', path: 'components/ui' },
+    { css: 'src/app/globals.css', path: 'src/components/ui' },
+    { css: 'app/app.css', path: 'app/components/ui' },
+    { css: 'src/index.css', path: 'src/components/ui' },
+];
+const USAGE = `npx @pantoia/ui <명령어>
 
-  init [--path <경로>]      컴포넌트를 저장할 위치를 정해요
-  add <이름...> [--force]   컴포넌트를 추가해요
-  list                      추가할 수 있는 컴포넌트를 확인해요
-  diff [이름]               추가한 파일과 최신 파일을 비교해요`;
+  init [--path <경로>] [--css <경로>]   컴포넌트를 저장할 위치와 전역 CSS 파일을 정해요
+  add <이름...> [--force]              컴포넌트를 추가해요
+  list                                 추가할 수 있는 컴포넌트를 확인해요
+  diff [이름]                          추가한 파일과 최신 파일을 비교해요`;
 function fail(message) {
     console.error(message);
     exit(1);
@@ -27,7 +55,7 @@ function registry() {
 function find(name) {
     const item = registry().find(candidate => candidate.name === name);
     if (!item)
-        fail(`목록에 없는 컴포넌트예요: ${name}\npantoia-ui list 로 이름을 확인하세요.`);
+        fail(`목록에 없는 컴포넌트예요: ${name}\nnpx @pantoia/ui list로 이름을 확인하세요.`);
     return item;
 }
 function configPath() {
@@ -67,13 +95,13 @@ async function ask(question, fallback) {
     rl.close();
     return answer.trim() || fallback;
 }
-async function confirm(question) {
+async function confirm(question, fallback = false) {
     if (!stdin.isTTY)
-        return false;
+        return fallback;
     const rl = createInterface({ input: stdin, output: stdout });
-    const answer = await rl.question(`${question} (y/N) `);
+    const answer = (await rl.question(`${question} ${fallback ? '(Y/n)' : '(y/N)'} `)).trim().toLowerCase();
     rl.close();
-    return answer.trim().toLowerCase() === 'y';
+    return answer === '' ? fallback : answer === 'y';
 }
 async function copy(item, base, force) {
     let skipped = false;
@@ -94,26 +122,126 @@ async function copy(item, base, force) {
     }
     return skipped;
 }
-async function commandInit(args) {
-    const existing = readConfig();
-    if (existing)
-        fail(`${CONFIG} 이 이미 있어요.`);
-    const path = option(args, '--path')
-        ?? await ask('컴포넌트를 저장할 위치를 입력하세요.', DEFAULT_PATH);
-    writeConfig({ path, components: {} });
-    console.log(`${CONFIG} 을 만들었어요. 컴포넌트는 ${path} 에 저장돼요.`);
-    console.log('전역 CSS 에 아래 한 줄을 추가하세요.');
+function detect() {
+    return LAYOUTS.find(layout => existsSync(join(cwd(), layout.css))) ?? LAYOUTS[0];
+}
+const packageName = (spec) => spec.slice(0, spec.lastIndexOf('@'));
+function installed() {
+    const file = join(cwd(), 'package.json');
+    if (!existsSync(file))
+        return new Set();
+    const pkg = JSON.parse(readFileSync(file, 'utf8'));
+    return new Set(Object.keys({ ...pkg.dependencies, ...pkg.devDependencies }));
+}
+async function installPackages() {
+    const have = installed();
+    const specs = have.has('@pantoia/ui') ? [] : [`@pantoia/ui@${version()}`];
+    let fonts = FONTS.every(spec => have.has(packageName(spec)));
+    if (!fonts) {
+        console.log('');
+        fonts = await confirm(`글꼴 패키지를 설치할까요? ${FONTS.map(packageName).join(', ')}`, true);
+        if (fonts)
+            specs.push(...FONTS);
+    }
+    const manager = MANAGERS.find(m => existsSync(join(cwd(), m.lock))) ?? MANAGERS.at(-1);
+    if (!fonts && !FONTS.every(spec => have.has(packageName(spec)))) {
+        console.log('글꼴을 설치하지 않았어요. 쓰려면 이 명령으로 설치하세요.');
+        console.log('');
+        console.log(`  ${[manager.command, manager.verb, ...FONTS].join(' ')}`);
+    }
+    if (specs.length === 0)
+        return fonts;
+    const done = spawnSync(manager.command, [manager.verb, ...specs], { stdio: 'inherit', shell: platform === 'win32' });
+    if (done.status === 0)
+        return fonts;
+    console.log('패키지를 설치하지 못했어요. 이 명령으로 직접 설치하세요.');
+    console.log('');
+    console.log(`  ${[manager.command, manager.verb, ...specs].join(' ')}`);
+    return false;
+}
+function additions(text, fonts) {
+    const head = IMPORTED.test(text) ? [] : [STYLES];
+    if (fonts && !text.includes(FONT_IMPORT))
+        head.push(FONT_IMPORT);
+    const tail = fonts && !text.includes(MONO) ? MONO_FACE : [];
+    return { head, tail };
+}
+async function importStyles(css, head, tail) {
+    const file = join(cwd(), css);
+    const text = readFileSync(file, 'utf8');
+    const ending = text.endsWith('\n') ? '\n' : '';
+    const lines = text.slice(0, text.length - ending.length).split('\n');
+    const ours = lines.findIndex(line => IMPORTED.test(line));
+    const at = ours === -1 ? lines.findIndex(line => TAILWIND.test(line)) : ours;
     console.log('');
-    console.log('  @import "@pantoia/ui/styles.css";');
+    console.log(`${css}를 이렇게 수정해요.`);
+    console.log('');
+    for (const line of lines.slice(Math.max(0, at - 2), at + 1))
+        console.log(`  ${line}`);
+    for (const line of head)
+        console.log(`+ ${line}`);
+    for (const line of lines.slice(at + 1, at + 3))
+        console.log(`  ${line}`);
+    if (tail.length > 0) {
+        if (lines.length > at + 3)
+            console.log('  ...');
+        for (const line of tail)
+            console.log(`+ ${line}`);
+    }
+    console.log('');
+    if (!await confirm('수정할까요?', true))
+        return false;
+    const body = [...lines.slice(0, at + 1), ...head, ...lines.slice(at + 1)];
+    if (tail.length > 0)
+        body.push('', ...tail);
+    writeFileSync(file, body.join('\n') + ending);
+    return true;
+}
+async function commandInit(args) {
+    if (readConfig())
+        fail(`${CONFIG}이 이미 있어요.`);
+    const detected = detect();
+    const path = option(args, '--path') ?? await ask('컴포넌트를 저장할 위치를 입력하세요.', detected.path);
+    const css = option(args, '--css') ?? await ask('전역 CSS 파일 위치를 입력하세요.', detected.css);
+    if (!existsSync(join(cwd(), css)))
+        fail(`${css} 파일이 없어요. 전역 CSS 파일 위치를 확인하고 다시 실행하세요.`);
+    const text = readFileSync(join(cwd(), css), 'utf8');
+    if (!IMPORTED.test(text) && !text.split('\n').some(line => TAILWIND.test(line)))
+        fail(`${css}에 @import "tailwindcss";가 없어요. Tailwind CSS를 먼저 설치하세요.`);
+    const fonts = await installPackages();
+    const { head, tail } = additions(text, fonts);
+    const needed = head.length > 0 || tail.length > 0;
+    const added = needed && await importStyles(css, head, tail);
+    writeConfig({ path, css, components: {} });
+    if (stdin.isTTY)
+        console.log('');
+    console.log(`${CONFIG}을 만들었어요. 컴포넌트는 ${path}에 저장돼요.`);
+    if (!needed)
+        console.log(`${css}에 스타일이 이미 있어요.`);
+    else if (added)
+        console.log(`${css}에 스타일을 추가했어요.`);
+    else {
+        console.log(`${css}를 수정하지 않았어요. @import "tailwindcss"; 바로 아래에 이 줄을 직접 추가하세요.`);
+        console.log('');
+        for (const line of head)
+            console.log(`  ${line}`);
+        if (tail.length > 0) {
+            console.log('');
+            console.log('파일 끝에는 이 블록을 추가하세요.');
+            console.log('');
+            for (const line of tail)
+                console.log(`  ${line}`);
+        }
+    }
 }
 async function commandAdd(args) {
     const names = args.filter(arg => !arg.startsWith('--'));
     if (names.length === 0)
-        fail('추가할 컴포넌트 이름을 입력하세요. 예) pantoia-ui add button');
+        fail('추가할 컴포넌트 이름을 입력하세요. 예) npx @pantoia/ui add button');
     const force = args.includes('--force');
     const config = readConfig();
     if (!config)
-        fail(`${CONFIG} 이 없어요. 먼저 pantoia-ui init 을 실행하세요.`);
+        fail(`${CONFIG}이 없어요. 먼저 npx @pantoia/ui init을 실행하세요.`);
     const items = resolve(names);
     const asked = items.filter(item => names.includes(item.name));
     const extra = items.filter(item => !names.includes(item.name));
@@ -181,7 +309,7 @@ function difference(mine, theirs) {
 async function commandDiff(args) {
     const config = readConfig();
     if (!config)
-        fail(`${CONFIG} 이 없어요. 먼저 pantoia-ui add 로 컴포넌트를 추가하세요.`);
+        fail(`${CONFIG}이 없어요. 먼저 npx @pantoia/ui add로 컴포넌트를 추가하세요.`);
     const names = args.filter(arg => !arg.startsWith('--'));
     const wanted = names.length > 0 ? names : Object.keys(config.components);
     let changed = 0;

package/drawer/index.tsx

@@ -117,7 +117,7 @@ export function DrawerClose({ children }: { children: ReactNode }) {
 }
 
 export const drawerContent = tv({
-  base: 'sheet text-foreground z-overlay fixed inset-y-0'
+  base: 'sheet text-fg 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-background-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+      <Dialog.Overlay className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
 
       <Dialog.Content
         {...rest}
@@ -193,7 +193,7 @@ export function DrawerTitle({ className, ...rest }: ComponentProps<typeof Dialog
   return <Dialog.Title {...rest} className={drawerTitle({ className })} />
 }
 
-const drawerDescription = tv({ base: 'text-prose text-foreground-muted' })
+const drawerDescription = tv({ base: 'text-prose text-fg-muted' })
 
 export function DrawerDescription({ className, ...rest }: ComponentProps<typeof Dialog.Description>) {
   return (

package/dropdown-menu/AGENTS.md

@@ -130,4 +130,4 @@
 
 ## npm 의존
 
-`lucide-react`, `radix-ui`
+`radix-ui`

package/dropdown-menu/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { Check, ChevronRight } from 'lucide-react'
 import { DropdownMenu as MenuPrimitive } from 'radix-ui'
 import type { ComponentProps, ReactNode } from 'react'
 
@@ -14,7 +13,7 @@ export const menuItem = tv({
 
   variants: {
     color: {
-      neutral: 'text-foreground data-highlighted:bg-bg-neutral-hover data-disabled:text-foreground-disabled',
+      neutral: 'text-fg data-highlighted:bg-bg-neutral-hover data-disabled:text-fg-disabled',
       danger: 'text-fg-danger data-highlighted:bg-bg-danger-weak data-disabled:text-fg-danger/40',
     },
   },
@@ -22,7 +21,7 @@ export const menuItem = tv({
   defaultVariants: { color: 'neutral' },
 })
 
-const PANEL = 'menu float text-foreground rounded-float z-overlay'
+const PANEL = 'menu float text-fg rounded-r12 z-overlay'
   + ' flex min-w-44 flex-col gap-px p-1'
   + ' open:animate-enter closed:animate-exit'
   + ' focus-visible:outline-none'
@@ -73,7 +72,7 @@ export function DropdownMenuContent({
 
         {arrow && (
           <MenuPrimitive.Arrow asChild width={12} height={6}>
-            <svg viewBox="0 0 12 6" preserveAspectRatio="none" className="fill-background-panel -translate-y-px">
+            <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>
           </MenuPrimitive.Arrow>
@@ -93,7 +92,7 @@ export function DropdownMenuGroup({ label, className, children }: {
   return (
     <MenuPrimitive.Group className={menuGroup({ className })}>
       {label && (
-        <MenuPrimitive.Label className="text-caption text-foreground-subtle px-2 pb-1 pt-2">
+        <MenuPrimitive.Label className="text-caption text-fg-subtle px-2 pb-1 pt-2">
           {label}
         </MenuPrimitive.Label>
       )}
@@ -140,7 +139,9 @@ export function DropdownMenuCheckboxItem({ checked, onCheckedChange, disabled, c
     >
       <span className="menu-lead grid size-4 shrink-0 place-items-center">
         <MenuPrimitive.ItemIndicator>
-          <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>
         </MenuPrimitive.ItemIndicator>
       </span>
 
@@ -215,7 +216,9 @@ export function DropdownMenuSubTrigger({ disabled, lead, className, children }:
 
       <span className="min-w-0 grow">{children}</span>
 
-      <ChevronRight className="text-foreground-subtle size-4 shrink-0" />
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-fg-subtle size-4 shrink-0">
+        <path d="m9 18 6-6-6-6" />
+      </svg>
     </MenuPrimitive.SubTrigger>
   )
 }

package/field/AGENTS.md

@@ -90,7 +90,3 @@
 ## 함께 받는 것
 
 `label`, `tv`
-
-## npm 의존
-
-`lucide-react`

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,7 +65,7 @@ export function Field({ invalid = false, layout, className, children }: FieldPro
   )
 }
 
-const fieldLabel = tv({ base: 'group-has-disabled:text-foreground-disabled' })
+const fieldLabel = tv({ base: 'group-has-disabled:text-fg-disabled' })
 
 export function FieldLabel({ className, children }: { className?: string, children?: ReactNode }) {
   const ctx = use(Context)
@@ -83,8 +82,8 @@ export function FieldLabel({ className, children }: { className?: string, childr
 }
 
 const fieldHelp = tv({
-  base: 'basis-full text-caption text-foreground-subtle'
-    + ' group-has-disabled:text-foreground-disabled',
+  base: 'basis-full text-caption text-fg-subtle'
+    + ' group-has-disabled:text-fg-disabled',
 })
 
 export function FieldHelp({ className, children }: { className?: string, children?: ReactNode }) {
@@ -120,7 +119,11 @@ export function FieldError({ items, className, children }: FieldErrorProps) {
       id={ctx?.messageId}
       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>
@@ -129,7 +132,7 @@ export function FieldError({ items, className, children }: FieldErrorProps) {
 }
 
 const fieldPending = tv({
-  base: 'basis-full text-caption text-foreground-subtle'
+  base: 'basis-full text-caption text-fg-subtle'
     + ' flex items-start gap-tight',
 })
 
@@ -141,7 +144,9 @@ export function FieldPending({ className, children }: { className?: string, chil
       id={ctx?.messageId}
       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>
   )
@@ -160,7 +165,10 @@ export function FieldSuccess({ className, children }: { className?: string, chil
       id={ctx?.messageId}
       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/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-foreground'
-    + ' placeholder:text-foreground-placeholder'
+  base: 'w-full rounded-r8 text-value text-fg'
+    + ' placeholder:text-fg-placeholder'
     + ' invalid:ring-2 invalid:ring-line-danger'
-    + ' read-only:text-foreground-muted'
+    + ' read-only:text-fg-muted'
     + ' transition-state'
     + ' 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',
+    + ' 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-background-well',
-      well: 'bg-background-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/index.tsx

@@ -3,7 +3,7 @@ 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'
+  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',
 })
 

package/label/index.tsx

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

package/number-field/AGENTS.md

@@ -47,7 +47,3 @@
 ## 함께 받는 것
 
 `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'
@@ -13,18 +12,18 @@ export const numberField = tv({
       + ' 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-line-focus-ring',
-    step: 'text-foreground-muted grid shrink-0 place-items-center rounded-r8'
+    step: 'text-fg-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',
+      + ' 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',
   },
 
   variants: {
     surface: {
       bare: { root: 'bg-transparent ring-1 ring-inset ring-line-strong' },
-      well: { root: 'bg-background-well' },
+      well: { root: 'bg-bg-well' },
     },
     size: {
       sm: { root: 'h-8', step: 'size-8' },
@@ -32,7 +31,7 @@ export const numberField = tv({
       lg: { root: 'h-10', step: 'size-10', input: 'text-t16' },
     },
     readonly: {
-      true: { root: 'bg-background-well', input: 'text-foreground-muted' },
+      true: { root: 'bg-bg-well', input: 'text-fg-muted' },
     },
   },
 
@@ -193,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
@@ -226,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,6 +1,6 @@
 {
   "name": "@pantoia/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Pantoia Design System",
   "homepage": "https://design.pantoia.com",
   "repository": {
@@ -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,16 +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",
     "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"
@@ -56,7 +57,7 @@
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19",
-    "tailwindcss": "^4.3.3"
+    "tailwindcss": "^4.0.0"
   },
   "devDependencies": {
     "@pantoia/typescript-config": "*",