@pantoia/ui 0.2.0 → 0.4.0

package/utilities.css

@@ -0,0 +1,124 @@
+@custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));
+
+@custom-variant current (&[aria-current="page"]);
+
+@custom-variant invalid (&[aria-invalid="true"]);
+
+@custom-variant invalid-within (&:has([aria-invalid="true"]));
+
+@custom-variant in-invalid (&:where([aria-invalid="true"] *));
+
+@custom-variant described (&:has([data-description]));
+
+@custom-variant checked (&:where([data-checked], [data-indeterminate]));
+@custom-variant open    (&[data-open]);
+@custom-variant closed  (&[data-closed]);
+@custom-variant on      (&[aria-pressed="true"]);
+@custom-variant side-top    (&[data-side="top"]);
+@custom-variant side-right  (&[data-side="right"]);
+@custom-variant side-bottom (&[data-side="bottom"]);
+@custom-variant side-left   (&[data-side="left"]);
+@custom-variant selected (&[data-selected]:not([data-selected="false"]));
+@custom-variant unset    (&[data-placeholder]);
+
+@custom-variant menu-gutter (.menu:has(.menu-lead) &:not(:has(.menu-lead)));
+
+@layer base {
+  :root { color-scheme: light; }
+  .dark { color-scheme: dark; }
+
+  body {
+    position: relative;
+    background-color: var(--color-bg);
+    color: var(--color-fg);
+    font-family: var(--font-sans);
+  }
+
+  code, pre, kbd, samp { font-family: var(--font-mono); }
+}
+
+@utility text-prose {
+  font-size: var(--pds-prose);
+  line-height: var(--tw-leading, var(--pds-prose-lh));
+  font-weight: var(--tw-font-weight, 400);
+}
+
+@utility text-value {
+  font-size: var(--pds-value);
+  line-height: var(--tw-leading, var(--pds-value-lh));
+  font-weight: var(--tw-font-weight, 400);
+}
+
+@utility transition-state {
+  transition-property: color, background-color, box-shadow, scale;
+  transition-duration: var(--dur-state);
+  transition-timing-function: var(--ease-state);
+}
+
+@keyframes enter { from { opacity: 0; scale: var(--enter-scale); } }
+@keyframes exit  { to   { opacity: 0; scale: var(--enter-scale); } }
+
+@utility animate-enter { animation: enter var(--dur-enter) var(--ease-enter); }
+@utility animate-exit  { animation: exit  var(--dur-exit)  var(--ease-exit);  }
+
+@keyframes draw { from { stroke-dashoffset: var(--draw-len); } }
+
+@utility animate-draw {
+  stroke-dasharray: var(--draw-len);
+  animation: draw var(--dur-enter) var(--ease-enter);
+}
+
+@keyframes fade-in  { from { opacity: 0; } }
+@keyframes fade-out { to   { opacity: 0; } }
+
+@utility animate-fade-in  { animation: fade-in  var(--dur-enter) var(--ease-enter); }
+@utility animate-fade-out { animation: fade-out var(--dur-exit)  var(--ease-exit);  }
+
+@utility z-sticky  { z-index: 10; }
+@utility z-overlay { z-index: 50; }
+@utility z-toast   { z-index: 60; }
+
+@utility frame {
+  @apply bg-bg-panel border border-line;
+}
+
+@utility card {
+  @apply bg-bg-panel shadow-s3;
+}
+
+@utility float {
+  @apply bg-bg-panel border border-line shadow-s3;
+}
+
+@utility sheet {
+  @apply bg-bg-panel;
+}
+
+@utility press {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: var(--pds-pressed-dim);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--dur-state) var(--ease-state);
+  }
+
+  &:active:not(:disabled):not([aria-disabled="true"])::after,
+  &[data-pressed]:not([data-popup-open]):not([aria-pressed]):not(:disabled):not([aria-disabled="true"])::after {
+    opacity: 1;
+    transition-duration: 0s;
+  }
+}
+
+@utility press-shrink {
+  &:active:not(:disabled):not([aria-disabled="true"]),
+  &[data-pressed]:not([data-popup-open]):not([aria-pressed]):not(:disabled):not([aria-disabled="true"]) {
+    scale: var(--scale-press);
+    transition-duration: 0s;
+  }
+}

package/accordion/AGENTS.md

@@ -1,60 +0,0 @@
-# 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/alert-dialog/AGENTS.md

@@ -1,78 +0,0 @@
-# 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' \| 'brand' \| '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/badge/AGENTS.md

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

package/button/AGENTS.md

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

package/callout/AGENTS.md

@@ -1,41 +0,0 @@
-# Callout
-
-```
-받기   npx @pantoia/ui add callout
-층     ui
-파일   callout/index.tsx, callout/AGENTS.md
-```
-
-## 부위
-
-| 이름 | props |
-|---|---|
-| `Callout` | `CalloutProps` |
-
-## props
-
-### `CalloutProps`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `color` | `'info' \| 'success' \| 'warning' \| 'danger'` |  |
-| `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/checkbox/AGENTS.md

@@ -1,54 +0,0 @@
-# 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` | `'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger'` |  |
-
-## 변형 - `checkbox`
-
-| 축 | 값 | 기본 |
-|---|---|---|
-| `color` | `neutral`, `info`, `success`, `warning`, `danger` | `neutral` |
-
-## 함께 받는 것
-
-`tv`
-
-## npm 의존
-
-`lucide-react`, `radix-ui`

package/combobox/AGENTS.md

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

package/command-palette/AGENTS.md

@@ -1,45 +0,0 @@
-# CommandPalette
-
-```
-받기   npx @pantoia/ui add command-palette
-층     derived
-파일   command-palette/index.tsx, command-palette/AGENTS.md
-```
-
-## 부위
-
-| 이름 | props |
-|---|---|
-| `CommandPalette` | `CommandPaletteProps` |
-
-## props
-
-### `CommandPaletteItem`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `value` | `string` | 예 |
-| `label` | `string` | 예 |
-| `group` | `string` |  |
-
-### `CommandPaletteProps`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `open` | `boolean` |  |
-| `defaultOpen` | `boolean` |  |
-| `onOpenChange` | `(open: boolean) => void` |  |
-| `items` | `CommandPaletteItem[]` | 예 |
-| `title` | `string` | 예 |
-| `placeholder` | `string` | 예 |
-| `emptyText` | `string` | 예 |
-| `onSelect` | `(value: string) => void` |  |
-| `className` | `string` |  |
-
-## 함께 받는 것
-
-`combobox`, `dialog`, `kbd`
-
-## npm 의존
-
-`lucide-react`

package/dialog/AGENTS.md

@@ -1,81 +0,0 @@
-# Dialog
-
-```
-받기   npx @pantoia/ui add dialog
-층     ui
-파일   dialog/index.tsx, dialog/AGENTS.md
-```
-
-## 부위
-
-| 이름 | props |
-|---|---|
-| `Dialog` | `DialogProps` |
-| `DialogTrigger` | - |
-| `DialogClose` | - |
-| `DialogContent` | `DialogContentProps` |
-| `DialogTitle` | `ComponentProps<typeof DialogPrimitive.Title>` |
-| `DialogDescription` | `ComponentProps<typeof DialogPrimitive.Description>` |
-| `DialogHeader` | `DialogHeaderProps` |
-| `DialogFooter` | - |
-
-### `DialogTrigger`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `children` | `ReactNode` | 예 |
-
-### `DialogClose`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `children` | `ReactNode` | 예 |
-
-### `DialogFooter`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `className` | `string` |  |
-| `children` | `ReactNode` |  |
-
-## props
-
-### `DialogProps`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `open` | `boolean` |  |
-| `defaultOpen` | `boolean` |  |
-| `onOpenChange` | `(open: boolean) => void` |  |
-| `children` | `ReactNode` |  |
-
-### `DialogContentProps`
-
-`ComponentProps<typeof DialogPrimitive.Content>` 를 확장한다.
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `size` | `'md' \| 'full' \| 'top'` |  |
-
-### `DialogHeaderProps`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `lead` | `ReactNode` |  |
-| `trail` | `ReactNode` |  |
-| `className` | `string` |  |
-| `children` | `ReactNode` |  |
-
-## 변형 - `dialog`
-
-| 축 | 값 | 기본 |
-|---|---|---|
-| `size` | `md`, `full`, `top` | `md` |
-
-## 함께 받는 것
-
-`tv`
-
-## npm 의존
-
-`radix-ui`