@pantoia/ui 0.2.0 → 0.4.0

package/select/index.tsx

@@ -1,24 +1,24 @@
 'use client'
 
-import { Check, ChevronDown, ChevronUp } from 'lucide-react'
-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'
 
 export const selectTrigger = tv({
   base: 'flex w-full items-center justify-between gap-tight rounded-r8'
-    + ' text-value text-foreground'
+    + ' text-value text-fg'
     + ' transition-state'
     + ' 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:text-foreground-disabled disabled:cursor-not-allowed'
-    + ' unset:text-foreground-placeholder',
+    + ' disabled:bg-bg-neutral-disabled disabled:text-fg-disabled disabled:cursor-not-allowed'
+    + ' unset:text-fg-placeholder',
 
   variants: {
     surface: {
       bare: 'bg-transparent ring-1 ring-inset ring-line-strong',
-      well: 'bg-background-well',
+      well: 'bg-bg-well',
     },
     size: {
       sm: 'h-8 px-3',
@@ -30,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,
@@ -51,6 +84,12 @@ export function Select({
   open,
   defaultOpen,
   onOpenChange,
+  items,
+  name,
+  required,
+  readOnly,
+  modal,
+  form,
   placeholder,
   surface,
   size,
@@ -59,53 +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-foreground-subtle">
-          <ChevronDown className="size-4" />
+        <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 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-foreground rounded-float 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-foreground-subtle flex h-6 cursor-default items-center justify-center">
-            <ChevronUp className="size-4" />
-          </SelectPrimitive.ScrollUpButton>
-
-          <SelectPrimitive.Viewport className="flex flex-col gap-px px-1">
-            {children}
-          </SelectPrimitive.Viewport>
-
-          <SelectPrimitive.ScrollDownButton className="text-foreground-subtle flex h-6 cursor-default items-center justify-center">
-            <ChevronDown className="size-4" />
-          </SelectPrimitive.ScrollDownButton>
-
-          {arrow && (
-            <SelectPrimitive.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" />
+          <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>
   )
@@ -113,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-foreground-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>
@@ -134,43 +212,39 @@ const selectItem = tv({
   base: 'flex min-h-9 cursor-default items-center justify-between gap-stack'
     + ' rounded-r8 px-2 py-1 transition-state'
     + ' data-highlighted:bg-bg-neutral-hover data-highlighted:outline-none'
-    + ' data-disabled:text-foreground-disabled data-disabled:pointer-events-none',
+    + ' 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>
 
-      <SelectPrimitive.ItemIndicator className="text-foreground-muted flex shrink-0">
-        <Check className="size-4" />
+      <SelectPrimitive.ItemIndicator className="text-fg-muted flex shrink-0">
+        <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>
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
   )
 }
 
-const selectItemText = tv({ base: 'text-label text-foreground' })
+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-foreground-subtle' })
+const selectItemDescription = tv({ base: 'text-caption text-fg-subtle' })
 
 export function SelectItemDescription({ className, children }: { className?: string, children?: ReactNode }) {
   return (
@@ -182,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-background-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

@@ -20,7 +20,7 @@ export interface TableProps {
   children?: ReactNode
 }
 
-const tableFrame = tv({ base: 'frame rounded-panel overflow-hidden' })
+const tableFrame = tv({ base: 'frame rounded-r12 overflow-hidden' })
 
 export function Table({ label, fixed = false, className, children }: TableProps) {
   const [box, setBox] = useState<HTMLDivElement | null>(null)
@@ -59,7 +59,7 @@ export function Table({ label, fixed = false, className, children }: TableProps)
   )
 }
 
-const tableHeader = tv({ base: 'bg-background-well border-b border-line' })
+const tableHeader = tv({ base: 'bg-bg-well border-b border-line' })
 
 export function TableHeader({ className, children }: { className?: string, children?: ReactNode }) {
   return (
@@ -71,7 +71,7 @@ export function TableHeader({ className, children }: { className?: string, child
   )
 }
 
-const tableHeadCell = tv({ base: 'text-caption text-foreground-muted h-9 px-4 text-left whitespace-nowrap' })
+const tableHeadCell = tv({ base: 'text-caption text-fg-muted h-9 px-4 text-left whitespace-nowrap' })
 
 export function TableHeadCell({ className, children }: { className?: string, children?: ReactNode }) {
   return (
@@ -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 }) {
@@ -104,7 +103,7 @@ export function TableRow({ className, children }: { className?: string, children
 }
 
 export const tableCell = tv({
-  base: 'text-label text-foreground h-11 px-4',
+  base: 'text-label text-fg h-11 px-4',
 
   variants: {
     mono: { true: 'font-mono', false: '' },

package/tabs/index.module.css

@@ -2,13 +2,15 @@
   position: absolute;
   bottom: 0;
   height: 2px;
-  background: var(--color-foreground);
-  width: var(--tabs-indicator-size);
-  translate: var(--tabs-indicator-position) 0;
+  background: var(--color-fg);
+  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-hidden] { display: none; }
+
 @media (prefers-reduced-motion: reduce) {
   .underline { transition: none; }
 }

package/tabs/index.tsx

@@ -1,113 +1,62 @@
 '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>
   )
 }
 
 const tabsTrigger = tv({
-  base: 'text-label text-foreground-muted inline-flex h-9 items-center gap-tight px-3 transition-state'
+  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-foreground'
-    + ' disabled:text-foreground-disabled disabled:cursor-not-allowed'
-    + ' aria-selected:text-foreground'
+    + ' 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 TabsContent({ value, className, children }: {
+export function TabsTrigger({ className, ...rest }: TabsTriggerProps) {
+  return <TabsPrimitive.Tab {...rest} className={tabsTrigger({ className })} />
+}
+
+const tabsContent = tv({ base: s.content })
+
+export type TabsContentProps = Omit<ComponentProps<typeof TabsPrimitive.Panel>, 'className' | 'value'> & {
   value: string
   className?: string
-  children?: ReactNode
-}) {
-  return (
-    <TabsPrimitive.Content value={value} className={className}>
-      {children}
-    </TabsPrimitive.Content>
-  )
+}
+
+export function TabsContent({ className, ...rest }: TabsContentProps) {
+  return <TabsPrimitive.Panel {...rest} className={tabsContent({ className })} />
 }

package/tailwind.css

@@ -0,0 +1,3 @@
+@import "./palette.css";
+@import "./tokens.css";
+@import "./utilities.css";

package/textarea/index.tsx

@@ -1,21 +1,24 @@
-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'
 
 export const textarea = tv({
-  base: 'w-full rounded-r8 text-value text-foreground'
-    + ' placeholder:text-foreground-placeholder'
+  base: 'w-full rounded-r8 text-value text-fg'
+    + ' placeholder:text-fg-placeholder'
     + ' invalid:ring-2 invalid:ring-line-danger'
-    + ' read-only:text-foreground-muted'
+    + ' read-only:text-fg-muted'
     + ' resize-y'
     + ' transition-state'
     + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
-    + ' disabled:bg-bg-neutral-disabled disabled:text-foreground-disabled disabled:cursor-not-allowed',
+    + ' disabled:bg-bg-neutral-disabled disabled:text-fg-disabled disabled:cursor-not-allowed',
 
   variants: {
     surface: {
-      bare: 'bg-transparent ring-1 ring-inset ring-line-strong read-only:bg-background-well',
-      well: 'bg-background-well',
+      bare: 'bg-transparent ring-1 ring-inset ring-line-strong read-only:bg-bg-well',
+      well: 'bg-bg-well',
     },
     size: {
       sm: 'p-2',
@@ -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 })}
+    />
+  )
 }