@astryxdesign/core 0.3.0 → 0.4.0-canary.41f53a0

package/dist/EmptyState/EmptyState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAgB,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4D5C,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAgB,EAChB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BA8CjB;yBA1De,UAAU"}
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAgB,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4D5C,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAgB,EAChB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BAwDjB;yBApEe,UAAU"}

package/dist/EmptyState/EmptyState.js

@@ -77,11 +77,11 @@ export function EmptyState({
   const HeadingTag = `h${headingLevel}`;
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
+    ...props,
     role: "status",
     ...mergeProps(themeProps('empty-state', {
       variant: isCompact ? 'compact' : null
     }), stylex.props(styles.container, isCompact && styles.containerCompact, xstyle), className, style),
-    ...props,
     children: [icon != null && /*#__PURE__*/_jsx("div", {
       "aria-hidden": "true",
       children: icon
@@ -89,28 +89,32 @@ export function EmptyState({
       ...{
         className: "x78zum5 xdt5ytf x6s0dn4 xxc7z9f"
       },
-      children: [/*#__PURE__*/createElement(HeadingTag, {
+      children: [/*#__PURE__*/createElement(HeadingTag, mergeProps(themeProps('empty-state-title', {
+        variant: isCompact ? 'compact' : null
+      }), {
         0: {
           className: "x1ghz6dp xjb2p0i x18juvz8 x2mo6ok xf74fhv x1tgivj0"
         },
         1: {
           className: "x1ghz6dp xjb2p0i x2mo6ok xf74fhv x1tgivj0 xcr08ib"
         }
-      }[!!isCompact << 0], title), description != null &&
+      }[!!isCompact << 0]), title), description != null &&
       /*#__PURE__*/
       // Rendered as <div> (not <p>): description accepts ReactNode and a
       // <p> cannot legally contain block children, which causes hydration
       // mismatches. The StyleX style sets margin: 0, so appearance is
       // unchanged.
       _jsx("div", {
-        ...{
+        ...mergeProps(themeProps('empty-state-description', {
+          variant: isCompact ? 'compact' : null
+        }), {
           0: {
             className: "x1ghz6dp xjb2p0i xjm74w1 x1sodnla xw6l6zx xv1l7n4"
           },
           1: {
             className: "x1ghz6dp xjb2p0i x1sodnla xw6l6zx xv1l7n4 x141an7d"
           }
-        }[!!isCompact << 0],
+        }[!!isCompact << 0]),
         children: description
       })]
     }), actions != null && /*#__PURE__*/_jsx("div", {

package/dist/Field/InputClearButton.d.ts

@@ -1,8 +1,13 @@
 /**
  * @file InputClearButton.tsx
  * @input Uses React, Button, Icon
- * @output Exports InputClearButton shared clear button for input components
- * @position Shared primitive; used by Typeahead, Tokenizer, TextInput
+ * @output Exports InputClearButton, the shared clear (✕) button rendered by
+ *   every clearable input in the family.
+ * @position Shared primitive. Every input that renders a clear affordance —
+ *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
+ *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
+ *   routes it through here, so the glyph is themed in one place via the
+ *   `astryx-input-clear-icon` target.
  */
 import type { ReactNode } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -10,8 +15,16 @@ export interface InputClearButtonProps {
     label: string;
     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
     xstyle?: stylex.StyleXStyles;
+    /**
+     * Extra class(es) for the clear glyph itself, merged onto the shared
+     * `astryx-input-clear-icon` target. Used by inputs that shipped a
+     * component-specific clear-icon target before the family converged here
+     * (e.g. `astryx-date-input-clear-icon`) to keep emitting it for a
+     * deprecation window; new callers don't need it.
+     */
+    iconClassName?: string;
 }
-export declare function InputClearButton({ label, onClick, xstyle, }: InputClearButtonProps): ReactNode;
+export declare function InputClearButton({ label, onClick, xstyle, iconClassName, }: InputClearButtonProps): ReactNode;
 export declare namespace InputClearButton {
     var displayName: string;
 }

package/dist/Field/InputClearButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAW3C,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;CAC9B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,MAAM,GACP,EAAE,qBAAqB,GAAG,SAAS,CAYnC;yBAhBe,gBAAgB"}
+{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAY3C,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,MAAM,EACN,aAAa,GACd,EAAE,qBAAqB,GAAG,SAAS,CAwBnC;yBA7Be,gBAAgB"}

package/dist/Field/InputClearButton.js

@@ -5,12 +5,18 @@
 /**
  * @file InputClearButton.tsx
  * @input Uses React, Button, Icon
- * @output Exports InputClearButton shared clear button for input components
- * @position Shared primitive; used by Typeahead, Tokenizer, TextInput
+ * @output Exports InputClearButton, the shared clear (✕) button rendered by
+ *   every clearable input in the family.
+ * @position Shared primitive. Every input that renders a clear affordance —
+ *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
+ *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
+ *   routes it through here, so the glyph is themed in one place via the
+ *   `astryx-input-clear-icon` target.
  */
 import * as stylex from '@stylexjs/stylex';
 import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   button: {
@@ -22,8 +28,12 @@ const styles = {
 export function InputClearButton({
   label,
   onClick,
-  xstyle
+  xstyle,
+  iconClassName
 }) {
+  const {
+    className: iconTargetClassName
+  } = themeProps('input-clear-icon');
   return /*#__PURE__*/_jsx(Button, {
     variant: "ghost",
     size: "sm",
@@ -31,7 +41,8 @@ export function InputClearButton({
     icon: /*#__PURE__*/_jsx(Icon, {
       icon: "close",
       size: "sm",
-      color: "inherit"
+      color: "secondary",
+      className: iconClassName != null ? `${iconTargetClassName} ${iconClassName}` : iconTargetClassName
     }),
     onClick: onClick,
     isIconOnly: true,

package/dist/HoverCard/useHoverCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AA4C3B;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CAyT5E"}
+{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAgC3B;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CAiT5E"}

package/dist/HoverCard/useHoverCard.js

@@ -11,7 +11,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/HoverCard/index.ts
  */
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { useLayer } from "../Layer/useLayer.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
@@ -26,20 +26,6 @@ const styles = {
     kaIpWk: "x7a53xk",
     kGVxlE: "x14hfi27",
     $$css: true
-  },
-  marginBlock: {
-    keoZOQ: "xcsaf9d",
-    k1K539: "x14cgwvg",
-    keTefX: "x1lziwak",
-    k71WvV: "x14z9mp",
-    $$css: true
-  },
-  marginInline: {
-    keoZOQ: "xdj266r",
-    k1K539: "xat24cr",
-    keTefX: "x11g1kdw",
-    k71WvV: "xnur1sd",
-    $$css: true
   }
 };
 
@@ -100,15 +86,12 @@ export function useHoverCard(options = {}) {
     onShow,
     onHide
   } = options;
-
-  // Select margin style based on placement axis
-  const marginStyle = placement === 'above' || placement === 'below' ? styles.marginBlock : styles.marginInline;
   const layer = useLayer({
     mode: 'context',
     onShow,
     onHide
   });
-  const popoverXstyle = useMemo(() => [styles.container, marginStyle], [marginStyle]);
+  const popoverXstyle = styles.container;
   const showTimeoutRef = useRef(null);
   const hideTimeoutRef = useRef(null);
   const triggerRef = useRef(null);
@@ -262,6 +245,7 @@ export function useHoverCard(options = {}) {
     const renderProps = {
       placement: renderPlacement,
       alignment: props?.alignment ?? alignment,
+      offset: spacingVars['--spacing-1'],
       // A named dialog when a label is provided; otherwise a group. A group
       // may validly be unnamed, an unnamed dialog may not — and hover cards
       // are non-modal, so group is honest semantics without a name.

package/dist/Indicator/CheckIndicator.d.ts

@@ -0,0 +1,25 @@
+import type { IndicatorProps } from './types';
+/**
+ * The default single-selection mark: a checkmark when chosen, nothing when not.
+ *
+ * Decorative and non-interactive — it renders `aria-hidden` and owns no role,
+ * state, or focus behavior; the option or row that hosts it keeps all of that.
+ *
+ * @example
+ * ```
+ * <CheckIndicator state={isSelected ? 'checked' : 'unchecked'} size="sm" />
+ * ```
+ *
+ * Swap every single-selection mark for a radio:
+ *
+ * @example
+ * ```
+ * import {RadioIndicator} from '@astryxdesign/core/Indicator';
+ * defineTheme({name: 'brand', indicators: {check: RadioIndicator}});
+ * ```
+ */
+export declare function CheckIndicator({ state, size, isDisabled, children, ref, className, style, xstyle, ...rest }: IndicatorProps<'singleSelection'>): import("react").JSX.Element | null;
+export declare namespace CheckIndicator {
+    var displayName: string;
+}
+//# sourceMappingURL=CheckIndicator.d.ts.map

package/dist/Indicator/CheckIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/CheckIndicator.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AA6B5C;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAW,EACX,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,iBAAiB,CAAC,sCA6EnC;yBAvFe,cAAc"}

package/dist/Indicator/CheckIndicator.js

@@ -0,0 +1,155 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CheckIndicator.tsx
+ * @input Indicator state props
+ * @output Exports CheckIndicator — the default single-selection mark
+ * @position Decorative check visual used wherever "this one is chosen" is
+ *           marked without a control: selector options, menu rows
+ *
+ * This is the indicator a product replaces to change what "chosen" looks like.
+ * `defineTheme({indicators: {check: RadioIndicator}})` turns every
+ * single-selection mark into a radio, in one line, without any component
+ * knowing it happened.
+ *
+ * It draws NOTHING when unchecked, which is what makes it the default: a
+ * listbox should not show an empty box beside every row. A replacement is free
+ * to draw in both states — a radio does — and hosting components render the
+ * indicator unconditionally so that works.
+ *
+ * Unlike the checkbox and radio indicators, this one renders no chrome of its
+ * own: it IS the glyph. Two consequences, both deliberate:
+ *
+ *   - It renders `<Icon>` directly rather than wrapping one, so the class the
+ *     host passes (`selector-check`, say) lands on the same element as
+ *     `astryx-icon` — one element carrying the mark and its theme target, per
+ *     the wrapper reduction in #4838/#4846.
+ *   - It adds NO theme target of its own. `astryx-checkbox` and `astryx-radio`
+ *     exist because those indicators draw chrome that needs styling; a check
+ *     is an icon, and `astryx-icon` plus the host's target already reach it.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import { Icon } from "../Icon/Icon.js";
+import "../theme/tokens.stylex.js";
+import { colorVars } from "../theme/tokens.stylex.js";
+import { isRenderable, mergeProps } from "../utils/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** The check glyph matches the control sizes the indicator families share. */
+const iconSizeForIndicator = {
+  sm: 'sm',
+  md: 'sm'
+};
+const styles = {
+  slot: {
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmuXW: "x2lah0s",
+    kzqmXN: "xcdlrvm",
+    kZKoxP: "x1l36t39",
+    $$css: true
+  },
+  enabled: {
+    kMwMTN: "xqwr325",
+    $$css: true
+  },
+  disabled: {
+    kMwMTN: "xqa6c3m",
+    $$css: true
+  }
+};
+
+/**
+ * The default single-selection mark: a checkmark when chosen, nothing when not.
+ *
+ * Decorative and non-interactive — it renders `aria-hidden` and owns no role,
+ * state, or focus behavior; the option or row that hosts it keeps all of that.
+ *
+ * @example
+ * ```
+ * <CheckIndicator state={isSelected ? 'checked' : 'unchecked'} size="sm" />
+ * ```
+ *
+ * Swap every single-selection mark for a radio:
+ *
+ * @example
+ * ```
+ * import {RadioIndicator} from '@astryxdesign/core/Indicator';
+ * defineTheme({name: 'brand', indicators: {check: RadioIndicator}});
+ * ```
+ */
+export function CheckIndicator({
+  state,
+  size = 'md',
+  isDisabled = false,
+  children,
+  ref,
+  className,
+  style,
+  xstyle,
+  ...rest
+}) {
+  const isChecked = state === 'checked';
+
+  // `children` (a pending Spinner, say) replaces the mark but keeps the
+  // indicator's place, matching the other indicators' contract. It is checked
+  // BEFORE `state`: a host passes a busy visual through in whatever state the
+  // row happens to be in, and an unchecked listbox row is the common one.
+  //
+  // `isRenderable`, not `children != null`: the idiom a host actually writes is
+  // `children={isBusy && <Spinner/>}`, which passes `false` when it is not
+  // busy. `false` is non-null, so a null check takes this branch, renders
+  // nothing inside it, and DELETES the mark on a chosen row (#4893).
+  //
+  // There is no glyph to hang the caller's props on in this branch, so they go
+  // on a span — every one of them, so a `data-testid`, an `id`, a handler or
+  // an `xstyle` behaves the same whether or not children are present.
+  if (isRenderable(children)) {
+    return /*#__PURE__*/_jsx("span", {
+      ...rest,
+      ref: ref,
+      "aria-hidden": "true",
+      ...mergeProps(stylex.props(styles.slot, isDisabled ? styles.disabled : styles.enabled, xstyle), className, style),
+      children: children
+    });
+  }
+
+  // Nothing to draw, and no box to reserve: an unmarked row keeps the layout
+  // it would have without this indicator.
+  if (!isChecked) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Icon
+  // Spread first so the indicator's own contract (below) wins over any
+  // same-named DOM attribute a caller passed through.
+  //
+  // An indicator declares span props (BaseProps<HTMLSpanElement>) while
+  // Icon declares SVG ones, so the handler types differ nominally. For a
+  // registry icon the element that actually receives these IS a span
+  // (IconFromRegistry renders one), so forwarding them is correct at
+  // runtime; the cast only reconciles the two declarations.
+  , {
+    ...rest,
+    // After the spread, deliberately. Icon puts its own a11y defaults BEFORE
+    // `{...props}` as a documented escape hatch (Icon.tsx), which is right
+    // for an icon and wrong for an indicator — this one is decorative by
+    // contract, so it re-asserts it here rather than inheriting the hatch.
+    "aria-hidden": "true",
+    icon: "check",
+    size: iconSizeForIndicator[size],
+    color: isDisabled ? 'disabled' : 'accent'
+    // The focus ring rides in through xstyle (composed at resolution), but
+    // never paints here: it only activates under an owner's indicatorScope
+    // marker, and a listbox row that marks selection takes focus itself
+    // rather than marking its indicator.
+    ,
+    xstyle: xstyle
+    // Icon merges className/style with its own rather than shadowing them,
+    // so the host's theme target composes with `astryx-icon`.
+    ,
+    className: className,
+    style: style
+  });
+}
+CheckIndicator.displayName = 'CheckIndicator';

package/dist/Indicator/CheckboxIndicator.d.ts

@@ -0,0 +1,22 @@
+import type { IndicatorProps } from './types';
+/**
+ * The default checkbox visual: a square box with a checkmark or an
+ * indeterminate bar.
+ *
+ * Decorative and non-interactive — it renders `aria-hidden` and owns no input,
+ * role, or focus behavior. The focus ring lives on the owner's control wrapper
+ * (see CheckboxInput), so a theme that replaces this component keeps a visible
+ * focus indicator for free. Themes replace it wholesale through
+ * `defineTheme({indicators: {checkbox: MyCheckbox}})`, or restyle it through
+ * the `checkbox` theme target like any other component.
+ *
+ * @example
+ * ```
+ * <CheckboxIndicator state="indeterminate" size="sm" />
+ * ```
+ */
+export declare function CheckboxIndicator({ state, size, isDisabled, children, ref, className, style, xstyle, ...rest }: IndicatorProps<'multiSelection'>): import("react").JSX.Element;
+export declare namespace CheckboxIndicator {
+    var displayName: string;
+}
+//# sourceMappingURL=CheckboxIndicator.d.ts.map

package/dist/Indicator/CheckboxIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/CheckboxIndicator.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAwI5C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAW,EACX,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,gBAAgB,CAAC,+BAwElC;yBAlFe,iBAAiB"}

package/dist/Indicator/CheckboxIndicator.js

@@ -0,0 +1,173 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CheckboxIndicator.tsx
+ * @input Indicator state props
+ * @output Exports CheckboxIndicator — the default checkbox selection visual
+ * @position Decorative checkbox visual shared by CheckboxInput, CheckboxList,
+ *           and decorative menu markers
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { borderVars, colorVars, durationVars, easeVars, radiusVars } from "../theme/tokens.stylex.js";
+import { isRenderable, mergeProps, themeProps } from "../utils/index.js";
+import "./indicator.markers.stylex.js";
+import { indicatorScope } from "./indicator.markers.stylex.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  box: {
+    kB7OPa: "x9f619",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmuXW: "x2lah0s",
+    kMzoRj: "x1litavf",
+    ksu8eU: "x1y0btm7",
+    kaIpWk: "xx3sua9",
+    k1ekBW: "xts7igz",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    $$css: true
+  },
+  unchecked: {
+    kMwMTN: "xqwr325",
+    kVAM5u: "xvy26l8 xilc7fp",
+    kWkggS: "x10xzikg xeultfy",
+    $$css: true
+  },
+  checked: {
+    kMwMTN: "x17wrial",
+    kVAM5u: "xad5do x1ozl1p1",
+    kWkggS: "x1ewilqj x17srpfb",
+    $$css: true
+  },
+  disabled: {
+    kSiTet: "xbyyjgo",
+    kVAM5u: "x14i3s5s x61roa7",
+    $$css: true
+  },
+  disabledUnchecked: {
+    kWkggS: "xwmxj5m xqxnq6d",
+    $$css: true
+  },
+  checkmark: {
+    k1xSpc: "x1s85apg",
+    kMwMTN: "x17wrial xs5hli",
+    $$css: true
+  },
+  checkmarkVisible: {
+    k1xSpc: "x1lliihq",
+    $$css: true
+  },
+  indeterminateMark: {
+    k1xSpc: "x1s85apg",
+    kWkggS: "x1azo05 xwvh9j7",
+    kaIpWk: "xjspbzw",
+    $$css: true
+  },
+  indeterminateMarkVisible: {
+    k1xSpc: "x1lliihq",
+    $$css: true
+  }
+};
+const boxSizeStyles = {
+  sm: {
+    kzqmXN: "xw4jnvo",
+    kZKoxP: "x1qx5ct2",
+    $$css: true
+  },
+  md: {
+    kzqmXN: "xvy4d1p",
+    kZKoxP: "xxk0z11",
+    $$css: true
+  }
+};
+const checkmarkSizeStyles = {
+  sm: {
+    kzqmXN: "xsmyaan",
+    kZKoxP: "x1kpxq89",
+    $$css: true
+  },
+  md: {
+    kzqmXN: "x6jxa94",
+    kZKoxP: "x1v9usgg",
+    $$css: true
+  }
+};
+const indeterminateSizeStyles = {
+  sm: {
+    kzqmXN: "x1fsd2vl",
+    kZKoxP: "x36qwtl",
+    $$css: true
+  },
+  md: {
+    kzqmXN: "xsmyaan",
+    kZKoxP: "x36qwtl",
+    $$css: true
+  }
+};
+
+/**
+ * The default checkbox visual: a square box with a checkmark or an
+ * indeterminate bar.
+ *
+ * Decorative and non-interactive — it renders `aria-hidden` and owns no input,
+ * role, or focus behavior. The focus ring lives on the owner's control wrapper
+ * (see CheckboxInput), so a theme that replaces this component keeps a visible
+ * focus indicator for free. Themes replace it wholesale through
+ * `defineTheme({indicators: {checkbox: MyCheckbox}})`, or restyle it through
+ * the `checkbox` theme target like any other component.
+ *
+ * @example
+ * ```
+ * <CheckboxIndicator state="indeterminate" size="sm" />
+ * ```
+ */
+export function CheckboxIndicator({
+  state,
+  size = 'md',
+  isDisabled = false,
+  children,
+  ref,
+  className,
+  style,
+  xstyle,
+  ...rest
+}) {
+  const isChecked = state === 'checked';
+  const isIndeterminate = state === 'indeterminate';
+  const isCheckedOrIndeterminate = isChecked || isIndeterminate;
+  return /*#__PURE__*/_jsx("span", {
+    ...rest,
+    ref: ref,
+    "aria-hidden": "true",
+    ...mergeProps(themeProps('checkbox-indicator', {
+      size,
+      checked: isChecked ? 'checked' : isIndeterminate ? 'indeterminate' : null,
+      disabled: isDisabled ? 'disabled' : null
+    },
+    // `checkbox` was the target before indicators existed; themes
+    // styling it keep working until the next major.
+    {
+      legacyNames: ['checkbox']
+    }), stylex.props(styles.box, boxSizeStyles[size], isCheckedOrIndeterminate ? styles.checked : styles.unchecked, isDisabled && styles.disabled, isDisabled && !isCheckedOrIndeterminate && styles.disabledUnchecked, xstyle), className, style),
+    children: isRenderable(children) ? children : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("svg", {
+        viewBox: "0 0 10 10",
+        ...stylex.props(styles.checkmark, checkmarkSizeStyles[size], isChecked && styles.checkmarkVisible),
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M8.5 2.5L4 7.5L1.5 5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          fill: "none",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        })
+      }), /*#__PURE__*/_jsx("span", {
+        ...stylex.props(styles.indeterminateMark, indeterminateSizeStyles[size], isIndeterminate && styles.indeterminateMarkVisible)
+      })]
+    })
+  });
+}
+CheckboxIndicator.displayName = 'CheckboxIndicator';

package/dist/Indicator/RadioIndicator.d.ts

@@ -0,0 +1,23 @@
+import type { IndicatorProps } from './types';
+/**
+ * The default radio visual: a circle with a filled inner dot when selected.
+ *
+ * Decorative and non-interactive — it renders `aria-hidden` and owns no input,
+ * role, or focus behavior. Themes replace it wholesale through
+ * `defineTheme({indicators: {radio: MyRadio}})`, or restyle it through the
+ * `radio` / `radio-dot` theme targets like any other component.
+ *
+ * Unlike an icon, a radio draws in *both* states — an empty circle when
+ * unchecked. That is what makes it usable as a selection indicator in
+ * components whose default is "a checkmark when selected, nothing otherwise".
+ *
+ * @example
+ * ```
+ * <RadioIndicator state="checked" size="md" />
+ * ```
+ */
+export declare function RadioIndicator({ state, size, isDisabled, children, ref, className, style, xstyle, ...rest }: IndicatorProps<'singleSelection'>): import("react").JSX.Element;
+export declare namespace RadioIndicator {
+    var displayName: string;
+}
+//# sourceMappingURL=RadioIndicator.d.ts.map

package/dist/Indicator/RadioIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/RadioIndicator.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAuG5C;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAW,EACX,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,iBAAiB,CAAC,+BAqDnC;yBA/De,cAAc"}