@astryxdesign/core 0.1.8 → 0.1.9-canary.02ef052

package/src/DateInput/DateInput.tsx

@@ -25,7 +25,6 @@ import {
   useTransition,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import type {IconName} from '../Icon';
 import {
   colorVars,
   sizeVars,
@@ -37,11 +36,11 @@ import {
 import {
   Field,
   type InputStatus,
-  type InputStatusType,
   inputWrapperStyles,
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
   inputStatusFocusWithinStyles,
+  type FieldStatusVariant,
 } from '../Field';
 import {Icon} from '../Icon';
 import {VisuallyHidden} from '../VisuallyHidden';
@@ -51,15 +50,16 @@ import {useSize} from '../SizeContext/SizeContext';
 import {Spinner} from '../Spinner';
 import {Calendar, type ISODateString, type CalendarHandle} from '../Calendar';
 import {useCalendarConstraints} from '../Calendar/hooks';
+import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {usePopover} from '../Popover';
 import {useTooltip} from '../Tooltip';
 import {getInputARIA, parseDateInput} from '../utils';
 import {
   plainDateFromISO,
   plainDateToISO,
-  plainDateFormat,
-  DATE_FORMAT_LONG,
+  formatSharedDate,
 } from '../utils/plainDate';
+import type {TimestampFormat} from '../Timestamp';
 
 const styles = stylex.create({
   iconButton: {
@@ -127,6 +127,25 @@ const sizeStyles = stylex.create({
 
 export type DateInputSize = keyof typeof sizeStyles;
 
+/**
+ * Named display formats for a committed date value. These are the date-only
+ * members of Timestamp's `format` vocabulary — reused verbatim (via
+ * `Extract`) so the same literal renders the same date shape in both
+ * `Timestamp` and `DateInput`:
+ * - `'date'`: locale short-month date, e.g. "Mar 21, 2026"
+ * - `'date_long'`: locale long-month date, e.g. "March 21, 2026" (the default)
+ * - `'date_weekday'`: short weekday + date, e.g. "Wed, Mar 21, 2026"
+ * - `'system_date'`: ISO 8601 calendar date, e.g. "2026-03-21"
+ *
+ * Because `DateInputFormat` is `Extract`ed from `TimestampFormat`, the two
+ * types stay in compile-time lockstep: renaming or removing one of these
+ * members from `TimestampFormat` breaks this type at build time.
+ */
+export type DateInputFormat = Extract<
+  TimestampFormat,
+  'date' | 'date_long' | 'date_weekday' | 'system_date'
+>;
+
 // Re-export shared types for convenience
 
 export type {
@@ -259,6 +278,14 @@ export interface DateInputProps extends Omit<
    * If message is provided, displays below the input.
    */
   status?: InputStatus;
+  /**
+   * How the status message is placed relative to the input.
+   * - 'attached': message overlaps directly below the input (bordered treatment)
+   * - 'detached': message floats below as a separate element with spacing
+   * - 'tooltip': no message box; the status icon becomes a focusable info-tip button that reveals the message on hover, keyboard focus, or tap
+   * @default 'attached'
+   */
+  statusVariant?: FieldStatusVariant;
 
   /**
    * Width of the field. Numbers are treated as pixels, strings are used as-is
@@ -283,6 +310,37 @@ export interface DateInputProps extends Omit<
    * @default 1
    */
   numberOfMonths?: 1 | 2;
+
+  /**
+   * How the committed date value is displayed in the text field. Accepts a
+   * named format reused from `Timestamp`'s `format` vocabulary (so the same
+   * literal renders the same date shape in both components) or a function that
+   * maps the ISO value to a custom display string.
+   *
+   * - `'date_long'` (default): long-month date, e.g. "March 21, 2026"
+   * - `'date'`: short-month date, e.g. "Mar 21, 2026"
+   * - `'date_weekday'`: short weekday + date, e.g. "Wed, Mar 21, 2026"
+   * - `'system_date'`: ISO 8601 calendar date, e.g. "2026-03-21"
+   * - `(value: ISODateString) => string`: fully custom display string
+   *
+   * Formatting applies only to the committed value — never to text the user is
+   * actively typing. A custom function's output that `parseDateInput` cannot
+   * read back can't be re-committed after an edit; external `value` changes
+   * always recompute the display from the ISO value.
+   *
+   * @default 'date_long'
+   * @example
+   * ```
+   * <DateInput label="Ship date" value={date} onChange={setDate} format="date" />
+   * <DateInput
+   *   label="Ship date"
+   *   value={date}
+   *   onChange={setDate}
+   *   format={iso => new Date(iso + 'T00:00').toDateString()}
+   * />
+   * ```
+   */
+  format?: DateInputFormat | ((value: ISODateString) => string);
 }
 
 /**
@@ -315,9 +373,11 @@ export function DateInput({
   placeholder: placeholderFromProps,
   size: sizeProp,
   status,
+  statusVariant = 'attached',
   labelTooltip,
   hasClear = false,
   numberOfMonths = 1,
+  format = 'date_long',
   width,
   xstyle,
   className,
@@ -359,30 +419,24 @@ export function DateInput({
     isEnabled: showsDisabledMessage,
   });
 
-  // Status icon mapping
-  const statusIconMap: Record<InputStatusType, IconName> = {
-    warning: 'warning',
-    error: 'error',
-    success: 'success',
-  };
-
-  const statusIconColorMap: Record<
-    InputStatusType,
-    'warning' | 'error' | 'success'
-  > = {
-    warning: 'warning',
-    error: 'error',
-    success: 'success',
-  };
-
   // Constraint checking for text input validation (reuses calendar logic)
   const {isDateDisabled} = useCalendarConstraints({min, max, dateConstraints});
 
+  const {statusIcon, describedBy: statusTooltipDescribedBy} =
+    useInputStatusIcon({
+      status,
+      statusVariant,
+      isInGroup: !!inputGroup,
+    });
+
   const {ariaLabelledBy, ariaDescribedBy} = getInputARIA(
     inputLabelID,
     [
       description ? descriptionID : null,
-      status?.message ? statusMessageID : null,
+      statusVariant !== 'tooltip' && status?.message ? statusMessageID : null,
+      // The tooltip variant renders no message box; describe the input by the
+      // tooltip's content instead so the status is still announced.
+      statusTooltipDescribedBy,
       showsDisabledMessage ? disabledMessageTooltip.describedBy : null,
     ],
     inputGroup,
@@ -404,12 +458,26 @@ export function DateInput({
     }
   }
 
+  // Format a committed ISO value for display. The default `date_long` renders
+  // the long-month shape (byte-identical to the historical hardcoded
+  // DATE_FORMAT_LONG rendering, so still non-breaking); a function is called
+  // with the ISO value; every other named member reuses Timestamp's shared
+  // date mapping. Applies ONLY to the committed value, never to in-progress
+  // typed input.
+  const formatCommittedValue = useCallback(
+    (iso: ISODateString): string =>
+      typeof format === 'function'
+        ? format(iso)
+        : formatSharedDate(plainDateFromISO(iso), format),
+    [format],
+  );
+
   // Display value: pending input if typing, otherwise formatted value
   const displayValue =
     pendingInput !== null
       ? pendingInput
       : optimisticValue && /^\d{4}-\d{2}-\d{2}$/.test(optimisticValue)
-        ? plainDateFormat(plainDateFromISO(optimisticValue), DATE_FORMAT_LONG)
+        ? formatCommittedValue(optimisticValue)
         : '';
 
   // Check if current input is valid (for styling purposes)
@@ -573,7 +641,9 @@ export function DateInput({
           sizeStyles[size],
           isEffectivelyDisabled && inputWrapperStyles.disabled,
           status && inputStatusBorderStyles[status.type],
-          status && inputStatusHoverShadowStyles[status.type],
+          status &&
+            !isEffectivelyDisabled &&
+            inputStatusHoverShadowStyles[status.type],
           status && inputStatusFocusWithinStyles[status.type],
           inputGroup && groupStyles.inGroup,
           xstyle,
@@ -595,7 +665,20 @@ export function DateInput({
           styles.iconButton,
           isEffectivelyDisabled && styles.iconButtonDisabled,
         )}>
-        <Icon icon="calendar" size="sm" color="secondary" />
+        <Icon
+          icon="calendar"
+          size="sm"
+          color="secondary"
+          // Stable theme target on the toggle glyph itself, so a theme can
+          // restyle just this icon (color, size, hover) — and each open/closed
+          // state — via `defineTheme`. Same-element rules in @layer astryx-theme
+          // win over the icon's own base color/size, which a button-level target
+          // could not reach. Reflects the popover's open/closed state as a
+          // `data-state` attribute.
+          {...themeProps('date-input-toggle-icon', {
+            state: popover.isOpen ? 'expanded' : 'collapsed',
+          })}
+        />
       </button>
       <input
         ref={mergeRefs(ref, inputRef)}
@@ -647,17 +730,20 @@ export function DateInput({
           onClick={handleClear}
           aria-label={t('@astryx.dateInput.clear', {label})}
           {...stylex.props(styles.iconButton)}>
-          <Icon icon="close" size="sm" color="secondary" />
+          <Icon
+            icon="close"
+            size="sm"
+            color="secondary"
+            // Stable theme target on the clear glyph itself, so a theme can
+            // restyle just this icon (color, size, hover) via `defineTheme`.
+            // Same-element rules in @layer astryx-theme win over the icon's own
+            // base color/size, which a button-level target could not reach.
+            {...themeProps('date-input-clear-icon')}
+          />
         </button>
       )}
       {isBusy && <Spinner size="sm" />}
-      {status && !inputGroup && (
-        <Icon
-          icon={statusIconMap[status.type]}
-          size="md"
-          color={statusIconColorMap[status.type]}
-        />
-      )}
+      {statusIcon}
       {popover.render(
         <Calendar
           handleRef={calendarRef}
@@ -699,6 +785,7 @@ export function DateInput({
             }
           : undefined
       }
+      statusVariant={statusVariant}
       labelTooltip={labelTooltip}
       width={width}>
       {inputWrapper}

package/src/DateInput/index.ts

@@ -13,6 +13,7 @@ export {DateInput} from './DateInput';
 export type {
   DateInputProps,
   DateInputSize,
+  DateInputFormat,
   DateInputStatus,
   DateInputStatusType,
 } from './DateInput';

package/src/DateRangeInput/DateRangeInput.doc.mjs

@@ -127,6 +127,13 @@ export const docs = {
       type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description: 'Status indicator for error, warning, or success states.',
     },
+    {
+      name: 'statusVariant',
+      type: "'attached' | 'detached' | 'tooltip'",
+      description:
+        'How the status message is placed relative to the input. attached overlaps directly below the input (bordered treatment); detached floats below as a separate element with spacing; tooltip hides the message box and surfaces it in a tooltip on the status icon.',
+      default: "'attached'",
+    },
     {
       name: 'labelTooltip',
       type: 'string',
@@ -138,6 +145,12 @@ export const docs = {
       description: 'Number of months in the calendar.',
       default: '2',
     },
+    {
+      name: 'width',
+      type: 'SizeValue',
+      description:
+        'Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.',
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
@@ -147,6 +160,8 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-date-range-input', visualProps: ['size', 'status']},
+      {className: 'astryx-date-range-input-toggle-icon', states: ['state']},
+      {className: 'astryx-date-range-input-clear-icon'},
     ],
   },
   usage: {
@@ -296,6 +311,7 @@ export const docsDense = {
     placeholder: 'placeholder when empty',
     size: 'trigger size',
     status: 'error/warning/success status',
+    statusVariant: 'How status message is placed: attached overlaps below input; detached floats below w/ spacing; tooltip hides the box and shows it on the status icon.',
     labelTooltip: 'tooltip via info icon at label end',
     numberOfMonths: 'months in calendar (default 2)',
     changeAction:

package/src/DateRangeInput/DateRangeInput.test.tsx

@@ -19,6 +19,9 @@ import userEvent from '@testing-library/user-event';
 import {getButton, queryButton} from '../__tests__/fastRoleQueries';
 import {DateRangeInput} from './DateRangeInput';
 import type {DateRange} from './DateRangeInput';
+import {Icon} from '../Icon';
+import {defineTheme} from '../theme/defineTheme';
+import {generateThemeCSSFlat} from '../theme/generateThemeRules';
 
 describe('DateRangeInput', () => {
   it('renders with label', () => {
@@ -471,3 +474,140 @@ describe('DateRangeInput', () => {
     });
   });
 });
+
+describe('DateRangeInput statusVariant forwarding', () => {
+  it('defaults to attached (status renders with data-variant="attached")', () => {
+    const {container} = render(
+      <DateRangeInput
+        label="Range"
+        value={null}
+        onChange={() => {}}
+        status={{type: 'error', message: 'Required'}}
+      />,
+    );
+    expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
+      'data-variant',
+      'attached',
+    );
+  });
+
+  it('forwards statusVariant="detached" to the underlying Field status', () => {
+    const {container} = render(
+      <DateRangeInput
+        label="Range"
+        value={null}
+        onChange={() => {}}
+        status={{type: 'error', message: 'Required'}}
+        statusVariant="detached"
+      />,
+    );
+    expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
+      'data-variant',
+      'detached',
+    );
+  });
+});
+
+describe('DateRangeInput icon theme targets', () => {
+  const RANGE: DateRange = {start: '2026-03-15', end: '2026-03-22'};
+
+  // Resolve a glyph span (the astryx-icon element) inside a given button,
+  // independent of the theme target class.
+  const iconIn = (button: HTMLElement): HTMLElement => {
+    const icon = button.querySelector('.astryx-icon');
+    if (icon == null) {
+      throw new Error('icon not found');
+    }
+    return icon as HTMLElement;
+  };
+
+  it('renders astryx-date-range-input-clear-icon on the clear glyph', () => {
+    render(
+      <DateRangeInput
+        label="Range"
+        value={RANGE}
+        onChange={() => {}}
+        hasClear
+      />,
+    );
+    // The stable target lands on the icon element itself (not the button), so a
+    // theme can restyle just this glyph (color, size, hover) via defineTheme —
+    // a button-level target could not reach the icon's own color/size.
+    const icon = iconIn(getButton('Clear Range'));
+    expect(icon).toHaveClass('astryx-date-range-input-clear-icon');
+    expect(icon).toHaveClass('astryx-icon');
+  });
+
+  it('renders astryx-date-range-input-toggle-icon on the calendar-toggle glyph, reflecting state', () => {
+    render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
+    const icon = iconIn(getButton('Open calendar'));
+    expect(icon).toHaveClass('astryx-date-range-input-toggle-icon');
+    expect(icon).toHaveClass('astryx-icon');
+    // Closed by default → data-state="collapsed".
+    expect(icon).toHaveAttribute('data-state', 'collapsed');
+  });
+
+  it('renders the default icons (secondary color, sm size) byte-identically', () => {
+    // Pixel-identical default guard: the glyphs must carry the exact same
+    // StyleX color/size classes as a standalone secondary/sm icon. The added
+    // target class is purely additive — it changes nothing until a theme
+    // targets it.
+    render(
+      <DateRangeInput
+        label="Range"
+        value={RANGE}
+        onChange={() => {}}
+        hasClear
+      />,
+    );
+    const clearIcon = iconIn(getButton('Clear Range'));
+
+    const {container: refContainer} = render(
+      <Icon icon="close" size="sm" color="secondary" />,
+    );
+    const refIcon = refContainer.querySelector('.astryx-icon') as HTMLElement;
+
+    const styleClasses = (el: HTMLElement) =>
+      el.className
+        .split(' ')
+        .filter(
+          c =>
+            c !== 'astryx-date-range-input-clear-icon' &&
+            c !== 'astryx-date-range-input-toggle-icon',
+        )
+        .sort();
+
+    expect(styleClasses(clearIcon)).toEqual(styleClasses(refIcon));
+  });
+
+  it('exposes the icon targets so a theme reaches icon color, size, and hover', () => {
+    // jsdom cannot resolve the @layer cascade, so the DOM-class assertions
+    // above (targets land on the icon elements) plus this generation assertion
+    // (the theme emits same-element icon rules in @layer astryx-theme) together
+    // prove the seam: a same-element theme rule wins over the icon's own
+    // base-layer color/size.
+    const theme = defineTheme({
+      name: 'date-range-input-icon-test',
+      components: {
+        'date-range-input-clear-icon': {
+          base: {
+            width: '12px',
+            height: '12px',
+            fontSize: '12px',
+            color: 'var(--color-icon-secondary)',
+            ':hover': {color: 'var(--color-icon-primary)'},
+          },
+        },
+        'date-range-input-toggle-icon': {
+          base: {width: '14px', height: '14px', fontSize: '14px'},
+        },
+      },
+    });
+    const css = generateThemeCSSFlat(theme);
+    expect(css).toContain('.astryx-date-range-input-clear-icon');
+    expect(css).toContain('.astryx-date-range-input-toggle-icon');
+    expect(css).toContain(':hover');
+    expect(css).toContain('12px');
+    expect(css).toContain('14px');
+  });
+});

package/src/DateRangeInput/DateRangeInput.tsx

@@ -25,7 +25,6 @@ import {
   DATE_FORMAT_SHORT,
   DATE_FORMAT_SHORT_WITH_YEAR,
 } from '../utils/plainDate';
-import type {IconName} from '../Icon';
 import {
   colorVars,
   sizeVars,
@@ -38,11 +37,11 @@ import {
 import {
   Field,
   type InputStatus,
-  type InputStatusType,
   inputWrapperStyles,
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
   inputStatusFocusWithinStyles,
+  type FieldStatusVariant,
 } from '../Field';
 import {Icon} from '../Icon';
 import {Spinner} from '../Spinner';
@@ -53,6 +52,7 @@ import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {useSize} from '../SizeContext/SizeContext';
+import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
 
@@ -127,9 +127,9 @@ const styles = stylex.create({
     flexDirection: 'column',
     gap: spacingVars['--spacing-1'],
     padding: spacingVars['--spacing-3'],
-    borderRightWidth: borderVars['--border-width'],
-    borderRightStyle: 'solid',
-    borderRightColor: colorVars['--color-border-emphasized'],
+    borderInlineEndWidth: borderVars['--border-width'],
+    borderInlineEndStyle: 'solid',
+    borderInlineEndColor: colorVars['--color-border-emphasized'],
     minWidth: 140,
   },
   presetButton: {
@@ -330,6 +330,14 @@ export interface DateRangeInputProps extends Omit<
    * Status indicator for the input.
    */
   status?: InputStatus;
+  /**
+   * How the status message is placed relative to the input.
+   * - 'attached': message overlaps directly below the input (bordered treatment)
+   * - 'detached': message floats below as a separate element with spacing
+   * - 'tooltip': no message box; the status icon becomes a focusable info-tip button that reveals the message on hover, keyboard focus, or tap
+   * @default 'attached'
+   */
+  statusVariant?: FieldStatusVariant;
 
   /**
    * Width of the field. Numbers are treated as pixels, strings are used as-is
@@ -385,6 +393,7 @@ export function DateRangeInput({
   placeholder: placeholderFromProps,
   size: sizeProp,
   status,
+  statusVariant = 'attached',
   labelTooltip,
   numberOfMonths = 2,
   width,
@@ -422,25 +431,19 @@ export function DateRangeInput({
     isEnabled: showsDisabledMessage,
   });
 
-  const statusIconMap: Record<InputStatusType, IconName> = {
-    warning: 'warning',
-    error: 'error',
-    success: 'success',
-  };
-
-  const statusIconColorMap: Record<
-    InputStatusType,
-    'warning' | 'error' | 'success'
-  > = {
-    warning: 'warning',
-    error: 'error',
-    success: 'success',
-  };
+  const {statusIcon, describedBy: statusTooltipDescribedBy} =
+    useInputStatusIcon({
+      status,
+      statusVariant,
+    });
 
   const ariaDescribedBy =
     [
       description ? descriptionID : null,
-      status?.message ? statusMessageID : null,
+      statusVariant !== 'tooltip' && status?.message ? statusMessageID : null,
+      // The tooltip variant renders no message box; describe the input by the
+      // tooltip's content instead so the status is still announced.
+      statusTooltipDescribedBy,
       showsDisabledMessage ? disabledMessageTooltip.describedBy : null,
     ]
       .filter(Boolean)
@@ -529,6 +532,7 @@ export function DateRangeInput({
             }
           : undefined
       }
+      statusVariant={statusVariant}
       labelTooltip={labelTooltip}
       width={width}>
       <div
@@ -550,7 +554,9 @@ export function DateRangeInput({
             sizeStyles[size],
             isEffectivelyDisabled && inputWrapperStyles.disabled,
             status && inputStatusBorderStyles[status.type],
-            status && inputStatusHoverShadowStyles[status.type],
+            status &&
+              !isEffectivelyDisabled &&
+              inputStatusHoverShadowStyles[status.type],
             status && inputStatusFocusWithinStyles[status.type],
             xstyle,
           ),
@@ -571,7 +577,14 @@ export function DateRangeInput({
             styles.iconButton,
             isEffectivelyDisabled && styles.iconButtonDisabled,
           )}>
-          <Icon icon="calendar" size="sm" color="secondary" />
+          <Icon
+            icon="calendar"
+            size="sm"
+            color="secondary"
+            {...themeProps('date-range-input-toggle-icon', {
+              state: popover.isOpen ? 'expanded' : 'collapsed',
+            })}
+          />
         </button>
         <button
           ref={ref}
@@ -604,17 +617,16 @@ export function DateRangeInput({
             onClick={handleClear}
             aria-label={t('@astryx.dateInput.clear', {label})}
             {...stylex.props(styles.iconButton)}>
-            <Icon icon="close" size="sm" color="secondary" />
+            <Icon
+              icon="close"
+              size="sm"
+              color="secondary"
+              {...themeProps('date-range-input-clear-icon')}
+            />
           </button>
         )}
         {isBusy && <Spinner size="sm" />}
-        {status && (
-          <Icon
-            icon={statusIconMap[status.type]}
-            size="md"
-            color={statusIconColorMap[status.type]}
-          />
-        )}
+        {statusIcon}
       </div>
       {popover.render(
         <div {...stylex.props(styles.popoverLayout)}>

package/src/DateTimeInput/DateTimeInput.doc.mjs

@@ -173,6 +173,12 @@ export const docs = {
       description: 'Number of months displayed simultaneously in the calendar.',
       default: '1',
     },
+    {
+      name: 'width',
+      type: 'SizeValue',
+      description:
+        'Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.',
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
@@ -183,6 +189,14 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-date-time-input', visualProps: ['size', 'status']},
+      {
+        className: 'astryx-date-time-input-date-segment',
+        visualProps: ['size', 'status'],
+      },
+      {
+        className: 'astryx-date-time-input-time-segment',
+        visualProps: ['size', 'status'],
+      },
     ],
   },
   usage: {
@@ -469,11 +483,18 @@ export const docsZh = {
       description:
         '用于布局自定义的 StyleX 样式。必须是 stylex.create() 的值。',
     },
-
   ],
   theming: {
     targets: [
       {className: 'astryx-date-time-input', visualProps: ['size', 'status']},
+      {
+        className: 'astryx-date-time-input-date-segment',
+        visualProps: ['size', 'status'],
+      },
+      {
+        className: 'astryx-date-time-input-time-segment',
+        visualProps: ['size', 'status'],
+      },
     ],
   },
 };