@astryxdesign/core 0.4.4 → 0.4.5-canary.0472ec1

package/src/i18n/useCollator.doc.mjs

@@ -0,0 +1,84 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
+export const docs = {
+  name: 'useCollator',
+  displayName: 'useCollator',
+  category: 'utilities',
+  keywords: [
+    'i18n',
+    'internationalization',
+    'locale',
+    'collation',
+    'compare',
+    'sort',
+    'table',
+    'hook',
+  ],
+  params: [
+    {
+      name: 'options',
+      type: 'Intl.CollatorOptions',
+      description:
+        'Optional collation behavior such as numeric ordering, sensitivity, punctuation handling, and case order.',
+      required: false,
+    },
+  ],
+  returns: [
+    {
+      name: 'collator',
+      type: 'Intl.Collator',
+      description:
+        'A memoized collator bound to the active InternationalizationProvider locale.',
+    },
+  ],
+  usage: {
+    description:
+      'Returns the sanctioned locale-aware comparator for custom sorting. The collator is recreated when the provider locale or an option changes.',
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Reuse collator.compare in custom Table comparators and other user-visible string ordering.',
+      },
+      {
+        guidance: false,
+        description:
+          'Construct Intl.Collator directly or call localeCompare; those bypass the provider-backed locale contract.',
+      },
+    ],
+  },
+  relatedComponents: ['InternationalizationProvider', 'Table'],
+  relatedHooks: ['useLocale'],
+  importPath: '@astryxdesign/core',
+};
+
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
+export const docsDense = {
+  description:
+    'Returns a memoized Intl.Collator bound to the active InternationalizationProvider locale.',
+  paramDescriptions: {
+    options:
+      'optional Intl.CollatorOptions: numeric ordering, sensitivity, punctuation, case order, etc.',
+  },
+  returnDescriptions: {
+    collator:
+      'memoized provider-bound collator for locale-aware comparison and sorting.',
+  },
+  usage: {
+    description:
+      'Use collator.compare for custom user-visible string ordering instead of raw Intl.Collator or localeCompare.',
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Reuse collator.compare in custom Table comparators and string sorting.',
+      },
+      {
+        guidance: false,
+        description:
+          'Construct raw Intl.Collator or call localeCompare directly.',
+      },
+    ],
+  },
+};

package/src/i18n/useCollator.ts

@@ -0,0 +1,44 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useCollator.ts
+ * @input InternationalizationContext (via use()), optional Intl.CollatorOptions
+ * @output A memoized Intl.Collator bound to the active locale
+ * @position Public provider-aware string-comparison hook. Exported from the
+ *   i18n barrel for components, sibling packages, and consumers that need
+ *   locale-correct sorting without constructing a raw Intl.Collator. Raw
+ *   collator construction stays centralized in this hook.
+ *
+ * Falls back to `'en'` when called outside a provider, matching the
+ * useTranslator/useDirection/useLocale fallback.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/i18n/InternationalizationContext.ts
+ * - /packages/core/src/i18n/useLocale.ts
+ * - /packages/core/src/i18n/useCollator.doc.mjs
+ * - /packages/core/src/i18n/index.ts
+ * - /packages/core/src/i18n/__tests__/useCollator.test.tsx
+ */
+
+import {use, useMemo} from 'react';
+import {InternationalizationContext} from './InternationalizationContext';
+
+/**
+ * Returns an `Intl.Collator` for the active provider locale, memoized across
+ * renders where the locale and options object are unchanged.
+ *
+ * @example
+ * ```
+ * const collator = useCollator({numeric: true});
+ * const sorted = [...items].sort((a, b) => collator.compare(a.name, b.name));
+ * ```
+ */
+export function useCollator(options?: Intl.CollatorOptions): Intl.Collator {
+  const ctx = use(InternationalizationContext);
+  return useMemo(
+    () => new Intl.Collator(ctx.locale, options),
+    [ctx.locale, options],
+  );
+}

package/src/i18n/useLocale.doc.mjs

@@ -0,0 +1,70 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
+export const docs = {
+  name: 'useLocale',
+  displayName: 'useLocale',
+  category: 'utilities',
+  keywords: [
+    'i18n',
+    'internationalization',
+    'localization',
+    'locale',
+    'language',
+    'provider',
+    'hook',
+  ],
+  params: [],
+  returns: [
+    {
+      name: 'locale',
+      type: 'Locale',
+      description:
+        "The active InternationalizationProvider BCP 47 locale. Falls back to 'en' when no provider is present.",
+    },
+  ],
+  usage: {
+    description:
+      'Reads the authoritative Astryx locale. Use it to thread the provider locale into pure formatting helpers and sibling-package APIs; do not derive a second locale from navigator.language or a hardcoded literal.',
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Pass the returned locale to pure Astryx helpers or package APIs that require an explicit locale.',
+      },
+      {
+        guidance: false,
+        description:
+          'Use navigator.language or a hardcoded display locale as a fallback; InternationalizationProvider is the locale source.',
+      },
+    ],
+  },
+  relatedComponents: ['InternationalizationProvider'],
+  relatedHooks: ['useCollator', 'useTranslator', 'useDirection'],
+  importPath: '@astryxdesign/core',
+};
+
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
+export const docsDense = {
+  description:
+    "Returns the active InternationalizationProvider locale, falling back to 'en' without a provider.",
+  usage: {
+    description:
+      'Use as the sole locale source for pure formatting helpers and sibling-package APIs.',
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Thread this locale into pure helpers requiring an explicit locale.',
+      },
+      {
+        guidance: false,
+        description:
+          'Fall back to navigator.language or a hardcoded display locale.',
+      },
+    ],
+  },
+  returnDescriptions: {
+    locale: "active provider BCP 47 locale; 'en' without a provider.",
+  },
+};

package/src/i18n/useLocale.ts

@@ -0,0 +1,34 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useLocale.ts
+ * @input InternationalizationContext (via use())
+ * @output The active BCP 47 locale tag
+ * @position Public provider-aware locale accessor. Exported from the i18n
+ *   barrel for components, sibling packages, and consumers that must thread
+ *   the provider locale into pure formatting helpers. Returns `'en'` when
+ *   called outside a provider, matching useTranslator/useDirection.
+ *
+ * This is the approved way to read the locale that feeds a formatting helper
+ * (`plainDateFormat`, `formatInstant`, chart formatters, …) or `useCollator()`.
+ * Reading `InternationalizationContext` directly for just its `locale` field,
+ * or reaching for `navigator.language`/a hardcoded literal, bypasses that
+ * provider-backed contract.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/i18n/InternationalizationContext.ts
+ * - /packages/core/src/i18n/useLocale.doc.mjs
+ * - /packages/core/src/i18n/index.ts
+ * - /packages/core/src/i18n/__tests__/useLocale.test.tsx
+ */
+
+import {use} from 'react';
+import {InternationalizationContext} from './InternationalizationContext';
+import type {Locale} from './types';
+
+export function useLocale(): Locale {
+  const ctx = use(InternationalizationContext);
+  return ctx.locale;
+}

package/src/i18n/useTranslator.doc.mjs

@@ -4,7 +4,7 @@
 export const docs = {
   name: 'useTranslator',
   displayName: 'useTranslator',
-  group: 'Utilities',
+  category: 'utilities',
   keywords: [
     'i18n',
     'internationalization',

package/src/theme/defineTheme.test.ts

@@ -738,7 +738,9 @@ describe('pseudo-class overrides in components', () => {
     expect(css).toContain('.astryx-radio {');
     expect(css).toContain('border-color: #8F9296');
     // Pseudo rule — separate selector
-    expect(css).toContain('.astryx-radio:hover {');
+    expect(css).toContain(
+      '.astryx-radio:hover:where(:not(:disabled,[aria-disabled="true"])) {',
+    );
     expect(css).toContain(
       'border-color: color-mix(in srgb, #8F9296, black 20%)',
     );
@@ -764,7 +766,9 @@ describe('pseudo-class overrides in components', () => {
     const css = generateThemeTestCSS(theme);
     expect(css).toContain('.astryx-button.primary-muted {');
     expect(css).toContain('background-color: #ECF5FF');
-    expect(css).toContain('.astryx-button.primary-muted:hover {');
+    expect(css).toContain(
+      '.astryx-button.primary-muted:hover:where(:not(:disabled,[aria-disabled="true"])) {',
+    );
     expect(css).toContain('background-color: #D6EBFF');
     expect(css).toContain('.astryx-button.primary-muted:focus-visible {');
     expect(css).toContain('outline: 2px solid var(--color-accent)');
@@ -787,7 +791,9 @@ describe('pseudo-class overrides in components', () => {
     // Should NOT emit an empty base rule
     expect(css).not.toMatch(/\.astryx-switch\s*\{\s*\}/);
     // Should emit the pseudo rule
-    expect(css).toContain('.astryx-switch:hover {');
+    expect(css).toContain(
+      '.astryx-switch:hover:where(:not(:disabled,[aria-disabled="true"])) {',
+    );
   });
 
   it('keeps non-pseudo string values as regular properties', () => {

package/src/theme/defineTheme.ts

@@ -113,6 +113,11 @@ export type TokenValue = string | [light: string, dark: string];
  * to the component selector. Supported pseudo-classes include `:hover`,
  * `:focus-visible`, `:active`, `:checked`, `:disabled`, etc.
  *
+ * A `:hover` override describes the ENABLED control: it is emitted with a
+ * guard that keeps it off disabled and `aria-disabled` elements, which
+ * `:hover` would otherwise still match. Style the disabled state through
+ * `:disabled` instead.
+ *
  * @example
  * ```ts
  * {

package/src/theme/derivedVarRegistry.test.ts

@@ -85,6 +85,9 @@ const STRUCTURAL_VARS = new Set([
   '--table-row-overlay',
   '--separator-display',
   '--astryx-section-padding',
+  // Private counterpart of the public token above: one ancestor Section's
+  // padding, propagated down the tree. Structural, never authored by a theme.
+  '--_section-padding-propagated',
 ]);
 
 /**
@@ -164,9 +167,6 @@ function discoverComponents(): ComponentInfo[] {
         allVars.add(v);
       }
     }
-    if (allVars.size === 0) {
-      continue;
-    }
 
     // Only check component directories (those with a doc file named after the
     // directory). Match against the on-disk listing rather than existsSync so
@@ -188,6 +188,16 @@ function discoverComponents(): ComponentInfo[] {
       /* skip */
     }
 
+    // A directory earns a check by declaring a var OR by documenting a
+    // derived[] entry. Bailing on the var count alone (as this did) hid every
+    // component that is themeable purely through an expansion strategy —
+    // `{property: 'padding', expand: 'container'}` names no var, so such a
+    // component declares nothing and its registry↔doc consistency check
+    // silently never ran.
+    if (allVars.size === 0 && docDerived.length === 0) {
+      continue;
+    }
+
     results.push({
       dir,
       sourceVars: [...allVars],
@@ -212,6 +222,7 @@ const DIR_TO_REGISTRY_KEY: Record<string, string> = {
   DropdownMenu: 'dropdown-menu',
   Field: 'field',
   HoverCard: 'hovercard',
+  NumberInput: 'number-input',
   Popover: 'popover',
   ProgressBar: 'progressbar-mark',
   Section: 'section',
@@ -262,9 +273,12 @@ const VARS_WITHOUT_DERIVED_MAPPING = new Set([
   '--_avatar-group-overlap',
   '--_codeblock-gutter-width',
   '--_tab-indicator-bottom',
-  // Hit-area outset on a ::after overlay — `inset` on a pseudo-element is not
-  // a property a theme author sets on the component.
+  // Hit-area outset on a ::after overlay, and whether that overlay is
+  // generated at all — `inset` and `content` on a pseudo-element are not
+  // properties a theme author sets on the component.
   '--_thumbnail-hit-inset',
+  '--_input-clear-hit-inset',
+  '--_input-clear-hit-content',
   // Indentation and row-spacing metrics: --tree-list-indent is the authorable
   // step, --_tree-indent the per-row distance TreeListItem computes from it.
   // --tree-list-row-gap is applied as half a padding-block on each row wrapper,

package/src/theme/derivedVarRegistry.ts

@@ -67,6 +67,10 @@ export const derivedVarRegistry: Record<string, DerivedVarEntry[]> = {
   ],
   field: [{property: 'borderRadius', vars: ['--_field-radius']}],
   hovercard: [{property: 'borderRadius', vars: ['--_hovercard-radius']}],
+  'number-input': [
+    {property: 'padding', expand: 'container'},
+    {property: 'borderRadius', vars: ['--_field-radius']},
+  ],
   popover: [{property: 'borderRadius', vars: ['--_popover-radius']}],
   'progressbar-mark': [
     {property: 'width', vars: ['--_progressbar-mark-width'], replaces: true},

package/src/theme/generateThemeRules.test.ts

@@ -160,6 +160,45 @@ describe('generateThemeRules', () => {
     ).toBe(true);
   });
 
+  // A theme authoring `:hover` is describing the ENABLED control. Without a
+  // guard the rule paints a disabled one too, because browsers suppress a
+  // disabled control's events, not its hover styling — and a theme override
+  // would then reintroduce, on every component at once, the defect the
+  // components' own styles were fixed for.
+  it('keeps a themed :hover off disabled elements', () => {
+    const hoverTheme = defineTheme({
+      name: 'hover-guard',
+      components: {
+        button: {
+          base: {
+            ':hover': {color: 'red'},
+            ':focus-visible': {outline: '2px solid blue'},
+          },
+        },
+      },
+    });
+    const hoverRules = generateThemeRules(hoverTheme);
+    const hoverRule = hoverRules.find(rule => rule.includes(':hover'));
+    expect(hoverRule).toBeDefined();
+    expect(hoverRule).toContain(
+      '.astryx-button:hover:where(:not(:disabled,[aria-disabled="true"]))',
+    );
+    // Every selector in a comma-separated list carries its own guard —
+    // a trailing pseudo does not distribute over a selector list. (Counted,
+    // not split: the guard contains a comma of its own.)
+    const selectorText = String(hoverRule).split('{')[0];
+    const hovers = selectorText.match(/:hover/g) || [];
+    const guards = selectorText.match(/:where\(:not\(:disabled/g) || [];
+    expect(hovers.length).toBeGreaterThan(0);
+    expect(guards.length).toBe(hovers.length);
+    // Other pseudo-classes are untouched: a disabled control can still be
+    // focused (that is the point of aria-disabled), and :focus-visible on it
+    // is correct.
+    const focusRule = hoverRules.find(rule => rule.includes(':focus-visible'));
+    expect(focusRule).toContain('.astryx-button:focus-visible {');
+    expect(focusRule).not.toContain('aria-disabled');
+  });
+
   // --- Prose rules ---
 
   it('includes prose heading rules with computed values', () => {
@@ -584,3 +623,82 @@ describe('brutalist-style derived expansion', () => {
     expect(rule).toContain('--_dropdown-menu-padding: 4px');
   });
 });
+
+describe('physical padding longhands', () => {
+  const ruleFor = (
+    component: string,
+    base: Record<string, string>,
+    name = 'test-physical-padding',
+  ) =>
+    generateThemeRules(
+      defineTheme({name, components: {[component]: {base}}}),
+    ).find(r => r.includes(`.astryx-${component}`));
+
+  // `padding-top`/`padding-bottom` ARE the block edges in every horizontal
+  // writing mode, so the expansion can normalize them with no direction
+  // assumption. Without that, the padding lands raw on the element and the
+  // component's internals — the NumberInput stepper column, container bleed —
+  // read the default instead of what the theme set.
+  it.each([
+    ['paddingTop', {paddingTop: '14px'}, 'block-start'],
+    ['paddingBottom', {paddingBottom: '14px'}, 'block-end'],
+  ])('routes %s through the container expansion', (_label, base, edge) => {
+    const rule = ruleFor('card', base);
+    expect(rule).toContain(`--astryx-card-padding-${edge}: 14px`);
+    expect(rule).not.toMatch(/[{;]\s*padding-(top|bottom):/);
+  });
+
+  it('normalizes both block edges together, asymmetrically', () => {
+    const rule = ruleFor('number-input', {
+      paddingTop: '14px',
+      paddingBottom: '6px',
+    });
+    expect(rule).toContain('--astryx-number-input-padding-block-start: 14px');
+    expect(rule).toContain('--astryx-number-input-padding-block-end: 6px');
+  });
+
+  it.each(['card', 'dialog', 'section', 'number-input'])(
+    'reaches %s, which expands its padding',
+    component => {
+      expect(ruleFor(component, {paddingTop: '14px'})).toContain(
+        `--astryx-${component}-padding-block-start: 14px`,
+      );
+    },
+  );
+
+  // THE RTL GUARD. `paddingLeft` is inline-start in LTR and inline-end in RTL,
+  // and the tokens are consumed by logical properties, so mapping it would
+  // silently move the padding to the other edge in RTL. It stays physical —
+  // which is what the author wrote — and does not reach the tokens.
+  it('leaves the direction-relative inline pair physical', () => {
+    const rule = ruleFor('card', {paddingLeft: '20px', paddingRight: '8px'});
+    expect(rule).toContain('padding-left: 20px');
+    expect(rule).toContain('padding-right: 8px');
+    expect(rule).not.toContain('--astryx-card-padding-inline');
+  });
+
+  it('expands the block edges while leaving left physical', () => {
+    const rule = ruleFor('card', {paddingTop: '14px', paddingLeft: '20px'});
+    expect(rule).toContain('--astryx-card-padding-block-start: 14px');
+    expect(rule).toContain('padding-left: 20px');
+  });
+
+  // The shorthand-plus-override case was the worst one: the tokens carried
+  // 10px while the element painted 14px on top, so every internal compensated
+  // by the wrong amount.
+  it('lets a physical longhand override the shorthand per edge', () => {
+    const rule = ruleFor('card', {padding: '10px', paddingTop: '14px'});
+    expect(rule).toContain('--astryx-card-padding-block-start: 14px');
+    expect(rule).toContain('--astryx-card-padding-block-end: 10px');
+    expect(rule).toContain('--astryx-card-padding-inline: 10px');
+    expect(rule).not.toMatch(/[{;]\s*padding(-top)?:/);
+  });
+
+  // A `vars` entry carries one value for the whole box, so a single physical
+  // edge must not feed it — only the container expansion takes these.
+  it('does not feed a single edge to a whole-box derived var', () => {
+    const rule = ruleFor('dropdown-menu', {paddingTop: '14px'});
+    expect(rule).toContain('padding-top: 14px');
+    expect(rule).not.toContain('--_dropdown-menu-padding');
+  });
+});

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/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';