@astryxdesign/lab 0.7.8-canary.ffd29c5 → 0.7.9-canary.0200dfe

package/blocks/CommentThreadShowcase.tsx

@@ -36,7 +36,7 @@ export default function CommentThreadShowcase() {
   });
 
   return (
-    <Card padding={0} width={340}>
+    <Card padding={0} width="100%" maxWidth={340}>
       <CommentThread
         comment={thread}
         currentUser={VIEWER}

package/dist/Chart/Chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAC,WAAW,EAAa,MAAM,SAAS,CAAC;AAErD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,UAAU;IACzB,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAY,EACZ,MAAM,EAAE,cAAc,EACtB,SAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,WAAmB,EACnB,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,+BA+OZ"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAC,WAAW,EAAa,MAAM,SAAS,CAAC;AAErD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,UAAU;IACzB,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAY,EACZ,MAAM,EAAE,cAAc,EACtB,SAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,WAAmB,EACnB,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,+BAgPZ"}

package/dist/Chart/Chart.js

@@ -73,18 +73,19 @@ export function Chart({
   const containerRef = useRef(null);
   const svgRef = useRef(null);
   const [containerWidth, setContainerWidth] = useState(0);
-  useLayoutEffect(() => {
-    if (!containerRef.current) {
-      return;
-    }
+  const attachContainer = useCallback(container => {
+    containerRef.current = container;
     const observer = new ResizeObserver(entries => {
       const entry = entries[0];
       if (entry) {
         setContainerWidth(entry.contentRect.width);
       }
     });
-    observer.observe(containerRef.current);
-    return () => observer.disconnect();
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      containerRef.current = null;
+    };
   }, []);
 
   // Block scroll/zoom on the container when interactive.
@@ -236,7 +237,7 @@ export function Chart({
   const accessibleLabel = label ?? `Chart of ${yKeys.join(', ')} by ${xKey}`;
   const showDataTable = data.length > 0 && data.length * Math.max(yKeys.length, 1) <= MAX_TABLE_POINTS;
   return /*#__PURE__*/_jsxs("div", {
-    ref: containerRef,
+    ref: attachContainer,
     style: containerStyle,
     children: [containerWidth > 0 && /*#__PURE__*/_jsxs("svg", {
       ref: svgRef,

package/dist/Chart/formatters.d.ts

@@ -1,10 +1,11 @@
 /**
  * @file formatters.ts
- * @input Tick values and optional BCP 47 locale tags
+ * @input Tick values, optional BCP 47 locale tags, and for dates an optional
+ *   calendar
  * @output Built-in tick format utilities for common data types
  * @position Utility; consumed by ChartAxis via tickFormat prop
  */
-import type { Locale } from '@astryxdesign/core/i18n';
+import type { CalendarSystem, Locale } from '@astryxdesign/core/i18n';
 /**
  * Compact number formatter (e.g. 1200 → "1.2K", 1500000 → "1.5M")
  */
@@ -25,11 +26,13 @@ export declare function currency(symbol?: string, locale?: Locale): (value: unkn
  */
 export declare function percent(value: unknown): string;
 /**
- * Date formatter — short date (e.g. "Jan 5", "Mar 12")
+ * Date formatter — short date (e.g. "Jan 5", "Mar 12"), in `calendar`
+ * (Gregorian by default)
  */
-export declare function shortDate(value: unknown, locale?: Locale): string;
+export declare function shortDate(value: unknown, locale?: Locale, calendar?: CalendarSystem): string;
 /**
- * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025")
+ * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025"), in `calendar`
+ * (Gregorian by default)
  */
-export declare function monthYear(value: unknown, locale?: Locale): string;
+export declare function monthYear(value: unknown, locale?: Locale, calendar?: CalendarSystem): string;
 //# sourceMappingURL=formatters.d.ts.map

package/dist/Chart/formatters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formatters.d.ts","sourceRoot":"","sources":["../../src/Chart/formatters.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAEpD;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAepD;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CACtB,MAAM,SAAM,EACZ,MAAM,GAAE,MAAa,GACpB,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAiB5B;AAQD;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAM9C;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,GAAE,MAAa,GAAG,MAAM,CAUvE;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,GAAE,MAAa,GAAG,MAAM,CAUvE"}
+{"version":3,"file":"formatters.d.ts","sourceRoot":"","sources":["../../src/Chart/formatters.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,cAAc,EAAE,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAGpE;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAepD;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CACtB,MAAM,SAAM,EACZ,MAAM,GAAE,MAAa,GACpB,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAiB5B;AAQD;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAM9C;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,MAAM,GAAE,MAAa,EACrB,QAAQ,GAAE,cAA0B,GACnC,MAAM,CAUR;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,MAAM,GAAE,MAAa,EACrB,QAAQ,GAAE,cAA0B,GACnC,MAAM,CAUR"}

package/dist/Chart/formatters.js

@@ -2,11 +2,14 @@
 
 /**
  * @file formatters.ts
- * @input Tick values and optional BCP 47 locale tags
+ * @input Tick values, optional BCP 47 locale tags, and for dates an optional
+ *   calendar
  * @output Built-in tick format utilities for common data types
  * @position Utility; consumed by ChartAxis via tickFormat prop
  */
 
+import { plainDateFormat, plainDateFromDate } from '@astryxdesign/core/utils';
+
 /**
  * Compact number formatter (e.g. 1200 → "1.2K", 1500000 → "1.5M")
  */
@@ -74,31 +77,33 @@ export function percent(value) {
 }
 
 /**
- * Date formatter — short date (e.g. "Jan 5", "Mar 12")
+ * Date formatter — short date (e.g. "Jan 5", "Mar 12"), in `calendar`
+ * (Gregorian by default)
  */
-export function shortDate(value, locale = 'en') {
+export function shortDate(value, locale = 'en', calendar = 'gregory') {
   const d = value instanceof Date ? value : new Date(Number(value));
   if (isNaN(d.getTime())) {
     return String(value);
   }
-  return new Intl.DateTimeFormat(locale, {
+  return plainDateFormat(plainDateFromDate(d), {
     month: 'short',
     day: 'numeric',
-    calendar: 'gregory'
-  }).format(d);
+    calendar
+  }, locale);
 }
 
 /**
- * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025")
+ * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025"), in `calendar`
+ * (Gregorian by default)
  */
-export function monthYear(value, locale = 'en') {
+export function monthYear(value, locale = 'en', calendar = 'gregory') {
   const d = value instanceof Date ? value : new Date(Number(value));
   if (isNaN(d.getTime())) {
     return String(value);
   }
-  return new Intl.DateTimeFormat(locale, {
+  return plainDateFormat(plainDateFromDate(d), {
     month: 'short',
     year: 'numeric',
-    calendar: 'gregory'
-  }).format(d);
+    calendar
+  }, locale);
 }

package/dist/CircleCheckIndicator/CircleCheckIndicator.d.ts

@@ -0,0 +1,27 @@
+import type { IndicatorProps } from '@astryxdesign/core/Indicator';
+/**
+ * The iOS multiple-selection mark. It shows an empty circle when unchecked
+ * and a filled circle with a checkmark when checked. The partial state fills
+ * the circle with a bar.
+ *
+ * Decorative and non-interactive, like every indicator: it renders
+ * `aria-hidden` and owns no input, role, or focus behavior. Map it to
+ * `checkbox` in a theme, and every CheckboxInput and CheckboxList draws it.
+ * The owning control keeps its semantics and paints its focus ring on the
+ * circle. Its colours fade over the theme duration on every pointer, and
+ * change at once under Reduce Motion. It draws the circle everywhere, so
+ * map it only in a theme meant for iOS.
+ *
+ * @example
+ * ```
+ * const theme = defineTheme({
+ *   name: 'circle-checks',
+ *   indicators: {checkbox: CircleCheckIndicator},
+ * });
+ * ```
+ */
+export declare function CircleCheckIndicator({ state, size, isDisabled, children, ref, className, style, xstyle, ...rest }: IndicatorProps<'multiSelection'>): import("react").JSX.Element;
+export declare namespace CircleCheckIndicator {
+    var displayName: string;
+}
+//# sourceMappingURL=CircleCheckIndicator.d.ts.map

package/dist/CircleCheckIndicator/CircleCheckIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircleCheckIndicator.d.ts","sourceRoot":"","sources":["../../src/CircleCheckIndicator/CircleCheckIndicator.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,8BAA8B,CAAC;AA4HjE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,IAAW,EACX,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,gBAAgB,CAAC,+BA2ElC;yBArFe,oBAAoB"}

package/dist/CircleCheckIndicator/CircleCheckIndicator.js

@@ -0,0 +1,168 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CircleCheckIndicator.tsx
+ * @input Indicator state props, the theme's colour and radius tokens, Core's
+ *   indicator press marker, and the circle's styles (circleCheck.stylex.ts)
+ * @output Exports CircleCheckIndicator, the iOS multiple-selection mark
+ * @position Lab. A multiSelection-family indicator that a theme maps to
+ *   `checkbox`
+ *
+ * SYNC: When modified, update CircleCheckIndicator.doc.mjs,
+ *   CircleCheckIndicator.test.tsx, index.ts and the story.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import '@astryxdesign/core/Indicator/indicator.markers.stylex';
+import { indicatorScope } from '@astryxdesign/core/Indicator/indicator.markers.stylex';
+import { indicatorPressScope } from '@astryxdesign/core/internal/indicatorPress.stylex';
+import '@astryxdesign/core/theme/tokens.stylex';
+import { colorVars, radiusVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { isRenderable, mergeProps, themeProps } from '@astryxdesign/core/utils';
+import { circleCheckMotionStyles, circleCheckSizeStyles } from "./circleCheck.stylex.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  circle: {
+    kB7OPa: "x9f619",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmuXW: "x2lah0s",
+    kaIpWk: "xjspbzw",
+    ksu8eU: "xng3xce xx61lck",
+    kMzoRj: "xc342km x13rsnn2",
+    kVAM5u: "x9r1u3d x1w1tqly",
+    $$css: true
+  },
+  unchecked: {
+    kGVxlE: "x6a3is4 xnv7v5x",
+    kWkggS: "xjbqb8w",
+    $$css: true
+  },
+  checked: {
+    kMwMTN: "x17wrial",
+    kGVxlE: "x1gnnqk1",
+    kWkggS: "x1ewilqj x17srpfb",
+    $$css: true
+  },
+  disabled: {
+    kSiTet: "xbyyjgo",
+    $$css: true
+  },
+  ownPress: {
+    kVAEAm: "x1n2onr6",
+    k5JduY: "x1s928wv",
+    kwXMNM: "x1j6awrg",
+    kv0HGH: "xarstr8",
+    kUfP38: "xq94oqs",
+    kloYau: "x2q1x1w",
+    ks3ayO: "xyhc2n1 xzywxsk x1gybruy",
+    kNctxI: "x1ygld8r",
+    $$css: true
+  },
+  checkmark: {
+    k1xSpc: "x1s85apg",
+    kmuXW: "x2lah0s",
+    kVQacm: "x1rea2x4",
+    kMwMTN: "x17wrial xs5hli",
+    $$css: true
+  },
+  checkmarkVisible: {
+    k1xSpc: "x1lliihq",
+    $$css: true
+  },
+  bar: {
+    k1xSpc: "x1s85apg",
+    kmuXW: "x2lah0s",
+    kWkggS: "x1azo05 xwvh9j7",
+    kaIpWk: "xjspbzw",
+    $$css: true
+  },
+  barVisible: {
+    k1xSpc: "x1lliihq",
+    $$css: true
+  }
+};
+const CIRCLE = {
+  sm: circleCheckSizeStyles.smCircle,
+  md: circleCheckSizeStyles.mdCircle
+};
+const CHECK = {
+  sm: circleCheckSizeStyles.smCheck,
+  md: circleCheckSizeStyles.mdCheck
+};
+const BAR = {
+  sm: circleCheckSizeStyles.smBar,
+  md: circleCheckSizeStyles.mdBar
+};
+
+/**
+ * The iOS multiple-selection mark. It shows an empty circle when unchecked
+ * and a filled circle with a checkmark when checked. The partial state fills
+ * the circle with a bar.
+ *
+ * Decorative and non-interactive, like every indicator: it renders
+ * `aria-hidden` and owns no input, role, or focus behavior. Map it to
+ * `checkbox` in a theme, and every CheckboxInput and CheckboxList draws it.
+ * The owning control keeps its semantics and paints its focus ring on the
+ * circle. Its colours fade over the theme duration on every pointer, and
+ * change at once under Reduce Motion. It draws the circle everywhere, so
+ * map it only in a theme meant for iOS.
+ *
+ * @example
+ * ```
+ * const theme = defineTheme({
+ *   name: 'circle-checks',
+ *   indicators: {checkbox: CircleCheckIndicator},
+ * });
+ * ```
+ */
+export function CircleCheckIndicator({
+  state,
+  size = 'md',
+  isDisabled = false,
+  children,
+  ref,
+  className,
+  style,
+  xstyle,
+  ...rest
+}) {
+  const isChecked = state === 'checked';
+  const isIndeterminate = state === 'indeterminate';
+  const isFilled = isChecked || isIndeterminate;
+  return /*#__PURE__*/_jsx("span", {
+    ...rest,
+    ref: ref,
+    "aria-hidden": "true",
+    ...mergeProps(themeProps('circle-check-indicator', {
+      size,
+      checked: isChecked ? 'checked' : isIndeterminate ? 'indeterminate' : null,
+      disabled: isDisabled ? 'disabled' : null
+    }), stylex.props(
+    // Marks the circle as painting its own press (styles.ownPress), so
+    // the host leaves its square layer off.
+    indicatorPressScope, styles.circle, !isDisabled && styles.ownPress, circleCheckMotionStyles.mark, CIRCLE[size], isFilled ? styles.checked : styles.unchecked, isDisabled && styles.disabled, xstyle), className, style),
+    children: isRenderable(children) ? children : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("svg", {
+        viewBox: "0 0 10 10",
+        ...mergeProps(themeProps('circle-check-indicator-check', {
+          size
+        }), stylex.props(styles.checkmark, CHECK[size], isChecked && styles.checkmarkVisible)),
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M0.75 5.25L3.75 9.25L9.25 0.75",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          fill: "none",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        })
+      }), /*#__PURE__*/_jsx("span", {
+        ...mergeProps(themeProps('circle-check-indicator-dash', {
+          size
+        }), stylex.props(styles.bar, BAR[size], isIndeterminate && styles.barVisible))
+      })]
+    })
+  });
+}
+CircleCheckIndicator.displayName = 'CircleCheckIndicator';

package/dist/CircleCheckIndicator/circleCheck.stylex.d.ts

@@ -0,0 +1,80 @@
+/**
+ * @file circleCheck.stylex.ts
+ * @input The theme's duration and easing tokens
+ * @output Exports `circleCheckConsts`, the build-time mirror of
+ *   circleCheck.table.ts, and the circle's motion and size styles
+ * @position Internal to CircleCheckIndicator
+ *
+ * StyleX cannot read the table at build time, so these constants mirror it,
+ * and circleCheck.test.tsx fails if they drift. StyleX inlines a
+ * `defineConsts` value only in its own file, so the styles live here too.
+ *
+ * SYNC: When modified, update circleCheck.test.tsx.
+ */
+import * as stylex from '@stylexjs/stylex';
+/**
+ * `md` is UIKit's circle at the Large text size, and `sm` at xSmall. Two `sm`
+ * values derive from their Large proportions: the check stroke and its offset.
+ * The partial state's bar has no UIKit counterpart, so it takes the
+ * checkmark's width and stroke.
+ */
+export declare const circleCheckConsts: {
+    /** `circleCheckTable.large.diameter`. */
+    mdDiameter: string;
+    /** `circleCheckTable.large.stroke`. */
+    mdStroke: string;
+    /** `circleCheckTable.large.checkSize`. */
+    mdCheckSize: string;
+    /** `circleCheckTable.large.checkStroke`. */
+    mdCheckStroke: string;
+    /** `circleCheckTable.large.checkOffsetY`. */
+    mdCheckOffsetY: string;
+    /** `circleCheckTable.xSmall.diameter`. */
+    smDiameter: string;
+    /** `circleCheckTable.xSmall.stroke`. */
+    smStroke: string;
+    /** `circleCheckTable.xSmall.checkSize`. */
+    smCheckSize: string;
+    /** Derived: the Large check stroke, scaled by the check size (9 → 8). */
+    smCheckStroke: string;
+    /** Derived: the Large offset, scaled by the diameter (21.8 → 18). */
+    smCheckOffsetY: string;
+};
+export declare const circleCheckMotionStyles: Readonly<{
+    readonly mark: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, box-shadow">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+    }>;
+}>;
+export declare const circleCheckSizeStyles: Readonly<{
+    readonly mdCircle: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", string>;
+        readonly '--_circle-stroke': stylex.StyleXClassNameFor<"--_circle-stroke", string>;
+    }>;
+    readonly smCircle: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", string>;
+        readonly '--_circle-stroke': stylex.StyleXClassNameFor<"--_circle-stroke", string>;
+    }>;
+    readonly mdCheck: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", string>;
+        readonly translate: stylex.StyleXClassNameFor<"translate", `0 ${string}`>;
+    }>;
+    readonly smCheck: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", string>;
+        readonly translate: stylex.StyleXClassNameFor<"translate", `0 ${string}`>;
+    }>;
+    readonly mdBar: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", string>;
+    }>;
+    readonly smBar: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", string>;
+    }>;
+}>;
+//# sourceMappingURL=circleCheck.stylex.d.ts.map

package/dist/CircleCheckIndicator/circleCheck.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"circleCheck.stylex.d.ts","sourceRoot":"","sources":["../../src/CircleCheckIndicator/circleCheck.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB;IAC5B,yCAAyC;;IAEzC,uCAAuC;;IAEvC,0CAA0C;;IAE1C,4CAA4C;;IAE5C,6CAA6C;;IAE7C,0CAA0C;;IAE1C,wCAAwC;;IAExC,2CAA2C;;IAE3C,yEAAyE;;IAEzE,qEAAqE;;CAErE,CAAC;AAEH,eAAO,MAAM,uBAAuB;;;;;;EAUlC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgChC,CAAC"}

package/dist/CircleCheckIndicator/circleCheck.stylex.js

@@ -0,0 +1,82 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file circleCheck.stylex.ts
+ * @input The theme's duration and easing tokens
+ * @output Exports `circleCheckConsts`, the build-time mirror of
+ *   circleCheck.table.ts, and the circle's motion and size styles
+ * @position Internal to CircleCheckIndicator
+ *
+ * StyleX cannot read the table at build time, so these constants mirror it,
+ * and circleCheck.test.tsx fails if they drift. StyleX inlines a
+ * `defineConsts` value only in its own file, so the styles live here too.
+ *
+ * SYNC: When modified, update circleCheck.test.tsx.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import '@astryxdesign/core/theme/tokens.stylex';
+import { durationVars, easeVars } from '@astryxdesign/core/theme/tokens.stylex';
+
+/**
+ * `md` is UIKit's circle at the Large text size, and `sm` at xSmall. Two `sm`
+ * values derive from their Large proportions: the check stroke and its offset.
+ * The partial state's bar has no UIKit counterpart, so it takes the
+ * checkmark's width and stroke.
+ */
+export const circleCheckConsts = {
+  mdDiameter: "21.8px",
+  mdStroke: "1.54px",
+  mdCheckSize: "9px",
+  mdCheckStroke: "1.35px",
+  mdCheckOffsetY: "1px",
+  smDiameter: "18px",
+  smStroke: "1.27px",
+  smCheckSize: "8px",
+  smCheckStroke: "1.2px",
+  smCheckOffsetY: "0.83px"
+};
+export const circleCheckMotionStyles = {
+  mark: {
+    k1ekBW: "x106061f",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    $$css: true
+  }
+};
+export const circleCheckSizeStyles = {
+  mdCircle: {
+    kzqmXN: "x9ohm1z",
+    kZKoxP: "xxqnphv",
+    "--_circle-stroke": "x132qrjd",
+    $$css: true
+  },
+  smCircle: {
+    kzqmXN: "x1xp8n7a",
+    kZKoxP: "xmix8c7",
+    "--_circle-stroke": "xrx6na1",
+    $$css: true
+  },
+  mdCheck: {
+    kzqmXN: "x1wc42o8",
+    kZKoxP: "xegnrdp",
+    kIY38u: "x1qnfge9",
+    $$css: true
+  },
+  smCheck: {
+    kzqmXN: "x1xc55vz",
+    kZKoxP: "xdk7pt",
+    kIY38u: "x195poti",
+    $$css: true
+  },
+  mdBar: {
+    kzqmXN: "x1wc42o8",
+    kZKoxP: "x1rly2rj",
+    $$css: true
+  },
+  smBar: {
+    kzqmXN: "x1xc55vz",
+    kZKoxP: "x188kx65",
+    $$css: true
+  }
+};

package/dist/CircleCheckIndicator/circleCheck.table.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @file circleCheck.table.ts
+ * @input UIKit measurements on the iOS 26.2 simulator
+ * @output Exports `circleCheckTable`: the circle's geometry at two text sizes
+ *   (pt)
+ * @position Internal to CircleCheckIndicator; circleCheck.stylex.ts mirrors it
+ *
+ * The circle is a Lab component, so its measurements live beside it. Core's
+ * UIKit table holds only what Core's own components play.
+ */
+/**
+ * UIKit's multiple-selection circle, in a table row's edit mode
+ * (UITableViewCellEditControl) and a list's `.multiselect()` accessory. It is
+ * the SF Symbols `circle` and `checkmark.circle.fill` in a 25.67 pt control at
+ * the Large text size. It grows and thickens with the text size. Lengths are
+ * in pt.
+ */
+export declare const circleCheckTable: {
+    /** At the Large text size, the default. */
+    readonly large: {
+        /**
+         * The circle's outer diameter.
+         * @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
+         *   iPhone 17 Pro, view frames and 3× pixels read (table edit mode and
+         *   list multiselect, light and dark), Oct 24 2026
+         */
+        readonly diameter: 21.8;
+        /**
+         * The empty circle's stroke; its interior is clear.
+         * @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
+         *   iPhone 17 Pro, 3× pixels read, Oct 24 2026
+         */
+        readonly stroke: 1.54;
+        /**
+         * The white checkmark's ink box in the filled circle, square.
+         * @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
+         *   iPhone 17 Pro, 3× pixels read, Oct 24 2026
+         */
+        readonly checkSize: 9;
+        /**
+         * The checkmark's stroke.
+         * @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
+         *   iPhone 17 Pro, 3× pixels read, Oct 24 2026
+         */
+        readonly checkStroke: 1.35;
+        /**
+         * How far below the circle's centre the checkmark's ink sits.
+         * @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
+         *   iPhone 17 Pro, 3× pixels read, Oct 24 2026
+         */
+        readonly checkOffsetY: 1;
+    };
+    /** At the xSmall text size, the smallest. */
+    readonly xSmall: {
+        /**
+         * The circle's outer diameter.
+         * @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
+         *   iPhone 17 Pro, view frames and 3× pixels read at the xSmall text
+         *   size, Oct 24 2026
+         */
+        readonly diameter: 18;
+        /**
+         * The empty circle's stroke.
+         * @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
+         *   iPhone 17 Pro, 3× pixels read at the xSmall text size, Oct 24 2026
+         */
+        readonly stroke: 1.27;
+        /**
+         * The checkmark's ink box, square.
+         * @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
+         *   iPhone 17 Pro, 3× pixels read at the xSmall text size, Oct 24 2026
+         */
+        readonly checkSize: 8;
+    };
+};
+//# sourceMappingURL=circleCheck.table.d.ts.map

package/dist/CircleCheckIndicator/circleCheck.table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"circleCheck.table.d.ts","sourceRoot":"","sources":["../../src/CircleCheckIndicator/circleCheck.table.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;IAC3B,2CAA2C;;QAEzC;;;;;WAKG;;QAEH;;;;WAIG;;QAEH;;;;WAIG;;QAEH;;;;WAIG;;QAEH;;;;WAIG;;;IAGL,6CAA6C;;QAE3C;;;;;WAKG;;QAEH;;;;WAIG;;QAEH;;;;WAIG;;;CAGG,CAAC"}