@astryxdesign/core 0.3.0 → 0.4.0-canary.3112e99

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, IndicatorPosition, 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,iBAAiB,EACjB,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
+};

package/dist/Indicator/indicatorRegistry.d.ts

@@ -0,0 +1,71 @@
+/**
+ * @file indicatorRegistry.ts
+ * @input Theme source and indicator name
+ * @output Exports the default indicator map and getIndicator resolution
+ * @position Server-safe indicator resolver; no 'use client' so it is
+ *           importable from RSC
+ *
+ * Two name spaces meet here, and keeping them apart is the whole design:
+ *
+ *   - {@link CoreIndicatorName} — the indicators Astryx itself ships. Closed,
+ *     and every one of them has a default, so resolving one always yields a
+ *     component.
+ *   - {@link IndicatorName} — every indicator name that exists, including the
+ *     ones other packages add by augmenting `IndicatorMap`. Open, and core has
+ *     no default for a name it has never heard of.
+ *
+ * `getIndicator` is overloaded along that seam: a core name resolves to a
+ * component, an augmented name resolves to a component *or* `undefined`, and
+ * the caller has to say what to do about it. Typing the map as total over the
+ * open union instead — which is what shipped in #4712 — made the compiler
+ * promise a component for `getIndicator('brand-star')` and hand back
+ * `undefined` at runtime.
+ */
+import type { DefinedTheme } from '../theme/defineTheme';
+import type { IndicatorComponent, IndicatorMap, IndicatorName } from './types';
+/**
+ * The indicator names Astryx ships a default for.
+ *
+ * Written out rather than derived from {@link IndicatorMap}, because that
+ * interface is open to augmentation and this set is not: it is exactly what is
+ * in {@link defaultIndicators} below. `indicatorRegistry.test.tsx` pins the two
+ * together in both directions.
+ */
+export type CoreIndicatorName = 'check' | 'checkbox' | 'radio';
+/**
+ * The indicators Astryx ships. A theme's `indicators` entries override these
+ * by name.
+ *
+ * Typed per family (rather than as one widened component type) so a default
+ * declared here has to accept the states its family passes — the same rule
+ * {@link IndicatorRegistry} holds replacements to.
+ */
+export declare const defaultIndicators: {
+    [N in CoreIndicatorName]: IndicatorComponent<IndicatorMap[N]>;
+};
+export type IndicatorRegistrySource = DefinedTheme | string | null | undefined;
+/**
+ * Resolve an indicator component by name, preferring the theme's override and
+ * falling back to the built-in indicator.
+ *
+ * Works in both server and client environments. Client components should use
+ * the {@link useIndicator} hook, which resolves against the nearest `<Theme>`.
+ *
+ * @example
+ * ```
+ * const Radio = getIndicator('radio', themeName);
+ * <Radio state="checked" />
+ * ```
+ *
+ * For a name contributed by augmentation there is no built-in to fall back to,
+ * so the result is `undefined` unless a theme supplies one — the package that
+ * added the name owns its default:
+ *
+ * @example
+ * ```
+ * const Star = getIndicator('brand-star', themeName) ?? BrandStar;
+ * ```
+ */
+export declare function getIndicator<N extends CoreIndicatorName>(name: N, source?: IndicatorRegistrySource): IndicatorComponent<IndicatorMap[N]>;
+export declare function getIndicator<N extends IndicatorName>(name: N, source?: IndicatorRegistrySource): IndicatorComponent<IndicatorMap[N]> | undefined;
+//# sourceMappingURL=indicatorRegistry.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"indicatorRegistry.d.ts","sourceRoot":"","sources":["../../src/Indicator/indicatorRegistry.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAKvD,OAAO,KAAK,EACV,kBAAkB,EAClB,YAAY,EACZ,aAAa,EAEd,MAAM,SAAS,CAAC;AAEjB;;;;;;;GAOG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/D;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,EAAE;KAC7B,CAAC,IAAI,iBAAiB,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;CAK9D,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAe/E;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,iBAAiB,EACtD,IAAI,EAAE,CAAC,EACP,MAAM,CAAC,EAAE,uBAAuB,GAC/B,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AACvC,wBAAgB,YAAY,CAAC,CAAC,SAAS,aAAa,EAClD,IAAI,EAAE,CAAC,EACP,MAAM,CAAC,EAAE,uBAAuB,GAC/B,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC"}

package/dist/Indicator/indicatorRegistry.js

@@ -0,0 +1,93 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file indicatorRegistry.ts
+ * @input Theme source and indicator name
+ * @output Exports the default indicator map and getIndicator resolution
+ * @position Server-safe indicator resolver; no 'use client' so it is
+ *           importable from RSC
+ *
+ * Two name spaces meet here, and keeping them apart is the whole design:
+ *
+ *   - {@link CoreIndicatorName} — the indicators Astryx itself ships. Closed,
+ *     and every one of them has a default, so resolving one always yields a
+ *     component.
+ *   - {@link IndicatorName} — every indicator name that exists, including the
+ *     ones other packages add by augmenting `IndicatorMap`. Open, and core has
+ *     no default for a name it has never heard of.
+ *
+ * `getIndicator` is overloaded along that seam: a core name resolves to a
+ * component, an augmented name resolves to a component *or* `undefined`, and
+ * the caller has to say what to do about it. Typing the map as total over the
+ * open union instead — which is what shipped in #4712 — made the compiler
+ * promise a component for `getIndicator('brand-star')` and hand back
+ * `undefined` at runtime.
+ */
+
+import { getRegisteredTheme } from "../theme/themeRegistry.js";
+import { CheckboxIndicator } from "./CheckboxIndicator.js";
+import { CheckIndicator } from "./CheckIndicator.js";
+import { RadioIndicator } from "./RadioIndicator.js";
+
+/**
+ * The indicator names Astryx ships a default for.
+ *
+ * Written out rather than derived from {@link IndicatorMap}, because that
+ * interface is open to augmentation and this set is not: it is exactly what is
+ * in {@link defaultIndicators} below. `indicatorRegistry.test.tsx` pins the two
+ * together in both directions.
+ */
+
+/**
+ * The indicators Astryx ships. A theme's `indicators` entries override these
+ * by name.
+ *
+ * Typed per family (rather than as one widened component type) so a default
+ * declared here has to accept the states its family passes — the same rule
+ * {@link IndicatorRegistry} holds replacements to.
+ */
+export const defaultIndicators = {
+  check: CheckIndicator,
+  checkbox: CheckboxIndicator,
+  radio: RadioIndicator
+};
+function getTheme(source) {
+  if (source == null) {
+    return null;
+  }
+  return typeof source === 'string' ? getRegisteredTheme(source) : source;
+}
+function getThemeIndicators(source) {
+  return getTheme(source)?.indicators ?? null;
+}
+
+/**
+ * Resolve an indicator component by name, preferring the theme's override and
+ * falling back to the built-in indicator.
+ *
+ * Works in both server and client environments. Client components should use
+ * the {@link useIndicator} hook, which resolves against the nearest `<Theme>`.
+ *
+ * @example
+ * ```
+ * const Radio = getIndicator('radio', themeName);
+ * <Radio state="checked" />
+ * ```
+ *
+ * For a name contributed by augmentation there is no built-in to fall back to,
+ * so the result is `undefined` unless a theme supplies one — the package that
+ * added the name owns its default:
+ *
+ * @example
+ * ```
+ * const Star = getIndicator('brand-star', themeName) ?? BrandStar;
+ * ```
+ */
+
+export function getIndicator(name, source) {
+  const override = getThemeIndicators(source)?.[name];
+  return override ??
+  // `name` may be an augmented one, which this map has no entry for — hence
+  // the `| undefined` the overloads expose to those callers.
+  defaultIndicators[name];
+}