@astryxdesign/core 0.0.0-bootstrap.0 → 0.0.15

package/dist/InputGroup/InputGroup.d.ts

@@ -0,0 +1,91 @@
+/**
+ * @file InputGroup.tsx
+ * @input Uses React, StyleX, theme tokens, InputGroupContext
+ * @output Exports InputGroup component
+ * @position Groups input with prefix/suffix addons; consumed by index.ts
+ *
+ * Children (TextInput, NumberInput) consume the InputGroup context
+ * to remove their own border/radius so the group container provides
+ * the unified border treatment.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/InputGroup/InputGroup.doc.mjs
+ * - /packages/core/src/InputGroup/InputGroup.test.tsx
+ * - /packages/core/src/InputGroup/index.ts
+ * - /apps/storybook/stories/InputGroup.stories.tsx
+ * - /packages/cli/templates/blocks/components/InputGroup/
+ */
+import { type ReactNode } from 'react';
+import { type InputStatus } from '../Field';
+import type { BaseProps } from '../BaseProps';
+export type InputGroupSize = 'sm' | 'md' | 'lg';
+export interface InputGroupProps extends Omit<BaseProps<HTMLDivElement>, 'children'> {
+    /** Ref forwarded to the group container element */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Input and addon children.
+     */
+    children: ReactNode;
+    /**
+     * Label text for the group (required for accessibility).
+     */
+    label: string;
+    /**
+     * Whether to visually hide the label.
+     * @default false
+     */
+    isLabelHidden?: boolean;
+    /**
+     * Description text displayed between the label and input group.
+     */
+    description?: string;
+    /**
+     * Whether the group is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the field is optional.
+     * @default false
+     */
+    isOptional?: boolean;
+    /**
+     * Whether the field is required.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Default size for inputs in the group.
+     * @default 'md'
+     */
+    size?: InputGroupSize;
+    /**
+     * Status indicator applied to the group border.
+     */
+    status?: InputStatus;
+    /**
+     * Tooltip text at the end of the label.
+     */
+    labelTooltip?: string;
+    /**
+     * Test ID for testing frameworks.
+     */
+    'data-testid'?: string;
+}
+/**
+ * Groups an input with prefix/suffix addons in a visually connected
+ * container with shared border and focus ring.
+ *
+ * @example
+ * ```
+ * <InputGroup label="Price">
+ *   <InputGroupText>$</InputGroupText>
+ *   <TextInput label="Price" isLabelHidden value={price} onChange={setPrice} />
+ * </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 namespace InputGroup {
+    var displayName: string;
+}
+//# sourceMappingURL=InputGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;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,+BAuDjB;yBAxEe,UAAU"}

package/dist/InputGroup/InputGroup.js

@@ -0,0 +1,130 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file InputGroup.tsx
+ * @input Uses React, StyleX, theme tokens, InputGroupContext
+ * @output Exports InputGroup component
+ * @position Groups input with prefix/suffix addons; consumed by index.ts
+ *
+ * Children (TextInput, NumberInput) consume the InputGroup context
+ * to remove their own border/radius so the group container provides
+ * the unified border treatment.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/InputGroup/InputGroup.doc.mjs
+ * - /packages/core/src/InputGroup/InputGroup.test.tsx
+ * - /packages/core/src/InputGroup/index.ts
+ * - /apps/storybook/stories/InputGroup.stories.tsx
+ * - /packages/cli/templates/blocks/components/InputGroup/
+ */
+import { useId, useMemo } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { sizeVars } from "../theme/tokens.stylex.js";
+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 { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  group: {
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x1qjc9v5",
+    kWkggS: "xjbqb8w",
+    $$css: true
+  },
+  disabled: {
+    kkrTdU: "x1h6gzvc",
+    kSiTet: "xbyyjgo",
+    $$css: true
+  }
+};
+const sizeStyles = {
+  sm: {
+    kZKoxP: "x6k0iem",
+    $$css: true
+  },
+  md: {
+    kZKoxP: "x1ueg155",
+    $$css: true
+  },
+  lg: {
+    kZKoxP: "xssyfek",
+    $$css: true
+  }
+};
+/**
+ * Groups an input with prefix/suffix addons in a visually connected
+ * container with shared border and focus ring.
+ *
+ * @example
+ * ```
+ * <InputGroup label="Price">
+ *   <InputGroupText>$</InputGroupText>
+ *   <TextInput label="Price" isLabelHidden value={price} onChange={setPrice} />
+ * </InputGroup>
+ * ```
+ */
+export function InputGroup({
+  children,
+  label,
+  isLabelHidden = false,
+  description,
+  isDisabled = false,
+  isOptional = false,
+  isRequired = false,
+  size: sizeProp,
+  status,
+  labelTooltip,
+  xstyle,
+  className,
+  style,
+  ref,
+  'data-testid': testId,
+  ...rest
+}) {
+  const size = useSize(sizeProp, 'md');
+  const inputId = useId();
+  const statusMessageId = useId();
+  const contextValue = useMemo(() => ({
+    isInGroup: true
+  }), []);
+  return /*#__PURE__*/_jsx(InputGroupContext, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(SizeProvider, {
+      value: size,
+      children: /*#__PURE__*/_jsx(Field, {
+        label: label,
+        isLabelHidden: isLabelHidden,
+        description: description,
+        inputID: inputId,
+        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,
+          role: "group",
+          "aria-label": label,
+          "data-testid": testId,
+          ...rest,
+          ...mergeProps(xdsThemeProps('input-group', {
+            size,
+            status: status?.type ?? null
+          }), stylex.props(styles.group, sizeStyles[size], isDisabled && styles.disabled, xstyle), className, style),
+          children: children
+        })
+      })
+    })
+  });
+}
+InputGroup.displayName = 'InputGroup';

package/dist/InputGroup/InputGroupContext.d.ts

@@ -0,0 +1,10 @@
+export interface InputGroupContextValue {
+    isInGroup: true;
+}
+export declare const InputGroupContext: import("react").Context<InputGroupContextValue | null>;
+/**
+ * Hook for input components to detect when inside an InputGroup.
+ * Returns null when used outside a group.
+ */
+export declare function useInputGroup(): InputGroupContextValue | null;
+//# sourceMappingURL=InputGroupContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroupContext.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroupContext.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,IAAI,CAAC;CACjB;AAED,eAAO,MAAM,iBAAiB,wDACsB,CAAC;AAGrD;;;GAGG;AACH,wBAAgB,aAAa,IAAI,sBAAsB,GAAG,IAAI,CAE7D"}

package/dist/InputGroup/InputGroupContext.js

@@ -0,0 +1,21 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file InputGroupContext.ts
+ * @input None (pure context definition)
+ * @output Exports InputGroup context and useInputGroup hook
+ * @position Shared context; consumed by input components for group-aware styling
+ */
+import { createContext, use } from 'react';
+export const InputGroupContext = /*#__PURE__*/createContext(null);
+InputGroupContext.displayName = 'InputGroupContext';
+
+/**
+ * Hook for input components to detect when inside an InputGroup.
+ * Returns null when used outside a group.
+ */
+export function useInputGroup() {
+  return use(InputGroupContext);
+}

package/dist/InputGroup/InputGroupText.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @file InputGroupText.tsx
+ * @input Uses React, StyleX, theme tokens
+ * @output Exports InputGroupText component
+ * @position Text/icon element rendered inside InputGroup
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/InputGroup/InputGroup.doc.mjs
+ * - /packages/core/src/InputGroup/index.ts
+ * - /packages/cli/templates/blocks/components/InputGroup/
+ */
+import React, { type ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+export interface InputGroupTextProps extends BaseProps<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Content to render in the text slot.
+     * Can be text or an icon.
+     */
+    children: ReactNode;
+}
+/**
+ * A prefix or suffix text element for use inside InputGroup.
+ *
+ * @example
+ * ```
+ * <InputGroup label="URL">
+ *   <InputGroupText>https://</InputGroupText>
+ *   <TextInput label="URL" isLabelHidden value={url} onChange={setUrl} />
+ * </InputGroup>
+ * ```
+ */
+export declare function InputGroupText({ ref, children, xstyle, className, style, ...rest }: InputGroupTextProps): React.JSX.Element;
+export declare namespace InputGroupText {
+    var displayName: string;
+}
+//# sourceMappingURL=InputGroupText.d.ts.map

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

@@ -0,0 +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"}

package/dist/InputGroup/InputGroupText.js

@@ -0,0 +1,72 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file InputGroupText.tsx
+ * @input Uses React, StyleX, theme tokens
+ * @output Exports InputGroupText component
+ * @position Text/icon element rendered inside InputGroup
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/InputGroup/InputGroup.doc.mjs
+ * - /packages/core/src/InputGroup/index.ts
+ * - /packages/cli/templates/blocks/components/InputGroup/
+ */
+import React from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, radiusVars, typographyVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
+import { mergeProps } from "../utils/index.js";
+import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  text: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kg3NbH: "xf314gf",
+    kWkggS: "xwmxj5m",
+    kMv6JI: "x9ynric",
+    kGuDYH: "xjm74w1",
+    kLWn49: "xw6l6zx",
+    kMwMTN: "xv1l7n4",
+    khDVqt: "xuxw1ft",
+    kmuXW: "x2lah0s",
+    kMzoRj: "x1litavf",
+    ksu8eU: "x1y0btm7",
+    kVAM5u: "xvy26l8",
+    keTefX: "xd10s4z x1pwwqoy",
+    krdFHd: "x15mokao x8eehn2",
+    kVL7Gh: "xbiv7yw x1xrp5p4",
+    kfmiAY: "x1ga7v0g x11xp8u1",
+    kT0f0o: "x16uus16 x747jw7",
+    $$css: true
+  }
+};
+/**
+ * A prefix or suffix text element for use inside InputGroup.
+ *
+ * @example
+ * ```
+ * <InputGroup label="URL">
+ *   <InputGroupText>https://</InputGroupText>
+ *   <TextInput label="URL" isLabelHidden value={url} onChange={setUrl} />
+ * </InputGroup>
+ * ```
+ */
+export function InputGroupText({
+  ref,
+  children,
+  xstyle,
+  className,
+  style,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    ...rest,
+    ...mergeProps(xdsThemeProps('input-group-text'), stylex.props(styles.text, xstyle), className, style),
+    children: children
+  });
+}
+InputGroupText.displayName = 'InputGroupText';

package/dist/InputGroup/groupStyles.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @file groupStyles.ts
+ * @input Uses StyleX, theme tokens
+ * @output Exports shared group-aware styles for input components
+ * @position Shared styles consumed by TextInput, NumberInput when inside an InputGroup
+ */
+import * as stylex from '@stylexjs/stylex';
+export declare const groupStyles: Readonly<{
+    readonly inGroup: Readonly<{
+        readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly height: stylex.StyleXClassNameFor<"height", "100%">;
+        readonly marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", 0 | `calc(-1 * ${stylex.StyleXVar<"1px">})`>;
+        readonly borderStartStartRadius: stylex.StyleXClassNameFor<"borderStartStartRadius", 0 | "8px">;
+        readonly borderEndStartRadius: stylex.StyleXClassNameFor<"borderEndStartRadius", 0 | "8px">;
+        readonly borderStartEndRadius: stylex.StyleXClassNameFor<"borderStartEndRadius", 0 | "8px">;
+        readonly borderEndEndRadius: stylex.StyleXClassNameFor<"borderEndEndRadius", 0 | "8px">;
+        readonly ':focus-within': stylex.StyleXClassNameFor<":focus-within", {
+            readonly zIndex: 1;
+        }>;
+    }>;
+}>;
+//# sourceMappingURL=groupStyles.d.ts.map

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

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

package/dist/InputGroup/groupStyles.js

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file groupStyles.ts
+ * @input Uses StyleX, theme tokens
+ * @output Exports shared group-aware styles for input components
+ * @position Shared styles consumed by TextInput, NumberInput when inside an InputGroup
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { radiusVars, borderVars } from "../theme/tokens.stylex.js";
+export const groupStyles = {
+  inGroup: {
+    kUk6DE: "x98rzlu",
+    k7Eaqz: "xeuugli",
+    kZKoxP: "x5yr21d",
+    keTefX: "xd10s4z x1pwwqoy",
+    krdFHd: "x15mokao x8eehn2",
+    kVL7Gh: "xbiv7yw x1xrp5p4",
+    kfmiAY: "x1ga7v0g x11xp8u1",
+    kT0f0o: "x16uus16 x747jw7",
+    kXnDq0: "x1rm9qnc",
+    $$css: true
+  }
+};

package/dist/InputGroup/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @file index.ts
+ * @input Imports from InputGroup.tsx, InputGroupText.tsx, InputGroupContext.ts
+ * @output Exports InputGroup, InputGroupText, context hook, and types
+ * @position Component entry point; re-exported by /packages/core/src/index.ts
+ */
+export { InputGroup } from './InputGroup';
+export type { InputGroupProps, InputGroupSize } from './InputGroup';
+export { InputGroupText } from './InputGroupText';
+export type { InputGroupTextProps } from './InputGroupText';
+export { useInputGroup } from './InputGroupContext';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InputGroup/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EAAC,eAAe,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAElE,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAE1D,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC"}

package/dist/InputGroup/index.js

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Imports from InputGroup.tsx, InputGroupText.tsx, InputGroupContext.ts
+ * @output Exports InputGroup, InputGroupText, context hook, and types
+ * @position Component entry point; re-exported by /packages/core/src/index.ts
+ */
+export { InputGroup } from "./InputGroup.js";
+export { InputGroupText } from "./InputGroupText.js";
+export { useInputGroup } from "./InputGroupContext.js";

package/dist/InteractiveRoleContext/InteractiveRoleContext.d.ts

@@ -0,0 +1,22 @@
+import type { InteractiveRole } from '../hooks/useInteractiveRole';
+/**
+ * Context that provides a role override to child components.
+ *
+ * Provided by containers that need their child to be interactive:
+ * - Popover → 'button' (click to open popover)
+ * - DropdownMenu → 'button' (click to open menu)
+ * - Any future component that wraps an optionally-interactive trigger
+ *
+ * `null` means no parent is overriding — resolve based on own props.
+ */
+export declare const InteractiveRoleContext: import("react").Context<InteractiveRole | null>;
+/**
+ * Read the role override from context, if any.
+ *
+ * Most components should use `useInteractiveRole` instead of calling
+ * this directly — it incorporates this signal alongside href/onClick.
+ *
+ * @returns The overridden role, or `null` if no parent is providing one.
+ */
+export declare function useInteractiveRoleContext(): InteractiveRole | null;
+//# sourceMappingURL=InteractiveRoleContext.d.ts.map

package/dist/InteractiveRoleContext/InteractiveRoleContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractiveRoleContext.d.ts","sourceRoot":"","sources":["../../src/InteractiveRoleContext/InteractiveRoleContext.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAC;AAEjE;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB,iDACU,CAAC;AAG9C;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,IAAI,eAAe,GAAG,IAAI,CAElE"}

package/dist/InteractiveRoleContext/InteractiveRoleContext.js

@@ -0,0 +1,49 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file InteractiveRoleContext.ts
+ * @input React createContext, use
+ * @output Exports InteractiveRoleContext, useInteractiveRoleContext
+ * @position Context primitive; consumed by useInteractiveRole hook
+ *
+ * Provides a role override to optionally-interactive child components.
+ * When a parent (Popover, DropdownMenu, etc.) needs its child to render
+ * as a button, it wraps the child in this context with role = 'button'.
+ *
+ * Components don't consume this directly — they use `useInteractiveRole`
+ * which checks this context as one of its decision inputs.
+ *
+ * Follows the same pattern as SizeContext:
+ *   SizeContext provides size → useSize resolves it
+ *   InteractiveRoleContext provides role → useInteractiveRole resolves it
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/InteractiveRoleContext/index.ts
+ */
+import { createContext, use } from 'react';
+/**
+ * Context that provides a role override to child components.
+ *
+ * Provided by containers that need their child to be interactive:
+ * - Popover → 'button' (click to open popover)
+ * - DropdownMenu → 'button' (click to open menu)
+ * - Any future component that wraps an optionally-interactive trigger
+ *
+ * `null` means no parent is overriding — resolve based on own props.
+ */
+export const InteractiveRoleContext = /*#__PURE__*/createContext(null);
+InteractiveRoleContext.displayName = 'InteractiveRoleContext';
+
+/**
+ * Read the role override from context, if any.
+ *
+ * Most components should use `useInteractiveRole` instead of calling
+ * this directly — it incorporates this signal alongside href/onClick.
+ *
+ * @returns The overridden role, or `null` if no parent is providing one.
+ */
+export function useInteractiveRoleContext() {
+  return use(InteractiveRoleContext);
+}

package/dist/InteractiveRoleContext/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @file index.ts
+ * @input InteractiveRoleContext
+ * @output Exports InteractiveRoleContext module public API
+ * @position Entry point for InteractiveRoleContext module
+ */
+export { InteractiveRoleContext, useInteractiveRoleContext, } from './InteractiveRoleContext';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InteractiveRoleContext/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EACL,sBAAsB,EACtB,yBAAyB,GAC1B,MAAM,0BAA0B,CAAC"}

package/dist/InteractiveRoleContext/index.js

@@ -0,0 +1,11 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input InteractiveRoleContext
+ * @output Exports InteractiveRoleContext module public API
+ * @position Entry point for InteractiveRoleContext module
+ */
+export { InteractiveRoleContext, useInteractiveRoleContext } from "./InteractiveRoleContext.js";