@astryxdesign/core 0.1.9 → 0.2.0-canary.0b7a99e

package/dist/TreeList/TreeList.js

@@ -12,7 +12,7 @@
  * - /packages/core/src/TreeList/TreeList.doc.mjs
  * - /packages/core/src/TreeList/index.ts
  * - /apps/storybook/stories/TreeList.stories.tsx
- * - /packages/cli/templates/blocks/components/TreeList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TreeList/ (showcase blocks)
  */
 import { useId, useState, useMemo, useCallback } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -34,6 +34,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: {
     kVAEAm: "x1n2onr6",
+    "--tree-list-indent": "xpa4xmd",
     $$css: true
   }
 };

package/dist/TreeList/TreeListBranches.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeListBranches.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListBranches.tsx"],"names":[],"mappings":"AAuDA,UAAU,qBAAqB;IAC7B,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;CACrB;AAMD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,MAAM,EAAE,OAAO,EACf,WAAW,GACZ,EAAE,qBAAqB,+BA8CvB;yBAlDe,gBAAgB"}
+{"version":3,"file":"TreeListBranches.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListBranches.tsx"],"names":[],"mappings":"AAyDA,UAAU,qBAAqB;IAC7B,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;CACrB;AAMD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,MAAM,EAAE,OAAO,EACf,WAAW,GACZ,EAAE,qBAAqB,+BA8CvB;yBAlDe,gBAAgB"}

package/dist/TreeList/TreeListBranches.js

@@ -10,7 +10,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/TreeList/TreeListItem.tsx
- * - /packages/cli/templates/blocks/components/TreeList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TreeList/ (showcase blocks)
  */
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
@@ -26,8 +26,10 @@ const LINE_WIDTH = 1;
  */
 const BRANCH_MARGIN = `calc(${spacingVars['--spacing-2']} + ${spacingVars['--spacing-0-5']})`;
 
-/** Per-level indent width, matching --spacing-4 (16px). */
-const LEVEL_INDENT = spacingVars['--spacing-4'];
+/** Per-level indent width. Reads the public, themeable `--tree-list-indent`
+ * lever set on the tree-list root (default `--spacing-4`, 16px), so the guide
+ * lines stay aligned with the row indent when a theme retunes the step. */
+const LEVEL_INDENT = 'var(--tree-list-indent)';
 // =============================================================================
 // Types
 // =============================================================================
@@ -62,12 +64,12 @@ export function TreeListBranches({
             className: "x5yr21d x10l6tqk xfyiiit"
           }, {
             style: {
-              left: branchOffset
+              insetInlineStart: branchOffset
             }
           }),
           children: /*#__PURE__*/_jsx("div", {
             ...mergeProps(themeProps('tree-list-guide'), {
-              className: "x1nj7uno xu96u03 x1bpp3o7 x10l6tqk x3m8u43 x1i1rx1s x7njt3n xs02d24"
+              className: "x1nj7uno x1o0tod x1bpp3o7 x10l6tqk xtijo5x x1i1rx1s x7njt3n xs02d24"
             })
           })
         }, level)
@@ -77,12 +79,12 @@ export function TreeListBranches({
         className: "x5yr21d x10l6tqk xfyiiit"
       }, {
         style: {
-          left: `calc(${BRANCH_MARGIN} + ${nestedLevel - 1} * ${LEVEL_INDENT})`
+          insetInlineStart: `calc(${BRANCH_MARGIN} + ${nestedLevel - 1} * ${LEVEL_INDENT})`
         }
       }),
       children: /*#__PURE__*/_jsx("div", {
         ...mergeProps(themeProps('tree-list-guide'), {
-          className: "x1nj7uno xu96u03 x1bpp3o7 x10l6tqk x3m8u43 x1i1rx1s x7njt3n xs02d24"
+          className: "x1nj7uno x1o0tod x1bpp3o7 x10l6tqk xtijo5x x1i1rx1s x7njt3n xs02d24"
         })
       })
     })]

package/dist/TreeList/TreeListItem.d.ts

@@ -7,7 +7,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/TreeList/TreeList.doc.mjs
  * - /packages/core/src/TreeList/TreeList.tsx
- * - /packages/cli/templates/blocks/components/TreeList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TreeList/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
 import type { TreeListDensity, TreeListVariant } from './TreeListTypes';

package/dist/TreeList/TreeListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAcrD,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AA8NtE,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB;;;;OAIG;IACH,OAAO,EAAE,eAAe,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAMD,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,QAAQ,EACR,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+BAgO3B;yBAvPe,YAAY"}
+{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAcrD,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAyOtE,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB;;;;OAIG;IACH,OAAO,EAAE,eAAe,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAMD,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,QAAQ,EACR,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+BA2O3B;yBAlQe,YAAY"}

package/dist/TreeList/TreeListItem.js

@@ -11,14 +11,14 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/TreeList/TreeList.doc.mjs
  * - /packages/core/src/TreeList/TreeList.tsx
- * - /packages/cli/templates/blocks/components/TreeList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TreeList/ (showcase blocks)
  */
 import { useId, useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, spacingVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { getIcon } from "../Icon/globalIconRegistry.js";
-import { mergeProps } from "../utils/index.js";
+import { mergeProps, rtlStyles } from "../utils/index.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { TreeListBranches } from "./TreeListBranches.js";
 import { themeProps } from "../utils/themeProps.js";
@@ -40,6 +40,7 @@ const styles = {
     kVAEAm: "x1n2onr6",
     kB7OPa: "x9f619",
     k9WMMc: "x1yc453h",
+    keTefX: "x12vn87o",
     $$css: true
   },
   interactive: {
@@ -108,6 +109,10 @@ const descriptionSizeStyles = {
   }
 };
 
+// `CSSProperties` has no index signature for custom properties, so the row's
+// inline style — which publishes the computed indent distance as the private
+// `--_tree-indent` — needs this augmentation to typecheck.
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -168,7 +173,19 @@ export function TreeListItem({
     }
     return undefined;
   }, [onClick, hasChildren, onToggle, id, isDisabled]);
-  const computedMarginLeft = hasChildren ? `calc(${nestedLevel} * ${spacingVars['--spacing-4']})` : `calc(${nestedLevel} * ${spacingVars['--spacing-4']} + ${spacingVars['--spacing-4']} + ${spacingVars['--spacing-2']})`;
+
+  // Per-level indent distance. The per-level step is the public, themeable
+  // `--tree-list-indent` lever (default `--spacing-4`, set on the tree-list
+  // root). Leaves add a fixed chevron-column offset (chevron width + gap) so
+  // their labels line up with sibling parents' labels; that offset is tied to
+  // the chevron's own dimensions, not the indent step, so it does not scale
+  // with the lever. Published as the private `--_tree-indent` and consumed by
+  // `contentWrapper`'s stylesheet `margin-inline-start` (kept out of the inline
+  // style so the theme layer can override it — see #4308).
+  const indentDistance = hasChildren ? `calc(${nestedLevel} * var(--tree-list-indent))` : `calc(${nestedLevel} * var(--tree-list-indent) + ${spacingVars['--spacing-4']} + ${spacingVars['--spacing-2']})`;
+  const indentStyle = {
+    '--_tree-indent': indentDistance
+  };
   const labelAndDescription = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("span", {
       id: labelId,
@@ -192,15 +209,18 @@ export function TreeListItem({
     })]
   });
   const chevronIcon = /*#__PURE__*/_jsx("span", {
-    ...{
-      0: {
-        className: "x78zum5 x11xpdln xuedmi6 xlr8y92 x7p49u4"
-      },
-      1: {
-        className: "x78zum5 x11xpdln xuedmi6 xlr8y92 x1iffjtl"
-      }
-    }[!!isExpanded << 0],
-    children: getIcon('chevronRight')
+    ...stylex.props(rtlStyles.mirror),
+    children: /*#__PURE__*/_jsx("span", {
+      ...{
+        0: {
+          className: "x78zum5 x11xpdln xuedmi6 xlr8y92 x7p49u4"
+        },
+        1: {
+          className: "x78zum5 x11xpdln xuedmi6 xlr8y92 x1iffjtl"
+        }
+      }[!!isExpanded << 0],
+      children: getIcon('chevronRight')
+    })
   });
   const chevron = hasChildren ? handleToggle != null ?
   /*#__PURE__*/
@@ -330,9 +350,7 @@ export function TreeListItem({
           selected: isSelected ? 'selected' : null,
           disabled: isDisabled ? 'disabled' : null
         }), stylex.props(styles.contentWrapper, densityStyles[density], (isInteractive || hasChildren && onClick == null) && styles.interactive, (isInteractive || hasChildren && onClick == null) && styles.focusVisibleOutline, isDisabled && styles.disabled, isSelected && styles.selected)),
-        style: {
-          marginLeft: computedMarginLeft
-        },
+        style: indentStyle,
         onClick: handleClick,
         children: innerContent
       })

package/dist/TreeList/TreeListTypes.d.ts

@@ -9,25 +9,9 @@
  * - /packages/core/src/TreeList/index.ts
  */
 import type { ReactNode } from 'react';
+import type { TreeListVariantMap } from './index';
 /** Spacing density for tree list items. */
 export type TreeListDensity = 'compact' | 'balanced' | 'spacious';
-/**
- * Extensible variant map for TreeList.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/TreeList' {
- *   interface TreeListVariantMap {
- *     'dotted': true;
- *   }
- * }
- * ```
- */
-export interface TreeListVariantMap {
-    lineGuides: true;
-    noGuides: true;
-}
 /**
  * Visual treatment of the hierarchy guide (connector) lines. Extensible via
  * module augmentation of TreeListVariantMap.

package/dist/TreeList/TreeListTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeListTypes.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListTypes.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,2CAA2C;AAC3C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAElE;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,IAAI,CAAC;IACjB,QAAQ,EAAE,IAAI,CAAC;CAChB;AAED;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,iDAAiD;AACjD,MAAM,WAAW,gBAAgB;IAC/B,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IAEX,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAC;IAEjB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,kEAAkE;IAClE,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE9B,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,uFAAuF;IACvF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}
+{"version":3,"file":"TreeListTypes.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListTypes.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAEhD,2CAA2C;AAC3C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAElE;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,iDAAiD;AACjD,MAAM,WAAW,gBAAgB;IAC/B,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IAEX,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAC;IAEjB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,kEAAkE;IAClE,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE9B,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,uFAAuF;IACvF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/TreeList/index.d.ts

@@ -6,7 +6,24 @@
  *
  * SYNC: When modified, update /packages/core/src/TreeList/TreeList.doc.mjs
  */
+/**
+ * Extensible variant map for TreeList.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/TreeList' {
+ *   interface TreeListVariantMap {
+ *     'dotted': true;
+ *   }
+ * }
+ * ```
+ */
+export interface TreeListVariantMap {
+    lineGuides: true;
+    noGuides: true;
+}
 export { TreeList } from './TreeList';
 export type { TreeListProps, TreeListDensity, TreeListVariant } from './TreeList';
-export type { TreeListItemData, TreeListVariantMap } from './TreeListTypes';
+export type { TreeListItemData } from './TreeListTypes';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TreeList/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,YAAY,EAAC,aAAa,EAAE,eAAe,EAAE,eAAe,EAAC,MAAM,YAAY,CAAC;AAChF,YAAY,EAAC,gBAAgB,EAAE,kBAAkB,EAAC,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TreeList/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,IAAI,CAAC;IACjB,QAAQ,EAAE,IAAI,CAAC;CAChB;AAED,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,YAAY,EAAC,aAAa,EAAE,eAAe,EAAE,eAAe,EAAC,MAAM,YAAY,CAAC;AAChF,YAAY,EAAC,gBAAgB,EAAC,MAAM,iBAAiB,CAAC"}

package/dist/TreeList/index.js

@@ -10,4 +10,18 @@
  *
  * SYNC: When modified, update /packages/core/src/TreeList/TreeList.doc.mjs
  */
+
+/**
+ * Extensible variant map for TreeList.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/TreeList' {
+ *   interface TreeListVariantMap {
+ *     'dotted': true;
+ *   }
+ * }
+ * ```
+ */
 export { TreeList } from "./TreeList.js";

package/dist/Typeahead/BaseTypeahead.d.ts

@@ -10,7 +10,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Typeahead/index.ts
- * - /packages/cli/templates/blocks/components/Typeahead/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
  */
 import React, { type ReactNode, type RefObject } from 'react';
 import type { StyleXStyles } from '@stylexjs/stylex';
@@ -102,6 +102,15 @@ export interface BaseTypeaheadProps<T extends SearchableItem> extends Omit<BaseP
      * Additional StyleX styles for the input element.
      */
     inputXStyle?: StyleXStyles;
+    /**
+     * Tab-order override for the input element. Typeahead passes `-1` while
+     * its selected-value token is shown: the input is visually collapsed
+     * (width 0 / opacity 0) but must stay programmatically focusable for
+     * token edit/clear interactions, so removing it from the Tab order is
+     * what prevents an invisible tab stop (WCAG 2.4.3 / 2.4.7). The input
+     * remains focusable via `.focus()` regardless of this value.
+     */
+    inputTabIndex?: number;
     /**
      * Ref to the anchor element for dropdown positioning.
      * The dropdown will be positioned relative to this element.

package/dist/Typeahead/BaseTypeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAcnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAQ1D,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACxE,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;OAOG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAuGD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,aAAa,EAihBrB,CAAC,CAAC,SAAS,cAAc,EAC5B,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAcnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAQ1D,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACxE,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;OAOG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAuGD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,aAAa,EAkiBrB,CAAC,CAAC,SAAS,cAAc,EAC5B,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC"}

package/dist/Typeahead/BaseTypeahead.js

@@ -14,7 +14,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Typeahead/index.ts
- * - /packages/cli/templates/blocks/components/Typeahead/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
  */
 import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -76,7 +76,7 @@ const styles = {
     kkrTdU: "x1ypdohk",
     kI3sdo: "x1a2a7pz",
     kWkggS: "xjbqb8w",
-    k9WMMc: "xdpxx8g",
+    k9WMMc: "x1yc453h",
     $$css: true
   },
   itemHighlighted: {
@@ -151,6 +151,7 @@ export const BaseTypeahead = function BaseTypeahead({
   ariaDescribedBy,
   ariaLabelledBy,
   inputXStyle,
+  inputTabIndex,
   anchorRef,
   onKeyDown: externalOnKeyDown,
   debounceMs = 150,
@@ -256,7 +257,7 @@ export const BaseTypeahead = function BaseTypeahead({
       resultsGenRef.current = gen;
       const shown = searchResults.slice(0, maxMenuItems);
       setResults(shown);
-      setHighlightedIndex(searchResults.length > 0 ? 0 : -1);
+      setHighlightedIndex(shown.length > 0 ? 0 : -1);
       if (searchResults.length > 0 || searchQuery.length > 0) {
         showLayer();
       }
@@ -288,8 +289,9 @@ export const BaseTypeahead = function BaseTypeahead({
         return;
       }
       resultsGenRef.current = gen;
-      setResults(bootstrapResults.slice(0, maxMenuItems));
-      setHighlightedIndex(bootstrapResults.length > 0 ? 0 : -1);
+      const shown = bootstrapResults.slice(0, maxMenuItems);
+      setResults(shown);
+      setHighlightedIndex(shown.length > 0 ? 0 : -1);
       if (bootstrapResults.length > 0) {
         showLayer();
       }
@@ -418,11 +420,15 @@ export const BaseTypeahead = function BaseTypeahead({
     switch (e.key) {
       case 'ArrowDown':
         e.preventDefault();
-        setHighlightedIndex(prev => prev < results.length - 1 ? prev + 1 : 0);
+        if (results.length > 0) {
+          setHighlightedIndex(prev => prev < results.length - 1 ? prev + 1 : 0);
+        }
         break;
       case 'ArrowUp':
         e.preventDefault();
-        setHighlightedIndex(prev => prev > 0 ? prev - 1 : results.length - 1);
+        if (results.length > 0) {
+          setHighlightedIndex(prev => prev > 0 ? prev - 1 : results.length - 1);
+        }
         break;
       case 'Enter':
         e.preventDefault();
@@ -437,13 +443,17 @@ export const BaseTypeahead = function BaseTypeahead({
       case 'Home':
         if (popover.isOpen) {
           e.preventDefault();
-          setHighlightedIndex(0);
+          if (results.length > 0) {
+            setHighlightedIndex(0);
+          }
         }
         break;
       case 'End':
         if (popover.isOpen) {
           e.preventDefault();
-          setHighlightedIndex(results.length - 1);
+          if (results.length > 0) {
+            setHighlightedIndex(results.length - 1);
+          }
         }
         break;
     }
@@ -457,13 +467,13 @@ export const BaseTypeahead = function BaseTypeahead({
   // cursor walks off-screen once navigation passes the visible window. Mirrors
   // CommandPaletteItem's scrollIntoView({block: 'nearest'}) behavior.
   useEffect(() => {
-    if (!popover.isOpen || highlightedIndex < 0) {
+    if (!popover.isOpen || highlightedIndex < 0 || highlightedIndex >= results.length) {
       return;
     }
     document.getElementById(getItemId(highlightedIndex))?.scrollIntoView?.({
       block: 'nearest'
     });
-  }, [popover.isOpen, highlightedIndex, getItemId]);
+  }, [popover.isOpen, highlightedIndex, getItemId, results.length]);
   const selectedKey = value == null ? null : getKey(value.id, () => results.indexOf(value));
 
   // Cleanup timeout and cancel in-flight searches on unmount
@@ -483,11 +493,12 @@ export const BaseTypeahead = function BaseTypeahead({
       role: "combobox",
       "aria-expanded": popover.isOpen,
       "aria-controls": listboxId,
-      "aria-activedescendant": popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
+      "aria-activedescendant": popover.isOpen && highlightedIndex >= 0 && highlightedIndex < results.length ? getItemId(highlightedIndex) : undefined,
       "aria-autocomplete": "list",
       "aria-describedby": ariaDescribedBy,
       "aria-labelledby": ariaLabelledBy,
       "aria-disabled": isFocusableDisabled ? 'true' : undefined,
+      tabIndex: inputTabIndex,
       value: query,
       onChange: handleInputChange,
       onPointerDown: () => {

package/dist/Typeahead/Typeahead.d.ts

@@ -11,10 +11,10 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Typeahead/index.ts
  * - /apps/storybook/stories/Typeahead.stories.tsx
- * - /packages/cli/templates/blocks/components/Typeahead/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
-import { type InputStatus } from '../Field';
+import { type InputStatus, type FieldStatusVariant } from '../Field';
 import { type IconType } from '../Icon';
 import type { BaseProps } from '../BaseProps';
 import type { SizeValue } from '../utils/types';
@@ -35,6 +35,13 @@ export interface TypeaheadProps<T extends SearchableItem> extends Omit<BaseProps
     isOptional?: boolean;
     /** Validation status. */
     status?: InputStatus;
+    /**
+     * How the status message is placed relative to the input.
+     * - 'attached': message overlaps directly below the input (bordered treatment)
+     * - 'detached': message floats below as a separate element with spacing
+     * @default 'attached'
+     */
+    statusVariant?: FieldStatusVariant;
     /**
      * Icon to display at the start of the input.
      * Accepts a ReactNode (e.g. `<Icon icon={SearchIcon} />`) or an SVG icon component directly.
@@ -127,7 +134,7 @@ export interface TypeaheadProps<T extends SearchableItem> extends Omit<BaseProps
  * />
  * ```
  */
-export declare function Typeahead<T extends SearchableItem>({ ref, label, isLabelHidden, description, isRequired, isOptional, status, startIcon, labelTooltip, searchSource, value, onChange, renderItem, placeholder, hasEntriesOnFocus, maxMenuItems, emptySearchResultsText, isDisabled, disabledMessage, hasClear, hasAutoFocus, size: sizeProp, debounceMs, onChangeQuery, onOpenChange, width, xstyle, className, style, 'data-testid': testId, }: TypeaheadProps<T>): React.JSX.Element;
+export declare function Typeahead<T extends SearchableItem>({ ref, label, isLabelHidden, description, isRequired, isOptional, status, statusVariant, startIcon, labelTooltip, searchSource, value, onChange, renderItem, placeholder, hasEntriesOnFocus, maxMenuItems, emptySearchResultsText, isDisabled, disabledMessage, hasClear, hasAutoFocus, size: sizeProp, debounceMs, onChangeQuery, onOpenChange, width, xstyle, className, style, 'data-testid': testId, }: TypeaheadProps<T>): React.JSX.Element;
 export declare namespace Typeahead {
     var displayName: string;
 }

package/dist/Typeahead/Typeahead.d.ts.map

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

package/dist/Typeahead/Typeahead.js

@@ -15,7 +15,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Typeahead/index.ts
  * - /apps/storybook/stories/Typeahead.stories.tsx
- * - /packages/cli/templates/blocks/components/Typeahead/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
  */
 import React, { useCallback, useId, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -121,6 +121,7 @@ export function Typeahead({
   isRequired = false,
   isOptional = false,
   status,
+  statusVariant = 'attached',
   startIcon,
   labelTooltip,
   searchSource,
@@ -278,7 +279,7 @@ export function Typeahead({
       ...mergeProps(themeProps('typeahead', {
         size,
         status: status?.type
-      }), stylex.props(inputWrapperStyles.base, styles.wrapper, sizeStyle, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], isDisabled && inputWrapperStyles.disabled, inputGroup && groupStyles.inGroup, inputGroup && xstyle), inputGroup ? className : undefined, inputGroup ? style : undefined),
+      }), stylex.props(inputWrapperStyles.base, styles.wrapper, sizeStyle, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], isDisabled && inputWrapperStyles.disabled, inputGroup && groupStyles.inGroup, inputGroup && xstyle), inputGroup ? className : undefined, inputGroup ? style : undefined),
       children: [startIcon && renderIconSlot(startIcon, {
         size: 'sm',
         color: 'secondary'
@@ -313,7 +314,14 @@ export function Typeahead({
         debounceMs: debounceMs,
         anchorRef: wrapperRef,
         onKeyDown: handleKeyDown,
-        inputXStyle: showToken ? styles.inputHidden : undefined,
+        inputXStyle: showToken ? styles.inputHidden : undefined
+        // While the token is shown the input is collapsed (width 0 /
+        // opacity 0) — take it out of the Tab order so keyboard users
+        // don't hit an invisible stop (WCAG 2.4.3 / 2.4.7). It stays
+        // programmatically focusable: entering edit mode and clearing
+        // both refocus it after it uncollapses.
+        ,
+        inputTabIndex: showToken ? -1 : undefined,
         size: size
       }), hasClear && value && !isDisabled && /*#__PURE__*/_jsx(InputClearButton, {
         label: t('@astryx.typeahead.clearSelection'),
@@ -343,6 +351,7 @@ export function Typeahead({
       message: status.message,
       messageID: status.message ? statusMessageId : undefined
     } : undefined,
+    statusVariant: statusVariant,
     labelTooltip: labelTooltip,
     width: width,
     xstyle: xstyle,

package/dist/Typeahead/TypeaheadItem.d.ts

@@ -6,7 +6,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Typeahead/index.ts
- * - /packages/cli/templates/blocks/components/Typeahead/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
 import type { SearchableItem } from './types';
@@ -59,7 +59,7 @@ export interface TypeaheadItemProps<T extends SearchableItem = SearchableItem> e
  * />
  * ```
  */
-export declare function TypeaheadItem<T extends SearchableItem>({ ref, item, icon, description, isDisabled, }: TypeaheadItemProps<T>): React.JSX.Element;
+export declare function TypeaheadItem<T extends SearchableItem>({ ref, item, icon, description, isDisabled, xstyle, }: TypeaheadItemProps<T>): React.JSX.Element;
 export declare namespace TypeaheadItem {
     var displayName: string;
 }

package/dist/Typeahead/TypeaheadItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadItem.d.ts","sourceRoot":"","sources":["../../src/Typeahead/TypeaheadItem.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,EAAE,CAAC,CAAC;IAER;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6CD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,cAAc,EAAE,EACtD,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,UAAkB,GACnB,EAAE,kBAAkB,CAAC,CAAC,CAAC,qBAsBvB;yBA5Be,aAAa"}
+{"version":3,"file":"TypeaheadItem.d.ts","sourceRoot":"","sources":["../../src/Typeahead/TypeaheadItem.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,EAAE,CAAC,CAAC;IAER;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6CD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,cAAc,EAAE,EACtD,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,UAAkB,EAClB,MAAM,GACP,EAAE,kBAAkB,CAAC,CAAC,CAAC,qBAsBvB;yBA7Be,aAAa"}

package/dist/Typeahead/TypeaheadItem.js

@@ -8,7 +8,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Typeahead/index.ts
- * - /packages/cli/templates/blocks/components/Typeahead/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
  */
 
 import React from 'react';
@@ -21,9 +21,25 @@ import { themeProps } from "../utils/themeProps.js";
 // =============================================================================
 // Types
 // =============================================================================
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; // =============================================================================
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// =============================================================================
 // Styles
 // =============================================================================
+
+const styles = {
+  container: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kOIVth: "x1txdalj",
+    kAzted: "x2lwn1j",
+    $$css: true
+  },
+  disabled: {
+    kSiTet: "xbyyjgo",
+    $$css: true
+  }
+};
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -57,7 +73,8 @@ export function TypeaheadItem({
   item,
   icon,
   description,
-  isDisabled = false
+  isDisabled = false,
+  xstyle
 }) {
   // If item has a pre-rendered element, use it
   if (item.element) {
@@ -67,14 +84,7 @@ export function TypeaheadItem({
   }
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
-    ...mergeProps(themeProps('typeahead-item'), {
-      0: {
-        className: "x78zum5 x6s0dn4 x1txdalj x2lwn1j"
-      },
-      1: {
-        className: "x78zum5 x6s0dn4 x1txdalj x2lwn1j xbyyjgo"
-      }
-    }[!!isDisabled << 0]),
+    ...mergeProps(themeProps('typeahead-item'), stylex.props(styles.container, isDisabled && styles.disabled, xstyle)),
     children: [icon, /*#__PURE__*/_jsxs("div", {
       ...{
         className: "x78zum5 xdt5ytf x98rzlu xeuugli"

package/dist/VStack/VStack.d.ts

@@ -7,7 +7,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Stack/Stack.doc.mjs
  * - /packages/core/src/VStack/VStack.test.tsx
- * - /packages/cli/templates/blocks/components/VStack/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/VStack/ (showcase blocks)
  */
 import { type StackProps } from '../Stack/Stack';
 import type { StackCrossAlignment, StackMainAlignment } from '../Stack/stack.stylex';

package/dist/VStack/VStack.js

@@ -9,7 +9,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Stack/Stack.doc.mjs
  * - /packages/core/src/VStack/VStack.test.tsx
- * - /packages/cli/templates/blocks/components/VStack/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/VStack/ (showcase blocks)
  */
 
 import { Stack } from "../Stack/Stack.js";