@astryxdesign/core 0.4.4 → 0.4.5-canary.0472ec1

package/src/ClickableCard/ClickableCard.tsx

@@ -78,7 +78,7 @@ const styles = stylex.create({
   },
   hoverOnPointer: {
     '@media (hover: hover)': {
-      ':hover::after': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))::after': {
         backgroundColor: colorVars['--color-overlay-hover'],
       },
     },
@@ -110,7 +110,7 @@ const styles = stylex.create({
   // @media (hover: hover) so touch devices don't get a stuck hover state.
   borderedHoverOnPointer: {
     '@media (hover: hover)': {
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         borderColor: colorVars['--color-border-emphasized'],
       },
     },

package/src/CommandPalette/CommandPaletteItem.tsx

@@ -49,7 +49,7 @@ const styles = stylex.create({
     userSelect: 'none',
   },
   itemHover: {
-    ':hover': {
+    ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
       [HOVER_HOVER]: {
         backgroundColor: colorVars['--color-overlay-hover'],
       },

package/src/ComplexSelector/ComplexSelector.doc.mjs

@@ -215,6 +215,16 @@ export const docsDense = {
     description:
       'Use when a selection needs richer custom content than a Selector row. One component: it owns field, trigger, popover, focus restore, and changeAction; the render prop owns the selector-specific accessible structure.',
     bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Use variant="ghost" with a startIcon for a toolbar trigger. Use alignment="end" when a wide surface should align its end edge to the trigger.',
+      },
+      {
+        guidance: true,
+        description:
+          'For staged editors, keep draft state in the composed content and call the provided onChange helper only from Apply. Cancel or dismiss without committing.',
+      },
       {
         guidance: true,
         description:

package/src/ComplexSelector/ComplexSelector.tsx

@@ -35,6 +35,7 @@ import {useTranslator} from '../i18n';
 import {layerAnimations} from '../Layer/layerAnimations.stylex';
 import type {LayerAlignment, LayerPlacement} from '../Layer/useLayer';
 import {usePopover} from '../Popover/usePopover';
+import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {
   colorVars,
   durationVars,
@@ -110,16 +111,17 @@ const styles = stylex.create({
     backgroundColor: 'transparent',
     backgroundImage: {
       default: null,
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
       },
       ':active': `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,
     },
     boxShadow: {
       default: 'none',
-      ':hover:not(:focus-within)': {
-        '@media (hover: hover)': 'none',
-      },
+      ':hover:not(:focus-within):where(:not(:disabled,[aria-disabled="true"]))':
+        {
+          '@media (hover: hover)': 'none',
+        },
       ':focus-within': 'none',
     },
     fontWeight: fontWeightVars['--font-weight-medium'],
@@ -344,6 +346,7 @@ export function ComplexSelector<Value>({
   ...props
 }: ComplexSelectorProps<Value>) {
   const t = useTranslator();
+  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   const placeholder = placeholderFromProps ?? t('@astryx.selector.placeholder');
   const effectiveStatusVariant =
     variant === 'ghost' && statusVariant === 'attached'
@@ -497,7 +500,7 @@ export function ComplexSelector<Value>({
           aria-controls={contentId}
           aria-describedby={ariaDescribedBy}
           aria-labelledby={labelId}
-          aria-required={isRequired ? 'true' : undefined}
+          aria-required={isEffectivelyRequired ? 'true' : undefined}
           aria-invalid={status?.type === 'error' ? 'true' : undefined}
           aria-busy={isBusy || undefined}
           disabled={isDisabled}

package/src/DateInput/DateInput.test.tsx

@@ -917,6 +917,22 @@ describe('DateInput', () => {
       expect(screen.getByDisplayValue('Jan 25, 2026')).toBeInTheDocument();
     });
 
+    it('follows the InternationalizationProvider locale (#5074)', () => {
+      render(
+        <InternationalizationProvider locale="es-ES">
+          <DateInput
+            label="Date"
+            value="2026-01-25"
+            onChange={() => {}}
+            format="date_long"
+          />
+        </InternationalizationProvider>,
+      );
+      expect(
+        screen.getByDisplayValue('25 de enero de 2026'),
+      ).toBeInTheDocument();
+    });
+
     it('renders the ISO shape for format="system_date"', () => {
       render(
         <DateInput
@@ -1186,7 +1202,7 @@ describe('DateInput clear icon theme target', () => {
     expect(css).toContain('.astryx-date-input-clear-icon {');
     expect(css).toContain('width: 12px');
     expect(css).toContain('height: 12px');
-    expect(css).toContain('.astryx-date-input-clear-icon:hover {');
+    expect(css).toContain('.astryx-date-input-clear-icon:hover');
     expect(css).toContain('color: var(--color-icon-primary)');
   });
 });

package/src/DateInput/DateInput.tsx

@@ -17,6 +17,7 @@
  */
 
 import {
+  use,
   useId,
   useState,
   useCallback,
@@ -58,7 +59,10 @@ import {
 } from '../Calendar';
 import {useCalendarConstraints} from '../Calendar/hooks';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
+import {useMediaQuery} from '../hooks/useMediaQuery';
+import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {usePopover} from '../Popover';
+import {TouchDateField} from './TouchDateField';
 import {useTooltip} from '../Tooltip';
 import {getInputARIA, isImeKeyEvent, parseDateInput} from '../utils';
 import {
@@ -160,7 +164,7 @@ import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {stableClassName} from '../naming';
-import {useTranslator} from '../i18n';
+import {useTranslator, InternationalizationContext} from '../i18n';
 
 export interface DateInputProps extends Omit<
   BaseProps,
@@ -356,18 +360,30 @@ export interface DateInputProps extends Omit<
 }
 
 /**
- * A date picker component combining a text input with a calendar popover.
+ * The pointer that decides which surface a `DateInput` renders.
  *
- * @example
- * ```
- * <DateInput
- *   label="Event date"
- *   value={date}
- *   onChange={setDate}
- * />
- * ```
+ * `pointer: coarse` is the *primary* pointing device, which is what makes it
+ * the whole test. A touchscreen laptop reports `fine` (its trackpad) with
+ * `any-pointer: coarse` alongside, so it keeps the typable field — right,
+ * because its keyboard is there. A tablet reports `coarse` and gets the
+ * picker, at any width. There is deliberately no width bound: it would only
+ * re-exclude the tablets, since a narrowed desktop window is still a mouse.
+ *
+ * Deliberately NOT exported. It was, briefly, on the theory that an app might
+ * want to ask the same question and lay out to match — but nothing asked, and
+ * six other core components (CheckboxInput, ChatComposerInput, ...) just
+ * write `@media (pointer: coarse)` inline rather than sharing a constant. An
+ * export is additive later and awkward to withdraw, so it waits for a real
+ * caller.
  */
-export function DateInput({
+const TOUCH_POINTER_QUERY = '(pointer: coarse)';
+
+/**
+ * The pointer-driven field: a text input you can type into, with a calendar
+ * in a popover beside it. `DateInput` renders this whenever the primary
+ * pointer is not a finger — see {@link TOUCH_POINTER_QUERY}.
+ */
+function PointerDateField({
   label,
   isLabelHidden = false,
   description,
@@ -399,6 +415,8 @@ export function DateInput({
   ...rest
 }: DateInputProps) {
   const t = useTranslator();
+  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
+  const {locale} = use(InternationalizationContext);
   const placeholder =
     placeholderFromProps ?? t('@astryx.dateInput.placeholder');
   const size = useSize(sizeProp, 'md');
@@ -481,8 +499,8 @@ export function DateInput({
     (iso: ISODateString): string =>
       typeof format === 'function'
         ? format(iso)
-        : formatSharedDate(plainDateFromISO(iso), format),
-    [format],
+        : formatSharedDate(plainDateFromISO(iso), format, locale),
+    [format, locale],
   );
 
   // Display value: pending input if typing, otherwise formatted value
@@ -497,7 +515,7 @@ export function DateInput({
   const isInputValid =
     pendingInput === null || !pendingInput.trim()
       ? true
-      : parseDateInput(pendingInput) !== null;
+      : parseDateInput(pendingInput, locale) !== null;
 
   const popover = usePopover({
     dialogLabel: t('@astryx.dateInput.dialogLabel'),
@@ -579,7 +597,7 @@ export function DateInput({
       setPendingInput(newValue);
 
       // If the input is valid and passes constraints, update immediately
-      const parsed = parseDateInput(newValue);
+      const parsed = parseDateInput(newValue, locale);
       if (
         parsed &&
         plainDateToISO(parsed) !== value &&
@@ -592,7 +610,7 @@ export function DateInput({
         calendarRef.current?.navigateTo(parsedISO);
       }
     },
-    [value, fireChange, isDateDisabled, isEffectivelyDisabled],
+    [value, fireChange, isDateDisabled, isEffectivelyDisabled, locale],
   );
 
   // Commit pending input (shared by blur and Enter key)
@@ -609,7 +627,7 @@ export function DateInput({
       return;
     }
 
-    const parsed = parseDateInput(pendingInput);
+    const parsed = parseDateInput(pendingInput, locale);
     if (parsed && !isDateDisabled(parsed)) {
       const parsedISO = plainDateToISO(parsed);
       if (parsedISO !== value) {
@@ -617,7 +635,7 @@ export function DateInput({
       }
     }
     setPendingInput(null);
-  }, [pendingInput, value, fireChange, isDateDisabled]);
+  }, [pendingInput, value, fireChange, isDateDisabled, locale]);
 
   // Handle blur - validate, check constraints, and clear pending input
   const handleBlur = useCallback(() => {
@@ -737,7 +755,7 @@ export function DateInput({
         readOnly={showsDisabledMessage || undefined}
         aria-labelledby={ariaLabelledBy}
         aria-describedby={ariaDescribedBy}
-        aria-required={isRequired === true ? 'true' : undefined}
+        aria-required={isEffectivelyRequired ? 'true' : undefined}
         aria-invalid={
           status?.type === 'error' || !isInputValid ? 'true' : undefined
         }
@@ -820,4 +838,57 @@ export function DateInput({
   );
 }
 
+PointerDateField.displayName = 'PointerDateField';
+
+/**
+ * A date picker that fits the pointer it is being used with.
+ *
+ * With a mouse or trackpad this is a text input you can type into, with a
+ * calendar in a popover — unchanged, and still the surface every existing
+ * consumer gets. With a finger it is a picker built for one: a bottom sheet
+ * holding one month per screen, swiped sideways, with month and year wheels
+ * behind the header title for the far jumps swiping is bad at.
+ *
+ * The props are identical either way — this is one component with two
+ * surfaces, not two components — so nothing at the call site changes, and a
+ * date typed on a laptop and a date thumbed on a phone are the same value.
+ *
+ * ## Why a runtime switch and not CSS
+ *
+ * The two surfaces are structurally different — a popover anchored to a text
+ * field versus a full-width sheet holding a scroller — so "render both, hide
+ * one" would double the DOM, double the tab stops, and mount two calendars.
+ * The condition is not layout either: it is *which interaction is faster*,
+ * and that depends on the pointer, which CSS cannot hand to JS.
+ *
+ * They are two components rather than one with a branch inside because the
+ * hook lists differ; keeping them separate is what lets each own its own.
+ *
+ * ## Hydration
+ *
+ * `useMediaQuery` reports false during SSR, so server HTML is always the
+ * pointer field and the swap happens after hydration. That is deliberately
+ * unobservable: both surfaces render the SAME closed field — a bordered input
+ * with a calendar icon and the formatted date — and differ only in what
+ * opens. Nothing moves; the field just starts opening a sheet.
+ *
+ * @example
+ * ```
+ * <DateInput
+ *   label="Event date"
+ *   value={date}
+ *   onChange={setDate}
+ * />
+ * ```
+ */
+export function DateInput(props: DateInputProps) {
+  const isTouch = useMediaQuery(TOUCH_POINTER_QUERY);
+
+  return isTouch ? (
+    <TouchDateField {...props} />
+  ) : (
+    <PointerDateField {...props} />
+  );
+}
+
 DateInput.displayName = 'DateInput';