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

package/CHANGELOG.md

@@ -1,5 +1,74 @@
 # @xds/core
 
+# 0.1.0
+
+#### Breaking Changes
+
+- Rename theme-token helpers off the XDS name
+  The `@xds/core/theme` token helpers are renamed: `resolveXDSThemeTokens` ->
+  `resolveThemeTokens`, `resolveXDSThemeToken` -> `resolveThemeToken`,
+  `xdsTokenVar` -> `tokenVar`, `xdsTokenVars` -> `tokenVars`, and the option types
+  `ResolveXDSThemeToken(s)Options` -> `ResolveThemeToken(s)Options`. Update imports
+  from `@xds/core/theme` / `@xds/core/theme/tokens`. Part of removing `xds` naming
+  from the public API.
+- Remove the XDS-prefix compatibility layer — astryx is now the only public surface
+  This release erases all `xds` naming from the public API; there is no compatibility
+  window. Consumers must migrate (we own all consumers pre-OSS):
+- Remove the daily, brutalist, and default themes; neutral is the new baseline
+  Three theme packages are removed from the repo and will no longer be published:
+
+#### New Features
+
+- Underline links by default in the Markdown component
+  Markdown links now render with a persistent underline instead of only underlining on hover, making links clearly distinguishable from surrounding text and improving accessibility. The accent color is unchanged.
+
+#### Fixes
+
+- Markdown: parse ordered lists using the `)` marker delimiter, not just `.` (#2994)
+  CommonMark 5.2 allows an ordered-list marker to end in `.` or `)` (e.g. `1)`), but the parser only matched `\d+\. `, so `1) First` lists rendered as literal paragraph text. Lists now capture their delimiter — a `.` → `)` change starts a new list, including across streamed chunks — and paragraph interruption follows CommonMark (only a marker value of 1, including zero-padded like `01.`, may interrupt).
+
+#### Other Changes
+
+- **Component names:** the `XDS*` aliases are gone — use bare names (`Button` not
+  `XDSButton`, `useTheme` not `useXDSTheme`, `ButtonProps` not `XDSButtonProps`). The
+  `drop-xds-prefix-imports` codemod automates this.
+- **CSS classes:** components emit only `.astryx-*` (the dual `.xds-*` class is gone).
+  Update custom CSS selectors `.xds-button` -> `.astryx-button` (prop/state value classes
+  like `.primary`/`.sm` are unchanged).
+- **data attributes:** only `data-astryx-theme` / `data-astryx-media` are written; update
+  custom selectors and SSR root attributes off `data-xds-*`.
+- **CSS layers:** `@layer xds-base` / `xds-theme` are renamed to `astryx-base` /
+  `astryx-theme`; update your `@layer` order line and any PostCSS `layersBefore` config.
+  `@astryxdesign/build`'s default library layer is now `astryx-base`.
+- **Pre-compiled stylesheet:** the `@astryxdesign/core/xds.css` export is removed — import
+  `@astryxdesign/core/astryx.css`.
+- **CSS custom properties:** the `--xds-*` padding fallback is gone; set `--astryx-*`.
+- **CLI config key:** `@astryxdesign/cli` reads the package.json `"astryx"` field (was `"xds"`).
+  Rename the block; a stale `"xds"` key silently drops the package from discovery.
+- `@astryxdesign/theme-daily`
+- `@astryxdesign/theme-brutalist`
+- `@astryxdesign/theme-default`
+- import {defaultTheme} from '@astryxdesign/theme-default/built';
+  - import {neutralTheme} from '@astryxdesign/theme-neutral/built';
+- <Theme theme={defaultTheme}>...</Theme>
+  - <Theme theme={neutralTheme}>...</Theme>
+  ```
+
+  ```
+- Rename the npm package scope from `@xds/*` to `@astryxdesign/*`
+  All published packages move to the new `@astryxdesign` scope (e.g. `@xds/core` → `@astryxdesign/core`), along with the workspace lockfile, build/runtime scope-directory scans, and docsite slug derivation. Consumers must update their imports and dependency names. The internal ESLint plugin namespace (`@xds/*` rules) is intentionally untouched and tracked separately. Existing `@xds/*` codemods continue to target the old scope so projects still on `@xds/*` can migrate.
+
+#### Contributors
+
+Thanks to everyone who contributed to this release:
+
+- @cixzhang
+- @ejhammond
+- @kentonquatman
+- @lexs
+
+---
+
 # 0.0.15
 
 This release makes **bare component names canonical**: `Button`, `Stack`, `useTheme`, etc. are now first-class, and the `XDS*` / `useXDS*` names become compatibility aliases. Existing prefixed code keeps working through the alias layer — migrate when you're ready with the codemod below. It also lands several prop/component renames for cross-component consistency, each with its own codemod.

package/README.md

@@ -51,9 +51,7 @@ npx astryx gap-report                   # report a missing capability
 | Package                                                                                               | Description                                                   |
 | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
 | [`@astryxdesign/cli`](https://github.com/facebook/astryx/tree/main/packages/cli)                      | CLI tooling: component docs, templates, scaffolding, codemods |
-| [`@astryxdesign/theme-default`](https://github.com/facebook/astryx/tree/main/packages/themes/default) | Default theme (Heroicons)                                     |
 | [`@astryxdesign/theme-neutral`](https://github.com/facebook/astryx/tree/main/packages/themes/neutral) | Muted, minimal theme (Lucide icons)                           |
-| [`@astryxdesign/theme-daily`](https://github.com/facebook/astryx/tree/main/packages/themes/daily)     | Warm, productivity-focused theme (Lucide icons)               |
 
 ## Resources
 
@@ -67,7 +65,7 @@ npx astryx gap-report                   # report a missing capability
 Install XDS and a theme:
 
 ```bash
-npm install @astryxdesign/core @astryxdesign/theme-default
+npm install @astryxdesign/core @astryxdesign/theme-neutral
 ```
 
 Then pick your setup below based on your framework and styling approach.
@@ -85,7 +83,7 @@ No build plugins needed; XDS ships pre-built CSS that works alongside Tailwind.
 @import 'tailwindcss/preflight.css' layer(base);
 @import '@astryxdesign/core/reset.css';
 @import '@astryxdesign/core/astryx.css';
-@import '@astryxdesign/theme-default/theme.css';
+@import '@astryxdesign/theme-neutral/theme.css';
 @import '@astryxdesign/core/tailwind-theme.css';
 @import 'tailwindcss/utilities.css' layer(utilities);
 ```
@@ -122,11 +120,11 @@ Spacing references `var(--spacing-1)` as the base unit, so `p-4` = 16px, matchin
 import Link from 'next/link';
 import {Theme} from '@astryxdesign/core/theme';
 import {LinkProvider} from '@astryxdesign/core/Link';
-import {defaultTheme} from '@astryxdesign/theme-default/built';
+import {neutralTheme} from '@astryxdesign/theme-neutral/built';
 
 export function Providers({children}: {children: React.ReactNode}) {
   return (
-    <Theme theme={defaultTheme}>
+    <Theme theme={neutralTheme}>
       <LinkProvider component={Link}>{children}</LinkProvider>
     </Theme>
   );
@@ -165,7 +163,7 @@ export default function Page() {
 Use the pre-built dist alongside StyleX for your own styles.
 
 ```bash
-npm install @astryxdesign/core @astryxdesign/theme-default
+npm install @astryxdesign/core @astryxdesign/theme-neutral
 ```
 
 **`src/app/globals.css`**
@@ -173,15 +171,15 @@ npm install @astryxdesign/core @astryxdesign/theme-default
 ```css
 @import '@astryxdesign/core/reset.css';
 @import '@astryxdesign/core/astryx.css';
-@import '@astryxdesign/theme-default/theme.css';
+@import '@astryxdesign/theme-neutral/theme.css';
 ```
 
-Providers and layout are the same as the Tailwind example (use `@astryxdesign/theme-default/built`).
+Providers and layout are the same as the Tailwind example (use `@astryxdesign/theme-neutral/built`).
 
 ### Vite
 
 ```bash
-npm install @astryxdesign/core @astryxdesign/theme-default
+npm install @astryxdesign/core @astryxdesign/theme-neutral
 ```
 
 Same CSS imports and providers as above. No build plugins needed; XDS ships pre-built.

package/dist/AlertDialog/AlertDialog.js

@@ -25,7 +25,7 @@ import { Heading } from "../Heading/Heading.js";
 import { Text } from "../Text/Text.js";
 import { Button } from "../Button/index.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A confirmation dialog for destructive or irreversible actions.
@@ -79,7 +79,7 @@ export function AlertDialog({
     role: "alertdialog",
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId,
-    ...mergeProps(xdsThemeProps('alert-dialog'), {
+    ...mergeProps(themeProps('alert-dialog'), {
       className,
       style
     }),

package/dist/AppShell/AppShell.js

@@ -36,7 +36,7 @@ import { AppShellMobileContext } from "./AppShellMobileContext.js";
 import { mergeProps, mergeRefs, isRenderable } from "../utils/index.js";
 import { useMediaQuery } from "../hooks/useMediaQuery.js";
 import { observeResize, unobserveResize } from "../utils/sharedResizeObserver.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const HasActivity = typeof React.Activity !== 'undefined';
 const ActivityWrapper = HasActivity ? ({
@@ -355,7 +355,7 @@ export function AppShell({
   }) : undefined;
   const headerContent = headerInner != null ? /*#__PURE__*/_jsx("div", {
     ref: headerRef,
-    ...mergeProps(xdsThemeProps('app-shell-header', {
+    ...mergeProps(themeProps('app-shell-header', {
       variant
     }), stylex.props(navAreaStyle, isAuto && styles.headerSticky)),
     children: headerInner
@@ -373,7 +373,7 @@ export function AppShell({
     padding: 0,
     hasDivider: navHasDividers,
     isScrollable: isFill,
-    ...xdsThemeProps('app-shell-sidenav', {
+    ...themeProps('app-shell-sidenav', {
       variant
     }),
     xstyle: [navAreaStyle, isAuto && stickyBgStyle, isAuto && styles.panelAutoFill],
@@ -424,7 +424,7 @@ export function AppShell({
   // For sidenav-only layouts with no TopNav, render the sideNav in topbar
   // mode — it shows heading + footer icons horizontally, with the hamburger
   const autoMobileTopBar = shouldShowAutoToggle && !hasTopNav && hasSideNav ? /*#__PURE__*/_jsx("div", {
-    ...mergeProps(xdsThemeProps('app-shell-header', {
+    ...mergeProps(themeProps('app-shell-header', {
       variant
     }), stylex.props(navAreaStyle, isAuto && styles.headerSticky)),
     children: /*#__PURE__*/_jsx(LayoutHeader, {
@@ -448,7 +448,7 @@ export function AppShell({
     children: /*#__PURE__*/_jsxs("div", {
       ref: mergeRefs(ref, shellRef),
       "data-testid": dataTestId,
-      ...mergeProps(xdsThemeProps('app-shell', {
+      ...mergeProps(themeProps('app-shell', {
         variant
       }), stylex.props(styles.root, variant === 'wash' ? styles.variantWash : variant === 'surface' ? styles.variantSurface : variant === 'section' ? styles.variantSection : styles.variantElevated, isFill ? styles.rootFill : styles.rootAuto, xstyle), className, style),
       children: [/*#__PURE__*/_jsx("a", {

package/dist/AspectRatio/AspectRatio.js

@@ -16,7 +16,7 @@
  */
 import * as stylex from '@stylexjs/stylex';
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /**
  * The shape of the aspect ratio container.
@@ -77,7 +77,7 @@ export function AspectRatio({
 }) {
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
-    ...mergeProps(xdsThemeProps('aspect-ratio', {
+    ...mergeProps(themeProps('aspect-ratio', {
       shape
     }), stylex.props(styles.container, shape === 'ellipse' && styles.ellipse, xstyle), className, {
       ...style,

package/dist/Avatar/Avatar.js

@@ -21,7 +21,7 @@ import { colorVars, typographyVars, fontWeightVars, radiusVars } from "../theme/
 import { AvatarSizeContext } from "./AvatarSizeContext.js";
 import { useAvatarGroup } from "../AvatarGroup/AvatarGroupContext.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /**
  * The offset ratio for positioning elements on a circle's edge at 45°.
@@ -258,7 +258,7 @@ export function Avatar({
       role: "img",
       "aria-label": accessibleName,
       "data-testid": testId,
-      ...mergeProps(xdsThemeProps('avatar', {
+      ...mergeProps(themeProps('avatar', {
         size: resolvedSize
       }), stylex.props(styles.wrapper, avatarGroup && groupStyles.ring, avatarGroup && groupStyles.overlap, avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap), xstyle), className, style),
       ...props,

package/dist/Avatar/AvatarStatusDot.js

@@ -20,7 +20,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars } from "../theme/tokens.stylex.js";
 import { AvatarSizeContext } from "./AvatarSizeContext.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /**
  * Resolves the status dot size, border width, and icon size based on the
@@ -180,7 +180,7 @@ export function AvatarStatusDot({
       role: 'img',
       'aria-label': label
     } : undefined),
-    ...mergeProps(xdsThemeProps('avatar-status-dot', {
+    ...mergeProps(themeProps('avatar-status-dot', {
       variant
     }), stylex.props(styles.dot, variantStyleMap[variant], dynamicStyles.size(dotSize, borderWidth), xstyle), className, style),
     ...props,

package/dist/AvatarGroup/AvatarGroup.js

@@ -22,7 +22,7 @@ import { resolveSize } from "../Avatar/index.js";
 import * as stylex from '@stylexjs/stylex';
 import { mergeProps } from "../utils/index.js";
 import { AvatarGroupContext } from "./AvatarGroupContext.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const OVERLAP_RATIO = 0.25;
 const styles = {
@@ -76,7 +76,7 @@ export function AvatarGroup({
       role: "group",
       "aria-label": ariaLabel,
       "data-testid": testId,
-      ...mergeProps(xdsThemeProps('avatar-group', {
+      ...mergeProps(themeProps('avatar-group', {
         size
       }), stylex.props(styles.root, xstyle), className, style),
       ...props,

package/dist/AvatarGroup/AvatarGroupOverflow.js

@@ -18,7 +18,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, typographyVars, fontWeightVars, radiusVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { useAvatarGroup } from "./AvatarGroupContext.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BORDER_WIDTH = 2;
 const OVERFLOW_FONT_RATIO = 0.35;
@@ -113,14 +113,14 @@ export function AvatarGroupOverflow({
       type: "button",
       onClick: onClick,
       "aria-label": label,
-      ...mergeProps(xdsThemeProps('avatar-group-overflow'), stylex.props(styles.base, styles.button, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), xstyle), className, style),
+      ...mergeProps(themeProps('avatar-group-overflow'), stylex.props(styles.base, styles.button, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), xstyle), className, style),
       children: content
     });
   }
   return /*#__PURE__*/_jsx("span", {
     ref: ref,
     "aria-label": label,
-    ...mergeProps(xdsThemeProps('avatar-group-overflow'), stylex.props(styles.base, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), xstyle), className, style),
+    ...mergeProps(themeProps('avatar-group-overflow'), stylex.props(styles.base, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), xstyle), className, style),
     children: content
   });
 }

package/dist/Badge/Badge.js

@@ -19,7 +19,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /**
  * Base badge styles
@@ -166,7 +166,7 @@ export function Badge({
 }) {
   return /*#__PURE__*/_jsxs("span", {
     ref: ref,
-    ...mergeProps(xdsThemeProps('badge', {
+    ...mergeProps(themeProps('badge', {
       variant
     }), stylex.props(styles.base, variants[variant], xstyle), className, style),
     ...props,

package/dist/Banner/Banner.d.ts

@@ -6,8 +6,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

package/dist/Banner/Banner.js

@@ -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
@@ -31,7 +31,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, fontWeightVars, typeScaleVars, borderVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { edgeCompSlot } from "../Layout/edgeCompensation.stylex.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Types
@@ -271,12 +271,12 @@ export function Banner({
     ...mergeProps(stylex.props(styles.root, xstyle), className, style),
     ...rest,
     children: [/*#__PURE__*/_jsxs("div", {
-      ...mergeProps(xdsThemeProps('banner', {
+      ...mergeProps(themeProps('banner', {
         container,
         status
       }), stylex.props(styles.header, isSingleLine && styles.headerCentered, statusStyles[status], isCard && (showContent ? styles.headerCardWithContent : styles.headerCardStandalone))),
       children: [/*#__PURE__*/_jsx("div", {
-        ...mergeProps(xdsThemeProps('banner-icon', {
+        ...mergeProps(themeProps('banner-icon', {
           status
         }), {
           className: "x78zum5 x6s0dn4 x2lah0s"
@@ -342,7 +342,7 @@ export function Banner({
         })]
       })]
     }), showContent && /*#__PURE__*/_jsx("div", {
-      ...mergeProps(xdsThemeProps('banner-content', {
+      ...mergeProps(themeProps('banner-content', {
         container,
         status
       }), {

package/dist/Blockquote/Blockquote.js

@@ -18,7 +18,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: {
@@ -57,7 +57,7 @@ export function Blockquote({
 }) {
   return /*#__PURE__*/_jsxs("blockquote", {
     ref: ref,
-    ...mergeProps(xdsThemeProps('blockquote'), stylex.props(styles.root, xstyle), className, style),
+    ...mergeProps(themeProps('blockquote'), stylex.props(styles.root, xstyle), className, style),
     ...props,
     children: [children, cite != null && /*#__PURE__*/_jsx("footer", {
       children: /*#__PURE__*/_jsx("cite", {

package/dist/Breadcrumbs/BreadcrumbItem.js

@@ -22,7 +22,7 @@ import { colorVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js
 import { BreadcrumbContext } from "./Breadcrumbs.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Props
@@ -129,7 +129,7 @@ export function BreadcrumbItem({
   if (isCurrent) {
     return /*#__PURE__*/_jsxs("li", {
       ref: mergeRefs(ref, liRef),
-      ...mergeProps(xdsThemeProps('breadcrumb-item'), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style),
+      ...mergeProps(themeProps('breadcrumb-item'), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style),
       "data-testid": testId,
       children: [/*#__PURE__*/_jsx("span", {
         "aria-hidden": "true",
@@ -156,7 +156,7 @@ export function BreadcrumbItem({
   // The effect handles adding aria-current for auto-last detection.
   return /*#__PURE__*/_jsxs("li", {
     ref: mergeRefs(ref, liRef),
-    ...mergeProps(xdsThemeProps('breadcrumb-item'), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style),
+    ...mergeProps(themeProps('breadcrumb-item'), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style),
     "data-testid": testId,
     children: [/*#__PURE__*/_jsx("span", {
       "aria-hidden": "true",

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -20,7 +20,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Variant type
@@ -115,7 +115,7 @@ export function Breadcrumbs({
     children: /*#__PURE__*/_jsx("nav", {
       ref: ref,
       "aria-label": label,
-      ...mergeProps(xdsThemeProps('breadcrumbs', {
+      ...mergeProps(themeProps('breadcrumbs', {
         variant
       }), stylex.props(navStyles.root, xstyle), className, style),
       ...rest,

package/dist/Button/Button.js

@@ -28,7 +28,7 @@ import { useSize } from "../SizeContext/SizeContext.js";
 import { useButtonGroup } from "../ButtonGroup/ButtonGroupContext.js";
 import { mergeProps } from "../utils/index.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /**
  * Base button styles
@@ -337,7 +337,7 @@ export function Button({
 
   // Shared StyleX props for both button and link rendering
   const sharedStylexProps = stylex.props(styles.base, sizeStyles[size], variants[variant], isIconOnly && styles.iconOnly, buttonDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && styles.pressable, buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical), xstyle);
-  const sharedMergedProps = mergeProps(xdsThemeProps('button', {
+  const sharedMergedProps = mergeProps(themeProps('button', {
     variant,
     size
   }), sharedStylexProps, className, style);

package/dist/ButtonGroup/ButtonGroup.js

@@ -25,7 +25,7 @@ import { SizeProvider, useSize } from "../SizeContext/SizeContext.js";
 import { useListFocus } from "../hooks/useListFocus.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { ButtonGroupContext } from "./ButtonGroupContext.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Props
@@ -104,7 +104,7 @@ export function ButtonGroup({
         "aria-orientation": orientation,
         "aria-disabled": isDisabled || undefined,
         "data-testid": testId,
-        ...mergeProps(xdsThemeProps('button-group', {
+        ...mergeProps(themeProps('button-group', {
           size,
           orientation
         }), stylex.props(styles.group, orientation === 'vertical' && styles.vertical, xstyle), className, style),

package/dist/Calendar/Calendar.js

@@ -31,7 +31,7 @@ import { computeDayCellState, computeRangeRounding, computePreviewRounding, isEn
 // Types
 // =============================================================================
 
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /** Imperative handle for Calendar handleRef */
 
@@ -231,7 +231,7 @@ export function Calendar({
   }, [mode, onChange, rangeSelectionStart]);
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
-    ...mergeProps(xdsThemeProps('calendar', {
+    ...mergeProps(themeProps('calendar', {
       mode
     }), stylex.props(calendarStyles.calendar, xstyle), className, style),
     onKeyDown: handleCalendarKeyDown,
@@ -589,7 +589,7 @@ function DayCell({
       onClick: () => !state.effectivelyDisabled && onDayClick(date),
       onMouseEnter: () => !state.effectivelyDisabled && onDayHover(date),
       onMouseLeave: () => onDayHover(null),
-      ...mergeProps(xdsThemeProps('calendar-day', {
+      ...mergeProps(themeProps('calendar-day', {
         selected: endpoint ? 'selected' : null,
         today: state.isToday ? 'today' : null,
         disabled: state.effectivelyDisabled ? 'disabled' : null,

package/dist/Card/Card.js

@@ -20,7 +20,7 @@ import { borderVars, colorVars, radiusVars } from "../theme/tokens.stylex.js";
 import { container } from "../Layout/container.stylex.js";
 import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Variant type
@@ -190,7 +190,7 @@ export function Card({
   const paddingToken = spacingStepToToken[effectivePadding];
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
-    ...mergeProps(xdsThemeProps('card', {
+    ...mergeProps(themeProps('card', {
       variant
     }), stylex.props(styles.card, variantStyles[variant], variant === 'default' && styles.withBorder, hasFixedHeight && styles.scrollable, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), ...container(useThemeDefault ? {
       useThemeDefault: 'card'

package/dist/Carousel/Carousel.js

@@ -24,7 +24,7 @@ import { Icon } from "../Icon/index.js";
 import { useLayer } from "../Layer/index.js";
 import { useScrollOverflow } from "../hooks/useScrollOverflow.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // =============================================================================
 // Styles
@@ -256,7 +256,7 @@ export function Carousel({
     role: "region",
     "aria-label": ariaLabel,
     "aria-roledescription": "carousel",
-    ...mergeProps(xdsThemeProps('carousel'), stylex.props(styles.root, xstyle), className, style),
+    ...mergeProps(themeProps('carousel'), stylex.props(styles.root, xstyle), className, style),
     ...htmlProps,
     children: [/*#__PURE__*/_jsx("div", {
       ref: composedRef,

package/dist/Center/Center.js

@@ -16,7 +16,7 @@
  */
 import * as stylex from '@stylexjs/stylex';
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   base: {
@@ -73,7 +73,7 @@ export function Center({
   ref,
   ...props
 }) {
-  const stylexProps = mergeProps(xdsThemeProps('center', {
+  const stylexProps = mergeProps(themeProps('center', {
     axis
   }), stylex.props(isInline ? styles.inline : styles.base, (axis === 'both' || axis === 'vertical') && styles.alignItemsCenter, (axis === 'both' || axis === 'horizontal') && styles.justifyContentCenter, dynamicStyles.sizing(width ?? null, height ?? null), xstyle), className, style);
   return /*#__PURE__*/_jsx("div", {

package/dist/Chat/ChatComposer.js

@@ -31,7 +31,7 @@ import { Icon } from "../Icon/index.js";
 import { ChatComposerInput } from "./ChatComposerInput.js";
 import { ChatComposerContext } from "./ChatContext.js";
 import { ChatSendButton } from "./ChatSendButton.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Types
@@ -182,7 +182,7 @@ export function ChatComposer(props) {
     value: composerContext,
     children: /*#__PURE__*/_jsxs("div", {
       ref: ref,
-      ...mergeProps(xdsThemeProps('chat-composer', {
+      ...mergeProps(themeProps('chat-composer', {
         density
       }), {
         0: {

package/dist/Chat/ChatComposerDrawer.js

@@ -20,7 +20,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { Badge } from "../Badge/index.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: {
@@ -81,7 +81,7 @@ export function ChatComposerDrawer({
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     "data-testid": testId,
-    ...mergeProps(xdsThemeProps('chat-composer-drawer', {
+    ...mergeProps(themeProps('chat-composer-drawer', {
       collapsed: isCollapsed ? 'collapsed' : null
     }), stylex.props(styles.root, xstyle), className, style),
     ...htmlProps,

package/dist/Chat/ChatComposerInput.js

@@ -33,7 +33,7 @@ import { ChatPastedTextToken } from "./ChatPastedTextToken.js";
 import { useChatPasteAsToken } from "./useChatPasteAsToken.js";
 import { Badge } from "../Badge/index.js";
 import { useChatComposerContext } from "./ChatContext.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Types
@@ -406,7 +406,7 @@ export function ChatComposerInput(props) {
   const maxHeight = maxRows * LINE_HEIGHT_PX;
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
-    ...mergeProps(xdsThemeProps('chat-composer-input'), stylex.props(styles.root, isDisabled && styles.disabled, xstyle), className, style),
+    ...mergeProps(themeProps('chat-composer-input'), stylex.props(styles.root, isDisabled && styles.disabled, xstyle), className, style),
     ...rest,
     children: [isEmpty && /*#__PURE__*/_jsx("div", {
       ...{