@pantoia/ui 0.3.0 → 0.5.0

package/README.md

@@ -0,0 +1,46 @@
+# Pantoia UI
+
+React 디자인 시스템 패키지. 문서는 `design.pantoia.com`
+
+## 사용
+
+```
+npx @pantoia/ui init          components.json을 만든다
+npx @pantoia/ui add button    components/ui/button/에 소스를 복사한다
+npx @pantoia/ui list          컴포넌트 목록
+npx @pantoia/ui diff          복사한 소스와 배포본의 차이
+```
+
+`init`이 전역 CSS에 아래 줄을 추가한다.
+
+```css
+@import "@pantoia/ui/tailwind.css";
+```
+
+## 개발
+
+호스트에는 Docker만 있으면 된다.
+
+```
+git clone git@github.com:pantoia/pantoia-ui.git
+cd pantoia-ui
+docker compose up -d dev
+```
+
+편집기는 `.devcontainer/devcontainer.json`으로 컨테이너 안에서 연다.
+
+```
+docker compose up -d dev                        실행
+docker compose down                             종료
+docker compose exec dev npm run verify          typecheck, check, lint, test
+docker compose exec dev npm pack                tarball
+```
+
+## 구조
+
+```
+<이름>/               컴포넌트
+cli/                  CLI
+docs/decisions/       결정 기록
+.claude/rules/        일하는 규칙
+```

package/accordion/index.module.css

@@ -1,9 +1,9 @@
-@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; } }
+@keyframes acc-open  { from { height: 0; } to { height: var(--accordion-panel-height); } }
+@keyframes acc-close { from { height: var(--accordion-panel-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); }
+.panel[data-open]   { animation: acc-open  var(--dur-enter) var(--ease-enter); }
+.panel[data-closed] { animation: acc-close var(--dur-exit)  var(--ease-exit); }
 
 @media (prefers-reduced-motion: reduce) {
   .panel { animation: none; }

package/accordion/index.tsx

@@ -1,77 +1,45 @@
 'use client'
 
-import { Accordion as AccordionPrimitive } from 'radix-ui'
-import type { ReactNode } from 'react'
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'
+import type { ComponentProps } 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 type AccordionProps = Omit<AccordionPrimitive.Root.Props<string>, 'className'> & { className?: string }
 
 const accordion = tv({ base: 'frame rounded-r12 overflow-hidden divide-y divide-line' })
 
-export function Accordion({ value, defaultValue, onValueChange, multiple, className, children }: AccordionProps) {
-  const shared = {
-    className: accordion({ 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 Accordion({ className, ...rest }: AccordionProps) {
+  return <AccordionPrimitive.Root<string> {...rest} className={accordion({ className })} />
 }
 
-export function AccordionItem({ value, disabled, className, children }: {
+export type AccordionItemProps = Omit<ComponentProps<typeof AccordionPrimitive.Item>, 'className' | 'value'> & {
   value: string
-  disabled?: boolean
   className?: string
-  children?: ReactNode
-}) {
-  return (
-    <AccordionPrimitive.Item value={value} disabled={disabled} className={className}>
-      {children}
-    </AccordionPrimitive.Item>
-  )
+}
+
+export function AccordionItem(props: AccordionItemProps) {
+  return <AccordionPrimitive.Item {...props} />
 }
 
 const accordionTrigger = 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-bg-neutral-hover'
-    + ' disabled:text-fg-disabled disabled:cursor-not-allowed'
+    + ' press data-panel-open:border-line not-data-disabled:hover:bg-bg-neutral-hover'
+    + ' data-disabled:text-fg-disabled data-disabled:cursor-not-allowed'
     + ' focus-visible:outline-2 focus-visible:-outline-offset-2'
     + ' focus-visible:outline-line-focus-ring',
 })
 
-export function AccordionTrigger({ className, children }: { className?: string, children?: ReactNode }) {
+export type AccordionTriggerProps = Omit<ComponentProps<typeof AccordionPrimitive.Trigger>, 'className'> & { className?: string }
+
+export function AccordionTrigger({ className, children, ...rest }: AccordionTriggerProps) {
   return (
     <AccordionPrimitive.Header>
       <AccordionPrimitive.Trigger
+        {...rest}
         className={accordionTrigger({ className })}
       >
         <span className="flex min-w-0 grow items-center gap-tight">{children}</span>
@@ -90,12 +58,14 @@ export function AccordionTrigger({ className, children }: { className?: string,
 
 const accordionContent = tv({ base: 'bg-bg-well text-caption text-fg-muted px-4 py-3' })
 
-export function AccordionContent({ className, children }: { className?: string, children?: ReactNode }) {
+export type AccordionContentProps = Omit<ComponentProps<typeof AccordionPrimitive.Panel>, 'className'> & { className?: string }
+
+export function AccordionContent({ className, children, ...rest }: AccordionContentProps) {
   return (
-    <AccordionPrimitive.Content className={s.panel}>
+    <AccordionPrimitive.Panel {...rest} className={s.panel}>
       <div className={accordionContent({ className })}>
         {children}
       </div>
-    </AccordionPrimitive.Content>
+    </AccordionPrimitive.Panel>
   )
 }

package/alert-dialog/index.tsx

@@ -1,28 +1,21 @@
 'use client'
 
-import { AlertDialog as AlertDialogPrimitive } from 'radix-ui'
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog'
 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 type AlertDialogProps = ComponentProps<typeof AlertDialogPrimitive.Root>
 
-export function AlertDialog({ open, defaultOpen, onOpenChange, children }: AlertDialogProps) {
-  return (
-    <AlertDialogPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-      {children}
-    </AlertDialogPrimitive.Root>
-  )
+export function AlertDialog(props: AlertDialogProps) {
+  return <AlertDialogPrimitive.Root {...props} />
 }
 
-export function AlertDialogTrigger({ children }: { children: ReactNode }) {
-  return <AlertDialogPrimitive.Trigger asChild>{children}</AlertDialogPrimitive.Trigger>
+export type AlertDialogTriggerProps = ComponentProps<typeof AlertDialogPrimitive.Trigger>
+
+export function AlertDialogTrigger(props: AlertDialogTriggerProps) {
+  return <AlertDialogPrimitive.Trigger {...props} />
 }
 
 const alertDialogContent = tv({
@@ -33,30 +26,42 @@ const alertDialogContent = tv({
     + ' focus-visible:outline-none',
 })
 
-export function AlertDialogContent({ className, children, ...rest }: ComponentProps<typeof AlertDialogPrimitive.Content>) {
+export type AlertDialogContentProps = Omit<ComponentProps<typeof AlertDialogPrimitive.Popup>, 'className'> & {
+  className?: string
+}
+
+export function AlertDialogContent({ className, children, ...rest }: AlertDialogContentProps) {
   return (
     <AlertDialogPrimitive.Portal>
-      <AlertDialogPrimitive.Overlay className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+      <AlertDialogPrimitive.Backdrop className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
 
-      <AlertDialogPrimitive.Content
+      <AlertDialogPrimitive.Popup
         {...rest}
         className={alertDialogContent({ className })}
       >
         {children}
-      </AlertDialogPrimitive.Content>
+      </AlertDialogPrimitive.Popup>
     </AlertDialogPrimitive.Portal>
   )
 }
 
 const alertDialogTitle = tv({ base: 'text-section' })
 
-export function AlertDialogTitle({ className, ...rest }: ComponentProps<typeof AlertDialogPrimitive.Title>) {
+export type AlertDialogTitleProps = Omit<ComponentProps<typeof AlertDialogPrimitive.Title>, 'className'> & {
+  className?: string
+}
+
+export function AlertDialogTitle({ className, ...rest }: AlertDialogTitleProps) {
   return <AlertDialogPrimitive.Title {...rest} className={alertDialogTitle({ className })} />
 }
 
 const alertDialogDescription = tv({ base: 'text-prose text-fg-muted' })
 
-export function AlertDialogDescription({ className, ...rest }: ComponentProps<typeof AlertDialogPrimitive.Description>) {
+export type AlertDialogDescriptionProps = Omit<ComponentProps<typeof AlertDialogPrimitive.Description>, 'className'> & {
+  className?: string
+}
+
+export function AlertDialogDescription({ className, ...rest }: AlertDialogDescriptionProps) {
   return (
     <AlertDialogPrimitive.Description
       {...rest}
@@ -93,7 +98,7 @@ export function AlertDialogHeader({ lead, trail, className, children }: AlertDia
   )
 }
 
-const alertDialogFooter = tv({ base: 'flex justify-end gap-2' })
+const alertDialogFooter = tv({ base: 'mt-auto flex justify-end gap-2' })
 
 export function AlertDialogFooter({ className, children }: { className?: string, children?: ReactNode }) {
   return (
@@ -103,27 +108,16 @@ export function AlertDialogFooter({ className, children }: { className?: string,
   )
 }
 
-export function AlertDialogAction({ color = 'neutral', onClick, className, children }: {
+export type AlertDialogActionProps = Omit<ComponentProps<typeof AlertDialogPrimitive.Close>, 'color'> & {
   color?: 'neutral' | 'brand' | '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>
-  )
+export function AlertDialogAction({ color = 'neutral', render, ...rest }: AlertDialogActionProps) {
+  return <AlertDialogPrimitive.Close {...rest} render={render ?? <Button emphasis="solid" color={color} />} />
+}
+
+export type AlertDialogCancelProps = ComponentProps<typeof AlertDialogPrimitive.Close>
+
+export function AlertDialogCancel({ render, ...rest }: AlertDialogCancelProps) {
+  return <AlertDialogPrimitive.Close {...rest} render={render ?? <Button color="neutral" emphasis="outline" />} />
 }

package/badge/index.tsx

@@ -8,7 +8,7 @@ export const badge = tv({
 
   variants: {
     color: {
-      neutral: 'bg-bg-well text-fg-muted',
+      neutral: 'bg-bg-neutral-solid/10 text-fg',
       brand: 'bg-bg-brand-weak text-fg-brand-contrast',
       info: 'bg-bg-info-weak text-fg-info-contrast',
       success: 'bg-bg-success-weak text-fg-success-contrast',

package/button/index.tsx

@@ -1,4 +1,5 @@
-import type { ButtonHTMLAttributes } from 'react'
+import { Button as ButtonPrimitive } from '@base-ui/react/button'
+import type { ComponentProps } from 'react'
 
 import { tv } from '../tv'
 
@@ -7,7 +8,7 @@ export const button = tv({
     + ' rounded-r8 text-label'
     + ' transition-state press press-shrink'
     + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
-    + ' disabled:text-fg-disabled disabled:cursor-not-allowed',
+    + ' data-disabled:text-fg-disabled data-disabled:cursor-not-allowed',
 
   variants: {
     color: { brand: '', neutral: '', danger: '' },
@@ -28,46 +29,46 @@ export const button = tv({
   compoundVariants: [
     { color: 'brand', emphasis: 'solid',
       class: 'bg-bg-brand-solid text-fg-brand-solid-contrast'
-        + ' enabled:hover:bg-bg-brand-solid-hover'
-        + ' disabled:bg-bg-brand-solid/20' },
+        + ' not-data-disabled:hover:bg-bg-brand-solid-hover'
+        + ' data-disabled:bg-bg-brand-solid/20' },
     { color: 'brand', emphasis: 'weak',
-      class: 'bg-bg-brand-weak text-fg-brand-contrast disabled:text-fg-brand-contrast/40'
-        + ' enabled:hover:bg-bg-brand-solid/10' },
+      class: 'bg-bg-brand-weak text-fg-brand-contrast data-disabled:text-fg-brand-contrast/40'
+        + ' not-data-disabled:hover:bg-bg-brand-solid/10' },
     { color: 'brand', emphasis: 'outline',
-      class: 'text-fg-brand-contrast disabled:text-fg-brand-contrast/40'
-        + ' ring-1 ring-inset ring-line-brand-weak disabled:ring-line'
-        + ' enabled:hover:bg-bg-brand-solid/10' },
+      class: 'text-fg-brand-contrast data-disabled:text-fg-brand-contrast/40'
+        + ' ring-1 ring-inset ring-line-brand-weak data-disabled:ring-line'
+        + ' not-data-disabled:hover:bg-bg-brand-solid/10' },
     { color: 'brand', emphasis: 'ghost',
-      class: 'text-fg-brand-contrast disabled:text-fg-brand-contrast/40'
-        + ' enabled:hover:bg-bg-brand-solid/10' },
+      class: 'text-fg-brand-contrast data-disabled:text-fg-brand-contrast/40'
+        + ' not-data-disabled:hover:bg-bg-brand-solid/10' },
 
     { color: 'neutral', emphasis: 'solid',
       class: 'bg-bg-neutral-solid text-fg-neutral-solid-contrast'
-        + ' enabled:hover:bg-bg-neutral-solid-hover'
-        + ' disabled:bg-bg-neutral-solid/20' },
+        + ' not-data-disabled:hover:bg-bg-neutral-solid-hover'
+        + ' data-disabled:bg-bg-neutral-solid/20' },
     { color: 'neutral', emphasis: 'weak',
-      class: 'bg-bg-well text-fg'
-        + ' enabled:hover:bg-bg-neutral-solid/10' },
+      class: 'bg-bg-neutral-solid/8 text-fg'
+        + ' not-data-disabled:hover:bg-bg-neutral-solid/16' },
     { color: 'neutral', emphasis: 'outline',
-      class: 'text-fg ring-1 ring-inset ring-line-strong disabled:ring-line'
-        + ' enabled:hover:bg-bg-neutral-hover' },
+      class: 'text-fg ring-1 ring-inset ring-line-strong data-disabled:ring-line'
+        + ' not-data-disabled:hover:bg-bg-neutral-hover' },
     { color: 'neutral', emphasis: 'ghost',
-      class: 'text-fg enabled:hover:bg-bg-neutral-hover' },
+      class: 'text-fg not-data-disabled:hover:bg-bg-neutral-hover' },
 
     { color: 'danger', emphasis: 'solid',
       class: 'bg-bg-danger-solid text-white'
-        + ' enabled:hover:bg-bg-danger-solid-hover'
-        + ' disabled:bg-bg-danger-solid/20' },
+        + ' not-data-disabled:hover:bg-bg-danger-solid-hover'
+        + ' data-disabled:bg-bg-danger-solid/20' },
     { color: 'danger', emphasis: 'weak',
-      class: 'bg-bg-danger-weak text-fg-danger-contrast disabled:text-fg-danger-contrast/40'
-        + ' enabled:hover:bg-bg-danger-solid/10' },
+      class: 'bg-bg-danger-weak text-fg-danger-contrast data-disabled:text-fg-danger-contrast/40'
+        + ' not-data-disabled:hover:bg-bg-danger-solid/10' },
     { color: 'danger', emphasis: 'outline',
-      class: 'text-fg-danger-contrast disabled:text-fg-danger-contrast/40'
-        + ' ring-1 ring-inset ring-line-danger-weak disabled:ring-line'
-        + ' enabled:hover:bg-bg-danger-solid/10' },
+      class: 'text-fg-danger-contrast data-disabled:text-fg-danger-contrast/40'
+        + ' ring-1 ring-inset ring-line-danger-weak data-disabled:ring-line'
+        + ' not-data-disabled:hover:bg-bg-danger-solid/10' },
     { color: 'danger', emphasis: 'ghost',
-      class: 'text-fg-danger-contrast disabled:text-fg-danger-contrast/40'
-        + ' enabled:hover:bg-bg-danger-solid/10' },
+      class: 'text-fg-danger-contrast data-disabled:text-fg-danger-contrast/40'
+        + ' not-data-disabled:hover:bg-bg-danger-solid/10' },
 
     { shape: ['rect', 'pill'], size: 'sm', class: 'px-3' },
     { shape: ['rect', 'pill'], size: 'md', class: 'px-3.5' },
@@ -80,7 +81,8 @@ export const button = tv({
   defaultVariants: { size: 'md', shape: 'rect' },
 })
 
-export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+export interface ButtonProps extends Omit<ComponentProps<typeof ButtonPrimitive>, 'className' | 'color'> {
+  className?: string
   color: 'brand' | 'neutral' | 'danger'
   emphasis: 'solid' | 'weak' | 'outline' | 'ghost'
   size?: 'sm' | 'md' | 'lg'
@@ -89,8 +91,7 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
 
 export function Button({ color, emphasis, size, shape, className, ...rest }: ButtonProps) {
   return (
-    <button
-      type="button"
+    <ButtonPrimitive
       {...rest}
       className={button({ color, emphasis, size, shape, className })}
     />

package/callout/index.tsx

@@ -37,27 +37,27 @@ export const callout = tv({
 
 const ICONS = {
   info: (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-5">
       <circle cx="12" cy="12" r="10" />
       <path d="M12 16v-4" />
       <path d="M12 8h.01" />
     </svg>
   ),
   success: (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-5">
       <circle cx="12" cy="12" r="10" />
       <path d="m16 9-5.5 5.5L8 12" />
     </svg>
   ),
   warning: (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-5">
       <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
       <path d="M12 9v4" />
       <path d="M12 17h.01" />
     </svg>
   ),
   danger: (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-5">
       <circle cx="12" cy="12" r="10" />
       <path d="m15 9-6 6" />
       <path d="m9 9 6 6" />

package/checkbox/index.tsx

@@ -1,15 +1,8 @@
 'use client'
 
-import { Checkbox as CheckboxPrimitive } from 'radix-ui'
-import {
-  createContext,
-  use,
-  useRef,
-  useState,
-  type ComponentProps,
-  type KeyboardEvent as ReactKeyboardEvent,
-  type ReactNode,
-} from 'react'
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
+import { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group'
+import type { ComponentProps } from 'react'
 
 import { tv } from '../tv'
 
@@ -36,52 +29,25 @@ export const checkbox = tv({
   defaultVariants: { color: 'neutral' },
 })
 
-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 type CheckboxGroupProps = Omit<ComponentProps<typeof CheckboxGroupPrimitive>, 'className'> & { className?: string }
+
+type GroupKeyEvent = Parameters<NonNullable<CheckboxGroupProps['onKeyDown']>>[0]
 
 const checkboxGroup = tv({ base: 'flex flex-col gap-3' })
 
-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)
-  }
+export function CheckboxGroup({ className, onKeyDown, ...rest }: CheckboxGroupProps) {
+  const onKeys = (e: GroupKeyEvent) => {
+    onKeyDown?.(e)
+    if (e.defaultPrevented) return
 
-  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
+    if (step === 0) return
 
-    const items = [...root.current.querySelectorAll<HTMLElement>(ITEMS)]
+    const items = [...e.currentTarget.querySelectorAll<HTMLElement>(ITEMS)]
     const at = items.indexOf(document.activeElement as HTMLElement)
     if (at === -1) return
 
@@ -89,59 +55,28 @@ export function CheckboxGroup({
     items[(at + step + items.length) % items.length]!.focus()
   }
 
-  return (
-    <Group value={{ value: list, toggle, disabled }}>
-      <div
-        ref={root}
-        role="group"
-        onKeyDown={onKeyDown}
-        className={checkboxGroup({ className })}
-      >
-        {children}
-      </div>
-    </Group>
-  )
+  return <CheckboxGroupPrimitive {...rest} onKeyDown={onKeys} className={checkboxGroup({ className })} />
 }
 
-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
+export type CheckboxProps = Omit<ComponentProps<typeof CheckboxPrimitive.Root>, 'className'> & {
   color?: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+  className?: string
 }
 
 export function Checkbox({
-  value,
-  checked,
-  onCheckedChange,
   indeterminate,
-  onIndeterminateChange,
   color,
   className,
-  disabled,
+  nativeButton = true,
+  render = <button type="button" />,
   ...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}
+      nativeButton={nativeButton}
+      render={render}
+      indeterminate={indeterminate}
       className={checkbox({ color, className })}
     >
       <CheckboxPrimitive.Indicator className="text-fg-neutral-solid-contrast flex">