@pantoia/ui 0.1.0

package/accordion/AGENTS.md

@@ -0,0 +1,60 @@
+# Accordion
+
+```
+받기   npx @pantoia/ui add accordion
+층     ui
+파일   accordion/index.tsx · accordion/index.module.css · accordion/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Accordion` | `AccordionProps` |
+| `AccordionItem` | — |
+| `AccordionTrigger` | — |
+| `AccordionContent` | — |
+
+### `AccordionItem`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string` | 예 |
+| `disabled` | `boolean` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `AccordionTrigger`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `AccordionContent`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## props
+
+### `AccordionProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string \| string[]` |  |
+| `defaultValue` | `string \| string[]` |  |
+| `onValueChange` | `(value: string & string[]) => void` |  |
+| `multiple` | `boolean` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## 함께 받는 것
+
+`tv`
+
+## npm 의존
+
+`lucide-react` · `radix-ui`

package/accordion/index.module.css

@@ -0,0 +1,10 @@
+@keyframes acc-open  { from { height: 0; } to { height: var(--radix-accordion-content-height); } }
+@keyframes acc-close { from { height: var(--radix-accordion-content-height); } to { height: 0; } }
+
+.panel { overflow: hidden; }
+.panel[data-state="open"]   { animation: acc-open  var(--dur-enter) var(--ease-enter); }
+.panel[data-state="closed"] { animation: acc-close var(--dur-exit)  var(--ease-exit); }
+
+@media (prefers-reduced-motion: reduce) {
+  .panel { animation: none; }
+}

package/accordion/index.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { ChevronDown } from 'lucide-react'
+import { Accordion as AccordionPrimitive } from 'radix-ui'
+import type { ReactNode } from 'react'
+
+import { tv } from '../tv'
+
+import s from './index.module.css'
+
+export interface AccordionProps {
+  value?: string | string[]
+  defaultValue?: string | string[]
+  onValueChange?: (value: string & string[]) => void
+  multiple?: boolean
+  className?: string
+  children?: ReactNode
+}
+
+export function Accordion({ value, defaultValue, onValueChange, multiple, className, children }: AccordionProps) {
+  const shared = {
+    className: tv({ base: 'rounded-panel border border-line overflow-hidden divide-y divide-line' })({ className }),
+    children,
+  }
+
+  return multiple
+    ? (
+        <AccordionPrimitive.Root
+          type="multiple"
+          value={value as string[] | undefined}
+          defaultValue={defaultValue as string[] | undefined}
+          onValueChange={onValueChange}
+          {...shared}
+        />
+      )
+    : (
+        <AccordionPrimitive.Root
+          type="single"
+          collapsible
+          value={value as string | undefined}
+          defaultValue={defaultValue as string | undefined}
+          onValueChange={onValueChange}
+          {...shared}
+        />
+      )
+}
+
+export function AccordionItem({ value, disabled, className, children }: {
+  value: string
+  disabled?: boolean
+  className?: string
+  children?: ReactNode
+}) {
+  return (
+    <AccordionPrimitive.Item value={value} disabled={disabled} className={className}>
+      {children}
+    </AccordionPrimitive.Item>
+  )
+}
+
+export function AccordionTrigger({ className, children }: { className?: string, children?: ReactNode }) {
+  return (
+    <AccordionPrimitive.Header>
+      <AccordionPrimitive.Trigger
+        className={tv({ 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-hover'
+          + ' disabled:text-fg-disabled disabled:cursor-not-allowed'
+          + ' focus-visible:outline-2 focus-visible:-outline-offset-2'
+          + ' focus-visible:outline-ring' })({ className })}
+      >
+        <span className="flex min-w-0 grow items-center gap-tight">{children}</span>
+
+        <ChevronDown
+          className="text-fg-subtle size-4 shrink-0 transition-transform open:rotate-180
+               motion-reduce:transition-none"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+export function AccordionContent({ className, children }: { className?: string, children?: ReactNode }) {
+  return (
+    <AccordionPrimitive.Content className={s.panel}>
+      <div className={tv({ base: 'bg-well text-caption text-fg-muted px-4 py-3' })({ className })}>
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  )
+}

package/alert-dialog/AGENTS.md

@@ -0,0 +1,78 @@
+# AlertDialog
+
+```
+받기   npx @pantoia/ui add alert-dialog
+층     ui
+파일   alert-dialog/index.tsx · alert-dialog/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `AlertDialog` | `AlertDialogProps` |
+| `AlertDialogTrigger` | — |
+| `AlertDialogContent` | `ComponentProps<typeof AlertDialogPrimitive.Content>` |
+| `AlertDialogTitle` | `ComponentProps<typeof AlertDialogPrimitive.Title>` |
+| `AlertDialogDescription` | `ComponentProps<typeof AlertDialogPrimitive.Description>` |
+| `AlertDialogHeader` | `AlertDialogHeaderProps` |
+| `AlertDialogFooter` | — |
+| `AlertDialogAction` | — |
+| `AlertDialogCancel` | — |
+
+### `AlertDialogTrigger`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `children` | `ReactNode` | 예 |
+
+### `AlertDialogFooter`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `AlertDialogAction`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `color` | `'neutral' \| 'primary' \| 'danger'` |  |
+| `onClick` | `() => void` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `AlertDialogCancel`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## props
+
+### `AlertDialogProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `open` | `boolean` |  |
+| `defaultOpen` | `boolean` |  |
+| `onOpenChange` | `(open: boolean) => void` |  |
+| `children` | `ReactNode` |  |
+
+### `AlertDialogHeaderProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `lead` | `ReactNode` |  |
+| `trail` | `ReactNode` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## 함께 받는 것
+
+`button` · `tv`
+
+## npm 의존
+
+`radix-ui`

package/alert-dialog/index.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui'
+import type { ComponentProps, ReactNode } from 'react'
+
+import { Button } from '../button'
+import { tv } from '../tv'
+
+export interface AlertDialogProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  children?: ReactNode
+}
+
+export function AlertDialog({ open, defaultOpen, onOpenChange, children }: AlertDialogProps) {
+  return (
+    <AlertDialogPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+      {children}
+    </AlertDialogPrimitive.Root>
+  )
+}
+
+export function AlertDialogTrigger({ children }: { children: ReactNode }) {
+  return <AlertDialogPrimitive.Trigger asChild>{children}</AlertDialogPrimitive.Trigger>
+}
+
+export function AlertDialogContent({ className, children, ...rest }: ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Overlay className="bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+
+      <AlertDialogPrimitive.Content
+        {...rest}
+        className={tv({ base: 'bg-float 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'
+          + ' focus-visible:outline-none' })({ className })}
+      >
+        {children}
+      </AlertDialogPrimitive.Content>
+    </AlertDialogPrimitive.Portal>
+  )
+}
+
+export function AlertDialogTitle({ className, ...rest }: ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return <AlertDialogPrimitive.Title {...rest} className={tv({ base: 'text-section' })({ className })} />
+}
+
+export function AlertDialogDescription({ className, ...rest }: ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      {...rest}
+      className={tv({ base: 'text-prose text-fg-muted' })({ className })}
+    />
+  )
+}
+
+export const alertDialogHeader = tv({
+  slots: {
+    root: 'flex items-start gap-stack',
+    lead: 'shrink-0',
+    body: 'flex min-w-0 grow flex-col gap-tight',
+    trail: 'shrink-0',
+  },
+})
+
+export interface AlertDialogHeaderProps {
+  lead?: ReactNode
+  trail?: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+export function AlertDialogHeader({ lead, trail, className, children }: AlertDialogHeaderProps) {
+  const ui = alertDialogHeader()
+
+  return (
+    <div className={ui.root({ className })}>
+      {lead && <div className={ui.lead()}>{lead}</div>}
+      <div className={ui.body()}>{children}</div>
+      {trail && <div className={ui.trail()}>{trail}</div>}
+    </div>
+  )
+}
+
+export function AlertDialogFooter({ className, children }: { className?: string, children?: ReactNode }) {
+  return (
+    <div className={tv({ base: 'flex justify-end gap-2' })({ className })}>
+      {children}
+    </div>
+  )
+}
+
+export function AlertDialogAction({ color = 'neutral', onClick, className, children }: {
+  color?: 'neutral' | 'primary' | 'danger'
+  onClick?: () => void
+  className?: string
+  children?: ReactNode
+}) {
+  return (
+    <AlertDialogPrimitive.Action asChild>
+      <Button emphasis="solid" color={color} onClick={onClick} className={className}>
+        {children}
+      </Button>
+    </AlertDialogPrimitive.Action>
+  )
+}
+
+export function AlertDialogCancel({ className, children }: { className?: string, children?: ReactNode }) {
+  return (
+    <AlertDialogPrimitive.Cancel asChild>
+      <Button color="neutral" emphasis="outline" className={className}>
+        {children}
+      </Button>
+    </AlertDialogPrimitive.Cancel>
+  )
+}

package/badge/AGENTS.md

@@ -0,0 +1,35 @@
+# Badge
+
+```
+받기   npx @pantoia/ui add badge
+층     ui
+파일   badge/index.tsx · badge/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Badge` | `BadgeProps` |
+
+## props
+
+### `BadgeProps`
+
+`Omit<HTMLAttributes<HTMLSpanElement>, 'color'>` 를 확장한다.
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `color` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` |  |
+| `shape` | `'square' \| 'pill'` |  |
+
+## 변형 — `badge`
+
+| 축 | 값 | 기본 |
+|---|---|---|
+| `color` | `neutral` · `primary` · `info` · `success` · `warning` · `danger` | `neutral` |
+| `shape` | `square` · `pill` | `square` |
+
+## 함께 받는 것
+
+`tv`

package/badge/index.tsx

@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from 'react'
+
+import { tv } from '../tv'
+
+export const badge = tv({
+  base: 'inline-flex items-center gap-tight px-2 py-0.5 text-micro'
+    + ' [&_svg]:size-3',
+
+  variants: {
+    color: {
+      neutral: 'bg-well text-fg-muted',
+      primary: 'bg-primary-weak text-primary-on-weak',
+      info: 'bg-info-weak text-info-on-weak',
+      success: 'bg-success-weak text-success-on-weak',
+      warning: 'bg-warning-weak text-warning-on-weak',
+      danger: 'bg-danger-weak text-danger-on-weak',
+    },
+    shape: {
+      square: 'rounded-mark',
+      pill: 'rounded-full',
+    },
+  },
+
+  defaultVariants: { color: 'neutral', shape: 'square' },
+})
+
+export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+  color?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger'
+  shape?: 'square' | 'pill'
+}
+
+export function Badge({ color, shape, className, ...rest }: BadgeProps) {
+  return <span {...rest} className={badge({ color, shape, className })} />
+}

package/button/AGENTS.md

@@ -0,0 +1,39 @@
+# Button
+
+```
+받기   npx @pantoia/ui add button
+층     ui
+파일   button/index.tsx · button/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Button` | `ButtonProps` |
+
+## props
+
+### `ButtonProps`
+
+`Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>` 를 확장한다.
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `color` | `'primary' \| 'neutral' \| 'danger'` | 예 |
+| `emphasis` | `'solid' \| 'weak' \| 'outline' \| 'ghost'` | 예 |
+| `size` | `'sm' \| 'md' \| 'lg'` |  |
+| `shape` | `'rect' \| 'square' \| 'pill' \| 'circle'` |  |
+
+## 변형 — `button`
+
+| 축 | 값 | 기본 |
+|---|---|---|
+| `color` | `primary` · `neutral` · `danger` | — |
+| `emphasis` | `solid` · `weak` · `outline` · `ghost` | — |
+| `size` | `sm` · `md` · `lg` | `md` |
+| `shape` | `rect` · `square` · `pill` · `circle` | `rect` |
+
+## 함께 받는 것
+
+`tv`

package/button/index.tsx

@@ -0,0 +1,98 @@
+import type { ButtonHTMLAttributes } from 'react'
+
+import { tv } from '../tv'
+
+export const button = tv({
+  base: 'inline-flex shrink-0 items-center justify-center gap-tight whitespace-nowrap'
+    + ' rounded-r8 text-label'
+    + ' transition-state press press-shrink'
+    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+    + ' disabled:text-fg-disabled disabled:cursor-not-allowed',
+
+  variants: {
+    color: { primary: '', neutral: '', danger: '' },
+    emphasis: { solid: '', weak: '', outline: '', ghost: '' },
+    size: {
+      sm: 'h-8 [&_svg]:size-4',
+      md: 'h-9 [&_svg]:size-4',
+      lg: 'h-10 text-t16 font-medium [&_svg]:size-5',
+    },
+    shape: {
+      rect: '',
+      square: '',
+      pill: 'rounded-full',
+      circle: 'rounded-full',
+    },
+  },
+
+  compoundVariants: [
+    { color: 'primary', emphasis: 'solid',
+      class: 'bg-primary-solid text-fg-on-solid'
+        + ' enabled:hover:bg-primary-solid-hover'
+        + ' disabled:bg-primary-solid/20' },
+    { color: 'primary', emphasis: 'weak',
+      class: 'bg-primary-weak text-primary-on-weak disabled:text-primary-on-weak/40'
+        + ' enabled:hover:bg-primary-solid/10' },
+    { color: 'primary', emphasis: 'outline',
+      class: 'text-primary-on-weak disabled:text-primary-on-weak/40'
+        + ' ring-1 ring-inset ring-primary-stroke disabled:ring-line'
+        + ' enabled:hover:bg-primary-solid/10' },
+    { color: 'primary', emphasis: 'ghost',
+      class: 'text-primary-on-weak disabled:text-primary-on-weak/40'
+        + ' enabled:hover:bg-primary-solid/10' },
+
+    { color: 'neutral', emphasis: 'solid',
+      class: 'bg-neutral-solid text-fg-on-control'
+        + ' enabled:hover:bg-neutral-solid-hover'
+        + ' disabled:bg-neutral-solid/20' },
+    { color: 'neutral', emphasis: 'weak',
+      class: 'bg-well text-fg'
+        + ' enabled:hover:bg-fg-muted/10' },
+    { color: 'neutral', emphasis: 'outline',
+      class: 'text-fg ring-1 ring-inset ring-line-strong disabled:ring-line'
+        + ' enabled:hover:bg-hover' },
+    { color: 'neutral', emphasis: 'ghost',
+      class: 'text-fg enabled:hover:bg-hover' },
+
+    { color: 'danger', emphasis: 'solid',
+      class: 'bg-danger-solid text-fg-on-solid'
+        + ' enabled:hover:bg-danger-solid-hover'
+        + ' disabled:bg-danger-solid/20' },
+    { color: 'danger', emphasis: 'weak',
+      class: 'bg-danger-weak text-danger-on-weak disabled:text-danger-on-weak/40'
+        + ' enabled:hover:bg-danger/10' },
+    { color: 'danger', emphasis: 'outline',
+      class: 'text-danger-on-weak disabled:text-danger-on-weak/40'
+        + ' ring-1 ring-inset ring-danger-stroke disabled:ring-line'
+        + ' enabled:hover:bg-danger/10' },
+    { color: 'danger', emphasis: 'ghost',
+      class: 'text-danger-on-weak disabled:text-danger-on-weak/40'
+        + ' enabled:hover:bg-danger/10' },
+
+    { shape: ['rect', 'pill'], size: 'sm', class: 'px-3' },
+    { shape: ['rect', 'pill'], size: 'md', class: 'px-3.5' },
+    { shape: ['rect', 'pill'], size: 'lg', class: 'px-4' },
+    { shape: ['square', 'circle'], size: 'sm', class: 'w-8' },
+    { shape: ['square', 'circle'], size: 'md', class: 'w-9' },
+    { shape: ['square', 'circle'], size: 'lg', class: 'w-10' },
+  ],
+
+  defaultVariants: { size: 'md', shape: 'rect' },
+})
+
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+  color: 'primary' | 'neutral' | 'danger'
+  emphasis: 'solid' | 'weak' | 'outline' | 'ghost'
+  size?: 'sm' | 'md' | 'lg'
+  shape?: 'rect' | 'square' | 'pill' | 'circle'
+}
+
+export function Button({ color, emphasis, size, shape, className, ...rest }: ButtonProps) {
+  return (
+    <button
+      type="button"
+      {...rest}
+      className={button({ color, emphasis, size, shape, className })}
+    />
+  )
+}

package/callout/AGENTS.md

@@ -0,0 +1,42 @@
+# Callout
+
+```
+받기   npx @pantoia/ui add callout
+층     ui
+파일   callout/index.tsx · callout/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Callout` | `CalloutProps` |
+
+## props
+
+### `CalloutProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `color` | `'info' \| 'success' \| 'warning' \| 'danger'` |  |
+| `live` | `boolean` |  |
+| `icon` | `ReactNode` |  |
+| `title` | `ReactNode` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## 변형 — `callout`
+
+슬롯 `root` · `icon` · `title` · `body` · `text`
+
+| 축 | 값 | 기본 |
+|---|---|---|
+| `color` | `info` · `success` · `warning` · `danger` | `info` |
+
+## 함께 받는 것
+
+`tv`
+
+## npm 의존
+
+`lucide-react`

package/callout/index.tsx

@@ -0,0 +1,70 @@
+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',
+    icon: 'flex shrink-0 mt-0.5 [&_svg]:size-5',
+    title: 'font-bold',
+    body: 'flex min-w-0 flex-col gap-tight',
+    text: 'flex flex-col gap-2',
+  },
+
+  variants: {
+    color: {
+      info: {
+        root: 'bg-info-weak text-info-on-weak border-info-stroke',
+        icon: 'text-info',
+      },
+      success: {
+        root: 'bg-success-weak text-success-on-weak border-success-stroke',
+        icon: 'text-success',
+      },
+      warning: {
+        root: 'bg-warning-weak text-warning-on-weak border-warning-stroke',
+        icon: 'text-warning',
+      },
+      danger: {
+        root: 'bg-danger-weak text-danger-on-weak border-danger-stroke',
+        icon: 'text-danger',
+      },
+    },
+  },
+
+  defaultVariants: { color: 'info' },
+})
+
+const ICONS = {
+  info: Info,
+  success: CircleCheck,
+  warning: TriangleAlert,
+  danger: CircleX,
+} as const
+
+export interface CalloutProps {
+  color?: 'info' | 'success' | 'warning' | 'danger'
+  live?: boolean
+  icon?: ReactNode
+  title?: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+export function Callout({ color, live, icon, title, className, children }: CalloutProps) {
+  const ui = callout({ color })
+  const Fallback = ICONS[color ?? 'info']
+
+  return (
+    <div className={ui.root({ className })} role={live ? 'alert' : 'note'}>
+      <span className={ui.icon()}>
+        {icon ?? <Fallback />}
+      </span>
+      <div className={ui.body()}>
+        {title && <span className={ui.title()}>{title}</span>}
+        <div className={ui.text()}>{children}</div>
+      </div>
+    </div>
+  )
+}