@pantoia/ui 0.12.1 → 0.14.0

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.12.1",
+  "version": "0.14.0",
   "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"
       >