@adoptaunabuelo/react-components 0.3.145 → 0.3.147

package/dist/esm/components/Input/DateRange/InputDateRange.d.ts

@@ -5,14 +5,33 @@ import "react-dates/lib/css/_datepicker.css";
 import "./react_dates_overrides.css";
 declare const InputDateRange: (props: InputDateRangeProps) => import("react/jsx-runtime").JSX.Element;
 export default InputDateRange;
+/**
+ * Date range picker powered by react-dates (Airbnb).
+ * Uses moment.js for date handling with Spanish localization.
+ *
+ * @example
+ * ```tsx
+ * <InputDateRange
+ *   startDate={startDate}
+ *   endDate={endDate}
+ *   onChange={({ startDate, endDate }) => {
+ *     setStartDate(startDate);
+ *     setEndDate(endDate);
+ *   }}
+ *   isOutsideRange={(date) => date.isBefore(moment())}
+ * />
+ * ```
+ */
 export interface InputDateRangeProps {
     style?: CSSProperties;
     startDate: moment.Moment | null;
     endDate: moment.Moment | null;
     focus?: boolean;
+    /** Callback fired when either date changes */
     onChange: (data: {
         startDate: moment.Moment | null;
         endDate: moment.Moment | null;
     }) => void;
+    /** Optional function to disable specific dates (return true to disable) */
     isOutsideRange?: (date: moment.Moment) => boolean;
 }

package/dist/esm/components/Input/Image/InputImage.d.ts

@@ -3,7 +3,22 @@ import "react-image-crop/dist/ReactCrop.css";
 import "./input-image.css";
 declare const InputImage: (props: InputImageProps) => import("react/jsx-runtime").JSX.Element;
 export default InputImage;
+/**
+ * Image upload with crop, compression, and webcam capture.
+ * Uses react-image-crop for 1:1 aspect ratio cropping and compressorjs for compression.
+ *
+ * @example
+ * ```tsx
+ * <InputImage
+ *   options={["camera", "library"]}
+ *   maxHeight={1200}
+ *   maxWidth={1200}
+ *   onChange={(base64Image) => setProfilePhoto(base64Image)}
+ * />
+ * ```
+ */
 export interface InputImageProps {
+    /** Image source options (shows modal on mobile if multiple). Default: ["library"] */
     options?: Array<"camera" | "library">;
     icon?: ReactElement;
     style?: CSSProperties;
@@ -11,8 +26,12 @@ export interface InputImageProps {
     buttonText?: string;
     previewStyle?: CSSProperties;
     label?: string;
+    /** Max height in pixels for compressed image */
     maxHeight?: number;
+    /** Max width in pixels for compressed image */
     maxWidth?: number;
+    /** Skip crop UI, immediately compress and return image */
     hideCrop?: boolean;
+    /** Callback with base64-encoded WebP image */
     onChange?: (image: string | ArrayBuffer | null) => void;
 }

package/dist/esm/components/Input/Location/InputLocation.d.ts

@@ -1,24 +1,53 @@
 import { InputProps } from "../Basic/Input";
 declare const InputLocation: ({ isLoaded, isForm, searchTypes, searchFields, onLocationChange, ...restProps }: InputLocationProps) => import("react/jsx-runtime").JSX.Element;
 export default InputLocation;
+/**
+ * Location autocomplete input powered by Google Maps Places API.
+ * Debounced search (500ms) with structured address parsing in Spanish.
+ *
+ * @example
+ * ```tsx
+ * <InputLocation
+ *   isLoaded={isGoogleMapsLoaded}
+ *   placeholder="Introduce tu dirección"
+ *   searchTypes={["address"]}
+ *   searchFields={["geometry", "address_components"]}
+ *   onLocationChange={(location) => {
+ *     console.log(location.address);
+ *     console.log(location.location); // { lat, lng }
+ *   }}
+ * />
+ * ```
+ */
 export type InputLocationProps = InputProps & {
+    /** If true, only shows route + number in input after selection */
     isForm?: boolean;
+    /** Must be true when Google Maps API is loaded */
     isLoaded: boolean;
+    /** Google Places API search types. Default: ["address"] */
     searchTypes?: string[];
+    /** Google Places API fields to fetch. Default: ["geometry", "address_components"] */
     searchFields?: string[];
+    /** Callback with parsed location data */
     onLocationChange?: (result: LocationProps) => void;
 };
 export interface LocationProps {
+    /** Full formatted address string */
     address?: string;
+    /** Short address (city, province, country) */
     sortAddress?: string;
+    /** Street name */
     route?: string;
+    /** Street number */
     routeNumber?: string;
     routeInfo?: string;
     city?: string;
     province?: string;
     zipCode?: string;
     country?: string;
+    /** ISO country code (e.g., "ES") */
     shortCountry?: string;
+    /** Coordinates { lat, lng } */
     location?: google.maps.LatLngLiteral;
     timeZone?: string;
 }

package/dist/esm/components/Input/Phone/InputPhone.d.ts

@@ -2,12 +2,33 @@ import { CountryProps } from "./SelectPhone";
 import { InputProps } from "../Basic/Input";
 declare const InputPhone: (props: InputPhoneProps) => import("react/jsx-runtime").JSX.Element;
 export default InputPhone;
+/**
+ * Phone input with country selector and validation using google-libphonenumber.
+ * Validates phone format for the selected country region.
+ *
+ * @example
+ * ```tsx
+ * <InputPhone
+ *   country="ES"
+ *   countryOptions={countryList}
+ *   onPhoneChange={({ country, value, isValid }) => {
+ *     if (isValid) setPhoneNumber(country + value);
+ *   }}
+ * />
+ * ```
+ */
 export type InputPhoneProps = InputProps & {
+    /** ISO country code (e.g., "ES") to pre-select */
     country?: string;
+    /** Array of country options with prefix and countryCode */
     countryOptions?: CountryProps[];
+    /** Callback fired on input change or country change with validation status */
     onPhoneChange?: (item: {
+        /** Country prefix (e.g., "+34") */
         country: string;
+        /** Phone number without prefix */
         value?: string | number;
+        /** Whether phone is valid for selected country */
         isValid: boolean;
     }) => void;
 };

package/dist/esm/components/Input/Price/InputPrice.d.ts

@@ -1,21 +1,51 @@
 import { CSSProperties } from "react";
 declare const InputPrice: (props: InputPriceProps) => import("react/jsx-runtime").JSX.Element;
 export default InputPrice;
+/**
+ * Price selector with predefined options in horizontal scroll and optional custom input.
+ * Auto-centers selected option, validates minimum price. Spanish number formatting.
+ *
+ * @example
+ * ```tsx
+ * <InputPrice
+ *   options={[
+ *     { price: 10, data: [{ title: "1 coffee", icon: "Coffee" }] },
+ *     { price: 25, data: [{ title: "3 coffees", icon: "Coffee" }] },
+ *     { price: 50 }
+ *   ]}
+ *   currency="€"
+ *   label="Equivale a {{value}} cafés"
+ *   labelValueConversion={0.1}
+ *   defaultOption={25}
+ *   onChange={(price) => setDonationAmount(price)}
+ * />
+ * ```
+ */
 export type InputPriceProps = {
     style?: CSSProperties;
     containerStyle?: CSSProperties;
+    /** Predefined price options (scrollable horizontally) */
     options: {
         price: number;
+        /** Optional feature list shown below price with icons */
         data?: {
             title: string;
+            /** Lucide icon name (e.g., "Check", "Coffee") */
             icon?: string;
         }[];
     }[];
+    /** Floating label above options. Use {{value}} for dynamic calculation */
     label?: string;
+    /** Multiplier for {{value}} in label (e.g., 0.1 converts 100€ to "10 coffees") */
     labelValueConversion?: number;
+    /** Currency symbol (e.g., "€", "$") */
     currency: string;
+    /** Pre-select an option by price */
     defaultOption?: number;
+    /** Hide custom amount input field */
     hideCustomAmount?: boolean;
+    /** Custom element shown below custom amount input */
     customAmountData?: React.ReactElement;
+    /** Callback with selected/entered price. Validates minimum from first option */
     onChange?: (value: number) => void;
 };

package/dist/esm/components/Input/Range/InputRange.d.ts

@@ -1,24 +1,55 @@
 import { ComponentPropsWithoutRef } from "react";
 declare const InputRange: (props: InputRangeProps) => import("react/jsx-runtime").JSX.Element;
 export default InputRange;
+/**
+ * Range slider with heart icon thumb and optional milestone markers ("presents").
+ * Milestones animate with Lottie pop effect when value reaches them.
+ *
+ * @example
+ * ```tsx
+ * <InputRange
+ *   min={0}
+ *   max={100}
+ *   unit="€"
+ *   value={currentValue}
+ *   presents={[
+ *     { value: 25, icon: Gift, color: "#ccc", colorSuccess: "#0088ff", onClick: () => alert("25 reached!") },
+ *     { value: 50, icon: Star, color: "#ccc", colorSuccess: "#0088ff" }
+ *   ]}
+ *   onChange={(e) => setValue(parseInt(e.target.value))}
+ * />
+ * ```
+ */
 export interface InputRangeProps extends ComponentPropsWithoutRef<"input"> {
+    /** Color for filled portion of slider track */
     lineColor?: string;
+    /** Color for unfilled portion of slider track */
     backgroundColor?: string;
+    /** Color for heart icon thumb */
     thumbColor?: string;
     min?: number;
     max?: number;
+    /** Unit label shown at min/max (e.g., "€", "kg") */
     unit?: string;
+    /** Hide floating value tooltip above thumb */
     hideRange?: boolean;
+    /** Hide min/max labels below slider */
     hideLabels?: boolean;
+    /** Milestone markers with Lottie animation when reached */
     presents?: {
+        /** Value at which to show marker */
         value: number;
+        /** Lucide icon component */
         icon: React.ComponentType<{
             height?: number;
             width?: number;
             color?: string;
         }>;
+        /** Color when milestone not reached */
         color: string;
+        /** Color when milestone reached (slider value >= milestone value) */
         colorSuccess: string;
+        /** Optional callback when marker is clicked */
         onClick?: () => void;
     }[];
 }

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

@@ -1,12 +1,29 @@
 import { ComponentPropsWithoutRef, ReactElement } from "react";
 declare const Label: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default Label;
+/**
+ * Label/badge component with status-aware coloring and two visual types.
+ * Automatically applies predefined colors for common status values (e.g., "pending", "active", "canceled").
+ *
+ * @example
+ * ```tsx
+ * <Label type="label" text="active" />
+ * <Label type="chip" size="big" text="Pending" />
+ * <Label text="done" icon={<CheckIcon />} />
+ * ```
+ */
 export interface Props extends ComponentPropsWithoutRef<"div"> {
+    /** Text to display. For predefined status values, color is automatically applied. */
     text: string;
     disabled?: boolean;
+    /** Visual variant: `label` for badges, `chip` for rounded buttons */
     type?: "label" | "chip";
+    /** Size variant for chips: `big` (full text), `small` (initials only), `selector` (bordered) */
     size?: "big" | "small" | "selector";
+    /** Optional icon displayed before the text */
     icon?: ReactElement;
+    /** Custom background color (overrides automatic status colors) */
     backgroundColor?: string;
+    /** Custom text color (overrides automatic status colors) */
     color?: string;
 }

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

@@ -1,24 +1,52 @@
 import { CSSProperties } from 'react';
 declare const MenuList: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<MenuRef>>;
 export default MenuList;
+/**
+ * Dropdown menu component with customizable positioning and icon trigger.
+ * Automatically closes when clicking outside. Supports both predefined options and custom children.
+ *
+ * @example
+ * ```tsx
+ * <Menu
+ *   id="actions-menu"
+ *   position="bottom-right"
+ *   options={[
+ *     { id: "edit", label: "Edit", icon: <EditIcon /> },
+ *     { id: "delete", label: "Delete", labelColor: "red" }
+ *   ]}
+ *   onClick={(option) => handleAction(option.id)}
+ * />
+ * ```
+ */
 export interface MenuProps {
+    /** Unique identifier required for click-outside detection */
     id: string;
     style?: CSSProperties;
+    /** Custom styles for the dropdown menu container */
     menuStyle?: CSSProperties;
+    /** Icon for the button trigger (lowercase, used with Button component) */
     icon?: React.ReactElement;
+    /** Icon element for custom trigger (uppercase, replaces Button) */
     Icon?: React.ReactElement;
+    /** Positioning of the dropdown relative to the trigger button */
     position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Custom content to display in menu (alternative to options) */
     children?: React.ReactNode;
+    /** Array of menu items with labels and icons */
     options?: Array<OptionsProps>;
+    /** Callback fired when menu visibility changes */
     onChange?: (visible: boolean) => void;
+    /** Callback fired when a menu option is clicked */
     onClick?: (option: OptionsProps) => void;
 }
 export interface OptionsProps {
     id: string;
     label: string;
+    /** Custom text color for the label */
     labelColor?: string;
     icon?: React.ReactElement;
 }
 export interface MenuRef {
+    /** Programmatically close the menu */
     close: () => void;
 }

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

@@ -1,12 +1,30 @@
 import { ModalPrimaryProps, ModalRef } from "./ModalPrimary";
 declare const ModalComponent: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<ModalRef>>;
 export default ModalComponent;
+/**
+ * Modal dialog component with three display modes: default, form, and web.
+ * Use `type="form"` with `options` for structured form layouts, or `type="web"` with `url` to embed external content.
+ *
+ * @example
+ * ```tsx
+ * <Modal
+ *   type="form"
+ *   isVisible={isOpen}
+ *   options={[
+ *     { id: "name", title: "Name", Data: <Input /> },
+ *     { id: "separator" }
+ *   ]}
+ * />
+ * ```
+ */
 export interface ModalProps extends ModalPrimaryProps {
+    /** Array of form field configurations for `type="form"`. Each item creates a labeled row or separator. */
     options?: Array<{
         id: string;
         title?: string;
         Data?: React.ReactElement;
         hidden?: boolean;
     }>;
+    /** External URL to display in an iframe when `type="web"` */
     url?: string;
 }

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

@@ -1,10 +1,28 @@
 import { CSSProperties } from "react";
 declare const Pagination: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default Pagination;
+/**
+ * Pagination control with first/previous/next/last navigation buttons.
+ * Displays current page number and total pages (e.g., "1 de 5").
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   length={100}
+ *   rowsPerPage={10}
+ *   start={0}
+ *   onChange={(page) => fetchData(page)}
+ * />
+ * ```
+ */
 export interface Props {
     style?: CSSProperties;
+    /** Initial/controlled page index (0-based) */
     start?: number;
+    /** Total number of items to paginate */
     length: number;
+    /** Number of items to display per page */
     rowsPerPage: number;
+    /** Callback fired when page changes, receives new page index (0-based) */
     onChange?: (page: number) => void;
 }

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

@@ -2,22 +2,54 @@ import { CSSProperties } from "react";
 import { PaymentMethod } from "@stripe/stripe-js";
 declare const Payout: import("react").ForwardRefExoticComponent<PayoutProps & import("react").RefAttributes<PayoutRef>>;
 export default Payout;
+/**
+ * Stripe payment method setup component supporting card and SEPA direct debit.
+ * Handles 3D Secure authentication flow in modal. Requires Stripe publishable key.
+ *
+ * @example
+ * ```tsx
+ * const payoutRef = useRef<PayoutRef>(null);
+ *
+ * <Payout
+ *   ref={payoutRef}
+ *   stripeKey={process.env.STRIPE_KEY}
+ *   paymentOption="card"
+ *   design="secondary"
+ *   onLoading={(loading) => setIsLoading(loading)}
+ *   onSetupConfirmed={() => handleSuccess()}
+ * />
+ *
+ * // Get payment method
+ * const method = await payoutRef.current?.getPaymentMethod();
+ * ```
+ */
 export interface PayoutProps {
     style?: CSSProperties;
+    /** Stripe publishable API key (starts with pk_) */
     stripeKey: string;
+    /** 3D Secure confirmation URL from Stripe setup intent */
     stripeConfirmUrl?: string;
+    /** Payment method type: credit/debit card or SEPA direct debit */
     paymentOption: "sepa_debit" | "card";
+    /** Custom styles for the card input form */
     cardStyle?: CSSProperties;
     error?: boolean;
+    /** Pre-filled user data (email required for SEPA) */
     userData?: {
         email?: string;
     };
+    /** Visual design variant */
     design?: "primary" | "secondary";
+    /** Custom placeholder for name input */
     placeholderName?: string;
+    /** Custom placeholder for email input */
     placeholderEmail?: string;
+    /** Callback fired when 3D Secure authentication completes successfully */
     onSetupConfirmed?: () => void;
+    /** Callback fired when loading state changes */
     onLoading?: (a: boolean) => void;
 }
 export interface PayoutRef {
+    /** Collects payment method from Stripe and returns payment method object */
     getPaymentMethod: () => Promise<PaymentMethod | undefined>;
 }

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

@@ -1,15 +1,35 @@
 import { ComponentPropsWithoutRef } from "react";
 declare const ProgressBar: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default ProgressBar;
+/**
+ * Animated progress bar supporting single or multiple progress indicators with optional percentage display.
+ * Smoothly transitions to new values with configurable animation timing.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar
+ *   progress={75}
+ *   showPercentage
+ *   animationTime={1.5}
+ * />
+ * ```
+ */
 export interface Props extends ComponentPropsWithoutRef<"div"> {
+    /** Current progress value or array of multiple progress values with optional colors */
     progress: number | Array<{
         value: number;
         color?: string;
     }>;
+    /** Minimum value for progress calculation (default: 0) */
     minValue?: number;
+    /** Maximum value for progress calculation (default: 100) */
     maxValue?: number;
+    /** Bar color (overrides default primary color) */
     color?: string;
+    /** Animation duration in seconds */
     animationTime?: number;
+    /** Delay in seconds before animation starts */
     animationDelay?: number;
+    /** Display percentage badge above progress bar */
     showPercentage?: boolean;
 }

package/dist/esm/components/RadioButton/RadioButtonList.d.ts

@@ -1,15 +1,37 @@
 import { CSSProperties } from "react";
 declare const RadioButtonList: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default RadioButtonList;
+/**
+ * Radio button list supporting single or multiple selection.
+ * Each option can contain any React content (text, images, custom components).
+ *
+ * @example
+ * ```tsx
+ * <RadioButtonList
+ *   type="single"
+ *   options={[
+ *     { id: "1", children: <div>Option 1</div>, selected: true },
+ *     { id: "2", children: <div>Option 2</div> }
+ *   ]}
+ *   onChange={(selected) => console.log(selected)}
+ * />
+ * ```
+ */
 export interface Props {
+    /** Array of radio button options with custom content */
     options: Array<OptionProps>;
+    /** Selection mode: `single` for radio behavior, `multiple` for checkboxes */
     type: "single" | "multiple";
     style?: CSSProperties;
+    /** Custom styles applied to each radio button cell */
     cellStyle?: CSSProperties;
+    /** Callback fired when selection changes, receives array of selected options */
     onChange?: (data: Array<OptionProps>) => void;
 }
 interface OptionProps {
     id: string;
+    /** Custom React content to display in the radio button */
     children: React.ReactNode;
+    /** Initial selected state */
     selected?: boolean;
 }

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

@@ -1,7 +1,23 @@
 import { ComponentPropsWithoutRef } from "react";
 declare const SearchBar: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default SearchBar;
+/**
+ * Search input with magnifying glass icon. Supports two sizes and visual designs.
+ * Auto-focuses on click and changes style on interaction.
+ *
+ * @example
+ * ```tsx
+ * <SearchBar
+ *   type="big"
+ *   design="primary"
+ *   placeholder="Search..."
+ *   onChange={(e) => handleSearch(e.target.value)}
+ * />
+ * ```
+ */
 export interface Props extends ComponentPropsWithoutRef<"input"> {
+    /** Size variant: `big` (48px height) or `small` (38px height) */
     type?: "big" | "small";
+    /** Visual design: `primary` (gray background) or `secondary` (white with border) */
     design?: "primary" | "secondary";
 }

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

@@ -1,15 +1,40 @@
 import { ComponentPropsWithoutRef, CSSProperties } from "react";
 declare const Select: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default Select;
+/**
+ * Dropdown select component with icons and keyboard-friendly navigation.
+ * Auto-closes when clicking outside. Supports controlled and uncontrolled modes.
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   id="language-select"
+ *   options={[
+ *     { label: "English", icon: <FlagIcon /> },
+ *     { label: "Spanish", icon: <FlagIcon /> }
+ *   ]}
+ *   selectedItem={currentLanguage}
+ *   onChange={(option) => setLanguage(option)}
+ * />
+ * ```
+ */
 export interface Props extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    /** Unique identifier required for click-outside detection */
     id: string;
+    /** Custom styles for the dropdown options container */
     optionStyle?: CSSProperties;
+    /** Hide the selected item label (icon-only mode) */
     hideTitle?: boolean;
+    /** Array of selectable options */
     options: Array<OptionProps>;
+    /** Current selected option (controlled component) */
     selectedItem?: OptionProps;
+    /** Callback fired when selection changes */
     onChange?: (option: OptionProps) => void;
 }
 interface OptionProps {
+    /** Optional icon displayed before label */
     icon?: React.ReactElement;
+    /** Display text for the option */
     label: string;
 }

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

@@ -1,9 +1,25 @@
 import { CSSProperties } from "react";
 declare const Stamp: (props: StampProps) => import("react/jsx-runtime").JSX.Element;
 export default Stamp;
+/**
+ * Decorative postage stamp component with perforated edges.
+ * Displays an emoji icon and title. Responsive sizing for mobile.
+ *
+ * @example
+ * ```tsx
+ * <Stamp
+ *   icon="🎉"
+ *   title="Celebration"
+ *   backgroundColor={ColorV2.surface.greenSoft}
+ * />
+ * ```
+ */
 export interface StampProps {
     style?: CSSProperties;
+    /** Emoji or single character to display (rendered large) */
     icon: string;
+    /** Text label below the icon (truncates with ellipsis) */
     title: string;
+    /** Background color for the icon area */
     backgroundColor: string;
 }

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

@@ -1,7 +1,23 @@
 declare const Switch: (props: SwitchProps) => import("react/jsx-runtime").JSX.Element;
 export default Switch;
+/**
+ * Toggle switch component with sliding animation and checkmark indicator.
+ * Changes color and position when toggled on/off.
+ *
+ * @example
+ * ```tsx
+ * <Switch
+ *   active={isEnabled}
+ *   color={ColorV2.surface.primary}
+ *   onChange={(on) => setIsEnabled(on)}
+ * />
+ * ```
+ */
 export interface SwitchProps {
+    /** Current state (controlled component) */
     active?: boolean;
+    /** Custom color when active (default: primary) */
     color?: string;
+    /** Callback fired when toggled, receives new state */
     onChange?: (on: boolean) => void;
 }