@pantoia/ui 0.3.0 → 0.4.0

package/dropdown-menu/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-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'
@@ -26,32 +26,34 @@ const PANEL = 'menu float text-fg rounded-r12 z-overlay'
   + ' 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,
@@ -61,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-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.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-fg-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) {
@@ -122,27 +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>
+        <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.ItemIndicator>
+        </MenuPrimitive.CheckboxItemIndicator>
       </span>
 
       <span className="min-w-0 grow">{children}</span>
@@ -150,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>
@@ -183,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}
@@ -219,20 +206,25 @@ export function DropdownMenuSubTrigger({ disabled, lead, className, children }:
       <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.SubTrigger>
+    </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>
   )
 }

package/field/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { createContext, use, useId, type ReactNode } from 'react'
+import { Field as FieldPrimitive } from '@base-ui/react/field'
 
 import { Label } from '../label'
 import { tv } from '../tv'
@@ -19,66 +19,23 @@ export const field = tv({
   defaultVariants: { layout: 'stack' },
 })
 
-export interface FieldContext {
-  id: string
-  labelId: string
-  messageId: string
-}
-
-export interface FieldControl {
-  id: string
-  'aria-labelledby': string
-  'aria-invalid': 'true' | undefined
-  'aria-describedby': string
-}
-
-const Context = createContext<FieldContext | null>(null)
-
-export interface FieldProps {
-  invalid?: boolean
+export type FieldProps = Omit<FieldPrimitive.Root.Props, 'className'> & {
   layout?: 'stack' | 'inline' | 'split'
   className?: string
-  children?: ReactNode | ((args: { control: FieldControl }) => ReactNode)
 }
 
-export function Field({ invalid = false, layout, className, children }: FieldProps) {
-  const id = useId()
-  const ctx: FieldContext = {
-    id,
-    labelId: `${id}-label`,
-    messageId: `${id}-message`,
-  }
-
-  const control: FieldControl = {
-    'id': id,
-    'aria-labelledby': ctx.labelId,
-    'aria-invalid': invalid ? 'true' : undefined,
-    'aria-describedby': ctx.messageId,
-  }
-
-  return (
-    <Context value={ctx}>
-      <div className={field({ layout, className })}>
-        {typeof children === 'function' ? children({ control }) : children}
-      </div>
-    </Context>
-  )
+export function Field({ layout, className, ...rest }: FieldProps) {
+  return <FieldPrimitive.Root {...rest} className={field({ layout, className })} />
 }
 
 const fieldLabel = tv({ base: 'group-has-disabled:text-fg-disabled' })
 
-export function FieldLabel({ className, children }: { className?: string, children?: ReactNode }) {
-  const ctx = use(Context)
+export type FieldLabelProps = Omit<FieldPrimitive.Label.Props, 'className'> & {
+  className?: string
+}
 
-  return (
-    <Label
-      id={ctx?.labelId}
-      htmlFor={ctx?.id}
-      className={fieldLabel({ className })}
-    >
-      {children}
-    </Label>
-  )
+export function FieldLabel({ render = <Label />, className, ...rest }: FieldLabelProps) {
+  return <FieldPrimitive.Label {...rest} render={render} className={fieldLabel({ className })} />
 }
 
 const fieldHelp = tv({
@@ -86,23 +43,17 @@ const fieldHelp = tv({
     + ' group-has-disabled:text-fg-disabled',
 })
 
-export function FieldHelp({ className, children }: { className?: string, children?: ReactNode }) {
-  const ctx = use(Context)
+export type FieldHelpProps = Omit<FieldPrimitive.Description.Props, 'className'> & {
+  className?: string
+}
 
-  return (
-    <p
-      id={ctx?.messageId}
-      className={fieldHelp({ className })}
-    >
-      {children}
-    </p>
-  )
+export function FieldHelp({ className, ...rest }: FieldHelpProps) {
+  return <FieldPrimitive.Description {...rest} className={fieldHelp({ className })} />
 }
 
-export interface FieldErrorProps {
+export type FieldErrorProps = Omit<FieldPrimitive.Error.Props, 'className'> & {
   items?: string | string[]
   className?: string
-  children?: ReactNode
 }
 
 const fieldError = tv({
@@ -110,15 +61,11 @@ const fieldError = tv({
     + ' flex items-start gap-tight',
 })
 
-export function FieldError({ items, className, children }: FieldErrorProps) {
-  const ctx = use(Context)
-  const list = items == null ? [] : Array.isArray(items) ? items : [items]
+export function FieldError({ items, match = true, render = <p />, className, children, ...rest }: FieldErrorProps) {
+  const list: string[] = items == null ? [] : Array.isArray(items) ? items : [items]
 
   return (
-    <p
-      id={ctx?.messageId}
-      className={fieldError({ className })}
-    >
+    <FieldPrimitive.Error {...rest} match={match} render={render} className={fieldError({ className })}>
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="mt-0.5 size-4 shrink-0">
         <circle cx="12" cy="12" r="10" />
         <line x1="12" x2="12" y1="8" y2="12" />
@@ -127,7 +74,7 @@ export function FieldError({ items, className, children }: FieldErrorProps) {
       <span className="flex min-w-0 flex-col gap-0.5">
         {children ?? list.map(t => <span key={t}>{t}</span>)}
       </span>
-    </p>
+    </FieldPrimitive.Error>
   )
 }
 
@@ -136,19 +83,16 @@ const fieldPending = tv({
     + ' flex items-start gap-tight',
 })
 
-export function FieldPending({ className, children }: { className?: string, children?: ReactNode }) {
-  const ctx = use(Context)
+export type FieldPendingProps = FieldHelpProps
 
+export function FieldPending({ className, children, ...rest }: FieldPendingProps) {
   return (
-    <p
-      id={ctx?.messageId}
-      className={fieldPending({ className })}
-    >
+    <FieldPrimitive.Description {...rest} className={fieldPending({ className })}>
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="mt-0.5 size-4 shrink-0 animate-spin motion-reduce:animate-none">
         <path d="M21 12a9 9 0 1 1-6.219-8.56" />
       </svg>
       <span className="min-w-0">{children}</span>
-    </p>
+    </FieldPrimitive.Description>
   )
 }
 
@@ -157,19 +101,16 @@ const fieldSuccess = tv({
     + ' flex items-start gap-tight',
 })
 
-export function FieldSuccess({ className, children }: { className?: string, children?: ReactNode }) {
-  const ctx = use(Context)
+export type FieldSuccessProps = FieldHelpProps
 
+export function FieldSuccess({ className, children, ...rest }: FieldSuccessProps) {
   return (
-    <p
-      id={ctx?.messageId}
-      className={fieldSuccess({ className })}
-    >
+    <FieldPrimitive.Description {...rest} className={fieldSuccess({ className })}>
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="mt-0.5 size-4 shrink-0">
         <circle cx="12" cy="12" r="10" />
         <path d="m16 9-5.5 5.5L8 12" />
       </svg>
       <span className="min-w-0">{children}</span>
-    </p>
+    </FieldPrimitive.Description>
   )
 }

package/input/index.tsx

@@ -1,4 +1,7 @@
-import type { InputHTMLAttributes } from 'react'
+'use client'
+
+import { Input as InputPrimitive } from '@base-ui/react/input'
+import type { ComponentProps } from 'react'
 
 import { tv } from '../tv'
 
@@ -26,11 +29,12 @@ export const input = tv({
   defaultVariants: { surface: 'bare', size: 'md' },
 })
 
-export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+export type InputProps = Omit<ComponentProps<typeof InputPrimitive>, 'className' | 'size'> & {
   surface?: 'bare' | 'well'
   size?: 'sm' | 'md' | 'lg'
+  className?: string
 }
 
 export function Input({ surface, size, className, ...rest }: InputProps) {
-  return <input {...rest} className={input({ surface, size, className })} />
+  return <InputPrimitive {...rest} className={input({ surface, size, className })} />
 }

package/kbd/index.tsx

@@ -3,8 +3,8 @@ import type { HTMLAttributes } from 'react'
 import { tv } from '../tv'
 
 const kbd = tv({
-  base: 'bg-bg-well text-fg-muted text-micro rounded-r4 inline-flex items-center'
-    + ' border border-line px-1.5 py-0.5 font-mono',
+  base: 'bg-bg-neutral-solid/10 text-fg text-micro rounded-r4 inline-flex items-center'
+    + ' border border-transparent px-1.5 py-0.5 font-mono',
 })
 
 export function Kbd({ className, ...rest }: HTMLAttributes<HTMLElement>) {

package/label/index.tsx

@@ -1,15 +1,13 @@
-import { Label as LabelPrimitive } from 'radix-ui'
 import type { ComponentProps } from 'react'
 
 import { tv } from '../tv'
 
 const labelText = tv({ base: 'text-label text-fg' })
 
-export function Label({ className, ...rest }: ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      {...rest}
-      className={labelText({ className })}
-    />
-  )
+export type LabelProps = Omit<ComponentProps<'label'>, 'className'> & {
+  className?: string
+}
+
+export function Label({ className, ...rest }: LabelProps) {
+  return <label {...rest} className={labelText({ className })} />
 }