@servicetitan/anvil2 1.44.1 → 1.45.0

package/dist/components/Popover/internal/PopoverLegacy/usePopoverLegacy.d.ts

@@ -0,0 +1,121 @@
+import { ReactNode } from 'react';
+import { Placement, UseFloatingOptions, UseDismissProps } from '@floating-ui/react';
+import { DisableCloseOnEscapeOrClickProps } from '../../../../types';
+export type PopoverLegacyProps = DisableCloseOnEscapeOrClickProps & {
+    children?: ReactNode;
+    /**
+     * Traps focus inside the floating element and outside content cannot be accessed
+     */
+    modal?: boolean;
+    /**
+     * Disables the shift of floating element
+     * @internal
+     */
+    disableShift?: boolean;
+    /**
+     * Disables the flip of floating element
+     * @internal
+     */
+    disableFlip?: boolean;
+    /**
+     * Disables the flip cross-axis fallback of floating element
+     * @internal
+     */
+    disableFlipFallback?: boolean;
+    /**
+     * Changes interaction to use hover
+     */
+    openOnHover?: boolean;
+    /**
+     * Changes height and positioning for select/combobox
+     */
+    fillAvailableHeight?: boolean;
+    maxHeight?: number | string;
+    fitScreen?: boolean;
+    minHeight?: number | string;
+    matchReferenceWidth?: boolean;
+    fixedWidth?: boolean;
+    placement?: Placement;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: UseFloatingOptions["onOpenChange"];
+    onOutsidePress?: Exclude<UseDismissProps["outsidePress"], boolean>;
+    /** This doesn't do anything for older browser */
+    delay?: number;
+    /**
+     * Fires when the floating element is requests to be closed
+     * Note: this does not fire when asTooltip is true and mouseleaves to close
+     * eg. on clickoutside, [esc] to close, or by <Popover.Close>
+     */
+    onClose?: () => void;
+    disableCaret?: boolean;
+    noPadding?: boolean;
+    disableAutoUpdate?: boolean;
+    disableFocusLock?: boolean;
+    disableTriggerFocus?: boolean;
+    root?: HTMLElement | React.MutableRefObject<HTMLElement | null> | null;
+};
+export declare function usePopoverLegacy({ defaultOpen, placement, modal, open: controlledOpen, onOpenChange: setControlledOpen, onOutsidePress, onClose, disableCloseOnClickOutside, disableCloseOnEscape, openOnHover, fillAvailableHeight, fitScreen, maxHeight, minHeight, matchReferenceWidth, fixedWidth, disableCaret, noPadding, disableShift, disableFlip, disableFlipFallback, disableAutoUpdate, disableFocusLock, disableTriggerFocus, root, }?: PopoverLegacyProps): {
+    modal: boolean | undefined;
+    labelId: string | undefined;
+    descriptionId: string | undefined;
+    setLabelId: import('react').Dispatch<import('react').SetStateAction<string | undefined>>;
+    setDescriptionId: import('react').Dispatch<import('react').SetStateAction<string | undefined>>;
+    arrowRef: import('react').MutableRefObject<null>;
+    disableCaret: boolean | undefined;
+    noPadding: boolean | undefined;
+    fillAvailableHeight: boolean | undefined;
+    maxHeight: string | number | undefined;
+    matchReferenceWidth: boolean | undefined;
+    fixedWidth: boolean | undefined;
+    disableFlipFallback: boolean | undefined;
+    disableAutoUpdate: boolean | undefined;
+    disableFocusLock: boolean | undefined;
+    disableTriggerFocus: boolean | undefined;
+    root: HTMLElement | import('react').MutableRefObject<HTMLElement | null> | null | undefined;
+    placement: Placement;
+    strategy: import('@floating-ui/react-dom').Strategy;
+    middlewareData: import('@floating-ui/react-dom').MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+    elements: {
+        reference: import('@floating-ui/react-dom').ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: Placement;
+        strategy: import('@floating-ui/react-dom').Strategy;
+        middlewareData: import('@floating-ui/react-dom').MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+        events: import('@floating-ui/react').FloatingEvents;
+        dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+        elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    };
+    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
+        active?: boolean;
+        selected?: boolean;
+    }) => Record<string, unknown>;
+    open: boolean | undefined;
+    setOpen: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+    onClose: (() => void) | undefined;
+};

package/dist/components/Popover/internal/PopoverLegacy/usePopoverLegacyContext.d.ts

@@ -0,0 +1,79 @@
+import { SetStateAction, Dispatch } from 'react';
+import { usePopoverLegacy } from './usePopoverLegacy';
+import { ThemeProviderContextProps } from '../../../../providers';
+export type PopoverLegacyContextType = (ReturnType<typeof usePopoverLegacy> & {
+    setLabelId: Dispatch<SetStateAction<string | undefined>>;
+    setDescriptionId: Dispatch<SetStateAction<string | undefined>>;
+    theme?: ThemeProviderContextProps["theme"];
+    mode?: ThemeProviderContextProps["mode"];
+}) | null;
+export declare const PopoverLegacyContext: import('react').Context<PopoverLegacyContextType>;
+export declare const usePopoverLegacyContext: () => {
+    modal: boolean | undefined;
+    labelId: string | undefined;
+    descriptionId: string | undefined;
+    setLabelId: Dispatch<SetStateAction<string | undefined>>;
+    setDescriptionId: Dispatch<SetStateAction<string | undefined>>;
+    arrowRef: import('react').MutableRefObject<null>;
+    disableCaret: boolean | undefined;
+    noPadding: boolean | undefined;
+    fillAvailableHeight: boolean | undefined;
+    maxHeight: string | number | undefined;
+    matchReferenceWidth: boolean | undefined;
+    fixedWidth: boolean | undefined;
+    disableFlipFallback: boolean | undefined;
+    disableAutoUpdate: boolean | undefined;
+    disableFocusLock: boolean | undefined;
+    disableTriggerFocus: boolean | undefined;
+    root: HTMLElement | import('react').MutableRefObject<HTMLElement | null> | null | undefined;
+    placement: import('@floating-ui/react-dom').Placement;
+    strategy: import('@floating-ui/react-dom').Strategy;
+    middlewareData: import('@floating-ui/react-dom').MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+    elements: {
+        reference: import('@floating-ui/react-dom').ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: import('@floating-ui/react-dom').Placement;
+        strategy: import('@floating-ui/react-dom').Strategy;
+        middlewareData: import('@floating-ui/react-dom').MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+        events: import('@floating-ui/react').FloatingEvents;
+        dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+        elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    };
+    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
+        active?: boolean;
+        selected?: boolean;
+    }) => Record<string, unknown>;
+    open: boolean | undefined;
+    setOpen: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+    onClose: (() => void) | undefined;
+} & {
+    setLabelId: Dispatch<SetStateAction<string | undefined>>;
+    setDescriptionId: Dispatch<SetStateAction<string | undefined>>;
+    theme?: ThemeProviderContextProps["theme"];
+    mode?: ThemeProviderContextProps["mode"];
+};

package/dist/components/Popover/internal/compareElements.d.ts

@@ -0,0 +1 @@
+export declare function compareElements(el1: HTMLElement, el2: HTMLElement, excludeAttributes?: string[]): boolean;

package/dist/components/Popover/internal/usePopoverContext.d.ts

@@ -0,0 +1,50 @@
+import { KeyboardEvent } from 'react';
+export type dataStateType = "open" | "closed";
+export declare function usePopoverContext(): {
+    invoker: {
+        ref: import('react').RefObject<HTMLButtonElement>;
+        element: HTMLElement | undefined;
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+        onClick: () => void;
+        onFocus: () => void;
+        onBlur: () => void;
+        "aria-haspopup": boolean;
+        "aria-expanded": boolean;
+        "aria-details": string;
+        "data-state": dataStateType;
+    };
+    popover: {
+        ref: import('react').RefObject<HTMLDivElement>;
+        element: HTMLElement | undefined;
+        id: string;
+        onClose: (() => void) | undefined;
+        show: () => void;
+        close: (replacementFn?: () => void) => void;
+        noPadding: boolean | undefined;
+        style: import('react').CSSProperties | undefined;
+        arrowRef: import('react').RefObject<HTMLSpanElement>;
+        key: number;
+    };
+    rootNode: Node | undefined;
+    onClose: (() => void) | undefined;
+    setOpen: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    open: boolean;
+    openOnHover: boolean | undefined;
+    controlled: boolean;
+    disableCloseOnClickOutside: boolean | undefined;
+    disableCloseOnEscape: boolean | undefined;
+    modal: boolean | undefined;
+    placement: import('@floating-ui/react-dom').Placement | undefined;
+    disableCaret: boolean | undefined;
+    noPadding: boolean | undefined;
+    fillAvailableHeight: boolean | undefined;
+    maxHeight: string | number | undefined;
+    matchReferenceWidth: boolean | undefined;
+    fixedWidth: boolean | undefined;
+    disableFlipFallback: boolean | undefined;
+    disableFocusLock: boolean | undefined;
+    disableTriggerFocus: boolean | undefined;
+    focusables: import('tabbable').FocusableElement[] | null;
+} | undefined;

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -1,20 +1,66 @@
-import { ProgressBarProps as CoreProgressBarProps } from '@servicetitan/hammer-react';
+import { ComponentPropsWithoutRef, AriaAttributes, ReactElement } from 'react';
+import { FieldLabelProps } from '../FieldLabel';
+import { HelperProps } from '../../internal/components';
+import { LayoutUtilProps } from '../../types';
 /**
  * Props for the ProgressBar component
- * @property {ReactElement | string | boolean} [error] - Error state or error message to display
- * @property {string} [errorAriaLive] - ARIA live region setting for error announcements
- * @property {string} [description] - Description text to display below the progress bar
- * @property {string} [label] - Label text for the progress bar
- * @property {object} [labelProps] - Additional props for the label component
- * @property {string} [aria-label] - Accessible label for the progress bar (alternative to label)
- * @property {string} [aria-labelledby] - ID of element that labels the progress bar (alternative to label)
- * @property {string | number} [value] - Current progress value (0-100 or 0-max)
- * @property {boolean} [indeterminate] - Whether the progress bar is in indeterminate state
- * @property {number} [max] - Maximum value for the progress bar
  * @extends Omit<ComponentPropsWithoutRef<"progress">, "value">
  * @extends LayoutUtilProps
  */
-export type ProgressBarProps = CoreProgressBarProps;
+export type ProgressBarProps = Omit<ComponentPropsWithoutRef<"progress">, "value"> & LayoutUtilProps & {
+    /**
+     * Error state or error message to display
+     * @default false
+     */
+    error?: ReactElement | string | boolean;
+    /**
+     * ARIA live region setting for error announcements
+     */
+    errorAriaLive?: HelperProps["errorAriaLive"];
+    /**
+     * Description text to display below the progress bar
+     */
+    description?: HelperProps["description"];
+} & ({
+    /**
+     * Label text for the progress bar
+     */
+    label: FieldLabelProps["children"];
+    /**
+     * Additional props for the label component
+     */
+    labelProps?: Omit<FieldLabelProps, "children" | "id" | "required">;
+} | {
+    label?: never;
+    labelProps?: never;
+    /**
+     * Accessible label for the progress bar (alternative to label)
+     */
+    ["aria-label"]: Exclude<AriaAttributes["aria-label"], undefined>;
+} | {
+    label?: never;
+    labelProps?: never;
+    /**
+     * ID of element that labels the progress bar (alternative to label)
+     */
+    ["aria-labelledby"]: Exclude<AriaAttributes["aria-labelledby"], undefined>;
+}) & ({
+    /**
+     * Current progress value (0-100 or 0-max)
+     */
+    value: `${number}` | number;
+    /**
+     * Whether the progress bar is in indeterminate state
+     * @default false
+     */
+    indeterminate?: false;
+} | {
+    value?: never;
+    /**
+     * Whether the progress bar is in indeterminate state
+     */
+    indeterminate: true;
+});
 /**
  * ProgressBar component for displaying progress indicators.
  *
@@ -26,7 +72,6 @@ export type ProgressBarProps = CoreProgressBarProps;
  * - Description text support
  * - Accessibility support with proper ARIA attributes
  * - Layout utility props for positioning and spacing
- * - Automatic tracking ID generation for analytics
  * - Flexible labeling options (label, aria-label, aria-labelledby)
  * - Error and success visual indicators
  *
@@ -52,4 +97,4 @@ export type ProgressBarProps = CoreProgressBarProps;
  *   error="Download failed"
  * />
  */
-export declare const ProgressBar: import('react').ForwardRefExoticComponent<CoreProgressBarProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ProgressBar: import('react').ForwardRefExoticComponent<ProgressBarProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Radio/Radio.d.ts

@@ -1,5 +1,5 @@
-import { RadioProps as CoreRadioProps, RadioGroupProps as CoreRadioGroupProps } from '@servicetitan/hammer-react';
-import { DataTrackingId } from '../../types/DataTrackingId';
+import { RadioProps as CoreRadioProps } from './internal/Radio';
+import { DataTrackingId } from '../../types';
 /**
  * Props for the Radio component
  * @property {boolean} [checked] - Controlled state
@@ -16,47 +16,6 @@ import { DataTrackingId } from '../../types/DataTrackingId';
  * @extends DataTrackingId
  */
 export type RadioProps = Omit<CoreRadioProps, "hideRadio"> & DataTrackingId;
-/**
- * Props for the RadioGroup component
- * @property {string | ReactElement} [legend] - Legend for the fieldset
- * @property {boolean} [required] - Required flag for label
- * @property {string} [moreInfo] - Additional information for the group
- */
-export type RadioGroupProps = CoreRadioGroupProps;
-/**
- * RadioGroup component for grouping related radio options.
- *
- * Features:
- * - Groups multiple radio options together
- * - Legend support for group labeling
- * - Required field indication
- * - Accessibility support with proper fieldset semantics
- * - Layout utility props for positioning and spacing
- * - Focus and blur event handling
- * - More info support for additional context
- * - Automatic alignment based on flex direction
- *
- * @example
- * <RadioGroup legend="Choose your preference" required>
- *   <Radio label="Option A" value="a" />
- *   <Radio label="Option B" value="b" />
- *   <Radio label="Option C" value="c" />
- * </RadioGroup>
- *
- * @example
- * <RadioGroup
- *   legend="Horizontal layout"
- *   flexDirection="row"
- *   gap="4"
- * >
- *   <Radio label="Yes" value="yes" />
- *   <Radio label="No" value="no" />
- * </RadioGroup>
- */
-export declare const RadioGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & Omit<import('@servicetitan/hammer-react').FieldLabelProps, "labelProps"> & {
-    required?: boolean;
-    legend?: string | import('react').ReactElement;
-} & import('react').RefAttributes<HTMLFieldSetElement>>;
 /**
  * Radio component for single selection from a group of options.
  *
@@ -128,7 +87,7 @@ export declare const Radio: import('react').ForwardRefExoticComponent<Omit<CoreR
      *   <Radio label="No" value="no" />
      * </RadioGroup>
      */
-    Group: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & Omit<import('@servicetitan/hammer-react').FieldLabelProps, "labelProps"> & {
+    Group: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & import('..').LayoutUtilProps & Omit<import('../../internal/types').FieldLabelProps, "labelProps"> & {
         required?: boolean;
         legend?: string | import('react').ReactElement;
     } & import('react').RefAttributes<HTMLFieldSetElement>>;

package/dist/components/Radio/RadioGroup.d.ts

@@ -0,0 +1,61 @@
+import { ComponentPropsWithoutRef, ReactElement } from 'react';
+import { LayoutUtilProps } from '../../types';
+import { FieldLabelProps } from '../../internal/types';
+/**
+ * Props for the RadioGroup component
+ * @extends ComponentPropsWithoutRef<"fieldset">
+ * @extends LayoutUtilProps
+ * @extends Omit<FieldLabelProps, "labelProps">
+ */
+export type RadioGroupProps = ComponentPropsWithoutRef<"fieldset"> & LayoutUtilProps & Omit<FieldLabelProps, "labelProps"> & {
+    /**
+     * Required flag for label
+     * @remarks This does not enforce error when nothing is selected
+     */
+    required?: boolean;
+    /**
+     * Legend for the fieldset
+     */
+    legend?: string | ReactElement;
+};
+/**
+ * RadioGroup component for grouping related radio options.
+ *
+ * Features:
+ * - Groups multiple radio options together
+ * - Legend support for group labeling
+ * - Required field indication
+ * - Accessibility support with proper fieldset semantics
+ * - Layout utility props for positioning and spacing
+ * - Focus and blur event handling
+ * - More info support for additional context
+ * - Automatic alignment based on flex direction
+ *
+ * @example
+ * <RadioGroup legend="Choose your preference" required>
+ *   <Radio label="Option A" value="a" />
+ *   <Radio label="Option B" value="b" />
+ *   <Radio label="Option C" value="c" />
+ * </RadioGroup>
+ *
+ * @example
+ * <RadioGroup
+ *   legend="Horizontal layout"
+ *   flexDirection="row"
+ *   gap="4"
+ * >
+ *   <Radio label="Yes" value="yes" />
+ *   <Radio label="No" value="no" />
+ * </RadioGroup>
+ */
+export declare const RadioGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & LayoutUtilProps & Omit<FieldLabelProps, "labelProps"> & {
+    /**
+     * Required flag for label
+     * @remarks This does not enforce error when nothing is selected
+     */
+    required?: boolean;
+    /**
+     * Legend for the fieldset
+     */
+    legend?: string | ReactElement;
+} & import('react').RefAttributes<HTMLFieldSetElement>>;

package/dist/components/Radio/index.d.ts

@@ -1,2 +1,4 @@
 export * from './Radio';
+export * from './RadioGroup';
 export { Radio as default } from './Radio';
+export { type RadioState } from './types';

package/dist/components/Radio/internal/Radio.d.ts

@@ -0,0 +1,145 @@
+import { ComponentPropsWithoutRef, ChangeEvent, ReactElement } from 'react';
+import { LayoutUtilProps, Svg } from '../../../types';
+import { HelperProps } from '../../../internal/components';
+import { RadioState } from '../types';
+/**
+ * Props for the Radio component
+ * @extends Omit<ComponentPropsWithoutRef<"input">, "onChange">
+ * @extends LayoutUtilProps
+ */
+export type RadioProps = Omit<ComponentPropsWithoutRef<"input">, "onChange"> & LayoutUtilProps & {
+    /**
+     * Controlled state
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Uncontrolled state
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Callback when radio is changed
+     */
+    onChange?: (e?: ChangeEvent<HTMLInputElement>, state?: RadioState) => void;
+    /**
+     * Label for Radio
+     * @remarks This should either be a string or have text content inside for accessibility
+     */
+    label?: ReactElement | string;
+    /**
+     * Error state for the radio
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Icon overrides for checked and unchecked states
+     */
+    icons?: {
+        /**
+         * Icon to display when radio is checked
+         */
+        checked?: Svg;
+        /**
+         * Icon to display when radio is unchecked
+         */
+        unchecked?: Svg;
+    };
+    /**
+     * Description text to display below the radio
+     */
+    description?: HelperProps["description"];
+    /**
+     * When true, hides the radio for visual users
+     * @default false
+     */
+    hideRadio?: boolean;
+};
+/**
+ * Radio component for single selection from a group of options.
+ *
+ * Features:
+ * - Supports both controlled and uncontrolled modes
+ * - Customizable icons for checked and unchecked states
+ * - Error state with visual indicators
+ * - Description text support
+ * - Accessibility support with proper ARIA attributes
+ * - Layout utility props for positioning and spacing
+ * - Optional radio hiding for visual users
+ * - Flexible labeling options
+ * - Group support via Radio.Group
+ *
+ * @example
+ * <Radio
+ *   label="Option 1"
+ *   value="option1"
+ *   checked={selectedValue === "option1"}
+ *   onChange={(e, state) => setSelectedValue(state?.value)}
+ * />
+ *
+ * @example
+ * <Radio
+ *   label="Custom styled option"
+ *   value="custom"
+ *   icons={{
+ *     checked: CustomCheckedIcon,
+ *     unchecked: CustomUncheckedIcon
+ *   }}
+ *   description="This option has custom styling"
+ * />
+ *
+ * @example
+ * <Radio.Group legend="Choose your preference" required>
+ *   <Radio label="Option A" value="a" />
+ *   <Radio label="Option B" value="b" />
+ *   <Radio label="Option C" value="c" />
+ * </Radio.Group>
+ */
+export declare const Radio: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange"> & LayoutUtilProps & {
+    /**
+     * Controlled state
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Uncontrolled state
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Callback when radio is changed
+     */
+    onChange?: (e?: ChangeEvent<HTMLInputElement>, state?: RadioState) => void;
+    /**
+     * Label for Radio
+     * @remarks This should either be a string or have text content inside for accessibility
+     */
+    label?: ReactElement | string;
+    /**
+     * Error state for the radio
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Icon overrides for checked and unchecked states
+     */
+    icons?: {
+        /**
+         * Icon to display when radio is checked
+         */
+        checked?: Svg;
+        /**
+         * Icon to display when radio is unchecked
+         */
+        unchecked?: Svg;
+    };
+    /**
+     * Description text to display below the radio
+     */
+    description?: HelperProps["description"];
+    /**
+     * When true, hides the radio for visual users
+     * @default false
+     */
+    hideRadio?: boolean;
+} & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Radio/types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * State object returned by the onChange callback
+ */
+export type RadioState = {
+    /**
+     * Whether the radio is checked
+     */
+    checked: boolean;
+    /**
+     * The value of the radio
+     */
+    value?: string | number | readonly string[];
+};