@moondreamsdev/dreamer-ui 1.7.10-test.99 → 1.7.12

package/dist/src/components/error-boundary/ErrorBoundary.d.ts

@@ -1,25 +1,48 @@
 import { ErrorInfo, ReactNode } from 'react';
 import { ErrorBoundaryVariants } from './variants';
 export interface ErrorBoundaryProps {
-    /** The id of the ErrorBoundary. */
+    /** The HTML id attribute for the error boundary */
     id?: string;
-    /** The variant of the ErrorBoundary. */
+    /** The visual style variant of the error boundary */
     variant?: ErrorBoundaryVariants;
-    /** Whether to show a retry button. */
+    /** Whether to show a retry button in the error fallback UI */
     showRetry?: boolean;
-    /** Custom error message to display. */
+    /** Custom error message to display in the fallback UI */
     fallbackMessage?: string;
-    /** Custom fallback UI to render on error. */
+    /** Custom fallback UI to render on error instead of the default error display */
     fallback?: ReactNode;
-    /** Callback function when retry is clicked. */
+    /** Callback function executed when the retry button is clicked */
     onRetry?: () => void;
-    /** Callback function when error occurs. */
+    /** Callback function when error occurs */
     onError?: (error: Error, errorInfo: ErrorInfo) => void;
-    /** Additional classes to apply to the ErrorBoundary container. */
+    /** Additional classes to apply to the ErrorBoundary container */
     className?: string;
-    /** The children to render inside the ErrorBoundary. */
+    /** The children to render inside the ErrorBoundary */
     children: ReactNode;
     /** Flag to indicate if the app is in development mode. For showing error details in development mode */
     inDevEnv?: boolean;
 }
+/**
+ * A React error boundary component that catches JavaScript errors in child components
+ * and displays a fallback UI instead of crashing the entire application.
+ *
+ * @example
+ * ```tsx
+ * // Basic error boundary
+ * <ErrorBoundary>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ *
+ * // With custom error handling and retry
+ * <ErrorBoundary
+ *   variant="warning"
+ *   fallbackMessage="Failed to load user profile"
+ *   onError={(error) => logError(error)}
+ *   onRetry={() => refetchUserData()}
+ *   inDevEnv={process.env.NODE_ENV === 'development'}
+ * >
+ *   <UserProfile />
+ * </ErrorBoundary>
+ * ```
+ */
 export declare function ErrorBoundary({ id, variant, showRetry, fallbackMessage, fallback, onRetry, onError, className, children, inDevEnv, }: ErrorBoundaryProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/form/Form.d.ts

@@ -0,0 +1,28 @@
+import { FormData, FormProps } from './types';
+import { FormVariants } from './variants';
+export interface FormComponentProps<T extends FormData = FormData> extends FormProps<T>, Partial<FormVariants> {
+}
+/**
+ * A comprehensive form component with built-in validation, responsive layouts,
+ * and support for various field types (input, textarea, select, checkbox, radio).
+ *
+ * @example
+ * ```tsx
+ * // Define form fields - should be stable (memoized or declared outside component)
+ * const userForm = [
+ *   { __type: 'input', name: 'name', label: 'Full Name', required: true },
+ *   { __type: 'input', name: 'email', type: 'email', label: 'Email', required: true },
+ *   { __type: 'textarea', name: 'bio', label: 'Bio', rows: 4 },
+ *   { __type: 'checkbox', name: 'subscribe', text: 'Subscribe to newsletter' }
+ * ];
+ *
+ * // Usage
+ * <Form
+ *   form={userForm}
+ *   columns={2}
+ *   onSubmit={(data) => saveUser(data)}
+ *   submitButton={<Button type="submit">Save User</Button>}
+ * />
+ * ```
+ */
+export declare function Form<T extends FormData = FormData>({ form, initialData, onDataChange, onSubmit, submitButton, columns, responsive, spacing, className, id, ref, }: FormComponentProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/form/factories.d.ts

@@ -0,0 +1,8 @@
+import { FormInputField, FormTextareaField, FormSelectField, FormCheckboxField, FormRadioField } from './types';
+export declare const FormFactories: {
+    input: (field: Omit<FormInputField, '__type'>) => FormInputField;
+    textarea: (field: Omit<FormTextareaField, '__type'>) => FormTextareaField;
+    select: (field: Omit<FormSelectField, '__type'>) => FormSelectField;
+    checkbox: (field: Omit<FormCheckboxField, '__type'>) => FormCheckboxField;
+    radio: (field: Omit<FormRadioField, '__type'>) => FormRadioField;
+};

package/dist/src/components/form/hooks.d.ts

@@ -0,0 +1,9 @@
+import { FormField, FormData, FormErrors } from './types';
+export declare function useFormValidation(fields: FormField[], data: FormData): {
+    errors: FormErrors;
+    hasErrors: boolean;
+    isFormValid: boolean;
+    validateForm: (currentData?: FormData) => boolean;
+    validateSingleField: (fieldName: string, value: any) => boolean | undefined;
+    clearErrors: () => void;
+};

package/dist/src/components/form/index.d.ts

@@ -0,0 +1,3 @@
+export { FormFactories } from './factories';
+export { Form, type FormComponentProps } from './Form';
+export type { FormCheckboxField, FormData, FormErrors, FormField, FormFieldType, FormInputField, FormProps, FormRadioField, FormSelectField, FormTextareaField, } from './types';

package/dist/src/components/form/types.d.ts

@@ -0,0 +1,91 @@
+import React from 'react';
+export type FormFieldType = 'input' | 'textarea' | 'select' | 'checkbox' | 'radio';
+interface ValidationResult {
+    valid: boolean;
+    message?: string;
+}
+export type IsValidFunc<T> = (value: T) => ValidationResult;
+export interface BaseFormField {
+    __type: FormFieldType;
+    name: string;
+    label: string;
+    description?: string;
+    required?: boolean;
+    disabled?: boolean;
+    colSpan?: 1 | 2 | 3 | 4 | 'full';
+    className?: string;
+}
+export interface FormInputField extends BaseFormField {
+    __type: 'input';
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+    placeholder?: string;
+    variant?: 'base' | 'default' | 'underline' | 'outline';
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    isValid?: IsValidFunc<string>;
+}
+export interface FormTextareaField extends BaseFormField {
+    __type: 'textarea';
+    placeholder?: string;
+    variant?: 'base' | 'left-line' | 'outline';
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    rows?: number;
+    autoExpand?: boolean;
+    characterLimit?: number;
+    isValid?: IsValidFunc<string>;
+}
+export interface FormSelectField extends BaseFormField {
+    __type: 'select';
+    options: Array<{
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }>;
+    placeholder?: string;
+    searchable?: boolean;
+    clearable?: boolean;
+    isValid?: IsValidFunc<string | undefined>;
+}
+export interface FormCheckboxField extends BaseFormField {
+    __type: 'checkbox';
+    text?: string;
+    isValid?: IsValidFunc<boolean>;
+}
+export interface FormRadioField extends BaseFormField {
+    __type: 'radio';
+    options: Array<{
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }>;
+    isValid?: IsValidFunc<string>;
+}
+export type FormField = FormInputField | FormTextareaField | FormSelectField | FormCheckboxField | FormRadioField;
+export interface FormData {
+    [key: string]: any;
+}
+export interface FormErrors {
+    [key: string]: string;
+}
+export interface FormProps<T extends FormData = FormData> {
+    /** Array of form fields created using FormFactories. */
+    form: FormField[];
+    /** Initial data to populate the form fields. */
+    initialData?: T;
+    /** Callback fired when form data changes. */
+    onDataChange?: (data: T) => void;
+    /** Callback fired when form is submitted with valid data. */
+    onSubmit?: (data: T) => void;
+    /** Submit button element to render at the bottom of the form. */
+    submitButton?: React.ReactNode;
+    /** Additional CSS classes to apply to the form. */
+    className?: string;
+    /** The HTML id attribute for the form. */
+    id?: string;
+    /** Reference to the form element. */
+    ref?: React.Ref<HTMLFormElement>;
+    /** Number of columns in the form grid layout. */
+    columns?: 1 | 2 | 3 | 4;
+    /** Whether to collapse to single column on mobile devices. */
+    responsive?: boolean;
+}
+export {};

package/dist/src/components/form/variants.d.ts

@@ -0,0 +1,32 @@
+export declare const formVariants: {
+    readonly spacing: {
+        readonly tight: "gap-3";
+        readonly normal: "gap-4";
+        readonly loose: "gap-6";
+    };
+    readonly columns: {
+        readonly 1: "grid-cols-1";
+        readonly 2: "grid-cols-1 md:grid-cols-2";
+        readonly 3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
+        readonly 4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4";
+    };
+    readonly colSpan: {
+        readonly 1: "col-span-1";
+        readonly 2: "col-span-1 md:col-span-2";
+        readonly 3: "col-span-1 md:col-span-2 lg:col-span-3";
+        readonly 4: "col-span-1 md:col-span-2 lg:col-span-4";
+        readonly full: "col-span-full";
+    };
+};
+export type FormSpacing = keyof typeof formVariants.spacing;
+export type FormColumns = keyof typeof formVariants.columns;
+export type FormColSpan = keyof typeof formVariants.colSpan;
+export interface FormVariants {
+    /** Spacing between form fields. */
+    spacing: FormSpacing;
+    /** Number of columns in the form grid layout. */
+    columns?: FormColumns;
+    /** Whether to collapse to single column on mobile devices. */
+    responsive?: boolean;
+}
+export declare const formDefaults: FormVariants;

package/dist/src/components/help-icon/HelpIcon.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { TooltipProps } from '../tooltip';
+export interface HelpIconProps extends Omit<TooltipProps, 'children'> {
+    /** HTML id attribute for the help icon. */
+    id?: string;
+    /** Ref for the icon element. */
+    ref?: React.Ref<HTMLDivElement>;
+    /** The design variant of the help icon. */
+    design?: 'filled' | 'outlined';
+    /** The size of the help icon. */
+    iconSize?: number;
+    /** Additional CSS classes to apply to the icon container. */
+    className?: string;
+}
+/**
+ * A help icon component that combines the InfoCircled icon with a tooltip for displaying contextual help information.
+ * Supports both filled and outlined design variants with multiple size options.
+ *
+ * @example
+ * ```tsx
+ * // Basic help icon with tooltip
+ * <HelpIcon message="This field is required for account verification" />
+ *
+ * // Custom design and size
+ * <HelpIcon
+ *   message="Click here for more information about pricing"
+ *   design="outlined"
+ *   iconSize={20}
+ *   placement="bottom"
+ * />
+ *
+ * // Rich content tooltip
+ * <HelpIcon
+ *   message={
+ *     <div>
+ *       <p className="font-semibold mb-1">Password Requirements</p>
+ *       <ul className="text-xs space-y-1">
+ *         <li>• At least 8 characters</li>
+ *         <li>• One uppercase letter</li>
+ *         <li>• One number or symbol</li>
+ *       </ul>
+ *     </div>
+ *   }
+ *   className="ml-2"
+ * />
+ * ```
+ */
+export declare function HelpIcon({ id, ref, design, iconSize, className, ...tooltipProps }: HelpIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/help-icon/index.d.ts

@@ -0,0 +1 @@
+export { HelpIcon, type HelpIconProps } from './HelpIcon';

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

@@ -3,6 +3,7 @@ export * from './actionmodal';
 export * from './avatar';
 export * from './badge';
 export * from './button';
+export * from './calendar';
 export * from './callout';
 export * from './card';
 export * from './carousel';
@@ -13,7 +14,10 @@ export * from './code-block';
 export * from './disclosure';
 export * from './drawer';
 export * from './dropdown-menu';
+export * from './dynamic-list';
 export * from './error-boundary';
+export * from './form';
+export * from './help-icon';
 export * from './input';
 export * from './label';
 export * from './modal';
@@ -26,7 +30,7 @@ export * from './select';
 export * from './separator';
 export * from './skeleton';
 export * from './slider';
-export * from './slot';
+export * from './table';
 export * from './tabs';
 export * from './textarea';
 export * from './toast';

package/dist/src/components/input/Input.d.ts

@@ -2,9 +2,39 @@ import { Ref } from 'react';
 import './styles.css';
 import { InputVariants } from './variants';
 export interface InputProps extends Partial<InputVariants>, React.InputHTMLAttributes<HTMLInputElement> {
+    /** Reference to the input element. */
     ref?: Ref<HTMLInputElement>;
+    /** Whether the input is in read-only display mode. */
     displayOnlyMode?: boolean;
+    /** Error message to display below the input when invalid. */
     errorMessage?: string;
+    /** Success message to display below the input when valid. */
     successMessage?: string;
 }
+/**
+ * A versatile input component with support for various types, validation states,
+ * and password visibility toggle. Includes error/success message display.
+ *
+ * @example
+ * ```tsx
+ * // Basic input
+ * <Input
+ *   placeholder="Enter your name"
+ *   value={name}
+ *   onChange={(e) => setName(e.target.value)}
+ * />
+ *
+ * // Password input with validation
+ * <Input
+ *   type="password"
+ *   placeholder="Enter password"
+ *   errorMessage={passwordError}
+ *   variant="outline"
+ *   rounded="lg"
+ * />
+ *
+ * // Read-only display mode
+ * <Input value="John Doe" displayOnlyMode />
+ * ```
+ */
 export declare function Input({ variant, rounded, displayOnlyMode, errorMessage, successMessage, type, className, ...rest }: InputProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/input/variants.d.ts

@@ -14,7 +14,9 @@ export declare const roundedVariants: {
 };
 export type InputRounded = keyof typeof roundedVariants;
 export interface InputVariants {
+    /** The visual style variant of the input. */
     variant: InputVariant;
+    /** The border radius of the input. */
     rounded: InputRounded;
 }
 export declare const inputDefaults: InputVariants;

package/dist/src/components/label/Label.d.ts

@@ -1,10 +1,43 @@
 import React from 'react';
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /** The display type of the label. */
     display?: 'block' | 'inline';
+    /** The width of the label element. */
     width?: React.CSSProperties['width'];
+    /** Whether to show a required indicator (*) next to the label. */
     required?: boolean;
+    /** Help text to display in a tooltip next to the label. */
     helpMessage?: string;
+    /** Additional content to display after the label text. */
     suffix?: React.ReactNode;
+    /** Description text to display below the label. */
     description?: string;
 }
+/**
+ * A form label component with support for required indicators, help tooltips,
+ * and description text. Provides accessibility features for form elements.
+ *
+ * @example
+ * ```tsx
+ * // Basic label
+ * <Label htmlFor="email">Email Address</Label>
+ *
+ * // Required field with description
+ * <Label
+ *   htmlFor="password"
+ *   required
+ *   description="Must be at least 8 characters"
+ * >
+ *   Password
+ * </Label>
+ *
+ * // With help tooltip
+ * <Label
+ *   htmlFor="username"
+ *   helpMessage="Username will be visible to other users"
+ * >
+ *   Display Name
+ * </Label>
+ * ```
+ */
 export declare function Label({ display, width, className, required, helpMessage, suffix, htmlFor, children, description, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/modal/Modal.d.ts

@@ -1,22 +1,68 @@
 import React from 'react';
 import { ButtonProps } from '../button';
 interface ModalAction extends Omit<ButtonProps, 'children'> {
+    /** The text label for the action button. */
     label: string;
 }
 export interface ModalProps {
+    /** Optional ID for the modal element. */
     id?: string;
+    /** Whether the modal is open. */
     isOpen: boolean;
+    /** Callback fired when the modal should close. */
     onClose: () => void;
+    /** Optional title for the modal header. */
     title?: React.ReactNode;
+    /** The content to display inside the modal. */
     children: React.ReactNode;
+    /** When true, renders only the children with no default modal styling. */
     contentOnly?: boolean;
+    /** Additional CSS classes to apply to the modal content. */
     className?: string;
+    /** Additional CSS classes to apply to the backdrop overlay. */
     overlayClassName?: string;
+    /** Additional CSS classes to apply to the modal container. */
+    containerClassName?: string;
+    /** Whether to hide the X close button in the top-right corner. */
     hideCloseButton?: boolean;
+    /** Array of action buttons to display at the bottom of the modal. */
     actions?: ModalAction[];
+    /** Whether clicking the backdrop/overlay closes the modal. */
     disableCloseOnOverlayClick?: boolean;
+    /** ID of an element that labels the modal. */
     ariaLabelledBy?: string;
+    /** ID of an element that describes the modal. */
     ariaDescribedBy?: string;
 }
-export declare function Modal({ id, isOpen, onClose, title, children, contentOnly, className, overlayClassName, hideCloseButton, actions, disableCloseOnOverlayClick, ariaLabelledBy, ariaDescribedBy, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * A flexible modal dialog component with focus management, animation, and action buttons.
+ * Supports both styled and content-only modes with comprehensive accessibility features.
+ *
+ * @example
+ * ```tsx
+ * // Basic modal
+ * <Modal
+ *   isOpen={showModal}
+ *   onClose={() => setShowModal(false)}
+ *   title="Confirm Action"
+ * >
+ *   <p>Are you sure you want to proceed?</p>
+ * </Modal>
+ *
+ * // Modal with actions
+ * <Modal
+ *   isOpen={showDeleteModal}
+ *   onClose={handleClose}
+ *   title="Delete Item"
+ *   actions={[
+ *     { label: "Cancel", variant: "secondary", onClick: handleClose },
+ *     { label: "Delete", variant: "destructive", onClick: handleDelete }
+ *   ]}
+ *   disableCloseOnOverlayClick
+ * >
+ *   <p>This action cannot be undone.</p>
+ * </Modal>
+ * ```
+ */
+export declare function Modal({ id, isOpen, onClose, title, children, contentOnly, className, overlayClassName, containerClassName, hideCloseButton, actions, disableCloseOnOverlayClick, ariaLabelledBy, ariaDescribedBy, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/src/components/pagination/Pagination.d.ts

@@ -1,23 +1,55 @@
 import React from 'react';
 import { PaginationSize, PaginationVariant } from './variants';
 export interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** The current page number (1-indexed) */
+    /** The current active page (1-indexed) */
     page: number;
     /** Total number of pages. Use Infinity for infinite pagination */
     pageCount?: number;
     /** Maximum number of page buttons to show */
     maxVisiblePages?: number;
-    /** Show first and last page buttons */
+    /** Whether to show first and last page buttons */
     showFirstLast?: boolean;
     /** Button variant style */
     variant?: PaginationVariant;
     /** Button size */
     size?: PaginationSize;
-    /** Callback when page changes */
+    /** Callback fired when the page changes */
     onPageChange: (page: number) => void;
     /** Ref for the pagination container */
     ref?: React.Ref<HTMLDivElement>;
-    /** Additional class names for the button elements */
+    /** Additional CSS classes for the button elements */
     buttonsClassName?: string;
 }
+/**
+ * A pagination component for navigating through multiple pages of content.
+ * Supports both finite and infinite pagination with customizable appearance.
+ *
+ * @example
+ * ```tsx
+ * // Basic pagination
+ * <Pagination
+ *   page={currentPage}
+ *   pageCount={totalPages}
+ *   onPageChange={setCurrentPage}
+ * />
+ *
+ * // Infinite pagination
+ * <Pagination
+ *   page={currentPage}
+ *   pageCount={Infinity}
+ *   onPageChange={handlePageChange}
+ *   showFirstLast={false}
+ * />
+ *
+ * // Customized appearance
+ * <Pagination
+ *   page={currentPage}
+ *   pageCount={100}
+ *   maxVisiblePages={7}
+ *   variant="outline"
+ *   size="lg"
+ *   onPageChange={setCurrentPage}
+ * />
+ * ```
+ */
 export declare function Pagination({ page, pageCount, maxVisiblePages, showFirstLast, onPageChange, size, variant, className, ref, buttonsClassName, ...rest }: PaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/popover/Popover.d.ts

@@ -1,20 +1,70 @@
 import React from 'react';
 import { PopoverAlignment, PopoverPlacement } from './variants';
 export interface PopoverProps {
+    /** Unique identifier for the popover */
     id?: string;
+    /** Reference to the popover element */
     ref?: React.Ref<HTMLDivElement>;
+    /** Whether the popover is open (controlled) */
     isOpen?: boolean;
+    /** Callback fired when the open state changes */
     onOpenChange?: (open: boolean) => void;
+    /** The content to display in the popover */
     children: React.ReactNode;
+    /** The element that triggers the popover */
     trigger: React.ReactElement;
+    /** The preferred side of the trigger to render against */
     placement?: PopoverPlacement;
+    /** The preferred alignment against the trigger */
     alignment?: PopoverAlignment;
+    /** Additional CSS classes to apply to the popover content */
     className?: string;
+    /** Whether to close popover when clicking outside */
     closeOnOverlayClick?: boolean;
+    /** Whether to close popover when clicking the trigger again */
     closeOnTriggerClick?: boolean;
-    /** Offset of the popover from the trigger element in pixel */
+    /** Offset of the popover from the trigger element in pixels */
     offset?: number;
-    /** Automatically switch placement to opposite side if there is not enough space in the viewport */
+    /** Automatically switch placement to opposite side if there is not enough space */
     autoSwitchPlacement?: boolean;
+    /** Enable hover behavior - shows on hover, hides 200ms after mouse leaves */
+    hoverable?: boolean;
 }
-export declare function Popover({ id, ref, isOpen, onOpenChange, children, className, closeOnOverlayClick, trigger, placement, alignment, closeOnTriggerClick, offset, autoSwitchPlacement, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * A floating content container that appears relative to a trigger element.
+ * Supports hover and click interactions with intelligent positioning and focus management.
+ *
+ * @example
+ * ```tsx
+ * // Basic popover
+ * <Popover
+ *   trigger={<Button>Click me</Button>}
+ *   placement="bottom"
+ * >
+ *   <div className="p-4">
+ *     <h3>Popover Content</h3>
+ *     <p>This is the popover content.</p>
+ *   </div>
+ * </Popover>
+ *
+ * // Hover popover
+ * <Popover
+ *   trigger={<span>Hover me</span>}
+ *   hoverable
+ *   placement="top"
+ *   alignment="start"
+ * >
+ *   <div className="p-2 text-sm">Tooltip-like content</div>
+ * </Popover>
+ *
+ * // Controlled popover
+ * <Popover
+ *   trigger={<Button>Controlled</Button>}
+ *   isOpen={showPopover}
+ *   onOpenChange={setShowPopover}
+ * >
+ *   <PopoverMenu />
+ * </Popover>
+ * ```
+ */
+export declare function Popover({ id, ref, isOpen, onOpenChange, children, className, closeOnOverlayClick, trigger, placement, alignment, closeOnTriggerClick, offset, autoSwitchPlacement, hoverable, }: PopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/radiogroup/RadioGroup.d.ts

@@ -7,13 +7,46 @@ export type RadioOption = {
     description?: string;
 };
 export type RadioGroupProps = {
+    /** Array of option objects or strings. RadioOption: { label: string, value: string, disabled?: boolean, description?: string } */
     options?: (string | RadioOption)[];
+    /** The current selected value (controlled). */
     value: string | undefined;
+    /** Callback fired when the selected value changes. */
     onChange: (value: string) => void;
+    /** The id for the radio group element. */
     id?: string;
+    /** RadioGroupItem components when using the component approach. */
     children?: React.ReactElement<RadioGroupItemProps>[] | React.ReactElement<RadioGroupItemProps>;
+    /** Additional CSS classes to apply to the radio group. */
     className?: string;
+    /** Additional CSS classes to apply to each radio item. */
     childrenClassName?: string;
+    /** Whether to hide the native radio input elements. */
     hideInputs?: boolean;
 };
+/**
+ * A radio button group component for selecting one option from multiple choices.
+ * Supports both array-based options and RadioGroupItem child components.
+ *
+ * @example
+ * ```tsx
+ * // Using options array
+ * <RadioGroup
+ *   options={[
+ *     { label: 'Small', value: 's', description: 'Perfect for personal use' },
+ *     { label: 'Medium', value: 'm' },
+ *     { label: 'Large', value: 'l', disabled: true }
+ *   ]}
+ *   value={selectedSize}
+ *   onChange={setSelectedSize}
+ * />
+ *
+ * // Using child components
+ * <RadioGroup value={color} onChange={setColor}>
+ *   <RadioGroupItem value="red">Red</RadioGroupItem>
+ *   <RadioGroupItem value="blue">Blue</RadioGroupItem>
+ *   <RadioGroupItem value="green">Green</RadioGroupItem>
+ * </RadioGroup>
+ * ```
+ */
 export declare function RadioGroup({ options, value, onChange, id, children, className, childrenClassName, hideInputs, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;