@antscorp/ui 0.1.2 → 0.1.4

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

@@ -44,7 +44,7 @@ export function DurationInput(props: DurationInputProps): ReactNode {
   const size = props.size ?? "md";
   const duration = props.value ?? {};
   const isWholeDays = max.days !== undefined && duration.days === max.days;
-  // As fe-app's: with any other part set, days stop one short, so they never reach a max that disables those parts.
+  // With any other part set, days stop one short, so they never reach a max that disables those parts.
   const hasParts = PARTS.some((part) => part !== "days" && (duration[part] ?? 0) > 0);
   const limits = { ...max, ...(max.days !== undefined && hasParts && { days: max.days - 1 }) };
   return (
@@ -55,7 +55,7 @@ export function DurationInput(props: DurationInputProps): ReactNode {
             <NumberInput
               label={labels[part]}
               isLabelHidden
-              // fe-app's: room for three digits of days, two of the others.
+              // Room for three digits of days, two of the others.
               width={part === "days" ? 80 : 64}
               size={size}
               min={0}

package/src/molecules/FieldGroup.tsx

@@ -18,7 +18,7 @@ export type FieldGroupProps = {
   readonly frame?: "none" | "card" | undefined;
   /** Help under the label. */
   readonly description?: string | undefined;
-  /** Disables every field in the group, e.g. for a read-only form. */
+  /** Disables fields through the unframed fieldset; with `frame="card"`, disable children yourself. */
   readonly isDisabled?: boolean | undefined;
   /** A problem with the group as a whole, already in the user's language. */
   readonly error?: string | undefined;

package/src/molecules/FieldRow.tsx

@@ -8,7 +8,7 @@ import type { ReactNode } from "react";
 export type FieldRowProps = {
   /**
    * The row's caption, in a column at the start. Without it the column stays, empty, so the
-   * content lines up with the captioned rows around it (as fe-app's empty title column); stacked,
+   * content lines up with the captioned rows around it; stacked,
    * nothing is drawn above the content.
    */
   readonly label?: string | undefined;

package/src/molecules/FrequencyLimitRow.tsx

@@ -72,7 +72,7 @@ function Marked(props: {
   );
 }
 
-// Wide enough for a few digits and the stepper, as fe-app's number box.
+// Wide enough for a few digits and the stepper.
 const TIMES_WIDTH = 80;
 
 /** "N time(s) per window" as one sentence, with a number more when the window is the `everyWindow`. */

package/src/molecules/MetaTable.tsx

@@ -47,7 +47,7 @@ export type MetaTableProps = {
 };
 
 /**
- * A read-only table of names and a short value each, as fe-app shows a pick in view mode: a name
+ * A read-only table of names and a short value each: a name
  * column (each name a link when it has an `href`, on one line with the whole name in a tooltip when
  * cut; a problem in the error tone with a ⚠ tip) and, with `labels.meta`, a value column at the
  * end. A row that `isLoading` shows shimmer bars in its cells, in the table's real columns; the

package/src/molecules/PhoneFrame.tsx

@@ -21,7 +21,7 @@ export type PhoneFrameProps = {
 };
 
 /**
- * A phone to preview content in, as antsomi-ui's `MobileFrameV3` with its `MobileBrandingBar`,
+ * A phone frame with a branding bar to preview content in,
  * drawn rather than pictured: a dark rounded device with a camera island, a status bar (clock,
  * signal, battery), a header with a back chevron, the avatar and the title, and the content under
  * it, scrolling when it is taller than the screen. As wide as its container, up to 290px, with a
@@ -77,7 +77,7 @@ export function PhoneFrame({ title, avatarSrc, labels, children }: PhoneFramePro
 const BARS = ["s", "m", "l", "xl"] as const;
 
 const styles = stylex.create({
-  // antsomi-ui's medium frame: 290 × 600 at most. The bezel is black with a slate rim; no Astryx
+  // A medium frame: 290 × 600 at most. The bezel is black with a slate rim; no Astryx
   // surface is a device, so the antsomi palette draws it.
   device: {
     boxSizing: "border-box",

package/src/molecules/RemovableRow.tsx

@@ -36,7 +36,7 @@ export type RemovableRowProps = {
    */
   readonly hoverContent?: ReactNode;
   /**
-   * A bordered box around the row, as fe-app's picked items: its text on one line, the whole text
+   * A bordered box around the row: its text on one line, the whole text
    * in a tooltip when cut. As high as `RowSkeletons variant="framed"`.
    */
   readonly isFramed?: boolean | undefined;
@@ -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}
     />
@@ -134,7 +134,7 @@ export function RemovableRow(props: RemovableRowProps): ReactNode {
 const styles = stylex.create({
   // The texts take the room the end content and the remove button leave, so they wrap.
   text: { minWidth: 0, flexGrow: 1 },
-  // fe-app's picked item (UITargetSelection ColumnSelection WrapperLabelV2): a 1px platinum
+  // A picked item's frame: a 1px platinum
   // border, 5px corners and 8px padding (the `padding` step 2).
   frame: {
     borderWidth: borderVars["--border-width"],

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. */

package/src/molecules/RevealSwitch.tsx

@@ -1,19 +1,13 @@
-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";
 
 /** 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 = 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,6 +2,7 @@ import {
   Selector,
   type SelectorOptionData,
   type SelectorOptionType,
+  type SelectorProps,
 } from "@astryxdesign/core/Selector";
 import type { ReactNode } from "react";
 
@@ -13,13 +14,20 @@ import { useLoadingShown } from "../lib/useLoadingShown";
 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 = 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 +36,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 (30px, as fe-app's controls). */
-  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 +49,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". */
@@ -69,9 +65,11 @@ export type SelectProps = {
 };
 
 /**
- * The kit's select, as antd's Select in fe-app, on Astryx's `Selector`: the list is as wide as the
+ * 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 +104,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/SideLabelRow.tsx

@@ -17,7 +17,7 @@ export type SideLabelRowProps = {
 
 /**
  * One row of a card: a narrow label column and the row's controls, padded as a card's rows are.
- * The label sits centred on the first line of controls (`md` high, fe-app's 30px); where the controls would get
+ * The label sits centred on the first line of controls (`md` high, the theme's 30px); where the controls would get
  * narrower than 240px they move under the label. It holds no state.
  */
 export function SideLabelRow({ label, labelWidth = 90, children }: SideLabelRowProps): ReactNode {
@@ -34,7 +34,7 @@ export function SideLabelRow({ label, labelWidth = 90, children }: SideLabelRowP
 }
 
 const styles = stylex.create({
-  // fe-app's rows (UIPerformEventV2 DataSourceBlockContent): 10px above and below, between the
+  // Rows have 10px above and below, between the
   // spacing steps of 8px and 12px.
   row: { paddingBlock: 10 },
   // As high as an `md` control, so the text is centred on the first line of controls.

package/src/molecules/SplitButton.tsx

@@ -37,7 +37,7 @@ export type SplitButtonProps = {
   readonly isMainDisabled?: boolean | undefined;
   /** The main button shows a spinner and is announced as busy; the menu is not affected. */
   readonly isLoading?: boolean | undefined;
-  /** Rounds its two ends into a pill, as fe-app's variant pills; the inner corners stay square. */
+  /** Rounds its two ends into a pill; the inner corners stay square. */
   readonly isRound?: boolean | undefined;
   /** The button's weight, `primary` by default. */
   readonly variant?: "primary" | "secondary" | undefined;

package/src/molecules/StatusButton.tsx

@@ -1,4 +1,4 @@
-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";
 
@@ -6,9 +6,7 @@ import type { ComponentProps, ReactNode } from "react";
 export type StatusTone = ComponentProps<typeof StatusDot>["variant"];
 
 /** What `StatusButton` takes. */
-export type StatusButtonProps = {
-  /** The button's text. */
-  readonly label: string;
+export type StatusButtonProps = 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 +14,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/TagSelect.tsx

@@ -41,8 +41,8 @@ export type TagSelectProps<V extends string> = {
 
 /**
  * A small coloured tag showing the picked value; pressing it opens a popover with a heading and
- * every tag, wrapping, each picked by a press, which closes the popover. As antsomi-ui's
- * `SelectAssociatedTag` tag. Its state is whether the popover is open.
+ * every tag, wrapping, each picked by a press, which closes the popover.
+ * Its state is whether the popover is open.
  */
 export function TagSelect<V extends string>(props: TagSelectProps<V>): ReactNode {
   const { options, value } = props;
@@ -150,7 +150,7 @@ function Tag<V extends string>(props: TagProps<V>): ReactNode {
 }
 
 const styles = stylex.create({
-  // antsomi-ui's SelectedTag (SelectAssociatedTag/styled.ts): 16px high, 3px corners and sides,
+  // The selected tag: 16px high, 3px corners and sides,
   // cut at 70px; no spacing or radius step is 3px.
   tag: {
     display: "inline-flex",
@@ -171,11 +171,11 @@ const styles = stylex.create({
     cursor: { default: "pointer", ":disabled": "default" },
   },
   text: { minWidth: 0 },
-  // antsomi-ui's Popover inner padding (overlayInnerStyle 10), between the 8px and 12px steps.
+  // The popover's 10px inner padding, between the 8px and 12px steps.
   panel: { padding: 10 },
 });
 
-// antsomi-ui's tag fills (SelectAssociatedTag constants), from the antsomi palette.
+// Tag fills from the Antsomi palette.
 const tones = stylex.create({
   cyan: { backgroundColor: "var(--ants-mh-cyan-500)" },
   blue: { backgroundColor: "var(--ants-mh-blue-500)" },