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

package/dist/StatusDot/StatusDot.js

@@ -20,7 +20,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars } from "../theme/tokens.stylex.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /**
  * Pulse animation keyframes
@@ -128,7 +128,7 @@ export function StatusDot({
     ref: ref,
     role: "img",
     "aria-label": label,
-    ...mergeProps(xdsThemeProps('statusdot', {
+    ...mergeProps(themeProps('statusdot', {
       variant
     }), stylex.props(styles.base, variants[variant], isPulsing && styles.pulsing, isPulsing && styles.reducedMotion, xstyle), className, style),
     ...props

package/dist/Switch/Switch.js

@@ -25,7 +25,7 @@ import { Spinner } from "../Spinner/index.js";
 import { mergeProps } from "../utils/index.js";
 import "./switch.markers.stylex.js";
 import { switchScope } from "./switch.markers.stylex.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // Fixed dimensions: 40px width, 24px height, 16px thumb (off), 20px thumb (on)
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -167,7 +167,7 @@ export function Switch({
       }[!!isDisabled << 1 | !!isBusy << 0]
     }), /*#__PURE__*/_jsx("div", {
       "aria-hidden": "true",
-      ...mergeProps(xdsThemeProps('switch', {
+      ...mergeProps(themeProps('switch', {
         checked: isOn ? 'checked' : null,
         disabled: isDisabled ? 'disabled' : null
       }), {
@@ -221,7 +221,7 @@ export function Switch({
         }
       }[!!isOn << 3 | !!!isDisabled << 2 | !!isDisabled << 1 | !!(isDisabled && !isOn) << 0]),
       children: /*#__PURE__*/_jsx("div", {
-        ...mergeProps(xdsThemeProps('switch-thumb', {
+        ...mergeProps(themeProps('switch-thumb', {
           checked: isOn ? 'checked' : null
         }), {
           0: {
@@ -261,7 +261,7 @@ export function Switch({
     })
   });
   return /*#__PURE__*/_jsxs("div", {
-    ...mergeProps(xdsThemeProps('switch-field', {
+    ...mergeProps(themeProps('switch-field', {
       labelPosition: labelPosition !== 'end' ? labelPosition : undefined,
       labelSpacing: labelSpacing !== 'default' ? labelSpacing : undefined
     }), stylex.props(width != null && dynamicWidthStyles.width(width), xstyle), className, style),

package/dist/TabList/Tab.js

@@ -25,7 +25,7 @@ import { tabScope } from "./tab.markers.stylex.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { mergeProps } from "../utils/index.js";
 import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // =============================================================================
 // Styles
@@ -187,7 +187,7 @@ export function Tab({
     } : {}),
     [EDGE_COMP_ATTR]: '',
     'aria-current': isSelected ? 'page' : undefined,
-    ...mergeProps(xdsThemeProps('tab', {
+    ...mergeProps(themeProps('tab', {
       selected: isSelected ? 'selected' : null
     }), stylex.props(styles.base, sizeStyles[size], isSelected && styles.selected, isFill && layoutStyles.fill, tabScope, xstyle), className, style)
   };
@@ -196,7 +196,7 @@ export function Tab({
     ...stylex.props(styles.hoverBg, hoverSizeStyles[size])
   });
   const indicatorElement = /*#__PURE__*/_jsx("span", {
-    ...mergeProps(xdsThemeProps('tab-indicator', {
+    ...mergeProps(themeProps('tab-indicator', {
       selected: isSelected ? 'selected' : null
     }), {
       0: {

package/dist/TabList/TabList.js

@@ -22,7 +22,7 @@ import { TabListContext } from "./TabListContext.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { mergeProps } from "../utils/index.js";
 import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   nav: {
@@ -88,7 +88,7 @@ export function TabList({
       "aria-label": "Tabs",
       [EDGE_COMP_ATTR]: '',
       ...restProps,
-      ...mergeProps(xdsThemeProps('tab-list', {
+      ...mergeProps(themeProps('tab-list', {
         size
       }), stylex.props(styles.nav, layout === 'fill' && styles.fill, hasDivider && styles.divider, xstyle), className, style),
       children: children

package/dist/TabList/TabMenu.js

@@ -27,7 +27,7 @@ import { useTabListContext } from "./TabListContext.js";
 import "./tab.markers.stylex.js";
 import { tabScope } from "./tab.markers.stylex.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // =============================================================================
 // Styles
@@ -170,7 +170,7 @@ export function TabMenu({
       "aria-expanded": popover.isOpen,
       "aria-controls": menuId,
       onClick: handleToggle,
-      ...mergeProps(xdsThemeProps('tab-menu'), stylex.props(styles.trigger, sizeStyles[size], hasSelectedOption && styles.triggerSelected, tabScope, xstyle), className, style),
+      ...mergeProps(themeProps('tab-menu'), stylex.props(styles.trigger, sizeStyles[size], hasSelectedOption && styles.triggerSelected, tabScope, xstyle), className, style),
       children: [/*#__PURE__*/_jsx("span", {
         "aria-hidden": "true",
         ...stylex.props(styles.hoverBg, hoverSizeStyles[size])
@@ -206,7 +206,7 @@ export function TabMenu({
           color: "inherit"
         })
       }), hasSelectedOption && /*#__PURE__*/_jsx("span", {
-        ...mergeProps(xdsThemeProps('tab-indicator', {
+        ...mergeProps(themeProps('tab-indicator', {
           selected: 'selected'
         }), {
           className: "x10l6tqk xqmqy1e xnp31yv xmz3bnw x36qwtl xjspbzw x47corl xnpjden xuedmi6 xlr8y92 xowkcby x1hc1fzr"
@@ -218,7 +218,7 @@ export function TabMenu({
       role: "menu",
       "aria-label": label,
       onKeyDown: handleListKeyDown,
-      ...mergeProps(xdsThemeProps('tab-menu-dropdown'), {
+      ...mergeProps(themeProps('tab-menu-dropdown'), {
         className: "x78zum5 xdt5ytf x1lsbc85 xu0wf1k x7a5moj"
       }),
       children: [/*#__PURE__*/_jsx("span", {
@@ -240,7 +240,7 @@ export function TabMenu({
               handleSelect(option.value);
             }
           },
-          ...mergeProps(xdsThemeProps('tab-menu-item'), {
+          ...mergeProps(themeProps('tab-menu-item'), {
             0: {
               className: "x78zum5 x6s0dn4 x1qughib x1txdalj xce4md1 xrrkdod xh6dtrn xjb2p0i xcr08ib x1kq96og x1sodnla x1tgivj0 x1ypdohk x15406qy xuedmi6 xlr8y92 xjbqb8w xe9uy6x x17nn4n9"
             },

package/dist/Table/BaseTable.js

@@ -27,7 +27,7 @@ import { TableBody } from "./TableBody.js";
 import { mergeProps } from "../utils/index.js";
 import { EmptyState } from "../EmptyState/index.js";
 import { Text } from "../Text/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";
 const styles = {
   table: {
@@ -342,7 +342,7 @@ function BaseTableInner({
   let tableElement = /*#__PURE__*/_jsx("table", {
     ref: ref,
     ...tableRenderProps.htmlProps,
-    ...mergeProps(xdsThemeProps('base-table'), stylex.props(...tableRenderProps.styles), tableRenderProps.htmlProps.className),
+    ...mergeProps(themeProps('base-table'), stylex.props(...tableRenderProps.styles), tableRenderProps.htmlProps.className),
     style: tableStyle,
     children: children ? children : /*#__PURE__*/_jsxs(_Fragment, {
       children: [hasColumns && /*#__PURE__*/_jsx(TableHeader, {

package/dist/Table/Table.js

@@ -23,7 +23,7 @@ import { BaseTable } from "./BaseTable.js";
 import { TableContext } from "./TableContext.js";
 import { useBaseTablePlugins } from "./useBaseTablePlugins.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
 // Table Types
@@ -57,7 +57,7 @@ function TableScrollWrapper({
   children
 }) {
   return /*#__PURE__*/_jsx("div", {
-    ...mergeProps(xdsThemeProps('table-scroll-wrapper'), {
+    ...mergeProps(themeProps('table-scroll-wrapper'), {
       className: "xw2csxc x5lxg6s xojxgvx x1fcf3bl xx6qvi6 xkibk3 xlayyun"
     }),
     children: children
@@ -72,7 +72,7 @@ function buildTableStylePlugin() {
   return {
     transformTable(props) {
       const existingClass = props.htmlProps.className ?? '';
-      const tableClass = xdsThemeProps('table').className;
+      const tableClass = themeProps('table').className;
       return {
         ...props,
         htmlProps: {

package/dist/Table/TableBody.js

@@ -4,7 +4,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";
 export function TableBody({
   ref,
@@ -13,7 +13,7 @@ export function TableBody({
 }) {
   return /*#__PURE__*/_jsx("tbody", {
     ref: ref,
-    ...mergeProps(xdsThemeProps('table-body'), stylex.props(xstyle)),
+    ...mergeProps(themeProps('table-body'), stylex.props(xstyle)),
     children: children
   });
 }

package/dist/Table/TableCell.js

@@ -20,7 +20,7 @@ import "./table.stylex.js";
 import { overflowStyles, wrapStyles, containerEdgeStyles, tableRowMarker } from "./table.stylex.js";
 import { useTableContext, buildDividerStyles, mergeXStyle } from "./useTableCellStyles.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /** Props for TableCell — thin `<td>` wrapper */
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -105,7 +105,7 @@ export function TableCell({
     return /*#__PURE__*/_jsx("td", {
       ref: ref,
       ...props,
-      ...mergeProps(xdsThemeProps('table-cell'), stylex.props(xstyle), incomingClassName, incomingStyle),
+      ...mergeProps(themeProps('table-cell'), stylex.props(xstyle), incomingClassName, incomingStyle),
       children: children
     });
   }
@@ -113,7 +113,7 @@ export function TableCell({
   return /*#__PURE__*/_jsx("td", {
     ref: ref,
     ...props,
-    ...mergeProps(xdsThemeProps('table-cell'), stylex.props(...mergeXStyle(cellStyles, xstyle)), incomingClassName, incomingStyle),
+    ...mergeProps(themeProps('table-cell'), stylex.props(...mergeXStyle(cellStyles, xstyle)), incomingClassName, incomingStyle),
     children: children
   });
 }

package/dist/Table/TableFooter.js

@@ -4,7 +4,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";
 export function TableFooter({
   ref,
@@ -13,7 +13,7 @@ export function TableFooter({
 }) {
   return /*#__PURE__*/_jsx("tfoot", {
     ref: ref,
-    ...mergeProps(xdsThemeProps('table-footer'), stylex.props(xstyle)),
+    ...mergeProps(themeProps('table-footer'), stylex.props(xstyle)),
     children: children
   });
 }

package/dist/Table/TableHeader.js

@@ -4,7 +4,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";
 export function TableHeader({
   ref,
@@ -13,7 +13,7 @@ export function TableHeader({
 }) {
   return /*#__PURE__*/_jsx("thead", {
     ref: ref,
-    ...mergeProps(xdsThemeProps('table-header'), stylex.props(xstyle)),
+    ...mergeProps(themeProps('table-header'), stylex.props(xstyle)),
     children: children
   });
 }

package/dist/Table/TableHeaderCell.js

@@ -19,7 +19,7 @@ import { colorVars, spacingVars, fontWeightVars, typeScaleVars, borderVars } fro
 import { overflowStyles, containerEdgeStyles } from "./table.stylex.js";
 import { useTableContext, mergeXStyle } from "./useTableCellStyles.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /** Props for TableHeaderCell — `<th>` wrapper with context-aware styling */
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -103,7 +103,7 @@ export function TableHeaderCell({
     return /*#__PURE__*/_jsx("th", {
       ref: ref,
       ...props,
-      ...mergeProps(xdsThemeProps('table-header-cell'), stylex.props(xstyle), incomingClassName, incomingStyle),
+      ...mergeProps(themeProps('table-header-cell'), stylex.props(xstyle), incomingClassName, incomingStyle),
       children: children
     });
   }
@@ -120,7 +120,7 @@ export function TableHeaderCell({
   return /*#__PURE__*/_jsx("th", {
     ref: ref,
     ...props,
-    ...mergeProps(xdsThemeProps('table-header-cell'), stylex.props(...mergeXStyle(cellStyles, xstyle)), incomingClassName, incomingStyle),
+    ...mergeProps(themeProps('table-header-cell'), stylex.props(...mergeXStyle(cellStyles, xstyle)), incomingClassName, incomingStyle),
     children: children
   });
 }

package/dist/Table/TableRow.js

@@ -20,7 +20,7 @@ import { colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { tableRowMarker } from "./table.stylex.js";
 import { TableContext } from "./TableContext.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /** Props for TableRow — thin `<tr>` wrapper */
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -76,7 +76,7 @@ export function TableRow({
     return /*#__PURE__*/_jsx("tr", {
       ref: ref,
       ...props,
-      ...mergeProps(xdsThemeProps('table-row'), stylex.props(tableRowMarker, xstyle)),
+      ...mergeProps(themeProps('table-row'), stylex.props(tableRowMarker, xstyle)),
       children: children
     });
   }
@@ -100,7 +100,7 @@ export function TableRow({
   return /*#__PURE__*/_jsx("tr", {
     ref: ref,
     ...props,
-    ...mergeProps(xdsThemeProps('table-row'), stylex.props(tableRowMarker, ...rowStyles)),
+    ...mergeProps(themeProps('table-row'), stylex.props(tableRowMarker, ...rowStyles)),
     children: children
   });
 }

package/dist/Text/Text.js

@@ -20,7 +20,7 @@ import * as stylex from '@stylexjs/stylex';
 import { colorStyles, defaultWeightByTypeStyles, sizeByTypeStyles, weightStyles, displayStyles, justifyStyles, truncationStyles, wordBreakStyles, textWrapStyles, capsizeStyles, decorationStyles, tabularNumbersStyle, truncationTooltipStyles } from "./text.stylex.js";
 import { useTruncation } from "./useTruncation.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";
 const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import('../Tooltip/Tooltip').then(mod => ({
   default: mod.Tooltip
@@ -118,7 +118,7 @@ export function Text({
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Component, {
       ref: mergeRefs(ref, truncation.ref, textRef),
-      ...mergeProps(xdsThemeProps('text', {
+      ...mergeProps(themeProps('text', {
         type,
         color: resolvedColor
       }), stylex.props(colorStyles[resolvedColor], sizeByTypeStyles[styleType], defaultWeightByTypeStyles[styleType], weight && weightStyles[weight],

package/dist/TextArea/TextArea.js

@@ -25,7 +25,7 @@ import { Spinner } from "../Spinner/index.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
 import { useSize } from "../SizeContext/SizeContext.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 COUNTER_WARNING_THRESHOLD = 0.8;
 const styles = {
@@ -150,7 +150,7 @@ export function TextArea({
       ref: containerRef,
       onClick: handleWrapperClick,
       onMouseUp: handleWrapperMouseUp,
-      ...mergeProps(xdsThemeProps('textarea', {
+      ...mergeProps(themeProps('textarea', {
         size,
         status: status?.type ?? null
       }), stylex.props(inputWrapperStyles.base, styles.wrapper, textareaSizeStyles[size], effectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], xstyle), className, style),

package/dist/TextInput/TextInput.js

@@ -44,7 +44,7 @@ import { mergeProps, mergeRefs } from "../utils/index.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
 import { useInputGroup } from "../InputGroup/InputGroupContext.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 text input component for collecting user input.
@@ -135,7 +135,7 @@ export function TextInput({
     ref: containerRef,
     onClick: handleWrapperClick,
     onMouseUp: handleWrapperMouseUp,
-    ...mergeProps(xdsThemeProps('text-input', {
+    ...mergeProps(themeProps('text-input', {
       size,
       status: status?.type ?? null
     }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, xstyle), className, style),

package/dist/Thumbnail/Thumbnail.js

@@ -31,7 +31,7 @@ import { Tooltip } from "../Tooltip/Tooltip.js";
 import { MediaTheme } from "../theme/MediaTheme.js";
 import { useImageMode } from "../hooks/useImageMode.js";
 import { mergeProps } from "../utils/index.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 
 /** Sample the region behind the remove button (20px button, 4px inset, in 64px container). */
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -170,7 +170,7 @@ export function Thumbnail({
     ref: ref,
     "data-testid": testId,
     "aria-label": accessibleName,
-    ...mergeProps(xdsThemeProps('thumbnail'), stylex.props(styles.root, isDisabled && styles.disabled, xstyle), className, style),
+    ...mergeProps(themeProps('thumbnail'), stylex.props(styles.root, isDisabled && styles.disabled, xstyle), className, style),
     ...props,
     children: /*#__PURE__*/_jsxs("div", {
       ...{

package/dist/TimeInput/TimeInput.js

@@ -25,7 +25,7 @@ import { Spinner } from "../Spinner/index.js";
 import { parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, adjustTime, isTimeInRange, mergeProps, mergeRefs } from "../utils/index.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { useInputContainer } from "../hooks/useInputContainer.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 sizeStyles = {
   sm: {
@@ -262,7 +262,7 @@ export function TimeInput({
       ref: containerRef,
       onClick: handleWrapperClick,
       onMouseUp: handleWrapperMouseUp,
-      ...mergeProps(xdsThemeProps('time-input', {
+      ...mergeProps(themeProps('time-input', {
         size,
         status: status?.type ?? null
       }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], xstyle), className, style),

package/dist/Timestamp/Timestamp.js

@@ -19,7 +19,7 @@ import { useEffect, useRef, useState, lazy, Suspense } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { Text } from "../Text/index.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";
 const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import('../Tooltip/Tooltip').then(mod => ({
   default: mod.Tooltip
@@ -260,7 +260,7 @@ export function Timestamp({
     return () => clearInterval(timer);
   }, [isLive, effectiveFormat, diffSeconds]);
   const showTooltip = hasTooltip && effectiveFormat === 'relative';
-  const timestampProps = mergeProps(xdsThemeProps('timestamp', {
+  const timestampProps = mergeProps(themeProps('timestamp', {
     format: effectiveFormat
   }), {
     className,

package/dist/Toast/Toast.js

@@ -11,7 +11,7 @@ import { colorVars, spacingVars, radiusVars, durationVars, easeVars, shadowVars,
 import { mergeProps } from "../utils/index.js";
 import { useTheme } from "../theme/index.js";
 import { MediaTheme } from "../theme/MediaTheme.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Individual toast notification.
@@ -106,7 +106,7 @@ export function Toast({
     onMouseLeave: resumeTimer,
     onFocusCapture: pauseTimer,
     onBlurCapture: resumeTimer,
-    ...mergeProps(xdsThemeProps('toast', {
+    ...mergeProps(themeProps('toast', {
       type
     }), {
       0: {

package/dist/ToggleButton/ToggleButton.d.ts

@@ -38,8 +38,15 @@ export interface ToggleButtonProps extends BaseProps<HTMLButtonElement> {
      */
     onPressedChange?: (isPressed: boolean) => void;
     /**
-     * Async action handler for API-backed toggles.
-     * The button shows a loading spinner while the promise is pending.
+     * Action handler for API- or navigation-backed toggles, run inside a
+     * transition. The button shows a loading spinner while the action is
+     * pending — whether it returns a promise or synchronously triggers a
+     * suspending update (e.g. a router navigation that suspends on data).
+     *
+     * Because it runs in a transition, the toggle is *interruptible*: clicking
+     * again while an action is pending starts a new transition with the next
+     * optimistic state, so the action reflects the latest intent rather than
+     * being dropped.
      *
      * @example
      * ```
@@ -53,7 +60,7 @@ export interface ToggleButtonProps extends BaseProps<HTMLButtonElement> {
      * />
      * ```
      */
-    pressedChangeAction?: (isPressed: boolean) => Promise<void>;
+    pressedChangeAction?: (isPressed: boolean) => void | Promise<void>;
     /**
      * The size of the toggle button.
      * When used inside ToggleButtonGroup, defaults to the group's size.

package/dist/ToggleButton/ToggleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIzD,OAAO,EAAS,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAElD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0C5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C;;;;;;;;;;;;;;;OAeG;IACH,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAE5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,KAAK,EACL,SAAS,EAAE,aAAa,EACxB,eAAe,EAAE,mBAAmB,EACpC,mBAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,UAAU,EAAE,cAAsB,EAClC,SAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,WAAW,EACX,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EAAE,UAAU,EACrB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,SAAS,CAuF/B;yBA1Ge,YAAY"}
+{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAS,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAElD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyE5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEnE;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,KAAK,EACL,SAAS,EAAE,aAAa,EACxB,eAAe,EAAE,mBAAmB,EACpC,mBAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,UAAU,EAAE,cAAsB,EAClC,SAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,WAAW,EACX,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EAAE,UAAU,EACrB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,SAAS,CAyG/B;yBA5He,YAAY"}

package/dist/ToggleButton/ToggleButton.js

@@ -19,13 +19,45 @@
  * - /apps/storybook/stories/ToggleButton.stories.tsx
  * - /packages/cli/templates/blocks/components/ToggleButton/ (showcase blocks)
  */
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useOptimistic, useState, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, fontWeightVars } from "../theme/tokens.stylex.js";
 import { Button } from "../Button/index.js";
 import { useToggleButtonGroup } from "./ToggleButtonGroup.js";
-import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { themeProps } from "../utils/themeProps.js";
+
+// =============================================================================
+// Constants & helpers
+// =============================================================================
+
+/**
+ * The spinner only appears once the action has been pending for this long.
+ * A fast action shows the optimistic pressed state immediately with no spinner
+ * flash, and rapid re-clicks can interrupt the in-flight action before the
+ * button locks behind the spinner.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PENDING_SPINNER_DELAY_MS = 150;
+
+/**
+ * Returns `true` only once `active` has stayed `true` for `delayMs`.
+ * Used to debounce the loading spinner so the optimistic state shows first.
+ */
+function useDelayed(active, delayMs) {
+  const [delayed, setDelayed] = useState(false);
+  useEffect(() => {
+    if (!active) {
+      return undefined;
+    }
+    const timer = setTimeout(() => setDelayed(true), delayMs);
+    return () => {
+      clearTimeout(timer);
+      setDelayed(false);
+    };
+  }, [active, delayMs]);
+  return active && delayed;
+}
 
 // =============================================================================
 // Styles
@@ -36,7 +68,6 @@ import { xdsThemeProps } from "../utils/xdsThemeProps.js";
  * A hidden span renders the same text at semibold weight to reserve
  * the wider width, preventing layout shift when toggling.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const pressedStyles = {
   background: {
     kWkggS: "xi89dp7",
@@ -93,32 +124,47 @@ export function ToggleButton({
   style,
   ...props
 }) {
-  // Read group context if inside a group
   const group = useToggleButtonGroup();
-
-  // Resolve state from group or props
-  const isPressed = group && value != null ? group.selectedValues.has(value) : isPressedProp ?? false;
+  const committedPressed = group && value != null ? group.selectedValues.has(value) : isPressedProp ?? false;
   const size = sizeProp ?? group?.size ?? 'md';
   const isDisabled = group?.isDisabled ?? isDisabledProp;
+
+  // Track the pressed state optimistically. While an action is pending, the
+  // button reflects the intended (optimistic) state immediately, and a click
+  // mid-flight derives its next state from this value — so rapid toggles read
+  // true -> false -> true rather than stalling on the last committed value.
+  const [optimisticPressed, setOptimisticPressed] = useOptimistic(committedPressed);
+  const isPressed = optimisticPressed;
   const resolvedIcon = isPressed && pressedIcon ? pressedIcon : icon;
+
+  // Run the toggle inside a transition. The action is interruptible: clicking
+  // again while it is pending starts a fresh transition with the next
+  // optimistic state instead of being dropped, so there is no re-entry guard.
+  // Both onPressedChange and pressedChangeAction run inside the transition,
+  // which means a synchronous-but-suspending handler (e.g. a router navigation
+  // that suspends on data) also drives the pending state — not just promises.
+  const [isPending, startTransition] = useTransition();
+  // Debounce the spinner so a fast action shows the optimistic state without a
+  // spinner flash, and rapid re-clicks can interrupt before the button locks.
+  const showSpinner = useDelayed(isPending, PENDING_SPINNER_DELAY_MS);
+  const isLoadingState = isLoading || showSpinner;
   const handleClick = useCallback(() => {
-    if (isDisabled || isLoading) {
+    if (isDisabled) {
       return;
     }
     if (group && value != null) {
-      // Delegate to group context
+      // Group mode delegates selection to the group; no async-action path.
       group.toggle(value);
-    } else if (onPressedChangeProp) {
-      // Standalone toggle
-      const newState = !isPressed;
-      onPressedChangeProp(newState);
-      if (pressedChangeAction) {
-        void pressedChangeAction(newState);
-      }
+      return;
     }
-  }, [isDisabled, isLoading, group, value, onPressedChangeProp, pressedChangeAction, isPressed]);
+    const newState = !optimisticPressed;
+    startTransition(async () => {
+      setOptimisticPressed(newState);
+      onPressedChangeProp?.(newState);
+      await pressedChangeAction?.(newState);
+    });
+  }, [isDisabled, group, value, optimisticPressed, onPressedChangeProp, pressedChangeAction, setOptimisticPressed]);
 
-  // Label with font weight shift and width reservation
   // isIconOnly prop is the source of truth for icon-only rendering.
   const labelContent = children != null ? /*#__PURE__*/_jsxs("span", {
     ...{
@@ -165,12 +211,12 @@ export function ToggleButton({
     variant: "ghost",
     size: size,
     isDisabled: isDisabled,
-    isLoading: isLoading,
+    isLoading: isLoadingState,
     isIconOnly: isIconOnly,
     "aria-pressed": isPressed,
     icon: resolvedIcon,
     tooltip: tooltip,
-    ...xdsThemeProps('toggle-button', {
+    ...themeProps('toggle-button', {
       isPressed: isPressed ? 'true' : 'false'
     }),
     xstyle: [isPressed ? pressedStyles.background : undefined, xstyle],