@flamingo-stack/openframe-frontend-core 0.0.659-2347.6820.1 → 0.0.659

package/src/components/ui/__tests__/field-wrapper-error-slot.test.tsx

@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { FieldWrapper } from '../field-wrapper';
+import { Input } from '../input';
+import { Select, SelectTrigger, SelectValue } from '../select';
+import { Textarea } from '../textarea';
+
+/**
+ * A label-less FieldWrapper is `display: contents` until `error` is set and a
+ * box afterwards, and the parent's spacing lands on the box but not on
+ * `contents` — so the control jumped by that spacing whenever a message came
+ * or went. `errorSlot` renders the box from the first render, and the controls
+ * derive it from whether the caller wrote an `error` attribute at all. These
+ * pin both halves: the flag, and each control's wiring of it.
+ *
+ * The wrapper is a role-less <div> and its display mode IS the contract, so
+ * the tests walk up from the control (this file is listed in eslint.config.mjs).
+ */
+
+const BOX = 'relative';
+const TRANSPARENT = 'contents';
+
+const wrapperOf = (control: Element | null) => control?.parentElement ?? null;
+const inputWrapper = () => wrapperOf(screen.getByLabelText('Name').closest('label'));
+
+describe('FieldWrapper errorSlot', () => {
+  it('stays layout-transparent without a label, a message or a slot', () => {
+    render(
+      <FieldWrapper>
+        <input aria-label="n" />
+      </FieldWrapper>,
+    );
+    expect(wrapperOf(screen.getByLabelText('n'))).toHaveClass(TRANSPARENT);
+  });
+
+  it('is a box from the first render when the slot is reserved, and stays one', () => {
+    const { rerender } = render(
+      <FieldWrapper errorSlot>
+        <input aria-label="n" />
+      </FieldWrapper>,
+    );
+    expect(wrapperOf(screen.getByLabelText('n'))).toHaveClass(BOX);
+    rerender(
+      <FieldWrapper errorSlot error="Required">
+        <input aria-label="n" />
+      </FieldWrapper>,
+    );
+    expect(wrapperOf(screen.getByLabelText('n'))).toHaveClass(BOX);
+    expect(screen.getByText('Required')).toBeInTheDocument();
+  });
+});
+
+describe('the controls reserve the slot when an error attribute is written', () => {
+  it('Input without the attribute stays transparent', () => {
+    render(<Input aria-label="Name" />);
+    expect(inputWrapper()).toHaveClass(TRANSPARENT);
+  });
+
+  it('Input with error={undefined} is a box before any message, and stays one', () => {
+    const { rerender } = render(<Input aria-label="Name" error={undefined} />);
+    expect(inputWrapper()).toHaveClass(BOX);
+    rerender(<Input aria-label="Name" error="Required" />);
+    expect(inputWrapper()).toHaveClass(BOX);
+  });
+
+  it('SelectTrigger with error={undefined} is a box before any message', () => {
+    render(
+      <Select>
+        <SelectTrigger aria-label="Shell" error={undefined}>
+          <SelectValue placeholder="Pick" />
+        </SelectTrigger>
+      </Select>,
+    );
+    expect(wrapperOf(screen.getByRole('combobox'))).toHaveClass(BOX);
+  });
+
+  it('Textarea with error={undefined} is a box before any message', () => {
+    render(<Textarea aria-label="Notes" error={undefined} />);
+    expect(wrapperOf(screen.getByLabelText('Notes'))).toHaveClass(BOX);
+  });
+});

package/src/components/ui/autocomplete.tsx

@@ -742,7 +742,13 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
   );
 
   return (
-    <FieldWrapper label={label} labelVariant={labelVariant} error={error} className={className}>
+    <FieldWrapper
+      label={label}
+      labelVariant={labelVariant}
+      error={error}
+      errorSlot={'error' in props}
+      className={className}
+    >
       <div className="relative" ref={containerRef}>
         {popover}
 

package/src/components/ui/date-picker.tsx

@@ -757,7 +757,7 @@ export function DatePicker(props: DatePickerProps) {
   );
 
   return (
-    <FieldWrapper label={label} error={error}>
+    <FieldWrapper label={label} error={error} errorSlot={'error' in props}>
       {picker}
     </FieldWrapper>
   );
@@ -790,23 +790,24 @@ const generateMinuteOptions = (): string[] => {
   return Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0'));
 };
 
-export function DatePickerInput({
-  placeholder = 'Select date',
-  formatDate = defaultFormatDate,
-  disabled = false,
-  className,
-  numberOfMonths = 1,
-  fromDate,
-  toDate,
-  locale,
-  value,
-  onChange,
-  showTime = false,
-  use24HourFormat = false,
-  label,
-  error,
-  invalid = false,
-}: DatePickerInputProps) {
+export function DatePickerInput(props: DatePickerInputProps) {
+  const {
+    placeholder = 'Select date',
+    formatDate = defaultFormatDate,
+    disabled = false,
+    className,
+    numberOfMonths = 1,
+    fromDate,
+    toDate,
+    locale,
+    value,
+    onChange,
+    showTime = false,
+    use24HourFormat = false,
+    label,
+    error,
+    invalid = false,
+  } = props;
   const [open, setOpen] = useState(false);
   const isInvalid = invalid || !!error;
 
@@ -988,7 +989,7 @@ export function DatePickerInput({
   );
 
   return (
-    <FieldWrapper label={label} error={error} className={className}>
+    <FieldWrapper label={label} error={error} errorSlot={'error' in props} className={className}>
       {content}
     </FieldWrapper>
   );
@@ -1036,24 +1037,25 @@ const generateTimeOptions = (intervalMinutes: number, use24Hour: boolean): { val
   return options;
 };
 
-export function DatePickerInputSimple({
-  placeholder = 'Select date',
-  formatDate = defaultFormatDate,
-  disabled = false,
-  className,
-  numberOfMonths = 1,
-  fromDate,
-  toDate,
-  locale,
-  value,
-  onChange,
-  showTime = false,
-  timeInterval = 30,
-  use24HourFormat = false,
-  label,
-  error,
-  invalid = false,
-}: DatePickerInputSimpleProps) {
+export function DatePickerInputSimple(props: DatePickerInputSimpleProps) {
+  const {
+    placeholder = 'Select date',
+    formatDate = defaultFormatDate,
+    disabled = false,
+    className,
+    numberOfMonths = 1,
+    fromDate,
+    toDate,
+    locale,
+    value,
+    onChange,
+    showTime = false,
+    timeInterval = 30,
+    use24HourFormat = false,
+    label,
+    error,
+    invalid = false,
+  } = props;
   const [open, setOpen] = useState(false);
   const isInvalid = invalid || !!error;
 
@@ -1181,7 +1183,7 @@ export function DatePickerInputSimple({
   );
 
   return (
-    <FieldWrapper label={label} error={error} className={className}>
+    <FieldWrapper label={label} error={error} errorSlot={'error' in props} className={className}>
       {content}
     </FieldWrapper>
   );

package/src/components/ui/field-wrapper.tsx

@@ -21,13 +21,27 @@ export interface FieldWrapperProps {
    *
    * It is positioned OUT OF FLOW (absolute, hanging below the wrapper), so it
    * never changes the field's height when it appears — the same treatment
-   * `CheckboxBlock` uses. The trade is that it overlaps whatever sits directly
+   * `CheckboxBlock` uses. That holds only while the wrapper is already a box
+   * when the message arrives — see `errorSlot`. The trade is that it overlaps whatever sits directly
    * below: a form stacking fields needs at least ~20px of vertical gap (e.g.
    * `gap-[var(--spacing-system-lf)]`) for the message to land in clear space.
    */
   error?: string;
   /** Color variant for the message: "error" (red), "warning" (yellow), "success" (green) or "muted" (grey) */
   errorVariant?: 'error' | 'warning' | 'success' | 'muted';
+  /**
+   * The field is wired for a message: `error` may arrive later, so render the
+   * positioned box from the FIRST render instead of only once it does.
+   *
+   * Without a label the wrapper is `display: contents` while `error` is empty
+   * and a box once it is set — and the parent's spacing lands on a box but not
+   * on `contents`: a `space-y-*` margin, a flex row's sizing. So the control
+   * moved by that spacing the moment a message came, and back when it went.
+   * The controls pass this whenever the caller wrote an `error` attribute at
+   * all (`error={undefined}` included): those are exactly the call sites whose
+   * layout could flip, and a box there is the layout they already got on error.
+   */
+  errorSlot?: boolean;
   /**
    * Label scale. Default is the standard form-label scale (text-h6).
    * 'large' (text-h4) is for screens whose design specifies body-scale field
@@ -56,10 +70,20 @@ const errorVariantClasses = {
 
 const FieldWrapper = forwardRef<HTMLDivElement, FieldWrapperProps>(
   (
-    { label, htmlFor, error, errorVariant = 'error', labelVariant = 'default', required = false, className, children },
+    {
+      label,
+      htmlFor,
+      error,
+      errorVariant = 'error',
+      errorSlot = false,
+      labelVariant = 'default',
+      required = false,
+      className,
+      children,
+    },
     ref,
   ) => {
-    const hasChrome = label != null || error != null;
+    const hasChrome = label != null || error != null || errorSlot;
 
     return (
       <div ref={ref} className={cn(hasChrome ? 'relative flex w-full flex-col' : 'contents', className)}>

package/src/components/ui/input.tsx

@@ -30,134 +30,144 @@ const invalidBorderClasses = {
   warning: '!border-ods-warning hover:!border-ods-warning has-[:focus]:!border-ods-warning',
 } as const;
 
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      className,
-      type,
-      invalid = false,
-      startAdornment,
-      endAdornment,
-      label,
-      labelVariant,
-      error,
-      errorVariant = 'error',
-      loading = false,
-      ...props
-    },
-    ref,
-  ) => {
-    // success/muted are informational — they never paint the invalid border
-    const variantIsInvalid = errorVariant === 'error' || errorVariant === 'warning';
-    const isInvalid = invalid || (!!error && variantIsInvalid);
+const Input = forwardRef<HTMLInputElement, InputProps>((allProps, ref) => {
+  const {
+    className,
+    type,
+    invalid = false,
+    startAdornment,
+    endAdornment,
+    label,
+    labelVariant,
+    error,
+    errorVariant = 'error',
+    loading = false,
+    ...props
+  } = allProps;
+  // Wired for a message even while `error` is undefined — see `FieldWrapper.errorSlot`.
+  const errorSlot = 'error' in allProps;
+  // success/muted are informational — they never paint the invalid border
+  const variantIsInvalid = errorVariant === 'error' || errorVariant === 'warning';
+  const isInvalid = invalid || (!!error && variantIsInvalid);
 
-    // Range inputs get a clean slider rendering — no label wrapper, borders, or adornments
-    if (type === 'range') {
-      const rangeInput = (
-        <input
-          type="range"
-          className={cn(
-            'h-1 w-full cursor-pointer appearance-none rounded-full bg-white/30',
-            // Webkit (Chrome/Safari) thumb
-            '[&::-webkit-slider-thumb]:appearance-none',
-            '[&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3',
-            '[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white',
-            '[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:shadow-sm',
-            // Firefox thumb
-            '[&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:w-3',
-            '[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white',
-            '[&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-0',
-            // Firefox track
-            '[&::-moz-range-track]:bg-transparent',
-            // Disabled
-            'disabled:cursor-not-allowed disabled:opacity-50',
-            className,
-          )}
-          ref={ref}
-          {...props}
-        />
-      );
-      return label ? (
-        <FieldWrapper label={label} labelVariant={labelVariant} error={error} errorVariant={errorVariant}>
-          {rangeInput}
-        </FieldWrapper>
-      ) : (
-        rangeInput
-      );
-    }
-
-    const content = (
-      <label
-        data-invalid={isInvalid || undefined}
+  // Range inputs get a clean slider rendering — no label wrapper, borders, or adornments
+  if (type === 'range') {
+    const rangeInput = (
+      <input
+        type="range"
         className={cn(
-          // Layout & spacing
-          'flex h-11 w-full cursor-text items-center gap-2 rounded-[6px] border px-3 md:h-12',
-          // Focus-within states
-          'has-[:focus-visible]:outline-none',
-          'group',
-          // Animations & touch UX
-          'transition-colors duration-200',
-          // Theme palette
-          'border-ods-border bg-ods-card has-[:focus]:border-ods-accent',
-          // Hover & active (not disabled)
-          !props.disabled &&
-            'hover:border-ods-border-hover hover:bg-ods-bg-hover active:border-ods-border-active active:bg-ods-bg-active',
-          // Disabled. The adornments (and any icon inside them) carry their own
-          // `text-ods-text-secondary`, so grey them from here — a disabled field
-          // must read as one flat colour, not grey text next to a live icon.
-          // Scoped to the DIRECT span children (the two adornment wrappers): a
-          // descendant rule would also repaint whatever the caller renders INSIDE
-          // an adornment, which is passed verbatim precisely so it can own its
-          // colour (a `Tag` there went invisible against its own fill).
-          props.disabled && '!cursor-not-allowed bg-ods-bg',
-          'has-[:disabled]:[&>span]:text-ods-text-disabled has-[:disabled]:[&_svg]:text-ods-text-disabled',
-          // Invalid
-          isInvalid && invalidBorderClasses[variantIsInvalid ? errorVariant : 'error'],
+          'h-1 w-full cursor-pointer appearance-none rounded-full bg-white/30',
+          // Webkit (Chrome/Safari) thumb
+          '[&::-webkit-slider-thumb]:appearance-none',
+          '[&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3',
+          '[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white',
+          '[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:shadow-sm',
+          // Firefox thumb
+          '[&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:w-3',
+          '[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white',
+          '[&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-0',
+          // Firefox track
+          '[&::-moz-range-track]:bg-transparent',
+          // Disabled
+          'disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
-      >
-        {startAdornment && (
-          <span className="flex-shrink-0 text-ods-text-secondary transition-colors duration-200 text-h6 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6">
-            {startAdornment}
-          </span>
-        )}
-        <input
-          type={type}
-          className={cn(
-            // Layout
-            'min-w-0 flex-1 border-none bg-transparent outline-none',
-            // Typography
-            'text-h4',
-            // Colors
-            'text-ods-text-primary placeholder:text-ods-text-secondary',
-            // File input adjustments
-            'file:border-0 file:bg-transparent',
-            // Disabled
-            'disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border',
-            // Touch
-            'touch-manipulation',
-            // Autofill override
-            '[&:-webkit-autofill]:[-webkit-box-shadow:0_0_0_9999px_transparent_inset] [&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-text-primary)] [&:-webkit-autofill]:[caret-color:var(--color-text-primary)] [&:-webkit-autofill]:[transition:background-color_9999s_ease-in-out_0s]',
-          )}
-          ref={ref}
-          {...props}
-        />
-        {loading && <Loader2 className="size-4 flex-shrink-0 animate-spin text-ods-text-secondary md:size-6" />}
-        {!loading && endAdornment && (
-          <span className="flex-shrink-0 text-ods-text-secondary transition-colors duration-200 text-h6 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6">
-            {endAdornment}
-          </span>
-        )}
-      </label>
+        ref={ref}
+        {...props}
+      />
     );
-
-    return (
-      <FieldWrapper label={label} labelVariant={labelVariant} error={error} errorVariant={errorVariant}>
-        {content}
+    return label ? (
+      <FieldWrapper
+        label={label}
+        labelVariant={labelVariant}
+        error={error}
+        errorVariant={errorVariant}
+        errorSlot={errorSlot}
+      >
+        {rangeInput}
       </FieldWrapper>
+    ) : (
+      rangeInput
     );
-  },
-);
+  }
+
+  const content = (
+    <label
+      data-invalid={isInvalid || undefined}
+      className={cn(
+        // Layout & spacing
+        'flex h-11 w-full cursor-text items-center gap-2 rounded-[6px] border px-3 md:h-12',
+        // Focus-within states
+        'has-[:focus-visible]:outline-none',
+        'group',
+        // Animations & touch UX
+        'transition-colors duration-200',
+        // Theme palette
+        'border-ods-border bg-ods-card has-[:focus]:border-ods-accent',
+        // Hover & active (not disabled)
+        !props.disabled &&
+          'hover:border-ods-border-hover hover:bg-ods-bg-hover active:border-ods-border-active active:bg-ods-bg-active',
+        // Disabled. The adornments (and any icon inside them) carry their own
+        // `text-ods-text-secondary`, so grey them from here — a disabled field
+        // must read as one flat colour, not grey text next to a live icon.
+        // Scoped to the DIRECT span children (the two adornment wrappers): a
+        // descendant rule would also repaint whatever the caller renders INSIDE
+        // an adornment, which is passed verbatim precisely so it can own its
+        // colour (a `Tag` there went invisible against its own fill).
+        props.disabled && '!cursor-not-allowed bg-ods-bg',
+        'has-[:disabled]:[&>span]:text-ods-text-disabled has-[:disabled]:[&_svg]:text-ods-text-disabled',
+        // Invalid
+        isInvalid && invalidBorderClasses[variantIsInvalid ? errorVariant : 'error'],
+        className,
+      )}
+    >
+      {startAdornment && (
+        <span className="flex-shrink-0 text-ods-text-secondary transition-colors duration-200 text-h6 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6">
+          {startAdornment}
+        </span>
+      )}
+      <input
+        type={type}
+        className={cn(
+          // Layout
+          'min-w-0 flex-1 border-none bg-transparent outline-none',
+          // Typography
+          'text-h4',
+          // Colors
+          'text-ods-text-primary placeholder:text-ods-text-secondary',
+          // File input adjustments
+          'file:border-0 file:bg-transparent',
+          // Disabled
+          'disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border',
+          // Touch
+          'touch-manipulation',
+          // Autofill override
+          '[&:-webkit-autofill]:[-webkit-box-shadow:0_0_0_9999px_transparent_inset] [&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-text-primary)] [&:-webkit-autofill]:[caret-color:var(--color-text-primary)] [&:-webkit-autofill]:[transition:background-color_9999s_ease-in-out_0s]',
+        )}
+        ref={ref}
+        {...props}
+      />
+      {loading && <Loader2 className="size-4 flex-shrink-0 animate-spin text-ods-text-secondary md:size-6" />}
+      {!loading && endAdornment && (
+        <span className="flex-shrink-0 text-ods-text-secondary transition-colors duration-200 text-h6 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6">
+          {endAdornment}
+        </span>
+      )}
+    </label>
+  );
+
+  return (
+    <FieldWrapper
+      label={label}
+      labelVariant={labelVariant}
+      error={error}
+      errorVariant={errorVariant}
+      errorSlot={errorSlot}
+    >
+      {content}
+    </FieldWrapper>
+  );
+});
 Input.displayName = 'Input';
 
 export { Input };

package/src/components/ui/select.tsx

@@ -23,7 +23,10 @@ const SelectTrigger = forwardRef<
     labelVariant?: 'default' | 'large';
     error?: string;
   }
->(({ className, children, invalid, label, labelVariant, error, ...props }, ref) => {
+>((allProps, ref) => {
+  const { className, children, invalid, label, labelVariant, error, ...props } = allProps;
+  // Wired for a message even while `error` is undefined — see `FieldWrapper.errorSlot`.
+  const errorSlot = 'error' in allProps;
   const isInvalid = invalid || !!error;
 
   const trigger = (
@@ -73,7 +76,7 @@ const SelectTrigger = forwardRef<
   );
 
   return (
-    <FieldWrapper label={label} labelVariant={labelVariant} error={error}>
+    <FieldWrapper label={label} labelVariant={labelVariant} error={error} errorSlot={errorSlot}>
       {trigger}
     </FieldWrapper>
   );