@pantoia/ui 0.1.0 → 0.3.0

package/table/index.tsx

@@ -20,6 +20,8 @@ export interface TableProps {
   children?: ReactNode
 }
 
+const tableFrame = tv({ base: 'frame rounded-r12 overflow-hidden' })
+
 export function Table({ label, fixed = false, className, children }: TableProps) {
   const [box, setBox] = useState<HTMLDivElement | null>(null)
 
@@ -39,13 +41,13 @@ export function Table({ label, fixed = false, className, children }: TableProps)
 
   return (
     <FixedContext value={fixed}>
-      <div className={tv({ base: 'rounded-panel border border-line overflow-hidden' })({ className })}>
+      <div className={tableFrame({ className })}>
         <div
           ref={setBox}
           tabIndex={overflows ? 0 : undefined}
           aria-label={overflows ? label : undefined}
           role={overflows ? 'region' : undefined}
-          className="overflow-x-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"
+          className="overflow-x-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-line-focus-ring"
         >
           <table className={table({ fixed })}>
             <caption className="sr-only">{label}</caption>
@@ -57,21 +59,25 @@ export function Table({ label, fixed = false, className, children }: TableProps)
   )
 }
 
+const tableHeader = tv({ base: 'bg-bg-well border-b border-line' })
+
 export function TableHeader({ className, children }: { className?: string, children?: ReactNode }) {
   return (
     <thead>
-      <tr className={tv({ base: 'bg-well border-b border-line' })({ className })}>
+      <tr className={tableHeader({ className })}>
         {children}
       </tr>
     </thead>
   )
 }
 
+const tableHeadCell = tv({ base: 'text-caption text-fg-muted h-9 px-4 text-left whitespace-nowrap' })
+
 export function TableHeadCell({ className, children }: { className?: string, children?: ReactNode }) {
   return (
     <th
       scope="col"
-      className={tv({ base: 'text-caption text-fg-muted h-9 px-4 text-left whitespace-nowrap' })({ className })}
+      className={tableHeadCell({ className })}
     >
       {children}
     </th>
@@ -82,11 +88,15 @@ export function TableBody({ className, children }: { className?: string, childre
   return <tbody className={className}>{children}</tbody>
 }
 
+const tableRow = tv({
+  base: 'border-b border-line last:border-b-0 transition-state'
+    + ' hover:bg-bg-neutral-hover',
+})
+
 export function TableRow({ className, children }: { className?: string, children?: ReactNode }) {
   return (
     <tr
-      className={tv({ base: 'border-b border-line last:border-b-0 transition-state'
-        + ' hover:bg-hover' })({ className })}
+      className={tableRow({ className })}
     >
       {children}
     </tr>

package/tabs/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add tabs
 층     ui
-파일   tabs/index.tsx · tabs/index.module.css · tabs/AGENTS.md
+파일   tabs/index.tsx, tabs/index.module.css, tabs/AGENTS.md
 ```
 
 ## 부위
@@ -11,9 +11,9 @@
 | 이름 | props |
 |---|---|
 | `Tabs` | `TabsProps` |
-| `TabsList` | — |
-| `TabsTrigger` | — |
-| `TabsContent` | — |
+| `TabsList` | - |
+| `TabsTrigger` | - |
+| `TabsContent` | - |
 
 ### `TabsList`
 
@@ -36,6 +36,7 @@
 | 이름 | 타입 | 필수 |
 |---|---|---|
 | `value` | `string` | 예 |
+| `forceMount` | `boolean` |  |
 | `className` | `string` |  |
 | `children` | `ReactNode` |  |
 

package/tabs/index.module.css

@@ -9,6 +9,8 @@
               width var(--dur-state) var(--ease-state);
 }
 
+.content[data-state="inactive"] { display: none; }
+
 @media (prefers-reduced-motion: reduce) {
   .underline { transition: none; }
 }

package/tabs/index.tsx

@@ -17,19 +17,23 @@ export interface TabsProps {
   children?: ReactNode
 }
 
+const tabs = tv({ base: 'flex flex-col gap-stack' })
+
 export function Tabs({ value, defaultValue, onValueChange, className, children }: TabsProps) {
   return (
     <TabsPrimitive.Root
       value={value}
       defaultValue={defaultValue}
       onValueChange={onValueChange}
-      className={tv({ base: 'flex flex-col gap-stack' })({ className })}
+      className={tabs({ className })}
     >
       {children}
     </TabsPrimitive.Root>
   )
 }
 
+const tabsList = tv({ base: 'border-line scrollbar-thin scrollbar-thumb-line-strong scrollbar-track-transparent overflow-x-auto border-b' })
+
 export function TabsList({ className, children }: { className?: string, children?: ReactNode }) {
   const list = useRef<HTMLDivElement>(null)
   const bar = useRef<HTMLSpanElement>(null)
@@ -58,7 +62,7 @@ export function TabsList({ className, children }: { className?: string, children
 
   return (
     <div
-      className={tv({ base: 'border-line scroll-slim overflow-x-auto border-b' })({ className })}
+      className={tabsList({ className })}
     >
       <TabsPrimitive.List ref={list} className="relative flex w-max min-w-full">
         {children}
@@ -69,6 +73,16 @@ export function TabsList({ className, children }: { className?: string, children
   )
 }
 
+const tabsTrigger = tv({
+  base: 'text-label text-fg-muted inline-flex h-9 items-center gap-tight px-3 transition-state'
+    + ' [&_svg]:size-4'
+    + ' press-shrink enabled:hover:text-fg'
+    + ' disabled:text-fg-disabled disabled:cursor-not-allowed'
+    + ' aria-selected:text-fg'
+    + ' focus-visible:outline-2 focus-visible:-outline-offset-2'
+    + ' focus-visible:outline-line-focus-ring',
+})
+
 export function TabsTrigger({ value, disabled, className, children }: {
   value: string
   disabled?: boolean
@@ -79,26 +93,23 @@ export function TabsTrigger({ value, disabled, className, children }: {
     <TabsPrimitive.Trigger
       value={value}
       disabled={disabled}
-      className={tv({ base: 'text-label text-fg-muted inline-flex h-9 items-center gap-tight px-3 transition-state'
-        + ' [&_svg]:size-4'
-        + ' press-shrink enabled:hover:text-fg'
-        + ' disabled:text-fg-disabled disabled:cursor-not-allowed'
-        + ' aria-selected:text-fg'
-        + ' focus-visible:outline-2 focus-visible:-outline-offset-2'
-        + ' focus-visible:outline-ring' })({ className })}
+      className={tabsTrigger({ className })}
     >
       {children}
     </TabsPrimitive.Trigger>
   )
 }
 
-export function TabsContent({ value, className, children }: {
+const tabsContent = tv({ base: s.content })
+
+export function TabsContent({ value, forceMount, className, children }: {
   value: string
+  forceMount?: boolean
   className?: string
   children?: ReactNode
 }) {
   return (
-    <TabsPrimitive.Content value={value} className={className}>
+    <TabsPrimitive.Content value={value} forceMount={forceMount || undefined} className={tabsContent({ className })}>
       {children}
     </TabsPrimitive.Content>
   )

package/tailwind.css

@@ -0,0 +1,3 @@
+@import "./palette.css";
+@import "./tokens.css";
+@import "./utilities.css";

package/textarea/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add textarea
 층     ui
-파일   textarea/index.tsx · textarea/AGENTS.md
+파일   textarea/index.tsx, textarea/AGENTS.md
 ```
 
 ## 부위
@@ -23,12 +23,12 @@
 | `surface` | `'bare' \| 'well'` |  |
 | `size` | `'sm' \| 'md' \| 'lg'` |  |
 
-## 변형 — `textarea`
+## 변형 - `textarea`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `surface` | `bare` · `well` | `bare` |
-| `size` | `sm` · `md` · `lg` | `md` |
+| `surface` | `bare`, `well` | `bare` |
+| `size` | `sm`, `md`, `lg` | `md` |
 
 ## 함께 받는 것
 

package/textarea/index.tsx

@@ -5,17 +5,17 @@ import { tv } from '../tv'
 export const textarea = tv({
   base: 'w-full rounded-r8 text-value text-fg'
     + ' placeholder:text-fg-placeholder'
-    + ' invalid:ring-2 invalid:ring-danger'
+    + ' invalid:ring-2 invalid:ring-line-danger'
     + ' read-only:text-fg-muted'
     + ' resize-y'
     + ' 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-fg-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-bg-well',
+      well: 'bg-bg-well',
     },
     size: {
       sm: 'p-2',

package/toast/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add toast
 층     ui
-파일   toast/index.tsx · toast/AGENTS.md
+파일   toast/index.tsx, toast/AGENTS.md
 ```
 
 ## 부위
@@ -14,18 +14,6 @@
 
 ## props
 
-### `ToastTone`
-
-`'neutral' | 'success' | 'warning' | 'danger' | 'info'`
-
-### `ToastOptions`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `description` | `string` |  |
-| `action` | `{ label: string, onClick: () => void }` |  |
-| `toasterId` | `string` |  |
-
 ### `ToastProps`
 
 `Omit<ComponentProps<typeof SonnerToaster>, 'id' | 'position' | 'duration' | 'expand'>` 를 확장한다.
@@ -37,6 +25,10 @@
 | `duration` | `number` |  |
 | `expand` | `boolean` |  |
 
+## 함께 받는 것
+
+`tv`
+
 ## npm 의존
 
 `sonner`

package/toast/index.tsx

@@ -1,31 +1,13 @@
 'use client'
 
 import type { ComponentProps } from 'react'
-import { toast as sonner, Toaster as SonnerToaster } from 'sonner'
+import { Toaster as SonnerToaster } from 'sonner'
 
-export type ToastTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info'
+import { tv } from '../tv'
 
-export type ToastOptions = {
-  description?: string
-  action?: { label: string, onClick: () => void }
-  toasterId?: string
-}
+const toaster = tv({ base: 'z-toast' })
 
-const show = (tone: ToastTone, message: string, options?: ToastOptions) => {
-  if (tone === 'neutral') return sonner(message, options)
-  if (tone === 'danger') return sonner.error(message, options)
-  return sonner[tone](message, options)
-}
-
-export const toast = {
-  show,
-  neutral: (m: string, o?: ToastOptions) => show('neutral', m, o),
-  success: (m: string, o?: ToastOptions) => show('success', m, o),
-  warning: (m: string, o?: ToastOptions) => show('warning', m, o),
-  danger: (m: string, o?: ToastOptions) => show('danger', m, o),
-  info: (m: string, o?: ToastOptions) => show('info', m, o),
-  dismiss: (id?: string | number) => sonner.dismiss(id),
-}
+export { toast } from 'sonner'
 
 export interface ToastProps
   extends Omit<ComponentProps<typeof SonnerToaster>, 'id' | 'position' | 'duration' | 'expand'> {
@@ -36,7 +18,17 @@ export interface ToastProps
   expand?: boolean
 }
 
-export function Toast({ toasterId, position = 'bottom-center', duration = 4000, expand = false, ...rest }: ToastProps) {
+export function Toast({
+  toasterId,
+  position = 'bottom-center',
+  duration = 4000,
+  expand = false,
+  offset = 16,
+  gap = 8,
+  className,
+  toastOptions,
+  ...rest
+}: ToastProps) {
   return (
     <SonnerToaster
       {...rest}
@@ -44,26 +36,28 @@ export function Toast({ toasterId, position = 'bottom-center', duration = 4000,
       position={position}
       duration={duration}
       expand={expand}
-      offset={16}
-      gap={8}
-      className="z-toast"
+      offset={offset}
+      gap={gap}
+      className={toaster({ className })}
       toastOptions={{
         unstyled: true,
+        ...toastOptions,
         classNames: {
-          toast: 'bg-float border border-line rounded-r8 shadow-s3'
+          toast: 'float rounded-r8'
             + ' flex w-full items-center gap-stack p-4',
           content: 'min-w-0 flex-1',
           title: 'text-label text-fg',
           description: 'text-caption text-fg-muted',
           icon: 'shrink-0',
           actionButton: 'text-label text-fg shrink-0 rounded-r8 px-3 h-8'
-            + ' bg-well transition-state press press-shrink enabled:hover:bg-fg-muted/10'
-            + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+            + ' bg-bg-well transition-state press press-shrink enabled:hover:bg-bg-neutral-solid/10'
+            + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
             + ' disabled:text-fg-disabled disabled:cursor-not-allowed',
-          success: 'text-success',
-          error: 'text-danger',
-          warning: 'text-warning',
-          info: 'text-info',
+          success: 'text-fg-success',
+          error: 'text-fg-danger',
+          warning: 'text-fg-warning',
+          info: 'text-fg-info',
+          ...toastOptions?.classNames,
         },
       }}
     />

package/toggle/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add toggle
 층     ui
-파일   toggle/index.tsx · toggle/AGENTS.md
+파일   toggle/index.tsx, toggle/AGENTS.md
 ```
 
 ## 부위
@@ -20,13 +20,13 @@
 
 | 이름 | 타입 | 필수 |
 |---|---|---|
-| `surface` | `'bare' \| 'canvas'` |  |
+| `surface` | `'bare' \| 'well' \| 'panel'` |  |
 
-## 변형 — `toggle`
+## 변형 - `toggle`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `surface` | `bare` · `canvas` | `bare` |
+| `surface` | `bare`, `well`, `panel` | `bare` |
 
 ## 함께 받는 것
 

package/toggle/index.tsx

@@ -10,17 +10,18 @@ export const toggle = tv({
     + ' [&_svg]:size-4'
     + ' ring-1 ring-inset ring-line-strong transition-state press press-shrink'
     + ' text-fg-muted'
-    + ' enabled:hover:bg-hover'
-    + ' on:bg-control-on on:ring-control-on on:enabled:text-fg-on-control'
-    + ' on:enabled:hover:bg-control-on-hover'
-    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+    + ' enabled:hover:bg-bg-neutral-hover'
+    + ' on:bg-bg-neutral-solid on:ring-line-neutral-solid on:enabled:text-fg-neutral-solid-contrast'
+    + ' on:enabled:hover:bg-bg-neutral-solid-hover'
+    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
     + ' disabled:text-fg-disabled disabled:ring-line disabled:cursor-not-allowed'
-    + ' on:disabled:bg-control-on-disabled on:disabled:ring-control-on-disabled on:disabled:text-fg-on-control',
+    + ' on:disabled:bg-bg-neutral-solid-checked-disabled on:disabled:ring-transparent on:disabled:text-fg-neutral-solid-contrast',
 
   variants: {
     surface: {
       bare: '',
-      canvas: 'bg-canvas',
+      well: 'bg-bg-well',
+      panel: 'bg-bg-panel',
     },
   },
 
@@ -28,7 +29,7 @@ export const toggle = tv({
 })
 
 export interface ToggleProps extends ComponentProps<typeof TogglePrimitive.Root> {
-  surface?: 'bare' | 'canvas'
+  surface?: 'bare' | 'well' | 'panel'
 }
 
 export function Toggle({ surface, className, ...rest }: ToggleProps) {