@pharos-ds/core 0.1.9

package/dist/Icon/globalIconRegistry.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @file globalIconRegistry.tsx
+ * @input None (pure module-level state)
+ * @output Exports registerIcons, getIconRegistry, getIcon, resetIcons, IconName, IconRegistry
+ * @position Global icon registry; works in both server and client environments
+ *
+ * This module has NO 'use client' directive — it's importable from RSC.
+ * All components use getIcon() to resolve icons from this global registry.
+ */
+import type { ReactNode } from 'react';
+/**
+ * Semantic icon names used internally by Pharos components.
+ *
+ * These represent the functional purpose of each icon, not a specific
+ * visual representation. Themes provide the actual icon components.
+ */
+export type IconName = 'close' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'check' | 'success' | 'error' | 'warning' | 'info' | 'calendar' | 'clock' | 'externalLink' | 'menu' | 'moreHorizontal' | 'search' | 'arrowUp' | 'arrowDown' | 'arrowsUpDown' | 'funnel' | 'eyeSlash' | 'viewColumns' | 'copy' | 'checkDouble' | 'wrench' | 'stop' | 'microphone';
+/**
+ * Icon registry mapping semantic names to React nodes.
+ */
+export type IconRegistry = Record<IconName, ReactNode>;
+/**
+ * Register icons at the module level. Works in both server and client
+ * environments. Call once at app initialization (e.g. root layout).
+ *
+ * Icons registered here are available to all components — including
+ * server-rendered ones that can't access React Context.
+ *
+ * @example
+ * ```
+ * import { registerIcons } from '@pharos-ds/core';
+ * import { brandIcons } from './brand-icons';
+ * registerIcons(brandIcons);
+ * ```
+ */
+export declare function registerIcons(icons: Partial<IconRegistry>): void;
+/**
+ * Get a snapshot of the full icon registry, with registered icons overriding
+ * built-in defaults.
+ *
+ * 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.
+ */
+export declare function getIconRegistry(): Readonly<IconRegistry>;
+/**
+ * Get an icon by name from the global registry, falling back to defaults.
+ *
+ * Works in both server and client environments.
+ * Falls back to built-in default icons when no override is registered.
+ */
+export declare function getIcon(name: IconName): ReactNode;
+/**
+ * Reset the global registry. For testing only.
+ * @internal
+ */
+export declare function resetIcons(): void;
+//# sourceMappingURL=globalIconRegistry.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"globalIconRegistry.d.ts","sourceRoot":"","sources":["../../src/Icon/globalIconRegistry.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAOrC;;;;;GAKG;AAEH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,aAAa,GACb,aAAa,GACb,cAAc,GACd,OAAO,GACP,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,GACN,UAAU,GACV,OAAO,GACP,cAAc,GACd,MAAM,GACN,gBAAgB,GAChB,QAAQ,GACR,SAAS,GACT,WAAW,GACX,cAAc,GACd,QAAQ,GACR,UAAU,GACV,aAAa,GACb,MAAM,GACN,aAAa,GACb,QAAQ,GACR,MAAM,GACN,YAAY,CAAC;AAEjB;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;AAQvD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAEhE;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,IAAI,QAAQ,CAAC,YAAY,CAAC,CAQxD;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS,CAEjD;AAED;;;GAGG;AACH,wBAAgB,UAAU,IAAI,IAAI,CAEjC"}

package/dist/Icon/globalIconRegistry.js

@@ -0,0 +1,92 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file globalIconRegistry.tsx
+ * @input None (pure module-level state)
+ * @output Exports registerIcons, getIconRegistry, getIcon, resetIcons, IconName, IconRegistry
+ * @position Global icon registry; works in both server and client environments
+ *
+ * This module has NO 'use client' directive — it's importable from RSC.
+ * All components use getIcon() to resolve icons from this global registry.
+ */
+
+import { defaultIcons } from "./defaultIcons.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Semantic icon names used internally by Pharos components.
+ *
+ * These represent the functional purpose of each icon, not a specific
+ * visual representation. Themes provide the actual icon components.
+ */
+// SYNC: packages/cli/docs/icons.doc.mjs — update USAGE_HINTS when adding names
+
+/**
+ * Icon registry mapping semantic names to React nodes.
+ */
+
+// =============================================================================
+// Global Registry
+// =============================================================================
+
+let globalRegistry = {};
+
+/**
+ * Register icons at the module level. Works in both server and client
+ * environments. Call once at app initialization (e.g. root layout).
+ *
+ * Icons registered here are available to all components — including
+ * server-rendered ones that can't access React Context.
+ *
+ * @example
+ * ```
+ * import { registerIcons } from '@pharos-ds/core';
+ * import { brandIcons } from './brand-icons';
+ * registerIcons(brandIcons);
+ * ```
+ */
+export function registerIcons(icons) {
+  globalRegistry = {
+    ...globalRegistry,
+    ...icons
+  };
+}
+
+/**
+ * Get a snapshot of the full icon registry, with registered icons overriding
+ * built-in defaults.
+ *
+ * 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.
+ */
+export function getIconRegistry() {
+  const registry = {
+    ...defaultIcons
+  };
+  for (const name of Object.keys(globalRegistry)) {
+    registry[name] = globalRegistry[name] ?? defaultIcons[name];
+  }
+  return registry;
+}
+
+/**
+ * Get an icon by name from the global registry, falling back to defaults.
+ *
+ * Works in both server and client environments.
+ * Falls back to built-in default icons when no override is registered.
+ */
+export function getIcon(name) {
+  return globalRegistry[name] ?? defaultIcons[name];
+}
+
+/**
+ * Reset the global registry. For testing only.
+ * @internal
+ */
+export function resetIcons() {
+  globalRegistry = {};
+}

package/dist/Icon/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @file index.ts
+ * @input Imports Icon component/types, icon registry, and global registration
+ * @output Exports Icon, icon registry helpers, registerIcons, getIconRegistry, getIcon
+ * @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
+ */
+export { Icon, renderIconSlot } from './Icon';
+export type { IconProps, IconColor, IconSize, IconType } from './Icon';
+export { registerIcons, getIconRegistry, getIcon, resetIcons, } from './globalIconRegistry';
+export type { IconName, IconRegistry } from './globalIconRegistry';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,YAAY,EAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,QAAQ,CAAC;AAGrE,OAAO,EACL,aAAa,EACb,eAAe,EACf,OAAO,EACP,UAAU,GACX,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAC,QAAQ,EAAE,YAAY,EAAC,MAAM,sBAAsB,CAAC"}

package/dist/Icon/index.js

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Imports Icon component/types, icon registry, and global registration
+ * @output Exports Icon, icon registry helpers, registerIcons, getIconRegistry, getIcon
+ * @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
+ */
+export { Icon, renderIconSlot } from "./Icon.js";
+// Global registry (RSC-compatible, no 'use client')
+export { registerIcons, getIconRegistry, getIcon, resetIcons } from "./globalIconRegistry.js";

package/dist/IconButton/IconButton.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @file IconButton.tsx
+ * @input Uses Button, ButtonProps
+ * @output Exports IconButton component, IconButtonProps type
+ * @position Composition wrapper over Button for icon-only buttons
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/IconButton/IconButton.doc.mjs (props table, features)
+ * - /packages/core/src/IconButton/IconButton.test.tsx (tests)
+ * - /packages/core/src/IconButton/index.ts (exports if types change)
+ * - /apps/storybook/stories/IconButton.stories.tsx (storybook stories)
+ * - /packages/cli/templates/blocks/components/IconButton/ (showcase blocks)
+ */
+import type { ReactNode } from 'react';
+import type { ButtonProps } from '../Button/Button';
+/**
+ * Props for IconButton.
+ *
+ * Omits `isIconOnly` (always true), `children` and `endContent` (not applicable
+ * for icon-only buttons). `icon` is required.
+ */
+export interface IconButtonProps extends Omit<ButtonProps, 'isIconOnly' | 'children' | 'endContent'> {
+    /** Icon element rendered inside the button (required). */
+    icon: ReactNode;
+}
+/**
+ * An icon-only button — a thin wrapper around Button with `isIconOnly`
+ * always set to true.
+ *
+ * Use this instead of `<Button isIconOnly>` for explicit, greppable,
+ * and codemod-safe icon-only button usage.
+ *
+ * @example
+ * ```
+ * <IconButton label="Settings" icon={<GearIcon />} variant="ghost" />
+ * <IconButton label="Delete" icon={<TrashIcon />} variant="destructive" />
+ * <IconButton label="Emoji" icon={<span>🚀</span>} variant="ghost" size="sm" />
+ * ```
+ */
+export declare function IconButton({ icon, ...props }: IconButtonProps): ReactNode;
+export declare namespace IconButton {
+    var displayName: string;
+}
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/IconButton/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAElD;;;;;GAKG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,WAAW,EACX,YAAY,GAAG,UAAU,GAAG,YAAY,CACzC;IACC,0DAA0D;IAC1D,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,EAAC,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,eAAe,GAAG,SAAS,CAEvE;yBAFe,UAAU"}

package/dist/IconButton/IconButton.js

@@ -0,0 +1,51 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file IconButton.tsx
+ * @input Uses Button, ButtonProps
+ * @output Exports IconButton component, IconButtonProps type
+ * @position Composition wrapper over Button for icon-only buttons
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/IconButton/IconButton.doc.mjs (props table, features)
+ * - /packages/core/src/IconButton/IconButton.test.tsx (tests)
+ * - /packages/core/src/IconButton/index.ts (exports if types change)
+ * - /apps/storybook/stories/IconButton.stories.tsx (storybook stories)
+ * - /packages/cli/templates/blocks/components/IconButton/ (showcase blocks)
+ */
+import { Button } from "../Button/Button.js";
+
+/**
+ * Props for IconButton.
+ *
+ * Omits `isIconOnly` (always true), `children` and `endContent` (not applicable
+ * for icon-only buttons). `icon` is required.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * An icon-only button — a thin wrapper around Button with `isIconOnly`
+ * always set to true.
+ *
+ * Use this instead of `<Button isIconOnly>` for explicit, greppable,
+ * and codemod-safe icon-only button usage.
+ *
+ * @example
+ * ```
+ * <IconButton label="Settings" icon={<GearIcon />} variant="ghost" />
+ * <IconButton label="Delete" icon={<TrashIcon />} variant="destructive" />
+ * <IconButton label="Emoji" icon={<span>🚀</span>} variant="ghost" size="sm" />
+ * ```
+ */
+export function IconButton({
+  icon,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Button, {
+    ...props,
+    icon: icon,
+    isIconOnly: true
+  });
+}
+IconButton.displayName = 'IconButton';

package/dist/IconButton/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @file index.ts
+ * @input Imports IconButton component and types from IconButton.tsx
+ * @output Exports IconButton, IconButtonProps
+ * @position Component entry point; re-exported by /packages/core/src/index.ts
+ *
+ * SYNC: When modified, update this header and /packages/core/src/IconButton/IconButton.doc.mjs
+ */
+export { IconButton } from './IconButton';
+export type { IconButtonProps } from './IconButton';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/IconButton/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC"}

package/dist/IconButton/index.js

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Imports IconButton component and types from IconButton.tsx
+ * @output Exports IconButton, IconButtonProps
+ * @position Component entry point; re-exported by /packages/core/src/index.ts
+ *
+ * SYNC: When modified, update this header and /packages/core/src/IconButton/IconButton.doc.mjs
+ */
+export { IconButton } from "./IconButton.js";

package/dist/InputGroup/InputGroup.d.ts

@@ -0,0 +1,92 @@
+/**
+ * @file InputGroup.tsx
+ * @input Uses React, StyleX, theme tokens, InputGroupContext, Field
+ * @output Exports InputGroup component with group label/description ARIA wiring
+ * @position Groups input with prefix/suffix addons; consumed by index.ts
+ *
+ * Children (TextInput, NumberInput, TimeInput, DateInput, Typeahead,
+ * Selector, MultiSelector) 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;;;;;;;;;;;;;;;;;GAiBG;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"}

package/dist/InputGroup/InputGroup.js

@@ -0,0 +1,140 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file InputGroup.tsx
+ * @input Uses React, StyleX, theme tokens, InputGroupContext, Field
+ * @output Exports InputGroup component with group label/description ARIA wiring
+ * @position Groups input with prefix/suffix addons; consumed by index.ts
+ *
+ * Children (TextInput, NumberInput, TimeInput, DateInput, Typeahead,
+ * Selector, MultiSelector) 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 { themeProps } from "../utils/themeProps.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 labelID = useId();
+  const descriptionID = useId();
+  const statusMessageId = useId();
+  const describedByIDs = [description ? descriptionID : null, status?.message ? statusMessageId : null].filter(Boolean).join(' ') || undefined;
+  const contextValue = useMemo(() => ({
+    isInGroup: true,
+    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
+        })
+      })
+    })
+  });
+}
+InputGroup.displayName = 'InputGroup';

package/dist/InputGroup/InputGroupContext.d.ts

@@ -0,0 +1,14 @@
+export interface InputGroupContextValue {
+    isInGroup: true;
+    /** ID of the group label element, for aria-labelledby composition. */
+    labelID: string;
+    /** IDs of helper/status text owned by the group, for aria-describedby composition. */
+    describedByIDs?: string;
+}
+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;IAChB,sEAAsE;IACtE,OAAO,EAAE,MAAM,CAAC;IAChB,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,iBAAiB,wDAE7B,CAAC;AAGF;;;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 React createContext/use
+ * @output Exports InputGroup context and useInputGroup hook
+ * @position Shared context; consumed by input components for group-aware styling and ARIA associations
+ */
+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"}