@astryxdesign/core 0.3.0 → 0.4.0

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"}

package/dist/Indicator/RadioIndicator.js

@@ -0,0 +1,137 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file RadioIndicator.tsx
+ * @input Indicator state props
+ * @output Exports RadioIndicator — the default radio selection visual
+ * @position Decorative radio visual shared by RadioList, decorative menu
+ *           markers, and any selection slot themed to use a radio
+ */
+
+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 } from "react/jsx-runtime";
+const styles = {
+  circle: {
+    kB7OPa: "x9f619",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmuXW: "x2lah0s",
+    kMzoRj: "x1litavf",
+    ksu8eU: "x1y0btm7",
+    kaIpWk: "xjspbzw",
+    k1ekBW: "xts7igz",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    $$css: true
+  },
+  unchecked: {
+    kVAM5u: "xvy26l8 xilc7fp",
+    kWkggS: "x10xzikg xeultfy",
+    $$css: true
+  },
+  checked: {
+    kVAM5u: "xad5do x1ozl1p1",
+    kWkggS: "x1ewilqj x17srpfb",
+    $$css: true
+  },
+  disabled: {
+    kSiTet: "xbyyjgo",
+    kVAM5u: "x14i3s5s x61roa7",
+    $$css: true
+  },
+  disabledUnchecked: {
+    kWkggS: "xwmxj5m xqxnq6d",
+    $$css: true
+  },
+  dot: {
+    kaIpWk: "xjspbzw",
+    kWkggS: "x1azo05 xwvh9j7",
+    $$css: true
+  }
+};
+const circleSizeStyles = {
+  sm: {
+    kzqmXN: "xw4jnvo",
+    kZKoxP: "x1qx5ct2",
+    $$css: true
+  },
+  md: {
+    kzqmXN: "xvy4d1p",
+    kZKoxP: "xxk0z11",
+    $$css: true
+  }
+};
+const dotSizeStyles = {
+  sm: {
+    kzqmXN: "x1xc55vz",
+    kZKoxP: "xdk7pt",
+    $$css: true
+  },
+  md: {
+    kzqmXN: "x1fsd2vl",
+    kZKoxP: "x170jfvy",
+    $$css: true
+  }
+};
+
+/**
+ * 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 function RadioIndicator({
+  state,
+  size = 'md',
+  isDisabled = false,
+  children,
+  ref,
+  className,
+  style,
+  xstyle,
+  ...rest
+}) {
+  // A radio has no partial state; anything other than unchecked reads as
+  // selected.
+  const isChecked = state !== 'unchecked';
+  return /*#__PURE__*/_jsx("span", {
+    ...rest,
+    ref: ref,
+    "aria-hidden": "true",
+    ...mergeProps(themeProps('radio-indicator', {
+      size,
+      checked: isChecked ? 'checked' : null,
+      disabled: isDisabled ? 'disabled' : null
+    },
+    // `radio` was the target before indicators existed; themes styling
+    // it keep working until the next major.
+    {
+      legacyNames: ['radio']
+    }), stylex.props(styles.circle, circleSizeStyles[size], isChecked ? styles.checked : styles.unchecked, isDisabled && styles.disabled, isDisabled && !isChecked && styles.disabledUnchecked, xstyle), className, style),
+    children: isRenderable(children) ? children : isChecked && /*#__PURE__*/_jsx("span", {
+      ...mergeProps(themeProps('radio-indicator-dot', {
+        size
+      }, {
+        legacyNames: ['radio-dot']
+      }), stylex.props(styles.dot, dotSizeStyles[size]))
+    })
+  });
+}
+RadioIndicator.displayName = 'RadioIndicator';

package/dist/Indicator/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @file index.ts
+ * @input None (re-export barrel)
+ * @output Public indicator surface: components, registry, hook, types
+ * @position Entry point for the stateful control-visual layer
+ *
+ * Indicators are the componentized form of stateful control visuals — the
+ * checkbox box, the radio circle, the mark on a chosen option. They are
+ * decorative: the owning component keeps the role, state, and focus behavior,
+ * while the indicator turns state into a picture.
+ *
+ * That makes them themeable through CSS targets like any other component, and
+ * replaceable wholesale by name through `defineTheme({indicators})` — replace
+ * `check` and every single-selection mark in the app follows.
+ */
+export { CheckboxIndicator } from './CheckboxIndicator';
+export { CheckIndicator } from './CheckIndicator';
+export { RadioIndicator } from './RadioIndicator';
+export { defaultIndicators, getIndicator } from './indicatorRegistry';
+export type { CoreIndicatorName, IndicatorRegistrySource, } from './indicatorRegistry';
+export { useIndicator } from './useIndicator';
+export { indicatorScope } from './indicator.markers.stylex';
+export type { IndicatorComponent, IndicatorFamily, IndicatorFamilyMap, IndicatorMap, IndicatorName, IndicatorNameOfFamily, IndicatorProps, IndicatorRegistry, IndicatorSize, IndicatorState, } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Indicator/index.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAGhD,OAAO,EAAC,iBAAiB,EAAE,YAAY,EAAC,MAAM,qBAAqB,CAAC;AACpE,YAAY,EACV,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAC,cAAc,EAAC,MAAM,4BAA4B,CAAC;AAE1D,YAAY,EACV,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EAClB,YAAY,EACZ,aAAa,EACb,qBAAqB,EACrB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,cAAc,GACf,MAAM,SAAS,CAAC"}

package/dist/Indicator/index.js

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file index.ts
+ * @input None (re-export barrel)
+ * @output Public indicator surface: components, registry, hook, types
+ * @position Entry point for the stateful control-visual layer
+ *
+ * Indicators are the componentized form of stateful control visuals — the
+ * checkbox box, the radio circle, the mark on a chosen option. They are
+ * decorative: the owning component keeps the role, state, and focus behavior,
+ * while the indicator turns state into a picture.
+ *
+ * That makes them themeable through CSS targets like any other component, and
+ * replaceable wholesale by name through `defineTheme({indicators})` — replace
+ * `check` and every single-selection mark in the app follows.
+ */
+
+export { CheckboxIndicator } from "./CheckboxIndicator.js";
+export { CheckIndicator } from "./CheckIndicator.js";
+export { RadioIndicator } from "./RadioIndicator.js";
+
+// Registry (RSC-compatible, no 'use client')
+export { defaultIndicators, getIndicator } from "./indicatorRegistry.js";
+export { useIndicator } from "./useIndicator.js";
+export { indicatorScope } from "./indicator.markers.stylex.js";

package/dist/Indicator/indicator.markers.stylex.d.ts

@@ -0,0 +1,16 @@
+import * as stylex from '@stylexjs/stylex';
+/**
+ * Scoped marker for indicator ancestor selectors.
+ *
+ * An owner (CheckboxInput's row, RadioListItem's row) applies this marker to
+ * the element whose hover and focus should drive the indicator's appearance.
+ * The indicator reads it through `stylex.when.ancestor()`, so interaction
+ * state stays in CSS instead of being threaded through React props — and
+ * owners that should *not* tint their indicator on hover (decorative menu
+ * markers, listbox options) simply don't apply the marker.
+ *
+ * Owners apply it only while enabled, so disabled controls get no hover
+ * feedback.
+ */
+export declare const indicatorScope: ReturnType<typeof stylex.defineMarker>;
+//# sourceMappingURL=indicator.markers.stylex.d.ts.map

package/dist/Indicator/indicator.markers.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"indicator.markers.stylex.d.ts","sourceRoot":"","sources":["../../src/Indicator/indicator.markers.stylex.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CAC3C,CAAC"}

package/dist/Indicator/indicator.markers.stylex.js

@@ -0,0 +1,21 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * Scoped marker for indicator ancestor selectors.
+ *
+ * An owner (CheckboxInput's row, RadioListItem's row) applies this marker to
+ * the element whose hover and focus should drive the indicator's appearance.
+ * The indicator reads it through `stylex.when.ancestor()`, so interaction
+ * state stays in CSS instead of being threaded through React props — and
+ * owners that should *not* tint their indicator on hover (decorative menu
+ * markers, listbox options) simply don't apply the marker.
+ *
+ * Owners apply it only while enabled, so disabled controls get no hover
+ * feedback.
+ */
+export const indicatorScope = {
+  x1odsvnm: "x1odsvnm",
+  $$css: true
+};