@pantoia/ui 0.12.1 → 0.14.0

package/registry.json

@@ -87,6 +87,29 @@
         "layer": "ui"
       }
     },
+    {
+      "name": "avatar-group",
+      "type": "registry:ui",
+      "title": "AvatarGroup",
+      "files": [
+        {
+          "path": "avatar-group/index.tsx",
+          "type": "registry:ui"
+        },
+        {
+          "path": "avatar-group/index.module.css",
+          "type": "registry:ui"
+        }
+      ],
+      "dependencies": [],
+      "registryDependencies": [
+        "avatar",
+        "tv"
+      ],
+      "meta": {
+        "layer": "ui"
+      }
+    },
     {
       "name": "badge",
       "type": "registry:ui",
@@ -125,6 +148,7 @@
         "@base-ui/react"
       ],
       "registryDependencies": [
+        "button",
         "tv"
       ],
       "meta": {
@@ -295,6 +319,7 @@
         "@base-ui/react"
       ],
       "registryDependencies": [
+        "button",
         "tv"
       ],
       "meta": {
@@ -320,6 +345,7 @@
         "@base-ui/react"
       ],
       "registryDependencies": [
+        "button",
         "tv"
       ],
       "meta": {
@@ -615,6 +641,31 @@
         "layer": "ui"
       }
     },
+    {
+      "name": "swatch-picker",
+      "type": "registry:ui",
+      "title": "SwatchPicker",
+      "files": [
+        {
+          "path": "swatch-picker/index.tsx",
+          "type": "registry:ui"
+        },
+        {
+          "path": "swatch-picker/index.module.css",
+          "type": "registry:ui"
+        }
+      ],
+      "dependencies": [
+        "@base-ui/react"
+      ],
+      "registryDependencies": [
+        "tooltip",
+        "tv"
+      ],
+      "meta": {
+        "layer": "ui"
+      }
+    },
     {
       "name": "switch",
       "type": "registry:ui",
@@ -717,12 +768,10 @@
         "@base-ui/react"
       ],
       "registryDependencies": [
-        "button",
         "tv"
       ],
       "meta": {
-        "layer": "ui",
-        "radius": "rounded-r8"
+        "layer": "ui"
       }
     },
     {
@@ -748,6 +797,27 @@
         ]
       }
     },
+    {
+      "name": "toggle-group",
+      "type": "registry:ui",
+      "title": "ToggleGroup",
+      "files": [
+        {
+          "path": "toggle-group/index.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "dependencies": [
+        "@base-ui/react"
+      ],
+      "registryDependencies": [
+        "toggle",
+        "tv"
+      ],
+      "meta": {
+        "layer": "ui"
+      }
+    },
     {
       "name": "tooltip",
       "type": "registry:ui",

package/select/index.tsx

@@ -95,6 +95,7 @@ export type SelectProps = Omit<ComponentProps<typeof SelectPrimitive.Trigger>, '
     arrow?: boolean
     className?: string
   }
+  & Pick<ComponentProps<typeof SelectPrimitive.Positioner>, 'sideOffset' | 'alignOffset' | 'collisionAvoidance'>
 
 export function Select({
   value,
@@ -113,6 +114,9 @@ export function Select({
   surface,
   size,
   arrow = false,
+  sideOffset,
+  alignOffset,
+  collisionAvoidance,
   className,
   children,
   ...rest
@@ -166,7 +170,9 @@ export function Select({
         <SelectPrimitive.Positioner
           alignItemWithTrigger={false}
           align="start"
-          sideOffset={arrow ? 14 : 8}
+          sideOffset={sideOffset ?? (arrow ? 14 : 8)}
+          alignOffset={alignOffset}
+          collisionAvoidance={collisionAvoidance}
           arrowPadding={16}
           className="z-overlay min-w-max will-change-transform"
         >

package/skills/pantoia-design/SKILL.md

@@ -148,6 +148,7 @@ className     그 한 곳만 바뀐다
 | Accordion | accordion | Accordion, AccordionItem, AccordionTrigger, AccordionContent | - |
 | AlertDialog | alert-dialog | AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, AlertDialogAction, AlertDialogCancel | size |
 | Avatar | avatar | Avatar | color, size |
+| AvatarGroup | avatar-group | AvatarGroup | size |
 | Badge | badge | Badge | color, emphasis, shape |
 | BottomSheet | bottom-sheet | BottomSheet, BottomSheetTrigger, BottomSheetClose, BottomSheetContent, BottomSheetHeader, BottomSheetTitle, BottomSheetDescription, BottomSheetBody, BottomSheetFooter | - |
 | Button | button | Button | color, emphasis, size, shape |
@@ -156,10 +157,10 @@ className     그 한 곳만 바뀐다
 | Collapsible | collapsible | Collapsible, CollapsibleTrigger, CollapsibleContent | - |
 | Combobox | combobox | Combobox, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel, ComboboxContent, ComboboxViewport, ComboboxCollection, ComboboxItem, ComboboxItemText, ComboboxItemDescription, ComboboxGroup, ComboboxEmpty, ComboboxSeparator | surface, size |
 | CommandPalette | command-palette | CommandPalette | - |
-| ContextMenu | context-menu | ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent | color |
+| ContextMenu | context-menu | ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemDescription, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent | color |
 | Dialog | dialog | Dialog, DialogTrigger, DialogClose, DialogContent, DialogTitle, DialogDescription, DialogHeader, DialogBody, DialogFooter | size |
 | Drawer | drawer | Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter | side |
-| DropdownMenu | dropdown-menu | DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent | color |
+| DropdownMenu | dropdown-menu | DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemDescription, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent | color |
 | Field | field | Field, FieldLabel, FieldHelp, FieldError, FieldPending, FieldSuccess | layout |
 | Fieldset | fieldset | Fieldset, FieldsetLegend | - |
 | Input | input | Input | surface, size |
@@ -173,12 +174,14 @@ className     그 한 곳만 바뀐다
 | SegmentedControl | segmented-control | SegmentedControl, SegmentedControlItem | size, fill |
 | Select | select | Select, SelectGroup, SelectItem, SelectItemText, SelectItemDescription, SelectSeparator | surface, size |
 | Separator | separator | Separator | orientation |
+| SwatchPicker | swatch-picker | SwatchPicker, SwatchPickerItem, SwatchPickerCustom | size |
 | Switch | switch | Switch | color |
 | Table | table | Table, TableHeader, TableHeadCell, TableBody, TableRow, TableCell | fixed, mono |
 | Tabs | tabs | Tabs, TabsList, TabsTrigger, TabsContent | - |
 | Textarea | textarea | Textarea | surface, size |
 | Toast | toast | Toast | - |
-| Toggle | toggle | Toggle | surface |
+| Toggle | toggle | Toggle | size, shape, color, surface |
+| ToggleGroup | toggle-group | ToggleGroup, ToggleGroupItem | size, shape, surface |
 | Tooltip | tooltip | TooltipProvider, Tooltip, TooltipTrigger, TooltipContent | - |
 
 컴포넌트를 고를 때 헷갈리는 짝은 이렇다.
@@ -196,6 +199,7 @@ Badge와 Button               누를 수 없으면 Badge, 누르면 Button
 Tabs와 Accordion             한 번에 하나만 보이면 Tabs, 여러 개를 펴 두면 Accordion
 SegmentedControl과 Tabs      같은 내용의 보기 방식을 바꾸면 SegmentedControl, 다른 내용으로 바꾸면 Tabs
 SegmentedControl과 Toggle    여럿 중 하나를 고르면 SegmentedControl, 하나를 켜고 끄면 Toggle
+SegmentedControl과 ToggleGroup   이어진 트랙 안에서 고르면 SegmentedControl, 떨어진 알약 여러 개 중에 고르면 ToggleGroup
 Collapsible과 Accordion      한 영역을 접으면 Collapsible, 여러 영역을 함께 다루면 Accordion
 Tooltip과 Popover            짧은 설명이면 Tooltip, 안에서 조작하면 Popover
 ```

package/swatch-picker/index.module.css

@@ -0,0 +1,8 @@
+.swatch {
+  background-color: var(--swatch-picker-color);
+}
+
+.check {
+  color: white;
+  color: oklch(from var(--swatch-picker-color) clamp(0, (0.7 - l) * 1000, 1) 0 0);
+}

package/swatch-picker/index.tsx

@@ -0,0 +1,176 @@
+'use client'
+
+import { Radio } from '@base-ui/react/radio'
+import { RadioGroup } from '@base-ui/react/radio-group'
+import { Children, createContext, isValidElement, use, useRef, useState, type CSSProperties, type ReactNode } from 'react'
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'
+import { tv } from '../tv'
+
+import s from './index.module.css'
+
+type Size = 'sm' | 'md' | 'lg'
+
+interface PickerContext {
+  size: Size
+  value: string | null
+  choose: (value: string) => void
+  known: ReadonlySet<string>
+}
+
+const Context = createContext<PickerContext>({
+  size: 'md',
+  value: null,
+  choose: () => {},
+  known: new Set(),
+})
+
+export const swatchPicker = tv({
+  slots: {
+    root: 'flex flex-wrap gap-2',
+    item: 'inline-flex shrink-0 items-center justify-center rounded-full cursor-pointer'
+      + ' inset-ring inset-ring-line transition-state press press-shrink'
+      + ' checked:ring-2 checked:ring-line-neutral-solid checked:ring-offset-2 checked:ring-offset-bg'
+      + ' focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-line-focus-ring'
+      + ' disabled:cursor-not-allowed disabled:opacity-40',
+    custom: 'text-fg-muted inline-flex shrink-0 items-center justify-center rounded-full cursor-pointer'
+      + ' ring-1 ring-inset ring-line-strong transition-state press press-shrink'
+      + ' enabled:hover:bg-bg-neutral-hover'
+      + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
+      + ' disabled:text-fg-disabled disabled:ring-line disabled:cursor-not-allowed',
+    icon: 'size-4 shrink-0',
+  },
+
+  variants: {
+    size: {
+      sm: { item: 'size-6', custom: 'size-6', icon: 'size-3.5' },
+      md: { item: 'size-8', custom: 'size-8' },
+      lg: { item: 'size-10', custom: 'size-10', icon: 'size-5' },
+    },
+  },
+
+  defaultVariants: { size: 'md' },
+})
+
+export type SwatchPickerProps = Omit<RadioGroup.Props<string | null>, 'className' | 'onValueChange'> & {
+  onValueChange?: (value: string) => void
+  size?: Size
+  className?: string
+  children?: ReactNode
+}
+
+export function SwatchPicker({ value, defaultValue = null, onValueChange, size = 'md', className, children, ...rest }: SwatchPickerProps) {
+  const [inner, setInner] = useState<string | null>(defaultValue)
+  const known = new Set(
+    Children.toArray(children)
+      .filter(child => isValidElement<SwatchPickerItemProps>(child) && child.type === SwatchPickerItem)
+      .map(child => (child as { props: SwatchPickerItemProps }).props.value),
+  )
+  const current = value === undefined ? inner : value
+
+  const choose = (next: string) => {
+    onValueChange?.(next)
+    if (value === undefined) setInner(next)
+  }
+
+  return (
+    <Context value={{ size, value: current, choose, known }}>
+      <RadioGroup<string | null>
+        {...rest}
+        value={current}
+        onValueChange={next => next !== null && choose(next)}
+        className={swatchPicker({ size }).root({ className })}
+      >
+        {children}
+      </RadioGroup>
+    </Context>
+  )
+}
+
+function Swatch({ value, label, disabled }: { value: string, label: string, disabled?: boolean }) {
+  const { size } = use(Context)
+  const ui = swatchPicker({ size })
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={(
+          <Radio.Root
+            value={value}
+            disabled={disabled}
+            nativeButton
+            render={<button type="button" />}
+            aria-label={label}
+            style={{ '--swatch-picker-color': value } as CSSProperties}
+            className={ui.item({ className: s.swatch })}
+          />
+        )}
+      >
+        <Radio.Indicator className={`flex ${s.check}`}>
+          <svg className={ui.icon()} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
+        </Radio.Indicator>
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  )
+}
+
+export interface SwatchPickerItemProps {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+export function SwatchPickerItem(props: SwatchPickerItemProps) {
+  return <Swatch {...props} />
+}
+
+const HEX = /^#[0-9a-f]{6}$/i
+
+export interface SwatchPickerCustomProps {
+  label?: string
+  disabled?: boolean
+}
+
+export function SwatchPickerCustom({ label = '직접 고르기', disabled }: SwatchPickerCustomProps) {
+  const { size, value, choose, known } = use(Context)
+  const ui = swatchPicker({ size })
+  const input = useRef<HTMLInputElement>(null)
+  const extra = value !== null && !known.has(value) ? value : null
+
+  const open = () => {
+    const el = input.current
+    if (!el) return
+    if (typeof el.showPicker === 'function') el.showPicker()
+    else el.click()
+  }
+
+  return (
+    <>
+      {extra && <Swatch value={extra} label={extra} disabled={disabled} />}
+
+      <Tooltip>
+        <TooltipTrigger
+          render={<button type="button" disabled={disabled} aria-label={label} onClick={open} className={ui.custom()} />}
+        >
+          <svg className={ui.icon()} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <path d="M12 5v14M5 12h14" />
+          </svg>
+        </TooltipTrigger>
+        <TooltipContent>{label}</TooltipContent>
+      </Tooltip>
+
+      <input
+        ref={input}
+        type="color"
+        tabIndex={-1}
+        aria-hidden="true"
+        value={value !== null && HEX.test(value) ? value : '#000000'}
+        onChange={event => choose(event.target.value)}
+        className="sr-only"
+      />
+    </>
+  )
+}

package/toast/index.module.css

@@ -23,7 +23,7 @@
   --toast-inset: 16px;
   position: fixed;
   box-sizing: border-box;
-  width: 356px;
+  width: 352px;
   margin: 0;
   padding: 0;
   outline: none;
@@ -48,6 +48,7 @@
   touch-action: none;
   opacity: 1;
   transform: var(--toast-y);
+  backdrop-filter: blur(12px);
   transition: transform 400ms, opacity 400ms, height 400ms, box-shadow 200ms;
 }
 
@@ -62,6 +63,7 @@
 .viewport[data-position^='top'] .toast   { --toast-lift: 1; top: 0; bottom: auto; }
 .viewport[data-position$='right'] .toast { right: 0; }
 .viewport[data-position$='left'] .toast  { left: 0; }
+.viewport[data-position$='center'] .toast { left: 0; right: 0; margin-inline: auto; }
 
 .toast:not([data-expanded]) {
   --toast-y: translateY(calc(var(--toast-lift) * var(--toast-gap) * var(--toast-index))) scale(calc(1 - var(--toast-index) * 0.05));
@@ -69,6 +71,13 @@
 
 .toast:not([data-expanded]):not([data-front]) {
   height: var(--toast-frontmost-height);
+  width: var(--toast-frontmost-width, auto);
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+.viewport:not([data-expand]) .toast:not([data-expanded]):not([data-front]) > * {
+  opacity: 0;
 }
 
 .toast[data-expanded],
@@ -162,13 +171,7 @@
   .viewport {
     right: var(--toast-inset);
     left: var(--toast-inset);
-    width: 100%;
-  }
-
-  .viewport .toast {
-    right: 0;
-    left: 0;
-    width: calc(100% - var(--toast-inset) * 2);
+    width: auto;
   }
 
   .viewport[data-position$='center'] {

package/toast/index.tsx

@@ -1,9 +1,8 @@
 'use client'
 
 import { Toast as ToastPrimitive, type ToastManager, type ToastManagerAddOptions } from '@base-ui/react/toast'
-import type { MouseEvent, ReactNode } from 'react'
+import { type MouseEvent, type ReactNode, useLayoutEffect, useRef, useState } from 'react'
 
-import { button } from '../button'
 import { tv } from '../tv'
 
 import s from './index.module.css'
@@ -52,41 +51,41 @@ export const toast = createToast()
 const toastViewport = tv({ base: 'z-toast' })
 
 const toastRoot = tv({
-  base: 'float rounded-r8 flex w-full items-center gap-stack p-4',
-  variants: {
-    type: {
-      success: 'text-fg-success',
-      error: 'text-fg-danger',
-      warning: 'text-fg-warning',
-      info: 'text-fg-info',
-    },
-  },
+  base: 'bg-bg-neutral-toast text-fg-neutral-toast-contrast inset-ring inset-ring-line-neutral-toast flex min-h-10 w-fit max-w-full items-center gap-2.5 rounded-full px-4.5 py-2.5'
+    + ' data-multiline:rounded-r20 data-multiline:w-full data-multiline:items-start data-multiline:px-4 data-multiline:py-3',
 })
 
+const toastIcon = tv({ base: 'shrink-0 in-data-multiline:pt-px' })
+
 const toastContent = tv({ base: 'min-w-0 flex-1' })
 
-const toastTitle = tv({ base: 'text-label text-fg' })
+const toastTitle = tv({ base: 'text-t14 in-data-multiline:font-medium' })
+
+const toastDescription = tv({ base: 'text-t13 text-fg-neutral-toast-contrast/72 line-clamp-2' })
 
-const toastDescription = tv({ base: 'text-caption text-fg-muted' })
+const toastAction = tv({
+  base: 'text-t14 rounded-r4 shrink-0 cursor-pointer font-bold underline underline-offset-3 in-data-multiline:self-center'
+    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring',
+})
 
 const icons: Record<Kind, ReactNode> = {
   success: (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20" aria-hidden="true" className="size-5">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="18" width="18" aria-hidden="true" className="size-4.5">
       <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clipRule="evenodd" />
     </svg>
   ),
   warning: (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="20" width="20" aria-hidden="true" className="size-5">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="18" width="18" aria-hidden="true" className="size-4.5">
       <path fillRule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clipRule="evenodd" />
     </svg>
   ),
   info: (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20" aria-hidden="true" className="size-5">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="18" width="18" aria-hidden="true" className="size-4.5">
       <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clipRule="evenodd" />
     </svg>
   ),
   error: (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20" aria-hidden="true" className="size-5">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="18" width="18" aria-hidden="true" className="size-4.5">
       <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
     </svg>
   ),
@@ -101,30 +100,58 @@ function swipeOf(position: ToastPosition): Swipe[] {
   return out
 }
 
+const ONE_LINE = 28
+
+type Item = ReturnType<typeof ToastPrimitive.useToastManager>['toasts'][number]
+
+function ToastItem({ item, front, swipe }: { item: Item, front: boolean, swipe: Swipe[] }) {
+  const title = useRef<HTMLHeadingElement>(null)
+  const root = useRef<HTMLDivElement>(null)
+  const [wrapped, setWrapped] = useState(false)
+  const icon = item.type ? icons[item.type as Kind] : undefined
+  const multiline = wrapped || Boolean(item.description)
+
+  useLayoutEffect(() => {
+    if (multiline || !title.current) return
+    if (title.current.offsetHeight > ONE_LINE) setWrapped(true)
+  }, [multiline])
+
+  useLayoutEffect(() => {
+    const el = root.current
+    const viewport = el?.parentElement
+    if (!front || !el || !viewport) return
+    const sync = () => viewport.style.setProperty('--toast-frontmost-width', `${el.offsetWidth}px`)
+    sync()
+    if (typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver(sync)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [front])
+
+  return (
+    <ToastPrimitive.Root
+      ref={root}
+      toast={item}
+      swipeDirection={swipe}
+      data-front={front ? '' : undefined}
+      data-multiline={multiline ? '' : undefined}
+      className={toastRoot({ className: s.toast })}
+    >
+      {icon && <div className={toastIcon()}>{icon}</div>}
+      <ToastPrimitive.Content className={toastContent()}>
+        <ToastPrimitive.Title ref={title} className={toastTitle()} />
+        <ToastPrimitive.Description className={toastDescription()} />
+      </ToastPrimitive.Content>
+      <ToastPrimitive.Action className={toastAction()} />
+    </ToastPrimitive.Root>
+  )
+}
+
 function ToastList({ position }: { position: ToastPosition }) {
   const { toasts } = ToastPrimitive.useToastManager()
   const swipe = swipeOf(position)
 
-  return toasts.map((item, index) => {
-    const icon = item.type ? icons[item.type as Kind] : undefined
-
-    return (
-      <ToastPrimitive.Root
-        key={item.id}
-        toast={item}
-        swipeDirection={swipe}
-        data-front={index === 0 ? '' : undefined}
-        className={toastRoot({ type: item.type as Kind | undefined, className: s.toast })}
-      >
-        {icon && <div className="shrink-0">{icon}</div>}
-        <ToastPrimitive.Content className={toastContent()}>
-          <ToastPrimitive.Title className={toastTitle()} />
-          <ToastPrimitive.Description className={toastDescription()} />
-        </ToastPrimitive.Content>
-        <ToastPrimitive.Action className={button({ color: 'neutral', emphasis: 'weak', size: 'sm' })} />
-      </ToastPrimitive.Root>
-    )
-  })
+  return toasts.map((item, index) => <ToastItem key={item.id} item={item} front={index === 0} swipe={swipe} />)
 }
 
 export type ToastProps = Omit<ToastPrimitive.Provider.Props, 'children'> & {

package/toggle/index.tsx

@@ -5,19 +5,45 @@ import type { ComponentProps } from 'react'
 
 import { tv } from '../tv'
 
+export type ToggleSize = 'sm' | 'md' | 'lg'
+export type ToggleShape = 'pill' | 'circle' | 'square'
+export type ToggleColor = 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger'
+export type ToggleSurface = 'bare' | 'well' | 'panel'
+
 export const toggle = tv({
-  base: 'text-label rounded-full inline-flex h-8 items-center gap-tight px-3'
-    + ' [&_svg]:size-4'
+  base: 'text-label inline-flex shrink-0 items-center justify-center gap-tight whitespace-nowrap'
     + ' ring-1 ring-inset ring-line-strong transition-state press press-shrink'
     + ' text-fg-muted'
     + ' enabled:hover:bg-bg-neutral-hover'
-    + ' on:bg-bg-neutral-solid on:ring-line-neutral-solid on:enabled:text-fg-neutral-solid-contrast'
-    + ' on:enabled:hover:bg-bg-neutral-solid-hover'
     + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
-    + ' disabled:text-fg-disabled disabled:ring-line disabled:cursor-not-allowed'
-    + ' on:disabled:bg-bg-neutral-solid-checked-disabled on:disabled:ring-transparent on:disabled:text-fg-neutral-solid-contrast',
+    + ' disabled:text-fg-disabled disabled:ring-line disabled:cursor-not-allowed',
 
   variants: {
+    size: {
+      sm: 'h-8 [&_svg]:size-4',
+      md: 'h-9 [&_svg]:size-4',
+      lg: 'h-10 text-t16 font-medium [&_svg]:size-5',
+    },
+    shape: {
+      pill: 'rounded-full',
+      circle: 'rounded-full',
+      square: 'rounded-r8',
+    },
+    color: {
+      neutral: 'on:bg-bg-neutral-solid on:ring-line-neutral-solid on:enabled:text-fg-neutral-solid-contrast'
+        + ' on:enabled:hover:bg-bg-neutral-solid-hover'
+        + ' on:disabled:bg-bg-neutral-solid-checked-disabled on:disabled:ring-transparent on:disabled:text-fg-neutral-solid-contrast',
+      brand: 'on:bg-bg-brand-weak on:ring-line-brand-weak on:enabled:text-fg-brand-contrast'
+        + ' on:enabled:hover:bg-bg-brand-solid/10 on:disabled:text-fg-brand-contrast/40',
+      info: 'on:bg-bg-info-weak on:ring-line-info-weak on:enabled:text-fg-info-contrast'
+        + ' on:enabled:hover:bg-bg-info-solid/10 on:disabled:text-fg-info-contrast/40',
+      success: 'on:bg-bg-success-weak on:ring-line-success-weak on:enabled:text-fg-success-contrast'
+        + ' on:enabled:hover:bg-bg-success-solid/10 on:disabled:text-fg-success-contrast/40',
+      warning: 'on:bg-bg-warning-weak on:ring-line-warning-weak on:enabled:text-fg-warning-contrast'
+        + ' on:enabled:hover:bg-bg-warning-solid/10 on:disabled:text-fg-warning-contrast/40',
+      danger: 'on:bg-bg-danger-weak on:ring-line-danger-weak on:enabled:text-fg-danger-contrast'
+        + ' on:enabled:hover:bg-bg-danger-solid/10 on:disabled:text-fg-danger-contrast/40',
+    },
     surface: {
       bare: '',
       well: 'bg-bg-well',
@@ -25,14 +51,26 @@ export const toggle = tv({
     },
   },
 
-  defaultVariants: { surface: 'bare' },
+  compoundVariants: [
+    { shape: 'pill', size: 'sm', class: 'px-3' },
+    { shape: 'pill', size: 'md', class: 'px-3.5' },
+    { shape: 'pill', size: 'lg', class: 'px-4' },
+    { shape: ['circle', 'square'], size: 'sm', class: 'w-8' },
+    { shape: ['circle', 'square'], size: 'md', class: 'w-9' },
+    { shape: ['circle', 'square'], size: 'lg', class: 'w-10' },
+  ],
+
+  defaultVariants: { size: 'sm', shape: 'pill', color: 'neutral', surface: 'bare' },
 })
 
-export type ToggleProps = Omit<ComponentProps<typeof TogglePrimitive>, 'className'> & {
-  surface?: 'bare' | 'well' | 'panel'
+export type ToggleProps = Omit<ComponentProps<typeof TogglePrimitive>, 'className' | 'color'> & {
+  size?: ToggleSize
+  shape?: ToggleShape
+  color?: ToggleColor
+  surface?: ToggleSurface
   className?: string
 }
 
-export function Toggle({ surface, className, ...rest }: ToggleProps) {
-  return <TogglePrimitive {...rest} className={toggle({ surface, className })} />
+export function Toggle({ size, shape, color, surface, className, ...rest }: ToggleProps) {
+  return <TogglePrimitive {...rest} className={toggle({ size, shape, color, surface, className })} />
 }