@pantoia/ui 0.13.0 → 0.14.1

package/avatar-group/index.module.css

@@ -0,0 +1,3 @@
+.group > * {
+  box-shadow: 0 0 0 2px var(--avatar-group-ring, var(--color-bg));
+}

package/avatar-group/index.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { Children, cloneElement, isValidElement, type ComponentProps, type ReactElement, type ReactNode } from 'react'
+
+import { avatar, type AvatarProps } from '../avatar'
+import { tv } from '../tv'
+
+import s from './index.module.css'
+
+type Size = NonNullable<AvatarProps['size']>
+
+export const avatarGroup = tv({
+  base: 'inline-flex items-center',
+
+  variants: {
+    size: {
+      xs: '-space-x-1',
+      sm: '-space-x-1',
+      md: '-space-x-1.5',
+      lg: '-space-x-2',
+      xl: '-space-x-3',
+    },
+  },
+
+  defaultVariants: { size: 'md' },
+})
+
+export type AvatarGroupProps = Omit<ComponentProps<'div'>, 'className' | 'children'> & {
+  max?: number
+  size?: Size
+  renderOverflow?: (count: number) => ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+export function AvatarGroup({ max, size = 'md', renderOverflow, className, children, ...rest }: AvatarGroupProps) {
+  const people = Children.toArray(children).filter(isValidElement) as ReactElement<AvatarProps>[]
+  const shown = max !== undefined && people.length > max ? people.slice(0, max) : people
+  const hidden = people.length - shown.length
+
+  return (
+    <div role="group" {...rest} className={avatarGroup({ size, className: [s.group, className] })}>
+      {shown.map(person => cloneElement(person, { size }))}
+
+      {hidden > 0 && (
+        <span role="img" aria-label={`외 ${hidden}명`} className={avatar({ color: 'neutral', size })}>
+          {renderOverflow ? renderOverflow(hidden) : `+${hidden}`}
+        </span>
+      )}
+    </div>
+  )
+}

package/bottom-sheet/index.tsx

@@ -3,6 +3,7 @@
 import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer'
 import type { ComponentProps, ReactNode } from 'react'
 
+import { Button } from '../button'
 import { tv } from '../tv'
 
 import s from './index.module.css'
@@ -62,11 +63,23 @@ export const bottomSheetHeader = tv({
 export interface BottomSheetHeaderProps {
   lead?: ReactNode
   trail?: ReactNode
+  closable?: boolean
+  closeLabel?: string
   className?: string
   children?: ReactNode
 }
 
-export function BottomSheetHeader({ lead, trail, className, children }: BottomSheetHeaderProps) {
+function HeaderClose({ label }: { label: string }) {
+  return (
+    <DrawerPrimitive.Close render={<Button color="neutral" emphasis="ghost" shape="square" aria-label={label} />}>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        <path d="M18 6 6 18M6 6l12 12" />
+      </svg>
+    </DrawerPrimitive.Close>
+  )
+}
+
+export function BottomSheetHeader({ lead, trail, closable = false, closeLabel = '닫기', className, children }: BottomSheetHeaderProps) {
   const ui = bottomSheetHeader()
 
   return (
@@ -74,6 +87,7 @@ export function BottomSheetHeader({ lead, trail, className, children }: BottomSh
       {lead && <div className={ui.lead()}>{lead}</div>}
       <div className={ui.body()}>{children}</div>
       {trail && <div className={ui.trail()}>{trail}</div>}
+      {closable && <div className={ui.trail()}><HeaderClose label={closeLabel} /></div>}
     </div>
   )
 }

package/combobox/index.tsx

@@ -135,7 +135,9 @@ export function ComboboxCancel({ label = '지우기', keepMounted = true, classN
   )
 }
 
-export type ComboboxContentProps = Omit<ComponentProps<typeof ComboboxPrimitive.Popup>, 'className' | 'children'> & {
+type ComboboxPlacement = Pick<ComponentProps<typeof ComboboxPrimitive.Positioner>, 'sideOffset' | 'alignOffset' | 'collisionAvoidance'>
+
+export type ComboboxContentProps = Omit<ComponentProps<typeof ComboboxPrimitive.Popup>, 'className' | 'children'> & ComboboxPlacement & {
   className?: string
   children?: ComboboxPrimitive.List.Props['children'] | ComboboxPrimitive.List.Props['children'][]
 }
@@ -148,7 +150,7 @@ const comboboxContent = tv({
 
 const isEmpty = (child: unknown) => isValidElement(child) && child.type === ComboboxEmpty
 
-export function ComboboxContent({ 'aria-label': label, className, children, ...rest }: ComboboxContentProps) {
+export function ComboboxContent({ 'aria-label': label, sideOffset = 4, alignOffset, collisionAvoidance, className, children, ...rest }: ComboboxContentProps) {
   const nodes = Array.isArray(children) ? children : [children]
   const empty = nodes.filter(isEmpty) as ReactNode[]
   const list = nodes.filter(node => !isEmpty(node))
@@ -157,7 +159,9 @@ export function ComboboxContent({ 'aria-label': label, className, children, ...r
     <ComboboxPrimitive.Portal>
       <ComboboxPrimitive.Positioner
         align="start"
-        sideOffset={4}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        collisionAvoidance={collisionAvoidance}
         className="z-overlay min-w-max will-change-transform"
       >
         <ComboboxPrimitive.Popup {...rest} className={comboboxContent({ className })}>

package/context-menu/index.tsx

@@ -1,12 +1,13 @@
 'use client'
 
 import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu'
-import type { ComponentProps } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 
 import {
   DropdownMenuCheckboxItem,
   DropdownMenuGroup,
   DropdownMenuItem,
+  DropdownMenuItemDescription,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
@@ -37,14 +38,21 @@ export function ContextMenuTrigger(props: ContextMenuTriggerProps) {
   return <ContextMenuPrimitive.Trigger {...props} />
 }
 
-export type ContextMenuContentProps = Omit<ComponentProps<typeof ContextMenuPrimitive.Popup>, 'className'> & {
+type ContextMenuPlacement = Pick<ComponentProps<typeof ContextMenuPrimitive.Positioner>, 'sideOffset' | 'alignOffset' | 'collisionAvoidance'>
+
+export type ContextMenuContentProps = Omit<ComponentProps<typeof ContextMenuPrimitive.Popup>, 'className'> & ContextMenuPlacement & {
   className?: string
 }
 
-export function ContextMenuContent({ className, ...rest }: ContextMenuContentProps) {
+export function ContextMenuContent({ sideOffset, alignOffset, collisionAvoidance, className, ...rest }: ContextMenuContentProps) {
   return (
     <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.Positioner className="z-overlay min-w-max will-change-transform">
+      <ContextMenuPrimitive.Positioner
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        collisionAvoidance={collisionAvoidance}
+        className="z-overlay min-w-max will-change-transform"
+      >
         <ContextMenuPrimitive.Popup {...rest} className={menuPanel({ className })} />
       </ContextMenuPrimitive.Positioner>
     </ContextMenuPrimitive.Portal>
@@ -63,6 +71,10 @@ export function ContextMenuItem(props: ContextMenuItemProps) {
   return <DropdownMenuItem {...props} />
 }
 
+export function ContextMenuItemDescription(props: { className?: string, children?: ReactNode }) {
+  return <DropdownMenuItemDescription {...props} />
+}
+
 export type ContextMenuCheckboxItemProps = DropdownMenuCheckboxItemProps
 
 export function ContextMenuCheckboxItem(props: ContextMenuCheckboxItemProps) {

package/dialog/index.tsx

@@ -3,6 +3,7 @@
 import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
 import type { ComponentProps, ReactNode } from 'react'
 
+import { Button } from '../button'
 import { tv } from '../tv'
 
 export const dialog = tv({
@@ -92,11 +93,23 @@ export const dialogHeader = tv({
 export interface DialogHeaderProps {
   lead?: ReactNode
   trail?: ReactNode
+  closable?: boolean
+  closeLabel?: string
   className?: string
   children?: ReactNode
 }
 
-export function DialogHeader({ lead, trail, className, children }: DialogHeaderProps) {
+function HeaderClose({ label }: { label: string }) {
+  return (
+    <DialogPrimitive.Close render={<Button color="neutral" emphasis="ghost" shape="square" aria-label={label} />}>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        <path d="M18 6 6 18M6 6l12 12" />
+      </svg>
+    </DialogPrimitive.Close>
+  )
+}
+
+export function DialogHeader({ lead, trail, closable = false, closeLabel = '닫기', className, children }: DialogHeaderProps) {
   const ui = dialogHeader()
 
   return (
@@ -104,6 +117,7 @@ export function DialogHeader({ lead, trail, className, children }: DialogHeaderP
       {lead && <div className={ui.lead()}>{lead}</div>}
       <div className={ui.body()}>{children}</div>
       {trail && <div className={ui.trail()}>{trail}</div>}
+      {closable && <div className={ui.trail()}><HeaderClose label={closeLabel} /></div>}
     </div>
   )
 }

package/drawer/index.tsx

@@ -3,6 +3,7 @@
 import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer'
 import { createContext, use, type ComponentProps, type ReactNode } from 'react'
 
+import { Button } from '../button'
 import { tv } from '../tv'
 
 import s from './index.module.css'
@@ -85,11 +86,23 @@ export const drawerHeader = tv({
 export interface DrawerHeaderProps {
   lead?: ReactNode
   trail?: ReactNode
+  closable?: boolean
+  closeLabel?: string
   className?: string
   children?: ReactNode
 }
 
-export function DrawerHeader({ lead, trail, className, children }: DrawerHeaderProps) {
+function HeaderClose({ label }: { label: string }) {
+  return (
+    <DrawerPrimitive.Close render={<Button color="neutral" emphasis="ghost" shape="square" aria-label={label} />}>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        <path d="M18 6 6 18M6 6l12 12" />
+      </svg>
+    </DrawerPrimitive.Close>
+  )
+}
+
+export function DrawerHeader({ lead, trail, closable = false, closeLabel = '닫기', className, children }: DrawerHeaderProps) {
   const ui = drawerHeader()
 
   return (
@@ -97,6 +110,7 @@ export function DrawerHeader({ lead, trail, className, children }: DrawerHeaderP
       {lead && <div className={ui.lead()}>{lead}</div>}
       <div className={ui.body()}>{children}</div>
       {trail && <div className={ui.trail()}>{trail}</div>}
+      {closable && <div className={ui.trail()}><HeaderClose label={closeLabel} /></div>}
     </div>
   )
 }

package/dropdown-menu/index.tsx

@@ -1,13 +1,14 @@
 'use client'
 
 import { Menu as MenuPrimitive } from '@base-ui/react/menu'
-import type { ComponentProps, ReactNode } from 'react'
+import { createContext, use, useEffect, useId, useState, type ComponentProps, type ReactNode } from 'react'
 
 import { tv } from '../tv'
 
 export const menuItem = tv({
-  base: 'flex h-9 cursor-default items-center gap-2 rounded-r8 px-2 menu-gutter:ps-8'
+  base: 'flex min-h-9 cursor-default items-center gap-2 rounded-r8 px-2 py-1.5 menu-gutter:ps-8'
     + ' [&_svg]:size-4 [&_svg]:shrink-0'
+    + ' described:items-start described:[&>.menu-lead]:mt-0.5 described:[&>svg]:mt-0.5'
     + ' text-label transition-state'
     + ' data-highlighted:outline-none data-disabled:pointer-events-none',
 
@@ -21,6 +22,20 @@ export const menuItem = tv({
   defaultVariants: { color: 'neutral' },
 })
 
+interface DescriptionContext {
+  id: string
+  setDescribed: (described: boolean) => void
+}
+
+const ItemDescription = createContext<DescriptionContext | null>(null)
+
+function useDescription() {
+  const id = useId()
+  const [described, setDescribed] = useState(false)
+
+  return { context: { id, setDescribed }, describedBy: described ? id : undefined }
+}
+
 const PANEL = 'menu float text-fg rounded-r12 z-overlay'
   + ' flex min-w-44 flex-col gap-px p-1'
   + ' open:animate-enter closed:animate-exit'
@@ -38,7 +53,9 @@ export function DropdownMenuTrigger(props: DropdownMenuTriggerProps) {
   return <MenuPrimitive.Trigger {...props} />
 }
 
-export type DropdownMenuContentProps = Omit<ComponentProps<typeof MenuPrimitive.Popup>, 'className'> & {
+type MenuPlacement = Pick<ComponentProps<typeof MenuPrimitive.Positioner>, 'anchor' | 'sideOffset' | 'alignOffset' | 'collisionAvoidance'>
+
+export type DropdownMenuContentProps = Omit<ComponentProps<typeof MenuPrimitive.Popup>, 'className'> & MenuPlacement & {
   side?: 'top' | 'right' | 'bottom' | 'left'
   align?: 'start' | 'center' | 'end'
   arrow?: boolean
@@ -59,6 +76,10 @@ export function DropdownMenuContent({
   side = 'bottom',
   align = 'start',
   arrow = true,
+  anchor,
+  sideOffset,
+  alignOffset,
+  collisionAvoidance,
   className,
   children,
   ...rest
@@ -66,9 +87,12 @@ export function DropdownMenuContent({
   return (
     <MenuPrimitive.Portal>
       <MenuPrimitive.Positioner
+        anchor={anchor}
         side={side}
         align={align}
-        sideOffset={arrow ? 14 : 8}
+        sideOffset={sideOffset ?? (arrow ? 14 : 8)}
+        alignOffset={alignOffset}
+        collisionAvoidance={collisionAvoidance}
         arrowPadding={16}
         className="z-overlay min-w-max will-change-transform"
       >
@@ -116,17 +140,21 @@ export type DropdownMenuItemProps = Omit<ComponentProps<typeof MenuPrimitive.Ite
 }
 
 export function DropdownMenuItem({ color, lead, trail, className, children, ...rest }: DropdownMenuItemProps) {
-  return (
-    <MenuPrimitive.Item {...rest} className={menuItem({ color, className })}>
-      {lead && (
-        <span className="menu-lead grid size-4 shrink-0 place-items-center">
-          {lead}
-        </span>
-      )}
+  const { context, describedBy } = useDescription()
 
-      <span className="min-w-0 grow">{children}</span>
-      {trail}
-    </MenuPrimitive.Item>
+  return (
+    <ItemDescription value={context}>
+      <MenuPrimitive.Item aria-describedby={describedBy} {...rest} className={menuItem({ color, className })}>
+        {lead && (
+          <span className="menu-lead grid size-4 shrink-0 place-items-center">
+            {lead}
+          </span>
+        )}
+
+        <span className="min-w-0 grow">{children}</span>
+        {trail}
+      </MenuPrimitive.Item>
+    </ItemDescription>
   )
 }
 
@@ -135,18 +163,22 @@ export type DropdownMenuCheckboxItemProps = Omit<ComponentProps<typeof MenuPrimi
 }
 
 export function DropdownMenuCheckboxItem({ className, children, ...rest }: DropdownMenuCheckboxItemProps) {
+  const { context, describedBy } = useDescription()
+
   return (
-    <MenuPrimitive.CheckboxItem {...rest} className={menuItem({ className })}>
-      <span className="menu-lead grid size-4 shrink-0 place-items-center">
-        <MenuPrimitive.CheckboxItemIndicator>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
-            <path d="M20 6 9 17l-5-5" />
-          </svg>
-        </MenuPrimitive.CheckboxItemIndicator>
-      </span>
-
-      <span className="min-w-0 grow">{children}</span>
-    </MenuPrimitive.CheckboxItem>
+    <ItemDescription value={context}>
+      <MenuPrimitive.CheckboxItem aria-describedby={describedBy} {...rest} className={menuItem({ className })}>
+        <span className="menu-lead grid size-4 shrink-0 place-items-center">
+          <MenuPrimitive.CheckboxItemIndicator>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+              <path d="M20 6 9 17l-5-5" />
+            </svg>
+          </MenuPrimitive.CheckboxItemIndicator>
+        </span>
+
+        <span className="min-w-0 grow">{children}</span>
+      </MenuPrimitive.CheckboxItem>
+    </ItemDescription>
   )
 }
 
@@ -161,16 +193,39 @@ export type DropdownMenuRadioItemProps = Omit<ComponentProps<typeof MenuPrimitiv
 }
 
 export function DropdownMenuRadioItem({ className, children, ...rest }: DropdownMenuRadioItemProps) {
+  const { context, describedBy } = useDescription()
+
   return (
-    <MenuPrimitive.RadioItem {...rest} className={menuItem({ className })}>
-      <span className="menu-lead grid size-4 shrink-0 place-items-center">
-        <MenuPrimitive.RadioItemIndicator>
-          <span className="bg-bg-neutral-solid in-disabled:bg-bg-neutral-solid-checked-disabled size-2 rounded-full" />
-        </MenuPrimitive.RadioItemIndicator>
-      </span>
-
-      <span className="min-w-0 grow">{children}</span>
-    </MenuPrimitive.RadioItem>
+    <ItemDescription value={context}>
+      <MenuPrimitive.RadioItem aria-describedby={describedBy} {...rest} className={menuItem({ className })}>
+        <span className="menu-lead grid size-4 shrink-0 place-items-center">
+          <MenuPrimitive.RadioItemIndicator>
+            <span className="bg-bg-neutral-solid in-disabled:bg-bg-neutral-solid-checked-disabled block size-2 rounded-full" />
+          </MenuPrimitive.RadioItemIndicator>
+        </span>
+
+        <span className="min-w-0 grow">{children}</span>
+      </MenuPrimitive.RadioItem>
+    </ItemDescription>
+  )
+}
+
+const menuItemDescription = tv({ base: 'text-caption text-fg-subtle block' })
+
+export function DropdownMenuItemDescription({ className, children }: { className?: string, children?: ReactNode }) {
+  const ctx = use(ItemDescription)
+  const setDescribed = ctx?.setDescribed
+
+  useEffect(() => {
+    if (!setDescribed) return
+    setDescribed(true)
+    return () => setDescribed(false)
+  }, [setDescribed])
+
+  return (
+    <span id={ctx?.id} data-description aria-hidden="true" className={menuItemDescription({ className })}>
+      {children}
+    </span>
   )
 }
 
@@ -196,20 +251,24 @@ export type DropdownMenuSubTriggerProps = Omit<ComponentProps<typeof MenuPrimiti
 }
 
 export function DropdownMenuSubTrigger({ lead, className, children, ...rest }: DropdownMenuSubTriggerProps) {
-  return (
-    <MenuPrimitive.SubmenuTrigger {...rest} className={menuItem({ className })}>
-      {lead && (
-        <span className="menu-lead grid size-4 shrink-0 place-items-center">
-          {lead}
-        </span>
-      )}
+  const { context, describedBy } = useDescription()
 
-      <span className="min-w-0 grow">{children}</span>
-
-      <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">
-        <path d="m9 18 6-6-6-6" />
-      </svg>
-    </MenuPrimitive.SubmenuTrigger>
+  return (
+    <ItemDescription value={context}>
+      <MenuPrimitive.SubmenuTrigger aria-describedby={describedBy} {...rest} className={menuItem({ className })}>
+        {lead && (
+          <span className="menu-lead grid size-4 shrink-0 place-items-center">
+            {lead}
+          </span>
+        )}
+
+        <span className="min-w-0 grow">{children}</span>
+
+        <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">
+          <path d="m9 18 6-6-6-6" />
+        </svg>
+      </MenuPrimitive.SubmenuTrigger>
+    </ItemDescription>
   )
 }
 

package/modal/index.tsx

@@ -9,6 +9,7 @@ import {
   BottomSheetClose,
   BottomSheetContent,
   BottomSheetDescription,
+  BottomSheetHeader,
   BottomSheetTitle,
   BottomSheetTrigger,
 } from '../bottom-sheet'
@@ -38,7 +39,11 @@ export const modalQuery: Record<ModalBreakpoint, string> = {
   md: '(min-width: 48rem)',
 }
 
-const ModalShape = createContext<Shape>('sheet')
+const ModalShape = createContext<Shape | null>(null)
+
+export function useModalShape(): Shape | null {
+  return use(ModalShape)
+}
 
 const media = (query: string) => (typeof window.matchMedia === 'function' ? window.matchMedia(query) : null)
 
@@ -109,7 +114,7 @@ export function ModalContent({ size, ...rest }: ModalContentProps) {
 export type ModalHeaderProps = DialogHeaderProps
 
 export function ModalHeader(props: ModalHeaderProps) {
-  return <DialogHeader {...props} />
+  return use(ModalShape) === 'dialog' ? <DialogHeader {...props} /> : <BottomSheetHeader {...props} />
 }
 
 export interface ModalTitleProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoia/ui",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "description": "Pantoia Design System",
   "homepage": "https://design.pantoia.com",
   "repository": {

package/popover/index.tsx

@@ -48,7 +48,9 @@ export function PopoverClose(props: PopoverCloseProps) {
   return <PopoverPrimitive.Close {...props} />
 }
 
-export type PopoverContentProps = Omit<ComponentProps<typeof PopoverPrimitive.Popup>, 'className'> & {
+type PopoverPlacement = Pick<ComponentProps<typeof PopoverPrimitive.Positioner>, 'anchor' | 'sideOffset' | 'alignOffset' | 'collisionAvoidance'>
+
+export type PopoverContentProps = Omit<ComponentProps<typeof PopoverPrimitive.Popup>, 'className'> & PopoverPlacement & {
   side?: 'top' | 'right' | 'bottom' | 'left'
   align?: 'start' | 'center' | 'end'
   arrow?: boolean
@@ -73,19 +75,25 @@ export function PopoverContent({
   side = 'bottom',
   align = 'center',
   arrow = true,
+  anchor,
+  sideOffset,
+  alignOffset,
+  collisionAvoidance,
   className,
   children,
   ...rest
 }: PopoverContentProps) {
-  const [anchor] = useContext(AnchorContext)
+  const [anchorPart] = useContext(AnchorContext)
 
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Positioner
-        anchor={anchor ?? undefined}
+        anchor={anchor ?? anchorPart ?? undefined}
         side={side}
         align={align}
-        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/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",
@@ -746,6 +797,30 @@
         ]
       }
     },
+    {
+      "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",
+        "sizes": [
+          "ToggleGroupItem"
+        ]
+      }
+    },
     {
       "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, 떨어진 pill 여러 개 중에 고르면 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/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 })} />
 }

package/toggle-group/index.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { Radio } from '@base-ui/react/radio'
+import { RadioGroup } from '@base-ui/react/radio-group'
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle'
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group'
+import { createContext, use, type ReactNode } from 'react'
+
+import { toggle, type ToggleColor, type ToggleShape, type ToggleSize, type ToggleSurface } from '../toggle'
+import { tv } from '../tv'
+
+interface Shared {
+  size: ToggleSize
+  shape: ToggleShape
+  surface: ToggleSurface
+  multiple: boolean
+}
+
+const Context = createContext<Shared>({ size: 'sm', shape: 'pill', surface: 'bare', multiple: false })
+
+const toggleGroup = tv({ base: 'flex flex-wrap gap-2' })
+
+interface ToggleGroupLook {
+  size?: ToggleSize
+  shape?: ToggleShape
+  surface?: ToggleSurface
+  className?: string
+}
+
+export type ToggleGroupSingleProps = Omit<RadioGroup.Props<string | null>, 'className'> & ToggleGroupLook & {
+  multiple?: false
+}
+
+export type ToggleGroupMultipleProps = Omit<ToggleGroupPrimitive.Props<string>, 'className' | 'multiple'> & ToggleGroupLook & {
+  multiple: true
+}
+
+export type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps
+
+export function ToggleGroup({ size = 'sm', shape = 'pill', surface = 'bare', className, ...rest }: ToggleGroupProps) {
+  const root = toggleGroup({ className })
+
+  if (rest.multiple) {
+    return (
+      <Context value={{ size, shape, surface, multiple: true }}>
+        <ToggleGroupPrimitive<string> {...rest} className={root} />
+      </Context>
+    )
+  }
+
+  const { multiple: _multiple, ...single } = rest
+
+  return (
+    <Context value={{ size, shape, surface, multiple: false }}>
+      <RadioGroup<string | null> {...single} className={root} />
+    </Context>
+  )
+}
+
+export interface ToggleGroupItemProps {
+  value: string
+  color?: ToggleColor
+  disabled?: boolean
+  'aria-label'?: string
+  className?: string
+  children?: ReactNode
+}
+
+export function ToggleGroupItem({ color, className, ...rest }: ToggleGroupItemProps) {
+  const { size, shape, surface, multiple } = use(Context)
+  const look = toggle({ size, shape, color, surface, className })
+
+  if (multiple) return <TogglePrimitive {...rest} className={look} />
+
+  return <Radio.Root {...rest} nativeButton render={<button type="button" />} className={look} />
+}

package/tooltip/index.tsx

@@ -46,7 +46,9 @@ export function TooltipTrigger(props: TooltipTriggerProps) {
   return <TooltipPrimitive.Trigger delay={inProvider ? undefined : 100} {...props} aria-describedby={open ? id : undefined} />
 }
 
-export type TooltipContentProps = Omit<ComponentProps<typeof TooltipPrimitive.Popup>, 'className'> & {
+type TooltipPlacement = Pick<ComponentProps<typeof TooltipPrimitive.Positioner>, 'sideOffset' | 'alignOffset' | 'collisionAvoidance'>
+
+export type TooltipContentProps = Omit<ComponentProps<typeof TooltipPrimitive.Popup>, 'className'> & TooltipPlacement & {
   side?: 'top' | 'right' | 'bottom' | 'left'
   arrow?: boolean
   className?: string
@@ -69,6 +71,9 @@ const tooltipArrow = tv({
 export function TooltipContent({
   side = 'top',
   arrow = true,
+  sideOffset,
+  alignOffset,
+  collisionAvoidance,
   className,
   children,
   ...rest
@@ -79,7 +84,9 @@ export function TooltipContent({
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Positioner
         side={side}
-        sideOffset={arrow ? 11 : 6}
+        sideOffset={sideOffset ?? (arrow ? 11 : 6)}
+        alignOffset={alignOffset}
+        collisionAvoidance={collisionAvoidance}
         className="z-overlay min-w-max will-change-transform"
       >
         <TooltipPrimitive.Popup {...rest} id={id} role="tooltip" className={tooltipContent({ className })}>

package/utilities.css

@@ -13,7 +13,7 @@
 @custom-variant checked (&:where([data-checked], [data-indeterminate]));
 @custom-variant open    (&[data-open]);
 @custom-variant closed  (&[data-closed]);
-@custom-variant on      (&[aria-pressed="true"]);
+@custom-variant on      (&:is([aria-pressed="true"], [aria-checked="true"]));
 @custom-variant side-top    (&[data-side="top"]);
 @custom-variant side-right  (&[data-side="right"]);
 @custom-variant side-bottom (&[data-side="bottom"]);