@pantoia/ui 0.3.0 → 0.4.0

package/select/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { Select as SelectPrimitive } from 'radix-ui'
+import { Select as SelectPrimitive } from '@base-ui/react/select'
+import { Children, isValidElement, useEffect, useRef, useState } from 'react'
 import type { ComponentProps, ReactNode } from 'react'
 
 import { tv } from '../tv'
@@ -29,20 +30,53 @@ export const selectTrigger = tv({
   defaultVariants: { surface: 'bare', size: 'md' },
 })
 
-export interface SelectProps extends Omit<ComponentProps<typeof SelectPrimitive.Trigger>, 'value' | 'defaultValue' | 'dir'> {
-  value?: string
-  defaultValue?: string
-  onValueChange?: (value: string) => void
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  placeholder?: string
-  surface?: 'bare' | 'well'
-  size?: 'sm' | 'md' | 'lg'
-  arrow?: boolean
-  children?: ReactNode
+const selectArrow = 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',
+})
+
+type ItemElementProps = { value?: string, children?: ReactNode }
+
+function findItemText(children: ReactNode): { label: ReactNode } | undefined {
+  let found: { label: ReactNode } | undefined
+  Children.forEach(children, child => {
+    if (found || !isValidElement<ItemElementProps>(child)) return
+    found = child.type === SelectItemText
+      ? { label: child.props.children }
+      : findItemText(child.props.children)
+  })
+  return found
 }
 
+function collectItems(children: ReactNode, items: Record<string, ReactNode>) {
+  Children.forEach(children, child => {
+    if (!isValidElement<ItemElementProps>(child)) return
+    if (child.type === SelectItem && child.props.value !== undefined) {
+      const text = findItemText(child.props.children)
+      if (text) items[child.props.value] = text.label
+      return
+    }
+    collectItems(child.props.children, items)
+  })
+  return items
+}
+
+export type SelectProps = Omit<ComponentProps<typeof SelectPrimitive.Trigger>, 'className' | 'value' | 'defaultValue'>
+  & Pick<SelectPrimitive.Root.Props<string>, 'open' | 'defaultOpen' | 'onOpenChange' | 'items' | 'name' | 'required' | 'readOnly' | 'modal' | 'form'>
+  & {
+    value?: string
+    defaultValue?: string
+    onValueChange?: (value: string, eventDetails: SelectPrimitive.Root.ChangeEventDetails) => void
+    placeholder?: string
+    surface?: 'bare' | 'well'
+    size?: 'sm' | 'md' | 'lg'
+    arrow?: boolean
+    className?: string
+  }
+
 export function Select({
   value,
   defaultValue,
@@ -50,6 +84,12 @@ export function Select({
   open,
   defaultOpen,
   onOpenChange,
+  items,
+  name,
+  required,
+  readOnly,
+  modal,
+  form,
   placeholder,
   surface,
   size,
@@ -58,59 +98,91 @@ export function Select({
   children,
   ...rest
 }: SelectProps) {
+  const [shown, setShown] = useState(defaultOpen ?? false)
+  const popup = useRef<HTMLDivElement>(null)
+  const isOpen = open ?? shown
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    const frame = requestAnimationFrame(() => {
+      const list = popup.current
+      if (!list || list.querySelector('[role="option"][aria-selected="true"]')) return
+      list.querySelector<HTMLElement>('[role="option"]:not([data-disabled])')?.focus({ preventScroll: true })
+    })
+
+    return () => cancelAnimationFrame(frame)
+  }, [isOpen])
+
   return (
-    <SelectPrimitive.Root
+    <SelectPrimitive.Root<string>
       value={value}
       defaultValue={defaultValue}
-      onValueChange={onValueChange}
+      onValueChange={(next, eventDetails) => onValueChange?.(next ?? '', eventDetails)}
       open={open}
       defaultOpen={defaultOpen}
-      onOpenChange={onOpenChange}
+      onOpenChange={(next, eventDetails) => {
+        setShown(next)
+        onOpenChange?.(next, eventDetails)
+      }}
+      items={items ?? collectItems(children, {})}
+      name={name}
+      required={required}
+      readOnly={readOnly}
+      modal={modal}
+      form={form}
     >
       <SelectPrimitive.Trigger {...rest} className={selectTrigger({ surface, size, className })}>
         <span className="min-w-0 truncate">
           <SelectPrimitive.Value placeholder={placeholder} />
         </span>
         <SelectPrimitive.Icon className="text-fg-subtle">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4 transition-transform in-data-popup-open:rotate-180 motion-reduce:transition-none">
             <path d="m6 9 6 6 6-6" />
           </svg>
         </SelectPrimitive.Icon>
       </SelectPrimitive.Trigger>
 
       <SelectPrimitive.Portal>
-        <SelectPrimitive.Content
-          className="float text-fg rounded-r12 z-overlay
-               min-w-(--radix-select-trigger-width) py-1
-               open:animate-enter closed:animate-exit"
-          position="popper"
-          sideOffset={8}
+        <SelectPrimitive.Positioner
+          alignItemWithTrigger={false}
+          align="start"
+          sideOffset={arrow ? 14 : 8}
           arrowPadding={16}
+          className="z-overlay min-w-max will-change-transform"
         >
-          <SelectPrimitive.ScrollUpButton className="text-fg-subtle flex h-6 cursor-default items-center justify-center">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
-              <path d="m18 15-6-6-6 6" />
-            </svg>
-          </SelectPrimitive.ScrollUpButton>
-
-          <SelectPrimitive.Viewport className="flex flex-col gap-px px-1">
-            {children}
-          </SelectPrimitive.Viewport>
-
-          <SelectPrimitive.ScrollDownButton className="text-fg-subtle flex h-6 cursor-default items-center justify-center">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
-              <path d="m6 9 6 6 6-6" />
-            </svg>
-          </SelectPrimitive.ScrollDownButton>
-
-          {arrow && (
-            <SelectPrimitive.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" />
+          <SelectPrimitive.Popup
+            ref={popup}
+            className="float text-fg rounded-r12 z-overlay
+                 flex flex-col outline-none
+                 min-w-(--anchor-width) py-1
+                 open:animate-enter closed:animate-exit"
+          >
+            <SelectPrimitive.ScrollUpArrow className="text-fg-subtle flex h-6 cursor-default items-center justify-center">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+                <path d="m18 15-6-6-6 6" />
               </svg>
-            </SelectPrimitive.Arrow>
-          )}
-        </SelectPrimitive.Content>
+            </SelectPrimitive.ScrollUpArrow>
+
+            <SelectPrimitive.List className="relative flex flex-1 flex-col gap-px overflow-x-hidden overflow-y-auto px-1">
+              {children}
+            </SelectPrimitive.List>
+
+            <SelectPrimitive.ScrollDownArrow className="text-fg-subtle flex h-6 cursor-default items-center justify-center">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+                <path d="m6 9 6 6 6-6" />
+              </svg>
+            </SelectPrimitive.ScrollDownArrow>
+
+            {arrow && (
+              <SelectPrimitive.Arrow className={selectArrow()}>
+                <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>
+              </SelectPrimitive.Arrow>
+            )}
+          </SelectPrimitive.Popup>
+        </SelectPrimitive.Positioner>
       </SelectPrimitive.Portal>
     </SelectPrimitive.Root>
   )
@@ -118,17 +190,18 @@ export function Select({
 
 const selectGroup = tv({ base: 'flex flex-col gap-px' })
 
-export function SelectGroup({ label, className, children }: {
+export type SelectGroupProps = Omit<ComponentProps<typeof SelectPrimitive.Group>, 'className'> & {
   label?: string
   className?: string
-  children?: ReactNode
-}) {
+}
+
+export function SelectGroup({ label, className, children, ...rest }: SelectGroupProps) {
   return (
-    <SelectPrimitive.Group className={selectGroup({ className })}>
+    <SelectPrimitive.Group {...rest} className={selectGroup({ className })}>
       {label && (
-        <SelectPrimitive.Label className="text-caption text-fg-subtle px-2 pb-1 pt-2">
+        <SelectPrimitive.GroupLabel className="text-caption text-fg-subtle px-2 pb-1 pt-2">
           {label}
-        </SelectPrimitive.Label>
+        </SelectPrimitive.GroupLabel>
       )}
       {children}
     </SelectPrimitive.Group>
@@ -142,18 +215,14 @@ const selectItem = tv({
     + ' data-disabled:text-fg-disabled data-disabled:pointer-events-none',
 })
 
-export function SelectItem({ value, disabled, className, children }: {
+export type SelectItemProps = Omit<ComponentProps<typeof SelectPrimitive.Item>, 'className' | 'value'> & {
   value: string
-  disabled?: boolean
   className?: string
-  children?: ReactNode
-}) {
+}
+
+export function SelectItem({ className, children, ...rest }: SelectItemProps) {
   return (
-    <SelectPrimitive.Item
-      value={value}
-      disabled={disabled}
-      className={selectItem({ className })}
-    >
+    <SelectPrimitive.Item {...rest} className={selectItem({ className })}>
       <span className="flex min-w-0 flex-col">
         {children}
       </span>
@@ -167,14 +236,12 @@ export function SelectItem({ value, disabled, className, children }: {
   )
 }
 
-const selectItemText = tv({ base: 'text-label text-fg' })
+export type SelectItemTextProps = Omit<ComponentProps<typeof SelectPrimitive.ItemText>, 'className'> & {
+  className?: string
+}
 
-export function SelectItemText({ className, children }: { className?: string, children?: ReactNode }) {
-  return (
-    <SelectPrimitive.ItemText className={selectItemText({ className })}>
-      {children}
-    </SelectPrimitive.ItemText>
-  )
+export function SelectItemText({ className: _className, render = <span />, ...rest }: SelectItemTextProps) {
+  return <SelectPrimitive.ItemText {...rest} render={render} />
 }
 
 const selectItemDescription = tv({ base: 'text-caption text-fg-subtle' })
@@ -189,6 +256,10 @@ export function SelectItemDescription({ className, children }: { className?: str
 
 const selectSeparator = tv({ base: 'bg-line -mx-1 my-1 h-px' })
 
-export function SelectSeparator({ className }: { className?: string }) {
-  return <SelectPrimitive.Separator className={selectSeparator({ className })} />
+export type SelectSeparatorProps = Omit<ComponentProps<typeof SelectPrimitive.Separator>, 'className'> & {
+  className?: string
+}
+
+export function SelectSeparator({ className, ...rest }: SelectSeparatorProps) {
+  return <SelectPrimitive.Separator {...rest} className={selectSeparator({ className })} />
 }

package/switch/index.tsx

@@ -1,13 +1,13 @@
 'use client'
 
-import { Switch as SwitchPrimitive } from 'radix-ui'
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch'
 import type { ComponentProps } from 'react'
 
 import { tv } from '../tv'
 
 export const uiSwitch = tv({
   base: 'h-6 w-10 shrink-0 rounded-full p-0.5 transition-state press press-shrink'
-    + ' bg-bg-well ring-1 ring-inset ring-line-strong'
+    + ' bg-bg-neutral-track ring-1 ring-inset ring-line-strong'
     + ' invalid:ring-2 invalid:ring-line-danger'
     + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
     + ' disabled:bg-bg-neutral-disabled disabled:cursor-not-allowed'
@@ -26,15 +26,22 @@ export const uiSwitch = tv({
   defaultVariants: { color: 'neutral' },
 })
 
-export interface SwitchProps extends ComponentProps<typeof SwitchPrimitive.Root> {
+export type SwitchProps = Omit<ComponentProps<typeof SwitchPrimitive.Root>, 'className'> & {
   color?: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+  className?: string
 }
 
-export function Switch({ color, className, ...rest }: SwitchProps) {
+export function Switch({
+  color,
+  className,
+  nativeButton = true,
+  render = <button type="button" />,
+  ...rest
+}: SwitchProps) {
   return (
-    <SwitchPrimitive.Root {...rest} className={uiSwitch({ color, className })}>
+    <SwitchPrimitive.Root {...rest} nativeButton={nativeButton} render={render} className={uiSwitch({ color, className })}>
       <SwitchPrimitive.Thumb
-        className="bg-bg-neutral-knob block size-5 rounded-full checked:translate-x-4
+        className="bg-bg-neutral-knob-off checked:bg-bg-neutral-knob block size-5 rounded-full checked:translate-x-4
              transition-transform ease-state motion-reduce:transition-none"
       />
     </SwitchPrimitive.Root>

package/table/index.tsx

@@ -89,8 +89,7 @@ export function TableBody({ className, children }: { className?: string, childre
 }
 
 const tableRow = tv({
-  base: 'border-b border-line last:border-b-0 transition-state'
-    + ' hover:bg-bg-neutral-hover',
+  base: 'border-b border-line last:border-b-0',
 })
 
 export function TableRow({ className, children }: { className?: string, children?: ReactNode }) {

package/tabs/index.module.css

@@ -3,13 +3,13 @@
   bottom: 0;
   height: 2px;
   background: var(--color-fg);
-  width: var(--tabs-indicator-size);
-  translate: var(--tabs-indicator-position) 0;
+  width: var(--active-tab-width);
+  translate: var(--active-tab-left) 0;
   transition: translate var(--dur-state) var(--ease-state),
               width var(--dur-state) var(--ease-state);
 }
 
-.content[data-state="inactive"] { display: none; }
+.content[data-hidden] { display: none; }
 
 @media (prefers-reduced-motion: reduce) {
   .underline { transition: none; }

package/tabs/index.tsx

@@ -1,73 +1,31 @@
 'use client'
 
-import { Tabs as TabsPrimitive } from 'radix-ui'
-import { useEffect, useRef, type ReactNode } from 'react'
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
+import type { ComponentProps } from 'react'
 
 import { tv } from '../tv'
 
 import s from './index.module.css'
 
-const ACTIVE = '[data-state="active"]'
-
-export interface TabsProps {
-  value?: string
-  defaultValue?: string
-  onValueChange?: (value: string) => void
-  className?: string
-  children?: ReactNode
-}
+export type TabsProps = Omit<ComponentProps<typeof TabsPrimitive.Root>, 'className'> & { className?: string }
 
 const tabs = tv({ base: 'flex flex-col gap-stack' })
 
-export function Tabs({ value, defaultValue, onValueChange, className, children }: TabsProps) {
-  return (
-    <TabsPrimitive.Root
-      value={value}
-      defaultValue={defaultValue}
-      onValueChange={onValueChange}
-      className={tabs({ className })}
-    >
-      {children}
-    </TabsPrimitive.Root>
-  )
+export function Tabs({ className, ...rest }: TabsProps) {
+  return <TabsPrimitive.Root {...rest} className={tabs({ className })} />
 }
 
 const tabsList = tv({ base: 'border-line scrollbar-thin scrollbar-thumb-line-strong scrollbar-track-transparent overflow-x-auto border-b' })
 
-export function TabsList({ className, children }: { className?: string, children?: ReactNode }) {
-  const list = useRef<HTMLDivElement>(null)
-  const bar = useRef<HTMLSpanElement>(null)
-
-  useEffect(() => {
-    const root = list.current
-    const mark = bar.current
-    if (!root || !mark) return
-
-    const measure = () => {
-      const active = root.querySelector<HTMLElement>(ACTIVE)
-      mark.style.setProperty('--tabs-indicator-size', `${active?.offsetWidth ?? 0}px`)
-      mark.style.setProperty('--tabs-indicator-position', `${active?.offsetLeft ?? 0}px`)
-    }
-
-    measure()
-
-    const attrs = new MutationObserver(measure)
-    attrs.observe(root, { attributes: true, subtree: true, attributeFilter: ['data-state'] })
-
-    const box = new ResizeObserver(measure)
-    box.observe(root)
-
-    return () => { attrs.disconnect(); box.disconnect() }
-  }, [])
+export type TabsListProps = Omit<ComponentProps<typeof TabsPrimitive.List>, 'className'> & { className?: string }
 
+export function TabsList({ className, children, ...rest }: TabsListProps) {
   return (
-    <div
-      className={tabsList({ className })}
-    >
-      <TabsPrimitive.List ref={list} className="relative flex w-max min-w-full">
+    <div className={tabsList({ className })}>
+      <TabsPrimitive.List {...rest} className="relative flex w-max min-w-full">
         {children}
 
-        <span ref={bar} className={s.underline} />
+        <TabsPrimitive.Indicator className={s.underline} />
       </TabsPrimitive.List>
     </div>
   )
@@ -76,41 +34,29 @@ export function TabsList({ className, children }: { className?: string, children
 const tabsTrigger = tv({
   base: 'text-label text-fg-muted inline-flex h-9 items-center gap-tight px-3 transition-state'
     + ' [&_svg]:size-4'
-    + ' press-shrink enabled:hover:text-fg'
-    + ' disabled:text-fg-disabled disabled:cursor-not-allowed'
+    + ' press-shrink not-data-disabled:cursor-pointer not-data-disabled:hover:text-fg'
+    + ' data-disabled:text-fg-disabled data-disabled:cursor-not-allowed'
     + ' aria-selected:text-fg'
     + ' focus-visible:outline-2 focus-visible:-outline-offset-2'
     + ' focus-visible:outline-line-focus-ring',
 })
 
-export function TabsTrigger({ value, disabled, className, children }: {
+export type TabsTriggerProps = Omit<ComponentProps<typeof TabsPrimitive.Tab>, 'className' | 'value'> & {
   value: string
-  disabled?: boolean
   className?: string
-  children?: ReactNode
-}) {
-  return (
-    <TabsPrimitive.Trigger
-      value={value}
-      disabled={disabled}
-      className={tabsTrigger({ className })}
-    >
-      {children}
-    </TabsPrimitive.Trigger>
-  )
+}
+
+export function TabsTrigger({ className, ...rest }: TabsTriggerProps) {
+  return <TabsPrimitive.Tab {...rest} className={tabsTrigger({ className })} />
 }
 
 const tabsContent = tv({ base: s.content })
 
-export function TabsContent({ value, forceMount, className, children }: {
+export type TabsContentProps = Omit<ComponentProps<typeof TabsPrimitive.Panel>, 'className' | 'value'> & {
   value: string
-  forceMount?: boolean
   className?: string
-  children?: ReactNode
-}) {
-  return (
-    <TabsPrimitive.Content value={value} forceMount={forceMount || undefined} className={tabsContent({ className })}>
-      {children}
-    </TabsPrimitive.Content>
-  )
+}
+
+export function TabsContent({ className, ...rest }: TabsContentProps) {
+  return <TabsPrimitive.Panel {...rest} className={tabsContent({ className })} />
 }

package/textarea/index.tsx

@@ -1,4 +1,7 @@
-import type { TextareaHTMLAttributes } from 'react'
+'use client'
+
+import { Field as FieldPrimitive } from '@base-ui/react/field'
+import type { ComponentProps } from 'react'
 
 import { tv } from '../tv'
 
@@ -27,11 +30,20 @@ export const textarea = tv({
   defaultVariants: { surface: 'bare', size: 'md' },
 })
 
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  surface?: 'bare' | 'well'
-  size?: 'sm' | 'md' | 'lg'
-}
+export type TextareaProps = Omit<ComponentProps<'textarea'>, 'className' | 'value' | 'defaultValue'>
+  & Pick<FieldPrimitive.Control.Props, 'value' | 'defaultValue' | 'onValueChange'>
+  & {
+    surface?: 'bare' | 'well'
+    size?: 'sm' | 'md' | 'lg'
+    className?: string
+  }
 
-export function Textarea({ surface, size, rows = 3, className, ...rest }: TextareaProps) {
-  return <textarea {...rest} rows={rows} className={textarea({ surface, size, className })} />
+export function Textarea({ surface, size, rows = 3, cols, wrap, className, ...rest }: TextareaProps) {
+  return (
+    <FieldPrimitive.Control
+      {...(rest as FieldPrimitive.Control.Props)}
+      render={<textarea rows={rows} cols={cols} wrap={wrap} />}
+      className={textarea({ surface, size, className })}
+    />
+  )
 }