@astryxdesign/core 0.4.5 → 0.4.6-canary.cea9ecd

package/src/Center/Center.test.tsx

@@ -13,6 +13,22 @@ import {describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {Center} from './Center';
 
+/**
+ * The functional class output, as an order-insensitive set. StyleX's dev
+ * runtime also emits readable debug classes naming the style object a
+ * declaration came from ("padding__paddingBlockStyles.2"); those record
+ * provenance rather than applied CSS and survive even when the declaration
+ * they name loses a merge, so they are dropped here.
+ */
+function classSet(el: HTMLElement): Set<string> {
+  return new Set(
+    el.className
+      .split(' ')
+      .filter(Boolean)
+      .filter(c => !c.includes('__') && !c.includes('.')),
+  );
+}
+
 describe('Center', () => {
   it('renders and centers children (both axes by default)', () => {
     render(
@@ -207,4 +223,146 @@ describe('Center', () => {
     const element = screen.getByTestId('center');
     expect(element.tagName).toBe('DIV');
   });
+
+  it('applies a class when paddingBlockStart is set on its own', () => {
+    const {rerender} = render(
+      <Center data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const baseline = screen.getByTestId('center').className;
+    rerender(
+      <Center paddingBlockStart={2} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(screen.getByTestId('center').className).not.toBe(baseline);
+  });
+
+  it('lets paddingBlockStart/paddingBlockEnd override only their own edge', () => {
+    // padding={4} + paddingBlockStart={2} must equal spelling every edge out:
+    // both inline edges and the block-end edge stay at 4.
+    const {rerender} = render(
+      <Center padding={4} paddingBlockStart={2} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const perEdge = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center
+        paddingInline={4}
+        paddingBlockStart={2}
+        paddingBlockEnd={4}
+        data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(perEdge).toEqual(classSet(screen.getByTestId('center')));
+  });
+
+  it('gives paddingBlockEnd precedence over paddingBlock', () => {
+    const {rerender} = render(
+      <Center paddingBlock={6} paddingBlockEnd={0} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const overridden = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center paddingBlockStart={6} paddingBlockEnd={0} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(overridden).toEqual(classSet(screen.getByTestId('center')));
+  });
+
+  it('leaves padding/paddingBlock output unchanged when no edge prop is set', () => {
+    const {rerender} = render(
+      <Center padding={3} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const uniform = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center paddingInline={3} paddingBlock={3} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(uniform).toEqual(classSet(screen.getByTestId('center')));
+  });
+
+  it('applies a class when paddingInlineStart is set on its own', () => {
+    const {rerender} = render(
+      <Center data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const baseline = screen.getByTestId('center').className;
+    rerender(
+      <Center paddingInlineStart={2} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(screen.getByTestId('center').className).not.toBe(baseline);
+  });
+
+  it('lets paddingInlineStart/paddingInlineEnd override only their own edge', () => {
+    const {rerender} = render(
+      <Center padding={4} paddingInlineStart={2} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const perEdge = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center
+        paddingInlineStart={2}
+        paddingInlineEnd={4}
+        paddingBlock={4}
+        data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(perEdge).toEqual(classSet(screen.getByTestId('center')));
+  });
+
+  it('gives paddingInlineEnd precedence over paddingInline', () => {
+    const {rerender} = render(
+      <Center paddingInline={6} paddingInlineEnd={0} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const overridden = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center paddingInlineStart={6} paddingInlineEnd={0} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(overridden).toEqual(classSet(screen.getByTestId('center')));
+  });
+
+  it('resolves all four edges independently', () => {
+    // One prop per edge, each a different step: the four-edge spelling and the
+    // shorthand-plus-overrides spelling must agree.
+    const {rerender} = render(
+      <Center
+        paddingInlineStart={1}
+        paddingInlineEnd={2}
+        paddingBlockStart={3}
+        paddingBlockEnd={4}
+        data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const explicit = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center
+        padding={4}
+        paddingInlineStart={1}
+        paddingInlineEnd={2}
+        paddingBlockStart={3}
+        data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(explicit).toEqual(classSet(screen.getByTestId('center')));
+  });
 });

package/src/Center/Center.tsx

@@ -18,8 +18,10 @@ import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import type {SizeValue, SpacingStep} from '../utils/types';
 import {
-  paddingInlineStyles,
-  paddingBlockStyles,
+  paddingInlineStartStyles,
+  paddingInlineEndStyles,
+  paddingBlockStartStyles,
+  paddingBlockEndStyles,
 } from '../Layout/padding.stylex';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
@@ -106,12 +108,38 @@ export interface CenterProps extends BaseProps<HTMLDivElement> {
    */
   paddingInline?: SpacingStep;
 
+  /**
+   * Inline-start padding, using the spacing scale. Logical: the left edge in
+   * LTR, the right edge in RTL.
+   * Overrides `paddingInline` and `padding` on that edge only.
+   */
+  paddingInlineStart?: SpacingStep;
+
+  /**
+   * Inline-end padding, using the spacing scale. Logical: the right edge in
+   * LTR, the left edge in RTL.
+   * Overrides `paddingInline` and `padding` on that edge only.
+   */
+  paddingInlineEnd?: SpacingStep;
+
   /**
    * Block (vertical) padding, using the spacing scale.
    * Overrides `padding` on the block axis when both are set.
    */
   paddingBlock?: SpacingStep;
 
+  /**
+   * Block-start (top) padding, using the spacing scale.
+   * Overrides `paddingBlock` and `padding` on that edge only.
+   */
+  paddingBlockStart?: SpacingStep;
+
+  /**
+   * Block-end (bottom) padding, using the spacing scale.
+   * Overrides `paddingBlock` and `padding` on that edge only.
+   */
+  paddingBlockEnd?: SpacingStep;
+
   /**
    * Whether to make the container inline-flex (useful for text/icons).
    * @default false
@@ -145,7 +173,11 @@ export function Center({
   minHeight,
   padding,
   paddingInline,
+  paddingInlineStart,
+  paddingInlineEnd,
   paddingBlock,
+  paddingBlockStart,
+  paddingBlockEnd,
   isInline = false,
   children,
   xstyle,
@@ -154,10 +186,14 @@ export function Center({
   ref,
   ...props
 }: CenterProps) {
-  // Resolve padding to per-axis values: `padding` sets both axes; `paddingInline`
-  // / `paddingBlock` take precedence on their own axis when provided.
-  const resolvedPaddingInline = paddingInline ?? padding;
-  const resolvedPaddingBlock = paddingBlock ?? padding;
+  // Resolve padding to per-edge values. Most specific wins, per edge:
+  // edge prop -> axis prop -> `padding`.
+  const resolvedPaddingInlineStart =
+    paddingInlineStart ?? paddingInline ?? padding;
+  const resolvedPaddingInlineEnd = paddingInlineEnd ?? paddingInline ?? padding;
+  const resolvedPaddingBlockStart =
+    paddingBlockStart ?? paddingBlock ?? padding;
+  const resolvedPaddingBlockEnd = paddingBlockEnd ?? paddingBlock ?? padding;
 
   const stylexProps = mergeProps(
     themeProps('center', {axis}),
@@ -171,9 +207,14 @@ export function Center({
         maxWidth ?? null,
         minHeight ?? null,
       ),
-      resolvedPaddingInline != null &&
-        paddingInlineStyles[resolvedPaddingInline],
-      resolvedPaddingBlock != null && paddingBlockStyles[resolvedPaddingBlock],
+      resolvedPaddingInlineStart != null &&
+        paddingInlineStartStyles[resolvedPaddingInlineStart],
+      resolvedPaddingInlineEnd != null &&
+        paddingInlineEndStyles[resolvedPaddingInlineEnd],
+      resolvedPaddingBlockStart != null &&
+        paddingBlockStartStyles[resolvedPaddingBlockStart],
+      resolvedPaddingBlockEnd != null &&
+        paddingBlockEndStyles[resolvedPaddingBlockEnd],
       xstyle,
     ),
     className,

package/src/Chat/ChatComposer.tsx

@@ -152,7 +152,10 @@ const styles = stylex.create({
     gap: spacingVars['--spacing-2'],
     borderRadius: 'var(--_chat-composer-radius)',
     backgroundColor: colorVars['--color-background-popover'],
-    cursor: 'text',
+    cursor: {
+      default: 'text',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     transition: `box-shadow ${durationVars['--duration-fast']} ${easeVars['--ease-standard']}, border-color ${durationVars['--duration-fast']} ${easeVars['--ease-standard']}`,
   },
   header: {
@@ -273,7 +276,9 @@ const elevationStyles = stylex.create({
   low: {
     boxShadow: {
       default: shadowVars['--shadow-low'],
-      ':hover': {'@media (hover: hover)': shadowVars['--shadow-med']},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': shadowVars['--shadow-med'],
+      },
     },
     ':focus-within': {
       boxShadow: shadowVars['--shadow-med'],
@@ -292,9 +297,10 @@ const elevationStyles = stylex.create({
     padding: `calc(var(--_chat-composer-padding) - ${borderVars['--border-width']})`,
     boxShadow: {
       default: 'none',
-      ':hover:not(:focus-within)': {
-        '@media (hover: hover)': `inset 0px 0px 0px 2px color-mix(in srgb, ${colorVars['--color-border-emphasized']} 30%, transparent)`,
-      },
+      ':hover:not(:focus-within):where(:not(:disabled,[aria-disabled="true"]))':
+        {
+          '@media (hover: hover)': `inset 0px 0px 0px 2px color-mix(in srgb, ${colorVars['--color-border-emphasized']} 30%, transparent)`,
+        },
       ':focus-within': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
     },
   },

package/src/Chat/ChatComposerDrawer.tsx

@@ -117,7 +117,10 @@ const styles = stylex.create({
     height: spacingVars['--spacing-5'],
     paddingInline: spacingVars['--spacing-4'],
     marginInline: `calc(-1 * ${spacingVars['--spacing-4']})`,
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     userSelect: 'none',
   },
   toggleCollapsed: {},

package/src/Chat/ChatToolCalls.tsx

@@ -105,7 +105,10 @@ const styles = stylex.create({
     display: 'flex',
     alignItems: 'center',
     gap: spacingVars['--spacing-1-5'],
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     userSelect: 'none',
     minHeight: '24px',
     paddingBlock: spacingVars['--spacing-0-5'],
@@ -192,18 +195,24 @@ const styles = stylex.create({
     paddingBlock: spacingVars['--spacing-0-5'],
   },
   callRowClickable: {
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     borderRadius: radiusVars['--radius-element'],
     paddingInline: spacingVars['--spacing-1'],
     marginInline: `calc(-1 * ${spacingVars['--spacing-1']})`,
     '@media (hover: hover)': {
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         backgroundColor: colorVars['--color-overlay-hover'],
       },
     },
   },
   callRowToggle: {
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
   },
   statusIcon: {
     position: 'relative',

package/src/Chat/{useChatDictation.test.ts → useChatDictation.test.tsx}

@@ -1,7 +1,9 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+import type {ReactNode} from 'react';
 import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {renderHook, act} from '@testing-library/react';
+import {InternationalizationProvider} from '../i18n';
 import {useSpeechRecognition} from './useSpeechRecognition';
 import {useChatDictation} from './useChatDictation';
 
@@ -50,8 +52,7 @@ let originalSR: unknown;
 
 beforeEach(() => {
   lastInstance = null;
-  originalSR = (window as unknown as Record<string, unknown>)
-    .SpeechRecognition;
+  originalSR = (window as unknown as Record<string, unknown>).SpeechRecognition;
   (window as unknown as Record<string, unknown>).SpeechRecognition =
     MockSRConstructor;
 });
@@ -85,6 +86,28 @@ describe('useSpeechRecognition', () => {
     expect(result.current.isSupported).toBe(true);
   });
 
+  it('uses the provider locale by default and preserves an explicit override', () => {
+    const wrapper = ({children}: {children: ReactNode}) => (
+      <InternationalizationProvider locale="fr-FR">
+        {children}
+      </InternationalizationProvider>
+    );
+    const provider = renderHook(() => useSpeechRecognition(), {wrapper});
+
+    act(() => {
+      provider.result.current.start();
+    });
+    expect(lastInstance?.lang).toBe('fr-FR');
+
+    const explicit = renderHook(() => useSpeechRecognition({lang: 'ja-JP'}), {
+      wrapper,
+    });
+    act(() => {
+      explicit.result.current.start();
+    });
+    expect(lastInstance?.lang).toBe('ja-JP');
+  });
+
   it('starts and sets isListening', () => {
     const {result} = renderHook(() => useSpeechRecognition());
 
@@ -145,9 +168,7 @@ describe('useSpeechRecognition', () => {
     const onStart = vi.fn();
     const onEnd = vi.fn();
 
-    const {result} = renderHook(() =>
-      useSpeechRecognition({onStart, onEnd}),
-    );
+    const {result} = renderHook(() => useSpeechRecognition({onStart, onEnd}));
 
     act(() => {
       result.current.start();
@@ -194,9 +215,7 @@ describe('useSpeechRecognition', () => {
   it('handles interim results and updates interimTranscript', () => {
     const onTranscript = vi.fn();
 
-    const {result} = renderHook(() =>
-      useSpeechRecognition({onTranscript}),
-    );
+    const {result} = renderHook(() => useSpeechRecognition({onTranscript}));
 
     act(() => {
       result.current.start();
@@ -294,9 +313,7 @@ describe('useChatDictation', () => {
     const onStart = vi.fn();
     const onEnd = vi.fn();
 
-    const {result} = renderHook(() =>
-      useChatDictation({onStart, onEnd}),
-    );
+    const {result} = renderHook(() => useChatDictation({onStart, onEnd}));
 
     act(() => {
       result.current.start();
@@ -312,9 +329,7 @@ describe('useChatDictation', () => {
   it('handles final transcript via onResult', () => {
     const onResult = vi.fn();
 
-    const {result} = renderHook(() =>
-      useChatDictation({onResult}),
-    );
+    const {result} = renderHook(() => useChatDictation({onResult}));
 
     act(() => {
       result.current.start();

package/src/Chat/useChatDictation.ts

@@ -22,7 +22,7 @@ import {useSpeechRecognition} from './useSpeechRecognition';
 // =============================================================================
 
 export interface UseChatDictationOptions {
-  /** BCP-47 language tag. @default navigator.language */
+  /** BCP-47 language tag. @default InternationalizationProvider locale */
   lang?: string;
   /** Whether recognition continues until explicitly stopped. @default true */
   continuous?: boolean;

package/src/Chat/useSpeechRecognition.ts

@@ -14,14 +14,14 @@
  */
 
 import {useState, useCallback, useEffect, useMemo, useRef} from 'react';
-import {useTranslator} from '../i18n';
+import {useLocale, useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
 // =============================================================================
 
 export interface UseSpeechRecognitionOptions {
-  /** BCP-47 language tag. @default navigator.language */
+  /** BCP-47 language tag. @default InternationalizationProvider locale */
   lang?: string;
   /** Whether recognition continues until explicitly stopped. @default true */
   continuous?: boolean;
@@ -260,6 +260,7 @@ export function useSpeechRecognition(
   options: UseSpeechRecognitionOptions = {},
 ): UseSpeechRecognitionReturn {
   const t = useTranslator();
+  const providerLocale = useLocale();
   const {
     lang,
     continuous = true,
@@ -348,7 +349,7 @@ export function useSpeechRecognition(
     }
     recognitionRef.current?.abort();
     const recognition = new SR();
-    recognition.lang = lang ?? navigator.language;
+    recognition.lang = lang ?? providerLocale;
     recognition.continuous = continuous;
     recognition.interimResults = interimResults;
 
@@ -418,6 +419,7 @@ export function useSpeechRecognition(
     recognition.start();
   }, [
     lang,
+    providerLocale,
     continuous,
     interimResults,
     startVolumePolling,

package/src/Chat/useTriggerMenu.tsx

@@ -117,7 +117,10 @@ const styles = stylex.create({
     width: '100%',
     padding: spacingVars['--spacing-2'],
     borderRadius: radiusVars['--radius-element'],
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     outline: 'none',
     backgroundColor: 'transparent',
     border: 'none',

package/src/CheckboxInput/CheckboxInput.tsx

@@ -80,7 +80,10 @@ const styles = stylex.create({
     margin: 0,
     padding: 0,
     opacity: 0,
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     zIndex: 1,
     minInlineSize: {
       default: null,
@@ -104,7 +107,7 @@ const styles = stylex.create({
     },
   },
   inputDisabled: {
-    cursor: 'not-allowed',
+    cursor: 'default',
   },
   labelWrapper: {
     display: 'flex',

package/src/Citation/Citation.test.tsx

@@ -20,7 +20,12 @@ const probe = stylex.create({
   secondaryText: {color: colorVars['--color-text-secondary']},
   accentText: {color: colorVars['--color-text-accent']},
   badgeBackground: {backgroundColor: colorVars['--color-accent-muted']},
-  pointerCursor: {cursor: 'pointer'},
+  pointerCursor: {
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
+  },
 });
 
 function atomicClasses(style: (typeof probe)[keyof typeof probe]): string[] {

package/src/Citation/Citation.tsx

@@ -99,11 +99,14 @@ const styles = stylex.create({
     minWidth: 0,
   },
   labelInteractive: {
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
   },
   labelHover: {
     backgroundColor: {
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },
@@ -112,7 +115,7 @@ const styles = stylex.create({
       // the base secondary color from `label` (last-wins property merge),
       // leaving linked citations to inherit the surrounding text color.
       default: colorVars['--color-text-secondary'],
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-text-primary'],
       },
     },
@@ -137,7 +140,10 @@ const styles = stylex.create({
     transitionTimingFunction: easeVars['--ease-standard'],
   },
   numberInteractive: {
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
   },
   numberHover: {
     backgroundColor: {
@@ -145,7 +151,7 @@ const styles = stylex.create({
       // hover-only conditional replaces the base accent-muted pill from
       // `number` on merge, leaving linked badges transparent.
       default: colorVars['--color-accent-muted'],
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },

package/src/ClickableCard/ClickableCard.tsx

@@ -55,7 +55,10 @@ import {focusOutlineProps} from '../utils/focusOutline.stylex';
 const styles = stylex.create({
   interactive: {
     position: 'relative',
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     textDecoration: 'none',
     color: 'inherit',
   },
@@ -78,7 +81,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,13 +113,13 @@ 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'],
       },
     },
   },
   disabled: {
-    cursor: 'not-allowed',
+    cursor: 'default',
     opacity: 0.5,
   },
   srOnly: {

package/src/CodeBlock/CodeBlock.tsx

@@ -215,7 +215,10 @@ const styles = stylex.create({
     transform: 'rotate(90deg)',
   },
   headerCollapsible: {
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     userSelect: 'none',
     // Restore a keyboard-only focus ring with the standard token/offset so this
     // disclosure control matches the rest of the system (Collapsible, TabMenu);

package/src/Collapsible/Collapsible.tsx

@@ -65,7 +65,10 @@ const styles = stylex.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     width: '100%',
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     fontFamily: typographyVars['--font-family-body'],
     fontSize: typeScaleVars['--text-large-size'],
     fontWeight: fontWeightVars['--font-weight-semibold'],
@@ -84,7 +87,7 @@ const styles = stylex.create({
   // button blocks click + keyboard activation; these styles restore the
   // visual affordance that `all: unset` wipes.
   triggerDisabled: {
-    cursor: 'not-allowed',
+    cursor: 'default',
     opacity: 0.5,
   },
   // Chevron indicator