@antscorp/ui 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Generic UI kit: atoms, molecules and organisms over Astryx.",
   "license": "MIT",
   "repository": {
@@ -17,6 +17,8 @@
     "!src/cli/**",
     "!src/**/*.test.*",
     "!src/**/*.stories.*",
+    "!src/**/*.doc.ts",
+    "!dist/**/*.doc.*",
     "!src/**/__snapshots__/**",
     "!src/testing.tsx",
     "!src/story.tsx"
@@ -97,40 +99,44 @@
   "scripts": {
     "astryx:reexports": "bun scripts/astryx-reexports.ts",
     "test": "bun scripts/astryx-reexports.ts --check && vitest run && AUI_REACT_COMPILER=off vitest run --coverage",
+    "test:perf": "PERF=1 vitest run",
     "typecheck": "tsc -p .",
     "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.3",
-    "@antscorp/immutable": "0.1.0",
+    "@antscorp/astryx-theme-antsomi": "0.1.4",
+    "@antscorp/immutable": "0.1.1",
     "@astryxdesign/core": "0.7.4",
     "@codemirror/state": "6.7.6",
-    "@codemirror/view": "6.43.14",
+    "@codemirror/view": "6.43.15",
     "@stylexjs/stylex": "0.19.1",
     "spin-delay": "2.0.1",
-    "zod": "4.6.5"
+    "zod": "4.6.7"
   },
   "devDependencies": {
     "@antscorp/component-catalog": "0.1.0",
-    "@antscorp/vite-stylex": "0.1.3",
-    "@storybook/react-vite": "10.6.1",
+    "@antscorp/vite-stylex": "0.1.4",
+    "@storybook/react-vite": "10.6.5",
     "@testing-library/dom": "10.4.2",
     "@testing-library/react": "16.3.3",
-    "@testing-library/user-event": "14.6.7",
+    "@testing-library/user-event": "14.6.8",
     "@types/bun": "1.4.4",
-    "@types/node": "24.19.1",
+    "@types/node": "24.19.2",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "@vitest/coverage-v8": "5.0.3",
+    "@vitest/coverage-v8": "5.0.5",
     "happy-dom": "20.14.5",
-    "react": "19.3.0",
-    "react-dom": "19.3.0",
-    "storybook": "10.6.1",
-    "vite": "8.3.3",
-    "vitest": "5.0.3"
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "storybook": "10.6.5",
+    "vite": "8.3.5",
+    "vitest": "5.0.5"
   },
   "peerDependencies": {
-    "react": ">=19",
-    "react-dom": ">=19"
+    "react": ">=19.2",
+    "react-dom": ">=19.2"
+  },
+  "engines": {
+    "node": ">=24"
   }
 }

package/src/atoms/AddButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@astryxdesign/core/Button";
+import { Button, type ButtonProps } from "@astryxdesign/core/Button";
 import { radiusVars } from "@astryxdesign/core/theme/tokens.stylex";
 import * as stylex from "@stylexjs/stylex";
 import type { ReactNode } from "react";
@@ -6,9 +6,7 @@ import type { ReactNode } from "react";
 import { AddGlyph } from "./AddGlyph";
 
 /** What `AddButton` takes. */
-export type AddButtonProps = {
-  /** What it adds, such as "Add row"; the host translates it. */
-  readonly label: string;
+export type AddButtonProps = 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. */
@@ -17,8 +15,6 @@ export type AddButtonProps = {
   readonly shape?: "default" | "pill" | undefined;
   /** `sentence` (default) shows the label as given; `upper` in capitals, such as "+ AND". */
   readonly case?: "sentence" | "upper" | undefined;
-  /** Dimmed and not pressable, e.g. when a limit is reached. */
-  readonly isDisabled?: boolean | undefined;
   /** Read-only: an add is an editing affordance, so nothing is drawn. */
   readonly isReadOnly?: boolean | undefined;
   /** Called when the button is pressed. */

package/src/atoms/Chip.tsx

@@ -1,3 +1,4 @@
+import type { AccentRole } from "@antscorp/astryx-theme-antsomi/palette";
 import { HStack } from "@astryxdesign/core/HStack";
 import { Icon } from "@astryxdesign/core/Icon";
 import { IconButton } from "@astryxdesign/core/IconButton";
@@ -9,7 +10,7 @@ import {
   spacingVars,
   typeScaleVars,
 } from "@astryxdesign/core/theme/tokens.stylex";
-import { Token } from "@astryxdesign/core/Token";
+import { Token, type TokenProps } from "@astryxdesign/core/Token";
 import { Tooltip } from "@astryxdesign/core/Tooltip";
 import * as stylex from "@stylexjs/stylex";
 import type { ReactNode } from "react";
@@ -17,9 +18,7 @@ import type { ReactNode } from "react";
 import { RemoveButton } from "./RemoveButton";
 
 /** What `Chip` takes. */
-export type ChipProps = {
-  /** The chip's text; cut short with an ellipsis past `maxWidth`, and shown whole in a tooltip. */
-  readonly label: string;
+export type ChipProps = Pick<TokenProps, "label" | "isDisabled"> & {
   /** `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. */
@@ -40,8 +39,6 @@ export type ChipProps = {
    * button over its end; it stays in the tab order. Without it the button always shows after the text.
    */
   readonly isRemoveOnHover?: boolean | undefined;
-  /** Dims the chip and blocks its remove button. */
-  readonly isDisabled?: boolean | undefined;
   /** Read-only: no remove button. */
   readonly isReadOnly?: boolean | undefined;
 };
@@ -102,6 +99,7 @@ export function Chip(props: ChipProps): ReactNode {
 // The remove button shows while the chip is hovered or has focus inside it.
 const marker = stylex.defaultMarker();
 
+const accentFill: AccentRole = "var(--ants-accent-fill)";
 const styles = stylex.create({
   // A pill as high as the controls, 10px either side (no
   // spacing step is 10px), in 12px body text of the normal weight. An xstyle, not a `token` theme entry: Token is also
@@ -117,7 +115,7 @@ const styles = stylex.create({
   md: { height: sizeVars["--size-element-md"] },
   // Not `color="blue"` with a theme entry, for the same reason.
   accent: {
-    backgroundColor: "var(--ants-mh-blue-200)",
+    backgroundColor: accentFill,
     color: colorVars["--color-text-primary"],
   },
   // A 16px white circle over the chip's end (Token's own remove button is 16px too).

package/src/atoms/RemoveButton.tsx

@@ -1,15 +1,11 @@
 import { Icon } from "@astryxdesign/core/Icon";
-import { IconButton } from "@astryxdesign/core/IconButton";
+import { IconButton, type IconButtonProps } from "@astryxdesign/core/IconButton";
 import type { ReactNode } from "react";
 
 /** What `RemoveButton` takes. */
-export type RemoveButtonProps = {
-  /** What goes, such as "Remove row"; the button shows only an icon, so this is its name. */
-  readonly label: string;
+export type RemoveButtonProps = Pick<IconButtonProps, "label" | "isDisabled"> & {
   /** The button's height, `md` by default. */
   readonly size?: "sm" | "md" | undefined;
-  /** Dimmed and not pressable. */
-  readonly isDisabled?: boolean | undefined;
   /** Read-only: a remove is an editing affordance, so nothing is drawn. */
   readonly isReadOnly?: boolean | undefined;
   /** Called when the button is pressed. */

package/src/atoms/TextAction.tsx

@@ -1,11 +1,11 @@
 import { Icon } from "@astryxdesign/core/Icon";
-import { Link } from "@astryxdesign/core/Link";
+import { Link, type LinkProps } from "@astryxdesign/core/Link";
 import { spacingVars } from "@astryxdesign/core/theme/tokens.stylex";
 import * as stylex from "@stylexjs/stylex";
 import type { ReactNode } from "react";
 
 /** What `TextAction` takes. */
-export type TextActionProps = {
+export type TextActionProps = 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. */
@@ -19,8 +19,6 @@ export type TextActionProps = {
   readonly onClick?: (() => void) | undefined;
   /** A down chevron after the text, for an action that opens a menu. */
   readonly hasChevron?: boolean | undefined;
-  /** Dimmed and not pressable. */
-  readonly isDisabled?: boolean | undefined;
 };
 
 /**

package/src/lib/iso.ts

@@ -2,6 +2,7 @@ import {
   createISOTimeString,
   type ISODateString,
   type ISOTimeString,
+  parseISO,
 } from "@astryxdesign/core/utils";
 
 // Astryx date and time inputs take a value only when it is a valid one; a draft's empty or broken
@@ -13,14 +14,25 @@ export function timeValue(time: string): { readonly value?: ISOTimeString } {
   return value === null ? {} : { value };
 }
 
-const isISODate = (value: string): value is ISODateString => /^\d{4}-\d{2}-\d{2}$/u.test(value);
+const hasISODateShape = (value: string): value is ISODateString =>
+  /^\d{4}-\d{2}-\d{2}$/u.test(value);
 
-/** Spread into a date input: `{ value }` when `date` is `YYYY-MM-DD`, `{}` otherwise. */
+function isISODate(value: string): value is ISODateString {
+  if (!hasISODateShape(value)) return false;
+  try {
+    parseISO(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/** Spread into a date input: `{ value }` for a valid calendar date in `YYYY-MM-DD`, `{}` otherwise. */
 export function dateValue(date: string): { readonly value?: ISODateString } {
   return isISODate(date) ? { value: date } : {};
 }
 
-/** Spread into a date input: `{ min }` when `min` is `YYYY-MM-DD`, `{}` otherwise. */
+/** Spread into a date input: `{ min }` for a valid calendar date in `YYYY-MM-DD`, `{}` otherwise. */
 export function minDate(min: string | undefined): { readonly min?: ISODateString } {
   return min !== undefined && isISODate(min) ? { min } : {};
 }

package/src/lib/tokenEditorExtensions.ts

@@ -255,7 +255,7 @@ const theme = EditorView.theme({
     font: "inherit",
     fontSize: "12px",
     borderRadius: "50%",
-    color: "var(--ants-mh-blue-700)",
+    color: "var(--color-icon-accent)",
     cursor: "pointer",
   },
   ".cm-token:hover .cm-token-remove, .cm-token:focus-within .cm-token-remove": { opacity: "1" },

package/src/molecules/AccentCard.tsx

@@ -1,3 +1,4 @@
+import type { AccentRole } from "@antscorp/astryx-theme-antsomi/palette";
 import { Card } from "@astryxdesign/core/Card";
 import { HStack } from "@astryxdesign/core/HStack";
 import { Icon } from "@astryxdesign/core/Icon";
@@ -86,7 +87,7 @@ export function AccentCard(props: AccentCardProps): ReactNode {
             <RemoveButton
               label={close}
               size="sm"
-              isDisabled={props.isDisabled}
+              isDisabled={props.isDisabled ?? false}
               onClick={props.onClose}
             />
           ))}
@@ -101,6 +102,7 @@ export function AccentCard(props: AccentCardProps): ReactNode {
   );
 }
 
+const accentBanner: AccentRole = "var(--ants-accent-banner)";
 const styles = stylex.create({
   // A grey border and a
   // 4px accent stripe at the start (no border token is 4px). A look of this card only, which no
@@ -122,7 +124,7 @@ const styles = stylex.create({
   bannerCard: { borderStyle: "none", borderRadius: 0 },
   // White semibold capitals on the header blue, 10px 20px around.
   banner: {
-    backgroundColor: "var(--ants-mh-blue-750)",
+    backgroundColor: accentBanner,
     color: colorVars["--color-on-accent"],
     textTransform: "uppercase",
   },

package/src/molecules/CheckRow.tsx

@@ -1,4 +1,4 @@
-import { CheckboxInput } from "@astryxdesign/core/CheckboxInput";
+import { CheckboxInput, type CheckboxInputProps } from "@astryxdesign/core/CheckboxInput";
 import { HStack } from "@astryxdesign/core/HStack";
 import { Text } from "@astryxdesign/core/Text";
 import { sizeVars } from "@astryxdesign/core/theme/tokens.stylex";
@@ -10,9 +10,7 @@ import { HoverSwap } from "../atoms/HoverSwap";
 import { TruncatedText } from "../atoms/TruncatedText";
 
 /** What `CheckRow` takes. */
-export type CheckRowProps = {
-  /** The row's text and the checkbox's name; one line, the whole text in a tooltip when cut. */
-  readonly label: string;
+export type CheckRowProps = Pick<CheckboxInputProps, "label" | "isDisabled" | "isReadOnly"> & {
   /** 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. */
@@ -26,10 +24,6 @@ export type CheckRowProps = {
    * link to the item; the two share one place, so nothing moves. None without it.
    */
   readonly hoverContent?: ReactNode;
-  /** Dims the box and blocks it; nothing is hidden. */
-  readonly isDisabled?: boolean | undefined;
-  /** Shows the box's state, not dimmed, and blocks it. */
-  readonly isReadOnly?: boolean | undefined;
 };
 
 /**

package/src/molecules/ChoiceTiles.tsx

@@ -1,3 +1,4 @@
+import type { AccentRole } from "@antscorp/astryx-theme-antsomi/palette";
 import { Center } from "@astryxdesign/core/Center";
 import { ClickableCard } from "@astryxdesign/core/ClickableCard";
 import { HStack } from "@astryxdesign/core/HStack";
@@ -67,6 +68,7 @@ export function ChoiceTiles<V extends string>(props: ChoiceTilesProps<V>): React
 // A 150×130 tile at 12px text is too tight; 180×170 leaves room for a two-line description.
 const TILE = { width: 180, height: 170 } as const;
 
+const accentHover: AccentRole = "var(--ants-accent-hover)";
 const styles = stylex.create({
   // Text has no alignment prop: its lines centre under the glyph from here.
   fill: { height: "100%", textAlign: "center" },
@@ -76,7 +78,7 @@ const styles = stylex.create({
     width: 50,
     height: 50,
     borderRadius: "50%",
-    backgroundColor: "var(--ants-mh-blue-50)",
+    backgroundColor: accentHover,
     color: colorVars["--color-accent"],
   },
 });

package/src/molecules/CommitTextField.tsx

@@ -7,33 +7,31 @@ import { fitToMaxLength } from "../lib/fitToMaxLength";
 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 = 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 +41,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 +80,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 +90,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,8 @@
-import { AlertDialog } from "@astryxdesign/core/AlertDialog";
+import { AlertDialog, type AlertDialogProps } from "@astryxdesign/core/AlertDialog";
 import type { ReactNode } from "react";
 
 /** 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 = 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,7 +1,8 @@
 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";
@@ -9,93 +10,105 @@ 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 = Pick<FieldGroupProps, "isDisabled"> &
+  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 +123,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/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,4 +1,4 @@
-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";
@@ -21,13 +21,10 @@ 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> = 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. */