@astryxdesign/core 0.2.0-canary.85f5022 → 0.2.0-canary.8dfd7cf

package/dist/Token/Token.d.ts

@@ -5,40 +5,16 @@
  * @position Core implementation; consumed by index.ts, tested by Token.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Token/TokenLink.tsx (interactive wrapper for href+onRemove)
  * - /packages/core/src/Token/Token.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/Token/Token.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Token/index.ts (exports if types change)
  * - /apps/storybook/stories/Token.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Token/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Token/ (showcase blocks)
  */
 import type { ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
-/**
- * Extensible color map for Token.
- *
- * Theme packages can add custom colors via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/Token' {
- *   interface TokenColorMap {
- *     brand: true;
- *   }
- * }
- * ```
- */
-export interface TokenColorMap {
-    default: true;
-    red: true;
-    orange: true;
-    yellow: true;
-    green: true;
-    teal: true;
-    cyan: true;
-    blue: true;
-    purple: true;
-    pink: true;
-    gray: true;
-}
+import type { TokenColorMap } from './index';
 /**
  * Token color type derived from TokenColorMap.
  * Extensible via module augmentation of TokenColorMap.
@@ -106,7 +82,9 @@ export interface TokenProps extends BaseProps<HTMLElement> {
  * `<span>` container with an invisible `<button>` when `onClick` is provided.
  * The invisible button pattern provides real button semantics for accessibility
  * while the container uses `:focus-within` to show focus outlines around the
- * entire token.
+ * entire token. When both `href` and `onRemove` are provided, the same
+ * container pattern is used with an invisible `<a>` so the remove `<button>`
+ * renders as a sibling of the link rather than nested inside it.
  *
  * @example
  * ```

package/dist/Token/Token.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/Token/Token.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAgBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,IAAI,CAAC;IACd,GAAG,EAAE,IAAI,CAAC;IACV,MAAM,EAAE,IAAI,CAAC;IACb,MAAM,EAAE,IAAI,CAAC;IACb,KAAK,EAAE,IAAI,CAAC;IACZ,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,IAAI,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,IAAI,CAAC;CACZ;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,WAAW,CAAC;IACxD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAkLD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,KAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAqB,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,UAAU,+BA+IZ;yBAhKe,KAAK"}
+{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/Token/Token.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAM3C;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,WAAW,CAAC;IACxD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAkLD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,KAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAqB,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,UAAU,+BAmLZ;yBApMe,KAAK"}

package/dist/Token/Token.js

@@ -9,11 +9,12 @@
  * @position Core implementation; consumed by index.ts, tested by Token.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Token/TokenLink.tsx (interactive wrapper for href+onRemove)
  * - /packages/core/src/Token/Token.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/Token/Token.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Token/index.ts (exports if types change)
  * - /apps/storybook/stories/Token.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Token/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Token/ (showcase blocks)
  */
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
@@ -22,6 +23,7 @@ import { Icon } from "../Icon/index.js";
 import { mergeProps } from "../utils/index.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { useInteractiveRole } from "../hooks/useInteractiveRole.js";
+import { TokenLink } from "./TokenLink.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
 
@@ -29,20 +31,6 @@ import { useTranslator } from "../i18n/index.js";
 // Types
 // =============================================================================
 
-/**
- * Extensible color map for Token.
- *
- * Theme packages can add custom colors via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/Token' {
- *   interface TokenColorMap {
- *     brand: true;
- *   }
- * }
- * ```
- */
-
 /**
  * Token color type derived from TokenColorMap.
  * Extensible via module augmentation of TokenColorMap.
@@ -180,7 +168,9 @@ const colorStyles = {
  * `<span>` container with an invisible `<button>` when `onClick` is provided.
  * The invisible button pattern provides real button semantics for accessibility
  * while the container uses `:focus-within` to show focus outlines around the
- * entire token.
+ * entire token. When both `href` and `onRemove` are provided, the same
+ * container pattern is used with an invisible `<a>` so the remove `<button>`
+ * renders as a sibling of the link rather than nested inside it.
  *
  * @example
  * ```
@@ -220,6 +210,25 @@ export function Token({
   // When role is 'button' via context (no explicit onClick), treat as
   // if onClick was provided — the popover attaches its own handler.
   const effectiveOnClick = onClick ?? (role === 'button' ? () => {} : null);
+  const removeButton = onRemove != null && /*#__PURE__*/_jsx("button", {
+    type: "button",
+    "aria-label": t('@astryx.token.remove', {
+      label
+    }),
+    onClick: e => {
+      e.stopPropagation();
+      onRemove(e);
+    },
+    disabled: isDisabled,
+    ...{
+      className: "x3nfvp2 x6s0dn4 xl56j7k x1n2onr6 x1717udv xkd40ry x1ypdohk xjspbzw x1kky2od xlup9mm x1heor9g x17nn4n9 x1s928wv x1j6awrg x1xsm0q9"
+    },
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: "close",
+      size: "xsm",
+      color: "inherit"
+    })
+  });
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [icon, /*#__PURE__*/_jsx("span", {
       ...{
@@ -231,25 +240,7 @@ export function Token({
         }
       }[!!isLabelHidden << 0],
       children: label
-    }), endContent, onRemove != null && /*#__PURE__*/_jsx("button", {
-      type: "button",
-      "aria-label": t('@astryx.token.remove', {
-        label
-      }),
-      onClick: e => {
-        e.stopPropagation();
-        onRemove(e);
-      },
-      disabled: isDisabled,
-      ...{
-        className: "x3nfvp2 x6s0dn4 xl56j7k x1n2onr6 x1717udv xkd40ry x1ypdohk xjspbzw x1kky2od xlup9mm x1heor9g x17nn4n9 x1s928wv x1j6awrg x1xsm0q9"
-      },
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: "close",
-        size: "xsm",
-        color: "inherit"
-      })
-    })]
+    }), endContent, removeButton]
   });
   const sharedProps = {
     'data-testid': testId,
@@ -257,16 +248,54 @@ export function Token({
     'aria-description': description
   };
   if (role === 'link') {
-    return /*#__PURE__*/_jsx(LinkComponent, {
+    if (onRemove == null) {
+      return /*#__PURE__*/_jsx(LinkComponent, {
+        ref: ref,
+        href: href,
+        "aria-disabled": isDisabled || undefined,
+        ...sharedProps,
+        ...mergeProps(themeProps('token', {
+          color,
+          size
+        }), stylex.props(styles.base, sizeStyles[size], colorStyles[color], styles.interactive, isDisabled && styles.disabled, xstyle), className, style),
+        children: content
+      });
+    }
+
+    // With a remove button, the link cannot be the root — nesting a <button>
+    // inside an <a> is invalid HTML (WCAG 4.1.2). Delegate to TokenLink, a
+    // non-presentational wrapper that renders a <span> container with the link
+    // and the remove button as siblings and wires up useClickableContainer so
+    // the whole token surface activates the link (including middle-click and
+    // cmd/ctrl-click to open in a new tab). Token itself stays presentational
+    // (no refs/effects) per the @astryx/presentational-component rule.
+    return /*#__PURE__*/_jsx(TokenLink, {
       ref: ref,
       href: href,
-      "aria-disabled": isDisabled || undefined,
+      isDisabled: isDisabled,
+      LinkComponent: LinkComponent,
+      icon: icon,
+      endContent: endContent,
+      removeButton: removeButton,
+      linkStyleProps: {
+        className: "xmper1u xln7xf2 x1heor9g x1a2a7pz xb3r6kr xeuugli"
+      },
+      labelContent: /*#__PURE__*/_jsx("span", {
+        ...{
+          0: {
+            className: "xb3r6kr xlyipyv xuxw1ft xeuugli"
+          },
+          1: {
+            className: "xlyipyv xeuugli x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr x1hyvwdk xuxw1ft xc342km"
+          }
+        }[!!isLabelHidden << 0],
+        children: label
+      }),
       ...sharedProps,
       ...mergeProps(themeProps('token', {
         color,
         size
-      }), stylex.props(styles.base, sizeStyles[size], colorStyles[color], styles.interactive, isDisabled && styles.disabled, xstyle), className, style),
-      children: content
+      }), stylex.props(styles.base, sizeStyles[size], colorStyles[color], styles.interactive, styles.focusVisibleOutline, isDisabled && styles.disabled, xstyle), className, style)
     });
   }
   if (effectiveOnClick != null) {
@@ -303,25 +332,7 @@ export function Token({
           }[!!isLabelHidden << 0],
           children: label
         })
-      }), endContent, onRemove != null && /*#__PURE__*/_jsx("button", {
-        type: "button",
-        "aria-label": t('@astryx.token.remove', {
-          label
-        }),
-        onClick: e => {
-          e.stopPropagation();
-          onRemove(e);
-        },
-        disabled: isDisabled,
-        ...{
-          className: "x3nfvp2 x6s0dn4 xl56j7k x1n2onr6 x1717udv xkd40ry x1ypdohk xjspbzw x1kky2od xlup9mm x1heor9g x17nn4n9 x1s928wv x1j6awrg x1xsm0q9"
-        },
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: "close",
-          size: "xsm",
-          color: "inherit"
-        })
-      })]
+      }), endContent, removeButton]
     });
   }
   return /*#__PURE__*/_jsx("span", {

package/dist/Token/TokenLink.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @file TokenLink.tsx
+ * @input Rendered token pieces (icon, label, endContent, remove button) plus
+ *   container/link styling props and the resolved LinkComponent
+ * @output Exports TokenLink, the interactive container for the href+onRemove Token variant
+ * @position Internal to Token; keeps Token.tsx presentational
+ *
+ * Token is a presentational component (see
+ * /internal/eslint-plugin-astryx/presentational-component.js) and must not use
+ * refs or effects. When a Token has both `href` and `onRemove`, the remove
+ * <button> must be a sibling of the link (nesting a button inside an anchor is
+ * invalid HTML — WCAG 4.1.2), so the surface becomes a clickable container that
+ * delegates to an inner link. That delegation needs refs, so it lives here.
+ *
+ * useClickableContainer gives the container middle-click and cmd/ctrl-click
+ * open-in-new-tab behavior for the link, ignores clicks on nested interactive
+ * elements (the remove button), and skips activation during text selection.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Token/Token.tsx (renders TokenLink for the href+onRemove case)
+ * - /packages/core/src/Token/Token.test.tsx (tests for delegated behavior)
+ */
+import type { ReactNode, CSSProperties, Ref, HTMLAttributes } from 'react';
+import type { LinkComponentType } from '../Link/types';
+export interface TokenLinkProps extends HTMLAttributes<HTMLElement> {
+    /** Ref forwarded to the container element. */
+    ref?: Ref<HTMLElement>;
+    /** Link URL. */
+    href: string;
+    /** Whether the token is disabled. */
+    isDisabled: boolean;
+    /** Resolved link component (native `<a>` or a router link). */
+    LinkComponent: LinkComponentType;
+    /** `stylex.props()` output applied to the invisible inner link. */
+    linkStyleProps: {
+        className?: string;
+        style?: CSSProperties;
+    };
+    /** Visible (or visually hidden) label node rendered inside the link. */
+    labelContent: ReactNode;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+    /** Content rendered after the label, before the remove button. */
+    endContent?: ReactNode;
+    /** The remove button node, rendered as a sibling of the link. */
+    removeButton: ReactNode;
+    /** Allow data-* attributes (e.g. data-testid, theme targets) on the container. */
+    [dataAttr: `data-${string}`]: unknown;
+}
+/**
+ * Interactive container for a Token that is both a link and removable.
+ *
+ * Renders a `<span>` wrapping an invisible inner link and the remove button as
+ * siblings. useClickableContainer delegates clicks on the surface to the link
+ * (including middle-click / cmd+click to open in a new tab) while the remove
+ * button keeps handling its own clicks.
+ */
+export declare function TokenLink({ ref, href, isDisabled, LinkComponent, linkStyleProps, labelContent, icon, endContent, removeButton, ...containerProps }: TokenLinkProps): import("react").JSX.Element;
+export declare namespace TokenLink {
+    var displayName: string;
+}
+//# sourceMappingURL=TokenLink.d.ts.map

package/dist/Token/TokenLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenLink.d.ts","sourceRoot":"","sources":["../../src/Token/TokenLink.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAE,aAAa,EAAE,GAAG,EAAE,cAAc,EAAC,MAAM,OAAO,CAAC;AAIzE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,WAAW,CAAC;IACjE,8CAA8C;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,gBAAgB;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,UAAU,EAAE,OAAO,CAAC;IACpB,+DAA+D;IAC/D,aAAa,EAAE,iBAAiB,CAAC;IACjC,mEAAmE;IACnE,cAAc,EAAE;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,aAAa,CAAA;KAAC,CAAC;IAC5D,wEAAwE;IACxE,YAAY,EAAE,SAAS,CAAC;IACxB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kEAAkE;IAClE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iEAAiE;IACjE,YAAY,EAAE,SAAS,CAAC;IACxB,kFAAkF;IAClF,CAAC,QAAQ,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CACvC;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,IAAI,EACJ,UAAU,EACV,aAAa,EACb,cAAc,EACd,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,GAAG,cAAc,EAClB,EAAE,cAAc,+BA6BhB;yBAxCe,SAAS"}

package/dist/Token/TokenLink.js

@@ -0,0 +1,76 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file TokenLink.tsx
+ * @input Rendered token pieces (icon, label, endContent, remove button) plus
+ *   container/link styling props and the resolved LinkComponent
+ * @output Exports TokenLink, the interactive container for the href+onRemove Token variant
+ * @position Internal to Token; keeps Token.tsx presentational
+ *
+ * Token is a presentational component (see
+ * /internal/eslint-plugin-astryx/presentational-component.js) and must not use
+ * refs or effects. When a Token has both `href` and `onRemove`, the remove
+ * <button> must be a sibling of the link (nesting a button inside an anchor is
+ * invalid HTML — WCAG 4.1.2), so the surface becomes a clickable container that
+ * delegates to an inner link. That delegation needs refs, so it lives here.
+ *
+ * useClickableContainer gives the container middle-click and cmd/ctrl-click
+ * open-in-new-tab behavior for the link, ignores clicks on nested interactive
+ * elements (the remove button), and skips activation during text selection.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Token/Token.tsx (renders TokenLink for the href+onRemove case)
+ * - /packages/core/src/Token/Token.test.tsx (tests for delegated behavior)
+ */
+import { useRef } from 'react';
+import { mergeRefs } from "../utils/index.js";
+import { useClickableContainer } from "../hooks/useClickableContainer.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Interactive container for a Token that is both a link and removable.
+ *
+ * Renders a `<span>` wrapping an invisible inner link and the remove button as
+ * siblings. useClickableContainer delegates clicks on the surface to the link
+ * (including middle-click / cmd+click to open in a new tab) while the remove
+ * button keeps handling its own clicks.
+ */
+export function TokenLink({
+  ref,
+  href,
+  isDisabled,
+  LinkComponent,
+  linkStyleProps,
+  labelContent,
+  icon,
+  endContent,
+  removeButton,
+  ...containerProps
+}) {
+  const containerRef = useRef(null);
+  const linkRef = useRef(null);
+  const {
+    onClick,
+    onMouseUp
+  } = useClickableContainer({
+    containerRef,
+    interactiveRef: linkRef,
+    href,
+    disabled: isDisabled
+  });
+  return /*#__PURE__*/_jsxs("span", {
+    ref: mergeRefs(ref, containerRef),
+    onClick: isDisabled ? undefined : onClick,
+    onMouseUp: isDisabled ? undefined : onMouseUp,
+    ...containerProps,
+    children: [icon, /*#__PURE__*/_jsx(LinkComponent, {
+      ref: linkRef,
+      href: href,
+      "aria-disabled": isDisabled || undefined,
+      ...linkStyleProps,
+      children: labelContent
+    }), endContent, removeButton]
+  });
+}
+TokenLink.displayName = 'TokenLink';

package/dist/Token/index.d.ts

@@ -6,6 +6,32 @@
  *
  * SYNC: When adding new Token files, update exports here
  */
+/**
+ * Extensible color map for Token.
+ *
+ * Theme packages can add custom colors via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Token' {
+ *   interface TokenColorMap {
+ *     brand: true;
+ *   }
+ * }
+ * ```
+ */
+export interface TokenColorMap {
+    default: true;
+    red: true;
+    orange: true;
+    yellow: true;
+    green: true;
+    teal: true;
+    cyan: true;
+    blue: true;
+    purple: true;
+    pink: true;
+    gray: true;
+}
 export { Token } from './Token';
-export type { TokenProps, TokenColor, TokenColorMap, TokenSize } from './Token';
+export type { TokenProps, TokenColor, TokenSize } from './Token';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Token/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAC9B,YAAY,EAAC,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Token/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,IAAI,CAAC;IACd,GAAG,EAAE,IAAI,CAAC;IACV,MAAM,EAAE,IAAI,CAAC;IACb,MAAM,EAAE,IAAI,CAAC;IACb,KAAK,EAAE,IAAI,CAAC;IACZ,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,IAAI,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAC9B,YAAY,EAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC"}

package/dist/Token/index.js

@@ -10,4 +10,18 @@
  *
  * SYNC: When adding new Token files, update exports here
  */
+
+/**
+ * Extensible color map for Token.
+ *
+ * Theme packages can add custom colors via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Token' {
+ *   interface TokenColorMap {
+ *     brand: true;
+ *   }
+ * }
+ * ```
+ */
 export { Token } from "./Token.js";

package/dist/Tokenizer/Tokenizer.d.ts

@@ -8,7 +8,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Tokenizer/index.ts
  * - /apps/storybook/stories/Tokenizer.stories.tsx
- * - /packages/cli/templates/blocks/components/Tokenizer/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Tokenizer/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/Tokenizer/Tokenizer.js

@@ -12,7 +12,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Tokenizer/index.ts
  * - /apps/storybook/stories/Tokenizer.stories.tsx
- * - /packages/cli/templates/blocks/components/Tokenizer/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Tokenizer/ (showcase blocks)
  */
 import React, { useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/Toolbar/Toolbar.d.ts

@@ -9,7 +9,7 @@
  * - /packages/core/src/Toolbar/Toolbar.test.tsx
  * - /packages/core/src/Toolbar/index.ts
  * - /apps/storybook/stories/Toolbar.stories.tsx
- * - /packages/cli/templates/blocks/components/Toolbar/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Toolbar/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/Toolbar/Toolbar.js

@@ -13,7 +13,7 @@
  * - /packages/core/src/Toolbar/Toolbar.test.tsx
  * - /packages/core/src/Toolbar/index.ts
  * - /apps/storybook/stories/Toolbar.stories.tsx
- * - /packages/cli/templates/blocks/components/Toolbar/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Toolbar/ (showcase blocks)
  */
 import { useCallback } from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/Tooltip/Tooltip.d.ts

@@ -7,7 +7,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Tooltip/index.ts
  * - /apps/storybook/stories/Tooltip.stories.tsx
- * - /packages/cli/templates/blocks/components/Tooltip/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Tooltip/ (showcase blocks)
  */
 import React, { type ReactElement, type ReactNode } from 'react';
 import { type TooltipFocusTrigger } from './useTooltip';

package/dist/Tooltip/Tooltip.js

@@ -11,7 +11,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Tooltip/index.ts
  * - /apps/storybook/stories/Tooltip.stories.tsx
- * - /packages/cli/templates/blocks/components/Tooltip/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Tooltip/ (showcase blocks)
  */
 import React, { useCallback, useRef } from 'react';
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";

package/dist/TopNav/TopNav.d.ts

@@ -9,7 +9,7 @@
  * - /packages/core/src/TopNav/TopNav.test.tsx
  * - /packages/core/src/TopNav/index.ts
  * - /apps/storybook/stories/TopNav.stories.tsx
- * - /packages/cli/templates/blocks/components/TopNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 import type { ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/TopNav/TopNav.js

@@ -13,7 +13,7 @@
  * - /packages/core/src/TopNav/TopNav.test.tsx
  * - /packages/core/src/TopNav/index.ts
  * - /apps/storybook/stories/TopNav.stories.tsx
- * - /packages/cli/templates/blocks/components/TopNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";

package/dist/TopNav/TopNavHeading.d.ts

@@ -13,7 +13,7 @@
  * - /packages/core/src/TopNav/TopNav.test.tsx
  * - /packages/core/src/TopNav/index.ts
  * - /apps/storybook/stories/TopNav.stories.tsx
- * - /packages/cli/templates/blocks/components/TopNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
 import type { LinkComponentType } from '../Link/types';

package/dist/TopNav/TopNavHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavHeading.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAatD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4K5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,IAAI,EACJ,SAAS,EACT,OAAO,EACP,WAAW,EAAE,eAAe,EAC5B,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,kBAAkB,+BA4WpB;yBA/Xe,aAAa"}
+{"version":3,"file":"TopNavHeading.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAatD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4K5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,IAAI,EACJ,SAAS,EACT,OAAO,EACP,WAAW,EAAE,eAAe,EAC5B,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,kBAAkB,+BA2WpB;yBA9Xe,aAAa"}

package/dist/TopNav/TopNavHeading.js

@@ -17,7 +17,7 @@
  * - /packages/core/src/TopNav/TopNav.test.tsx
  * - /packages/core/src/TopNav/index.ts
  * - /apps/storybook/stories/TopNav.stories.tsx
- * - /packages/cli/templates/blocks/components/TopNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 import { useMemo, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -25,7 +25,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, fontWeightVars, radiusVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { usePopover } from "../Popover/usePopover.js";
 import { Link } from "../Link/index.js";
-import { getIcon } from "../Icon/globalIconRegistry.js";
+import { useIcon } from "../Icon/index.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { useMenuHover } from "../hooks/useMenuHover.js";
@@ -125,6 +125,7 @@ export function TopNavHeading({
   ...props
 }) {
   const t = useTranslator();
+  const chevronDownIcon = useIcon('chevronDown');
   const LinkComponent = useLinkComponent(as);
   // Support both headingHref and legacy href
   const headingHref = headingHrefProp ?? href;
@@ -214,7 +215,7 @@ export function TopNavHeading({
     ...{
       className: "x2lah0s x78zum5 x6s0dn4 xl56j7k xy8csz5 ximsjs8 xv9yike"
     },
-    children: getIcon('chevronDown')
+    children: chevronDownIcon
   });
   const headerEndContentElement = headerEndContent && /*#__PURE__*/_jsx("span", {
     ...{
@@ -240,7 +241,7 @@ export function TopNavHeading({
       ...{
         className: "x2lah0s x78zum5 x6s0dn4 xl56j7k xy8csz5 ximsjs8 xv9yike x19jd1h0"
       },
-      children: getIcon('chevronDown')
+      children: chevronDownIcon
     }))]
   });
 
@@ -304,7 +305,7 @@ export function TopNavHeading({
           ...{
             className: "x2lah0s x78zum5 x6s0dn4 xl56j7k xy8csz5 ximsjs8 xv9yike x1ypdohk xh6dtrn xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x1sodnla x1yc453h xe9uy6x"
           },
-          children: getIcon('chevronDown')
+          children: chevronDownIcon
         })), headerEndContentElement]
       }), popover.render(/*#__PURE__*/_jsxs("div", {
         ref: menuRef,
@@ -360,7 +361,7 @@ export function TopNavHeading({
           ...{
             className: "x2lah0s x78zum5 x6s0dn4 xl56j7k xy8csz5 ximsjs8 xv9yike x1ypdohk xh6dtrn xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x1sodnla x1yc453h xe9uy6x"
           },
-          children: getIcon('chevronDown')
+          children: chevronDownIcon
         }) : undefined), headerEndContentElement]
       }), popover.render(/*#__PURE__*/_jsxs("div", {
         ref: menuRef,

package/dist/TopNav/TopNavItem.d.ts

@@ -9,7 +9,7 @@
  * - /packages/core/src/TopNav/TopNav.test.tsx
  * - /packages/core/src/TopNav/index.ts
  * - /apps/storybook/stories/TopNav.stories.tsx
- * - /packages/cli/templates/blocks/components/TopNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 import type { ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/TopNav/TopNavItem.js

@@ -13,7 +13,7 @@
  * - /packages/core/src/TopNav/TopNav.test.tsx
  * - /packages/core/src/TopNav/index.ts
  * - /apps/storybook/stories/TopNav.stories.tsx
- * - /packages/cli/templates/blocks/components/TopNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";

package/dist/TopNav/TopNavMegaMenu.d.ts

@@ -16,7 +16,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/TopNav/TopNav.doc.mjs
  * - /packages/core/src/TopNav/index.ts
- * - /packages/cli/templates/blocks/components/TopNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';