@astryxdesign/core 0.4.6 → 0.4.7-canary.019ae5a

package/dist/Spinner/Spinner.js

@@ -4,7 +4,7 @@
 
 /**
  * @file Spinner.tsx
- * @input Uses React, StyleX, canvas rendering
+ * @input Uses React, StyleX, SVG rendering
  * @output Exports Spinner component, SpinnerProps, SpinnerSize, SpinnerShade types
  * @position Core implementation of spinner loading indicator
  *
@@ -15,11 +15,10 @@
  * - /apps/storybook/stories/Spinner.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Spinner/ (showcase blocks)
  */
-import { useEffect, useId, useRef } from 'react';
+import { useId } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { durationVars, spacingVars } from "../theme/tokens.stylex.js";
-import { useTheme } from "../theme/useTheme.js";
+import { colorVars, durationVars, spacingVars } from "../theme/tokens.stylex.js";
 import { Text } from "../Text/Text.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
@@ -28,11 +27,12 @@ import { themeProps } from "../utils/themeProps.js";
 // Constants
 // =============================================================================
 
-/** How much of the circle the active arc covers (as a fraction of 2π) */
+/**
+ * Fraction of the ring the moving arc covers. The canvas ring this replaces
+ * swept 135deg, not the 270deg its constant's comment claimed.
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SPREAD = 0.75;
-/** Where the active arc starts (as a fraction of 2π) */
-const START_POINT = 1.5;
+const ARC_FRACTION = 0.375;
 const SIZES = {
   sm: {
     diameter: 10,
@@ -52,6 +52,57 @@ const SIZES = {
   }
 };
 
+/** `onMedia` keeps the 77/255 its token's `4D` hex suffix used to encode. */
+const TRACK_OPACITY = {
+  default: 1,
+  subtle: 1,
+  onMedia: 77 / 255,
+  inherit: 0.3
+};
+
+/**
+ * Pin every ring's rotation to the document timeline's origin instead of its
+ * own start time, so spinners mounted seconds apart turn in phase.
+ *
+ * Setting `startTime` is exact where arithmetic on a clock read is not: a
+ * negative `animation-delay` computed at mount is only as good as the gap
+ * between reading the clock and the frame the animation starts in, which at
+ * 10x CPU throttling measured 116deg of drift.
+ *
+ * Rings are collected and pinned in one frame because `getAnimations()`
+ * resolves style and `startTime` dirties it again, so pinning them one at a
+ * time makes each mount re-force what the previous one invalidated — 53 style
+ * recalcs for 38 spinners against 19 batched.
+ */
+const pendingRings = new Set();
+let flushScheduled = false;
+function pinRingsToTimelineOrigin() {
+  flushScheduled = false;
+  const animations = [];
+  for (const svg of pendingRings) {
+    animations.push(...svg.getAnimations());
+  }
+  pendingRings.clear();
+  for (const animation of animations) {
+    animation.startTime = 0;
+  }
+}
+function syncRotationPhase(svg) {
+  // jsdom implements no Web Animations, and this runs in every consumer's
+  // component tests.
+  if (svg == null || typeof svg.getAnimations !== 'function') {
+    return undefined;
+  }
+  pendingRings.add(svg);
+  if (!flushScheduled) {
+    flushScheduled = true;
+    requestAnimationFrame(pinRingsToTimelineOrigin);
+  }
+  return () => {
+    pendingRings.delete(svg);
+  };
+}
+
 // =============================================================================
 // Animation
 // =============================================================================
@@ -76,6 +127,51 @@ const styles = {
     kVQacm: "xb3r6kr",
     kXLuUW: "xxymvpz",
     $$css: true
+  },
+  circle: {
+    kDwRjp: "xbh8q5q",
+    kU5bRw: "x1owpc8m",
+    $$css: true
+  }
+};
+const arcStyles = {
+  default: {
+    kjVXCG: "xjsr54c",
+    $$css: true
+  },
+  subtle: {
+    kjVXCG: "xxvau67",
+    $$css: true
+  },
+  onMedia: {
+    kjVXCG: "x16lqycg",
+    $$css: true
+  },
+  inherit: {
+    kjVXCG: "x73je2i",
+    $$css: true
+  }
+};
+const trackStyles = {
+  default: {
+    kjVXCG: "xpi25hw",
+    kDd8S0: "x1g350g8",
+    $$css: true
+  },
+  subtle: {
+    kjVXCG: "xpi25hw",
+    kDd8S0: "x1g350g8",
+    $$css: true
+  },
+  onMedia: {
+    kjVXCG: "x16lqycg",
+    kDd8S0: "x1smxkh6",
+    $$css: true
+  },
+  inherit: {
+    kjVXCG: "x73je2i",
+    kDd8S0: "x7bo2k",
+    $$css: true
   }
 };
 
@@ -88,7 +184,7 @@ const styles = {
 // =============================================================================
 
 /**
- * An animated loading indicator. Available in three sizes and two color shades.
+ * An animated loading indicator. Available in four sizes and four color shades.
  *
  * @example
  * ```
@@ -111,77 +207,14 @@ export function Spinner({
   ref,
   ...restProps
 }) {
-  const canvasRef = useRef(null);
-  const {
-    tokens: themeTokens
-  } = useTheme();
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (canvas == null) {
-      return;
-    }
-    const context = canvas.getContext('2d');
-    if (!context) {
-      return;
-    }
-    const {
-      border,
-      diameter
-    } = SIZES[size];
-    const pixelRatio = window.devicePixelRatio || 1;
-
-    // Resolve colors from theme tokens (useTheme handles light/dark resolution).
-    // - default → accent ring on a track tuned to body luminance
-    // - subtle  → secondary text color, less prominent
-    // - onMedia → on-dark color, with a translucent track for photos/video
-    // - inherit → the inherited currentColor, so the ring matches the parent's
-    //   resolved foreground (e.g. a button's variant text color)
-    const inheritedColor = shade === 'inherit' ? getComputedStyle(canvas).color : null;
-    const activeColor = shade === 'inherit' ? inheritedColor : shade === 'onMedia' ? themeTokens['--color-on-dark'] : shade === 'subtle' ? themeTokens['--color-text-secondary'] : themeTokens['--color-accent'];
-    // Track derives from --color-on-dark for onMedia (with a 30% alpha so the
-    // ring reads against arbitrary backgrounds) and from --color-track for the
-    // body-luminance shades. For inherit, the track is the same currentColor
-    // drawn at reduced alpha via globalAlpha (see below). All branches are
-    // fully theme-driven.
-    const backgroundColor = shade === 'inherit' ? inheritedColor : shade === 'onMedia' ? `${themeTokens['--color-on-dark']}4D` : themeTokens['--color-track'];
-    const cssSize = diameter + border * 2;
-
-    // Round to an even number of device pixels so the center stays on a whole
-    // pixel (avoids rotation jitter); keep CSS size pinned to cssSize (#2732).
-    const rawFrameSize = Math.round(cssSize * pixelRatio);
-    const frameSize = rawFrameSize + rawFrameSize % 2;
-    const scale = frameSize / cssSize;
-    const radius = diameter / 2 * scale;
-    const lineWidth = border * scale;
-    canvas.height = canvas.width = frameSize;
-    canvas.style.width = canvas.style.height = cssSize + 'px';
-    context.lineCap = 'round';
-    context.lineWidth = lineWidth;
-    const center = frameSize / 2;
-
-    // Background circle (full ring, faded). For the inherit shade the track is
-    // the same currentColor as the arc, so fade it via globalAlpha (the
-    // computed color is an opaque rgb() string with no alpha channel to tweak).
-    context.beginPath();
-    context.arc(center, center, radius, 0, 2 * Math.PI);
-    context.strokeStyle = backgroundColor;
-    if (shade === 'inherit') {
-      context.globalAlpha = 0.3;
-    }
-    context.stroke();
-    context.globalAlpha = 1;
-
-    // Active arc (partial ring, colored)
-    context.beginPath();
-    context.arc(center, center, radius, START_POINT * Math.PI, (START_POINT + SPREAD) % 2 * Math.PI);
-    context.strokeStyle = activeColor;
-    context.stroke();
-  }, [shade, size, themeTokens]);
   const {
     border,
     diameter
   } = SIZES[size];
   const frameSize = diameter + border * 2;
+  const center = frameSize / 2;
+  const circumference = Math.PI * diameter;
+  const arcLength = circumference * ARC_FRACTION;
   const hasLabel = label != null;
   const labelId = useId();
 
@@ -208,11 +241,30 @@ export function Spinner({
       width: frameSize,
       height: frameSize
     }),
-    children: /*#__PURE__*/_jsx("canvas", {
-      ref: canvasRef,
+    children: /*#__PURE__*/_jsxs("svg", {
+      ref: syncRotationPhase,
+      width: frameSize,
+      height: frameSize,
+      viewBox: `0 0 ${frameSize} ${frameSize}`,
+      "aria-hidden": "true",
       ...{
         className: "xlp1x4z x1lliihq x1so62im x14qxm4i xnh0sag xa4qsjk x1ka1v4i x1esw782"
-      }
+      },
+      children: [/*#__PURE__*/_jsx("circle", {
+        cx: center,
+        cy: center,
+        r: diameter / 2,
+        strokeWidth: border,
+        ...stylex.props(styles.circle, trackStyles[shade])
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: center,
+        cy: center,
+        r: diameter / 2,
+        strokeWidth: border,
+        strokeDasharray: `${arcLength} ${circumference - arcLength}`,
+        transform: `rotate(-90 ${center} ${center})`,
+        ...stylex.props(styles.circle, arcStyles[shade])
+      })]
     })
   });
   if (!hasLabel) {

package/dist/Stepper/Step.d.ts

@@ -0,0 +1,140 @@
+/**
+ * @file Step.tsx
+ * @input Uses React, stylex, theme tokens (including the motion duration token
+ *   the connector fill animates on), StepperContext
+ * @output Exports Step component and StepProps
+ * @position Individual step item; used inside Stepper
+ *
+ * Every connector this file draws — the separated progress bars and the
+ * on-track segments alike — paints its accent fill as a scaled ::before rather
+ * than by swapping a background color, so a step the flow advances into grows
+ * its line along the track. See the CONNECTOR FILL block in the styles below
+ * for the axis/RTL/reduced-motion rules that go with it.
+ *
+ * Exactly one change animates: advancing a single step. Going back, jumping
+ * forward by more than one, and mounting mid-flow all land at once. The rule
+ * and the reasoning behind it sit above the styles; the arithmetic that keeps
+ * the one animated span reading as a single front — an on-track span is drawn
+ * by two steps, three where a content slot splits it — is in the component.
+ * Nothing about it is public API: Stepper hands each Step the step it came
+ * from through context, and the rest is derived.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Stepper/Stepper.doc.mjs
+ * - /packages/core/src/Stepper/Stepper.test.tsx
+ * - /packages/core/src/Stepper/index.ts
+ * - /apps/storybook/stories/Stepper.stories.tsx
+ * - /packages/cli/assets/templates/blocks/components/Stepper/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Step/ (showcase blocks)
+ */
+import { type ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+import type { StepStatus } from './StepStatus';
+/**
+ * Built-in indicator presets. Anything other than these strings passed to
+ * `indicator` is treated as a custom ReactNode (e.g. an `<Icon />`).
+ * - 'auto': numbered badge for not-yet-reached steps, a check once completed
+ *   (default)
+ * - 'number': always a numbered badge
+ * - 'none': no indicator — just the progress bar and label
+ */
+export type StepIndicatorPreset = 'auto' | 'number' | 'none';
+export type StepDensity = 'compact' | 'balanced' | 'spacious';
+export interface StepProps extends BaseProps<HTMLLIElement> {
+    /** Ref forwarded to the root element */
+    ref?: React.Ref<HTMLLIElement>;
+    /**
+     * Zero-based index of this step. Used to derive progress (completed /
+     * active / not-started) relative to the parent's `activeStep`.
+     */
+    step: number;
+    /**
+     * Step label text.
+     */
+    label: string;
+    /**
+     * Optional description shown below the label.
+     */
+    description?: string;
+    /**
+     * Content rendered below the label and description. Useful in vertical
+     * steppers to show form fields or detailed content for each step.
+     */
+    children?: ReactNode;
+    /**
+     * Semantic status for the step, mapped to the global Astryx semantic tokens
+     * (`accent`, `success`, `warning`, `error`). In the default `auto` indicator
+     * mode it sets both the indicator color and a matching glyph: `success` shows
+     * a green check-circle, `warning`/`error` show the shared Input status icons.
+     * `accent` is color-only. The current (in-progress) step always keeps its
+     * current-step indicator regardless of `status`. Never recolors the
+     * connector/track.
+     *
+     * Because the indicator glyphs are decorative (aria-hidden), the status also
+     * reaches assistive technology as text: visually hidden "completed" /
+     * "warning" / "error" next to the label, and composed into the accessible
+     * name of clickable steps.
+     */
+    status?: StepStatus;
+    /**
+     * Disable interaction for this step.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Marks the step as optional, appending an "Optional" affordance after the
+     * label.
+     * @default false
+     */
+    isOptional?: boolean;
+    /**
+     * Trailing content rendered at the end of the label row (e.g. a timestamp
+     * or status chip).
+     */
+    endContent?: ReactNode;
+    /**
+     * What to show as the step indicator. Accepts a preset string or any
+     * ReactNode:
+     * - 'auto': numbered badge until completed, then a check (default)
+     * - 'number': always a numbered badge
+     * - 'none': no indicator, just the bar + label
+     * - ReactNode: any custom icon or element to render as the indicator
+     * @default 'auto'
+     */
+    indicator?: StepIndicatorPreset | ReactNode;
+    /**
+     * Controls vertical padding of the step. Falls back to the stepper-level
+     * density when unset.
+     * - 'compact': minimal padding (4px block)
+     * - 'balanced': default (8px block)
+     * - 'spacious': generous (12px block, 12px inline)
+     */
+    density?: StepDensity;
+}
+/**
+ * An individual step within an Stepper. Renders a 4px progress-bar segment,
+ * an indicator (numbered badge, check, or any custom icon), a label with
+ * optional description, and an optional content slot.
+ *
+ * Progress (completed / active / not-started) is derived from the parent's
+ * `activeStep` and this step's `step` prop. The optional `status` prop layers a
+ * semantic meaning on top: in the default `auto` indicator mode it recolors the
+ * indicator and swaps in a matching glyph (`success` → green check-circle,
+ * `warning`/`error` → the shared Input status icons). The current step always
+ * keeps its current-step ring. `status` never recolors the connector/track.
+ *
+ * @example
+ * ```
+ * <Step step={0} label="Account details" description="Enter your email" />
+ * ```
+ *
+ * @example
+ * ```
+ * <Step step={1} label="Payment" status="error" />
+ * ```
+ */
+export declare function Step({ step, label, description, children, status, isDisabled, isOptional, endContent, indicator: indicatorProp, density: densityProp, xstyle, className, style, ref, 'data-testid': dataTestId, ...rest }: StepProps): import("react").JSX.Element;
+export declare namespace Step {
+    var displayName: string;
+}
+//# sourceMappingURL=Step.d.ts.map

package/dist/Stepper/Step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAAY,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAmBhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AA4tBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BAitBX;yBAluBe,IAAI"}