@pantoia/ui 0.2.0 → 0.4.0

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,99 +1,71 @@
 'use client'
 
-import { ChevronDown } from 'lucide-react'
-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
-}
-
-const accordion = tv({ base: 'frame rounded-panel overflow-hidden divide-y divide-line' })
+export type AccordionProps = Omit<AccordionPrimitive.Root.Props<string>, 'className'> & { className?: string }
 
-export function Accordion({ value, defaultValue, onValueChange, multiple, className, children }: AccordionProps) {
-  const shared = {
-    className: accordion({ className }),
-    children,
-  }
+const accordion = tv({ base: 'frame rounded-r12 overflow-hidden divide-y divide-line' })
 
-  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-foreground flex h-11 w-full items-center'
+  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-foreground-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>
 
-        <ChevronDown
-          className="text-foreground-subtle size-4 shrink-0 transition-transform open:rotate-180
+        <svg
+          viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"
+          className="text-fg-subtle size-4 shrink-0 transition-transform open:rotate-180
                motion-reduce:transition-none"
-        />
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
   )
 }
 
-const accordionContent = tv({ base: 'bg-background-well text-caption text-foreground-muted px-4 py-3' })
+const accordionContent = tv({ base: 'bg-bg-well text-caption text-fg-muted px-4 py-3' })
+
+export type AccordionContentProps = Omit<ComponentProps<typeof AccordionPrimitive.Panel>, 'className'> & { className?: string }
 
-export function AccordionContent({ className, children }: { className?: string, children?: ReactNode }) {
+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,62 +1,67 @@
 '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({
-  base: 'sheet text-foreground z-overlay fixed left-1/2 top-1/2'
+  base: 'sheet 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',
 })
 
-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-background-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-foreground-muted' })
+const alertDialogDescription = tv({ base: 'text-prose text-fg-muted' })
+
+export type AlertDialogDescriptionProps = Omit<ComponentProps<typeof AlertDialogPrimitive.Description>, 'className'> & {
+  className?: string
+}
 
-export function AlertDialogDescription({ className, ...rest }: ComponentProps<typeof AlertDialogPrimitive.Description>) {
+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-background-well text-foreground-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',
@@ -16,7 +16,7 @@ export const badge = tv({
       danger: 'bg-bg-danger-weak text-fg-danger-contrast',
     },
     shape: {
-      square: 'rounded-mark',
+      square: 'rounded-r4',
       pill: 'rounded-full',
     },
   },

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-foreground-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-background-well text-foreground'
-        + ' 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-foreground 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-foreground 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

@@ -1,11 +1,10 @@
-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',
+    root: 'flex gap-stack rounded-r12 border p-4 text-prose',
     icon: 'flex shrink-0 mt-0.5 [&_svg]:size-5',
     title: 'font-bold',
     body: 'flex min-w-0 flex-1 flex-col gap-tight',
@@ -37,10 +36,33 @@ export const callout = tv({
 })
 
 const ICONS = {
-  info: Info,
-  success: CircleCheck,
-  warning: TriangleAlert,
-  danger: CircleX,
+  info: (
+    <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" 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" 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" className="size-5">
+      <circle cx="12" cy="12" r="10" />
+      <path d="m15 9-6 6" />
+      <path d="m9 9 6 6" />
+    </svg>
+  ),
 } as const
 
 export interface CalloutProps {
@@ -53,12 +75,11 @@ export interface CalloutProps {
 
 export function Callout({ color, icon, title, className, children }: CalloutProps) {
   const ui = callout({ color })
-  const Fallback = ICONS[color ?? 'info']
 
   return (
     <div className={ui.root({ className })} role="alert">
       <span className={ui.icon()}>
-        {icon ?? <Fallback />}
+        {icon ?? ICONS[color ?? 'info']}
       </span>
       <div className={ui.body()}>
         {title && <span className={ui.title()}>{title}</span>}

package/checkbox/index.tsx

@@ -1,21 +1,13 @@
 '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 { 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'
 
 export const checkbox = tv({
-  base: 'size-5 shrink-0 rounded-mark inline-flex items-center justify-center'
+  base: 'size-5 shrink-0 rounded-r4 inline-flex items-center justify-center'
     + ' bg-transparent ring-1 ring-inset ring-line-strong'
     + ' transition-state press press-shrink'
     + ' checked:ring-2'
@@ -37,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
 
@@ -90,63 +55,34 @@ 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">
-        {indeterminate ? <Minus className="size-4" /> : <Check className="size-4" />}
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+          {indeterminate ? <path d="M5 12h14" /> : <path d="M20 6 9 17l-5-5" />}
+        </svg>
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )