@adoptaunabuelo/react-components 0.3.146 → 0.3.147

package/dist/esm/components/Avatar/Avatar.d.ts

@@ -1,10 +1,29 @@
 import { ComponentPropsWithoutRef } from "react";
 declare const Avatar: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default Avatar;
+/**
+ * Circular avatar component supporting images, initials, and file upload.
+ * Click to view full-size image or to upload new one when editable.
+ *
+ * @example
+ * ```tsx
+ * <Avatar
+ *   icon={userImageUrl}
+ *   name="John Doe"
+ *   editable
+ *   onChange={(file) => uploadAvatar(file)}
+ * />
+ * ```
+ */
 export interface Props extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    /** Image URL to display */
     icon?: string;
+    /** User name (displays first letter as fallback when no icon) */
     name?: string;
+    /** Enable file upload on click (accepts jpg, jpeg, png, gif) */
     editable?: boolean;
+    /** Enable click to view full-size image in modal */
     clickable?: boolean;
+    /** Callback fired when new image is selected, receives base64-encoded file */
     onChange?: (file: string | ArrayBuffer | null) => void;
 }

package/dist/esm/components/BreadCrumb/BreadCrumb.d.ts

@@ -1,7 +1,18 @@
 import { ComponentPropsWithoutRef } from "react";
 declare const BreadCrumb: ({ steps, selectedStep, ...restProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BreadCrumb;
+/**
+ * Step indicator component displaying circular dots to show progress through a multi-step flow.
+ * Highlights the current active step with primary color.
+ *
+ * @example
+ * ```tsx
+ * <BreadCrumb steps={4} selectedStep={1} />
+ * ```
+ */
 export interface Props extends ComponentPropsWithoutRef<"div"> {
+    /** Current active step index (0-based) */
     selectedStep?: number;
+    /** Total number of steps to display */
     steps: number;
 }

package/dist/esm/components/Button/Button.d.ts

@@ -1,17 +1,36 @@
 import React, { ComponentPropsWithoutRef } from "react";
 declare const Button: ({ design, onSuccess, ...restProps }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;
+/**
+ * Button component with multiple visual variants and built-in loading/success states.
+ *
+ * @example
+ * ```tsx
+ * <Button design="primary" loading={isLoading}>
+ *   Submit
+ * </Button>
+ * ```
+ */
 export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+    /** Visual variant: `primary` for main actions, `secondary` for less emphasis, `text` for minimal style, `image` for icon-only, `call-to-action` for prominent CTAs */
     design?: "primary" | "secondary" | "text" | "image" | "call-to-action";
+    /** Button size: `normal` (default) or `small` for compact layouts */
     size?: "small" | "normal";
     icon?: React.ReactElement;
     iconPosition?: "left" | "right";
+    /** Shows animated loading spinner (Lottie animation) */
     loading?: boolean;
     disabled?: boolean;
+    /** Triggers success animation (Lottie checkmark) */
     success?: boolean;
+    /** Delay in milliseconds before showing loading animation */
     animationDelay?: number;
+    /** Duration in milliseconds for success animation before callback */
     animationTime?: number;
+    /** Time in seconds to display countdown on button */
     countdown?: number;
+    /** Callback fired when success animation completes */
     onSuccess?: (success: boolean) => void;
+    /** Callback fired when countdown reaches zero */
     onCountdownEnd?: () => void;
 }

package/dist/esm/components/CellSelector/CellSelector.d.ts

@@ -1,20 +1,48 @@
 import { CSSProperties, ReactElement } from "react";
 declare const CellSelector: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default CellSelector;
+/**
+ * Grid of selectable cells with icons, titles, and optional subtitles.
+ * Supports single or multiple selection with visual feedback and hover states.
+ *
+ * @example
+ * ```tsx
+ * <CellSelector
+ *   type="multiple"
+ *   options={[
+ *     { id: "1", title: "Option 1", icon: <Icon />, subtitle: "Description" },
+ *     { id: "2", title: "Option 2", icon: <Icon />, disabled: true }
+ *   ]}
+ *   selectedOptions={selected}
+ *   onChange={(items) => setSelected(items)}
+ * />
+ * ```
+ */
 export interface Props {
     style?: CSSProperties;
+    /** Custom styles applied to each cell */
     cellStyle?: CSSProperties;
+    /** Array of selectable cell options */
     options: Array<OptionProps>;
+    /** Currently selected options (controlled component) */
     selectedOptions?: Array<OptionProps>;
+    /** Selection mode: `single` for radio behavior, `multiple` for checkboxes */
     type?: "single" | "multiple";
+    /** Callback fired when selection changes, receives array of selected options */
     onChange?: (array: Array<OptionProps>) => void;
+    /** Callback fired when individual cell is clicked */
     onClick?: (item: OptionProps) => void;
+    /** Visual design variant */
     design?: "design1" | "design2";
 }
 export interface OptionProps {
     id: string;
+    /** Main title displayed in the cell */
     title: string;
+    /** Optional subtitle displayed below the cell */
     subtitle?: string;
+    /** Icon displayed at the top of the cell */
     icon?: ReactElement;
+    /** Disables cell interaction and applies opacity */
     disabled?: boolean;
 }

package/dist/esm/components/Chat/Chat.d.ts

@@ -3,17 +3,36 @@ import { ChatMessageProps } from "./ChatBubble";
 import "./ChatBubble.css";
 declare const Chat: (props: ChatProps) => import("react/jsx-runtime").JSX.Element;
 export default Chat;
+/**
+ * Full-featured chat interface with message history, template support, and media uploads.
+ * Automatically groups messages by date and shows template prompt when last message is > 24 hours old.
+ *
+ * @example
+ * ```tsx
+ * <Chat
+ *   messages={chatMessages}
+ *   templates={messageTemplates}
+ *   loading={isSending}
+ *   onSend={(data) => handleSendMessage(data)}
+ * />
+ * ```
+ */
 export interface ChatProps {
     style?: CSSProperties;
+    /** Array of chat messages to display, grouped automatically by date */
     messages: ChatMessageProps[];
+    /** Shows loading spinner in input when true */
     loading?: boolean;
+    /** Placeholder text for the input field */
     placeholder?: string;
+    /** Available message templates shown when conversation is inactive (>24 hrs) */
     templates: {
         id: string;
         title: string;
         subtitle: string;
         description: string;
     }[];
+    /** Callback fired when user sends a message, template, or uploads media */
     onSend: (data: {
         text?: string;
         template?: string;

package/dist/esm/components/Checkbox/CheckboxList.d.ts

@@ -9,18 +9,43 @@ export type CheckboxOption = {
     error?: boolean;
     [key: string]: string | React.ReactElement | boolean | undefined;
 };
+/**
+ * Checkbox list component supporting single or multiple selection modes.
+ * Renders a collection of checkboxes with optional labels, icons, and custom elements.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxList
+ *   type="multiple"
+ *   options={[
+ *     { id: "1", label: "Option 1" },
+ *     { id: "2", label: "Option 2", sublabel: "Description" }
+ *   ]}
+ *   onChange={(selected) => console.log(selected)}
+ * />
+ * ```
+ */
 export interface Props {
     style?: CSSProperties;
+    /** Custom styles applied to each individual checkbox element */
     elementStyle?: CSSProperties;
     options: Array<CheckboxOption>;
+    /** Pre-selected options (controlled component pattern) */
     selectedOptions?: Array<{
         id: string;
     }>;
+    /** Height in pixels for each checkbox */
     height?: number;
+    /** Width in pixels for each checkbox */
     width?: number;
+    /** Selection mode: `single` for radio-like behavior, `multiple` for checkboxes */
     type: "single" | "multiple";
+    /** Callback fired when selection changes, receives array of selected options */
     onChange?: (result: Array<CheckboxOption>) => void;
+    /** Position of the checkbox indicator relative to content */
     position?: "left" | "right";
+    /** Show avatar-style circular checkboxes */
     avatarEnabled?: boolean;
+    /** Visual shape of the checkbox indicator */
     shape?: "circle" | "square";
 }

package/dist/esm/components/Countdown/Countdown.d.ts

@@ -2,8 +2,25 @@ import { ComponentPropsWithoutRef } from "react";
 import "moment/locale/es";
 declare const Countdown: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default Countdown;
+/**
+ * Countdown timer displaying human-readable time remaining or elapsed.
+ * Auto-warns with red background when less than 2 hours remain.
+ *
+ * @example
+ * ```tsx
+ * <Countdown
+ *   toDate={new Date("2024-12-31")}
+ *   color={ColorV2.surface.primary}
+ *   textColor={ColorV2.text.white}
+ * />
+ * // Shows: "3 días restantes" or "2 horas de retraso"
+ * ```
+ */
 export interface Props extends ComponentPropsWithoutRef<"div"> {
+    /** Target date to count down to (or count up from if past) */
     toDate: Date;
+    /** Background color (overridden by warning red when <2h remain) */
     color?: string;
+    /** Text and icon color (overridden by white when warning) */
     textColor?: string;
 }

package/dist/esm/components/Counter/Counter.d.ts

@@ -1,11 +1,32 @@
 declare function Counter(props: Props): import("react/jsx-runtime").JSX.Element;
 export default Counter;
+/**
+ * Animated flip-clock style counter that animates from zero to the target amount.
+ * Each digit flips individually with a smooth animation effect.
+ *
+ * @example
+ * ```tsx
+ * <Counter
+ *   amount={12345}
+ *   height={60}
+ *   width={40}
+ *   fontSize={32}
+ * />
+ * ```
+ */
 export interface Props {
+    /** Height in pixels for each digit block */
     height: number;
+    /** Width in pixels for each digit block */
     width: number;
+    /** Target number to count up to (animates from amount-10 or 0) */
     amount: number;
+    /** Text color for the digits */
     color?: string;
+    /** Background color for each digit block */
     backgroundColor?: string;
+    /** Border/divider color between digit segments */
     borderColor?: string;
+    /** Font size in pixels for the numbers */
     fontSize?: number;
 }

package/dist/esm/components/CurrencySelector/CurrencySelector.d.ts

@@ -1,13 +1,36 @@
 declare const CurrencySelector: (props: CurrencySelectorProps) => import("react/jsx-runtime").JSX.Element;
 export default CurrencySelector;
+/**
+ * Currency selector dropdown with modal for choosing from available currencies.
+ * Displays symbol and currency code (e.g., "€ EUR"). Responsive with full-screen modal on mobile.
+ *
+ * @example
+ * ```tsx
+ * <CurrencySelector
+ *   options={[
+ *     { currency: "EUR", name: "Euro", symbol: "€" },
+ *     { currency: "USD", name: "US Dollar", symbol: "$" },
+ *     { currency: "GBP", name: "British Pound", symbol: "£" }
+ *   ]}
+ *   selectedOption={{ currency: "EUR", name: "Euro", symbol: "€" }}
+ *   onChange={(option) => setCurrency(option.currency)}
+ * />
+ * ```
+ */
 export interface CurrencySelectorProps {
     style?: React.CSSProperties;
+    /** Available currency options */
     options: CurrencySelectorOption[];
+    /** Currently selected currency (defaults to first option) */
     selectedOption?: CurrencySelectorOption;
+    /** Callback when currency is selected */
     onChange?: (option: CurrencySelectorOption) => void;
 }
 interface CurrencySelectorOption {
+    /** ISO currency code (e.g., "EUR", "USD") */
     currency: string;
+    /** Full currency name (e.g., "Euro") */
     name: string;
+    /** Currency symbol (e.g., "€", "$") */
     symbol: string;
 }

package/dist/esm/components/Dropdown/Dropdown.d.ts

@@ -1,21 +1,50 @@
 import { CSSProperties } from "react";
 declare const Dropdown: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default Dropdown;
+/**
+ * Dropdown select with optional search, multi-select, and icon support.
+ * Auto-closes when clicking outside. Displays selected items as comma-separated text.
+ *
+ * @example
+ * ```tsx
+ * <Dropdown
+ *   id="category-dropdown"
+ *   placeholder="Select categories"
+ *   type="multiple"
+ *   options={categories}
+ *   selectedOptions={selected}
+ *   onSearchChange={(text) => filterOptions(text)}
+ *   onChange={(items) => setSelected(items)}
+ * />
+ * ```
+ */
 export interface Props {
+    /** Unique identifier required for click-outside detection */
     id: string;
     style?: CSSProperties;
+    /** Custom styles for the dropdown menu container */
     menuStyle?: CSSProperties;
+    /** Custom styles for individual option items */
     optionStyle?: CSSProperties;
+    /** Array of selectable options */
     options: Array<OptionProps>;
+    /** Placeholder text shown when nothing is selected */
     placeholder: string;
+    /** Currently selected options (controlled component) */
     selectedOptions?: Array<OptionProps>;
+    /** Selection mode: `single` for one item, `multiple` for checkboxes */
     type?: "single" | "multiple";
+    /** Position of dropdown menu relative to trigger */
     menuPosition?: "bottom" | "top";
+    /** Callback fired when selection changes */
     onChange?: (a: Array<OptionProps>) => void;
+    /** Callback fired when search input changes, enables search functionality */
     onSearchChange?: (text: string) => void;
 }
 export interface OptionProps {
     id: string;
+    /** Display text for the option */
     title?: string;
+    /** Optional icon displayed before title */
     icon?: React.ReactElement;
 }

package/dist/esm/components/FAQs/FAQs.d.ts

@@ -1,12 +1,34 @@
 import { CSSProperties } from "react";
 declare const FAQs: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default FAQs;
+/**
+ * FAQ accordion component with expandable/collapsible question-answer pairs.
+ * Only one question can be expanded at a time.
+ *
+ * @example
+ * ```tsx
+ * <FAQs
+ *   options={[
+ *     {
+ *       id: "1",
+ *       title: "How do I get started?",
+ *       description: "To get started, simply..."
+ *     }
+ *   ]}
+ *   onClick={(index) => trackFaqClick(index)}
+ * />
+ * ```
+ */
 export interface Props {
     style?: CSSProperties;
+    /** Array of FAQ items with question and answer */
     options: Array<{
         id: string;
+        /** Question text (always visible) */
         title: string;
+        /** Answer text (visible when expanded) */
         description: string;
     }>;
+    /** Callback fired when FAQ item is clicked, receives item index */
     onClick?: (index: number) => void;
 }

package/dist/esm/components/Feedback/Feedback.d.ts

@@ -1,12 +1,34 @@
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 declare const FeedBack: ({ type, text, isVisible, ...props }: FeedBackProps) => import("react/jsx-runtime").JSX.Element | null;
 export default FeedBack;
+/**
+ * Toast-style feedback notification with slide-in/out animation.
+ * Auto-dismisses after specified duration. Supports success, error, and custom types.
+ *
+ * @example
+ * ```tsx
+ * <Feedback
+ *   type="success"
+ *   text="Changes saved successfully"
+ *   isVisible={showFeedback}
+ *   closeAfter={5000}
+ *   onClose={() => setShowFeedback(false)}
+ * />
+ * ```
+ */
 export interface FeedBackProps extends ComponentPropsWithoutRef<"div"> {
+    /** Controls visibility (triggers show/hide animation) */
     isVisible: boolean;
+    /** Visual variant: `success` (green with check), `error` (red with X), `custom` (use your own icon/color) */
     type: "success" | "error" | "custom";
+    /** Custom icon for `type="custom"` */
     icon?: ReactNode;
+    /** Message text to display */
     text: string;
+    /** Auto-dismiss duration in milliseconds (default: 3000) */
     closeAfter?: number;
+    /** Show manual close button */
     showClose?: boolean;
+    /** Callback fired when dismissed (auto or manual) */
     onClose?: () => void;
 }

package/dist/esm/components/Filter/Filter.d.ts

@@ -2,4 +2,17 @@ import { FilterCheckboxProps, FilterCheckboxRef } from "./FilterCheckbox";
 import { FilterDateProps, FilterDateRef } from "./FilterDate";
 import { FilterRatioProps, FilterRatioRef } from "./FilterRatio";
 declare const Filter: import("react").ForwardRefExoticComponent<(FilterCheckboxProps | FilterDateProps | FilterRatioProps) & import("react").RefAttributes<FilterCheckboxRef | FilterDateRef | FilterRatioRef>>;
+/**
+ * Filter component router supporting three types: checkbox (multi-select), ratio (range slider), and date (date picker).
+ * Each type has its own variant implementation with specific props.
+ *
+ * @example
+ * ```tsx
+ * <Filter
+ *   type="checkbox"
+ *   options={filterOptions}
+ *   onChange={(selected) => applyFilters(selected)}
+ * />
+ * ```
+ */
 export default Filter;

package/dist/esm/components/Form/Form.d.ts

@@ -1,7 +1,22 @@
 import { LocationFormProps } from "./LocationForm";
 declare const Form: (props: FormProps & LocationFormProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Form;
+/**
+ * Form router component (currently only supports location type).
+ * Delegates to specific form implementations based on type.
+ *
+ * @example
+ * ```tsx
+ * <Form
+ *   type="location"
+ *   isLoaded={isGoogleMapsLoaded}
+ *   onChange={(location) => setLocation(location)}
+ * />
+ * ```
+ */
 export interface FormProps {
+    /** Form type to render */
     type: "location";
+    /** Whether Google Maps API is loaded (required for location form) */
     isLoaded: boolean;
 }

package/dist/esm/components/Hover/Hover.d.ts

@@ -1,6 +1,18 @@
 import { ComponentPropsWithoutRef } from "react";
 declare const Hover: ({ children, modalProps, ...props }: HoverProps) => import("react/jsx-runtime").JSX.Element;
 export default Hover;
+/**
+ * Hover trigger component that displays content on hover.
+ * Content appears below the trigger element with shadow and border.
+ *
+ * @example
+ * ```tsx
+ * <Hover modalProps={{ children: <div>Hover content here</div> }}>
+ *   <button>Hover over me</button>
+ * </Hover>
+ * ```
+ */
 export interface HoverProps extends ComponentPropsWithoutRef<"div"> {
+    /** Props for the hover content container (including children to display) */
     modalProps: React.ComponentProps<"div">;
 }

package/dist/esm/components/Input/Basic/Input.d.ts

@@ -2,13 +2,30 @@ import { InputPrimaryProps } from "./InputPrimary";
 import { InputSecondaryProps } from "./InputSecondary";
 import { InputThirdProps } from "./InputThird";
 declare const Input: import("react").ForwardRefExoticComponent<(Omit<InputPrimaryProps & {
+    /** Input type: determines keyboard type and validation on mobile devices */
     type?: "text" | "email" | "date" | "password" | "time" | "number";
 }, "ref"> | Omit<InputSecondaryProps & {
+    /** Input type: determines keyboard type and validation on mobile devices */
     type?: "text" | "email" | "date" | "password" | "time" | "number";
 }, "ref"> | Omit<InputThirdProps & {
+    /** Input type: determines keyboard type and validation on mobile devices */
     type?: "text" | "email" | "date" | "password" | "time" | "number";
 }, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
 export default Input;
+/**
+ * Text input component with three visual design variants.
+ * Supports all native HTML input attributes plus custom styling and error handling.
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   design="secondary"
+ *   placeholder="Enter your email"
+ *   error="Invalid email format"
+ * />
+ * ```
+ */
 export type InputProps = (InputPrimaryProps | InputSecondaryProps | InputThirdProps) & {
+    /** Input type: determines keyboard type and validation on mobile devices */
     type?: "text" | "email" | "date" | "password" | "time" | "number";
 };

package/dist/esm/components/Input/Basic/InputPrimary.d.ts

@@ -3,8 +3,11 @@ import { InputStyledProps } from "./InputStyled";
 declare const InputPrimary: import("react").ForwardRefExoticComponent<Omit<InputPrimaryProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default InputPrimary;
 export interface InputPrimaryProps extends InputStyledProps {
+    /** Custom React element to display on the left side of the input (e.g., icon, prefix) */
     LeftContent?: ReactElement;
+    /** Custom CSS properties for the outer container wrapper */
     containerStyle?: CSSProperties;
+    /** Error message displayed below the input in red text */
     error?: string | undefined;
     design?: "primary";
 }

package/dist/esm/components/Input/Basic/InputSecondary.d.ts

@@ -3,8 +3,11 @@ import { InputStyledProps } from "./InputStyled";
 declare const InputSecondary: import("react").ForwardRefExoticComponent<Omit<InputSecondaryProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default InputSecondary;
 export interface InputSecondaryProps extends InputStyledProps {
+    /** Custom React element to display on the left side of the input (e.g., icon, prefix) */
     LeftContent?: ReactElement;
+    /** Custom CSS properties for the outer container wrapper */
     containerStyle?: CSSProperties;
+    /** Error message displayed below the input in red text */
     error?: string | undefined;
     design?: "secondary";
 }

package/dist/esm/components/Input/Basic/InputThird.d.ts

@@ -3,8 +3,11 @@ import { InputStyledProps } from "./InputStyled";
 declare const InputThird: import("react").ForwardRefExoticComponent<Omit<InputThirdProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default InputThird;
 export interface InputThirdProps extends InputStyledProps {
+    /** Custom React element to display on the left side of the input (e.g., icon, prefix) */
     LeftContent?: ReactElement;
+    /** Custom CSS properties for the outer container wrapper */
     containerStyle?: CSSProperties;
+    /** Error message displayed below the input in red text */
     error?: string | undefined;
     design?: "third";
 }

package/dist/esm/components/Input/Birthday/InputBirthday.d.ts

@@ -2,6 +2,20 @@ import { ChangeEvent } from "react";
 import { InputProps } from "../Basic/Input";
 declare const InputBirthday: ({ error, onChange, containerStyle, ...restProps }: InputBirthdayProps) => import("react/jsx-runtime").JSX.Element;
 export default InputBirthday;
+/**
+ * Birthday input split into three numeric fields (Day/Month/Year).
+ * Auto-focuses next field when complete, validates date with moment.js.
+ *
+ * @example
+ * ```tsx
+ * <InputBirthday
+ *   defaultValue="1990-05-15"
+ *   error={validationError}
+ *   onChange={(date) => setDateOfBirth(date)}
+ * />
+ * ```
+ */
 export type InputBirthdayProps = Omit<InputProps, 'onChange'> & {
+    /** Callback with valid Date object when all fields complete. Format for defaultValue: "YYYY-MM-DD" */
     onChange?: (date: Date | ChangeEvent<HTMLInputElement>) => void;
 };

package/dist/esm/components/Input/Chat/InputChat.d.ts

@@ -1,10 +1,34 @@
 import { ComponentPropsWithoutRef, ReactElement } from "react";
 declare const InputChat: (props: InputChatProps) => import("react/jsx-runtime").JSX.Element;
 export default InputChat;
+/**
+ * Chat input with text messaging and voice recording capabilities.
+ * Features waveform visualization during recording and optional attachment menu.
+ *
+ * @example
+ * ```tsx
+ * <InputChat
+ *   placeholder="Type a message..."
+ *   options={[
+ *     { id: "photo", label: "Photo", icon: <Camera /> },
+ *     { id: "file", label: "File", icon: <Paperclip /> }
+ *   ]}
+ *   onOptionClick={(id) => handleAttachment(id)}
+ *   onSend={(data) => {
+ *     if (data.text) sendTextMessage(data.text);
+ *     if (data.media) sendAudioMessage(data.media.base64);
+ *   }}
+ * />
+ * ```
+ */
 export interface InputChatProps extends ComponentPropsWithoutRef<"input"> {
+    /** Shows loading animation, disables input */
     loading?: boolean;
+    /** Attachment menu options (shows Plus icon button) */
     options?: Array<optionType>;
+    /** Callback when attachment menu item is clicked */
     onOptionClick?: (id: string) => void;
+    /** Callback when message is sent (Enter key or Send button). Audio is converted to base64 WAV format */
     onSend?: (data: {
         text?: string;
         media?: {

package/dist/esm/components/Input/Code/InputCode.d.ts

@@ -1,11 +1,26 @@
 import { CSSProperties } from "react";
 declare const InputCode: (props: InputCodeProps) => import("react/jsx-runtime").JSX.Element;
 export default InputCode;
+/**
+ * 6-digit verification code input with monospace font and letter spacing.
+ * Auto-blurs and triggers callback when all 6 digits are entered.
+ *
+ * @example
+ * ```tsx
+ * <InputCode
+ *   autoFocus
+ *   error={codeError}
+ *   loading={isVerifying}
+ *   onChange={(code) => verifyCode(code)}
+ * />
+ * ```
+ */
 export interface InputCodeProps {
     style?: CSSProperties;
     containerStyle?: CSSProperties;
     autoFocus?: boolean;
     error?: string;
     loading?: boolean;
+    /** Callback fired when 6 digits are entered (input auto-blurs) */
     onChange?: (code: string) => void;
 }