@pantoia/ui 0.2.0 → 0.4.0

package/drawer/index.tsx

@@ -1,16 +1,7 @@
 'use client'
 
-import { Dialog } from 'radix-ui'
-import {
-  createContext,
-  use,
-  useRef,
-  useState,
-  type ComponentProps,
-  type PointerEvent as ReactPointerEvent,
-  type ReactNode,
-  type RefObject,
-} from 'react'
+import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer'
+import { createContext, use, type ComponentProps, type ReactNode } from 'react'
 
 import { tv } from '../tv'
 
@@ -18,106 +9,34 @@ import s from './index.module.css'
 
 type Side = 'left' | 'right'
 
-const DrawerContext = createContext<{ side: Side, close: () => void }>({
-  side: 'left',
-  close: () => {},
-})
-
-const SWIPE_THRESHOLD = 40
-const SWIPE_VELOCITY = 0.3
-const MIN_DRAG = 1
-const IGNORE = 'button,a,input,select,textarea,label,[role="button"]'
-
-const MOVEMENT = '--drawer-swipe-movement-x'
-
-type Drag = { id: number, from: number, at: number, dx: number, v: number, on: boolean }
-
-function useSwipeDismiss(el: RefObject<HTMLDivElement | null>, side: Side, close: () => void) {
-  const drag = useRef<Drag | null>(null)
-
-  const onPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
-    if (e.button !== 0) return
-    if ((e.target as Element).closest(IGNORE)) return
-
-    drag.current = { id: e.pointerId, from: e.clientX, at: performance.now(), dx: 0, v: 0, on: false }
-  }
-
-  const onPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {
-    const d = drag.current
-    if (!d || d.id !== e.pointerId || !el.current) return
-
-    const raw = e.clientX - d.from
-    const dx = side === 'left' ? Math.min(0, raw) : Math.max(0, raw)
-    const now = performance.now()
-    const span = now - d.at
-
-    if (span > 0) d.v = (dx - d.dx) / span
-    d.dx = dx
-    d.at = now
-
-    if (!d.on && Math.abs(dx) >= MIN_DRAG) {
-      d.on = true
-      el.current.setAttribute('data-swiping', '')
-      el.current.setPointerCapture(e.pointerId)
-    }
-
-    if (d.on) el.current.style.setProperty(MOVEMENT, `${dx}px`)
-  }
-
-  const onPointerUp = (e: ReactPointerEvent<HTMLDivElement>) => {
-    const d = drag.current
-    if (!d || d.id !== e.pointerId) return
-    drag.current = null
-
-    if (!d.on) return
-    el.current?.removeAttribute('data-swiping')
-
-    const gone = side === 'left' ? -d.dx : d.dx
-    const speed = side === 'left' ? -d.v : d.v
-
-    if (gone >= SWIPE_THRESHOLD || speed > SWIPE_VELOCITY) close()
-    else el.current?.style.removeProperty(MOVEMENT)
-  }
+const DrawerSide = createContext<Side>('left')
 
-  return { onPointerDown, onPointerMove, onPointerUp, onPointerCancel: onPointerUp }
-}
-
-export interface DrawerProps {
+export type DrawerProps = Omit<DrawerPrimitive.Root.Props, 'swipeDirection'> & {
   side?: Side
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  children: ReactNode
 }
 
-export function Drawer({ side = 'left', open, defaultOpen = false, onOpenChange, children }: DrawerProps) {
-  const [own, setOwn] = useState(defaultOpen)
-  const isOpen = open ?? own
-
-  const set = (next: boolean) => {
-    if (open === undefined) setOwn(next)
-    onOpenChange?.(next)
-  }
-
+export function Drawer({ side = 'left', ...rest }: DrawerProps) {
   return (
-    <DrawerContext value={{ side, close: () => set(false) }}>
-      <Dialog.Root open={isOpen} onOpenChange={set} modal>
-        {children}
-      </Dialog.Root>
-    </DrawerContext>
+    <DrawerSide value={side}>
+      <DrawerPrimitive.Root {...rest} swipeDirection={side} />
+    </DrawerSide>
   )
 }
 
-export function DrawerTrigger({ children }: { children: ReactNode }) {
-  return <Dialog.Trigger asChild>{children}</Dialog.Trigger>
+export type DrawerTriggerProps = ComponentProps<typeof DrawerPrimitive.Trigger>
+
+export function DrawerTrigger(props: DrawerTriggerProps) {
+  return <DrawerPrimitive.Trigger {...props} />
 }
 
-export function DrawerClose({ children }: { children: ReactNode }) {
-  return <Dialog.Close asChild>{children}</Dialog.Close>
+export type DrawerCloseProps = ComponentProps<typeof DrawerPrimitive.Close>
+
+export function DrawerClose(props: DrawerCloseProps) {
+  return <DrawerPrimitive.Close {...props} />
 }
 
 export const drawerContent = tv({
-  base: 'sheet text-foreground z-overlay fixed inset-y-0'
+  base: 'sheet text-fg z-overlay fixed inset-y-0'
     + ' flex w-full flex-col gap-stack overflow-y-auto p-4 sm:w-120'
     + ' focus-visible:outline-none',
   variants: {
@@ -125,37 +44,32 @@ export const drawerContent = tv({
   },
 })
 
-export function DrawerContent({
-  className,
-  style,
-  children,
-  ...rest
-}: ComponentProps<typeof Dialog.Content>) {
-  const { side, close } = use(DrawerContext)
-  const el = useRef<HTMLDivElement>(null)
-  const swipe = useSwipeDismiss(el, side, close)
+export type DrawerContentProps = Omit<ComponentProps<typeof DrawerPrimitive.Popup>, 'className'> & {
+  className?: string
+}
+
+export function DrawerContent({ className, style, ...rest }: DrawerContentProps) {
+  const side = use(DrawerSide)
 
   return (
-    <Dialog.Portal>
-      <Dialog.Overlay className="bg-background-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
-
-      <Dialog.Content
-        {...rest}
-        ref={el}
-        style={{ touchAction: 'pan-y', ...style }}
-        onPointerDown={swipe.onPointerDown}
-        onPointerMove={swipe.onPointerMove}
-        onPointerUp={swipe.onPointerUp}
-        onPointerCancel={swipe.onPointerCancel}
-        className={[
-          s.panel,
-          side === 'right' ? s['panel-right'] : '',
-          drawerContent({ side, className }),
-        ].filter(Boolean).join(' ')}
-      >
-        {children}
-      </Dialog.Content>
-    </Dialog.Portal>
+    <DrawerPrimitive.Portal>
+      <DrawerPrimitive.Backdrop className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+
+      <DrawerPrimitive.Viewport>
+        <DrawerPrimitive.Popup
+          {...rest}
+          style={state => ({
+            touchAction: 'pan-y',
+            ...(typeof style === 'function' ? style(state) : style),
+          })}
+          className={[
+            s.panel,
+            side === 'right' ? s['panel-right'] : '',
+            drawerContent({ side, className }),
+          ].filter(Boolean).join(' ')}
+        />
+      </DrawerPrimitive.Viewport>
+    </DrawerPrimitive.Portal>
   )
 }
 
@@ -189,14 +103,22 @@ export function DrawerHeader({ lead, trail, className, children }: DrawerHeaderP
 
 const drawerTitle = tv({ base: 'text-section min-w-0' })
 
-export function DrawerTitle({ className, ...rest }: ComponentProps<typeof Dialog.Title>) {
-  return <Dialog.Title {...rest} className={drawerTitle({ className })} />
+export type DrawerTitleProps = Omit<ComponentProps<typeof DrawerPrimitive.Title>, 'className'> & {
+  className?: string
+}
+
+export function DrawerTitle({ className, ...rest }: DrawerTitleProps) {
+  return <DrawerPrimitive.Title {...rest} className={drawerTitle({ className })} />
 }
 
-const drawerDescription = tv({ base: 'text-prose text-foreground-muted' })
+const drawerDescription = tv({ base: 'text-prose text-fg-muted' })
+
+export type DrawerDescriptionProps = Omit<ComponentProps<typeof DrawerPrimitive.Description>, 'className'> & {
+  className?: string
+}
 
-export function DrawerDescription({ className, ...rest }: ComponentProps<typeof Dialog.Description>) {
+export function DrawerDescription({ className, ...rest }: DrawerDescriptionProps) {
   return (
-    <Dialog.Description {...rest} className={drawerDescription({ className })} />
+    <DrawerPrimitive.Description {...rest} className={drawerDescription({ className })} />
   )
 }

package/dropdown-menu/index.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { Check, ChevronRight } from 'lucide-react'
-import { DropdownMenu as MenuPrimitive } from 'radix-ui'
+import { Menu as MenuPrimitive } from '@base-ui/react/menu'
 import type { ComponentProps, ReactNode } from 'react'
 
 import { tv } from '../tv'
@@ -14,7 +13,7 @@ export const menuItem = tv({
 
   variants: {
     color: {
-      neutral: 'text-foreground data-highlighted:bg-bg-neutral-hover data-disabled:text-foreground-disabled',
+      neutral: 'text-fg data-highlighted:bg-bg-neutral-hover data-disabled:text-fg-disabled',
       danger: 'text-fg-danger data-highlighted:bg-bg-danger-weak data-disabled:text-fg-danger/40',
     },
   },
@@ -22,37 +21,39 @@ export const menuItem = tv({
   defaultVariants: { color: 'neutral' },
 })
 
-const PANEL = 'menu float text-foreground rounded-float z-overlay'
+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'
   + ' focus-visible:outline-none'
 
-export interface DropdownMenuProps {
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  children?: ReactNode
-}
+export type DropdownMenuProps = ComponentProps<typeof MenuPrimitive.Root>
 
-export function DropdownMenu({ open, defaultOpen, onOpenChange, children }: DropdownMenuProps) {
-  return (
-    <MenuPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-      {children}
-    </MenuPrimitive.Root>
-  )
+export function DropdownMenu(props: DropdownMenuProps) {
+  return <MenuPrimitive.Root {...props} />
 }
 
-export function DropdownMenuTrigger({ children }: { children: ReactNode }) {
-  return <MenuPrimitive.Trigger asChild>{children}</MenuPrimitive.Trigger>
+export type DropdownMenuTriggerProps = ComponentProps<typeof MenuPrimitive.Trigger>
+
+export function DropdownMenuTrigger(props: DropdownMenuTriggerProps) {
+  return <MenuPrimitive.Trigger {...props} />
 }
 
-export interface DropdownMenuContentProps extends Omit<ComponentProps<typeof MenuPrimitive.Content>, 'align'> {
+export type DropdownMenuContentProps = Omit<ComponentProps<typeof MenuPrimitive.Popup>, 'className'> & {
   align?: 'start' | 'center' | 'end'
   arrow?: boolean
+  className?: string
 }
 
 const menuPanel = tv({ base: PANEL })
 
+const menuArrow = tv({
+  base: 'data-uncentered:invisible'
+    + ' side-top:top-full'
+    + ' side-bottom:bottom-full side-bottom:rotate-180'
+    + ' side-right:left-0 side-right:origin-top-left side-right:rotate-90 side-right:-translate-y-1/2'
+    + ' side-left:right-0 side-left:origin-top-right side-left:-rotate-90 side-left:-translate-y-1/2',
+})
+
 export function DropdownMenuContent({
   align = 'start',
   arrow = true,
@@ -62,50 +63,53 @@ export function DropdownMenuContent({
 }: DropdownMenuContentProps) {
   return (
     <MenuPrimitive.Portal>
-      <MenuPrimitive.Content
-        {...rest}
+      <MenuPrimitive.Positioner
         align={align}
-        sideOffset={8}
+        sideOffset={arrow ? 14 : 8}
         arrowPadding={16}
-        className={menuPanel({ className })}
+        className="z-overlay min-w-max will-change-transform"
       >
-        {children}
-
-        {arrow && (
-          <MenuPrimitive.Arrow asChild width={12} height={6}>
-            <svg viewBox="0 0 12 6" preserveAspectRatio="none" className="fill-background-panel -translate-y-px">
-              <path d="M0 0L4.58579 4.58579C5.36683 5.36683 6.63316 5.36684 7.41421 4.58579L12 0" className="stroke-line stroke-1" />
-            </svg>
-          </MenuPrimitive.Arrow>
-        )}
-      </MenuPrimitive.Content>
+        <MenuPrimitive.Popup {...rest} className={menuPanel({ className })}>
+          {children}
+
+          {arrow && (
+            <MenuPrimitive.Arrow className={menuArrow()}>
+              <svg width={12} height={6} viewBox="0 0 12 6" preserveAspectRatio="none" className="block fill-bg-panel -translate-y-px">
+                <path d="M0 0L4.58579 4.58579C5.36683 5.36683 6.63316 5.36684 7.41421 4.58579L12 0" className="stroke-line stroke-1" />
+              </svg>
+            </MenuPrimitive.Arrow>
+          )}
+        </MenuPrimitive.Popup>
+      </MenuPrimitive.Positioner>
     </MenuPrimitive.Portal>
   )
 }
 
 const menuGroup = tv({ base: 'flex flex-col gap-px' })
 
-export function DropdownMenuGroup({ label, className, children }: {
+export type DropdownMenuGroupProps = Omit<ComponentProps<typeof MenuPrimitive.Group>, 'className'> & {
   label?: string
   className?: string
-  children?: ReactNode
-}) {
+}
+
+export function DropdownMenuGroup({ label, className, children, ...rest }: DropdownMenuGroupProps) {
   return (
-    <MenuPrimitive.Group className={menuGroup({ className })}>
+    <MenuPrimitive.Group {...rest} className={menuGroup({ className })}>
       {label && (
-        <MenuPrimitive.Label className="text-caption text-foreground-subtle px-2 pb-1 pt-2">
+        <MenuPrimitive.GroupLabel className="text-caption text-fg-subtle px-2 pb-1 pt-2">
           {label}
-        </MenuPrimitive.Label>
+        </MenuPrimitive.GroupLabel>
       )}
       {children}
     </MenuPrimitive.Group>
   )
 }
 
-export interface DropdownMenuItemProps extends Omit<ComponentProps<typeof MenuPrimitive.Item>, 'color'> {
+export type DropdownMenuItemProps = Omit<ComponentProps<typeof MenuPrimitive.Item>, 'className' | 'color'> & {
   color?: 'neutral' | 'danger'
   lead?: ReactNode
   trail?: ReactNode
+  className?: string
 }
 
 export function DropdownMenuItem({ color, lead, trail, className, children, ...rest }: DropdownMenuItemProps) {
@@ -123,25 +127,19 @@ export function DropdownMenuItem({ color, lead, trail, className, children, ...r
   )
 }
 
-export function DropdownMenuCheckboxItem({ checked, onCheckedChange, disabled, className, children }: {
-  checked?: boolean
-  onCheckedChange?: (checked: boolean) => void
-  disabled?: boolean
+export type DropdownMenuCheckboxItemProps = Omit<ComponentProps<typeof MenuPrimitive.CheckboxItem>, 'className'> & {
   className?: string
-  children?: ReactNode
-}) {
+}
+
+export function DropdownMenuCheckboxItem({ className, children, ...rest }: DropdownMenuCheckboxItemProps) {
   return (
-    <MenuPrimitive.CheckboxItem
-      checked={checked}
-      onCheckedChange={onCheckedChange}
-      disabled={disabled}
-      className={menuItem({ className })}
-      onSelect={e => e.preventDefault()}
-    >
+    <MenuPrimitive.CheckboxItem {...rest} className={menuItem({ className })}>
       <span className="menu-lead grid size-4 shrink-0 place-items-center">
-        <MenuPrimitive.ItemIndicator>
-          <Check className="size-4" />
-        </MenuPrimitive.ItemIndicator>
+        <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>
@@ -149,30 +147,23 @@ export function DropdownMenuCheckboxItem({ checked, onCheckedChange, disabled, c
   )
 }
 
-export function DropdownMenuRadioGroup({ value, onValueChange, children }: {
-  value?: string
-  onValueChange?: (value: string) => void
-  children?: ReactNode
-}) {
-  return (
-    <MenuPrimitive.RadioGroup value={value} onValueChange={onValueChange}>
-      {children}
-    </MenuPrimitive.RadioGroup>
-  )
+export type DropdownMenuRadioGroupProps = ComponentProps<typeof MenuPrimitive.RadioGroup>
+
+export function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps) {
+  return <MenuPrimitive.RadioGroup {...props} />
 }
 
-export function DropdownMenuRadioItem({ value, disabled, className, children }: {
-  value: string
-  disabled?: boolean
+export type DropdownMenuRadioItemProps = Omit<ComponentProps<typeof MenuPrimitive.RadioItem>, 'className'> & {
   className?: string
-  children?: ReactNode
-}) {
+}
+
+export function DropdownMenuRadioItem({ className, children, ...rest }: DropdownMenuRadioItemProps) {
   return (
-    <MenuPrimitive.RadioItem value={value} disabled={disabled} className={menuItem({ className })}>
+    <MenuPrimitive.RadioItem {...rest} className={menuItem({ className })}>
       <span className="menu-lead grid size-4 shrink-0 place-items-center">
-        <MenuPrimitive.ItemIndicator>
+        <MenuPrimitive.RadioItemIndicator>
           <span className="bg-bg-neutral-solid in-disabled:bg-bg-neutral-solid-checked-disabled size-2 rounded-full" />
-        </MenuPrimitive.ItemIndicator>
+        </MenuPrimitive.RadioItemIndicator>
       </span>
 
       <span className="min-w-0 grow">{children}</span>
@@ -182,31 +173,28 @@ export function DropdownMenuRadioItem({ value, disabled, className, children }:
 
 const menuSeparator = tv({ base: 'bg-line -mx-1 my-1 h-px' })
 
-export function DropdownMenuSeparator({ className }: { className?: string }) {
-  return <MenuPrimitive.Separator className={menuSeparator({ className })} />
+export type DropdownMenuSeparatorProps = Omit<ComponentProps<typeof MenuPrimitive.Separator>, 'className'> & {
+  className?: string
 }
 
-export function DropdownMenuSub({ open, defaultOpen, onOpenChange, children }: {
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  children?: ReactNode
-}) {
-  return (
-    <MenuPrimitive.Sub open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-      {children}
-    </MenuPrimitive.Sub>
-  )
+export function DropdownMenuSeparator({ className, ...rest }: DropdownMenuSeparatorProps) {
+  return <MenuPrimitive.Separator {...rest} className={menuSeparator({ className })} />
 }
 
-export function DropdownMenuSubTrigger({ disabled, lead, className, children }: {
-  disabled?: boolean
+export type DropdownMenuSubProps = ComponentProps<typeof MenuPrimitive.SubmenuRoot>
+
+export function DropdownMenuSub(props: DropdownMenuSubProps) {
+  return <MenuPrimitive.SubmenuRoot {...props} />
+}
+
+export type DropdownMenuSubTriggerProps = Omit<ComponentProps<typeof MenuPrimitive.SubmenuTrigger>, 'className'> & {
   lead?: ReactNode
   className?: string
-  children?: ReactNode
-}) {
+}
+
+export function DropdownMenuSubTrigger({ lead, className, children, ...rest }: DropdownMenuSubTriggerProps) {
   return (
-    <MenuPrimitive.SubTrigger disabled={disabled} className={menuItem({ className })}>
+    <MenuPrimitive.SubmenuTrigger {...rest} className={menuItem({ className })}>
       {lead && (
         <span className="menu-lead grid size-4 shrink-0 place-items-center">
           {lead}
@@ -215,21 +203,28 @@ export function DropdownMenuSubTrigger({ disabled, lead, className, children }:
 
       <span className="min-w-0 grow">{children}</span>
 
-      <ChevronRight className="text-foreground-subtle size-4 shrink-0" />
-    </MenuPrimitive.SubTrigger>
+      <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>
   )
 }
 
-export function DropdownMenuSubContent({ className, children, ...rest }: ComponentProps<typeof MenuPrimitive.SubContent>) {
+export type DropdownMenuSubContentProps = Omit<ComponentProps<typeof MenuPrimitive.Popup>, 'className'> & {
+  className?: string
+}
+
+export function DropdownMenuSubContent({ className, children, ...rest }: DropdownMenuSubContentProps) {
   return (
     <MenuPrimitive.Portal>
-      <MenuPrimitive.SubContent
-        {...rest}
+      <MenuPrimitive.Positioner
         sideOffset={4}
-        className={menuPanel({ className })}
+        className="z-overlay min-w-max will-change-transform"
       >
-        {children}
-      </MenuPrimitive.SubContent>
+        <MenuPrimitive.Popup {...rest} className={menuPanel({ className })}>
+          {children}
+        </MenuPrimitive.Popup>
+      </MenuPrimitive.Positioner>
     </MenuPrimitive.Portal>
   )
 }