@pantoia/ui 0.1.0 → 0.2.0

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-background-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` |
 
 ## 함께 받는 것
 

package/table/index.tsx

@@ -20,6 +20,8 @@ export interface TableProps {
   children?: ReactNode
 }
 
+const tableFrame = tv({ base: 'frame rounded-panel 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-background-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-foreground-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>
@@ -94,7 +104,7 @@ export function TableRow({ className, children }: { className?: string, children
 }
 
 export const tableCell = tv({
-  base: 'text-label text-fg h-11 px-4',
+  base: 'text-label text-foreground h-11 px-4',
 
   variants: {
     mono: { true: 'font-mono', false: '' },

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`
 

package/tabs/index.module.css

@@ -2,7 +2,7 @@
   position: absolute;
   bottom: 0;
   height: 2px;
-  background: var(--color-fg);
+  background: var(--color-foreground);
   width: var(--tabs-indicator-size);
   translate: var(--tabs-indicator-position) 0;
   transition: translate var(--dur-state) var(--ease-state),

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-foreground-muted inline-flex h-9 items-center gap-tight px-3 transition-state'
+    + ' [&_svg]:size-4'
+    + ' press-shrink enabled:hover:text-foreground'
+    + ' disabled:text-foreground-disabled disabled:cursor-not-allowed'
+    + ' aria-selected:text-foreground'
+    + ' 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,13 +93,7 @@ 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>

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

@@ -3,19 +3,19 @@ import type { TextareaHTMLAttributes } from 'react'
 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'
-    + ' read-only:text-fg-muted'
+  base: 'w-full rounded-r8 text-value text-foreground'
+    + ' placeholder:text-foreground-placeholder'
+    + ' invalid:ring-2 invalid:ring-line-danger'
+    + ' read-only:text-foreground-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-foreground-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-background-well',
+      well: 'bg-background-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',
+          title: 'text-label text-foreground',
+          description: 'text-caption text-foreground-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'
-            + ' disabled:text-fg-disabled disabled:cursor-not-allowed',
-          success: 'text-success',
-          error: 'text-danger',
-          warning: 'text-warning',
-          info: 'text-info',
+          actionButton: 'text-label text-foreground shrink-0 rounded-r8 px-3 h-8'
+            + ' bg-background-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-foreground-disabled disabled:cursor-not-allowed',
+          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

@@ -9,18 +9,19 @@ export const toggle = tv({
   base: 'text-label rounded-full inline-flex h-8 items-center gap-tight px-3'
     + ' [&_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'
-    + ' 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',
+    + ' text-foreground-muted'
+    + ' 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-foreground-disabled disabled:ring-line disabled:cursor-not-allowed'
+    + ' 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-background-well',
+      panel: 'bg-background-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) {

package/tooltip/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add tooltip
 층     ui
-파일   tooltip/index.tsx · tooltip/AGENTS.md
+파일   tooltip/index.tsx, tooltip/AGENTS.md
 ```
 
 ## 부위
@@ -11,7 +11,7 @@
 | 이름 | props |
 |---|---|
 | `Tooltip` | `TooltipProps` |
-| `TooltipTrigger` | — |
+| `TooltipTrigger` | - |
 | `TooltipContent` | `TooltipContentProps` |
 
 ### `TooltipTrigger`

package/tooltip/index.tsx

@@ -32,6 +32,12 @@ export interface TooltipContentProps extends Omit<ComponentProps<typeof TooltipP
   arrow?: boolean
 }
 
+const tooltipContent = tv({
+  base: 'float text-foreground rounded-r12 z-overlay'
+    + ' text-caption max-w-64 px-3 py-1'
+    + ' open:animate-enter closed:animate-exit',
+})
+
 export function TooltipContent({
   side = 'top',
   arrow = true,
@@ -45,12 +51,16 @@ export function TooltipContent({
         {...rest}
         side={side}
         sideOffset={6}
-        className={tv({ base: 'bg-float text-fg rounded-r12 shadow-s3 z-overlay'
-          + ' text-caption max-w-64 px-3 py-1'
-          + ' open:animate-enter closed:animate-exit' })({ className })}
+        className={tooltipContent({ className })}
       >
         {children}
-        {arrow && <TooltipPrimitive.Arrow className="fill-float" width={10} height={5} />}
+        {arrow && (
+          <TooltipPrimitive.Arrow asChild width={10} height={5}>
+            <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>
+          </TooltipPrimitive.Arrow>
+        )}
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )

package/code-block/AGENTS.md

@@ -1,60 +0,0 @@
-# CodeBlock
-
-```
-받기   npx @pantoia/ui add code-block
-층     ui
-파일   code-block/index.tsx · code-block/index.module.css · code-block/AGENTS.md
-```
-
-## 부위
-
-| 이름 | props |
-|---|---|
-| `CodeBlock` | `CodeBlockProps` |
-| `CodeBlockHeader` | — |
-
-### `CodeBlockHeader`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `className` | `string` |  |
-| `children` | `ReactNode` |  |
-
-## props
-
-### `CodeBlockFold`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `maxLines` | `number` | 예 |
-| `more` | `string` | 예 |
-| `moreCount` | `string` | 예 |
-| `less` | `string` | 예 |
-
-### `CodeBlockProps`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `code` | `string` | 예 |
-| `wrap` | `boolean` |  |
-| `numbers` | `boolean` |  |
-| `fold` | `CodeBlockFold` |  |
-| `className` | `string` |  |
-| `header` | `ReactNode` |  |
-| `line` | `(line: string, index: number) => ReactNode` |  |
-
-## 변형 — `codeBlock`
-
-슬롯 `root` · `viewport` · `pre` · `chevron`
-
-| 축 | 값 | 기본 |
-|---|---|---|
-| `folded` | `false` | — |
-
-## 함께 받는 것
-
-`tv`
-
-## npm 의존
-
-`lucide-react`