@astryxdesign/core 0.6.1 → 0.6.2

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';
@@ -376,6 +377,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 +546,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 +586,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 +714,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 +736,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/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);
                 }}

package/src/Dialog/modules/DialogHeader.spec.md

@@ -0,0 +1,152 @@
+---
+schema_version: 3
+template_version: 1
+kind: module
+id: module:Dialog/DialogHeader
+authority: current
+archive_reason: null
+superseded_by: null
+approved_by: cixzhang
+approved_at: 2026-09-14
+owners: [cixzhang, imdreamrunner]
+review_triggers: [theming, layout]
+verified_by:
+  [
+    packages/core/src/Dialog/DialogHeader.test.tsx,
+    packages/core/src/theme/themingTargets.test.ts,
+    scripts/check-knowledge.mjs,
+  ]
+parent_component: component:Dialog
+references: [architecture:component-theming-surface]
+---
+
+# DialogHeader module contract
+
+## Intent
+
+`DialogHeader` presents the title region of a Dialog and its optional close
+control. This record owns the stable header-row, title-block, and close-icon
+anatomy and their public theming targets.
+
+## Compatibility and migration
+
+- Released default preserved: `yes`
+- Compatibility class: additive theme targets only; default layout, paint,
+  interaction, accessibility, and public props remain unchanged
+- Migration decision: none
+
+Consumer migration instructions belong in consumer docs and release notes.
+
+## Ownership boundary
+
+**Owns**
+
+- The header row that arranges title content and trailing controls.
+- The title block that groups the title and optional subtitle.
+- The close icon rendered for the optional close action.
+- The `dialog-header`, `dialog-header-title-block`, and
+  `dialog-header-close-icon` targets.
+
+**Does not own / non-goals**
+
+- Dialog modality, dismissal policy, or focus lifecycle — owned by
+  `component:Dialog` and its linked system records.
+- Generic Button or Icon presentation outside this module — owned by those
+  components.
+- New public props or default visual changes.
+
+## Public API and concepts
+
+No component prop changes. This contract adds three public theming surfaces for
+existing anatomy.
+
+| Concept | Closed values or states | Meaning | Default | Owner | Stability |
+| --- | --- | --- | --- | --- | --- |
+| Header row target | present | Styles the row that arranges title content and controls | Existing row visuals | `module:Dialog/DialogHeader` | stable |
+| Title block target | present | Styles the title/subtitle grouping element | Existing title stack visuals | `module:Dialog/DialogHeader` | stable |
+| Close icon target | present when close action renders | Styles the close glyph itself | Existing medium Icon visuals | `module:Dialog/DialogHeader` | stable |
+
+## Behavioral contract
+
+| ID | Invariant | Basis | Review state |
+| --- | --- | --- | --- |
+| FR1 | The header row MUST carry `dialog-header` on the element that applies its row layout and gap. | Current implementation and owner decision | settled |
+| FR2 | The title block MUST carry `dialog-header-title-block` on the element that applies its title/subtitle layout and gap. | Current implementation and owner decision | settled |
+| FR3 | The rendered close Icon MUST carry `dialog-header-close-icon` on the glyph element that applies icon presentation. | Current implementation and owner decision | settled |
+| FR4 | Omitting `onOpenChange` MUST continue to omit the close action and its optional close-icon anatomy. | Released behavior | settled |
+
+### Transformation and precedence order
+
+- The module applies each target to its owning element before normal theme CSS
+  resolves through the shared theming pipeline.
+
+### Performance and resources
+
+- The additive class names and metadata introduce no listener, observer, timer,
+  measurement, or asynchronous resource.
+
+## Accessibility contract
+
+- Theme targets MUST NOT change the title's role, focus behavior, dialog naming,
+  or the close button's accessible name and operation.
+
+## Design relationships
+
+| Anatomy or state | Design requirement | Representation authority | Module contract |
+| --- | --- | --- | --- |
+| Header row | Owns arrangement and spacing among title content and controls. | This module | FR1 |
+| Title block | Owns title/subtitle grouping and spacing. | This module | FR2 |
+| Close icon | Owns the close glyph's visual box inside the Button-owned action. | This module with Icon rendering | FR3, FR4 |
+
+### Theming anatomy
+
+<!-- anatomy-theming:v1 -->
+
+```json
+{
+  "Header row": {"target": "dialog-header"},
+  "Title block": {"target": "dialog-header-title-block"},
+  "Close icon": {"target": "dialog-header-close-icon"}
+}
+```
+
+## Parent and system relationships
+
+- `component:Dialog` owns modal behavior and the aggregate Dialog contract.
+- `component:Layout` owns the composed LayoutHeader region outside the three
+  module-owned inner parts.
+- `component:Button` owns the close action's control behavior and outer button
+  presentation.
+- `component:Icon` renders the glyph; this module guarantees a distinct target
+  for the close icon's DialogHeader-specific visual contract.
+- `architecture:component-theming-surface` owns target qualification, anatomy
+  mapping, and the requirement that each target sits on its painter.
+
+## Verification map
+
+| Contract | Verification | Representative states | Mutation or failure expectation |
+| --- | --- | --- | --- |
+| FR1–FR3 | `DialogHeader.test.tsx`, target inventory, generated probe theme, and source inspection | title only, title/subtitle, close action | A target is missing, undocumented, or moved away from its owning painter. |
+| FR4 | Existing close-button presence tests | with and without `onOpenChange` | The optional target renders without the optional close action. |
+| Theming anatomy map | `scripts/check-knowledge.mjs` | all three module anatomy entries and targets | Anatomy, docs, runtime targets, and the module map drift. |
+
+## Decision log
+
+### DEC-1 — Header targets follow stable anatomy and visual ownership
+
+**Reference:** `module:Dialog/DialogHeader/DEC-1`
+**Decider:** cixzhang, 2026-09-14
+
+Each public target represents documented anatomy and is applied to the element
+that owns the corresponding visuals. The header row, title block, and close icon
+meet that admission rule and are approved as additive targets.
+
+## Open questions
+
+None.
+
+## Content boundary
+
+This record does not duplicate consumer signatures/examples, parent Dialog
+behavior, implementation steps, or shared theming rules. It links to their
+canonical owners.

package/src/FileInput/FileInput.doc.mjs

@@ -142,6 +142,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-file-input', visualProps: ['mode', 'status']},
+      {className: 'astryx-file-input-icon', visualProps: ['mode']},
     ],
   },
   usage: {
@@ -270,6 +271,7 @@ export const docsZh = {
   theming: {
     targets: [
       {className: 'astryx-file-input', visualProps: ['mode', 'status']},
+      {className: 'astryx-file-input-icon', visualProps: ['mode']},
     ],
   },
   usage: {