@pantoia/ui 0.2.0 → 0.3.0

package/accordion/AGENTS.md

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

package/accordion/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { ChevronDown } from 'lucide-react'
 import { Accordion as AccordionPrimitive } from 'radix-ui'
 import type { ReactNode } from 'react'
 
@@ -17,7 +16,7 @@ export interface AccordionProps {
   children?: ReactNode
 }
 
-const accordion = tv({ base: 'frame rounded-panel overflow-hidden divide-y divide-line' })
+const accordion = tv({ base: 'frame rounded-r12 overflow-hidden divide-y divide-line' })
 
 export function Accordion({ value, defaultValue, onValueChange, multiple, className, children }: AccordionProps) {
   const shared = {
@@ -61,10 +60,10 @@ export function AccordionItem({ value, disabled, className, children }: {
 }
 
 const accordionTrigger = tv({
-  base: 'text-label text-foreground flex h-11 w-full items-center'
+  base: 'text-label text-fg flex h-11 w-full items-center'
     + ' gap-stack border-b border-transparent px-4 transition-state'
     + ' press open:border-line enabled:hover:bg-bg-neutral-hover'
-    + ' disabled:text-foreground-disabled disabled:cursor-not-allowed'
+    + ' disabled:text-fg-disabled disabled:cursor-not-allowed'
     + ' focus-visible:outline-2 focus-visible:-outline-offset-2'
     + ' focus-visible:outline-line-focus-ring',
 })
@@ -77,16 +76,19 @@ export function AccordionTrigger({ className, children }: { className?: string,
       >
         <span className="flex min-w-0 grow items-center gap-tight">{children}</span>
 
-        <ChevronDown
-          className="text-foreground-subtle size-4 shrink-0 transition-transform open:rotate-180
+        <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 transition-transform open:rotate-180
                motion-reduce:transition-none"
-        />
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
   )
 }
 
-const accordionContent = tv({ base: 'bg-background-well text-caption text-foreground-muted px-4 py-3' })
+const accordionContent = tv({ base: 'bg-bg-well text-caption text-fg-muted px-4 py-3' })
 
 export function AccordionContent({ className, children }: { className?: string, children?: ReactNode }) {
   return (

package/alert-dialog/index.tsx

@@ -26,7 +26,7 @@ export function AlertDialogTrigger({ children }: { children: ReactNode }) {
 }
 
 const alertDialogContent = tv({
-  base: 'sheet text-foreground z-overlay fixed left-1/2 top-1/2'
+  base: 'sheet text-fg z-overlay fixed left-1/2 top-1/2'
     + ' w-full max-w-112 -translate-x-1/2 -translate-y-1/2'
     + ' rounded-r20 p-6 flex flex-col gap-stack overflow-y-auto'
     + ' open:animate-fade-in closed:animate-fade-out'
@@ -36,7 +36,7 @@ const alertDialogContent = tv({
 export function AlertDialogContent({ className, children, ...rest }: ComponentProps<typeof AlertDialogPrimitive.Content>) {
   return (
     <AlertDialogPrimitive.Portal>
-      <AlertDialogPrimitive.Overlay className="bg-background-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+      <AlertDialogPrimitive.Overlay className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
 
       <AlertDialogPrimitive.Content
         {...rest}
@@ -54,7 +54,7 @@ export function AlertDialogTitle({ className, ...rest }: ComponentProps<typeof A
   return <AlertDialogPrimitive.Title {...rest} className={alertDialogTitle({ className })} />
 }
 
-const alertDialogDescription = tv({ base: 'text-prose text-foreground-muted' })
+const alertDialogDescription = tv({ base: 'text-prose text-fg-muted' })
 
 export function AlertDialogDescription({ className, ...rest }: ComponentProps<typeof AlertDialogPrimitive.Description>) {
   return (

package/badge/index.tsx

@@ -8,7 +8,7 @@ export const badge = tv({
 
   variants: {
     color: {
-      neutral: 'bg-background-well text-foreground-muted',
+      neutral: 'bg-bg-well text-fg-muted',
       brand: 'bg-bg-brand-weak text-fg-brand-contrast',
       info: 'bg-bg-info-weak text-fg-info-contrast',
       success: 'bg-bg-success-weak text-fg-success-contrast',
@@ -16,7 +16,7 @@ export const badge = tv({
       danger: 'bg-bg-danger-weak text-fg-danger-contrast',
     },
     shape: {
-      square: 'rounded-mark',
+      square: 'rounded-r4',
       pill: 'rounded-full',
     },
   },

package/button/index.tsx

@@ -7,7 +7,7 @@ export const button = tv({
     + ' rounded-r8 text-label'
     + ' transition-state press press-shrink'
     + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
-    + ' disabled:text-foreground-disabled disabled:cursor-not-allowed',
+    + ' disabled:text-fg-disabled disabled:cursor-not-allowed',
 
   variants: {
     color: { brand: '', neutral: '', danger: '' },
@@ -46,13 +46,13 @@ export const button = tv({
         + ' enabled:hover:bg-bg-neutral-solid-hover'
         + ' disabled:bg-bg-neutral-solid/20' },
     { color: 'neutral', emphasis: 'weak',
-      class: 'bg-background-well text-foreground'
+      class: 'bg-bg-well text-fg'
         + ' enabled:hover:bg-bg-neutral-solid/10' },
     { color: 'neutral', emphasis: 'outline',
-      class: 'text-foreground ring-1 ring-inset ring-line-strong disabled:ring-line'
+      class: 'text-fg ring-1 ring-inset ring-line-strong disabled:ring-line'
         + ' enabled:hover:bg-bg-neutral-hover' },
     { color: 'neutral', emphasis: 'ghost',
-      class: 'text-foreground enabled:hover:bg-bg-neutral-hover' },
+      class: 'text-fg enabled:hover:bg-bg-neutral-hover' },
 
     { color: 'danger', emphasis: 'solid',
       class: 'bg-bg-danger-solid text-white'

package/callout/AGENTS.md

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

package/callout/index.tsx

@@ -1,11 +1,10 @@
-import { CircleCheck, CircleX, Info, TriangleAlert } from 'lucide-react'
 import type { ReactNode } from 'react'
 
 import { tv } from '../tv'
 
 export const callout = tv({
   slots: {
-    root: 'flex gap-stack rounded-panel border p-4 text-prose',
+    root: 'flex gap-stack rounded-r12 border p-4 text-prose',
     icon: 'flex shrink-0 mt-0.5 [&_svg]:size-5',
     title: 'font-bold',
     body: 'flex min-w-0 flex-1 flex-col gap-tight',
@@ -37,10 +36,33 @@ export const callout = tv({
 })
 
 const ICONS = {
-  info: Info,
-  success: CircleCheck,
-  warning: TriangleAlert,
-  danger: CircleX,
+  info: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 16v-4" />
+      <path d="M12 8h.01" />
+    </svg>
+  ),
+  success: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="12" cy="12" r="10" />
+      <path d="m16 9-5.5 5.5L8 12" />
+    </svg>
+  ),
+  warning: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+      <path d="M12 9v4" />
+      <path d="M12 17h.01" />
+    </svg>
+  ),
+  danger: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="12" cy="12" r="10" />
+      <path d="m15 9-6 6" />
+      <path d="m9 9 6 6" />
+    </svg>
+  ),
 } as const
 
 export interface CalloutProps {
@@ -53,12 +75,11 @@ export interface CalloutProps {
 
 export function Callout({ color, icon, title, className, children }: CalloutProps) {
   const ui = callout({ color })
-  const Fallback = ICONS[color ?? 'info']
 
   return (
     <div className={ui.root({ className })} role="alert">
       <span className={ui.icon()}>
-        {icon ?? <Fallback />}
+        {icon ?? ICONS[color ?? 'info']}
       </span>
       <div className={ui.body()}>
         {title && <span className={ui.title()}>{title}</span>}

package/checkbox/AGENTS.md

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

package/checkbox/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { Check, Minus } from 'lucide-react'
 import { Checkbox as CheckboxPrimitive } from 'radix-ui'
 import {
   createContext,
@@ -15,7 +14,7 @@ import {
 import { tv } from '../tv'
 
 export const checkbox = tv({
-  base: 'size-5 shrink-0 rounded-mark inline-flex items-center justify-center'
+  base: 'size-5 shrink-0 rounded-r4 inline-flex items-center justify-center'
     + ' bg-transparent ring-1 ring-inset ring-line-strong'
     + ' transition-state press press-shrink'
     + ' checked:ring-2'
@@ -146,7 +145,9 @@ export function Checkbox({
       className={checkbox({ color, className })}
     >
       <CheckboxPrimitive.Indicator className="text-fg-neutral-solid-contrast flex">
-        {indeterminate ? <Minus className="size-4" /> : <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">
+          {indeterminate ? <path d="M5 12h14" /> : <path d="M20 6 9 17l-5-5" />}
+        </svg>
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )

package/combobox/AGENTS.md

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

package/combobox/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { Check, ChevronDown, X } from 'lucide-react'
 import { Popover as PopoverPrimitive } from 'radix-ui'
 import {
   createContext,
@@ -164,7 +163,7 @@ export const comboboxAnchor = tv({
   variants: {
     surface: {
       bare: 'ring-1 ring-inset ring-line-strong',
-      well: 'bg-background-well',
+      well: 'bg-bg-well',
     },
     size: { sm: 'h-8', md: 'h-9', lg: 'h-10 [&_input]:text-t16' },
   },
@@ -193,9 +192,9 @@ export interface ComboboxInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
 }
 
 const comboboxInput = tv({
-  base: 'text-value text-foreground placeholder:text-foreground-placeholder'
+  base: 'text-value text-fg placeholder:text-fg-placeholder'
     + ' w-full min-w-0 bg-transparent outline-none'
-    + ' disabled:text-foreground-disabled disabled:cursor-not-allowed',
+    + ' disabled:text-fg-disabled disabled:cursor-not-allowed',
 })
 
 export function ComboboxInput({ value, onValueChange, className, ...rest }: ComboboxInputProps) {
@@ -250,8 +249,8 @@ export function ComboboxInput({ value, onValueChange, className, ...rest }: Comb
 }
 
 const comboboxTrigger = tv({
-  base: 'text-foreground-subtle grid size-5 shrink-0 place-items-center rounded-r8'
-    + ' transition-state press-shrink hover:text-foreground'
+  base: 'text-fg-subtle grid size-5 shrink-0 place-items-center rounded-r8'
+    + ' transition-state press-shrink hover:text-fg'
     + ' focus-visible:outline-2 focus-visible:outline-offset-2'
     + ' focus-visible:outline-line-focus-ring',
 })
@@ -273,16 +272,16 @@ export function ComboboxTrigger({ label = '목록 열기', disabled, className }
       onClick={() => ctx.setOpen(!ctx.open)}
       className={comboboxTrigger({ className })}
     >
-      <ChevronDown
-        className="size-4 transition-transform open:rotate-180 motion-reduce:transition-none"
-      />
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4 transition-transform open:rotate-180 motion-reduce:transition-none">
+        <path d="m6 9 6 6 6-6" />
+      </svg>
     </button>
   )
 }
 
 const comboboxCancel = tv({
-  base: 'text-foreground-subtle grid size-5 shrink-0 place-items-center rounded-full'
-    + ' transition-state press-shrink hover:text-foreground'
+  base: 'text-fg-subtle grid size-5 shrink-0 place-items-center rounded-full'
+    + ' transition-state press-shrink hover:text-fg'
     + ' focus-visible:outline-2 focus-visible:outline-offset-2'
     + ' focus-visible:outline-line-focus-ring',
 })
@@ -298,7 +297,10 @@ export function ComboboxCancel({ label = '지우기', className }: { label?: str
       onClick={() => ctx.setSearch('')}
       className={comboboxCancel({ className })}
     >
-      <X 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 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
     </button>
   )
 }
@@ -307,7 +309,7 @@ export type ComboboxContentProps =
   Omit<ComponentProps<typeof PopoverPrimitive.Content>, 'align' | 'sideOffset' | 'onOpenAutoFocus'>
 
 const comboboxContent = tv({
-  base: 'float text-foreground rounded-float z-overlay'
+  base: 'float text-fg rounded-r12 z-overlay'
     + ' w-(--radix-popover-trigger-width)'
     + ' open:animate-enter closed:animate-exit',
 })
@@ -365,7 +367,7 @@ const comboboxItem = tv({
   base: 'flex min-h-9 cursor-default items-center justify-between gap-stack'
     + ' shrink-0 rounded-r8 px-2 py-1 transition-state'
     + ' data-highlighted:bg-bg-neutral-hover data-highlighted:outline-none'
-    + ' data-disabled:text-foreground-disabled data-disabled:pointer-events-none',
+    + ' data-disabled:text-fg-disabled data-disabled:pointer-events-none',
 })
 
 export function ComboboxItem({ value, textValue, disabled = false, className, children }: ComboboxItemProps) {
@@ -393,15 +395,17 @@ export function ComboboxItem({ value, textValue, disabled = false, className, ch
       </span>
 
       {ctx.value === value && (
-        <span className="text-foreground-muted flex shrink-0">
-          <Check className="size-4" />
+        <span className="text-fg-muted flex shrink-0">
+          <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>
         </span>
       )}
     </div>
   )
 }
 
-const comboboxItemText = tv({ base: 'text-label text-foreground' })
+const comboboxItemText = tv({ base: 'text-label text-fg' })
 
 export function ComboboxItemText({ className, children }: { className?: string, children?: ReactNode }) {
   return (
@@ -411,7 +415,7 @@ export function ComboboxItemText({ className, children }: { className?: string,
   )
 }
 
-const comboboxItemDescription = tv({ base: 'text-caption text-foreground-subtle' })
+const comboboxItemDescription = tv({ base: 'text-caption text-fg-subtle' })
 
 export function ComboboxItemDescription({ className, children }: { className?: string, children?: ReactNode }) {
   return (
@@ -431,7 +435,7 @@ export function ComboboxGroup({ label, className, children }: {
   return (
     <div role="group" className={comboboxGroup({ className })}>
       {label && (
-        <span className="text-caption text-foreground-subtle px-2 pb-1 pt-2">
+        <span className="text-caption text-fg-subtle px-2 pb-1 pt-2">
           {label}
         </span>
       )}
@@ -440,7 +444,7 @@ export function ComboboxGroup({ label, className, children }: {
   )
 }
 
-const comboboxEmpty = tv({ base: 'text-caption text-foreground-subtle px-2 py-3 text-center' })
+const comboboxEmpty = tv({ base: 'text-caption text-fg-subtle px-2 py-3 text-center' })
 
 export function ComboboxEmpty({ className, children }: { className?: string, children?: ReactNode }) {
   const ctx = useCombobox()

package/command-palette/AGENTS.md

@@ -39,7 +39,3 @@
 ## 함께 받는 것
 
 `combobox`, `dialog`, `kbd`
-
-## npm 의존
-
-`lucide-react`

package/command-palette/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { Search } from 'lucide-react'
 import { useState } from 'react'
 
 import {
@@ -78,7 +77,10 @@ export function CommandPalette({
 
         <Combobox open onValueChange={pick}>
           <div className="border-line flex h-14 items-center gap-stack border-b px-4">
-            <Search className="text-foreground-subtle size-5 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-5 shrink-0">
+              <path d="m21 21-4.34-4.34" />
+              <circle cx="11" cy="11" r="8" />
+            </svg>
             <ComboboxInput
               value={search}
               onValueChange={setSearch}

package/dialog/index.tsx

@@ -6,7 +6,7 @@ import type { ComponentProps, ReactNode } from 'react'
 import { tv } from '../tv'
 
 export const dialog = tv({
-  base: 'sheet text-foreground z-overlay fixed flex flex-col gap-stack overflow-y-auto'
+  base: 'sheet text-fg z-overlay fixed flex flex-col gap-stack overflow-y-auto'
     + ' open:animate-fade-in closed:animate-fade-out focus-visible:outline-none',
 
   variants: {
@@ -52,7 +52,7 @@ export interface DialogContentProps extends ComponentProps<typeof DialogPrimitiv
 export function DialogContent({ size, className, children, ...rest }: DialogContentProps) {
   return (
     <DialogPrimitive.Portal>
-      <DialogPrimitive.Overlay className="bg-background-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+      <DialogPrimitive.Overlay className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
 
       <DialogPrimitive.Content {...rest} className={dialog({ size, className })}>
         {children}
@@ -67,7 +67,7 @@ export function DialogTitle({ className, ...rest }: ComponentProps<typeof Dialog
   return <DialogPrimitive.Title {...rest} className={dialogTitle({ className })} />
 }
 
-const dialogDescription = tv({ base: 'text-prose text-foreground-muted' })
+const dialogDescription = tv({ base: 'text-prose text-fg-muted' })
 
 export function DialogDescription({ className, ...rest }: ComponentProps<typeof DialogPrimitive.Description>) {
   return (