@astryxdesign/core 0.1.9 → 0.2.0-canary.0f56f82

package/src/reset.test.ts

@@ -0,0 +1,60 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * Tests for reset.css invariants that components rely on.
+ *
+ * reset.css is a plain stylesheet, so these tests assert on its source
+ * text (same approach as the reset.css baseline checks in
+ * theme/onMediaTokens.test.ts and AspectRatio/AspectRatio.test.tsx).
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+import {beforeAll, describe, expect, it} from 'vitest';
+
+describe('reset.css accessibility invariants', () => {
+  let ruleBlocks: {selector: string; body: string}[];
+
+  beforeAll(() => {
+    const resetCSS = fs.readFileSync(
+      path.resolve(__dirname, './reset.css'),
+      'utf-8',
+    );
+    // Strip comments, then collect every innermost `selector { body }`
+    // block. `[^{}]` keeps at-rule preludes (@media, @layer) out of the
+    // selector capture, since their own `{` terminates any earlier match.
+    const stripped = resetCSS.replace(/\/\*[\s\S]*?\*\//g, '');
+    ruleBlocks = [...stripped.matchAll(/([^{}]+)\{([^{}]*)\}/g)].map(
+      ([, selector, body]) => ({selector: selector.trim(), body}),
+    );
+  });
+
+  it('parses rule blocks out of reset.css', () => {
+    // Guards the WCAG assertion below against silently passing if the
+    // block parsing ever breaks.
+    expect(ruleBlocks.length).toBeGreaterThan(20);
+    expect(
+      ruleBlocks.some(({body}) => body.includes('box-sizing: border-box')),
+    ).toBe(true);
+  });
+
+  /**
+   * WCAG 2.4.7 (Focus Visible, Level AA): keyboard focus indicators must
+   * not be suppressed. `:focus-visible` only matches keyboard-style focus,
+   * so any `outline: none` on it removes the focus indicator for keyboard
+   * users — and a `@media (hover: none) and (pointer: coarse)` guard does
+   * not exempt keyboard users on coarse-pointer devices (iPad/phone with a
+   * Bluetooth keyboard, switch-control users).
+   */
+  it('does not suppress :focus-visible outlines (WCAG 2.4.7)', () => {
+    const focusVisibleBlocks = ruleBlocks.filter(({selector}) =>
+      selector.includes(':focus-visible'),
+    );
+    for (const {selector, body} of focusVisibleBlocks) {
+      expect
+        .soft(body, `":focus-visible" rule "${selector}" must keep the outline`)
+        .not.toMatch(/outline(?:-style|-width)?\s*:\s*(?:none|0)/);
+    }
+  });
+});

package/src/theme/derivedVarRegistry.test.ts

@@ -186,6 +186,7 @@ function discoverComponents(): ComponentInfo[] {
 // ---------------------------------------------------------------------------
 
 const DIR_TO_REGISTRY_KEY: Record<string, string> = {
+  Avatar: 'avatar',
   Banner: 'banner',
   Button: 'button',
   Card: 'card',

package/src/theme/derivedVarRegistry.ts

@@ -35,6 +35,12 @@ export interface DerivedVarEntry {
  * entries share the same property.
  */
 export const derivedVarRegistry: Record<string, DerivedVarEntry[]> = {
+  avatar: [
+    {property: 'fontSize', vars: ['--_avatar-fallback-font-size']},
+    {property: 'fontWeight', vars: ['--_avatar-fallback-font-weight']},
+    {property: 'color', vars: ['--_avatar-fallback-color']},
+    {property: 'backgroundColor', vars: ['--_avatar-fallback-background']},
+  ],
   banner: [{property: 'borderRadius', vars: ['--_banner-radius']}],
   button: [{property: 'borderRadius', vars: ['--_button-radius']}],
   card: [

package/src/theme/generateThemeRules.test.ts

@@ -385,6 +385,48 @@ describe('derived var expansion', () => {
     expect(rule).toContain('--_button-radius: 8px');
   });
 
+  it('emits internal vars for avatar fallback typography (base)', () => {
+    const theme = defineTheme({
+      name: 'test-derived-avatar',
+      components: {
+        avatar: {
+          base: {
+            fontWeight: 'var(--font-weight-normal)',
+            color: 'var(--color-text-secondary)',
+            backgroundColor: 'var(--color-accent-muted)',
+          },
+        },
+      },
+    });
+    const rules = generateThemeRules(theme);
+    const rule = rules.find(r => r.includes('.astryx-avatar'));
+    expect(rule).toBeDefined();
+    expect(rule).toContain(
+      '--_avatar-fallback-font-weight: var(--font-weight-normal)',
+    );
+    expect(rule).toContain(
+      '--_avatar-fallback-color: var(--color-text-secondary)',
+    );
+    expect(rule).toContain(
+      '--_avatar-fallback-background: var(--color-accent-muted)',
+    );
+  });
+
+  it('emits a per-size fallback font-size for avatar (size:sm)', () => {
+    const theme = defineTheme({
+      name: 'test-derived-avatar-size',
+      components: {
+        avatar: {
+          'size:sm': {fontSize: '9px'},
+        },
+      },
+    });
+    const rules = generateThemeRules(theme);
+    const rule = rules.find(r => r.includes('.astryx-avatar.sm'));
+    expect(rule).toBeDefined();
+    expect(rule).toContain('--_avatar-fallback-font-size: 9px');
+  });
+
   it('does not emit derived vars for components without registry entries', () => {
     const theme = defineTheme({
       name: 'test-no-derived',

package/src/utils/index.ts

@@ -98,3 +98,5 @@ export {
 export type {RGBA} from './color';
 
 export {devWarn, devError, warnOnce, formatDevMessage} from './devWarning';
+
+export {rtlStyles} from './rtlStyles';

package/src/utils/plainDate.test.ts

@@ -235,19 +235,37 @@ describe('plainDateAddMonths', () => {
     });
   });
 
-  it('overflows day into next month when target month is shorter', () => {
+  it('clamps to the last day when the target month is shorter', () => {
+    // Jan 31 + 1 month lands in February (clamped), not overflowed into
+    // March — matching Temporal.PlainDate.add and date-fns addMonths.
     expect(plainDateAddMonths({year: 2026, month: 1, day: 31}, 1)).toEqual({
       year: 2026,
-      month: 3,
-      day: 3,
+      month: 2,
+      day: 28,
     });
   });
 
-  it('overflows Jan 31 + 1 month in leap year', () => {
+  it('clamps to Feb 29 in a leap year', () => {
     expect(plainDateAddMonths({year: 2024, month: 1, day: 31}, 1)).toEqual({
       year: 2024,
-      month: 3,
-      day: 2,
+      month: 2,
+      day: 29,
+    });
+  });
+
+  it('clamps when subtracting into a shorter month', () => {
+    expect(plainDateAddMonths({year: 2026, month: 3, day: 31}, -1)).toEqual({
+      year: 2026,
+      month: 2,
+      day: 28,
+    });
+  });
+
+  it('clamps a 31st onto a 30-day month', () => {
+    expect(plainDateAddMonths({year: 2026, month: 5, day: 31}, 1)).toEqual({
+      year: 2026,
+      month: 6,
+      day: 30,
     });
   });
 });

package/src/utils/plainDate.ts

@@ -72,9 +72,14 @@ export function plainDateDayOfWeek(pd: PlainDate): number {
 }
 
 export function plainDateAddMonths(pd: PlainDate, n: number): PlainDate {
-  const d = plainDateToDate(pd);
-  d.setMonth(d.getMonth() + n);
-  return plainDateFromDate(d);
+  // Pure month arithmetic with day clamping (Temporal.PlainDate.add
+  // semantics): Jan 31 + 1 month is Feb 28/29, not Mar 2/3. Date#setMonth
+  // would overflow the excess days into the following month instead.
+  const totalMonths = pd.year * 12 + (pd.month - 1) + n;
+  const year = Math.floor(totalMonths / 12);
+  const month = (((totalMonths % 12) + 12) % 12) + 1;
+  const day = Math.min(pd.day, getDaysInMonth(year, month));
+  return {year, month, day};
 }
 
 export function plainDateAddDays(pd: PlainDate, n: number): PlainDate {
@@ -83,7 +88,16 @@ export function plainDateAddDays(pd: PlainDate, n: number): PlainDate {
   return plainDateFromDate(d);
 }
 
-function getTimeZoneParts(
+/**
+ * The wall-clock fields an instant reads as in a given zone.
+ *
+ * A fixed `'en-US'` locale with `hourCycle: 'h23'` keeps the parts numeric and
+ * stable whatever locale the viewer has, so callers can assemble machine
+ * shapes (`YYYY-MM-DD`, `HH:mm:ss`) from them. Exported for Timestamp, whose
+ * `system_*` formats are built from these fields rather than through `Intl`
+ * formatting.
+ */
+export function getTimeZoneParts(
   instant: number,
   timezoneID: string,
 ): {

package/src/utils/rtlStyles.ts

@@ -0,0 +1,27 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file rtlStyles.ts
+ * @input None
+ * @output Shared StyleX style that horizontally mirrors an element under RTL
+ * @position Core utility; applied to directional-icon wrappers in Calendar,
+ *   Lightbox, and the Table expand/disclosure plugins
+ *
+ * `mirror` flips its element on the horizontal axis only when an ancestor
+ * carries `dir="rtl"`. Using `scaleX(-1)` (not `scale(-1, -1)`) keeps the
+ * vertical axis intact, and applying it OUTSIDE any state-driven rotation lets
+ * it compose correctly — e.g. a Table disclosure chevron still rotates to point
+ * down when expanded under RTL. The `:is([dir="rtl"] *)` selector matches the
+ * MobileNav drawer convention; a bare `direction: rtl` alone won't trigger it.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/utils/index.ts
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+export const rtlStyles = stylex.create({
+  mirror: {
+    transform: {default: null, ':is([dir="rtl"] *)': 'scaleX(-1)'},
+  },
+});