twico-ui 1.46.0 → 1.47.0

package/dist/index.d.cts

@@ -1636,6 +1636,34 @@ interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "o
   label?: React.ReactNode;
   /** Helper text shown below when there is no error. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error message — turns the field red and replaces the hint. */
   error?: React.ReactNode;
   /** Marks the field required (adds an asterisk to the label). @default false */
@@ -1696,6 +1724,34 @@ interface OptionGroup {
 interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange"> {
   label?: React.ReactNode;
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   error?: React.ReactNode;
   required?: boolean;
   size?: "sm" | "md" | "lg";
@@ -1825,6 +1881,34 @@ interface CurrencyProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
   label?: React.ReactNode;
   /** Helper text below the field; linked to the input via aria-describedby. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error text below the field; sets aria-invalid and is linked via aria-describedby (takes precedence over hint). */
   error?: React.ReactNode;
   /** Intercepted to render the label asterisk, and forwarded to the native input as `required`. @default false */
@@ -1865,6 +1949,34 @@ interface CurrencyFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
   label?: React.ReactNode;
   /** Helper text below the field; linked to the input via aria-describedby. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error text below the field; sets aria-invalid and is linked via aria-describedby (takes precedence over hint). */
   error?: React.ReactNode;
   /** Intercepted to render the label asterisk, and forwarded to the native input as `required`. @default false */
@@ -3053,6 +3165,34 @@ interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "on
   label?: React.ReactNode;
   /** Helper text shown below when there is no error. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error message — turns the field red and replaces the hint. */
   error?: React.ReactNode;
   /** Marks the field required (adds an asterisk to the label). @default false */
@@ -3106,6 +3246,34 @@ interface DateRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   label?: React.ReactNode;
   /** Helper text shown below when there is no error. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error message — turns the field red and replaces the hint. */
   error?: React.ReactNode;
   /** Marks the field required (adds an asterisk to the label). @default false */
@@ -3163,6 +3331,34 @@ interface TimePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "on
   label?: React.ReactNode;
   /** Helper text shown below when there is no error. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error message — turns the field red and replaces the hint. */
   error?: React.ReactNode;
   /** Marks the field required (adds an asterisk to the label). @default false */
@@ -3218,6 +3414,34 @@ interface DateTimePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   label?: React.ReactNode;
   /** Helper text shown below when there is no error. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error message — recolors both controls and replaces the hint. */
   error?: React.ReactNode;
   /** Marks the field required (adds an asterisk to the label). @default false */
@@ -3275,6 +3499,34 @@ declare function DateTimePicker(props: DateTimePickerProps): React.JSX.Element;
 interface MultiSelectProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange"> {
   label?: React.ReactNode;
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   error?: React.ReactNode;
   required?: boolean;
   /** Control height preset, matching Select/Combobox. @default "md" */
@@ -3540,6 +3792,34 @@ interface FieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
   label?: React.ReactNode;
   /** Helper text shown below when there is no error. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error message — replaces the hint and renders in the danger color. */
   error?: React.ReactNode;
   /** Marks the field required (adds an asterisk after the label). @default false */
@@ -3728,6 +4008,34 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
   label?: React.ReactNode;
   /** Helper text shown below when there is no error. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error message — turns the field red and replaces the hint. */
   error?: React.ReactNode;
   /** Marks the field required (adds an asterisk and forwards to the native input). */
@@ -4036,6 +4344,34 @@ interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "on
   label?: React.ReactNode;
   /** Helper text below the group. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error text below the group; sets `aria-invalid` and is announced once for the whole group. */
   error?: React.ReactNode;
   /** Lay the radios in a column or a wrapping row. @default "vertical" */
@@ -4098,6 +4434,34 @@ declare function Rating(props: RatingProps): React.JSX.Element;
 interface SelectProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "onChange" | "defaultValue"> {
   label?: React.ReactNode;
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   error?: React.ReactNode;
   required?: boolean;
   size?: "sm" | "md" | "lg";
@@ -4535,6 +4899,34 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
   label?: React.ReactNode;
   /** Helper text shown below when there is no error. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error message — turns the field red and replaces the hint. */
   error?: React.ReactNode;
   /** Marks the field required (adds an asterisk and forwards to the native textarea). */