@pantoia/ui 0.1.0

package/select/AGENTS.md

@@ -0,0 +1,90 @@
+# Select
+
+```
+받기   npx @pantoia/ui add select
+층     ui
+파일   select/index.tsx · select/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Select` | `SelectProps` |
+| `SelectGroup` | — |
+| `SelectItem` | — |
+| `SelectItemText` | — |
+| `SelectItemDescription` | — |
+| `SelectSeparator` | — |
+
+### `SelectGroup`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `label` | `string` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `SelectItem`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string` | 예 |
+| `disabled` | `boolean` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `SelectItemText`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `SelectItemDescription`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `SelectSeparator`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+
+## props
+
+### `SelectProps`
+
+`Omit<ComponentProps<typeof SelectPrimitive.Trigger>, 'value' | 'defaultValue' | 'dir'>` 를 확장한다.
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string` |  |
+| `defaultValue` | `string` |  |
+| `onValueChange` | `(value: string) => void` |  |
+| `open` | `boolean` |  |
+| `defaultOpen` | `boolean` |  |
+| `onOpenChange` | `(open: boolean) => void` |  |
+| `placeholder` | `string` |  |
+| `surface` | `'bare' \| 'well'` |  |
+| `size` | `'sm' \| 'md' \| 'lg'` |  |
+| `arrow` | `boolean` |  |
+| `children` | `ReactNode` |  |
+
+## 변형 — `selectTrigger`
+
+| 축 | 값 | 기본 |
+|---|---|---|
+| `surface` | `bare` · `well` | `bare` |
+| `size` | `sm` · `md` · `lg` | `md` |
+
+## 함께 받는 것
+
+`tv`
+
+## npm 의존
+
+`lucide-react` · `radix-ui`

package/select/index.tsx

@@ -0,0 +1,169 @@
+'use client'
+
+import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+import { Select as SelectPrimitive } from 'radix-ui'
+import type { ComponentProps, ReactNode } from 'react'
+
+import { tv } from '../tv'
+
+export const selectTrigger = tv({
+  base: 'flex w-full items-center justify-between gap-tight rounded-r8'
+    + ' text-value text-fg'
+    + ' transition-state'
+    + ' invalid:ring-2 invalid:ring-danger'
+    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+    + ' disabled:bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed'
+    + ' unset:text-fg-placeholder',
+
+  variants: {
+    surface: {
+      bare: 'bg-transparent ring-1 ring-inset ring-line-strong',
+      well: 'bg-well',
+    },
+    size: {
+      sm: 'h-8 px-3',
+      md: 'h-9 px-3',
+      lg: 'h-10 px-3 text-t16',
+    },
+  },
+
+  defaultVariants: { surface: 'bare', size: 'md' },
+})
+
+export interface SelectProps extends Omit<ComponentProps<typeof SelectPrimitive.Trigger>, 'value' | 'defaultValue' | 'dir'> {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  placeholder?: string
+  surface?: 'bare' | 'well'
+  size?: 'sm' | 'md' | 'lg'
+  arrow?: boolean
+  children?: ReactNode
+}
+
+export function Select({
+  value,
+  defaultValue,
+  onValueChange,
+  open,
+  defaultOpen,
+  onOpenChange,
+  placeholder,
+  surface,
+  size,
+  arrow = false,
+  className,
+  children,
+  ...rest
+}: SelectProps) {
+  return (
+    <SelectPrimitive.Root
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={onValueChange}
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      <SelectPrimitive.Trigger {...rest} className={selectTrigger({ surface, size, className })}>
+        <span className="min-w-0 truncate">
+          <SelectPrimitive.Value placeholder={placeholder} />
+        </span>
+        <SelectPrimitive.Icon className="text-fg-subtle">
+          <ChevronDown className="size-4" />
+        </SelectPrimitive.Icon>
+      </SelectPrimitive.Trigger>
+
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+          className="bg-float text-fg rounded-float shadow-s3 z-overlay
+               min-w-(--radix-select-trigger-width) p-1
+               open:animate-enter closed:animate-exit"
+          position="popper"
+          sideOffset={8}
+          arrowPadding={16}
+        >
+          <SelectPrimitive.ScrollUpButton className="text-fg-subtle flex h-6 cursor-default items-center justify-center">
+            <ChevronUp className="size-4" />
+          </SelectPrimitive.ScrollUpButton>
+
+          <SelectPrimitive.Viewport className="flex flex-col gap-px">
+            {children}
+          </SelectPrimitive.Viewport>
+
+          <SelectPrimitive.ScrollDownButton className="text-fg-subtle flex h-6 cursor-default items-center justify-center">
+            <ChevronDown className="size-4" />
+          </SelectPrimitive.ScrollDownButton>
+
+          {arrow && <SelectPrimitive.Arrow className="fill-float" width={12} height={6} />}
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  )
+}
+
+export function SelectGroup({ label, className, children }: {
+  label?: string
+  className?: string
+  children?: ReactNode
+}) {
+  return (
+    <SelectPrimitive.Group className={tv({ base: 'flex flex-col gap-px' })({ className })}>
+      {label && (
+        <SelectPrimitive.Label className="text-caption text-fg-subtle px-2 pb-1 pt-2">
+          {label}
+        </SelectPrimitive.Label>
+      )}
+      {children}
+    </SelectPrimitive.Group>
+  )
+}
+
+export function SelectItem({ value, disabled, className, children }: {
+  value: string
+  disabled?: boolean
+  className?: string
+  children?: ReactNode
+}) {
+  return (
+    <SelectPrimitive.Item
+      value={value}
+      disabled={disabled}
+      className={tv({ base: 'flex min-h-9 cursor-default items-center justify-between gap-stack'
+        + ' rounded-r8 px-2 py-1 transition-state'
+        + ' data-highlighted:bg-hover data-highlighted:outline-none'
+        + ' data-disabled:text-fg-disabled data-disabled:pointer-events-none' })({ className })}
+    >
+      <span className="flex min-w-0 flex-col">
+        {children}
+      </span>
+
+      <SelectPrimitive.ItemIndicator className="text-fg-muted flex shrink-0">
+        <Check className="size-4" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+export function SelectItemText({ className, children }: { className?: string, children?: ReactNode }) {
+  return (
+    <SelectPrimitive.ItemText className={tv({ base: 'text-label text-fg' })({ className })}>
+      {children}
+    </SelectPrimitive.ItemText>
+  )
+}
+
+export function SelectItemDescription({ className, children }: { className?: string, children?: ReactNode }) {
+  return (
+    <span className={tv({ base: 'text-caption text-fg-subtle' })({ className })}>
+      {children}
+    </span>
+  )
+}
+
+export function SelectSeparator({ className }: { className?: string }) {
+  return <SelectPrimitive.Separator className={tv({ base: 'bg-line -mx-1 my-1 h-px' })({ className })} />
+}

package/styles.css

@@ -0,0 +1,347 @@
+@import "pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css";
+@import "./press.css";
+
+@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-state="checked"], [data-state="indeterminate"]));
+@custom-variant open    (&[data-state="open"]);
+@custom-variant closed  (&[data-state="closed"]);
+@custom-variant on      (&[data-state="on"]);
+@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)));
+
+:root, .light {
+  --gray-50:#f9fafb;   --gray-100:#f2f4f6; --gray-200:#e5e8eb; --gray-300:#d1d6db;
+  --gray-400:#b0b8c1;  --gray-500:#8b95a1; --gray-600:#6b7684; --gray-700:#4e5968;
+  --gray-800:#333d4b;  --gray-900:#191f28;
+
+  --purple-50:#f5f1fd;  --purple-100:#e4d6ff; --purple-200:#ceb0ff; --purple-300:#bb8ffa;
+  --purple-400:#aa74f2; --purple-500:#9c63e4; --purple-600:#8750c9; --purple-700:#7543b0;
+  --purple-800:#633997; --purple-900:#54317f;
+
+  --blue-50:#e8f3ff;  --blue-100:#c9e2ff; --blue-200:#90c2ff; --blue-300:#64a8ff;
+  --blue-400:#4593fc; --blue-500:#3182f6; --blue-600:#2272eb; --blue-700:#1b64da;
+  --blue-800:#1957c2; --blue-900:#194aa6;
+
+  --green-50:#f0faf6;  --green-100:#aeefd5; --green-200:#76e4b8; --green-300:#3fd599;
+  --green-400:#15c47e; --green-500:#03b26c; --green-600:#02a262; --green-700:#029359;
+  --green-800:#028450; --green-900:#027648;
+
+  --orange-50:#fff3e0;  --orange-100:#ffe0b0; --orange-200:#ffcd80; --orange-300:#ffbd51;
+  --orange-400:#ffa927; --orange-500:#fe9800; --orange-600:#fb8800; --orange-700:#f57800;
+  --orange-800:#ed6700; --orange-900:#e45600;
+
+  --red-50:#ffeeee;  --red-100:#ffd4d6; --red-200:#feafb4; --red-300:#fb8890;
+  --red-400:#f66570; --red-500:#f04452; --red-600:#e42939; --red-700:#d22030;
+  --red-800:#bc1b2a; --red-900:#a51926;
+}
+
+.dark {
+  --gray-50:#202027;   --gray-100:#2c2c35; --gray-200:#3c3c47; --gray-300:#4d4d59;
+  --gray-400:#62626d;  --gray-500:#7e7e87; --gray-600:#9e9ea4; --gray-700:#c3c3c6;
+  --gray-800:#e4e4e5;  --gray-900:#ffffff;
+
+  --purple-50:#362949;  --purple-100:#462e66; --purple-200:#583682; --purple-300:#6b3fa0;
+  --purple-400:#8451c4; --purple-500:#9c63e4; --purple-600:#ad75f7; --purple-700:#c094ff;
+  --purple-800:#d6baff; --purple-900:#eadeff;
+
+  --blue-50:#202c4d;  --blue-100:#23386a; --blue-200:#25478c; --blue-300:#265ab3;
+  --blue-400:#2970d9; --blue-500:#3485fa; --blue-600:#449bff; --blue-700:#61b0ff;
+  --blue-800:#8fcdff; --blue-900:#c8e7ff;
+
+  --green-50:#153729;  --green-100:#135338; --green-200:#136d47; --green-300:#138a59;
+  --green-400:#13a065; --green-500:#16bb76; --green-600:#26cf88; --green-700:#4ee4a6;
+  --green-800:#82f6c5; --green-900:#ccffea;
+
+  --orange-50:#3d2500;  --orange-100:#563200; --orange-200:#804600; --orange-300:#a85f00;
+  --orange-400:#cf7200; --orange-500:#f18600; --orange-600:#fd9528; --orange-700:#ffa861;
+  --orange-800:#ffc39e; --orange-900:#ffe4d6;
+
+  --red-50:#3c2020;  --red-100:#562025; --red-200:#7a242d; --red-300:#9e2733;
+  --red-400:#ca2f3d; --red-500:#f04251; --red-600:#fa616d; --red-700:#fe818b;
+  --red-800:#ffa8ad; --red-900:#ffd1d3;
+}
+
+@theme {
+  --color-*: initial;
+  --text-*: initial;
+  --leading-*: initial;
+  --font-weight-*: initial;
+}
+
+@theme {
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold:   700;
+
+  --font-sans: "Pretendard Variable", "Pretendard", -apple-system, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", "Pretendard Variable", "Pretendard", ui-monospace, monospace;
+
+  --text-display:    28px; --text-display--line-height:    38px; --text-display--font-weight:    700;
+  --text-title:      24px; --text-title--line-height:      32px; --text-title--font-weight:      700;
+  --text-section:    20px; --text-section--line-height:    27px; --text-section--font-weight:    700;
+  --text-subsection: 16px; --text-subsection--line-height: 22px; --text-subsection--font-weight: 700;
+  --text-label:      14px; --text-label--line-height:      19px; --text-label--font-weight:      500;
+  --text-caption:    13px; --text-caption--line-height:    18px; --text-caption--font-weight:    400;
+  --text-micro:      11px; --text-micro--line-height:      15px; --text-micro--font-weight:      500;
+
+  --text-t10: 10px; --text-t10--line-height: 14px; --text-t10--font-weight: 400;
+  --text-t11: 11px; --text-t11--line-height: 15px; --text-t11--font-weight: 400;
+  --text-t12: 12px; --text-t12--line-height: 16px; --text-t12--font-weight: 400;
+  --text-t13: 13px; --text-t13--line-height: 18px; --text-t13--font-weight: 400;
+  --text-t14: 14px; --text-t14--line-height: 19px; --text-t14--font-weight: 400;
+  --text-t16: 16px; --text-t16--line-height: 22px; --text-t16--font-weight: 400;
+  --text-t18: 18px; --text-t18--line-height: 24px; --text-t18--font-weight: 400;
+  --text-t20: 20px; --text-t20--line-height: 27px; --text-t20--font-weight: 400;
+  --text-t24: 24px; --text-t24--line-height: 32px; --text-t24--font-weight: 400;
+  --text-t28: 28px; --text-t28--line-height: 38px; --text-t28--font-weight: 400;
+  --text-t32: 32px; --text-t32--line-height: 43px; --text-t32--font-weight: 400;
+  --text-t40: 40px; --text-t40--line-height: 54px; --text-t40--font-weight: 400;
+  --text-t48: 48px; --text-t48--line-height: 65px; --text-t48--font-weight: 400;
+  --text-t56: 56px; --text-t56--line-height: 76px; --text-t56--font-weight: 400;
+  --text-t64: 64px; --text-t64--line-height: 86px; --text-t64--font-weight: 400;
+}
+
+@theme inline {
+  --text-prose: var(--ui-prose);
+  --text-prose--line-height: var(--ui-prose-lh);
+  --text-prose--font-weight: 400;
+
+  --text-value: var(--ui-value);
+  --text-value--line-height: var(--ui-value-lh);
+  --text-value--font-weight: 400;
+}
+
+:root {
+  --ui-prose: 16px; --ui-prose-lh: 24px;
+  --ui-value: 16px; --ui-value-lh: 22px;
+
+  @variant sm { --ui-prose: 14px; --ui-prose-lh: 22px; }
+  @variant sm { --ui-value: 14px; --ui-value-lh: 19px; }
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+  /* [TODO] size-adjust 를 지운다 — 시각 기준 이미지가 서고 나서 */
+  size-adjust: 96%;
+  unicode-range: U+0000-00FF, U+2000-206F;
+}
+
+@layer base {
+  :root { color-scheme: light; }
+  .dark { color-scheme: dark; }
+
+  body {
+    background-color: var(--color-canvas);
+    color: var(--color-fg);
+    font-family: var(--font-sans);
+  }
+
+  code, pre, kbd, samp { font-family: var(--font-mono); }
+}
+
+@theme inline {
+  --color-white:#ffffff;
+  --color-black:#000000;
+
+  --color-canvas: var(--ui-canvas);
+  --color-well: var(--ui-well);
+  --color-panel: var(--ui-panel);
+  --color-float: var(--ui-float);
+  --color-disabled: var(--gray-200);
+
+  --color-hover: var(--ui-hover);
+  --color-selected: var(--ui-selected);
+  --color-selected-hover: var(--ui-selected-hover);
+
+  --color-control-on: var(--gray-900);
+  --color-control-on-hover: var(--gray-800);
+  --color-control-on-disabled: var(--gray-600);
+  --color-fg-on-control: var(--gray-50);
+
+  --color-fg: var(--gray-900);
+  --color-fg-muted: var(--gray-700);
+  --color-fg-subtle: var(--gray-500);
+  --color-fg-placeholder: var(--gray-400);
+  --color-fg-disabled: var(--gray-600);
+  --color-fg-on-solid:#ffffff;
+
+  --color-line: var(--gray-200);
+  --color-line-strong: var(--gray-300);
+  --color-ring: var(--blue-500);
+
+  --color-neutral-solid: var(--gray-900);
+  --color-neutral-solid-hover: var(--gray-800);
+
+  --color-primary-solid: var(--purple-500);
+  --color-primary-solid-hover: var(--purple-600);
+  --color-primary-weak: var(--purple-50);
+  --color-primary-on-weak: var(--purple-700);
+  --color-primary-stroke: var(--purple-200);
+
+  --color-info: var(--blue-500);
+  --color-info-weak: var(--blue-50);
+  --color-info-on-weak: var(--blue-700);
+  --color-info-stroke: var(--blue-200);
+
+  --color-success: var(--green-500);
+  --color-success-weak: var(--green-50);
+  --color-success-on-weak: var(--green-700);
+  --color-success-stroke: var(--green-200);
+
+  --color-warning: var(--orange-500);
+  --color-warning-weak: var(--orange-50);
+  --color-warning-on-weak: var(--orange-700);
+  --color-warning-stroke: var(--orange-200);
+
+  --color-danger: var(--red-500);
+  --color-danger-weak: var(--red-50);
+  --color-danger-on-weak: var(--red-700);
+  --color-danger-stroke: var(--red-200);
+  --color-danger-solid: var(--red-500);
+  --color-danger-solid-hover: var(--red-600);
+}
+
+:root, .light {
+  --ui-canvas:#ffffff;
+  --ui-well:#f2f4f6;
+  --ui-panel:#ffffff;
+  --ui-float:#ffffff;
+  --ui-hover: rgba(0,23,51,0.02);
+  --ui-selected: rgba(2,32,71,0.05);
+  --ui-selected-hover: rgba(0,27,55,0.1);
+}
+
+.dark {
+  --ui-canvas:#17171c;
+  --ui-well:#101013;
+  --ui-panel:#202027;
+  --ui-float:#2c2c35;
+  --ui-hover: rgba(209,209,253,0.05);
+  --ui-selected: rgba(217,217,255,0.11);
+  --ui-selected-hover: rgba(222,222,255,0.19);
+}
+
+@theme {
+  --spacing-tight:    4px;
+  --spacing-stack:   16px;
+  --spacing-block:   32px;
+  --spacing-section: 48px;
+  --spacing-gutter:  16px;
+
+  --container-app: 1280px;
+}
+
+@theme {
+  --radius-*: initial;
+
+  --radius-mark:   4px;
+  --radius-well:   8px;
+  --radius-panel: 12px;
+  --radius-float: 16px;
+
+  --radius-r2:   2px;  --radius-r4:   4px;  --radius-r6:   6px;
+  --radius-r8:   8px;  --radius-r10: 10px;  --radius-r12: 12px;
+  --radius-r14: 14px;  --radius-r16: 16px;  --radius-r20: 20px;
+  --radius-r24: 24px;
+}
+
+@theme {
+  --ease-*: initial;
+
+  --ease-state: cubic-bezier(.35, 0, .65, 1);
+  --ease-enter: cubic-bezier(0, 0, .15, 1);
+  --ease-exit:  cubic-bezier(.35, 0, 1, 1);
+}
+
+:root {
+  --dur-state: 150ms;
+  --dur-enter: 200ms;
+  --dur-exit:  150ms;
+  --enter-scale: 0.95;
+  --draw-len: 24;
+}
+
+@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);  }
+
+@media (prefers-reduced-motion: reduce) {
+  :root { --enter-scale: 1; }
+}
+
+@theme {
+  --shadow-*: initial;
+
+  --shadow-s1: 0 1px  4px 0 var(--shade-1);
+  --shadow-s2: 0 2px 10px 0 var(--shade-2);
+  --shadow-s3: 0 4px 16px 0 var(--shade-3);
+}
+
+:root, .light { --shade-1:#00000014; --shade-2:#0000001a; --shade-3:#0000001f; }
+.dark { --shade-1:#00000080; --shade-2:#000000ad; --shade-3:#000000cc; }
+
+@theme inline {
+  --color-overlay: var(--ui-overlay);
+}
+:root, .light { --ui-overlay: rgba(0,0,0,0.2); }
+.dark { --ui-overlay: rgba(0,0,0,0.56); }
+
+@utility z-sticky  { z-index: 10; }
+@utility z-overlay { z-index: 50; }
+@utility z-toast   { z-index: 60; }
+
+:root { --header-h: 56px; }
+
+@utility side-rail {
+  position: sticky;
+  top: var(--header-h);
+  max-height: calc(100dvh - var(--header-h));
+  overflow-y: auto;
+}
+
+@utility scroll-slim {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-line-strong) transparent;
+}
+
+@utility scroll-hidden {
+  scrollbar-width: none;
+  &::-webkit-scrollbar { display: none; }
+}

package/switch/AGENTS.md

@@ -0,0 +1,37 @@
+# Switch
+
+```
+받기   npx @pantoia/ui add switch
+층     ui
+파일   switch/index.tsx · switch/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Switch` | `SwitchProps` |
+
+## props
+
+### `SwitchProps`
+
+`ComponentProps<typeof SwitchPrimitive.Root>` 를 확장한다.
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `color` | `'control' \| 'info' \| 'success' \| 'warning' \| 'danger'` |  |
+
+## 변형 — `uiSwitch`
+
+| 축 | 값 | 기본 |
+|---|---|---|
+| `color` | `control` · `info` · `success` · `warning` · `danger` | `control` |
+
+## 함께 받는 것
+
+`tv`
+
+## npm 의존
+
+`radix-ui`

package/switch/index.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { Switch as SwitchPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+
+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',
+
+  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' },
+})
+
+export interface SwitchProps extends ComponentProps<typeof SwitchPrimitive.Root> {
+  color?: 'control' | '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
+             transition-transform ease-state motion-reduce:transition-none"
+      />
+    </SwitchPrimitive.Root>
+  )
+}