@astryxdesign/core 0.4.5 → 0.4.6-canary.cea9ecd

package/src/theme/generateThemeRules.ts

@@ -46,12 +46,30 @@ function componentClassSelector(component: string, suffix: string): string {
   return `.${classPrefix}-${component}${suffix}`;
 }
 
+/**
+ * Guard appended to a themed `:hover` rule so it cannot match a disabled
+ * element.
+ *
+ * A theme authoring `':hover': {backgroundColor: …}` is describing the
+ * enabled control; `:hover` on its own would paint that background on a
+ * disabled one too, because browsers suppress a disabled control's events,
+ * not its hover styling. `:where()` contributes no specificity, so a themed
+ * hover rule still weighs exactly what it weighed before.
+ *
+ * Mirrors the `@astryx/no-hover-on-disabled` lint rule, which enforces the
+ * same guard on the components' own StyleX styles.
+ */
+const HOVER_DISABLED_GUARD = ':where(:not(:disabled,[aria-disabled="true"]))';
+
 /**
  * Append a pseudo-class to every selector in a comma-separated selector list.
  *
  * Selector helpers may emit comma-separated lists. CSS does not distribute a
  * trailing pseudo over selector lists, so `${list}:hover` would only target the
  * final selector. Rewrite each item so the pseudo applies to all of them.
+ *
+ * A `:hover` pseudo also picks up the disabled guard. A pseudo-ELEMENT has to
+ * end the selector, so the guard is spliced in before it.
  */
 function appendPseudoToSelectorList(selector: string, pseudo: string): string {
   const parts: string[] = [];
@@ -71,7 +89,22 @@ function appendPseudoToSelectorList(selector: string, pseudo: string): string {
   }
   parts.push(selector.slice(start).trim());
 
-  return parts.map(part => `${part}${pseudo}`).join(', ');
+  const guarded = guardHoverPseudo(pseudo);
+
+  return parts.map(part => `${part}${guarded}`).join(', ');
+}
+
+/** Insert the disabled guard into a `:hover` pseudo, keeping any pseudo-element last. */
+function guardHoverPseudo(pseudo: string): string {
+  if (!/^:hover(?![-\w])/.test(pseudo) || pseudo.includes('[aria-disabled')) {
+    return pseudo;
+  }
+  const pseudoElement = pseudo.indexOf('::');
+  return pseudoElement === -1
+    ? pseudo + HOVER_DISABLED_GUARD
+    : pseudo.slice(0, pseudoElement) +
+        HOVER_DISABLED_GUARD +
+        pseudo.slice(pseudoElement);
 }
 
 // =============================================================================
@@ -128,6 +161,34 @@ const PADDING_PROPS = new Set([
   'paddingInlineEnd',
 ]);
 
+/**
+ * Physical block-axis longhands, and the logical longhand each one *is* in
+ * every horizontal writing mode. Normalizing them costs no direction
+ * assumption, which is why they can join the container expansion.
+ *
+ * `paddingLeft`/`paddingRight` are deliberately absent. They are
+ * direction-relative — left is inline-start in LTR and inline-end in RTL — and
+ * the expansion's tokens are consumed by logical properties, so mapping them
+ * would put the padding on the opposite edge in RTL. They keep their physical
+ * meaning and land on the element as `padding-left`/`padding-right`; the cost
+ * is that a component's internals cannot see them.
+ */
+const PHYSICAL_BLOCK_PADDING_PROPS: Record<string, string> = {
+  paddingTop: 'paddingBlockStart',
+  paddingBottom: 'paddingBlockEnd',
+};
+
+/**
+ * Every padding spelling the container expansion consumes. Kept separate from
+ * PADDING_PROPS, which also routes longhands to `vars`-style derived entries —
+ * those carry one value for the whole box, so a single physical edge must not
+ * reach them.
+ */
+const CONTAINER_PADDING_PROPS = new Set([
+  ...PADDING_PROPS,
+  ...Object.keys(PHYSICAL_BLOCK_PADDING_PROPS),
+]);
+
 interface ParsedPadding {
   blockStart?: string;
   blockEnd?: string;
@@ -138,12 +199,14 @@ interface ParsedPadding {
 
 /**
  * Parse CSS padding shorthand/longhand into block/inline values.
- * Supports 1-3 value shorthands and logical properties.
+ * Supports 1-3 value shorthands, logical properties, and the physical block
+ * longhands normalized by PHYSICAL_BLOCK_PADDING_PROPS.
  */
 function parsePadding(props: [string, string][]): ParsedPadding {
   const result: ParsedPadding = {};
 
-  for (const [prop, value] of props) {
+  for (const [rawProp, value] of props) {
+    const prop = PHYSICAL_BLOCK_PADDING_PROPS[rawProp] ?? rawProp;
     switch (prop) {
       case 'padding': {
         const parts = value.trim().split(/\s+/);
@@ -377,13 +440,28 @@ function generateComponentRules(
             }
           }
         }
+        // A physical block longhand reaches the container expansion only. It
+        // names one edge, so it must not feed a `vars` entry above, which
+        // carries the padding for the whole box.
+        if (
+          prop in PHYSICAL_BLOCK_PADDING_PROPS &&
+          getDerivedVars(component, 'padding').some(
+            e => e.expand === 'container',
+          )
+        ) {
+          containerExpanded = true;
+        }
       }
 
       // Container padding expansion: replace padding props with
       // component-scoped container tokens for layout integration.
       if (containerExpanded) {
-        const paddingProps = props.filter(([p]) => PADDING_PROPS.has(p));
-        const nonPaddingProps = props.filter(([p]) => !PADDING_PROPS.has(p));
+        const paddingProps = props.filter(([p]) =>
+          CONTAINER_PADDING_PROPS.has(p),
+        );
+        const nonPaddingProps = props.filter(
+          ([p]) => !CONTAINER_PADDING_PROPS.has(p),
+        );
         const parsed = parsePadding(paddingProps);
         const containerTokens = expandContainerPadding(component, parsed);
         finalProps = [...nonPaddingProps, ...containerTokens];

package/src/theme/index.ts

@@ -17,7 +17,7 @@
 
 export {Theme} from './Theme';
 export {MediaTheme} from './MediaTheme';
-export type {MediaThemeProps} from './MediaTheme';
+export type {MediaThemeProps, MediaThemeMode} from './MediaTheme';
 export {
   defineTheme,
   generateThemeCSS,

package/src/theme/syntax/index.ts

@@ -1,10 +1,14 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file syntax/index.ts
  * @position Re-exports for the syntax theme subsystem
+ *
+ * No `'use client'` here on purpose. Most of what this barrel exports is data
+ * (presets, token defaults) or pure functions, and a directive on the barrel
+ * turns every export into a client reference for a server importer — so
+ * `dracula.tokens` reads back `undefined` instead of colors. `SyntaxTheme.tsx`
+ * carries its own directive, which is what the provider actually needs.
  */
 
 export {syntaxTokenDefaults} from './tokens';

package/src/theme/syntax/serverSafeSyntax.test.ts

@@ -0,0 +1,68 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Guards the server-safety of the `./theme/syntax` subpath.
+ * @input Reads the source files in this directory
+ * @output One invariant per module: only the provider carries `'use client'`
+ * @position Narrow sibling of src/serverSafeComponents.test.ts, which only
+ *   walks `./src/<Name>/index.ts` subpaths and so never sees this directory.
+ *
+ * `./theme/syntax` is the only export subpath for the syntax module, and it
+ * mixes a provider with presets, token defaults and pure functions. A
+ * directive on the barrel makes React hand a server importer a client
+ * reference for every one of those exports, so `dracula.tokens` reads back
+ * `undefined` — a silent failure far from its cause.
+ */
+
+import {describe, it, expect} from 'vitest';
+import {readdirSync, readFileSync} from 'node:fs';
+import {join} from 'node:path';
+
+/**
+ * The directives at the top of a module, in order. Comments and blank lines
+ * may precede them; the prologue ends at the first statement that is not a
+ * bare string literal, so a `'use strict';` cannot hide a later directive.
+ */
+function directives(file: string): string[] {
+  const source = readFileSync(join(__dirname, file), 'utf-8');
+  const found: string[] = [];
+  let rest = source;
+  for (;;) {
+    const trimmed = rest.replace(/^(?:\s+|\/\/[^\n]*|\/\*[\s\S]*?\*\/)+/, '');
+    const directive = /^(['"])([^'"]*)\1\s*;?/.exec(trimmed);
+    if (!directive) {
+      return found;
+    }
+    found.push(directive[2]);
+    rest = trimmed.slice(directive[0].length);
+  }
+}
+
+/**
+ * The modules in this directory that legitimately need a client boundary.
+ * Everything else is data or pure functions and must stay directive-free —
+ * derived from the directory, so a module added here is covered by default.
+ */
+const CLIENT_MODULES = ['SyntaxTheme.tsx'];
+
+const serverSafeModules = readdirSync(__dirname)
+  .filter(
+    name =>
+      /\.[jt]sx?$/.test(name) &&
+      !/\.(test|stories|doc|perf)\./.test(name) &&
+      !name.endsWith('.d.ts') &&
+      !CLIENT_MODULES.includes(name),
+  )
+  .sort();
+
+describe('./theme/syntax is importable from a server component', () => {
+  it.each(serverSafeModules)('%s carries no "use client"', file => {
+    expect(directives(file)).not.toContain('use client');
+  });
+
+  // Also the proof that the reader above is not blind, which would make every
+  // assertion in this file pass vacuously.
+  it.each(CLIENT_MODULES)('%s keeps the directive it needs', file => {
+    expect(directives(file)).toContain('use client');
+  });
+});

package/src/utils/dateParser.test.ts

@@ -277,6 +277,26 @@ describe('parseDateInput', () => {
     });
   });
 
+  describe('ambiguous numeric formats follow the passed locale (#5074)', () => {
+    // Both numbers are <= 12, so the day/month order is genuinely ambiguous
+    // and resolved by isLocaleDayFirst(locale) rather than the host locale.
+    it('reads month-first for en-US', () => {
+      expect(parseDateInput('3/4/2026', 'en-US')).toEqual({
+        year: 2026,
+        month: 3,
+        day: 4,
+      });
+    });
+
+    it('reads day-first for es-ES', () => {
+      expect(parseDateInput('3/4/2026', 'es-ES')).toEqual({
+        year: 2026,
+        month: 4,
+        day: 3,
+      });
+    });
+  });
+
   describe('edge cases', () => {
     it('returns null for empty string', () => {
       expect(parseDateInput('')).toBeNull();

package/src/utils/dateParser.ts

@@ -12,6 +12,7 @@
  */
 
 import {type PlainDate, plainDateCreate, plainDateFromDate} from './plainDate';
+import type {Locale} from '../i18n/types';
 
 export {
   plainDateFromISO as parseISO,
@@ -19,11 +20,13 @@ export {
 } from './plainDate';
 
 /**
- * Detects if the user's locale uses day-first date format (DD/MM/YYYY).
+ * Detects if the locale uses day-first date format (DD/MM/YYYY).
  * US and a few others use month-first (MM/DD/YYYY).
  */
-export function isLocaleDayFirst(): boolean {
-  const parts = new Intl.DateTimeFormat().formatToParts(new Date(2000, 0, 15));
+export function isLocaleDayFirst(locale?: Locale): boolean {
+  const parts = new Intl.DateTimeFormat(locale).formatToParts(
+    new Date(2000, 0, 15),
+  );
   const dayIndex = parts.findIndex(p => p.type === 'day');
   const monthIndex = parts.findIndex(p => p.type === 'month');
   return dayIndex < monthIndex;
@@ -43,7 +46,10 @@ export function isLocaleDayFirst(): boolean {
  *
  * @returns PlainDate if valid, null if unparseable
  */
-export function parseDateInput(input: string): PlainDate | null {
+export function parseDateInput(
+  input: string,
+  locale?: Locale,
+): PlainDate | null {
   const trimmed = input.trim();
   if (!trimmed) {
     return null;
@@ -114,14 +120,14 @@ export function parseDateInput(input: string): PlainDate | null {
     if (sep1 !== sep2) {
       return null;
     }
-    return parseNumericDate(+first, +second, +year);
+    return parseNumericDate(+first, +second, +year, locale);
   }
 
   // 5. Try numeric formats WITHOUT year (defaults to current year)
   const numericNoYearMatch = trimmed.match(/^(\d{1,2})[-/.](\d{1,2})$/);
   if (numericNoYearMatch) {
     const [, first, second] = numericNoYearMatch;
-    return parseNumericDate(+first, +second, currentYear);
+    return parseNumericDate(+first, +second, currentYear, locale);
   }
 
   // 6. Fall back to native Date parsing for other formats.
@@ -151,6 +157,7 @@ function parseNumericDate(
   first: number,
   second: number,
   year: number,
+  locale?: Locale,
 ): PlainDate | null {
   let day: number;
   let month: number;
@@ -164,7 +171,7 @@ function parseNumericDate(
   } else if (first > 12 && second > 12) {
     return null;
   } else {
-    if (isLocaleDayFirst()) {
+    if (isLocaleDayFirst(locale)) {
       day = first;
       month = second;
     } else {

package/src/utils/index.ts

@@ -47,6 +47,8 @@ export {
   DATE_FORMAT_SHORT_WITH_WEEKDAY,
   DATE_FORMAT_LONG,
   DATE_FORMAT_MONTH_YEAR,
+  DATE_FORMAT_MONTH_ONLY,
+  DATE_FORMAT_WEEKDAY_ONLY,
   DATE_FORMAT_SHORT,
   DATE_FORMAT_SHORT_WITH_YEAR,
   SHARED_DATE_FORMAT_OPTIONS,

package/src/utils/plainDate.test.ts

@@ -610,4 +610,10 @@ describe('formatSharedDate', () => {
   it('formats the ISO "system_date" shape', () => {
     expect(formatSharedDate(pd, 'system_date')).toBe('2026-01-25');
   });
+
+  it('follows the passed locale rather than the host locale (#5074)', () => {
+    expect(formatSharedDate(pd, 'date_long', 'es-ES')).toBe(
+      '25 de enero de 2026',
+    );
+  });
 });

package/src/utils/plainDate.ts

@@ -8,6 +8,7 @@
  */
 
 import type {ISODateString, PlainDate} from './dateTypes';
+import type {Locale} from '../i18n/types';
 
 export type {PlainDate} from './dateTypes';
 
@@ -277,6 +278,22 @@ export const DATE_FORMAT_MONTH_YEAR: Intl.DateTimeFormatOptions = {
   month: 'long',
 };
 
+// e.g. "Sun" (locale-dependent) — the weekday on its own, abbreviated.
+//
+// This is CLDR's `abbreviated` width, which `Intl` reaches natively. Note
+// that Calendar's 2-letter header ("Su") is CLDR's *short* width, a
+// different thing that `Intl` cannot express at all — which is why that one
+// needs the generated lookup table beside it and this one does not.
+export const DATE_FORMAT_WEEKDAY_ONLY: Intl.DateTimeFormatOptions = {
+  weekday: 'short',
+};
+
+// e.g. "January" (locale-dependent) — the month on its own, for a control
+// that shows a list of months and carries the year separately.
+export const DATE_FORMAT_MONTH_ONLY: Intl.DateTimeFormatOptions = {
+  month: 'long',
+};
+
 // e.g. "Jan 25" (locale-dependent)
 export const DATE_FORMAT_SHORT: Intl.DateTimeFormatOptions = {
   month: 'short',
@@ -293,10 +310,9 @@ export const DATE_FORMAT_SHORT_WITH_YEAR: Intl.DateTimeFormatOptions = {
 export function plainDateFormat(
   pd: PlainDate,
   options: Intl.DateTimeFormatOptions,
+  locale?: Locale,
 ): string {
-  return new Intl.DateTimeFormat(undefined, options).format(
-    plainDateToDate(pd),
-  );
+  return new Intl.DateTimeFormat(locale, options).format(plainDateToDate(pd));
 }
 
 // =============================================================================
@@ -344,9 +360,10 @@ export const SHARED_DATE_FORMAT_OPTIONS: Record<
 export function formatSharedDate(
   pd: PlainDate,
   format: SharedDateFormat,
+  locale?: Locale,
 ): string {
   if (format === 'system_date') {
     return plainDateToISO(pd);
   }
-  return plainDateFormat(pd, SHARED_DATE_FORMAT_OPTIONS[format]);
+  return plainDateFormat(pd, SHARED_DATE_FORMAT_OPTIONS[format], locale);
 }