@pantoia/ui 0.1.0

package/checkbox/AGENTS.md

@@ -0,0 +1,54 @@
+# Checkbox
+
+```
+받기   npx @pantoia/ui add checkbox
+층     ui
+파일   checkbox/index.tsx · checkbox/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `CheckboxGroup` | `CheckboxGroupProps` |
+| `Checkbox` | `CheckboxProps` |
+
+## props
+
+### `CheckboxGroupProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string[]` |  |
+| `defaultValue` | `string[]` |  |
+| `onValueChange` | `(value: string[]) => void` |  |
+| `disabled` | `boolean` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `CheckboxProps`
+
+`Omit<ComponentProps<typeof CheckboxPrimitive.Root>, 'checked' | 'onCheckedChange' | 'value'>` 를 확장한다.
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string` |  |
+| `checked` | `boolean` |  |
+| `onCheckedChange` | `(checked: boolean) => void` |  |
+| `indeterminate` | `boolean` |  |
+| `onIndeterminateChange` | `(indeterminate: boolean) => void` |  |
+| `color` | `'control' \| 'info' \| 'success' \| 'warning' \| 'danger'` |  |
+
+## 변형 — `checkbox`
+
+| 축 | 값 | 기본 |
+|---|---|---|
+| `color` | `control` · `info` · `success` · `warning` · `danger` | `control` |
+
+## 함께 받는 것
+
+`tv`
+
+## npm 의존
+
+`lucide-react` · `radix-ui`

package/checkbox/index.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import { Check, Minus } from 'lucide-react'
+import { Checkbox as CheckboxPrimitive } from 'radix-ui'
+import {
+  createContext,
+  use,
+  useRef,
+  useState,
+  type ComponentProps,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ReactNode,
+} from 'react'
+
+import { tv } from '../tv'
+
+export const checkbox = tv({
+  base: 'size-5 shrink-0 rounded-mark inline-flex items-center justify-center'
+    + ' bg-transparent ring-1 ring-inset ring-line-strong'
+    + ' transition-state press press-shrink'
+    + ' checked:ring-2'
+    + ' invalid:ring-2 invalid:ring-danger'
+    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+    + ' disabled:ring-line disabled:bg-disabled disabled:cursor-not-allowed'
+    + ' checked:disabled:bg-control-on-disabled checked:disabled:ring-control-on-disabled',
+
+  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',
+    },
+  },
+
+  defaultVariants: { color: 'control' },
+})
+
+interface GroupContext {
+  value: string[]
+  toggle: (item: string, next: boolean) => void
+  disabled?: boolean
+}
+
+const Group = createContext<GroupContext | null>(null)
+
+const ITEMS = '[role="checkbox"]:not([disabled])'
+
+export interface CheckboxGroupProps {
+  value?: string[]
+  defaultValue?: string[]
+  onValueChange?: (value: string[]) => void
+  disabled?: boolean
+  className?: string
+  children?: ReactNode
+}
+
+export function CheckboxGroup({
+  value,
+  defaultValue,
+  onValueChange,
+  disabled,
+  className,
+  children,
+}: CheckboxGroupProps) {
+  const [own, setOwn] = useState<string[]>(defaultValue ?? [])
+  const list = value ?? own
+  const root = useRef<HTMLDivElement>(null)
+
+  const toggle = (item: string, next: boolean) => {
+    const after = next ? [...list, item] : list.filter(one => one !== item)
+    if (value === undefined) setOwn(after)
+    onValueChange?.(after)
+  }
+
+  const onKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {
+    const step = e.key === 'ArrowDown' || e.key === 'ArrowRight'
+      ? 1
+      : e.key === 'ArrowUp' || e.key === 'ArrowLeft' ? -1 : 0
+    if (step === 0 || !root.current) return
+
+    const items = [...root.current.querySelectorAll<HTMLElement>(ITEMS)]
+    const at = items.indexOf(document.activeElement as HTMLElement)
+    if (at === -1) return
+
+    e.preventDefault()
+    items[(at + step + items.length) % items.length]!.focus()
+  }
+
+  return (
+    <Group value={{ value: list, toggle, disabled }}>
+      <div
+        ref={root}
+        role="group"
+        onKeyDown={onKeyDown}
+        className={tv({ base: 'flex flex-col gap-3' })({ className })}
+      >
+        {children}
+      </div>
+    </Group>
+  )
+}
+
+export interface CheckboxProps extends Omit<ComponentProps<typeof CheckboxPrimitive.Root>, 'checked' | 'onCheckedChange' | 'value'> {
+  value?: string
+  checked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  indeterminate?: boolean
+  onIndeterminateChange?: (indeterminate: boolean) => void
+  color?: 'control' | 'info' | 'success' | 'warning' | 'danger'
+}
+
+export function Checkbox({
+  value,
+  checked,
+  onCheckedChange,
+  indeterminate,
+  onIndeterminateChange,
+  color,
+  className,
+  disabled,
+  ...rest
+}: CheckboxProps) {
+  const group = use(Group)
+  const item = value ?? 'on'
+
+  const on = group ? group.value.includes(item) : checked ?? false
+  const state = indeterminate ? 'indeterminate' as const : on
+
+  const change = (next: boolean | 'indeterminate') => {
+    if (typeof next !== 'boolean') return
+    if (group) group.toggle(item, next)
+    else onCheckedChange?.(next)
+    if (indeterminate) onIndeterminateChange?.(false)
+  }
+
+  return (
+    <CheckboxPrimitive.Root
+      {...rest}
+      checked={state}
+      disabled={disabled ?? group?.disabled}
+      onCheckedChange={change}
+      className={checkbox({ color, className })}
+    >
+      <CheckboxPrimitive.Indicator className="text-fg-on-control flex">
+        {indeterminate ? <Minus className="size-4" /> : <Check className="size-4" />}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}

package/code-block/AGENTS.md

@@ -0,0 +1,60 @@
+# 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`

package/code-block/index.module.css

@@ -0,0 +1,46 @@
+.code {
+  margin: 0;
+  padding: 1rem;
+  counter-reset: ln;
+
+  --code-block-keyword: var(--purple-700);
+  --code-block-name: var(--orange-800);
+  --code-block-string: var(--green-800);
+  --code-block-comment: var(--gray-500);
+  --code-block-value: var(--blue-700);
+}
+
+.code-keyword { color: var(--code-block-keyword); }
+.code-name { color: var(--code-block-name); }
+.code-string { color: var(--code-block-string); }
+.code-comment { color: var(--code-block-comment); }
+.code-value { color: var(--code-block-value); }
+.line { display: block; white-space: pre; min-height: 1lh; }
+.wrap .line { white-space: pre-wrap; word-break: break-all; }
+
+.numbers { padding-left: 0; }
+.numbers .line::before {
+  counter-increment: ln;
+  content: counter(ln);
+  display: inline-block;
+  width: 3.4em;
+  padding-right: 0.9em;
+  text-align: right;
+  color: var(--color-fg-subtle);
+  user-select: none;
+  pointer-events: none;
+}
+
+.numbers:not(.wrap) .line::before {
+  position: sticky;
+  left: 0;
+  background: var(--color-well);
+}
+
+.numbers.wrap .line { padding-left: 3.4em; text-indent: -3.4em; }
+
+.clip {
+  max-height: calc(var(--code-block-max-lines) * 1lh + 2rem);
+  overflow-y: hidden;
+  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
+}

package/code-block/index.tsx

@@ -0,0 +1,127 @@
+'use client'
+
+import { ChevronDown } from 'lucide-react'
+import { useCallback, useState, useSyncExternalStore, type CSSProperties, type ReactNode } from 'react'
+
+import { tv } from '../tv'
+
+import s from './index.module.css'
+
+export const codeToken = {
+  keyword: s['code-keyword'],
+  name: s['code-name'],
+  string: s['code-string'],
+  comment: s['code-comment'],
+  value: s['code-value'],
+  none: '',
+} as const
+
+export interface CodeBlockFold {
+  maxLines: number
+  more: string
+  moreCount: string
+  less: string
+}
+
+export const codeBlock = tv({
+  slots: {
+    root: 'bg-well rounded-well text-value font-mono overflow-hidden',
+    viewport: 'scroll-slim overflow-auto'
+      + ' focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring',
+    pre: '',
+    chevron: 'size-4 transition-transform motion-reduce:transition-none',
+  },
+
+  variants: {
+    folded: { false: { chevron: 'rotate-180' } },
+  },
+})
+
+export interface CodeBlockProps {
+  code: string
+  wrap?: boolean
+  numbers?: boolean
+  fold?: CodeBlockFold
+  className?: string
+  header?: ReactNode
+  line?: (line: string, index: number) => ReactNode
+}
+
+export function CodeBlock({
+  code,
+  wrap = false,
+  numbers = false,
+  fold,
+  className,
+  header,
+  line,
+}: CodeBlockProps) {
+  const [folded, setFolded] = useState(true)
+  const [box, setBox] = useState<HTMLDivElement | null>(null)
+
+  const subscribe = useCallback((onChange: () => void) => {
+    if (!box) return () => {}
+    const observer = new ResizeObserver(onChange)
+    observer.observe(box)
+    if (box.firstElementChild) observer.observe(box.firstElementChild)
+    return () => observer.disconnect()
+  }, [box])
+
+  const overflows = useSyncExternalStore(
+    subscribe,
+    () => box !== null && (box.scrollWidth > box.clientWidth || box.scrollHeight > box.clientHeight),
+    () => false,
+  )
+
+  const lines = code.split('\n')
+  const foldable = !!fold && lines.length > fold.maxLines
+  const rest = lines.length - (fold?.maxLines ?? 0)
+
+  const ui = codeBlock({ folded })
+
+  const pre = [s.code, wrap ? s.wrap : '', numbers ? s.numbers : '', ui.pre()]
+    .filter(Boolean).join(' ')
+
+  const viewport = [ui.viewport(), foldable && folded ? s.clip : '']
+    .filter(Boolean).join(' ')
+
+  return (
+    <div className={ui.root({ className })}>
+      {header}
+
+      <div
+        ref={setBox}
+        tabIndex={overflows ? 0 : undefined}
+        className={viewport}
+        style={{ '--code-block-max-lines': fold?.maxLines } as CSSProperties}
+      ><pre className={pre}>{lines.map((text, i) => (
+        <span key={i} className={s.line}>{line ? line(text, i) : text}</span>
+      ))}</pre></div>
+
+      {foldable && (
+        <button
+          type="button"
+          className="border-line text-caption text-fg-muted flex w-full items-center justify-center
+             gap-tight border-t py-2 transition-state press
+             enabled:hover:bg-hover
+             focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"
+          onClick={() => setFolded(!folded)}
+        >
+          <ChevronDown className={ui.chevron()} />
+          {folded ? (wrap ? fold.more : fold.moreCount.replace('{count}', String(rest))) : fold.less}
+        </button>
+      )}
+    </div>
+  )
+}
+
+export function CodeBlockHeader({ className, children }: { className?: string, children?: ReactNode }) {
+  return (
+    <div
+      className={tv({ base: 'border-line text-caption text-fg-muted'
+        + ' flex items-center gap-stack border-b px-4 py-2' })({ className })}
+    >
+      {children}
+    </div>
+  )
+}

package/combobox/AGENTS.md

@@ -0,0 +1,150 @@
+# Combobox
+
+```
+받기   npx @pantoia/ui add combobox
+층     ui
+파일   combobox/index.tsx · combobox/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Combobox` | `ComboboxProps` |
+| `ComboboxAnchor` | `ComboboxAnchorProps` |
+| `ComboboxInput` | `ComboboxInputProps` |
+| `ComboboxTrigger` | — |
+| `ComboboxCancel` | — |
+| `ComboboxContent` | `ComboboxContentProps` |
+| `ComboboxViewport` | — |
+| `ComboboxItem` | `ComboboxItemProps` |
+| `ComboboxItemText` | — |
+| `ComboboxItemDescription` | — |
+| `ComboboxGroup` | — |
+| `ComboboxEmpty` | — |
+| `ComboboxSeparator` | — |
+
+### `ComboboxTrigger`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `label` | `string` |  |
+| `disabled` | `boolean` |  |
+| `className` | `string` |  |
+
+### `ComboboxCancel`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `label` | `string` |  |
+| `className` | `string` |  |
+
+### `ComboboxViewport`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `label` | `string` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `ComboboxItemText`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `ComboboxItemDescription`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `ComboboxGroup`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `label` | `string` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `ComboboxEmpty`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `ComboboxSeparator`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+
+## 도우미
+
+`contains(text: string, search: string)`
+
+## props
+
+### `ComboboxProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string` |  |
+| `defaultValue` | `string` |  |
+| `onValueChange` | `(value: string) => void` |  |
+| `open` | `boolean` |  |
+| `defaultOpen` | `boolean` |  |
+| `onOpenChange` | `(open: boolean) => void` |  |
+| `ignoreFilter` | `boolean` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `ComboboxAnchorProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `surface` | `'bare' \| 'well'` |  |
+| `size` | `'sm' \| 'md' \| 'lg'` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `ComboboxInputProps`
+
+`Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>` 를 확장한다.
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string` |  |
+| `onValueChange` | `(value: string) => void` |  |
+
+### `ComboboxContentProps`
+
+`Omit<ComponentProps<typeof PopoverPrimitive.Content>, 'align' | 'sideOffset' | 'onOpenAutoFocus'>`
+
+### `ComboboxItemProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string` | 예 |
+| `textValue` | `string` |  |
+| `disabled` | `boolean` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## 변형 — `comboboxAnchor`
+
+| 축 | 값 | 기본 |
+|---|---|---|
+| `surface` | `bare` · `well` | `bare` |
+| `size` | `sm` · `md` · `lg` | `md` |
+
+## 함께 받는 것
+
+`tv`
+
+## npm 의존
+
+`lucide-react` · `radix-ui`