@astryxdesign/core 0.1.3 → 0.1.4-canary.01e5b29

package/src/CommandPalette/CommandPaletteGroup.doc.mjs

@@ -27,6 +27,16 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
+  playground: {
+    defaults: {
+      heading: 'Navigation',
+      children: [
+        {__element: 'CommandPaletteItem', props: {value: 'home', onSelect: undefined}, children: 'Go Home'},
+        {__element: 'CommandPaletteItem', props: {value: 'settings', onSelect: undefined}, children: 'Open Settings'},
+        {__element: 'CommandPaletteItem', props: {value: 'profile', onSelect: undefined}, children: 'View Profile'},
+      ],
+    },
+  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteInput.doc.mjs

@@ -57,6 +57,12 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
+  playground: {
+    defaults: {
+      placeholder: 'Search commands, files, or actions...',
+      hasAutoFocus: false,
+    },
+  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteItem.doc.mjs

@@ -50,6 +50,12 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
+  playground: {
+    defaults: {
+      value: 'go-home',
+      children: 'Go to Dashboard',
+    },
+  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteList.doc.mjs

@@ -27,6 +27,15 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
+  playground: {
+    defaults: {
+      children: [
+        {__element: 'CommandPaletteItem', props: {value: 'home', onSelect: undefined}, children: 'Go Home'},
+        {__element: 'CommandPaletteItem', props: {value: 'settings', onSelect: undefined}, children: 'Open Settings'},
+        {__element: 'CommandPaletteItem', props: {value: 'profile', onSelect: undefined}, children: 'View Profile'},
+      ],
+    },
+  },
 };
 
 export const docsZh = {

package/src/ContextMenu/ContextMenu.doc.mjs

@@ -78,6 +78,21 @@ export const docs = {
       { guidance: false, description: 'Place more than 10–12 items in a single menu without grouping them into sections.' },
     ],
   },
+  playground: {
+    defaults: {
+      children: {
+        __element: 'Card',
+        props: {padding: 6},
+        children: {__element: 'Text', props: {color: 'secondary'}, children: 'Right-click this area'},
+      },
+      items: [
+        {label: 'Edit'},
+        {label: 'Duplicate'},
+        {type: 'divider'},
+        {label: 'Delete'},
+      ],
+    },
+  },
 };
 
 /** @type {import('../docs-types').TranslationDoc} */

package/src/ContextMenu/ContextMenu.test.tsx

@@ -172,6 +172,21 @@ describe('ContextMenu', () => {
     expect(preventDefault).toHaveBeenCalled();
   });
 
+  it('prevents default context menu on the opened menu container', () => {
+    render(
+      <ContextMenu items={[{label: 'Item 1'}]}>
+        <div>Right-click me</div>
+      </ContextMenu>,
+    );
+
+    fireEvent.contextMenu(screen.getByText('Right-click me'));
+    const menu = screen.getByRole('menu', {hidden: true});
+    const event = new MouseEvent('contextmenu', {bubbles: true});
+    const preventDefault = vi.spyOn(event, 'preventDefault');
+    menu.dispatchEvent(event);
+    expect(preventDefault).toHaveBeenCalled();
+  });
+
   it('does not open when isDisabled is true', () => {
     render(
       <ContextMenu items={[{label: 'Item 1'}]} isDisabled>

package/src/ContextMenu/ContextMenu.tsx

@@ -55,6 +55,7 @@ import {
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
+import type {StyleXStyles} from '../theme/types';
 import {themeProps} from '../utils/themeProps';
 import type {
   DropdownMenuOption,
@@ -86,6 +87,7 @@ const styles = stylex.create({
     transitionProperty: 'opacity',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
+    userSelect: 'none',
   },
   popover: {
     minWidth: '160px',
@@ -114,6 +116,13 @@ export type ContextMenuOption = DropdownMenuOption;
 interface ContextMenuBaseProps extends BaseProps {
   /** Ref forwarded to the trigger wrapper element. */
   ref?: React.Ref<HTMLDivElement>;
+  /**
+   * Styles applied to the trigger wrapper element (the right-click target).
+   * By default the trigger is a plain block that hugs its content — pass a
+   * fill style (e.g. `width/height: 100%`) when the whole parent area should
+   * be right-clickable (as the Table does for full-cell context menus).
+   */
+  triggerXstyle?: StyleXStyles | StyleXStyles[];
   /** The trigger area — right-click on this to open the menu. */
   children: ReactNode;
   /** Custom menu width. @default '160px' */
@@ -184,6 +193,7 @@ export function ContextMenu({
   className,
   style,
   xstyle,
+  triggerXstyle,
   'data-testid': testId,
   ...props
 }: ContextMenuProps) {
@@ -382,7 +392,14 @@ export function ContextMenu({
         onContextMenu={handleContextMenu}
         {...longPressHandlers}
         data-testid={testId}
-        {...stylex.props(styles.trigger)}>
+        {...stylex.props(
+          styles.trigger,
+          ...(triggerXstyle
+            ? Array.isArray(triggerXstyle)
+              ? triggerXstyle
+              : [triggerXstyle]
+            : []),
+        )}>
         {children}
       </div>
 
@@ -393,6 +410,7 @@ export function ContextMenu({
           role="menu"
           aria-label={label}
           onKeyDown={listKeyDown}
+          onContextMenu={e => e.preventDefault()}
           {...mergeProps(
             themeProps('context-menu'),
             stylex.props(styles.menu, xstyle),

package/src/ContextMenu/ContextMenuItem.doc.mjs

@@ -35,6 +35,12 @@ export const docs = {
       description: 'StyleX styles for layout customization.',
     },
   ],
+  playground: {
+    defaults: {
+      label: 'Edit',
+      description: 'Modify this item',
+    },
+  },
 };
 
 export const docsZh = {

package/src/DateInput/DateInput.doc.mjs

@@ -56,7 +56,7 @@ export const docs = {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the field focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled DateInput in Tooltip — disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the field focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled DateInput in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
     },
     {
       name: 'value',
@@ -432,6 +432,11 @@ export const docsDense = {
         description:
           'Show a loading state with changeAction when the date triggers a server-side save.',
       },
+      {
+        guidance: true,
+        description:
+          'Use inside InputGroup for a short static prefix or suffix, such as a due-date hint.',
+      },
       {
         guidance: false,
         description:

package/src/DateInput/DateInput.test.tsx

@@ -12,6 +12,7 @@
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import {getButton, queryButton} from '../__tests__/fastRoleQueries';
 import {DateInput} from './DateInput';
 import {InputGroup} from '../InputGroup';
 import {InputGroupText} from '../InputGroup/InputGroupText';
@@ -92,14 +93,14 @@ describe('DateInput', () => {
 
   it('calendar button is focusable and clickable', () => {
     render(<DateInput label="Date" onChange={() => {}} />);
-    const button = screen.getByRole('button', {name: 'Open calendar'});
+    const button = getButton('Open calendar');
     expect(button).toBeInTheDocument();
     expect(button).not.toBeDisabled();
   });
 
   it('calendar button is disabled when isDisabled is true', () => {
     render(<DateInput label="Date" isDisabled onChange={() => {}} />);
-    const button = screen.getByRole('button', {name: 'Open calendar'});
+    const button = getButton('Open calendar');
     expect(button).toBeDisabled();
   });
 
@@ -282,7 +283,7 @@ describe('DateInput', () => {
   it('disables input and button when isLoading is true', () => {
     render(<DateInput label="Date" isLoading onChange={() => {}} />);
     expect(screen.getByRole('combobox')).toBeDisabled();
-    expect(screen.getByRole('button', {name: 'Open calendar'})).toBeDisabled();
+    expect(getButton('Open calendar')).toBeDisabled();
   });
 
   it('shows spinner when isLoading is true', () => {
@@ -475,7 +476,7 @@ describe('DateInput', () => {
 
   it('does not open popover when clicking calendar button while disabled', () => {
     render(<DateInput label="Date" isDisabled onChange={() => {}} />);
-    const button = screen.getByRole('button', {name: 'Open calendar'});
+    const button = getButton('Open calendar');
     fireEvent.click(button);
     expect(screen.getByRole('combobox')).toHaveAttribute(
       'aria-expanded',
@@ -513,23 +514,17 @@ describe('DateInput', () => {
           hasClear
         />,
       );
-      expect(
-        screen.getByRole('button', {name: 'Clear Date'}),
-      ).toBeInTheDocument();
+      expect(getButton('Clear Date')).toBeInTheDocument();
     });
 
     it('does not show clear button when value is undefined', () => {
       render(<DateInput label="Date" onChange={() => {}} hasClear />);
-      expect(
-        screen.queryByRole('button', {name: 'Clear Date'}),
-      ).not.toBeInTheDocument();
+      expect(queryButton('Clear Date')).not.toBeInTheDocument();
     });
 
     it('does not show clear button when hasClear is false', () => {
       render(<DateInput label="Date" value="2026-01-15" onChange={() => {}} />);
-      expect(
-        screen.queryByRole('button', {name: 'Clear Date'}),
-      ).not.toBeInTheDocument();
+      expect(queryButton('Clear Date')).not.toBeInTheDocument();
     });
 
     it('does not show clear button when disabled', () => {
@@ -542,9 +537,7 @@ describe('DateInput', () => {
           isDisabled
         />,
       );
-      expect(
-        screen.queryByRole('button', {name: 'Clear Date'}),
-      ).not.toBeInTheDocument();
+      expect(queryButton('Clear Date')).not.toBeInTheDocument();
     });
 
     it('calls onChange with undefined when clear is clicked', () => {
@@ -557,7 +550,7 @@ describe('DateInput', () => {
           hasClear
         />,
       );
-      fireEvent.click(screen.getByRole('button', {name: 'Clear Date'}));
+      fireEvent.click(getButton('Clear Date'));
       expect(onChange).toHaveBeenCalledWith(undefined);
     });
   });
@@ -699,9 +692,7 @@ describe('DateInput', () => {
       expect(input).toHaveAttribute('aria-disabled', 'true');
       expect(input.getAttribute('aria-describedby')).toContain(tooltip.id);
       expect(tooltip).toHaveTextContent('Scheduling is locked');
-      expect(
-        screen.getByRole('button', {name: 'Open calendar'}),
-      ).toBeDisabled();
+      expect(getButton('Open calendar')).toBeDisabled();
     });
   });
 

package/src/DateRangeInput/DateRangeInput.doc.mjs

@@ -52,7 +52,7 @@ export const docs = {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the field focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled DateRangeInput in Tooltip — disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the field focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled DateRangeInput in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
     },
     {
       name: 'value',

package/src/DateRangeInput/DateRangeInput.test.tsx

@@ -12,6 +12,11 @@
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+// getButton/queryButton instead of getByRole('button', {name}): the closed
+// popover keeps a two-month Calendar (~85 role=button nodes) mounted, which
+// made every role+name query compute ~85 accessible names through jsdom's
+// slow getComputedStyle (~450ms per query). See fastRoleQueries.ts.
+import {getButton, queryButton} from '../__tests__/fastRoleQueries';
 import {DateRangeInput} from './DateRangeInput';
 import type {DateRange} from './DateRangeInput';
 
@@ -53,7 +58,7 @@ describe('DateRangeInput', () => {
         hasClear={false}
       />,
     );
-    const trigger = screen.getByRole('button', {name: /Range:/});
+    const trigger = getButton(/Range:/);
     expect(trigger.textContent).toMatch(/Mar/);
     expect(trigger.textContent).toMatch(/15/);
     expect(trigger.textContent).toMatch(/22/);
@@ -93,13 +98,13 @@ describe('DateRangeInput', () => {
         onChange={() => {}}
       />,
     );
-    const trigger = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/Range/);
     expect(trigger).toHaveAttribute('aria-required', 'true');
   });
 
   it('does not set aria-required when isRequired is false', () => {
     render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
-    const trigger = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/Range/);
     expect(trigger).not.toHaveAttribute('aria-required');
   });
 
@@ -112,25 +117,25 @@ describe('DateRangeInput', () => {
         onChange={() => {}}
       />,
     );
-    const trigger = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/Range/);
     expect(trigger).toBeDisabled();
   });
 
   it('is not disabled by default', () => {
     render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
-    const trigger = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/Range/);
     expect(trigger).not.toBeDisabled();
   });
 
   it('trigger has aria-haspopup="dialog"', () => {
     render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
-    const trigger = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/Range/);
     expect(trigger).toHaveAttribute('aria-haspopup', 'dialog');
   });
 
   it('trigger has aria-expanded=false by default', () => {
     render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
-    const trigger = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/Range/);
     expect(trigger).toHaveAttribute('aria-expanded', 'false');
   });
 
@@ -143,7 +148,7 @@ describe('DateRangeInput', () => {
         status={{type: 'error', message: 'Required'}}
       />,
     );
-    const trigger = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/Range/);
     expect(trigger).toHaveAttribute('aria-invalid', 'true');
   });
 
@@ -156,7 +161,7 @@ describe('DateRangeInput', () => {
         status={{type: 'warning', message: 'Watch out'}}
       />,
     );
-    const trigger = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/Range/);
     expect(trigger).not.toHaveAttribute('aria-invalid');
   });
 
@@ -181,7 +186,7 @@ describe('DateRangeInput', () => {
         status={{type: 'error', message: 'Please select dates'}}
       />,
     );
-    const trigger = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/Range/);
     const describedBy = trigger.getAttribute('aria-describedby')!;
     const ids = describedBy.split(' ');
     const found = ids.some(id => {
@@ -193,9 +198,7 @@ describe('DateRangeInput', () => {
 
   it('calendar icon button is present', () => {
     render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
-    expect(
-      screen.getByRole('button', {name: 'Open calendar'}),
-    ).toBeInTheDocument();
+    expect(getButton('Open calendar')).toBeInTheDocument();
   });
 
   it('calendar icon button is disabled when isDisabled', () => {
@@ -207,7 +210,7 @@ describe('DateRangeInput', () => {
         onChange={() => {}}
       />,
     );
-    expect(screen.getByRole('button', {name: 'Open calendar'})).toBeDisabled();
+    expect(getButton('Open calendar')).toBeDisabled();
   });
 
   it('renders with size="lg"', () => {
@@ -236,9 +239,7 @@ describe('DateRangeInput', () => {
           hasClear
         />,
       );
-      expect(
-        screen.getByRole('button', {name: 'Clear Range'}),
-      ).toBeInTheDocument();
+      expect(getButton('Clear Range')).toBeInTheDocument();
     });
 
     it('does not show clear button when value is null', () => {
@@ -250,9 +251,7 @@ describe('DateRangeInput', () => {
           hasClear
         />,
       );
-      expect(
-        screen.queryByRole('button', {name: 'Clear Range'}),
-      ).not.toBeInTheDocument();
+      expect(queryButton('Clear Range')).not.toBeInTheDocument();
     });
 
     it('does not show clear button when hasClear is false', () => {
@@ -268,9 +267,7 @@ describe('DateRangeInput', () => {
           hasClear={false}
         />,
       );
-      expect(
-        screen.queryByRole('button', {name: 'Clear Range'}),
-      ).not.toBeInTheDocument();
+      expect(queryButton('Clear Range')).not.toBeInTheDocument();
     });
 
     it('does not show clear button when disabled', () => {
@@ -287,9 +284,7 @@ describe('DateRangeInput', () => {
           isDisabled
         />,
       );
-      expect(
-        screen.queryByRole('button', {name: 'Clear Range'}),
-      ).not.toBeInTheDocument();
+      expect(queryButton('Clear Range')).not.toBeInTheDocument();
     });
 
     it('calls onChange with null when clear is clicked', () => {
@@ -306,7 +301,7 @@ describe('DateRangeInput', () => {
           hasClear
         />,
       );
-      fireEvent.click(screen.getByRole('button', {name: 'Clear Range'}));
+      fireEvent.click(getButton('Clear Range'));
       expect(onChange).toHaveBeenCalledWith(null);
     });
   });
@@ -346,9 +341,7 @@ describe('DateRangeInput', () => {
       expect(
         screen.getByRole('group', {name: 'Preset date ranges', hidden: true}),
       ).toBeInTheDocument();
-      expect(
-        screen.getByRole('button', {name: 'Last 7 days', hidden: true}),
-      ).toBeInTheDocument();
+      expect(getButton('Last 7 days')).toBeInTheDocument();
     });
 
     it('marks the applied preset with aria-current, not aria-selected', () => {
@@ -360,16 +353,10 @@ describe('DateRangeInput', () => {
           presets={presets}
         />,
       );
-      const active = screen.getByRole('button', {
-        name: 'Last 7 days',
-        hidden: true,
-      });
+      const active = getButton('Last 7 days');
       expect(active).toHaveAttribute('aria-current', 'true');
       expect(active).not.toHaveAttribute('aria-selected');
-      const inactive = screen.getByRole('button', {
-        name: 'This month',
-        hidden: true,
-      });
+      const inactive = getButton('This month');
       expect(inactive).not.toHaveAttribute('aria-current');
     });
   });
@@ -405,7 +392,7 @@ describe('DateRangeInput', () => {
     it('shows the reason tooltip on hover when disabled with a reason', async () => {
       renderDisabled({disabledMessage: 'You need the Editor role'});
 
-      const trigger = screen.getByRole('button', {name: /Range:/, ...h});
+      const trigger = getButton(/Range:/);
       const container = trigger.parentElement as HTMLElement;
       const tooltip = screen.getByRole('tooltip', h);
       expect(tooltip).toHaveTextContent('You need the Editor role');
@@ -427,7 +414,7 @@ describe('DateRangeInput', () => {
 
       const tooltip = screen.getByRole('tooltip', h);
       await user.tab();
-      expect(screen.getByRole('button', {name: /Range:/, ...h})).toHaveFocus();
+      expect(getButton(/Range:/)).toHaveFocus();
       await waitFor(() => {
         expect(tooltip).toHaveAttribute('popover-open');
       });
@@ -452,14 +439,14 @@ describe('DateRangeInput', () => {
 
     it('keeps the trigger focusable via aria-disabled when a reason is provided', () => {
       renderDisabled({disabledMessage: 'You need the Editor role'});
-      const trigger = screen.getByRole('button', {name: /Range:/, ...h});
+      const trigger = getButton(/Range:/);
       expect(trigger).not.toBeDisabled();
       expect(trigger).toHaveAttribute('aria-disabled', 'true');
     });
 
     it('links the reason tooltip from the trigger via aria-describedby', () => {
       renderDisabled({disabledMessage: 'You need the Editor role'});
-      const trigger = screen.getByRole('button', {name: /Range:/, ...h});
+      const trigger = getButton(/Range:/);
       const tooltip = screen.getByRole('tooltip', h);
       expect(trigger.getAttribute('aria-describedby')).toContain(tooltip.id);
     });
@@ -468,7 +455,7 @@ describe('DateRangeInput', () => {
       const user = userEvent.setup();
       renderDisabled({disabledMessage: 'You need the Editor role'});
 
-      const trigger = screen.getByRole('button', {name: /Range:/, ...h});
+      const trigger = getButton(/Range:/);
       await user.click(trigger);
       expect(trigger).toHaveAttribute('aria-expanded', 'false');
 
@@ -478,7 +465,7 @@ describe('DateRangeInput', () => {
 
     it('remains natively disabled when disabled without a reason', () => {
       renderDisabled();
-      const trigger = screen.getByRole('button', {name: /Range:/, ...h});
+      const trigger = getButton(/Range:/);
       expect(trigger).toBeDisabled();
       expect(trigger).not.toHaveAttribute('aria-disabled');
     });

package/src/DateRangeInput/DateRangeInput.tsx

@@ -146,8 +146,8 @@ const styles = stylex.create({
       },
     },
     fontFamily: typographyVars['--font-family-body'],
-    fontSize: typeScaleVars['--text-body-size'],
-    lineHeight: typeScaleVars['--text-body-leading'],
+    fontSize: typeScaleVars['--text-label-size'],
+    lineHeight: typeScaleVars['--text-label-leading'],
     color: colorVars['--color-text-primary'],
     cursor: 'pointer',
     textAlign: 'start',

package/src/DateTimeInput/DateTimeInput.doc.mjs

@@ -58,7 +58,7 @@ export const docs = {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the field focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled DateTimeInput in Tooltip — disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the field focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled DateTimeInput in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
     },
     {
       name: 'value',
@@ -118,7 +118,7 @@ export const docs = {
     },
     {
       name: 'timeIncrement',
-      type: 'number',
+      type: '1 | 5 | 10 | 15 | 30',
       description:
         'Minutes to add or subtract when using arrow keys in the time input.',
       default: '1',
@@ -413,7 +413,7 @@ export const docsZh = {
     },
     {
       name: 'timeIncrement',
-      type: 'number',
+      type: '1 | 5 | 10 | 15 | 30',
       description: '在时间输入中按箭头键时增减的分钟数。',
       default: '1',
     },
@@ -469,6 +469,7 @@ export const docsZh = {
       description:
         '用于布局自定义的 StyleX 样式。必须是 stylex.create() 的值。',
     },
+
   ],
   theming: {
     targets: [