@antscorp/ui 0.1.3 → 0.1.5

package/src/molecules/CommitTextField.tsx

@@ -4,36 +4,37 @@ import type { ReactNode } from "react";
 
 import { errorStatus } from "../lib/errorStatus";
 import { fitToMaxLength } from "../lib/fitToMaxLength";
+import type { Forwardable } from "../lib/forwardable";
 import { useDraft } from "../lib/useDraft";
 
 /** What `CommitTextField` takes. */
-export type CommitTextFieldProps = {
-  /** The field's label; also its accessible name when hidden. */
-  readonly label: string;
+export type CommitTextFieldProps = Forwardable<
+  Pick<
+    TextInputProps,
+    | "label"
+    | "isDisabled"
+    | "isReadOnly"
+    | "isLabelHidden"
+    | "placeholder"
+    | "description"
+    | "isRequired"
+    | "width"
+    | "controlXstyle"
+    | "containerXstyle"
+  >
+> & {
   /** The committed text. A new value from outside (an agent, undo) replaces the draft. */
   readonly value: string;
   /** Called with the draft on blur or Enter, only when it differs from `value`. */
   readonly onCommit: (value: string) => void;
   /** The input's height, `md` by default. */
   readonly size?: "sm" | "md";
-  /** Dims the field and blocks typing. */
-  readonly isDisabled?: boolean;
-  /** Shows the text, not dimmed, and blocks typing. */
-  readonly isReadOnly?: boolean;
-  /** Keeps the label for screen readers only. */
-  readonly isLabelHidden?: boolean;
-  /** Shown while the field is empty. */
-  readonly placeholder?: string;
-  /** Help under the label. */
-  readonly description?: string;
   /** A problem with the value, already in the user's language. */
   readonly error?: string | undefined;
   /** A text area instead of a single line; Enter then adds a line. */
   readonly isMultiline?: boolean;
   /** For `isMultiline`: how many rows the text area shows, `4` by default. */
   readonly rows?: number;
-  /** Marks the field as required. */
-  readonly isRequired?: boolean;
   /**
    * `false` (default): after a commit the draft goes back to `value`, so a refused text does not
    * stay in the field. `true` keeps the typed text until `value` changes from outside.
@@ -43,10 +44,6 @@ export type CommitTextFieldProps = {
   readonly maxLength?: number;
   /** Fresh global pattern for whole tokens, counted as one character even in plain text. */
   readonly pattern?: () => RegExp;
-  /** For a single line: the field's width, in pixels or any CSS length such as `"100%"`. */
-  readonly width?: number | string;
-  /** For a single line: StyleX styles for the input's box, e.g. to make it read as plain text. */
-  readonly controlXstyle?: TextInputProps["controlXstyle"];
 };
 
 /**
@@ -86,6 +83,8 @@ export function CommitTextField(props: CommitTextFieldProps): ReactNode {
     isRequired: props.isRequired ?? false,
     ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
     ...(props.description === undefined ? {} : { description: props.description }),
+    ...(props.controlXstyle === undefined ? {} : { controlXstyle: props.controlXstyle }),
+    ...(props.containerXstyle === undefined ? {} : { containerXstyle: props.containerXstyle }),
     ...errorStatus(error),
   };
   if (isMultiline) return <TextArea {...common} rows={props.rows ?? 4} />;
@@ -94,7 +93,6 @@ export function CommitTextField(props: CommitTextFieldProps): ReactNode {
       {...common}
       onEnter={commitAndReset}
       {...(props.width === undefined ? {} : { width: props.width })}
-      {...(props.controlXstyle === undefined ? {} : { controlXstyle: props.controlXstyle })}
     />
   );
 }

package/src/molecules/ConfirmDialog.tsx

@@ -1,14 +1,12 @@
-import { AlertDialog } from "@astryxdesign/core/AlertDialog";
+import { AlertDialog, type AlertDialogProps } from "@astryxdesign/core/AlertDialog";
 import type { ReactNode } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
+
 /** What `ConfirmDialog` takes. */
-export type ConfirmDialogProps = {
-  /** Open while a change waits for an answer. */
-  readonly isOpen: boolean;
-  /** The question, e.g. "Remove these rows?". */
-  readonly title: string;
-  /** What the change does. */
-  readonly description: string;
+export type ConfirmDialogProps = Forwardable<
+  Pick<AlertDialogProps, "isOpen" | "title" | "description">
+> & {
   /** The texts of the two buttons; the host translates them. */
   readonly labels: {
     /** The confirming button, e.g. "Remove". */

package/src/molecules/DateTimeInput.tsx

@@ -1,101 +1,115 @@
 import { DateInput } from "@astryxdesign/core/DateInput";
 import { HStack } from "@astryxdesign/core/HStack";
 import { Text } from "@astryxdesign/core/Text";
-import { TimeInput } from "@astryxdesign/core/TimeInput";
+import { TextInput } from "@astryxdesign/core/TextInput";
+import { TimeInput, type TimeInputProps } from "@astryxdesign/core/TimeInput";
 import type { ReactNode } from "react";
 
 import { errorStatus } from "../lib/errorStatus";
+import type { Forwardable } from "../lib/forwardable";
 import { dateValue, minDate, timeValue } from "../lib/iso";
 import { FieldGroup, type FieldGroupProps } from "./FieldGroup";
 
 /** What `DateTimeInput` takes. */
-export type DateTimeInputProps = Pick<FieldGroupProps, "isDisabled"> & {
-  /** The group's label, e.g. "Start date"; it names the group and is not shown. */
-  readonly label: string;
-  /** The texts the inputs show; the host translates them. */
-  readonly labels: {
-    /** The date input's label: its accessible name in a group, shown with `frame="none"`. */
-    readonly date: string;
-    /** The time input's label: its accessible name in a group, shown with `frame="none"`. */
-    readonly time: string;
-    /** A time zone, or any note, shown beside the time. */
-    readonly timezone?: string | undefined;
+export type DateTimeInputProps = Forwardable<Pick<FieldGroupProps, "isDisabled">> &
+  Forwardable<Pick<TimeInputProps, "hourFormat">> & {
+    /** The group's label, e.g. "Start date"; it names the group and is not shown. */
+    readonly label: string;
+    /** The texts the inputs show; the host translates them. */
+    readonly labels: {
+      /** The date input's label: its accessible name in a group, shown with `frame="none"`. */
+      readonly date: string;
+      /** The time input's label: its accessible name in a group, shown with `frame="none"`. */
+      readonly time: string;
+      /** A time zone, or any note, shown beside the time. */
+      readonly timezone?: string | undefined;
+    };
+    /** The local date-time (`YYYY-MM-DD HH:mm:ss`); empty or partial while it is being filled in. */
+    readonly value: string;
+    /** The inputs' size, `md` by default. */
+    readonly size?: "sm" | "md" | undefined;
+    /** Shows readable date and time fields at full opacity, without clear or picker actions. */
+    readonly isReadOnly?: boolean | undefined;
+    /** A problem with the date-time, already in the user's language. */
+    readonly error?: string | undefined;
+    /** `false` picks a date only: the time input is left out and `onChange` gets `YYYY-MM-DD`, or empty. */
+    readonly hasTime?: boolean;
+    /**
+     * `bare` (default) puts both inputs, with hidden labels, in an unframed group that `label` names
+     * for assistive tech, for a host that shows the label itself. `none` draws no group: it shows
+     * `labels.date` and `labels.time` above the inputs and hangs `description` and `error` on the
+     * date input.
+     */
+    readonly frame?: "bare" | "none";
+    /** Help above the inputs, or under the date input with `frame="none"`. */
+    readonly description?: string | undefined;
+    /** Marks the date as required. */
+    readonly isRequired?: boolean;
+    /** The time input stays disabled until a date is picked. */
+    readonly isTimeLockedWithoutDate?: boolean;
+    /** The earliest valid calendar date (`YYYY-MM-DD`); an absent or invalid minimum leaves dates unconstrained. */
+    readonly min?: string | undefined;
+    /** Called with the new date-time; a part not picked yet is empty, a new date starts at 00:00:00. */
+    readonly onChange: (value: string) => void;
   };
-  /** The local date-time (`YYYY-MM-DD HH:mm:ss`); empty or partial while it is being filled in. */
-  readonly value: string;
-  /** The inputs' size, `md` by default. */
-  readonly size?: "sm" | "md" | undefined;
-  /** Shows the date-time, not dimmed, and ignores changes. */
-  readonly isReadOnly?: boolean | undefined;
-  /** A problem with the date-time, already in the user's language. */
-  readonly error?: string | undefined;
-  /** `false` picks a date only: the time input is left out and `onChange` gets `YYYY-MM-DD`, or empty. */
-  readonly hasTime?: boolean;
-  /**
-   * `bare` (default) puts both inputs, with hidden labels, in an unframed group that `label` names
-   * for assistive tech, for a host that shows the label itself. `none` draws no group: it shows
-   * `labels.date` and `labels.time` above the inputs and hangs `description` and `error` on the
-   * date input.
-   */
-  readonly frame?: "bare" | "none";
-  /** Help above the inputs, or under the date input with `frame="none"`. */
-  readonly description?: string | undefined;
-  /** Marks the date as required. */
-  readonly isRequired?: boolean;
-  /** The time input stays disabled until a date is picked. */
-  readonly isTimeLockedWithoutDate?: boolean;
-  /** The earliest date the calendar offers (`YYYY-MM-DD`), such as an end's start; any without it or with another text. */
-  readonly min?: string | undefined;
-  /** Called with the new date-time; a part not picked yet is empty, a new date starts at 00:00:00. */
-  readonly onChange: (value: string) => void;
-};
 
 /**
  * A date and a time of day under one label. It composes `DateInput` and `TimeInput` rather than
  * using Astryx's `DateTimeInput`, which holds only a complete value: here a date or a time may be
  * set alone while the other is still empty.
+ * `hourFormat` defaults to `12h`; choose `24h` for a 24-hour clock. Calendar and clear text use
+ * the facade's `InternationalizationProvider`, alongside host-translated `label` and `labels`.
  */
 export function DateTimeInput(props: DateTimeInputProps): ReactNode {
   const { label, isDisabled = false, isReadOnly = false, error, hasTime = true, frame } = props;
   const size = props.size ?? "md";
-  const onChange = (next: string): void => {
-    if (!isReadOnly) props.onChange(next);
-  };
   const isInline = frame === "none";
   const [date = "", time = ""] = props.value.split(" ");
-  const dateInput = (
+  const dateProps = {
+    label: props.labels.date,
+    size,
+    isLabelHidden: !isInline,
+    isRequired: props.isRequired ?? false,
+    ...(isInline && props.description !== undefined ? { description: props.description } : {}),
+    ...(isInline ? errorStatus(error) : {}),
+  };
+  const dateInput = isReadOnly ? (
+    <TextInput {...dateProps} value={date} isReadOnly />
+  ) : (
     <DateInput
-      label={props.labels.date}
-      size={size}
-      isLabelHidden={!isInline}
+      {...dateProps}
       isDisabled={isDisabled}
-      isRequired={props.isRequired ?? false}
       {...dateValue(date)}
       {...minDate(props.min)}
       onChange={(next) => {
         // join turns a cleared date (undefined) into an empty one.
-        onChange(hasTime ? [next, time === "" ? "00:00:00" : time].join(" ") : (next ?? ""));
-      }}
-      {...(isInline && props.description !== undefined ? { description: props.description } : {})}
-      {...(isInline ? errorStatus(error) : {})}
-    />
-  );
-  const timeInput = hasTime && (
-    <TimeInput
-      label={props.labels.time}
-      size={size}
-      isLabelHidden={!isInline}
-      hourFormat="12h"
-      hasSeconds
-      width={size === "sm" ? 150 : 168}
-      isDisabled={isDisabled || (props.isTimeLockedWithoutDate === true && date === "")}
-      {...timeValue(time)}
-      onChange={(next) => {
-        // Astryx may hand back HH:mm; the stored time always has seconds.
-        onChange([date, next?.length === 5 ? `${next}:00` : next].join(" "));
+        props.onChange(hasTime ? [next, time === "" ? "00:00:00" : time].join(" ") : (next ?? ""));
       }}
     />
   );
+  const timeProps = {
+    label: props.labels.time,
+    size,
+    isLabelHidden: !isInline,
+    width: size === "sm" ? 150 : 168,
+  };
+  const timeInput =
+    hasTime &&
+    (isReadOnly ? (
+      <TextInput {...timeProps} value={time} isReadOnly />
+    ) : (
+      <TimeInput
+        {...timeProps}
+        hourFormat={props.hourFormat ?? "12h"}
+        hasSeconds
+        isDisabled={isDisabled || (props.isTimeLockedWithoutDate === true && date === "")}
+        {...timeValue(time)}
+        onChange={(next) => {
+          // Astryx may hand back HH:mm; the stored time always has seconds.
+          props.onChange([date, next?.length === 5 ? `${next}:00` : next].join(" "));
+        }}
+      />
+    ));
   const zone = props.labels.timezone !== undefined && (
     <Text type="supporting">{props.labels.timezone}</Text>
   );
@@ -110,7 +124,12 @@ export function DateTimeInput(props: DateTimeInputProps): ReactNode {
     );
   }
   return (
-    <FieldGroup label={label} description={props.description} isDisabled={isDisabled} error={error}>
+    <FieldGroup
+      label={label}
+      description={props.description}
+      isDisabled={isDisabled && !isReadOnly}
+      error={error}
+    >
       <HStack gap={2} wrap="wrap" align="center">
         {dateInput}
         {timeInput}

package/src/molecules/DurationInput.tsx

@@ -3,6 +3,7 @@ import { NumberInput } from "@astryxdesign/core/NumberInput";
 import { Text } from "@astryxdesign/core/Text";
 import type { ReactNode } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
 import { FieldGroup, type FieldGroupProps } from "./FieldGroup";
 
 const PARTS = ["days", "hours", "minutes", "seconds"] as const;
@@ -12,7 +13,9 @@ type Part = (typeof PARTS)[number];
 export type DurationValue = Readonly<Partial<Record<Part, number>>>;
 
 /** What `DurationInput` takes. */
-export type DurationInputProps = Pick<FieldGroupProps, "label" | "isDisabled" | "error"> & {
+export type DurationInputProps = Forwardable<
+  Pick<FieldGroupProps, "label" | "isDisabled" | "error">
+> & {
   /**
    * The unit of each part, already in the user's language, e.g. "day(s)": shown after its input
    * and naming it for assistive tech.

package/src/molecules/PercentRow.tsx

@@ -6,11 +6,12 @@ import * as stylex from "@stylexjs/stylex";
 import { type ReactNode, useState } from "react";
 
 import { RemoveButton } from "../atoms/RemoveButton";
+import type { Forwardable } from "../lib/forwardable";
 import { FieldRow, type FieldRowProps } from "./FieldRow";
 
 /** What `PercentRow` takes. */
-export type PercentRowProps = Pick<FieldRowProps, "label" | "labelWidth"> &
-  Pick<NumberInputProps, "isDisabled" | "isReadOnly" | "disabledMessage"> & {
+export type PercentRowProps = Forwardable<Pick<FieldRowProps, "label" | "labelWidth">> &
+  Forwardable<Pick<NumberInputProps, "isDisabled" | "isReadOnly" | "disabledMessage">> & {
     /** The controls' accessible name and the optional remove button's name. */
     readonly labels: { readonly share: string; readonly remove: string };
     /** The share, in whole percent. */

package/src/molecules/RemovableRow.tsx

@@ -67,7 +67,7 @@ export function RemovableRow(props: RemovableRowProps): ReactNode {
     <RemoveButton
       label={props.labels.remove}
       size={props.size}
-      isDisabled={props.isDisabled}
+      isDisabled={props.isDisabled ?? false}
       isReadOnly={props.isReadOnly}
       onClick={props.onRemove}
     />

package/src/molecules/RevealRadioGroup.tsx

@@ -1,10 +1,11 @@
-import { RadioList, RadioListItem } from "@astryxdesign/core/RadioList";
+import { RadioList, RadioListItem, type RadioListProps } from "@astryxdesign/core/RadioList";
 import { spacingVars } from "@astryxdesign/core/theme/tokens.stylex";
 import { VStack } from "@astryxdesign/core/VStack";
 import * as stylex from "@stylexjs/stylex";
 import { Fragment, type ReactNode } from "react";
 
 import { InfoTip } from "../atoms/InfoTip";
+import type { Forwardable } from "../lib/forwardable";
 
 /** One choice of a `RevealRadioGroup`. */
 export type RevealRadioOption<V extends string> = {
@@ -21,13 +22,9 @@ export type RevealRadioOption<V extends string> = {
 };
 
 /** What `RevealRadioGroup` takes. */
-export type RevealRadioGroupProps<V extends string> = {
-  /** Names the group; also its accessible name when hidden. */
-  readonly label: string;
-  /** Keeps the label for screen readers only. */
-  readonly isLabelHidden?: boolean | undefined;
-  /** Lays the options out in a row instead of a column. */
-  readonly orientation?: "vertical" | "horizontal" | undefined;
+export type RevealRadioGroupProps<V extends string> = Forwardable<
+  Pick<RadioListProps, "label" | "isLabelHidden" | "orientation" | "isDisabled">
+> & {
   /** The choices, in order. */
   readonly options: readonly RevealRadioOption<V>[];
   /** The chosen option's value. */
@@ -36,8 +33,6 @@ export type RevealRadioGroupProps<V extends string> = {
   readonly onChange: (value: V) => void;
   /** The radios' size, `md` by default (Astryx's default; the theme draws it at 18px). */
   readonly size?: "sm" | "md" | undefined;
-  /** Dims the radios and blocks them. */
-  readonly isDisabled?: boolean | undefined;
   /** Shows the value, not dimmed, and ignores changes. */
   readonly isReadOnly?: boolean | undefined;
   /** The space between the list and the revealed content, `2` by default. */

package/src/molecules/RevealSwitch.tsx

@@ -1,19 +1,15 @@
-import { Switch } from "@astryxdesign/core/Switch";
+import { Switch, type SwitchProps } from "@astryxdesign/core/Switch";
 import { VStack } from "@astryxdesign/core/VStack";
 import type { ReactNode } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
+
 /** What `RevealSwitch` takes. */
-export type RevealSwitchProps = {
-  /** What the switch turns on. */
-  readonly label: string;
-  /** Whether the switch is on. */
-  readonly value: boolean;
+export type RevealSwitchProps = Forwardable<Pick<SwitchProps, "label" | "isDisabled" | "value">> & {
   /** Called with the new state. */
   readonly onChange: (value: boolean) => void;
   /** The switch's size, `md` by default. */
   readonly size?: "sm" | "md" | undefined;
-  /** Dims the switch and blocks it. */
-  readonly isDisabled?: boolean | undefined;
   /** Shows the value, not dimmed, and ignores changes. */
   readonly isReadOnly?: boolean | undefined;
   /** What shows below the switch while it is on. */

package/src/molecules/Select.tsx

@@ -2,24 +2,35 @@ import {
   Selector,
   type SelectorOptionData,
   type SelectorOptionType,
+  type SelectorProps,
 } from "@astryxdesign/core/Selector";
 import type { ReactNode } from "react";
 
 import { TruncatedOption } from "../atoms/TruncatedOption";
 import { errorStatus } from "../lib/errorStatus";
+import type { Forwardable } from "../lib/forwardable";
 import { useLoadingShown } from "../lib/useLoadingShown";
 
 /** One entry of `Select`'s list: an option, a titled section of options, or a divider (Astryx's). */
 export type SelectOption = SelectorOptionType;
 
 /** What `Select` takes. */
-export type SelectProps = {
-  /** Names the control for assistive tech; shown above it unless `isLabelHidden`. */
-  readonly label: string;
-  /** Hides the label, as in a rule row. */
-  readonly isLabelHidden?: boolean | undefined;
-  /** A line under the label that explains the choice. */
-  readonly description?: string | undefined;
+export type SelectProps = Forwardable<
+  Pick<
+    SelectorProps,
+    | "label"
+    | "isLabelHidden"
+    | "description"
+    | "placeholder"
+    | "hasSearch"
+    | "width"
+    | "isDisabled"
+    | "isReadOnly"
+    | "isRequired"
+    | "controlXstyle"
+    | "containerXstyle"
+  >
+> & {
   /** The list, in order. */
   readonly options: readonly SelectOption[];
   /** The picked option's value; `null` or none shows the placeholder. */
@@ -28,22 +39,10 @@ export type SelectProps = {
   readonly onChange: (value: string) => void;
   /** Called by the clear button, which shows only when this is given and an option is picked. */
   readonly onClear?: (() => void) | undefined;
-  /** Shown in the trigger while nothing is picked. */
-  readonly placeholder?: string | undefined;
-  /** A search box over the list, filtering it as it is typed. */
-  readonly hasSearch?: boolean | undefined;
   /** The trigger's look: an underlined field (`input`, the default) or a bare text button (`ghost`). */
   readonly variant?: "input" | "ghost" | undefined;
-  /** The trigger's size, `md` by default (the theme's 30px control height). */
-  readonly size?: "sm" | "md" | undefined;
-  /** The trigger's width, in pixels or any CSS length such as `"100%"`. */
-  readonly width?: number | string | undefined;
-  /** Dims the trigger and blocks it. */
-  readonly isDisabled?: boolean | undefined;
-  /** Shows the picked label without the chevron; the list does not open. */
-  readonly isReadOnly?: boolean | undefined;
-  /** Marks the field as required. */
-  readonly isRequired?: boolean | undefined;
+  /** The trigger's size, md by default; the kit narrows the upstream sizes to sm and md. */
+  readonly size?: Extract<SelectorProps["size"], "sm" | "md"> | undefined;
   /**
    * The options are loading: a spinner in place of the chevron and the trigger busy from 300 ms
    * on, for at least 300 ms (`useLoadingShown`), and the list does not open meanwhile. The picked
@@ -53,7 +52,7 @@ export type SelectProps = {
   readonly isLoading?: boolean | undefined;
   /** A problem with the pick, already in the user's language, shown under the trigger. */
   readonly error?: string | undefined;
-  /** The texts the view shows; the host translates them. Astryx's English stands in for a missing one. */
+  /** Host texts; missing strings use the facade's InternationalizationProvider locale (English by default). */
   readonly labels?:
     | {
         /** The search box's placeholder, such as "Search". */
@@ -72,6 +71,8 @@ export type SelectProps = {
  * The kit's select on Astryx's `Selector`: the list is as wide as the
  * trigger (the theme) and a long option label ends in an ellipsis with the whole label in a
  * tooltip. Every select is one rather than Astryx's `Selector` (lint-enforced). It holds no state.
+ * Localize upstream search, clear and empty text with `InternationalizationProvider` from
+ * `@antscorp/ui/astryx/i18n`; `labels` overrides individual kit captions.
  */
 export function Select(props: SelectProps): ReactNode {
   const { labels = {}, onClear, onChange } = props;
@@ -106,6 +107,8 @@ export function Select(props: SelectProps): ReactNode {
     ...(props.isDisabled !== undefined && { isDisabled: props.isDisabled }),
     ...(props.isReadOnly !== undefined && !isBusy && { isReadOnly: props.isReadOnly }),
     ...(props.isRequired !== undefined && { isRequired: props.isRequired }),
+    ...(props.controlXstyle !== undefined && { controlXstyle: props.controlXstyle }),
+    ...(props.containerXstyle !== undefined && { containerXstyle: props.containerXstyle }),
     ...(labels.search !== undefined && { searchPlaceholder: labels.search }),
     ...(labels.noMatch !== undefined && { emptySearchText: labels.noMatch }),
   };

package/src/molecules/StatusButton.tsx

@@ -1,14 +1,14 @@
-import { Button } from "@astryxdesign/core/Button";
+import { Button, type ButtonProps } from "@astryxdesign/core/Button";
 import { StatusDot } from "@astryxdesign/core/StatusDot";
 import type { ComponentProps, ReactNode } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
+
 /** The tone of a `StatusButton`'s dot. */
 export type StatusTone = ComponentProps<typeof StatusDot>["variant"];
 
 /** What `StatusButton` takes. */
-export type StatusButtonProps = {
-  /** The button's text. */
-  readonly label: string;
+export type StatusButtonProps = Forwardable<Pick<ButtonProps, "label" | "icon" | "isDisabled">> & {
   /** The dot's tone: neutral, accent, success, warning or error. */
   readonly status: StatusTone;
   /** The texts the view shows; the host translates them. */
@@ -16,14 +16,10 @@ export type StatusButtonProps = {
     /** What the dot means, read out for it, e.g. "Connected". */
     readonly status: string;
   };
-  /** A glyph before the text. */
-  readonly icon?: ReactNode;
   /** Called when the button is pressed. */
   readonly onClick: () => void;
   /** The button's height, `md` by default. */
   readonly size?: "sm" | "md" | undefined;
-  /** Dimmed and not pressable. */
-  readonly isDisabled?: boolean | undefined;
 };
 
 /** A button whose dot shows a state beside its text, such as a connection. */

package/src/molecules/ToggleGrid.tsx

@@ -3,6 +3,7 @@ import { ToggleButton } from "@astryxdesign/core/ToggleButton";
 import * as stylex from "@stylexjs/stylex";
 import type { ReactNode } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
 import { FieldGroup, type FieldGroupProps } from "./FieldGroup";
 
 /** One button of a `ToggleGrid`. */
@@ -16,9 +17,8 @@ export type ToggleGridOption<V extends string> = {
 };
 
 /** What `ToggleGrid` takes. */
-export type ToggleGridProps<V extends string> = Pick<
-  FieldGroupProps,
-  "label" | "isDisabled" | "error"
+export type ToggleGridProps<V extends string> = Forwardable<
+  Pick<FieldGroupProps, "label" | "isDisabled" | "error">
 > & {
   /** The buttons, in order. */
   readonly options: readonly ToggleGridOption<V>[];

package/src/molecules/TokenTextField.tsx

@@ -14,6 +14,7 @@ import { mergeProps, themeProps } from "@astryxdesign/core/utils";
 import * as stylex from "@stylexjs/stylex";
 import { lazy, type ReactNode, Suspense, useId, useRef, useState } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
 import type { TokenLook } from "../lib/tokenEditorConfig";
 import { FieldSkeleton } from "./FieldSkeleton";
 import { TokenEditorBoundary } from "./token-editor-boundary";
@@ -24,9 +25,8 @@ const Editor = lazy(() => import("./token-editor"));
 export type { TokenLook } from "../lib/tokenEditorConfig";
 
 /** What `TokenTextField` takes. */
-export type TokenTextFieldProps = Pick<
-  FieldProps,
-  "label" | "description" | "isLabelHidden" | "isDisabled" | "isRequired"
+export type TokenTextFieldProps = Forwardable<
+  Pick<FieldProps, "label" | "description" | "isLabelHidden" | "isDisabled" | "isRequired">
 > & {
   /** The committed string; outside changes replace the local draft. */
   readonly value: string;