@astryxdesign/core 0.6.1 → 0.6.2-canary.023c3e4

package/src/DateRangeInput/DateRangeInput.test.tsx

@@ -370,10 +370,15 @@ describe('DateRangeInput', () => {
       expect(
         screen.queryByRole('listbox', {hidden: true}),
       ).not.toBeInTheDocument();
-      expect(
-        screen.getByRole('group', {name: 'Preset date ranges', hidden: true}),
-      ).toBeInTheDocument();
-      expect(getButton('Last 7 days')).toBeInTheDocument();
+      const group = screen.getByRole('group', {
+        name: 'Preset date ranges',
+        hidden: true,
+      });
+      expect(group).toBeInTheDocument();
+      expect(group).toHaveClass('astryx-date-range-input-presets');
+      expect(getButton('Last 7 days')).toHaveClass(
+        'astryx-date-range-input-preset',
+      );
     });
 
     it('marks the applied preset with aria-current, not aria-selected', () => {
@@ -386,11 +391,99 @@ describe('DateRangeInput', () => {
         />,
       );
       const active = getButton('Last 7 days');
+      expect(active).toHaveClass('astryx-date-range-input-preset');
+      expect(active).toHaveAttribute('data-selected', 'selected');
       expect(active).toHaveAttribute('aria-current', 'true');
       expect(active).not.toHaveAttribute('aria-selected');
       const inactive = getButton('This month');
+      expect(inactive).toHaveClass('astryx-date-range-input-preset');
+      expect(inactive).not.toHaveAttribute('data-selected');
+      expect(inactive).not.toHaveAttribute('data-disabled');
       expect(inactive).not.toHaveAttribute('aria-current');
     });
+
+    it('disables a preset when its start is before min', () => {
+      const handleChange = vi.fn();
+      render(
+        <DateRangeInput
+          label="Range"
+          value={null}
+          onChange={handleChange}
+          min="2026-03-02"
+          presets={[presets[0]]}
+        />,
+      );
+
+      const preset = getButton('Last 7 days');
+      expect(preset).toBeDisabled();
+      fireEvent.click(preset);
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it('disables a preset when its end is after max', () => {
+      const handleChange = vi.fn();
+      render(
+        <DateRangeInput
+          label="Range"
+          value={null}
+          onChange={handleChange}
+          max="2026-03-06"
+          presets={[presets[0]]}
+        />,
+      );
+
+      const preset = getButton('Last 7 days');
+      expect(preset).toBeDisabled();
+      fireEvent.click(preset);
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it('disables a preset when either endpoint fails dateConstraints', () => {
+      const handleChange = vi.fn();
+      render(
+        <DateRangeInput
+          label="Range"
+          value={null}
+          onChange={handleChange}
+          dateConstraints={[date => date.getDate() !== 7]}
+          presets={[presets[0]]}
+        />,
+      );
+
+      const preset = getButton('Last 7 days');
+      expect(preset).toBeDisabled();
+      fireEvent.click(preset);
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it('commits an enabled preset using its already-resolved range', () => {
+      const range = {start: '2026-03-01', end: '2026-03-07'} as const;
+      const getRange = vi.fn(() => range);
+      let getRangeCallsAtChange = 0;
+      const handleChange = vi.fn(() => {
+        getRangeCallsAtChange = getRange.mock.calls.length;
+      });
+      render(
+        <DateRangeInput
+          label="Range"
+          value={null}
+          onChange={handleChange}
+          min="2026-03-01"
+          max="2026-03-31"
+          dateConstraints={[date => date.getDate() !== 13]}
+          minRangeSpan={2}
+          maxRangeSpan={7}
+          presets={[{label: 'Allowed range', getRange}]}
+        />,
+      );
+
+      const getRangeCallsBeforeClick = getRange.mock.calls.length;
+      const preset = getButton('Allowed range');
+      expect(preset).not.toBeDisabled();
+      fireEvent.click(preset);
+      expect(handleChange).toHaveBeenCalledWith(range);
+      expect(getRangeCallsAtChange).toBe(getRangeCallsBeforeClick);
+    });
   });
   describe('disabledMessage', () => {
     // jsdom does not implement the Popover API used by the tooltip, so mock
@@ -831,7 +924,10 @@ describe('DateRangeInput range-span forwarding', () => {
     const withinCap = getButton('Last 3 days');
     const overCap = getButton('Last 30 days');
     expect(withinCap).not.toBeDisabled();
+    expect(withinCap).not.toHaveAttribute('data-disabled');
     expect(overCap).toBeDisabled();
+    expect(overCap).toHaveClass('astryx-date-range-input-preset');
+    expect(overCap).toHaveAttribute('data-disabled', 'disabled');
 
     fireEvent.click(overCap);
     expect(handleChange).not.toHaveBeenCalled();

package/src/DateRangeInput/DateRangeInput.tsx

@@ -54,6 +54,7 @@ import {
   type DayOfWeek,
   type DayOfWeekName,
 } from '../Calendar';
+import {useCalendarConstraints} from '../Calendar/hooks';
 import {usePopover} from '../Popover';
 import {useTooltip} from '../Tooltip';
 import {mergeProps} from '../utils';
@@ -91,9 +92,14 @@ const styles = stylex.create({
     borderStyle: 'none',
     padding: 0,
     fontFamily: typographyVars['--font-family-body'],
+    // The 16px floor is iOS-only: iOS Safari zooms the page when a focused
+    // control sits under 16px, and only iOS WebKit implements
+    // -webkit-touch-callout to key the coarse-pointer floor to it.
     fontSize: {
       default: typeScaleVars['--text-body-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-body-leading'],
     color: colorVars['--color-text-primary'],
@@ -376,6 +382,9 @@ export interface DateRangeInputProps extends Omit<
 
   /**
    * Preset date ranges shown as quick-select options beside the calendar.
+   * A preset is disabled when either endpoint violates `min`, `max`, or
+   * `dateConstraints`, or when its span violates `minRangeSpan` or
+   * `maxRangeSpan`.
    */
   presets?: ReadonlyArray<DateRangePreset>;
 
@@ -542,6 +551,11 @@ export function DateRangeInput({
     dialogLabel: t('@astryx.dateRangeInput.dialogLabel'),
     closeButtonLabel: t('@astryx.dateInput.closeCalendar'),
   });
+  const {isDateDisabled} = useCalendarConstraints({
+    min,
+    max,
+    dateConstraints,
+  });
 
   const fireChange = useCallback(
     (newValue: DateRange | null) => {
@@ -577,14 +591,6 @@ export function DateRangeInput({
     [fireChange, popover],
   );
 
-  const handlePresetClick = useCallback(
-    (preset: DateRangePreset) => {
-      fireChange(preset.getRange());
-      popover.hide();
-    },
-    [fireChange, popover],
-  );
-
   const handleClear = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
@@ -713,15 +719,17 @@ export function DateRangeInput({
             <div
               role="group"
               aria-label={t('@astryx.dateRangeInput.presetDateRanges')}
-              {...stylex.props(styles.presetSidebar)}>
+              {...mergeProps(
+                themeProps('date-range-input-presets'),
+                stylex.props(styles.presetSidebar),
+              )}>
               {presets.map(preset => {
                 const presetRange = preset.getRange();
                 const isActive = isRangeEqual(value, presetRange);
-                const isPresetDisabled = !isRangeWithinSpan(
-                  presetRange,
-                  maxRangeSpan,
-                  minRangeSpan,
-                );
+                const isPresetDisabled =
+                  !isRangeWithinSpan(presetRange, maxRangeSpan, minRangeSpan) ||
+                  isDateDisabled(plainDateFromISO(presetRange.start)) ||
+                  isDateDisabled(plainDateFromISO(presetRange.end));
                 return (
                   <button
                     key={preset.label}
@@ -733,12 +741,18 @@ export function DateRangeInput({
                     // concept that contradicted the Tab interaction) (forms-5).
                     aria-current={isActive ? 'true' : undefined}
                     disabled={isPresetDisabled}
-                    onClick={() => handlePresetClick(preset)}
-                    {...stylex.props(
-                      focusOutlineStyles.focusVisible,
-                      styles.presetButton,
-                      isActive && styles.presetButtonActive,
-                      isPresetDisabled && styles.presetButtonDisabled,
+                    onClick={() => handleRangeSelect(presetRange)}
+                    {...mergeProps(
+                      themeProps('date-range-input-preset', {
+                        selected: isActive ? 'selected' : null,
+                        disabled: isPresetDisabled ? 'disabled' : null,
+                      }),
+                      stylex.props(
+                        focusOutlineStyles.focusVisible,
+                        styles.presetButton,
+                        isActive && styles.presetButtonActive,
+                        isPresetDisabled && styles.presetButtonDisabled,
+                      ),
                     )}>
                     {preset.label}
                   </button>

package/src/DateTimeInput/DateTimeInput.tsx

@@ -173,9 +173,14 @@ const styles = stylex.create({
     borderStyle: 'none',
     padding: 0,
     fontFamily: typographyVars['--font-family-body'],
+    // The 16px floor is iOS-only: iOS Safari zooms the page when a focused
+    // control sits under 16px, and only iOS WebKit implements
+    // -webkit-touch-callout to key the coarse-pointer floor to it.
     fontSize: {
       default: typeScaleVars['--text-body-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-body-leading'],
     color: colorVars['--color-text-primary'],

package/src/DateTimeInput/TouchDateTimeField.tsx

@@ -182,9 +182,14 @@ const styles = stylex.create({
     borderStyle: 'none',
     padding: 0,
     fontFamily: typographyVars['--font-family-body'],
+    // The 16px floor is iOS-only: iOS Safari zooms the page when a focused
+    // control sits under 16px, and only iOS WebKit implements
+    // -webkit-touch-callout to key the coarse-pointer floor to it.
     fontSize: {
       default: typeScaleVars['--text-body-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-body-leading'],
     color: colorVars['--color-text-primary'],

package/src/DateTimeInput/nativePickerSegmentStyles.ts

@@ -42,21 +42,34 @@ export const nativePickerSegmentStyles = stylex.create({
     borderStyle: 'none',
     padding: 0,
     fontFamily: typographyVars['--font-family-body'],
-    // Below 16px iOS zooms the page when the field takes focus.
+    // Below 16px iOS zooms the page when the field takes focus. Only iOS
+    // WebKit implements -webkit-touch-callout, so the coarse-pointer floor is
+    // keyed to iOS alone.
     fontSize: {
       default: typeScaleVars['--text-body-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-body-leading'],
     color: colorVars['--color-text-primary'],
     backgroundColor: 'transparent',
     outline: 'none',
     // Native date/time controls size from their internal edit fields. Pin the
-    // box to one text line so both segments stay aligned.
-    height: stylex.firstThatWorks(
-      '1lh',
-      `calc(max(1rem, ${typeScaleVars['--text-body-size']}) * ${typeScaleVars['--text-body-leading']})`,
-    ),
+    // box to one text line so both segments stay aligned. The calc fallback
+    // mirrors the iOS-only floor above; browsers with `1lh` track it for free.
+    height: {
+      default: stylex.firstThatWorks(
+        '1lh',
+        `calc(${typeScaleVars['--text-body-size']} * ${typeScaleVars['--text-body-leading']})`,
+      ),
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': stylex.firstThatWorks(
+          '1lh',
+          `calc(max(1rem, ${typeScaleVars['--text-body-size']}) * ${typeScaleVars['--text-body-leading']})`,
+        ),
+      },
+    },
     WebkitAppearance: 'none',
     appearance: 'none',
     // DateTimeInput renders its own calendar/clock affordances.
@@ -101,9 +114,12 @@ export const nativePickerSegmentStyles = stylex.create({
     insetInlineEnd: 0,
     insetBlock: 0,
     display: 'block',
+    // The same iOS-only floor as the input it covers, shared baselines.
     fontSize: {
       default: typeScaleVars['--text-body-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-body-leading'],
     pointerEvents: 'none',

package/src/Dialog/Dialog.doc.mjs

@@ -30,6 +30,9 @@ export const docs = {
     container: true,
     targets: [
       {className: 'astryx-dialog', visualProps: ['variant']},
+      {className: 'astryx-dialog-header'},
+      {className: 'astryx-dialog-header-title-block'},
+      {className: 'astryx-dialog-header-close-icon'},
     ],
     vars: [
       {name: '--_dialog-radius', description: 'Border radius of the dialog', default: 'var(--radius-container)', private: true},

package/src/Dialog/Dialog.spec.md

@@ -17,7 +17,7 @@ verified_by:
     packages/core/src/Dialog/__tests__/Dialog.a11y.test.tsx,
     packages/core/src/Dialog/__tests__/Dialog.a11y.chromium.spec.ts,
   ]
-modules: []
+modules: [module:Dialog/DialogHeader]
 families: [family:overlay-dismissal]
 design_specs: []
 architecture:

package/src/Dialog/DialogHeader.doc.mjs

@@ -8,6 +8,14 @@ export const docs = {
   displayName: 'Dialog Header',
   isHiddenFromOverview: true,
   description: 'Header for dialogs with a title, optional subtitle, close button, and start/end content slots.',
+  usage: {
+    description: 'Use DialogHeader to give a dialog a labelled title area and optional close control.',
+    anatomy: [
+      {name: 'Header row', required: true, description: 'Arranges the title block, optional start/end content, and close control.'},
+      {name: 'Title block', required: true, description: 'Groups the title and optional subtitle.'},
+      {name: 'Close icon', required: false, description: 'Visual close glyph inside the close button.'},
+    ],
+  },
   props: [
     {
       name: 'title',
@@ -72,6 +80,13 @@ export const docs = {
       hasDivider: true,
     },
   },
+  theming: {
+    targets: [
+      {className: 'astryx-dialog-header'},
+      {className: 'astryx-dialog-header-title-block'},
+      {className: 'astryx-dialog-header-close-icon'},
+    ],
+  },
   examples: [
     {
       label: 'Basic',
@@ -117,6 +132,14 @@ export const docsZh = {
   isHiddenFromOverview: true,
   displayName: 'Dialog Header',
   description: '对话框头部，包含标题、可选副标题、关闭按钮以及首尾内容插槽。',
+  usage: {
+    description: '使用 DialogHeader 为对话框提供带标签的标题区和可选的关闭控件。',
+    anatomy: [
+      {name: 'Header row', required: true, description: '排列标题区、可选的首尾内容和关闭控件。'},
+      {name: 'Title block', required: true, description: '组合标题和可选副标题。'},
+      {name: 'Close icon', required: false, description: '关闭按钮内的关闭图标。'},
+    ],
+  },
   props: [
     {
       name: 'title',
@@ -150,6 +173,13 @@ export const docsZh = {
       default: 'true',
     },
   ],
+  theming: {
+    targets: [
+      {className: 'astryx-dialog-header'},
+      {className: 'astryx-dialog-header-title-block'},
+      {className: 'astryx-dialog-header-close-icon'},
+    ],
+  },
 };
 
 export const docsDense = {
@@ -157,6 +187,14 @@ export const docsDense = {
   isHiddenFromOverview: true,
   displayName: 'Dialog Header',
   description: 'dialog header w/ title, optional subtitle, close button, start/end content slots',
+  usage: {
+    description: 'labelled dialog title area + optional close control',
+    anatomy: [
+      {name: 'Header row', required: true, description: 'arranges title block, optional start/end content, close control'},
+      {name: 'Title block', required: true, description: 'groups title + optional subtitle'},
+      {name: 'Close icon', required: false, description: 'close glyph inside close button'},
+    ],
+  },
   propDescriptions: {
     title: 'dialog title (focused on open; labels dialog via aria-labelledby)',
     subtitle: 'subtitle below title',

package/src/Dialog/DialogHeader.test.tsx

@@ -14,6 +14,13 @@ import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {DialogHeader} from './DialogHeader';
 import {LayoutDividerContext} from '../Layout/LayoutDividerContext';
+import {defineTheme} from '../theme/defineTheme';
+import {generateThemeCSS} from '../theme/generateThemeRules';
+
+function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
+  const {prose, component} = generateThemeCSS(theme);
+  return [prose, component].filter(Boolean).join('\n\n');
+}
 
 describe('DialogHeader', () => {
   it('renders the title', () => {
@@ -56,6 +63,48 @@ describe('DialogHeader', () => {
     expect(screen.getByRole('button', {name: /close/i})).toBeInTheDocument();
   });
 
+  it('exposes theme targets for the header row, title block, and close icon', () => {
+    const {container} = render(
+      <DialogHeader
+        title="Title"
+        subtitle="Subtitle"
+        onOpenChange={() => {}}
+      />,
+    );
+
+    expect(container.querySelector('.astryx-dialog-header')).not.toBeNull();
+    expect(screen.getByRole('heading', {level: 2}).parentElement).toHaveClass(
+      'astryx-dialog-header-title-block',
+    );
+
+    const closeIcon = screen
+      .getByRole('button', {name: /close/i})
+      .querySelector('.astryx-dialog-header-close-icon');
+    expect(closeIcon).toHaveClass('astryx-icon');
+  });
+
+  it('lets themes set the two internal gaps and close-icon size', () => {
+    const theme = defineTheme({
+      name: 'dialog-header-targets-test',
+      components: {
+        'dialog-header': {base: {gap: '8px'}},
+        'dialog-header-title-block': {base: {gap: '4px'}},
+        'dialog-header-close-icon': {
+          base: {width: '16px', height: '16px', fontSize: '16px'},
+        },
+      },
+    });
+    const css = generateThemeTestCSS(theme);
+
+    expect(css).toContain('.astryx-dialog-header {');
+    expect(css).toContain('gap: 8px');
+    expect(css).toContain('.astryx-dialog-header-title-block {');
+    expect(css).toContain('gap: 4px');
+    expect(css).toContain('.astryx-dialog-header-close-icon {');
+    expect(css).toContain('width: 16px');
+    expect(css).toContain('height: 16px');
+  });
+
   it('does not render close button when onOpenChange is not provided', () => {
     render(<DialogHeader title="Title" />);
     expect(

package/src/Dialog/DialogHeader.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file DialogHeader.tsx
- * @input Uses React, useEffect, useRef, LayoutHeader, Button, Icon, Heading, Text, DialogContext
+ * @input Uses React, StyleX, LayoutHeader, Button, Icon, Heading, Text, DialogContext, mergeProps, themeProps
  * @output Exports DialogHeader component and DialogHeaderProps
  * @position Dialog header component; used with Dialog and Layout
  *
@@ -25,6 +25,8 @@ import {Icon} from '../Icon';
 import {Heading} from '../Heading/Heading';
 import {Text} from '../Text/Text';
 import type {BaseProps} from '../BaseProps';
+import {mergeProps} from '../utils';
+import {themeProps} from '../utils/themeProps';
 import {useDialogContext} from './DialogContext';
 import {useTranslator} from '../i18n';
 
@@ -41,6 +43,9 @@ const styles = stylex.create({
     marginInlineEnd: `calc(-1 * ${spacingVars['--spacing-2']})`,
   },
   titleWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacingVars['--spacing-0'],
     flex: 1,
     minWidth: 0,
     // Visual centering: align title center with close button center
@@ -161,11 +166,19 @@ export function DialogHeader({
       className={className}
       style={style}
       {...rest}>
-      <div {...stylex.props(styles.container)}>
+      <div
+        {...mergeProps(
+          themeProps('dialog-header'),
+          stylex.props(styles.container),
+        )}>
         {startContent && (
           <div {...stylex.props(styles.actions)}>{startContent}</div>
         )}
-        <div {...stylex.props(styles.titleWrapper)}>
+        <div
+          {...mergeProps(
+            themeProps('dialog-header-title-block'),
+            stylex.props(styles.titleWrapper),
+          )}>
           <Heading
             ref={titleRef}
             id={titleId}
@@ -192,7 +205,13 @@ export function DialogHeader({
                 variant="ghost"
                 label={t('@astryx.dialog.close')}
                 tooltip={t('@astryx.dialog.close')}
-                icon={<Icon icon="close" color="inherit" />}
+                icon={
+                  <Icon
+                    icon="close"
+                    color="inherit"
+                    {...themeProps('dialog-header-close-icon')}
+                  />
+                }
                 onClick={() => {
                   onOpenChange?.(false);
                 }}