@astryxdesign/core 0.1.0 → 0.1.1-canary.a514b99

package/dist/Selector/Selector.js

@@ -486,7 +486,7 @@ export function Selector(props) {
         onKeyDown: onKeyDown,
         tabIndex: -1,
         ...{
-          className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x1a2a7pz x1p25gnr x1wfwxd8 xh6dtrn"
+          className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x1a2a7pz"
         },
         children: /*#__PURE__*/_jsx("span", {
           ...{

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,7 +19,7 @@
  * - /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";
@@ -27,6 +27,38 @@ import { Button } from "../Button/index.js";
 import { useToggleButtonGroup } from "./ToggleButtonGroup.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 { themeProps } from "../utils/themeProps.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,7 +211,7 @@ export function ToggleButton({
     variant: "ghost",
     size: size,
     isDisabled: isDisabled,
-    isLoading: isLoading,
+    isLoading: isLoadingState,
     isIconOnly: isIconOnly,
     "aria-pressed": isPressed,
     icon: resolvedIcon,

package/dist/theme/Theme.js

@@ -115,7 +115,7 @@ function useThemeStyleInjection(theme) {
     // One-time perf hint per theme
     if (!warnedThemes.has(theme.name)) {
       warnedThemes.add(theme.name);
-      console.warn(`[XDS] Theme "${theme.name}" is using runtime style injection. ` + `For better performance, use the pre-built theme:\n\n` + `  import {${theme.name}Theme} from '@astryxdesign/theme-${theme.name}/built';\n` + `  import '@astryxdesign/theme-${theme.name}/theme.css';\n\n` + `For custom themes, run \`npx astryx theme build <file>\` to generate ` + `the built artifacts.`);
+      console.warn(`[Astryx] Theme "${theme.name}" is using runtime style injection. ` + `For better performance, use the pre-built theme:\n\n` + `  import {${theme.name}Theme} from '@astryxdesign/theme-${theme.name}/built';\n` + `  import '@astryxdesign/theme-${theme.name}/theme.css';\n\n` + `For custom themes, run \`npx astryx theme build <file>\` to generate ` + `the built artifacts.`);
     }
     const {
       prose,

package/dist/theme/defineTheme.d.ts

@@ -296,7 +296,7 @@ export interface DefinedTheme {
     __onLight?: ResolvedOnMedia;
 }
 /** All Astryx token defaults as a flat map. Useful for resolving full token sets. */
-export declare const xdsTokenDefaults: Record<string, string>;
+export declare const tokenDefaults: Record<string, string>;
 /**
  * Create an Astryx theme.
  *

package/dist/theme/defineTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defineTheme.d.ts","sourceRoot":"","sources":["../../src/theme/defineTheme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"defineTheme.d.ts","sourceRoot":"","sources":["../../src/theme/defineTheme.ts"],"names":[],"mappings":"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"}

package/dist/theme/defineTheme.js

@@ -115,7 +115,7 @@ import { domainTokenDefaults } from "./domainTokens/index.js";
 // =============================================================================
 
 /** All Astryx token defaults as a flat map. Useful for resolving full token sets. */
-export const xdsTokenDefaults = {
+export const tokenDefaults = {
   ...colorDefaults,
   ...spacingDefaults,
   ...sizeDefaults,

package/dist/theme/index.d.ts

@@ -13,7 +13,7 @@
 export { Theme } from './Theme';
 export { MediaTheme } from './MediaTheme';
 export type { MediaThemeProps } from './MediaTheme';
-export { defineTheme, generateThemeCSS, generateThemeCSSFlat, generateOnMediaCSS, generateThemeRules, generateThemeRulesSplit, type ThemeCSSOutput, type ThemeRulesSplit, isDefinedTheme, xdsTokenDefaults, } from './defineTheme';
+export { defineTheme, generateThemeCSS, generateThemeCSSFlat, generateOnMediaCSS, generateThemeRules, generateThemeRulesSplit, type ThemeCSSOutput, type ThemeRulesSplit, isDefinedTheme, tokenDefaults, } from './defineTheme';
 export type { DefineThemeInput, DefinedTheme, CoreTokenName, TokenName, TokenValue, ComponentStyleMap, StyleOverrides, } from './defineTheme';
 export type { SyntaxTokenName, DomainTokenName, DataTokenName, } from './domainTokens';
 export { syntaxTokenDefaults, domainTokenDefaults, dataTokenDefaults, } from './domainTokens';

package/dist/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"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"}

package/dist/theme/index.js

@@ -16,7 +16,7 @@
  */
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.1.0",
+  "version": "0.1.1-canary.a514b99",
   "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/Chat/ChatLayoutScrollButton.tsx

@@ -90,6 +90,12 @@ const styles = stylex.create({
     whiteSpace: 'nowrap',
     paddingInline: spacingVars['--spacing-2'],
   },
+  // When a label is shown, the icon sits on the leading edge and the text on
+  // the trailing edge. Symmetric padding leaves the text cramped against the
+  // pill's rounded edge, so give the trailing side extra breathing room.
+  buttonWithLabel: {
+    paddingInlineEnd: spacingVars['--spacing-3'],
+  },
 });
 
 // =============================================================================
@@ -130,7 +136,7 @@ export function ChatLayoutScrollButton({
           variant="ghost"
           size="md"
           onClick={onClick}
-          xstyle={styles.button}>
+          xstyle={[styles.button, label ? styles.buttonWithLabel : null]}>
           {label ?? undefined}
         </Button>
       </div>

package/src/Collapsible/useCollapsible.doc.mjs

@@ -38,7 +38,7 @@ export const docs = {
   usage: {
     description: 'Reusable hook that encapsulates the collapsible state machine. Supports three modes: group-controlled (inside CollapsibleGroup), controlled (isOpen + onOpenChange), and uncontrolled (self-managed with defaultIsOpen). Used internally by Card and Section.',
     bestPractices: [
-      {guidance: true, description: 'Use the hook directly when building custom collapsible components that need XDS collapsible behavior without Collapsible wrapper.'},
+      {guidance: true, description: 'Use the hook directly when building custom collapsible components that need Astryx collapsible behavior without Collapsible wrapper.'},
       {guidance: true, description: 'For accordion behavior, wrap items in CollapsibleGroup and pass unique value props.'},
       {guidance: false, description: 'Implement your own open/close state when useCollapsible already provides it; the hook handles group coordination automatically.'},
     ],
@@ -64,7 +64,7 @@ export const docsDense = {
   usage: {
     description: 'Encapsulates collapsible state machine. 3 modes: group-controlled (inside CollapsibleGroup), controlled (isOpen + onOpenChange), uncontrolled (self-managed w/ defaultIsOpen). Used internally by Card + Section.',
     bestPractices: [
-      {guidance: true, description: 'Use directly when building custom collapsible components needing XDS collapsible behavior w/o Collapsible wrapper.'},
+      {guidance: true, description: 'Use directly when building custom collapsible components needing Astryx collapsible behavior w/o Collapsible wrapper.'},
       {guidance: true, description: 'For accordion behavior, wrap items in CollapsibleGroup + pass unique value props.'},
       {guidance: false, description: 'Implement your own open/close state when useCollapsible already provides it; hook handles group coordination automatically.'},
     ],

package/src/ContextMenu/ContextMenu.tsx

@@ -36,7 +36,7 @@ import React, {
 import type {ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {useLayer} from '../Layer/useLayer';
-import {renderXDSDropdownItems} from '../DropdownMenu/renderXDSDropdownItems';
+import {renderDropdownItems} from '../DropdownMenu/renderDropdownItems';
 import {
   DropdownMenuContext,
   type DropdownMenuContextValue,
@@ -278,7 +278,7 @@ export function ContextMenu({
   );
 
   const resolvedMenuContent =
-    props.items !== undefined ? renderXDSDropdownItems(items) : menuContent;
+    props.items !== undefined ? renderDropdownItems(items) : menuContent;
 
   return (
     <>

package/src/DateInput/DateInput.test.tsx

@@ -21,19 +21,13 @@ describe('DateInput', () => {
 
   it('renders with placeholder', () => {
     render(
-      <DateInput
-        label="Date"
-        onChange={() => {}}
-        placeholder="Pick a date"
-      />,
+      <DateInput label="Date" onChange={() => {}} placeholder="Pick a date" />,
     );
     expect(screen.getByPlaceholderText('Pick a date')).toBeInTheDocument();
   });
 
   it('displays formatted date when value is provided', () => {
-    render(
-      <DateInput label="Date" value="2026-01-25" onChange={() => {}} />,
-    );
+    render(<DateInput label="Date" value="2026-01-25" onChange={() => {}} />);
     expect(screen.getByDisplayValue('January 25, 2026')).toBeInTheDocument();
   });
 
@@ -118,9 +112,7 @@ describe('DateInput', () => {
 
   it('reverts to previous value on blur when input is invalid', async () => {
     const onChange = vi.fn();
-    render(
-      <DateInput label="Date" value="2026-01-25" onChange={onChange} />,
-    );
+    render(<DateInput label="Date" value="2026-01-25" onChange={onChange} />);
 
     const input = screen.getByRole('combobox');
     fireEvent.change(input, {target: {value: 'not a date'}});
@@ -299,9 +291,7 @@ describe('DateInput', () => {
   // --- P1: Tab order: calendar button first, then input ---
 
   it('renders calendar button before input in DOM order', () => {
-    const {container} = render(
-      <DateInput label="Date" onChange={() => {}} />,
-    );
+    const {container} = render(<DateInput label="Date" onChange={() => {}} />);
     const input = container.querySelector('input');
     const button = container.querySelector('button');
     // Calendar button should come before input in the DOM
@@ -389,9 +379,7 @@ describe('DateInput', () => {
 
   it('calls onChange with undefined when input is cleared and blurred', () => {
     const onChange = vi.fn();
-    render(
-      <DateInput label="Date" value="2026-01-25" onChange={onChange} />,
-    );
+    render(<DateInput label="Date" value="2026-01-25" onChange={onChange} />);
 
     const input = screen.getByRole('combobox');
     fireEvent.change(input, {target: {value: ''}});
@@ -476,9 +464,7 @@ describe('DateInput', () => {
     });
 
     it('does not show clear button when hasClear is false', () => {
-      render(
-        <DateInput label="Date" value="2026-01-15" onChange={() => {}} />,
-      );
+      render(<DateInput label="Date" value="2026-01-15" onChange={() => {}} />);
       expect(
         screen.queryByRole('button', {name: 'Clear Date'}),
       ).not.toBeInTheDocument();
@@ -514,6 +500,68 @@ describe('DateInput', () => {
     });
   });
 
+  // --- Regression: in-progress / leading-zero input must not crash ---
+
+  describe('incomplete typed input', () => {
+    it('does not crash or fire onChange when first digit typed is 0', () => {
+      const onChange = vi.fn();
+      render(<DateInput label="Date" onChange={onChange} />);
+
+      const input = screen.getByRole('combobox');
+      // Typing a leading "0" (e.g. starting "01" for January) must be treated
+      // as incomplete input, not coerced into an (invalid) date that crashes.
+      expect(() =>
+        fireEvent.change(input, {target: {value: '0'}}),
+      ).not.toThrow();
+
+      expect(onChange).not.toHaveBeenCalled();
+      expect(input).toHaveValue('0');
+    });
+
+    it('does not crash or fire onChange when first digit typed is 1', () => {
+      const onChange = vi.fn();
+      render(<DateInput label="Date" onChange={onChange} />);
+
+      const input = screen.getByRole('combobox');
+      expect(() =>
+        fireEvent.change(input, {target: {value: '1'}}),
+      ).not.toThrow();
+
+      expect(onChange).not.toHaveBeenCalled();
+      expect(input).toHaveValue('1');
+    });
+
+    it('does not crash while progressively typing a numeric date', () => {
+      const onChange = vi.fn();
+      render(<DateInput label="Date" onChange={onChange} />);
+
+      const input = screen.getByRole('combobox');
+      // Simulate keystroke-by-keystroke entry of "01/15/2026". The leading
+      // single-digit keystrokes must not crash (the original bug).
+      for (const partial of ['0', '01', '01/', '01/1', '01/15', '01/15/']) {
+        expect(() =>
+          fireEvent.change(input, {target: {value: partial}}),
+        ).not.toThrow();
+      }
+
+      // Completing the date commits it without error.
+      expect(() =>
+        fireEvent.change(input, {target: {value: '01/15/2026'}}),
+      ).not.toThrow();
+      expect(onChange).toHaveBeenCalledWith('2026-01-15');
+    });
+
+    it('does not crash on blur after typing an incomplete value', () => {
+      const onChange = vi.fn();
+      render(<DateInput label="Date" onChange={onChange} />);
+
+      const input = screen.getByRole('combobox');
+      fireEvent.change(input, {target: {value: '0'}});
+      expect(() => fireEvent.blur(input)).not.toThrow();
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+
   describe('external value changes', () => {
     it('clears pending input when value changes externally', () => {
       const onChange = vi.fn();

package/src/Divider/Divider.doc.mjs

@@ -108,7 +108,7 @@ export const docsZh = {
 
 /** @type {import('../docs-types').TranslationDoc} */
 export const docsDense = {
-  description: 'visual separator w/ optional label, using XDS design tokens',
+  description: 'visual separator w/ optional label, using Astryx design tokens',
   usage: {
     description: 'A visual separator that divides content into distinct sections. Use to create clear boundaries between groups of related content, or to demarcate interactive regions within a layout.',
     bestPractices: [

package/src/DropdownMenu/DropdownMenu.tsx

@@ -37,7 +37,7 @@ import {Button, type ButtonProps} from '../Button';
 import {Icon} from '../Icon';
 import type {IconType} from '../Icon';
 
-import {renderXDSDropdownItems} from './renderXDSDropdownItems';
+import {renderDropdownItems} from './renderDropdownItems';
 import {
   DropdownMenuContext,
   type DropdownMenuContextValue,
@@ -366,7 +366,7 @@ export function DropdownMenu({
 
   // Resolve menu content: data-driven items become components
   const menuContent =
-    props.items !== undefined ? renderXDSDropdownItems(items) : children;
+    props.items !== undefined ? renderDropdownItems(items) : children;
 
   return (
     <>

package/src/DropdownMenu/{renderXDSDropdownItems.tsx → renderDropdownItems.tsx}

@@ -1,7 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * @file renderXDSDropdownItems.tsx
+ * @file renderDropdownItems.tsx
  * @output Converts data-driven menu items into DropdownMenuItem components
  * @position Utility; used by DropdownMenu to unify data-driven and compound paths
  */
@@ -49,7 +49,7 @@ function getSectionKey(section: DropdownMenuSection, index: number): string {
  * Converts data-driven items into DropdownMenuItem components,
  * so both modes share the same rendering and keyboard navigation path.
  */
-export function renderXDSDropdownItems(
+export function renderDropdownItems(
   items: DropdownMenuOption[],
 ): ReactNode {
   const elements: ReactNode[] = [];