@adea-ai/ui 0.84.0 → 0.87.0

package/dist/r/src/components/ui/field/field.tsx

@@ -1,6 +1,8 @@
 import { TextField as KobalteTextField } from '@kobalte/core/text-field'
-import type { ComponentProps } from 'solid-js'
-import { Show, splitProps } from 'solid-js'
+import type { ComponentProps, JSX } from 'solid-js'
+import { createUniqueId, Show, splitProps } from 'solid-js'
+import { Label } from '../label/label'
+import { createFormFieldContext, FormFieldContext } from '../../../lib/form-field'
 import { cn } from '../../../lib/utils'
 
 /**
@@ -9,21 +11,110 @@ import { cn } from '../../../lib/utils'
  * The wrapper that makes a form control describable and validatable: a label,
  * a description, an error message, and the ARIA relationships between them.
  *
+ * This Kobalte TextField composition is for its own `FieldLabel`, `FieldInput`
+ * and `FieldTextArea` parts. Use `FormField` to wire the standalone shared
+ * controls, including checkboxes, switches and comboboxes.
+ *
  * It is built on Kobalte's TextField specifically so `aria-describedby`,
  * `aria-invalid` and `aria-errormessage` are wired by construction. Those three
  * attributes are the difference between "this field is required and empty" and
  * a red border that only a sighted user can perceive — and they are also the
  * first thing a hand-rolled form drops.
  *
- * `Field` owns the description and the error slot, so a form's controls line up
- * and its messages land in the same place regardless of which control is used.
- * Compose it with any control: `Field` wraps, `Label`/`Input`/`Select` fill it.
+ * `Field` owns the description and the error slot, so its controls line up and
+ * its messages land in the same place regardless of which TextField part is used.
  */
 export function Field(props: ComponentProps<typeof KobalteTextField>) {
   const [local, rest] = splitProps(props, ['class'])
   return <KobalteTextField class={cn('flex flex-col gap-1.5', local.class)} {...rest} />
 }
 
+export type FormFieldProps = Omit<ComponentProps<'div'>, 'children' | 'ref'> & {
+  label: string
+  hint?: string
+  error?: string
+  controlId?: string
+  group?: boolean
+  children: JSX.Element
+}
+
+/**
+ * FormField.
+ *
+ * A shared label, help and validation wrapper for any one shared control. Its
+ * context is consumed by Input, Textarea, NativeSelect, Checkbox, Switch,
+ * RadioGroup and ComboboxInput, so the actual focusable element receives the
+ * generated ID and description relationships. Set `group` when the label names
+ * a set of controls; the wrapper then uses fieldset and legend semantics.
+ */
+export function FormField(props: FormFieldProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'label',
+    'hint',
+    'error',
+    'controlId',
+    'group',
+    'children',
+  ])
+  const fieldId = createUniqueId()
+  const labelId = `${fieldId}-label`
+  const descriptionId = `${fieldId}-description`
+  const errorId = `${fieldId}-error`
+  const field = createFormFieldContext({
+    controlId: local.controlId,
+    defaultControlId: fieldId,
+    labelId,
+    descriptionId,
+    errorId,
+    hint: () => local.hint,
+    error: () => local.error,
+    group: () => local.group ?? false,
+  })
+  const help = () => (
+    <>
+      <Show when={local.hint}>
+        <p id={descriptionId} class="text-muted-foreground text-sm">
+          {local.hint}
+        </p>
+      </Show>
+      <Show when={local.error}>
+        <p id={errorId} role="alert" class="text-foreground text-sm">
+          {local.error}
+        </p>
+      </Show>
+    </>
+  )
+
+  return (
+    <FormFieldContext.Provider value={field}>
+      <div class={cn('flex flex-col gap-1.5', local.class)} {...rest}>
+        {local.group ? (
+          <FieldSet
+            class="flex flex-col gap-1.5"
+            aria-describedby={field.describedBy()}
+            aria-invalid={field.invalid() || undefined}
+          >
+            <FieldLegend id={labelId} variant="label">
+              {local.label}
+            </FieldLegend>
+            {local.children}
+            {help()}
+          </FieldSet>
+        ) : (
+          <>
+            <Label id={labelId} for={field.controlId()}>
+              {local.label}
+            </Label>
+            {local.children}
+            {help()}
+          </>
+        )}
+      </div>
+    </FormFieldContext.Provider>
+  )
+}
+
 export function FieldLabel(props: ComponentProps<typeof KobalteTextField.Label>) {
   const [local, rest] = splitProps(props, ['class'])
   return (
@@ -96,6 +187,12 @@ export function FieldSet(props: ComponentProps<'fieldset'>) {
   return <fieldset class={cn('flex flex-col gap-4', local.class)} {...rest} />
 }
 
+/** A visual stack for related controls that does not imply fieldset semantics. */
+export function FieldGroup(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <div data-slot="field-group" class={cn('flex flex-col gap-4', local.class)} {...rest} />
+}
+
 export function FieldLegend(props: ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
   const [local, rest] = splitProps(props, ['class', 'variant'])
   return (

package/dist/r/src/components/ui/field/index.ts

@@ -1,11 +1,16 @@
 export {
   Field,
+  FormField,
   FieldDescription,
   FieldError,
+  FieldGroup,
   FieldInput,
   FieldLabel,
   FieldLegend,
   FieldSeparator,
   FieldSet,
   FieldTextArea,
+  type FormFieldProps,
 } from './field'
+export { NumberField } from './number-field'
+export type { NumberFieldProps } from './number-field'

package/dist/r/src/components/ui/field/number-field.tsx

@@ -0,0 +1,71 @@
+import { createEffect, createSignal, type JSX } from 'solid-js'
+import { FormField } from './field'
+import { Input } from '../input/input'
+
+export type NumberFieldProps = {
+  label: string
+  hint?: string
+  value: number
+  min: number
+  max: number
+  integer?: boolean
+  onChange: (value: number) => void
+  class?: string
+  onBlur?: JSX.EventHandler<HTMLInputElement, FocusEvent>
+}
+
+/**
+ * A controlled numeric field that keeps an editable draft while validating
+ * range and integer constraints. Invalid drafts are announced and restored
+ * to the latest controlled value when focus leaves the input.
+ */
+export function NumberField(props: NumberFieldProps) {
+  const [draft, setDraft] = createSignal(String(props.value))
+  const [error, setError] = createSignal('')
+  const integer = () => props.integer ?? true
+
+  createEffect(() => {
+    setDraft(String(props.value))
+  })
+
+  const validate = (raw: string) => {
+    if (!raw) return `${props.label} is required.`
+    const next = Number(raw)
+    if (!Number.isFinite(next)) return `${props.label} must be a valid number.`
+    if (integer() && !Number.isInteger(next)) {
+      return `${props.label} must be a whole number.`
+    }
+    if (next < props.min || next > props.max) {
+      return `${props.label} must be between ${props.min} and ${props.max}.`
+    }
+    return ''
+  }
+
+  return (
+    <FormField label={props.label} hint={props.hint} error={error()} class={props.class}>
+      <Input
+        type="number"
+        value={draft()}
+        min={props.min}
+        max={props.max}
+        step={integer() ? 1 : 'any'}
+        required
+        onInput={(event) => {
+          const raw = event.currentTarget.value
+          setDraft(raw)
+          const nextError = validate(raw)
+          setError(nextError)
+          if (!nextError) props.onChange(Number(raw))
+        }}
+        onBlur={(event) => {
+          const nextError = validate(draft())
+          if (nextError) {
+            setDraft(String(props.value))
+            setError('')
+          }
+          props.onBlur?.(event)
+        }}
+      />
+    </FormField>
+  )
+}

package/dist/r/src/components/ui/input/index.ts

@@ -1 +1,2 @@
 export { Input, type InputProps } from './input'
+export { InputControl, type InputControlProps } from './input-control'

package/dist/r/src/components/ui/input/input-control.tsx

@@ -0,0 +1,38 @@
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+/**
+ * InputControl.
+ *
+ * A styled native input with no optional suggestion-list behavior. Use this
+ * when a consumer needs only the control; `Input` adds native datalist
+ * suggestions for forms that need them.
+ */
+export type InputControlProps = ComponentProps<'input'>
+
+export function InputControl(props: InputControlProps) {
+  const [local, rest] = splitProps(props, ['class', 'type'])
+
+  return (
+    <input
+      data-slot="input"
+      type={local.type ?? 'text'}
+      class={cn(
+        'h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm',
+        'transition-[color,box-shadow,border-color] ease-out outline-none',
+        'placeholder:text-muted-foreground',
+        'selection:bg-primary selection:text-primary-foreground',
+        'file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
+        /* A pointer click on a text field is a typing affordance, so the ring
+         appears where the user agent already matches :focus-visible. */
+        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',
+        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        'read-only:bg-surface-hover',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}

package/dist/r/src/components/ui/input/input.tsx

@@ -1,6 +1,7 @@
 import type { ComponentProps } from 'solid-js'
 import { createUniqueId, For, Show, splitProps } from 'solid-js'
-import { cn } from '../../../lib/utils'
+import { useFormFieldControl } from '../../../lib/form-field'
+import { InputControl } from './input-control'
 
 /**
  * Input.
@@ -20,31 +21,42 @@ export type InputProps = ComponentProps<'input'> & {
 }
 
 export function Input(props: InputProps) {
-  const [local, rest] = splitProps(props, ['class', 'type', 'list', 'suggestions'])
+  const [local, rest] = splitProps(props, [
+    'class',
+    'type',
+    'id',
+    'list',
+    'suggestions',
+    'aria-label',
+    'aria-labelledby',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-errormessage',
+  ])
+  const field = useFormFieldControl('control', {
+    id: local.id,
+    'aria-label': local['aria-label'],
+    'aria-labelledby': local['aria-labelledby'],
+    'aria-describedby': local['aria-describedby'],
+    'aria-invalid': local['aria-invalid'],
+    'aria-errormessage': local['aria-errormessage'],
+  })
   const suggestionsId = createUniqueId()
   const listId = () => local.list ?? `input-suggestions-${suggestionsId}`
 
   return (
     <>
-      <input
-        data-slot="input"
-        type={local.type ?? 'text'}
-        list={local.suggestions ? listId() : local.list}
-        class={cn(
-          'h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm',
-          'transition-[color,box-shadow,border-color] ease-out outline-none',
-          'placeholder:text-muted-foreground',
-          'selection:bg-primary selection:text-primary-foreground',
-          'file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
-          /* A pointer click on a text field is a typing affordance, so the ring
-           appears where the user agent already matches :focus-visible. */
-          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
-          'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',
-          'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
-          'read-only:bg-surface-hover',
-          local.class
-        )}
+      <InputControl
         {...rest}
+        class={local.class}
+        type={local.type}
+        id={field?.id ?? local.id}
+        list={local.suggestions ? listId() : local.list}
+        aria-label={local['aria-label']}
+        aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}
+        aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}
+        aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}
+        aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}
       />
       <Show when={local.suggestions}>
         {(suggestions) => (

package/dist/r/src/components/ui/input-group/index.ts

@@ -6,3 +6,4 @@ export {
   InputGroupText,
   type InputGroupAddonProps,
 } from './input-group'
+export { SecretInputGroup, type SecretInputGroupProps } from './secret-input-group'

package/dist/r/src/components/ui/input-group/input-group.tsx

@@ -1,5 +1,6 @@
 import type { ComponentProps, JSX } from 'solid-js'
 import { splitProps } from 'solid-js'
+import { useFormFieldControl } from '../../../lib/form-field'
 import { cn } from '../../../lib/utils'
 
 /**
@@ -26,7 +27,7 @@ export function InputGroup(props: ComponentProps<'div'>) {
         'transition-[color,box-shadow,border-color] ease-out',
         'focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle',
         'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive-subtle',
-        'has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50',
+        'has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50',
         local.class
       )}
       {...rest}
@@ -35,11 +36,33 @@ export function InputGroup(props: ComponentProps<'div'>) {
 }
 
 export function InputGroupInput(props: ComponentProps<'input'>) {
-  const [local, rest] = splitProps(props, ['class'])
+  const [local, rest] = splitProps(props, [
+    'class',
+    'id',
+    'aria-label',
+    'aria-labelledby',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-errormessage',
+  ])
+  const field = useFormFieldControl('control', {
+    id: local.id,
+    'aria-label': local['aria-label'],
+    'aria-labelledby': local['aria-labelledby'],
+    'aria-describedby': local['aria-describedby'],
+    'aria-invalid': local['aria-invalid'],
+    'aria-errormessage': local['aria-errormessage'],
+  })
 
   return (
     <input
       data-slot="input-group-input"
+      id={field?.id ?? local.id}
+      aria-label={local['aria-label']}
+      aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}
+      aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}
+      aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}
+      aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}
       class={cn(
         'h-full min-w-0 flex-1 bg-transparent text-sm outline-none',
         'placeholder:text-muted-foreground',

package/dist/r/src/components/ui/input-group/secret-input-group.tsx

@@ -0,0 +1,58 @@
+import { splitProps, useContext, type ComponentProps, type JSX } from 'solid-js'
+import { ActionButton } from '../../composites/action-button'
+import { FormFieldContext } from '../../../lib/form-field'
+import { InputGroup, InputGroupInput } from './input-group'
+
+export type SecretInputGroupProps = {
+  value: string
+  disabled: boolean
+  onChange: JSX.EventHandler<HTMLInputElement, Event>
+  onClear?: () => void
+  class?: string
+} & Pick<ComponentProps<'input'>, 'id' | 'aria-label' | 'aria-describedby' | 'aria-invalid'>
+
+/** A password input with an optional keyboard-accessible clear action. */
+export function SecretInputGroup(props: SecretInputGroupProps) {
+  const field = useContext(FormFieldContext)
+  const [local, rest] = splitProps(props, [
+    'value',
+    'disabled',
+    'onChange',
+    'onClear',
+    'aria-label',
+    'class',
+  ])
+
+  const input = (
+    <InputGroupInput
+      {...rest}
+      aria-label={local['aria-label'] ?? (field ? undefined : 'New API key')}
+      type="password"
+      autocomplete="new-password"
+      value={local.value}
+      disabled={local.disabled}
+      onInput={local.onChange}
+    />
+  )
+
+  if (!local.onClear) return <InputGroup class={local.class}>{input}</InputGroup>
+
+  return (
+    <InputGroup class={local.class}>
+      {input}
+      <ActionButton
+        data-slot="input-group-button"
+        variant="ghost"
+        size="xs"
+        class="-me-1 h-6 min-w-0 shrink-0 px-2"
+        disabled={local.disabled}
+        tooltip={local.disabled ? 'This API key is managed by policy' : 'Clear API key'}
+        tooltipSide="top"
+        aria-label="Clear API key"
+        onClick={() => local.onClear?.()}
+      >
+        Clear
+      </ActionButton>
+    </InputGroup>
+  )
+}

package/dist/r/src/components/ui/native-select/native-select.tsx

@@ -1,6 +1,7 @@
 import { ChevronDownIcon } from 'lucide-solid'
 import type { ComponentProps } from 'solid-js'
 import { createEffect, For, onMount, Show, splitProps } from 'solid-js'
+import { useFormFieldControl } from '../../../lib/form-field'
 import { cn } from '../../../lib/utils'
 
 export type NativeSelectProps = ComponentProps<'select'> & {
@@ -59,7 +60,26 @@ export type NativeSelectOption = Readonly<{
 }>
 
 export function NativeSelect(props: NativeSelectProps) {
-  const [local, rest] = splitProps(props, ['class', 'children', 'defaultValue', 'options'])
+  const [local, rest] = splitProps(props, [
+    'class',
+    'children',
+    'defaultValue',
+    'options',
+    'id',
+    'aria-label',
+    'aria-labelledby',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-errormessage',
+  ])
+  const field = useFormFieldControl('control', {
+    id: local.id,
+    'aria-label': local['aria-label'],
+    'aria-labelledby': local['aria-labelledby'],
+    'aria-describedby': local['aria-describedby'],
+    'aria-invalid': local['aria-invalid'],
+    'aria-errormessage': local['aria-errormessage'],
+  })
   let select: HTMLSelectElement | undefined
 
   // Set selection after native options exist; setting select.value before its
@@ -81,6 +101,12 @@ export function NativeSelect(props: NativeSelectProps) {
           select = element
         }}
         data-slot="native-select"
+        id={field?.id ?? local.id}
+        aria-label={local['aria-label']}
+        aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}
+        aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}
+        aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}
+        aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}
         class={cn(
           'h-control-md min-w-0 appearance-none rounded-md border border-input bg-transparent px-control-md pr-9 text-sm',
           'transition-[color,box-shadow,border-color] ease-out outline-none',

package/dist/r/src/components/ui/progress/progress.tsx

@@ -40,14 +40,18 @@ export function Progress(props: ProgressProps) {
 
   return (
     <KobalteProgress class={cn('flex w-full flex-col gap-1.5', local.class)} {...rest}>
-      <div class="flex items-center justify-between gap-3">
-        <KobalteProgress.Label class="text-muted-foreground text-sm">
-          {local.label}
-        </KobalteProgress.Label>
-        <Show when={!local.hideValue}>
-          <KobalteProgress.ValueLabel class="text-muted-foreground text-sm tabular-nums" />
-        </Show>
-      </div>
+      <Show when={local.label || !local.hideValue}>
+        <div class="flex items-center justify-between gap-3">
+          <Show when={local.label}>
+            <KobalteProgress.Label class="text-muted-foreground text-sm">
+              {local.label}
+            </KobalteProgress.Label>
+          </Show>
+          <Show when={!local.hideValue}>
+            <KobalteProgress.ValueLabel class="text-muted-foreground text-sm tabular-nums" />
+          </Show>
+        </div>
+      </Show>
       <KobalteProgress.Track
         class={cn('bg-input relative h-1.5 w-full overflow-hidden rounded-full', local.trackClass)}
       >

package/dist/r/src/components/ui/radio-group/radio-group.tsx

@@ -2,6 +2,7 @@ import { RadioGroup as KobalteRadioGroup } from '@kobalte/core/radio-group'
 import { Circle } from 'lucide-solid'
 import type { ComponentProps } from 'solid-js'
 import { splitProps } from 'solid-js'
+import { useFormFieldControl } from '../../../lib/form-field'
 import { cn } from '../../../lib/utils'
 
 /**
@@ -17,8 +18,35 @@ import { cn } from '../../../lib/utils'
  * tokens so either choice sits correctly next to the other.
  */
 export function RadioGroup(props: ComponentProps<typeof KobalteRadioGroup>) {
-  const [local, rest] = splitProps(props, ['class'])
-  return <KobalteRadioGroup class={cn('grid gap-2', local.class)} {...rest} />
+  const [local, rest] = splitProps(props, [
+    'class',
+    'id',
+    'aria-label',
+    'aria-labelledby',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-errormessage',
+  ])
+  const field = useFormFieldControl('group', {
+    id: local.id,
+    'aria-label': local['aria-label'],
+    'aria-labelledby': local['aria-labelledby'],
+    'aria-describedby': local['aria-describedby'],
+    'aria-invalid': local['aria-invalid'],
+    'aria-errormessage': local['aria-errormessage'],
+  })
+  return (
+    <KobalteRadioGroup
+      id={field?.id ?? local.id}
+      aria-label={local['aria-label']}
+      aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}
+      aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}
+      aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}
+      aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}
+      class={cn('grid gap-2', local.class)}
+      {...rest}
+    />
+  )
 }
 
 export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item> & {

package/dist/r/src/components/ui/switch/switch.tsx

@@ -1,6 +1,7 @@
 import { Switch as KobalteSwitch } from '@kobalte/core/switch'
 import type { ComponentProps, JSX } from 'solid-js'
 import { splitProps } from 'solid-js'
+import { useFormFieldControl } from '../../../lib/form-field'
 import { cn } from '../../../lib/utils'
 
 /**
@@ -17,6 +18,8 @@ import { cn } from '../../../lib/utils'
  * user sees.
  */
 export type SwitchProps = Omit<ComponentProps<typeof KobalteSwitch>, 'children'> & {
+  /** ID for the hidden native switch input; useful with an external label. */
+  inputId?: string
   controlClass?: string
   thumbClass?: string
   labelClass?: string
@@ -44,22 +47,36 @@ export function Switch(props: SwitchProps) {
     'aria-labelledby',
     'aria-describedby',
     'aria-invalid',
+    'aria-errormessage',
     'aria-busy',
+    'id',
+    'inputId',
     'title',
   ])
+  const field = useFormFieldControl('control', {
+    id: local.inputId ?? local.id,
+    'aria-label': local['aria-label'],
+    'aria-labelledby': local['aria-labelledby'],
+    'aria-describedby': local['aria-describedby'],
+    'aria-invalid': local['aria-invalid'],
+    'aria-errormessage': local['aria-errormessage'],
+  })
 
   return (
     <KobalteSwitch
+      id={field ? undefined : local.id}
       title={local.title}
       class={cn('group/switch flex items-center gap-2.5', local.class)}
       {...rest}
     >
       {/* The name belongs on the input; see Checkbox for why. */}
       <KobalteSwitch.Input
+        id={field?.id ?? local.inputId}
         aria-label={local['aria-label']}
-        aria-labelledby={local['aria-labelledby']}
-        aria-describedby={local['aria-describedby']}
-        aria-invalid={local['aria-invalid']}
+        aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}
+        aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}
+        aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}
+        aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}
         aria-busy={local['aria-busy']}
         title={local.title}
       />

package/dist/r/src/components/ui/tabs/tabs.tsx

@@ -59,7 +59,7 @@ export function TabsTrigger(props: TabsTriggerProps) {
         'transition-colors ease-out outline-none select-none',
         'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
         'disabled:pointer-events-none disabled:opacity-50',
-        'text-muted-foreground hover:text-foreground data-[selected]:text-foreground',
+        'text-foreground',
         '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',
         local.appearance === 'segmented'
           ? 'h-control-sm rounded-md px-control-sm data-[selected]:bg-card data-[selected]:shadow-xs'

package/dist/r/src/components/ui/text-link/index.ts

@@ -0,0 +1,2 @@
+// TextLink: inline navigation for prose and content.
+export { TextLink } from './text-link'