@astryxdesign/core 0.0.15 → 0.1.0-canary.08d4cf4

package/dist/theme/index.js

@@ -11,12 +11,12 @@
  * - Token exports for direct use in StyleX
  *
  * Themes are in separate packages:
- *   import { defaultTheme } from '@astryxdesign/theme-default';
+ *   import { neutralTheme } from '@astryxdesign/theme-neutral';
  *   import { neutralTheme } from '@astryxdesign/theme-neutral';
  */
 export { Theme } from "./Theme.js";
 export { MediaTheme } from "./MediaTheme.js";
-export { defineTheme, generateThemeCSS, generateThemeCSSFlat, generateOnMediaCSS, generateThemeRules, generateThemeRulesSplit, isDefinedTheme, xdsTokenDefaults } from "./defineTheme.js";
+export { defineTheme, generateThemeCSS, generateThemeCSSFlat, generateOnMediaCSS, generateThemeRules, generateThemeRulesSplit, isDefinedTheme, tokenDefaults } from "./defineTheme.js";
 export { syntaxTokenDefaults, domainTokenDefaults, dataTokenDefaults } from "./domainTokens/index.js";
 
 // Syntax theme API

package/dist/theme/syntax/defineSyntaxTheme.js

@@ -97,7 +97,7 @@ export function resolveSyntaxTokenForMode(value, mode) {
 export function defineSyntaxTheme(input) {
   const missing = ALL_SYNTAX_KEYS.filter(key => !(key in input.tokens));
   if (missing.length > 0) {
-    console.warn('[XDS] defineSyntaxTheme("' + input.name + '"): missing tokens: ' + missing.join(', ') + '. All 14 syntax tokens are required.');
+    console.warn('[Astryx] defineSyntaxTheme("' + input.name + '"): missing tokens: ' + missing.join(', ') + '. All 14 syntax tokens are required.');
   }
 
   // Resolve tuples to light-dark() CSS strings

package/dist/theme/tokens.d.ts

@@ -48,7 +48,7 @@ export declare const tokenVars: Record<TokenName, string>;
 /**
  * Resolve all Astryx token values for a theme and effective color mode.
  *
- * The result starts with `xdsTokenDefaults`, applies `theme.tokens`, then
+ * The result starts with `tokenDefaults`, applies `theme.tokens`, then
  * reapplies `theme.__inputTokens` when available so explicit tuple overrides
  * retain their original light/dark sides instead of relying on CSS parsing.
  * This mirrors the token resolution used by `useTheme()` but does not need

package/dist/theme/tokens.js

@@ -15,7 +15,7 @@
  * - /packages/core/src/theme/index.ts
  */
 
-import { xdsTokenDefaults } from "./defineTheme.js";
+import { tokenDefaults } from "./defineTheme.js";
 
 /** Resolved color mode used when choosing the side of light/dark token values. */
 
@@ -45,7 +45,7 @@ export function tokenVar(name) {
 }
 
 /** Flat map of every known Astryx token name to its `var(--token-name)` reference. */
-export const tokenVars = Object.fromEntries(Object.keys(xdsTokenDefaults).map(name => [name, tokenVar(name)]));
+export const tokenVars = Object.fromEntries(Object.keys(tokenDefaults).map(name => [name, tokenVar(name)]));
 
 /**
  * Split the arguments of a CSS function body on the first top-level comma.
@@ -118,7 +118,7 @@ function resolveXDSTokenValue(value, mode) {
 /**
  * Resolve all Astryx token values for a theme and effective color mode.
  *
- * The result starts with `xdsTokenDefaults`, applies `theme.tokens`, then
+ * The result starts with `tokenDefaults`, applies `theme.tokens`, then
  * reapplies `theme.__inputTokens` when available so explicit tuple overrides
  * retain their original light/dark sides instead of relying on CSS parsing.
  * This mirrors the token resolution used by `useTheme()` but does not need
@@ -131,7 +131,7 @@ export function resolveThemeTokens(theme, options) {
     mode
   } = options;
   const resolved = {};
-  for (const [key, value] of Object.entries(xdsTokenDefaults)) {
+  for (const [key, value] of Object.entries(tokenDefaults)) {
     resolved[key] = resolveXDSTokenValue(value, mode);
   }
   if (theme == null) {

package/dist/theme/useTheme.d.ts

@@ -30,7 +30,7 @@ export interface UseThemeReturn {
      * For tokens with [light, dark] tuples, returns the value matching
      * the current mode. For single-value tokens, returns the value as-is.
      *
-     * Falls back to xdsTokenDefaults if the token isn't overridden by the theme.
+     * Falls back to tokenDefaults if the token isn't overridden by the theme.
      *
      * @example
      * ```
@@ -42,7 +42,7 @@ export interface UseThemeReturn {
     /**
      * All tokens resolved for the current color mode.
      *
-     * Merges xdsTokenDefaults with the theme's overrides, resolving
+     * Merges tokenDefaults with the theme's overrides, resolving
      * light-dark() values based on the effective color mode.
      *
      * Memoized — stable reference unless theme or mode changes.

package/dist/utils/dateParser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dateParser.d.ts","sourceRoot":"","sources":["../../src/utils/dateParser.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAqC,MAAM,aAAa,CAAC;AAE/E,OAAO,EACL,gBAAgB,IAAI,QAAQ,EAC5B,cAAc,IAAI,SAAS,GAC5B,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAK1C;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAwF9D"}
+{"version":3,"file":"dateParser.d.ts","sourceRoot":"","sources":["../../src/utils/dateParser.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAqC,MAAM,aAAa,CAAC;AAE/E,OAAO,EACL,gBAAgB,IAAI,QAAQ,EAC5B,cAAc,IAAI,SAAS,GAC5B,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAK1C;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAsG9D"}

package/dist/utils/dateParser.js

@@ -112,10 +112,23 @@ export function parseDateInput(input) {
     return parseNumericDate(+first, +second, currentYear);
   }
 
-  // 6. Fall back to native Date parsing for other formats
+  // 6. Fall back to native Date parsing for other formats.
+  //
+  // Skip bare numeric input (e.g. "0", "1", "01", "2026"). These are
+  // in-progress values a user is still typing, not complete dates. Native
+  // `Date` parsing coerces them into arbitrary dates ("0" -> year 2000 in V8,
+  // year 0 in some engines), which is both surprising and — when the year
+  // resolves to 0 — produces an out-of-range date that throws downstream.
+  // Treat them as not-yet-a-valid-date instead.
+  if (/^\d+$/.test(trimmed)) {
+    return null;
+  }
   const parsed = new Date(trimmed);
   if (!isNaN(parsed.getTime())) {
-    return plainDateFromDate(parsed);
+    const fromDate = plainDateFromDate(parsed);
+    // Validate the result so we never return an out-of-range date (e.g. a
+    // year of 0), which would throw when later re-parsed.
+    return tryCreatePlainDate(fromDate.year, fromDate.month, fromDate.day);
   }
   return null;
 }

package/dist/utils/mergeProps.d.ts

@@ -2,7 +2,7 @@
  * Merge xds-* props, stylex.props result, and optional consumer className/style.
  *
  * stylex.props() returns { className, style }. This merges the Astryx stable
- * class name plus any data-attribute reflection from `xdsThemeProps()` with the
+ * class name plus any data-attribute reflection from `themeProps()` with the
  * StyleX class name so both StyleX styles and the theme-targeting surface are
  * applied.
  *
@@ -11,9 +11,9 @@
  *
  * @example
  * ```tsx
- * // Root element with xdsThemeProps
+ * // Root element with themeProps
  * <div {...mergeProps(
- *   xdsThemeProps('button', { variant }),
+ *   themeProps('button', { variant }),
  *   stylex.props(styles.base, variants[variant]),
  *   className,
  *   style,

package/dist/utils/mergeProps.js

@@ -4,7 +4,7 @@
  * Merge xds-* props, stylex.props result, and optional consumer className/style.
  *
  * stylex.props() returns { className, style }. This merges the Astryx stable
- * class name plus any data-attribute reflection from `xdsThemeProps()` with the
+ * class name plus any data-attribute reflection from `themeProps()` with the
  * StyleX class name so both StyleX styles and the theme-targeting surface are
  * applied.
  *
@@ -13,9 +13,9 @@
  *
  * @example
  * ```tsx
- * // Root element with xdsThemeProps
+ * // Root element with themeProps
  * <div {...mergeProps(
- *   xdsThemeProps('button', { variant }),
+ *   themeProps('button', { variant }),
  *   stylex.props(styles.base, variants[variant]),
  *   className,
  *   style,
@@ -53,7 +53,7 @@ function mergeTwoProps(base, overrides) {
 }
 export function mergeProps(xdsClassOrStylexResult, stylexResultOrClassName, classNameOrStyle, style) {
   // Disambiguate: first arg is string → (xdsClass, stylexResult, className?, style?)
-  // first arg is object → merge arbitrary props (supports xdsThemeProps + data attrs).
+  // first arg is object → merge arbitrary props (supports themeProps + data attrs).
   if (typeof xdsClassOrStylexResult === 'string') {
     const xdsClass = xdsClassOrStylexResult;
     const stylexResult = stylexResultOrClassName ?? {

package/dist/utils/parseStyleKey.d.ts

@@ -4,11 +4,11 @@
  * Used by both defineTheme (CSS generation) and components (class name rendering)
  * to ensure the same convention is applied consistently.
  *
- * <!-- SYNC: packages/core/src/utils/xdsThemeProps.ts -->
+ * <!-- SYNC: packages/core/src/utils/themeProps.ts -->
  *
  * Emits the legacy class-selector suffix used by defineTheme/component override
  * generation today. Components also reflect the same prop values as data
- * attributes via `xdsThemeProps()` (`variant:secondary` renders both `.secondary`
+ * attributes via `themeProps()` (`variant:secondary` renders both `.secondary`
  * and `[data-variant="secondary"]` in the DOM), but generated theme CSS still
  * uses these class selectors until the selector contract migrates fully.
  *

package/dist/utils/parseStyleKey.js

@@ -6,11 +6,11 @@
  * Used by both defineTheme (CSS generation) and components (class name rendering)
  * to ensure the same convention is applied consistently.
  *
- * <!-- SYNC: packages/core/src/utils/xdsThemeProps.ts -->
+ * <!-- SYNC: packages/core/src/utils/themeProps.ts -->
  *
  * Emits the legacy class-selector suffix used by defineTheme/component override
  * generation today. Components also reflect the same prop values as data
- * attributes via `xdsThemeProps()` (`variant:secondary` renders both `.secondary`
+ * attributes via `themeProps()` (`variant:secondary` renders both `.secondary`
  * and `[data-variant="secondary"]` in the DOM), but generated theme CSS still
  * uses these class selectors until the selector contract migrates fully.
  *

package/dist/utils/{xdsThemeProps.d.ts → themeProps.d.ts}

@@ -11,7 +11,7 @@ export type ThemeProps = {
  * literal prop values, including numeric values (`level: 1` → `data-level="1"`).
  * Nullish values are omitted.
  */
-export declare function xdsThemeDataAttributes(props?: ClassProps): ThemeDataAttributes;
+export declare function themeDataAttributes(props?: ClassProps): ThemeDataAttributes;
 /**
  * Build the props object components should spread onto the same element that
  * receives the stable Astryx class name.
@@ -20,9 +20,9 @@ export declare function xdsThemeDataAttributes(props?: ClassProps): ThemeDataAtt
  * surface. For example:
  *
  * ```ts
- * xdsThemeProps('button', { variant: 'primary', size: 'sm' })
+ * themeProps('button', { variant: 'primary', size: 'sm' })
  * // → { className: 'astryx-button primary sm', data-variant: 'primary', data-size: 'sm' }
  * ```
  */
-export declare function xdsThemeProps(component: string, props?: ClassProps): ThemeProps;
-//# sourceMappingURL=xdsThemeProps.d.ts.map
+export declare function themeProps(component: string, props?: ClassProps): ThemeProps;
+//# sourceMappingURL=themeProps.d.ts.map

package/dist/utils/themeProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeProps.d.ts","sourceRoot":"","sources":["../../src/utils/themeProps.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;AAC5D,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AACpD,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG;IAAC,SAAS,EAAE,MAAM,CAAA;CAAC,GAAG,mBAAmB,CAAC;AA6DnE;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,CAAC,EAAE,UAAU,GACjB,mBAAmB,CAarB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CACxB,SAAS,EAAE,MAAM,EACjB,KAAK,CAAC,EAAE,UAAU,GACjB,UAAU,CAKZ"}

package/dist/utils/{xdsThemeProps.js → themeProps.js}

@@ -14,7 +14,7 @@ function classTokenForPropValue(prop, value) {
  *
  * Every component renders a stable base class (`astryx-button`, `astryx-card`,
  * etc.) plus variant classes derived from visual props. Components also reflect
- * those visual props as data attributes via `xdsThemeProps()` (`data-variant`,
+ * those visual props as data attributes via `themeProps()` (`data-variant`,
  * `data-size`, `data-level`, etc.) so consumers target stable data-attribute
  * selectors rather than collision-prone bare class names.
  *
@@ -64,7 +64,7 @@ function buildClassName(component, props) {
  * literal prop values, including numeric values (`level: 1` → `data-level="1"`).
  * Nullish values are omitted.
  */
-export function xdsThemeDataAttributes(props) {
+export function themeDataAttributes(props) {
   const attrs = {};
   if (props) {
     for (const [prop, value] of Object.entries(props)) {
@@ -85,13 +85,13 @@ export function xdsThemeDataAttributes(props) {
  * surface. For example:
  *
  * ```ts
- * xdsThemeProps('button', { variant: 'primary', size: 'sm' })
+ * themeProps('button', { variant: 'primary', size: 'sm' })
  * // → { className: 'astryx-button primary sm', data-variant: 'primary', data-size: 'sm' }
  * ```
  */
-export function xdsThemeProps(component, props) {
+export function themeProps(component, props) {
   return {
     className: buildClassName(component, props),
-    ...xdsThemeDataAttributes(props)
+    ...themeDataAttributes(props)
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.0.15",
+  "version": "0.1.0-canary.08d4cf4",
   "displayName": "XDS Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -15,7 +15,7 @@
     "url": "https://github.com/facebook/astryx/issues"
   },
   "keywords": [
-    "xds",
+    "astryx",
     "design-system",
     "react",
     "components",

package/src/AlertDialog/AlertDialog.tsx

@@ -27,7 +27,7 @@ import {Text} from '../Text/Text';
 import {Button, type ButtonVariant} from '../Button';
 import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 export interface AlertDialogProps extends BaseProps<HTMLDialogElement> {
   ref?: React.Ref<HTMLDialogElement>;
@@ -151,7 +151,7 @@ export function AlertDialog({
       role="alertdialog"
       aria-labelledby={titleId}
       aria-describedby={descriptionId}
-      {...mergeProps(xdsThemeProps('alert-dialog'), {className, style})}
+      {...mergeProps(themeProps('alert-dialog'), {className, style})}
       xstyle={xstyle}
       data-testid={testId}>
       <Layout

package/src/AppShell/AppShell.tsx

@@ -52,7 +52,7 @@ import type {BaseProps} from '../BaseProps';
 import {mergeProps, mergeRefs, isRenderable} from '../utils';
 import {useMediaQuery} from '../hooks/useMediaQuery';
 import {observeResize, unobserveResize} from '../utils/sharedResizeObserver';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const HasActivity = typeof React.Activity !== 'undefined';
 const ActivityWrapper = HasActivity
@@ -667,7 +667,7 @@ export function AppShell({
       <div
         ref={headerRef}
         {...mergeProps(
-          xdsThemeProps('app-shell-header', {variant}),
+          themeProps('app-shell-header', {variant}),
           stylex.props(navAreaStyle, isAuto && styles.headerSticky),
         )}>
         {headerInner}
@@ -687,7 +687,7 @@ export function AppShell({
       padding={0}
       hasDivider={navHasDividers}
       isScrollable={isFill}
-      {...xdsThemeProps('app-shell-sidenav', {variant})}
+      {...themeProps('app-shell-sidenav', {variant})}
       xstyle={[
         navAreaStyle,
         isAuto && stickyBgStyle,
@@ -748,7 +748,7 @@ export function AppShell({
     shouldShowAutoToggle && !hasTopNav && hasSideNav ? (
       <div
         {...mergeProps(
-          xdsThemeProps('app-shell-header', {variant}),
+          themeProps('app-shell-header', {variant}),
           stylex.props(navAreaStyle, isAuto && styles.headerSticky),
         )}>
         <LayoutHeader padding={0} hasDivider={navHasDividers}>
@@ -771,7 +771,7 @@ export function AppShell({
         ref={mergeRefs(ref, shellRef)}
         data-testid={dataTestId}
         {...mergeProps(
-          xdsThemeProps('app-shell', {variant}),
+          themeProps('app-shell', {variant}),
           stylex.props(
             styles.root,
             variant === 'wash'

package/src/AspectRatio/AspectRatio.tsx

@@ -19,7 +19,7 @@ import type {ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 /**
  * The shape of the aspect ratio container.
@@ -123,7 +123,7 @@ export function AspectRatio({
     <div
       ref={ref}
       {...mergeProps(
-        xdsThemeProps('aspect-ratio', {shape}),
+        themeProps('aspect-ratio', {shape}),
         stylex.props(
           styles.container,
           shape === 'ellipse' && styles.ellipse,

package/src/Avatar/Avatar.tsx

@@ -27,7 +27,7 @@ import {
 import {AvatarSizeContext} from './AvatarSizeContext';
 import {useAvatarGroup} from '../AvatarGroup/AvatarGroupContext';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 /**
  * The offset ratio for positioning elements on a circle's edge at 45°.
@@ -310,7 +310,7 @@ export function Avatar({
         aria-label={accessibleName}
         data-testid={testId}
         {...mergeProps(
-          xdsThemeProps('avatar', {size: resolvedSize}),
+          themeProps('avatar', {size: resolvedSize}),
           stylex.props(
             styles.wrapper,
             avatarGroup && groupStyles.ring,

package/src/Avatar/AvatarStatusDot.tsx

@@ -21,7 +21,7 @@ import * as stylex from '@stylexjs/stylex';
 import {colorVars, radiusVars} from '../theme/tokens.stylex';
 import {AvatarSizeContext} from './AvatarSizeContext';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 /**
  * Resolves the status dot size, border width, and icon size based on the
@@ -196,7 +196,7 @@ export function AvatarStatusDot({
       ref={ref}
       {...(label ? {role: 'img', 'aria-label': label} : undefined)}
       {...mergeProps(
-        xdsThemeProps('avatar-status-dot', {variant}),
+        themeProps('avatar-status-dot', {variant}),
         stylex.props(
           styles.dot,
           variantStyleMap[variant],

package/src/AvatarGroup/AvatarGroup.tsx

@@ -24,7 +24,7 @@ import {resolveSize, type AvatarSize} from '../Avatar';
 import * as stylex from '@stylexjs/stylex';
 import {mergeProps} from '../utils';
 import {AvatarGroupContext} from './AvatarGroupContext';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const OVERLAP_RATIO = 0.25;
 
@@ -99,7 +99,7 @@ export function AvatarGroup({
         aria-label={ariaLabel}
         data-testid={testId}
         {...mergeProps(
-          xdsThemeProps('avatar-group', {size}),
+          themeProps('avatar-group', {size}),
           stylex.props(styles.root, xstyle),
           className,
           style,

package/src/AvatarGroup/AvatarGroupOverflow.tsx

@@ -24,7 +24,7 @@ import {
 import {mergeProps} from '../utils';
 import {useAvatarGroup} from './AvatarGroupContext';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 const BORDER_WIDTH = 2;
 const OVERFLOW_FONT_RATIO = 0.35;
@@ -148,7 +148,7 @@ export function AvatarGroupOverflow({
         onClick={onClick}
         aria-label={label}
         {...mergeProps(
-          xdsThemeProps('avatar-group-overflow'),
+          themeProps('avatar-group-overflow'),
           stylex.props(
             styles.base,
             styles.button,
@@ -171,7 +171,7 @@ export function AvatarGroupOverflow({
       ref={ref}
       aria-label={label}
       {...mergeProps(
-        xdsThemeProps('avatar-group-overflow'),
+        themeProps('avatar-group-overflow'),
         stylex.props(
           styles.base,
           styles.overlap,

package/src/Badge/Badge.tsx

@@ -27,7 +27,7 @@ import {
   typeScaleVars,
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 /**
  * Base badge styles
@@ -198,7 +198,7 @@ export function Badge({
     <span
       ref={ref}
       {...mergeProps(
-        xdsThemeProps('badge', {variant}),
+        themeProps('badge', {variant}),
         stylex.props(styles.base, variants[variant], xstyle),
         className,
         style,

package/src/Banner/Banner.tsx

@@ -10,8 +10,8 @@
  *
  * Visual structure:
  * - Root container: layout-only wrapper (flex column), no visual styling, no theme target
- * - Header area (xdsThemeProps 'banner'): colored status background with icon, title, description, actions, dismiss
- * - Content area (xdsThemeProps 'banner-content'): collapsible card background for additional content (children)
+ * - Header area (themeProps 'banner'): colored status background with icon, title, description, actions, dismiss
+ * - Content area (themeProps 'banner-content'): collapsible card background for additional content (children)
  * - No left border accent — color is expressed through the full header background
  * - Each visual area owns its own border-radius (no overflow:clip on the container)
  * - When children are provided, a collapse/expand toggle button appears in the end area
@@ -42,7 +42,7 @@ import {
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
 import {edgeCompSlot} from '../Layout/edgeCompensation.stylex';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Types
@@ -417,7 +417,7 @@ export function Banner({
       {/* Header: colored status background — primary theme target ('banner') */}
       <div
         {...mergeProps(
-          xdsThemeProps('banner', {container, status}),
+          themeProps('banner', {container, status}),
           stylex.props(
             styles.header,
             isSingleLine && styles.headerCentered,
@@ -430,7 +430,7 @@ export function Banner({
         )}>
         <div
           {...mergeProps(
-            xdsThemeProps('banner-icon', {status}),
+            themeProps('banner-icon', {status}),
             stylex.props(styles.iconWrapper),
           )}
           aria-hidden="true">
@@ -491,7 +491,7 @@ export function Banner({
       {showContent && (
         <div
           {...mergeProps(
-            xdsThemeProps('banner-content', {container, status}),
+            themeProps('banner-content', {container, status}),
             stylex.props(styles.contentArea, isCard && styles.contentAreaCard),
           )}>
           {children}

package/src/Blockquote/Blockquote.tsx

@@ -20,7 +20,7 @@ import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import {colorVars, spacingVars, typeScaleVars} from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 export interface BlockquoteProps extends BaseProps<HTMLQuoteElement> {
   /** Ref forwarded to the root <blockquote> element */
@@ -78,7 +78,7 @@ export function Blockquote({
     <blockquote
       ref={ref}
       {...mergeProps(
-        xdsThemeProps('blockquote'),
+        themeProps('blockquote'),
         stylex.props(styles.root, xstyle),
         className,
         style,

package/src/Breadcrumbs/BreadcrumbItem.tsx

@@ -30,7 +30,7 @@ import {useLinkComponent} from '../Link/useLinkComponent';
 import type {LinkComponentType} from '../Link/types';
 import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Props
@@ -231,7 +231,7 @@ export function BreadcrumbItem({
       <li
         ref={mergeRefs(ref, liRef)}
         {...mergeProps(
-          xdsThemeProps('breadcrumb-item'),
+          themeProps('breadcrumb-item'),
           stylex.props(
             itemStyles.root,
             isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize,
@@ -265,7 +265,7 @@ export function BreadcrumbItem({
     <li
       ref={mergeRefs(ref, liRef)}
       {...mergeProps(
-        xdsThemeProps('breadcrumb-item'),
+        themeProps('breadcrumb-item'),
         stylex.props(
           itemStyles.root,
           isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize,

package/src/Breadcrumbs/Breadcrumbs.tsx

@@ -21,7 +21,7 @@ import * as stylex from '@stylexjs/stylex';
 import {spacingVars} from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Variant type
@@ -165,7 +165,7 @@ export function Breadcrumbs({
         ref={ref}
         aria-label={label}
         {...mergeProps(
-          xdsThemeProps('breadcrumbs', {variant}),
+          themeProps('breadcrumbs', {variant}),
           stylex.props(navStyles.root, xstyle),
           className,
           style,

package/src/Button/Button.tsx

@@ -41,7 +41,7 @@ import {useButtonGroup} from '../ButtonGroup/ButtonGroupContext';
 import {mergeProps} from '../utils';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import type {LinkComponentType} from '../Link/types';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 /**
  * Base button styles
@@ -588,7 +588,7 @@ export function Button({
   );
 
   const sharedMergedProps = mergeProps(
-    xdsThemeProps('button', {variant, size}),
+    themeProps('button', {variant, size}),
     sharedStylexProps,
     className,
     style,

package/src/ButtonGroup/ButtonGroup.tsx

@@ -29,7 +29,7 @@ import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {ButtonGroupContext} from './ButtonGroupContext';
 import type {ButtonGroupOrientation} from './ButtonGroupContext';
-import {xdsThemeProps} from '../utils/xdsThemeProps';
+import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
 // Props
@@ -145,7 +145,7 @@ export function ButtonGroup({
           aria-disabled={isDisabled || undefined}
           data-testid={testId}
           {...mergeProps(
-            xdsThemeProps('button-group', {size, orientation}),
+            themeProps('button-group', {size, orientation}),
             stylex.props(
               styles.group,
               orientation === 'vertical' && styles.vertical,