@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/dist/Icon/globalIconRegistry.js

@@ -2,12 +2,23 @@
 
 /**
  * @file globalIconRegistry.tsx
- * @input None (pure module-level state)
- * @output Exports registerIcons, getIconRegistry, getIcon, resetIcons, IconName, IconRegistry
+ * @input Theme icon entries (a DefinedTheme or a registered theme name), the
+ *   process-wide registry, and built-in defaults
+ * @output Exports registerIcons, getIconRegistry, getIcon, getExtendedIcon,
+ *   resetIcons, resolveIcon (internal), IconName, IconRegistry, IconEntry,
+ *   IconRequest
  * @position Global and theme-scoped icon registry; works in server and client environments
  *
  * This module has NO 'use client' directive — it's importable from RSC.
  * Components resolve semantic icons through getIcon() or the client useIcon() hook.
+ *
+ * An entry is a React node or a pure synchronous function of an
+ * {@link IconRequest}. Resolution picks one source — theme entry, then
+ * process-wide registration, then built-in default; a nullish static entry
+ * falls through — and a selected function's result is final. `Icon` passes
+ * its resolved size and a variant the entry can receive (listed by the active
+ * theme and, for a theme entry, by the theme that defined it), otherwise
+ * `undefined`; the public reads below pass `{size: 'md'}`.
  */
 
 import { defaultIcons } from "./defaultIcons.js";
@@ -53,6 +64,45 @@ import { warnOnce } from "../utils/devWarning.js";
  * A complete icon registry: every semantic name mapped to a React node.
  */
 
+/**
+ * What `Icon` asks a function icon entry for: the final Icon size, resolved
+ * explicit `size` → owning component's default → `'md'`, and a variant name
+ * or `undefined`.
+ *
+ * Inside `defineTheme`, `Variant` is the theme's listed `iconVariants`; a
+ * process-wide registration receives {@link IconVariant}.
+ */
+
+/**
+ * A theme or process-wide icon entry: a React node, or a pure synchronous
+ * function of the {@link IconRequest} that returns one.
+ *
+ * A function computes its result from the request only — no hooks, DOM or
+ * SVG measurement, browser globals, network access, mutable module state, or
+ * side effects. Once selected, its result is final: returning `null` or
+ * `undefined` renders no glyph instead of falling through to another source.
+ *
+ * @example
+ * ```
+ * defineTheme({
+ *   name: 'brand',
+ *   icons: {
+ *     info: ({size}) => <InfoIcon weight={size === 'sm' ? 'bold' : 'regular'} />,
+ *   },
+ * });
+ * ```
+ */
+
+/**
+ * How resolution holds any entry: an entry typed for some variant names
+ * accepts a request with none of them.
+ */
+
+/** The request every public, one-argument read uses. */
+const PUBLIC_READ_REQUEST = {
+  size: 'md'
+};
+
 // =============================================================================
 // Global Registry
 // =============================================================================
@@ -68,14 +118,96 @@ let globalRegistry = {};
 function isNamespacedKey(name) {
   return name.includes(':');
 }
-function getThemeIconOverrides(source) {
-  if (source == null) {
+function getTheme(source) {
+  return typeof source === 'string' ? getRegisteredTheme(source) : source ?? null;
+}
+
+/**
+ * The theme's icon entries, functions included. A theme from `defineTheme`
+ * keeps them in `__icons` when any entry is a function (its public `icons`
+ * is the node view); otherwise `icons` already holds them.
+ */
+function getThemeIconEntries(theme) {
+  if (theme == null) {
     return null;
   }
-  if (typeof source === 'string') {
-    return getRegisteredTheme(source)?.icons ?? null;
+  return theme.__icons ?? theme.icons ?? null;
+}
+
+/**
+ * The selected entry, with every variant list a requested variant must be in
+ * for the entry to receive it. No lists: the entry receives no variant.
+ */
+
+/**
+ * Pick the one source that answers `name`: the theme entry, then the
+ * process-wide registration, then the built-in default, then `fallback`. A
+ * nullish static entry falls through; a function is returned as-is, because
+ * its result is final.
+ *
+ * A theme entry may receive a variant listed by the active theme and by the
+ * theme that defined the entry (an inherited entry keeps its defining
+ * theme's list). A process-wide registration may receive a variant the
+ * active theme lists.
+ */
+function selectIconEntry(name, source, fallback) {
+  const theme = getTheme(source);
+  const activeVariants = theme?.iconVariants;
+  const themeEntry = getThemeIconEntries(theme)?.[name];
+  if (theme != null && themeEntry != null) {
+    const definingVariants = theme.__iconEntryVariants != null && Object.hasOwn(theme.__iconEntryVariants, name) ? theme.__iconEntryVariants[name] : activeVariants;
+    return {
+      entry: themeEntry,
+      variantLists: [activeVariants, definingVariants]
+    };
+  }
+  const globalEntry = globalRegistry[name];
+  if (globalEntry != null) {
+    return {
+      entry: globalEntry,
+      variantLists: [activeVariants]
+    };
   }
-  return source.icons ?? null;
+  return {
+    entry: defaultIcons[name] ?? fallback,
+    variantLists: []
+  };
+}
+
+/**
+ * Read a selected entry for a request: call a function, return a node as-is.
+ * The function receives the requested variant only when every list of the
+ * selection contains it; otherwise it receives `undefined`.
+ */
+function readIconEntry({
+  entry,
+  variantLists
+}, {
+  size,
+  variant
+}) {
+  if (typeof entry !== 'function') {
+    return entry;
+  }
+  const receivable = variant !== undefined && variantLists.length > 0 && variantLists.every(list => list?.includes(variant) === true);
+  // A receivable variant is one the entry's theme lists, which is the type
+  // the entry was written against.
+  return entry(receivable ? {
+    size,
+    variant
+  } : {
+    size
+  });
+}
+
+/**
+ * Resolve a key for an Icon request. `Icon` is the caller: it passes the size
+ * it resolved and the variant it was asked for. Public reads use
+ * {@link getIcon} instead.
+ * @internal
+ */
+export function resolveIcon(name, source, request) {
+  return readIconEntry(selectIconEntry(name, source), request);
 }
 
 /**
@@ -100,6 +232,13 @@ function getThemeIconOverrides(source) {
  * ```
  * registerIcons({ 'richtext:bold': <MyBoldIcon /> });
  * ```
+ *
+ * An entry may also be a pure synchronous function of `{size, variant}`
+ * ({@link IconEntry}); `Icon` passes it the size it renders at.
+ * @example
+ * ```
+ * registerIcons({ info: ({size}) => <InfoIcon weight={size === 'sm' ? 'bold' : 'regular'} /> });
+ * ```
  */
 export function registerIcons(icons) {
   warnOnce('icon-registry:global-register-icons', 'Icon', '`registerIcons()` applies icon overrides globally. Prefer `defineTheme({ icons })` for theme-scoped icon overrides.');
@@ -116,6 +255,9 @@ export function registerIcons(icons) {
  * Works in both server and client environments. Useful for tooling that needs
  * to derive valid semantic icon-name options from the same registry Icon
  * resolves against.
+ *
+ * Every value is a React node: a function entry is read at `{size: 'md'}`,
+ * exactly as {@link getIcon} reads it.
  */
 export function getIconRegistry(source) {
   const registry = {};
@@ -124,20 +266,15 @@ export function getIconRegistry(source) {
   // contributed by a library or shipped as a component's own default, are
   // resolved via getIcon/getExtendedIcon and intentionally kept out of the
   // typed IconRegistry snapshot.
-  for (const name of Object.keys(defaultIcons)) {
+  const names = new Set(Object.keys(defaultIcons));
+  for (const name of Object.keys(getThemeIconEntries(getTheme(source)) ?? {})) {
+    names.add(name);
+  }
+  for (const name of names) {
     if (isNamespacedKey(name)) {
       continue;
     }
-    registry[name] = globalRegistry[name] ?? defaultIcons[name];
-  }
-  const themeIcons = getThemeIconOverrides(source);
-  if (themeIcons != null) {
-    for (const name of Object.keys(themeIcons)) {
-      if (isNamespacedKey(name)) {
-        continue;
-      }
-      registry[name] = themeIcons[name] ?? registry[name];
-    }
+    registry[name] = readIconEntry(selectIconEntry(name, source), PUBLIC_READ_REQUEST);
   }
   return registry;
 }
@@ -152,10 +289,12 @@ export function getIconRegistry(source) {
  * {@link IconName}s — useful for library-contributed icons. For a
  * caller-supplied fallback when a key isn't registered, use
  * {@link getExtendedIcon}.
+ *
+ * Returns a React node: a function entry is read at `{size: 'md'}`. Render
+ * `<Icon icon={name} />` to request another size.
  */
 export function getIcon(name, source) {
-  const themeIcons = getThemeIconOverrides(source);
-  return themeIcons?.[name] ?? globalRegistry[name] ?? defaultIcons[name];
+  return readIconEntry(selectIconEntry(name, source), PUBLIC_READ_REQUEST);
 }
 
 /**
@@ -168,15 +307,16 @@ export function getIcon(name, source) {
  * widen the core {@link IconName} union.
  *
  * The `fallback` is the library default, overridable by a theme registering the
- * same key (for example `'richtext:bold'`).
+ * same key (for example `'richtext:bold'`). A function entry is read at
+ * `{size: 'md'}`, and its result is final: a nullish result does not fall
+ * back.
  * @example
  * ```
  * getExtendedIcon('richtext:bold', <BoldGlyph />)
  * ```
  */
 export function getExtendedIcon(name, fallback, source) {
-  const themeIcons = getThemeIconOverrides(source);
-  return themeIcons?.[name] ?? globalRegistry[name] ?? defaultIcons[name] ?? fallback;
+  return readIconEntry(selectIconEntry(name, source, fallback), PUBLIC_READ_REQUEST);
 }
 
 /**

package/dist/Icon/index.d.ts

@@ -1,14 +1,38 @@
 /**
  * @file index.ts
  * @input Imports Icon component/types, icon registry, and global registration
- * @output Exports Icon, icon registry helpers, registerIcons, getIconRegistry, getIcon
+ * @output Exports Icon, icon registry helpers, registerIcons, getIconRegistry, getIcon,
+ *   the IconEntry/IconRequest types for theme and registered entries, and the
+ *   augmentable IconVariantMap with its IconVariant names
  * @position Component entry point; re-exported by /packages/core/src/index.ts
  *
  * SYNC: When modified, update this header and /packages/core/src/Icon/Icon.doc.mjs
  */
+/**
+ * Icon variant names an application uses. Astryx defines none: a theme lists
+ * the names it supports in `defineTheme({iconVariants})`, and an application
+ * augments this map with the names it requests.
+ *
+ * A theme icon entry receives a requested variant only when the active theme
+ * lists it; any other request renders the entry's normal artwork.
+ *
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Icon' {
+ *   interface IconVariantMap {
+ *     outline: true;
+ *     filled: true;
+ *   }
+ * }
+ * ```
+ */
+export interface IconVariantMap {
+}
+/** A variant name from the augmentable {@link IconVariantMap}. */
+export type IconVariant = keyof IconVariantMap & string;
 export { Icon, renderIconSlot } from './Icon.js';
 export { useIcon } from './useIcon.js';
 export type { IconProps, IconColor, IconSize, IconType } from './Icon.js';
 export { registerIcons, getIconRegistry, getIcon, getExtendedIcon, resetIcons, } from './globalIconRegistry.js';
-export type { IconName, ExtendedIconName, NamespacedIconName, IconRegistry, IconRegistrySource, } from './globalIconRegistry.js';
+export type { IconName, ExtendedIconName, NamespacedIconName, IconRegistry, IconRegistrySource, IconEntry, IconRequest, } from './globalIconRegistry.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Icon/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,IAAI,EAAE,cAAc,EAAC,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,QAAQ,CAAC;AAGrE,OAAO,EACL,aAAa,EACb,eAAe,EACf,OAAO,EACP,eAAe,EACf,UAAU,GACX,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,GACnB,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Icon/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,WAAW,cAAc;CAAG;AAElC,kEAAkE;AAClE,MAAM,MAAM,WAAW,GAAG,MAAM,cAAc,GAAG,MAAM,CAAC;AAExD,OAAO,EAAC,IAAI,EAAE,cAAc,EAAC,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,QAAQ,CAAC;AAGrE,OAAO,EACL,aAAa,EACb,eAAe,EACf,OAAO,EACP,eAAe,EACf,UAAU,GACX,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,EAClB,SAAS,EACT,WAAW,GACZ,MAAM,sBAAsB,CAAC"}

package/dist/Icon/index.js

@@ -5,11 +5,34 @@
 /**
  * @file index.ts
  * @input Imports Icon component/types, icon registry, and global registration
- * @output Exports Icon, icon registry helpers, registerIcons, getIconRegistry, getIcon
+ * @output Exports Icon, icon registry helpers, registerIcons, getIconRegistry, getIcon,
+ *   the IconEntry/IconRequest types for theme and registered entries, and the
+ *   augmentable IconVariantMap with its IconVariant names
  * @position Component entry point; re-exported by /packages/core/src/index.ts
  *
  * SYNC: When modified, update this header and /packages/core/src/Icon/Icon.doc.mjs
  */
+
+/**
+ * Icon variant names an application uses. Astryx defines none: a theme lists
+ * the names it supports in `defineTheme({iconVariants})`, and an application
+ * augments this map with the names it requests.
+ *
+ * A theme icon entry receives a requested variant only when the active theme
+ * lists it; any other request renders the entry's normal artwork.
+ *
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Icon' {
+ *   interface IconVariantMap {
+ *     outline: true;
+ *     filled: true;
+ *   }
+ * }
+ * ```
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- augmentation point
+/** A variant name from the augmentable {@link IconVariantMap}. */
 export { Icon, renderIconSlot } from "./Icon.js";
 export { useIcon } from "./useIcon.js";
 // Global registry (RSC-compatible, no 'use client')

package/dist/Icon/useIcon.d.ts

@@ -1,7 +1,8 @@
 /**
  * @file useIcon.ts
  * @input Semantic icon name
- * @output Exports useIcon hook for theme-aware icon lookup
+ * @output Exports useIcon hook for theme-aware icon lookup (node-valued; a
+ *   function entry is read at `{size: 'md'}`)
  * @position Client hook for components that render registry icons directly
  */
 import type { ReactNode } from 'react';
@@ -12,6 +13,9 @@ import { type IconName, type NamespacedIconName } from './globalIconRegistry.js'
  *
  * Accepts a namespaced extension key (`'richtext:bold'`) as well as a built-in
  * name; both resolve through the same registry.
+ *
+ * Returns a React node: a function entry is read at `{size: 'md'}`. Render
+ * `<Icon icon={name} />` to resolve the entry at another size.
  */
 export declare function useIcon(name: IconName | NamespacedIconName): ReactNode;
 //# sourceMappingURL=useIcon.d.ts.map

package/dist/Icon/useIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIcon.d.ts","sourceRoot":"","sources":["../../src/Icon/useIcon.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,kBAAkB,EACxB,MAAM,sBAAsB,CAAC;AAE9B;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,QAAQ,GAAG,kBAAkB,GAAG,SAAS,CAGtE"}
+{"version":3,"file":"useIcon.d.ts","sourceRoot":"","sources":["../../src/Icon/useIcon.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,kBAAkB,EACxB,MAAM,sBAAsB,CAAC;AAE9B;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,QAAQ,GAAG,kBAAkB,GAAG,SAAS,CAGtE"}

package/dist/Icon/useIcon.js

@@ -5,7 +5,8 @@
 /**
  * @file useIcon.ts
  * @input Semantic icon name
- * @output Exports useIcon hook for theme-aware icon lookup
+ * @output Exports useIcon hook for theme-aware icon lookup (node-valued; a
+ *   function entry is read at `{size: 'md'}`)
  * @position Client hook for components that render registry icons directly
  */
 import { useThemeName } from "../theme/useTheme.js";
@@ -17,6 +18,9 @@ import { getIcon } from "./globalIconRegistry.js";
  *
  * Accepts a namespaced extension key (`'richtext:bold'`) as well as a built-in
  * name; both resolve through the same registry.
+ *
+ * Returns a React node: a function entry is read at `{size: 'md'}`. Render
+ * `<Icon icon={name} />` to resolve the entry at another size.
  */
 export function useIcon(name) {
   const themeName = useThemeName();

package/dist/InputGroup/InputGroup.d.ts

@@ -83,7 +83,7 @@ export interface InputGroupProps extends Omit<BaseProps<HTMLDivElement>, 'childr
  * </InputGroup>
  * ```
  */
-export declare function InputGroup({ children, label, isLabelHidden, description, isDisabled, isOptional, isRequired, size: sizeProp, status, labelTooltip, xstyle, className, style, ref, 'data-testid': testId, ...rest }: InputGroupProps): import("react").JSX.Element;
+export declare function InputGroup({ children, label, isLabelHidden, description, isDisabled: isDisabledProp, isOptional, isRequired, size: sizeProp, status, labelTooltip, xstyle, className, style, ref, 'data-testid': testId, ...rest }: InputGroupProps): import("react").JSX.Element;
 export declare namespace InputGroup {
     var displayName: string;
 }

package/dist/InputGroup/InputGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAQ,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAGjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA0BhD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,eAAe,+BAwEjB;yBAzFe,UAAU"}
+{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAsB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG1D,OAAO,EAAQ,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAGjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA0BhD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,UAAkB,EAClB,UAAkB,EAClB,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,eAAe,+BA8EjB;yBA/Fe,UAAU"}

package/dist/InputGroup/InputGroup.js

@@ -18,7 +18,7 @@
  * - /apps/storybook/stories/InputGroup.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/InputGroup/
  */
-import { useId, useMemo } from 'react';
+import { use, useId, useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { sizeVars } from "../theme/tokens.stylex.js";
@@ -26,6 +26,7 @@ import { Field } from "../Field/index.js";
 import { SizeProvider, useSize } from "../SizeContext/SizeContext.js";
 import { mergeProps } from "../utils/index.js";
 import { InputGroupContext } from "./InputGroupContext.js";
+import { InputGroupInternalContext } from "./InputGroupInternalContext.js";
 import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
@@ -72,7 +73,7 @@ export function InputGroup({
   label,
   isLabelHidden = false,
   description,
-  isDisabled = false,
+  isDisabled: isDisabledProp = false,
   isOptional = false,
   isRequired = false,
   size: sizeProp,
@@ -85,6 +86,8 @@ export function InputGroup({
   'data-testid': testId,
   ...rest
 }) {
+  const parentGroup = use(InputGroupInternalContext);
+  const isDisabled = isDisabledProp || parentGroup.isDisabled;
   const size = useSize(sizeProp, 'md');
   const inputId = useId();
   const labelID = useId();
@@ -96,40 +99,47 @@ export function InputGroup({
     labelID,
     describedByIDs
   }), [labelID, describedByIDs]);
-  return /*#__PURE__*/_jsx(InputGroupContext, {
-    value: contextValue,
-    children: /*#__PURE__*/_jsx(SizeProvider, {
-      value: size,
-      children: /*#__PURE__*/_jsx(Field, {
-        label: label,
-        isLabelHidden: isLabelHidden,
-        description: description,
-        inputID: inputId,
-        labelID: labelID,
-        descriptionID: description ? descriptionID : undefined,
-        isGroupLabel: true,
-        isOptional: isOptional,
-        isRequired: isRequired,
-        isDisabled: isDisabled,
-        status: status ? {
-          type: status.type,
-          message: status.message,
-          messageID: status.message ? statusMessageId : undefined
-        } : undefined,
-        statusVariant: "detached",
-        labelTooltip: labelTooltip,
-        children: /*#__PURE__*/_jsx("div", {
-          ref: ref,
-          "data-testid": testId,
-          ...rest,
-          role: "group",
-          "aria-labelledby": labelID,
-          "aria-describedby": describedByIDs,
-          ...mergeProps(themeProps('input-group', {
-            size,
-            status: status?.type ?? null
-          }), stylex.props(styles.group, sizeStyles[size], isDisabled && styles.disabled, xstyle), className, style),
-          children: children
+  const internalContextValue = useMemo(() => ({
+    isDisabled
+  }), [isDisabled]);
+  return /*#__PURE__*/_jsx(InputGroupInternalContext, {
+    value: internalContextValue,
+    children: /*#__PURE__*/_jsx(InputGroupContext, {
+      value: contextValue,
+      children: /*#__PURE__*/_jsx(SizeProvider, {
+        value: size,
+        children: /*#__PURE__*/_jsx(Field, {
+          label: label,
+          isLabelHidden: isLabelHidden,
+          description: description,
+          inputID: inputId,
+          labelID: labelID,
+          descriptionID: description ? descriptionID : undefined,
+          isGroupLabel: true,
+          isOptional: isOptional,
+          isRequired: isRequired,
+          isDisabled: isDisabled,
+          status: status ? {
+            type: status.type,
+            message: status.message,
+            messageID: status.message ? statusMessageId : undefined
+          } : undefined,
+          statusVariant: "detached",
+          labelTooltip: labelTooltip,
+          children: /*#__PURE__*/_jsx("div", {
+            ref: ref,
+            "data-testid": testId,
+            ...rest,
+            role: "group",
+            "aria-disabled": isDisabled || undefined,
+            "aria-labelledby": labelID,
+            "aria-describedby": describedByIDs,
+            ...mergeProps(themeProps('input-group', {
+              size,
+              status: status?.type ?? null
+            }), stylex.props(styles.group, sizeStyles[size], isDisabled && styles.disabled, xstyle), className, style),
+            children: children
+          })
         })
       })
     })

package/dist/InputGroup/InputGroupInternalContext.d.ts

@@ -0,0 +1,4 @@
+export declare const InputGroupInternalContext: import("react").Context<{
+    isDisabled: boolean;
+}>;
+//# sourceMappingURL=InputGroupInternalContext.d.ts.map

package/dist/InputGroup/InputGroupInternalContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroupInternalContext.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroupInternalContext.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,yBAAyB;;EAAqC,CAAC"}

package/dist/InputGroup/InputGroupInternalContext.js

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file InputGroupInternalContext.ts
+ * @input Layer-scoped React context
+ * @output Package-private InputGroup state context
+ * @position Internal group state; not re-exported by index.ts
+ */
+import { createLayerScopedContext as createContext } from "../Layer/layerScopedContext.js";
+export const InputGroupInternalContext = createContext({
+  isDisabled: false
+});
+InputGroupInternalContext.displayName = 'InputGroupInternalContext';

package/dist/InputGroup/InputGroupText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroupText.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroupText.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkD5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAcrB;yBArBe,cAAc"}
+{"version":3,"file":"InputGroupText.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroupText.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmD5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAerB;yBAtBe,cAAc"}

package/dist/InputGroup/InputGroupText.js

@@ -19,6 +19,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, typographyVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
+import { inputGroupItemProps } from "./groupStyles.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   text: {
@@ -65,6 +66,7 @@ export function InputGroupText({
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
     ...rest,
+    ...inputGroupItemProps,
     ...mergeProps(themeProps('input-group-text'), stylex.props(styles.text, xstyle), className, style),
     children: children
   });

package/dist/InputGroup/groupStyles.d.ts

@@ -5,6 +5,15 @@
  * @position Shared styles consumed by InputGroup-compatible controls and addons
  */
 import * as stylex from '@stylexjs/stylex';
+/**
+ * The internal marker every InputGroup member sets on the element that carries
+ * its group styles: compatible inputs, Button addons and InputGroupText. The
+ * group's edge rules name members by it instead of a universal selector. Not
+ * public API.
+ */
+export declare const inputGroupItemProps: {
+    readonly 'data-astryx-input-group-item': "";
+};
 export declare const groupStyles: Readonly<{
     readonly buttonAddon: Readonly<{
         readonly borderStartStartRadius: stylex.StyleXClassNameFor<"borderStartStartRadius", 0 | null>;

package/dist/InputGroup/groupStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"groupStyles.d.ts","sourceRoot":"","sources":["../../src/InputGroup/groupStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAmB3C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;EAwDtB,CAAC"}
+{"version":3,"file":"groupStyles.d.ts","sourceRoot":"","sources":["../../src/InputGroup/groupStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB;;CAEtB,CAAC;AAmBX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;EAwDtB,CAAC"}

package/dist/InputGroup/groupStyles.js

@@ -11,26 +11,40 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { radiusVars, borderVars } from "../theme/tokens.stylex.js";
 
-// A grouped control may be followed by context-layer infrastructure rather
-// than another control. Popovers, inert markers, and native dialog surfaces
-// are not visual group members; skip them when finding the trailing edge.
-const IS_LAST_ITEM = ':not(:has(~ *:not([popover]):not(template):not(dialog)))';
+/**
+ * The internal marker every InputGroup member sets on the element that carries
+ * its group styles: compatible inputs, Button addons and InputGroupText. The
+ * group's edge rules name members by it instead of a universal selector. Not
+ * public API.
+ */
+export const inputGroupItemProps = {
+  'data-astryx-input-group-item': ''
+};
+const MEMBER = '[data-astryx-input-group-item]';
+
+// Anything a caller places after a member (a wrapped Button, a custom element)
+// still counts as following it, so the trailing edge keeps today's rule over
+// any sibling; only context-layer infrastructure (popovers, inert markers,
+// native dialog surfaces) is skipped. Followers are not always members, so
+// this rule cannot name them by the marker.
+const FOLLOWED = ':has(~ *:not([popover]):not(template):not(dialog))';
+const IS_LAST_ITEM = `:not(${FOLLOWED})`;
 
 // Button consumes InputGroup context anywhere below the group, including buttons
 // inside an input's own implementation. Keep the visual adaptation on direct
 // children so internal clear, calendar, and disclosure actions stay unchanged.
-const DIRECT_INPUT_GROUP_ADDON = ':where(.astryx-input-group > *)';
-const DIRECT_INPUT_GROUP_ADDON_FOCUS_VISIBLE = ':where(.astryx-input-group > *):focus-visible';
-const DIRECT_INPUT_GROUP_ADDON_NOT_FIRST = ':where(.astryx-input-group > *):not(:first-child)';
-const DIRECT_INPUT_GROUP_ADDON_WITH_MEMBER_AFTER = ':where(.astryx-input-group > *):has(~ *:not([popover]):not(template):not(dialog))';
+const DIRECT_INPUT_GROUP_ADDON = `:where(.astryx-input-group > ${MEMBER})`;
+const DIRECT_INPUT_GROUP_ADDON_FOCUS_VISIBLE = `${DIRECT_INPUT_GROUP_ADDON}:focus-visible`;
+const DIRECT_INPUT_GROUP_ADDON_NOT_FIRST = `${DIRECT_INPUT_GROUP_ADDON}:not(:first-child)`;
+const DIRECT_INPUT_GROUP_ADDON_WITH_MEMBER_AFTER = `${DIRECT_INPUT_GROUP_ADDON}${FOLLOWED}`;
 export const groupStyles = {
   buttonAddon: {
-    krdFHd: "x1epqg88",
-    kVL7Gh: "xf2wquc",
-    kfmiAY: "x2dar1b",
-    kT0f0o: "x1tgb0ru",
-    kZKoxP: "x1vonza8",
-    kY2c9j: "x1qf1n5z",
+    krdFHd: "x132ell6",
+    kVL7Gh: "x1y3chn8",
+    kfmiAY: "x1wxx7ce",
+    kT0f0o: "xiyn7wy",
+    kZKoxP: "x1y436bp",
+    kY2c9j: "xf5goe6",
     $$css: true
   },
   inGroup: {