@antscorp/ui 0.1.4 → 0.1.5

package/dist/lib/forwardable.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Props taken from another component (`Pick`/`Omit`) whose optional ones also accept `undefined`,
+ * as the kit's own props do, so a host under `exactOptionalPropertyTypes` can forward its own
+ * optional value (`isDisabled={props.isDisabled}`). Required props stay as they are.
+ */
+export type Forwardable<T> = {
+    [K in keyof T]: Partial<Pick<T, K>> extends Pick<T, K> ? T[K] | undefined : T[K];
+};

package/dist/molecules/CheckGroup.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 import { type FieldGroupProps } from "./FieldGroup.js";
 /** One checkbox of a `CheckGroup`. */
 export type CheckGroupOption<V extends string> = {
@@ -8,7 +9,7 @@ export type CheckGroupOption<V extends string> = {
     readonly label: string;
 };
 /** What `CheckGroup` takes. */
-export type CheckGroupProps<V extends string> = Pick<FieldGroupProps, "label" | "isDisabled" | "error"> & {
+export type CheckGroupProps<V extends string> = Forwardable<Pick<FieldGroupProps, "label" | "isDisabled" | "error">> & {
     /** The checkboxes, in order. */
     readonly options: readonly CheckGroupOption<V>[];
     /** The picked values. */

package/dist/molecules/CheckRow.d.ts

@@ -1,7 +1,10 @@
 import { type CheckboxInputProps } from "@astryxdesign/core/CheckboxInput";
 import type { ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 /** What `CheckRow` takes. */
-export type CheckRowProps = Pick<CheckboxInputProps, "label" | "isDisabled" | "isReadOnly"> & {
+export type CheckRowProps = Forwardable<Pick<CheckboxInputProps, "isDisabled" | "isReadOnly">> & {
+    /** The row's text and the checkbox's name; one line, the whole text in a tooltip when cut. */
+    readonly label: string;
     /** A second line under the text, such as an id under a name; one line too. */
     readonly description?: string | undefined;
     /** Whether the box is ticked. */

package/dist/molecules/CommitTextField.d.ts

@@ -1,7 +1,8 @@
 import { type TextInputProps } from "@astryxdesign/core/TextInput";
 import type { ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 /** What `CommitTextField` takes. */
-export type CommitTextFieldProps = Pick<TextInputProps, "label" | "isDisabled" | "isReadOnly" | "isLabelHidden" | "placeholder" | "description" | "isRequired" | "width" | "controlXstyle" | "containerXstyle"> & {
+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`. */

package/dist/molecules/ConfirmDialog.d.ts

@@ -1,7 +1,8 @@
 import { type AlertDialogProps } from "@astryxdesign/core/AlertDialog";
 import type { ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 /** What `ConfirmDialog` takes. */
-export type ConfirmDialogProps = Pick<AlertDialogProps, "isOpen" | "title" | "description"> & {
+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/dist/molecules/DateTimeInput.d.ts

@@ -1,8 +1,9 @@
 import { type TimeInputProps } from "@astryxdesign/core/TimeInput";
 import type { ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 import { type FieldGroupProps } from "./FieldGroup.js";
 /** What `DateTimeInput` takes. */
-export type DateTimeInputProps = Pick<FieldGroupProps, "isDisabled"> & Pick<TimeInputProps, "hourFormat"> & {
+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. */

package/dist/molecules/DurationInput.d.ts

@@ -1,11 +1,12 @@
 import type { ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 import { type FieldGroupProps } from "./FieldGroup.js";
 declare const PARTS: readonly ["days", "hours", "minutes", "seconds"];
 type Part = (typeof PARTS)[number];
 /** A length of time as stored: whole days, hours, minutes and seconds, each optional. */
 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/dist/molecules/PercentRow.d.ts

@@ -1,8 +1,9 @@
 import { type NumberInputProps } from "@astryxdesign/core/NumberInput";
 import { type ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 import { type FieldRowProps } from "./FieldRow.js";
 /** 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;

package/dist/molecules/RevealRadioGroup.d.ts

@@ -1,5 +1,6 @@
 import { type RadioListProps } from "@astryxdesign/core/RadioList";
 import { type ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 /** One choice of a `RevealRadioGroup`. */
 export type RevealRadioOption<V extends string> = {
     /** What `onChange` gets when this option is picked. */
@@ -14,7 +15,7 @@ export type RevealRadioOption<V extends string> = {
     readonly content?: ReactNode;
 };
 /** What `RevealRadioGroup` takes. */
-export type RevealRadioGroupProps<V extends string> = Pick<RadioListProps, "label" | "isLabelHidden" | "orientation" | "isDisabled"> & {
+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. */

package/dist/molecules/RevealSwitch.d.ts

@@ -1,7 +1,8 @@
 import { type SwitchProps } from "@astryxdesign/core/Switch";
 import type { ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 /** What `RevealSwitch` takes. */
-export type RevealSwitchProps = Pick<SwitchProps, "label" | "isDisabled" | "value"> & {
+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. */

package/dist/molecules/Select.d.ts

@@ -1,9 +1,10 @@
 import { type SelectorOptionType, type SelectorProps } from "@astryxdesign/core/Selector";
 import type { ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 /** 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 = Pick<SelectorProps, "label" | "isLabelHidden" | "description" | "placeholder" | "hasSearch" | "width" | "isDisabled" | "isReadOnly" | "isRequired" | "controlXstyle" | "containerXstyle"> & {
+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. */

package/dist/molecules/StatusButton.d.ts

@@ -1,10 +1,11 @@
 import { type ButtonProps } from "@astryxdesign/core/Button";
 import { StatusDot } from "@astryxdesign/core/StatusDot";
 import type { ComponentProps, ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 /** The tone of a `StatusButton`'s dot. */
 export type StatusTone = ComponentProps<typeof StatusDot>["variant"];
 /** What `StatusButton` takes. */
-export type StatusButtonProps = Pick<ButtonProps, "label" | "icon" | "isDisabled"> & {
+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. */

package/dist/molecules/ToggleGrid.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 import { type FieldGroupProps } from "./FieldGroup.js";
 /** One button of a `ToggleGrid`. */
 export type ToggleGridOption<V extends string> = {
@@ -10,7 +11,7 @@ export type ToggleGridOption<V extends string> = {
     readonly span?: number | undefined;
 };
 /** 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>[];
     /** How many 40px columns the grid has; one column of Astryx's default without it. */

package/dist/molecules/TokenTextField.d.ts

@@ -1,10 +1,11 @@
 import { type FieldProps } from "@astryxdesign/core/Field";
 import { type IconProps } from "@astryxdesign/core/Icon";
 import { type ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 import type { TokenLook } from "../lib/tokenEditorConfig.js";
 export type { TokenLook } from "../lib/tokenEditorConfig.js";
 /** 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;
     /** Commits the local draft on blur, or Enter in a single line. */

package/dist/organisms/TokenPickerDialog.d.ts

@@ -1,5 +1,6 @@
 import { type DialogProps } from "@astryxdesign/core/Dialog";
 import { type ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 import { type TreeItem } from "../molecules/TreeOptions.js";
 import { type TreeSelectProps } from "./TreeSelect.js";
 /** The host-controlled draft of a token definition. */
@@ -12,7 +13,7 @@ export type TokenPickerValue = {
     readonly defaultValue: string;
 };
 /** What `TokenPickerDialog` takes. */
-export type TokenPickerDialogProps = Pick<DialogProps, "isOpen"> & {
+export type TokenPickerDialogProps = Forwardable<Pick<DialogProps, "isOpen">> & {
     /** Closes or cancels the dialog. */
     readonly onClose: () => void;
     /** Dialog heading. */

package/dist/organisms/TransferPicker.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 import { type LoadMoreOptions } from "../lib/useLoadMore.js";
 /** One thing `TransferPicker` offers. */
 export type TransferPickerOption<V extends string> = {
@@ -16,7 +17,7 @@ export type TransferPickerOption<V extends string> = {
     readonly error?: string | undefined;
 };
 /** What `TransferPicker` takes. */
-export type TransferPickerProps<V extends string> = Pick<LoadMoreOptions, "onLoadMore" | "hasMore" | "isLoadingMore"> & {
+export type TransferPickerProps<V extends string> = Forwardable<Pick<LoadMoreOptions, "onLoadMore" | "hasMore" | "isLoadingMore">> & {
     /** Names the list of options (the start column). */
     readonly label: string;
     /** The options to pick from. */

package/dist/theme/AntsomiTheme.d.ts

@@ -1,10 +1,11 @@
 import { Theme } from "@astryxdesign/core/theme";
 import type { ComponentProps, ReactElement } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 /**
  * Astryx Theme props with the Antsomi base theme as the default.
  * Inherited `children` renders the themed subtree; `mode` selects light, dark or system mode.
  */
-export type AntsomiThemeProps = Omit<ComponentProps<typeof Theme>, "theme"> & {
+export type AntsomiThemeProps = Forwardable<Omit<ComponentProps<typeof Theme>, "theme">> & {
     /** Optional override created with `defineTheme({ extends: antsomiTheme, … })`. */
     readonly theme?: ComponentProps<typeof Theme>["theme"];
 };
@@ -13,4 +14,4 @@ export type AntsomiThemeProps = Omit<ComponentProps<typeof Theme>, "theme"> & {
  * Import `@antscorp/ui/theme.css` separately. Extend the base with Astryx's
  * `defineTheme({ name: "custom", extends: antsomiTheme, tokens: { … } })` and pass it as `theme`.
  */
-export declare function AntsomiTheme({ theme, ...rest }: AntsomiThemeProps): ReactElement;
+export declare function AntsomiTheme({ theme, mode, children }: AntsomiThemeProps): ReactElement;

package/dist/theme/AntsomiTheme.js

@@ -4,12 +4,13 @@ import { Theme as n } from "@astryxdesign/core/theme";
 import { jsx as r } from "react/jsx-runtime";
 // src/theme/AntsomiTheme.tsx
 function i(i) {
-	let a = e(6), o, s;
-	a[0] === i ? (o = a[1], s = a[2]) : ({theme: s, ...o} = i, a[0] = i, a[1] = o, a[2] = s);
-	let c = s ?? t, l;
-	return a[3] !== o || a[4] !== c ? (l = /* @__PURE__ */ r(n, {
-		theme: c,
-		...o
-	}), a[3] = o, a[4] = c, a[5] = l) : l = a[5], l;
+	let a = e(6), { theme: o, mode: s, children: c } = i, l = o ?? t, u;
+	a[0] === s ? u = a[1] : (u = s !== void 0 && { mode: s }, a[0] = s, a[1] = u);
+	let d;
+	return a[2] !== c || a[3] !== l || a[4] !== u ? (d = /* @__PURE__ */ r(n, {
+		theme: l,
+		...u,
+		children: c
+	}), a[2] = c, a[3] = l, a[4] = u, a[5] = d) : d = a[5], d;
 }
 export { i as AntsomiTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/ui",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Generic UI kit: atoms, molecules and organisms over Astryx.",
   "license": "MIT",
   "repository": {
@@ -104,7 +104,7 @@
     "build": "vite build --config vite.build.ts && tsc -p tsconfig.build.json && bun scripts/build-declarations.ts && node ../../tools/component-catalog/src/main.ts . && bun build src/cli/main.ts --target=node --outfile=dist/cli.js"
   },
   "dependencies": {
-    "@antscorp/astryx-theme-antsomi": "0.1.4",
+    "@antscorp/astryx-theme-antsomi": "0.1.5",
     "@antscorp/immutable": "0.1.1",
     "@astryxdesign/core": "0.7.4",
     "@codemirror/state": "6.7.6",
@@ -115,7 +115,7 @@
   },
   "devDependencies": {
     "@antscorp/component-catalog": "0.1.0",
-    "@antscorp/vite-stylex": "0.1.4",
+    "@antscorp/vite-stylex": "0.1.5",
     "@storybook/react-vite": "10.6.5",
     "@testing-library/dom": "10.4.2",
     "@testing-library/react": "16.3.3",

package/src/atoms/AddButton.tsx

@@ -3,10 +3,11 @@ import { radiusVars } from "@astryxdesign/core/theme/tokens.stylex";
 import * as stylex from "@stylexjs/stylex";
 import type { ReactNode } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
 import { AddGlyph } from "./AddGlyph";
 
 /** What `AddButton` takes. */
-export type AddButtonProps = Pick<ButtonProps, "label" | "isDisabled"> & {
+export type AddButtonProps = Forwardable<Pick<ButtonProps, "label" | "isDisabled">> & {
   /** `ghost` by default; `secondary` for an add that needs more weight. */
   readonly variant?: "ghost" | "secondary" | undefined;
   /** The button's height, `md` by default; its plus follows it. */

package/src/atoms/Chip.tsx

@@ -15,10 +15,13 @@ import { Tooltip } from "@astryxdesign/core/Tooltip";
 import * as stylex from "@stylexjs/stylex";
 import type { ReactNode } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
 import { RemoveButton } from "./RemoveButton";
 
 /** What `Chip` takes. */
-export type ChipProps = Pick<TokenProps, "label" | "isDisabled"> & {
+export type ChipProps = Forwardable<Pick<TokenProps, "isDisabled">> & {
+  /** The chip's text; cut short with an ellipsis past `maxWidth`, and shown whole in a tooltip. */
+  readonly label: string;
   /** `neutral` (default) is the plain grey chip; `accent` the pale accent one; `danger` a value no longer valid. */
   readonly tone?: "neutral" | "accent" | "danger" | undefined;
   /** The chip's height, `sm` or `md` (default), as the controls beside it. */

package/src/atoms/RemoveButton.tsx

@@ -2,8 +2,10 @@ import { Icon } from "@astryxdesign/core/Icon";
 import { IconButton, type IconButtonProps } from "@astryxdesign/core/IconButton";
 import type { ReactNode } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
+
 /** What `RemoveButton` takes. */
-export type RemoveButtonProps = Pick<IconButtonProps, "label" | "isDisabled"> & {
+export type RemoveButtonProps = Forwardable<Pick<IconButtonProps, "label" | "isDisabled">> & {
   /** The button's height, `md` by default. */
   readonly size?: "sm" | "md" | undefined;
   /** Read-only: a remove is an editing affordance, so nothing is drawn. */

package/src/atoms/TextAction.tsx

@@ -4,8 +4,10 @@ import { spacingVars } from "@astryxdesign/core/theme/tokens.stylex";
 import * as stylex from "@stylexjs/stylex";
 import type { ReactNode } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
+
 /** What `TextAction` takes. */
-export type TextActionProps = Pick<LinkProps, "isDisabled"> & {
+export type TextActionProps = Forwardable<Pick<LinkProps, "isDisabled">> & {
   /** What it does, such as "Remove all"; shown in capitals by default, so pass it in normal case. */
   readonly label: string;
   /** A glyph before the text, in the text's colour, such as an Astryx `Icon` of a bin for a removal. */

package/src/lib/forwardable.ts

@@ -0,0 +1,8 @@
+/**
+ * Props taken from another component (`Pick`/`Omit`) whose optional ones also accept `undefined`,
+ * as the kit's own props do, so a host under `exactOptionalPropertyTypes` can forward its own
+ * optional value (`isDisabled={props.isDisabled}`). Required props stay as they are.
+ */
+export type Forwardable<T> = {
+  [K in keyof T]: Partial<Pick<T, K>> extends Pick<T, K> ? T[K] | undefined : T[K];
+};

package/src/molecules/CheckGroup.tsx

@@ -3,6 +3,7 @@ import { HStack } from "@astryxdesign/core/HStack";
 import { VStack } from "@astryxdesign/core/VStack";
 import type { ReactNode } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
 import { FieldGroup, type FieldGroupProps } from "./FieldGroup";
 
 /** One checkbox of a `CheckGroup`. */
@@ -14,9 +15,8 @@ export type CheckGroupOption<V extends string> = {
 };
 
 /** What `CheckGroup` takes. */
-export type CheckGroupProps<V extends string> = Pick<
-  FieldGroupProps,
-  "label" | "isDisabled" | "error"
+export type CheckGroupProps<V extends string> = Forwardable<
+  Pick<FieldGroupProps, "label" | "isDisabled" | "error">
 > & {
   /** The checkboxes, in order. */
   readonly options: readonly CheckGroupOption<V>[];

package/src/molecules/CheckRow.tsx

@@ -8,9 +8,12 @@ import type { ReactNode } from "react";
 
 import { HoverSwap } from "../atoms/HoverSwap";
 import { TruncatedText } from "../atoms/TruncatedText";
+import type { Forwardable } from "../lib/forwardable";
 
 /** What `CheckRow` takes. */
-export type CheckRowProps = Pick<CheckboxInputProps, "label" | "isDisabled" | "isReadOnly"> & {
+export type CheckRowProps = Forwardable<Pick<CheckboxInputProps, "isDisabled" | "isReadOnly">> & {
+  /** The row's text and the checkbox's name; one line, the whole text in a tooltip when cut. */
+  readonly label: string;
   /** A second line under the text, such as an id under a name; one line too. */
   readonly description?: string | undefined;
   /** Whether the box is ticked. */

package/src/molecules/CommitTextField.tsx

@@ -4,21 +4,24 @@ 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 = Pick<
-  TextInputProps,
-  | "label"
-  | "isDisabled"
-  | "isReadOnly"
-  | "isLabelHidden"
-  | "placeholder"
-  | "description"
-  | "isRequired"
-  | "width"
-  | "controlXstyle"
-  | "containerXstyle"
+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;

package/src/molecules/ConfirmDialog.tsx

@@ -1,8 +1,12 @@
 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 = Pick<AlertDialogProps, "isOpen" | "title" | "description"> & {
+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

@@ -6,12 +6,13 @@ 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"> &
-  Pick<TimeInputProps, "hourFormat"> & {
+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. */

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/RevealRadioGroup.tsx

@@ -5,6 +5,7 @@ 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,9 +22,8 @@ export type RevealRadioOption<V extends string> = {
 };
 
 /** What `RevealRadioGroup` takes. */
-export type RevealRadioGroupProps<V extends string> = Pick<
-  RadioListProps,
-  "label" | "isLabelHidden" | "orientation" | "isDisabled"
+export type RevealRadioGroupProps<V extends string> = Forwardable<
+  Pick<RadioListProps, "label" | "isLabelHidden" | "orientation" | "isDisabled">
 > & {
   /** The choices, in order. */
   readonly options: readonly RevealRadioOption<V>[];

package/src/molecules/RevealSwitch.tsx

@@ -2,8 +2,10 @@ 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 = Pick<SwitchProps, "label" | "isDisabled" | "value"> & {
+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. */

package/src/molecules/Select.tsx

@@ -8,25 +8,28 @@ 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 = Pick<
-  SelectorProps,
-  | "label"
-  | "isLabelHidden"
-  | "description"
-  | "placeholder"
-  | "hasSearch"
-  | "width"
-  | "isDisabled"
-  | "isReadOnly"
-  | "isRequired"
-  | "controlXstyle"
-  | "containerXstyle"
+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[];

package/src/molecules/StatusButton.tsx

@@ -2,11 +2,13 @@ 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 = Pick<ButtonProps, "label" | "icon" | "isDisabled"> & {
+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. */

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>[];