@astryxdesign/core 0.2.0 → 0.3.0-canary.5f9896c

package/dist/Popover/usePopover.js

@@ -21,6 +21,7 @@ import { useFocusTrap } from "../hooks/useFocusTrap.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, shadowVars } from "../theme/tokens.stylex.js";
 import { Button } from "../Button/index.js";
+import { rtlStyles } from "../utils/index.js";
 import { useTranslator } from "../i18n/index.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -34,6 +35,18 @@ const styles = {
   contentWrapper: {
     kVAEAm: "x1n2onr6",
     $$css: true
+  },
+  closeButtonWrapper: {
+    kVAEAm: "x10l6tqk",
+    krVfgx: "x1ey2m1c",
+    kY2c9j: "x1vjfegm",
+    kzqmXN: "x1i1rx1s x10okhzq",
+    kZKoxP: "xjm9jq1 x132qfvm",
+    kVQacm: "xb3r6kr x1dordxg",
+    kz4h6p: "x1hyvwdk x10wafsz",
+    kfzvcC: "x47corl xbt4iw",
+    kLKAdn: "xexx8yu x1kw28su",
+    $$css: true
   }
 };
 
@@ -182,9 +195,7 @@ export function usePopover(options = {}) {
       "aria-label": role === 'dialog' ? dialogLabel : undefined,
       ...stylex.props(styles.contentWrapper, hasSurface && styles.surface, xstyle),
       children: [children, hasCloseButton && /*#__PURE__*/_jsx("div", {
-        ...{
-          className: "x10l6tqk x1ey2m1c x1nrll8i x31h1t8 x1vjfegm x1i1rx1s x10okhzq xjm9jq1 x132qfvm xb3r6kr x1dordxg x1hyvwdk x10wafsz x47corl xbt4iw xexx8yu x1kw28su"
-        },
+        ...stylex.props(styles.closeButtonWrapper, rtlStyles.centerInline('100%')),
         children: /*#__PURE__*/_jsx(Button, {
           variant: "secondary",
           label: closeButtonLabel,

package/dist/PowerSearch/PowerSearch.d.ts

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

package/dist/PowerSearch/PowerSearch.js

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

package/dist/ProgressBar/ProgressBar.d.ts

@@ -1,29 +1,32 @@
 import type { BaseProps } from '../BaseProps';
-/**
- * Extensible variant map for ProgressBar.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/ProgressBar' {
- *   interface ProgressBarVariantMap {
- *     'brand': true;
- *   }
- * }
- * ```
- */
-export interface ProgressBarVariantMap {
-    accent: true;
-    success: true;
-    warning: true;
-    neutral: true;
-    error: true;
-}
+import type { ProgressBarVariantMap } from './index';
 /**
  * Progress bar variant type — maps to semantic color tokens.
  * Extensible via module augmentation of ProgressBarVariantMap.
  */
 export type ProgressBarVariant = keyof ProgressBarVariantMap;
+/**
+ * A fixed target mark drawn on the progress track.
+ *
+ * Positioned by `value` in the same `0..max` scale as the bar's `value` prop —
+ * mirroring the object shape of Slider's `marks` so the two APIs stay
+ * consistent.
+ */
+export interface ProgressBarMark {
+    /**
+     * Position of the mark in the same `0..max` scale as `value`. Values
+     * outside the range are clamped to the track edges.
+     */
+    value: number;
+    /**
+     * Names the mark. A mark stands for something meaningful on the track — a
+     * goal, a threshold, a quarter target — so a label is required: it is the
+     * mark's accessible name and the text revealed in a `Tooltip` on hover and
+     * keyboard focus. Can be the value itself (e.g. `'70%'`) or something richer
+     * (e.g. `'Q1 target: 50%'`).
+     */
+    label: string;
+}
 export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLDivElement>;
@@ -71,6 +74,18 @@ export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
      * @default false
      */
     isIndeterminate?: boolean;
+    /**
+     * Target marks drawn on the track at fixed points in the same `0..max`
+     * scale as `value` — e.g. a goal line. Marks stay visible whether progress
+     * is below or past them, and take their color from what they sit on: a mark
+     * inside the filled area uses the fill variant's on-color (on-accent,
+     * on-warning, on-error, …), while a mark still out on the bare track uses
+     * `--color-text-primary` (`--color-text-secondary` on a disabled bar, which
+     * dims everything it draws). Each mark's required `label` names it for
+     * assistive tech and is revealed via a `Tooltip` on hover/focus. Ignored when
+     * `isIndeterminate` is true.
+     */
+    marks?: ReadonlyArray<ProgressBarMark>;
     /**
      * When true, the progress bar is visually disabled — the fill bar and
      * text use disabled colors. Use for canceled or inactive operations.
@@ -91,7 +106,8 @@ export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
  *
  * ProgressBar is intentionally minimal — compose additional labels, status
  * icons, and descriptions alongside the bar using layout components rather
- * than adding props to ProgressBar itself.
+ * than adding props to ProgressBar itself. The exception is on-track content
+ * like `marks`, which are positioned by value over the track.
  *
  * Styles use Astryx theme tokens via StyleX.
  * Wrap your app in <Theme> to apply a theme.
@@ -103,9 +119,27 @@ export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
  * <ProgressBar value={3.2} max={5} label="Disk usage" hasValueLabel
  *   formatValueLabel={(v, m) => `${v} GB / ${m} GB`} />
  * <ProgressBar value={30} label="Canceled" isDisabled hasValueLabel />
+ * <ProgressBar value={45} label="Fundraiser" marks={[{value: 80, label: 'Goal'}]} />
+ * ```
+ *
+ * A mark's height, width, and color are directly themeable via the
+ * `progressbar-mark` target. The target reflects `data-placement`
+ * (`"fill"` when the mark sits inside the filled area, `"track"` when it is
+ * still out on the bare track) and `data-variant` (the fill's variant), so a
+ * theme can style the two cases separately — e.g. a taller "goal flag" tick
+ * that overhangs the bar (centered, so the overhang is symmetric):
+ *
+ * @example
+ * ```
+ * defineTheme({
+ *   name: 'campaign',
+ *   components: {
+ *     'progressbar-mark': {base: {height: '16px', backgroundColor: 'red'}},
+ *   },
+ * });
  * ```
  */
-export declare function ProgressBar({ value, max, label, isLabelHidden, hasValueLabel, formatValueLabel, variant, isIndeterminate, isDisabled, xstyle, className, style, 'data-testid': dataTestId, ref, ...rest }: ProgressBarProps): import("react").JSX.Element;
+export declare function ProgressBar({ value, max, label, isLabelHidden, hasValueLabel, formatValueLabel, variant, isIndeterminate, isDisabled, marks, xstyle, className, style, 'data-testid': dataTestId, ref, ...rest }: ProgressBarProps): import("react").JSX.Element;
 export declare namespace ProgressBar {
     var displayName: string;
 }

package/dist/ProgressBar/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;CACb;AAED;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAkID;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,gBAA0C,EAC1C,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAuFlB;yBAvGe,WAAW"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;AAUnD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IACvC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA2OD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,gBAA0C,EAC1C,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAmKlB;yBApLe,WAAW"}

package/dist/ProgressBar/ProgressBar.js

@@ -11,37 +11,38 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/ProgressBar/ProgressBar.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/ProgressBar/ProgressBar.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/ProgressBar/ProgressBarMarkTooltip.tsx (the lazy Tooltip wrapper for labeled marks)
  * - /packages/core/src/ProgressBar/index.ts (exports if types change)
  * - /apps/storybook/stories/ProgressBar.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/ProgressBar/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/ProgressBar/ (showcase blocks)
  */
-import { useId } from 'react';
+import { lazy, Suspense, useId } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, fontWeightVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Every mark is wrapped in a Tooltip (marks always carry a label), so load it
+// lazily: a ProgressBar with no marks never bundles the Tooltip chunk. While it
+// loads, the Suspense fallback shows the bare mark, so nothing disappears; the
+// tooltip simply attaches once the chunk is ready.
+const LazyProgressBarMarkTooltip = /*#__PURE__*/lazy(async () => import("./ProgressBarMarkTooltip.js"));
 
 /**
- * Extensible variant map for ProgressBar.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/ProgressBar' {
- *   interface ProgressBarVariantMap {
- *     'brand': true;
- *   }
- * }
- * ```
+ * Progress bar variant type — maps to semantic color tokens.
+ * Extensible via module augmentation of ProgressBarVariantMap.
  */
 
 /**
- * Progress bar variant type — maps to semantic color tokens.
- * Extensible via module augmentation of ProgressBarVariantMap.
+ * A fixed target mark drawn on the progress track.
+ *
+ * Positioned by `value` in the same `0..max` scale as the bar's `value` prop —
+ * mirroring the object shape of Slider's `marks` so the two APIs stay
+ * consistent.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
 // =============================================================================
 // Indeterminate animation
 // =============================================================================
@@ -83,6 +84,16 @@ const styles = {
     kyAemX: "x4hg4is",
     ko0y90: "xa4qsjk",
     $$css: true
+  },
+  mark: {
+    kVAEAm: "x10l6tqk",
+    k87sOh: "xwa60dl",
+    kzqmXN: "xfo62xy",
+    kZKoxP: "xdk7pt",
+    kI3sdo: "x1a2a7pz x17nn4n9",
+    kInvED: "x1wfwxd8 x7s97pk",
+    k3aq6I: "x11lhmoz xoffwj3",
+    $$css: true
   }
 };
 const variantStyles = {
@@ -111,6 +122,69 @@ const variantStyles = {
     $$css: true
   }
 };
+
+// A mark sitting inside the filled area is drawn *on* the bar, so it takes the
+// on-color that pairs with the fill's own variant color — the same pairing
+// Badge uses for solid semantic backgrounds.
+//
+// `neutral` and `disabled` both fill with the muted `--color-text-disabled`
+// gray, which carries no semantic weight and has no dedicated on-token, so
+// they fall back to a plain foreground. They pick different ones: a `neutral`
+// bar is live, so its mark keeps the full-contrast `--color-text-primary` a
+// mark uses out on the track; a `disabled` bar is deliberately low-emphasis —
+// its own label and value text drop to muted colors — so its mark steps down
+// to `--color-text-secondary` rather than becoming the loudest thing on a
+// grayed-out component.
+const markOnFillStyles = {
+  accent: {
+    kWkggS: "x1azo05",
+    $$css: true
+  },
+  success: {
+    kWkggS: "x9mohwv",
+    $$css: true
+  },
+  warning: {
+    kWkggS: "xmgwp2l",
+    $$css: true
+  },
+  error: {
+    kWkggS: "xfba6wv",
+    $$css: true
+  },
+  neutral: {
+    kWkggS: "x19aspcf",
+    $$css: true
+  },
+  disabled: {
+    kWkggS: "xdomwnj",
+    $$css: true
+  }
+};
+
+// A mark out on the bare track is a foreground tick over the muted track
+// background, so it takes `--color-text-primary`.
+//
+// The obvious candidate was `--color-border-emphasized` — the emphasized
+// divider color `Divider`'s `strong` variant and `Slider`'s marks use — but
+// divider tokens sit a step or two from the track on the same neutral ramp, so
+// a mark drawn in one is at or near invisible: measured against each shipped
+// theme's track it lands between 1.00:1 (theme-neutral, both modes, where the
+// track is aliased to that very token) and 2.9:1, under the 3:1 WCAG 1.4.11
+// non-text floor in 7 of 8 themes. `--color-text-secondary` still misses in
+// two. `--color-text-primary` is the one foreground guaranteed to read against
+// every surface a theme defines: 5.8:1 to 15.7:1 on the track across all
+// themes and both modes.
+const markOnTrackStyles = {
+  track: {
+    kWkggS: "x19aspcf",
+    $$css: true
+  },
+  trackDisabled: {
+    kWkggS: "xdomwnj",
+    $$css: true
+  }
+};
 function defaultFormatValueLabel(value, max) {
   const pct = max > 0 ? Math.round(value / max * 100) : 0;
   return `${pct}%`;
@@ -125,7 +199,8 @@ function defaultFormatValueLabel(value, max) {
  *
  * ProgressBar is intentionally minimal — compose additional labels, status
  * icons, and descriptions alongside the bar using layout components rather
- * than adding props to ProgressBar itself.
+ * than adding props to ProgressBar itself. The exception is on-track content
+ * like `marks`, which are positioned by value over the track.
  *
  * Styles use Astryx theme tokens via StyleX.
  * Wrap your app in <Theme> to apply a theme.
@@ -137,6 +212,24 @@ function defaultFormatValueLabel(value, max) {
  * <ProgressBar value={3.2} max={5} label="Disk usage" hasValueLabel
  *   formatValueLabel={(v, m) => `${v} GB / ${m} GB`} />
  * <ProgressBar value={30} label="Canceled" isDisabled hasValueLabel />
+ * <ProgressBar value={45} label="Fundraiser" marks={[{value: 80, label: 'Goal'}]} />
+ * ```
+ *
+ * A mark's height, width, and color are directly themeable via the
+ * `progressbar-mark` target. The target reflects `data-placement`
+ * (`"fill"` when the mark sits inside the filled area, `"track"` when it is
+ * still out on the bare track) and `data-variant` (the fill's variant), so a
+ * theme can style the two cases separately — e.g. a taller "goal flag" tick
+ * that overhangs the bar (centered, so the overhang is symmetric):
+ *
+ * @example
+ * ```
+ * defineTheme({
+ *   name: 'campaign',
+ *   components: {
+ *     'progressbar-mark': {base: {height: '16px', backgroundColor: 'red'}},
+ *   },
+ * });
  * ```
  */
 export function ProgressBar({
@@ -149,6 +242,7 @@ export function ProgressBar({
   variant = 'accent',
   isIndeterminate = false,
   isDisabled = false,
+  marks,
   xstyle,
   className,
   style,
@@ -168,6 +262,27 @@ export function ProgressBar({
   const valueText = formatValueLabel(clampedValue, safeMax);
   const showValueLabel = hasValueLabel && !isIndeterminate;
   const fillVariant = isDisabled ? 'disabled' : variant;
+
+  // Marks make no sense without a determinate value, so they are only drawn
+  // in determinate mode. Non-finite mark values are dropped; the rest are
+  // clamped to the track edges, matching the bar's own `clampedValue`.
+  //
+  // Each mark also records whether it lands on the filled part of the bar
+  // (`isOnFill`), which decides its color: a mark inside the fill reads against
+  // the variant color, one out on the bare track reads against the track. A
+  // mark exactly at the fill's leading edge counts as on the fill — it is the
+  // "reached the target" moment — except at zero progress, where there is no
+  // fill for it to sit on.
+  const resolvedMarks = !isIndeterminate && marks ? marks.filter(mark => Number.isFinite(mark.value)).map(mark => {
+    const clamped = Math.min(Math.max(0, mark.value), safeMax);
+    const pct = safeMax > 0 ? clamped / safeMax * 100 : 0;
+    return {
+      value: mark.value,
+      label: mark.label,
+      pct,
+      isOnFill: percentage > 0 && pct <= percentage
+    };
+  }) : [];
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     ...mergeProps(themeProps('progressbar', {
@@ -210,7 +325,7 @@ export function ProgressBar({
     }) : /*#__PURE__*/_jsx(VisuallyHidden, {
       id: labelId,
       children: label
-    }), /*#__PURE__*/_jsx("div", {
+    }), /*#__PURE__*/_jsxs("div", {
       role: "progressbar",
       "aria-valuenow": isIndeterminate ? undefined : clampedValue,
       "aria-valuemin": isIndeterminate ? undefined : 0,
@@ -218,9 +333,14 @@ export function ProgressBar({
       "aria-labelledby": labelId,
       "aria-valuetext": isIndeterminate ? undefined : valueText,
       ...mergeProps(themeProps('progressbar-track'), {
-        className: "xh8yej3 xdk7pt xwmxj5m xjspbzw xb3r6kr"
-      }),
-      children: isIndeterminate ? /*#__PURE__*/_jsx("div", {
+        0: {
+          className: "x1n2onr6 xh8yej3 xdk7pt xwmxj5m xjspbzw"
+        },
+        1: {
+          className: "x1n2onr6 xh8yej3 xdk7pt xwmxj5m xjspbzw xb3r6kr"
+        }
+      }[!!isIndeterminate << 0]),
+      children: [isIndeterminate ? /*#__PURE__*/_jsx("div", {
         ...mergeProps(themeProps('progressbar-fill', {
           variant: fillVariant
         }), stylex.props(styles.indeterminateFill, variantStyles[fillVariant]))
@@ -231,7 +351,34 @@ export function ProgressBar({
         style: {
           width: `${percentage}%`
         }
-      })
+      }), resolvedMarks.map(mark => {
+        // The tick element. It is both the Tooltip's anchor and the Suspense
+        // fallback shown while the lazy Tooltip chunk loads, so the tick is
+        // always visible and the label attaches once ready. The list `key`
+        // lives on the mapped <Suspense>, not here.
+        //
+        // `placement` is reflected as `data-placement` (and a class) so a
+        // theme can style the two cases separately on the
+        // `progressbar-mark` target; `variant` mirrors the fill's variant
+        // for the same reason.
+        const markEl = /*#__PURE__*/_jsx("span", {
+          tabIndex: 0,
+          ...mergeProps(themeProps('progressbar-mark', {
+            variant: fillVariant,
+            placement: mark.isOnFill ? 'fill' : 'track'
+          }), stylex.props(styles.mark, mark.isOnFill ? markOnFillStyles[fillVariant] : isDisabled ? markOnTrackStyles.trackDisabled : markOnTrackStyles.track)),
+          style: {
+            insetInlineStart: `${mark.pct}%`
+          }
+        });
+        return /*#__PURE__*/_jsx(Suspense, {
+          fallback: markEl,
+          children: /*#__PURE__*/_jsx(LazyProgressBarMarkTooltip, {
+            content: mark.label,
+            children: markEl
+          })
+        }, `${mark.value}:${mark.label}`);
+      })]
     })]
   });
 }

package/dist/ProgressBar/ProgressBarMarkTooltip.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @file ProgressBarMarkTooltip.tsx
+ * @input Uses React, Tooltip, the mark element to wrap, and its label
+ * @output Default-exports the lazily-loaded Tooltip wrapper for a labeled mark
+ * @position Split out of ProgressBar so the Tooltip only loads when a mark is
+ *   actually rendered — a ProgressBar with no marks never bundles the Tooltip
+ *   chunk.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/ProgressBar/ProgressBar.tsx (the lazy() + Suspense wrapper)
+ * - /packages/core/src/ProgressBar/ProgressBar.test.tsx
+ */
+import type { ReactElement } from 'react';
+export interface ProgressBarMarkTooltipProps {
+    /** The mark's accessible name / visible tooltip text. */
+    content: string;
+    /** The bare mark element the tooltip anchors to (also the Suspense fallback). */
+    children: ReactElement;
+}
+/**
+ * Wraps a labeled mark in a `Tooltip` that reveals its label on hover and
+ * keyboard focus. Placement and focus behavior match the inline usage this
+ * split replaced (`placement="above"`, `focusTrigger="always"`), so the
+ * rendered result is identical — only the load timing changes.
+ */
+export default function ProgressBarMarkTooltip({ content, children, }: ProgressBarMarkTooltipProps): ReactElement;
+//# sourceMappingURL=ProgressBarMarkTooltip.d.ts.map

package/dist/ProgressBar/ProgressBarMarkTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarMarkTooltip.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBarMarkTooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAGxC,MAAM,WAAW,2BAA2B;IAC1C,yDAAyD;IACzD,OAAO,EAAE,MAAM,CAAC;IAChB,iFAAiF;IACjF,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,OAAO,EACP,QAAQ,GACT,EAAE,2BAA2B,GAAG,YAAY,CAM5C"}

package/dist/ProgressBar/ProgressBarMarkTooltip.js

@@ -0,0 +1,35 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ProgressBarMarkTooltip.tsx
+ * @input Uses React, Tooltip, the mark element to wrap, and its label
+ * @output Default-exports the lazily-loaded Tooltip wrapper for a labeled mark
+ * @position Split out of ProgressBar so the Tooltip only loads when a mark is
+ *   actually rendered — a ProgressBar with no marks never bundles the Tooltip
+ *   chunk.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/ProgressBar/ProgressBar.tsx (the lazy() + Suspense wrapper)
+ * - /packages/core/src/ProgressBar/ProgressBar.test.tsx
+ */
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Wraps a labeled mark in a `Tooltip` that reveals its label on hover and
+ * keyboard focus. Placement and focus behavior match the inline usage this
+ * split replaced (`placement="above"`, `focusTrigger="always"`), so the
+ * rendered result is identical — only the load timing changes.
+ */
+export default function ProgressBarMarkTooltip({
+  content,
+  children
+}) {
+  return /*#__PURE__*/_jsx(Tooltip, {
+    content: content,
+    placement: "above",
+    focusTrigger: "always",
+    children: children
+  });
+}

package/dist/ProgressBar/index.d.ts

@@ -1,6 +1,26 @@
 /**
  * @file ProgressBar component barrel export
  */
+/**
+ * Extensible variant map for ProgressBar.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/ProgressBar' {
+ *   interface ProgressBarVariantMap {
+ *     'brand': true;
+ *   }
+ * }
+ * ```
+ */
+export interface ProgressBarVariantMap {
+    accent: true;
+    success: true;
+    warning: true;
+    neutral: true;
+    error: true;
+}
 export { ProgressBar } from './ProgressBar';
-export type { ProgressBarProps, ProgressBarVariant, ProgressBarVariantMap, } from './ProgressBar';
+export type { ProgressBarProps, ProgressBarMark, ProgressBarVariant, } from './ProgressBar';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/index.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/index.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;CACb;AAED,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,kBAAkB,GACnB,MAAM,eAAe,CAAC"}

package/dist/ProgressBar/index.js

@@ -5,4 +5,18 @@
 /**
  * @file ProgressBar component barrel export
  */
+
+/**
+ * Extensible variant map for ProgressBar.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/ProgressBar' {
+ *   interface ProgressBarVariantMap {
+ *     'brand': true;
+ *   }
+ * }
+ * ```
+ */
 export { ProgressBar } from "./ProgressBar.js";

package/dist/RadioList/RadioList.d.ts

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

package/dist/RadioList/RadioList.js

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

package/dist/RadioList/RadioListItem.d.ts

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

package/dist/RadioList/RadioListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAa,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsJ5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAsHpB;yBAlIe,aAAa"}
+{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAa,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6J5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAsHpB;yBAlIe,aAAa"}

package/dist/RadioList/RadioListItem.js

@@ -15,7 +15,7 @@
  * - /packages/core/src/RadioList/RadioList.test.tsx
  * - /packages/core/src/RadioList/index.ts
  * - /apps/storybook/stories/RadioList.stories.tsx
- * - /packages/cli/templates/blocks/components/RadioList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/RadioList/ (showcase blocks)
  */
 import React, { use, useId } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -97,7 +97,7 @@ const styles = {
   },
   innerDot: {
     kaIpWk: "x16rqkct",
-    kWkggS: "x1azo05",
+    kWkggS: "x1azo05 xwvh9j7",
     $$css: true
   }
 };

package/dist/Resizable/ResizeHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAOnD,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAqNzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAK,EAAE,cAAc,EACrB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAgRnB;yBA/Re,YAAY"}
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAOnD,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAgNzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAK,EAAE,cAAc,EACrB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BA6RnB;yBA5Se,YAAY"}