@boxcustodia/library 0.5.4 → 0.5.5

package/dist/src/components/tag/__doc__/Tag.stories.d.ts

@@ -0,0 +1,53 @@
+import { Tag } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * El componente Tag es una herramienta versátil para etiquetar, categorizar y organizar elementos con etiquetas visuales.
+ */
+declare const meta: Meta<typeof Tag>;
+export default meta;
+type Story = StoryObj<typeof Tag>;
+/**
+ * Variante principal del Tag.
+ * Ideal para destacar información importante o etiquetas primarias.
+ */
+export declare const Primary: Story;
+/**
+ * Variante secundaria con un énfasis visual más sutil.
+ * Perfecta para información complementaria o categorías secundarias.
+ */
+export declare const Secondary: Story;
+/**
+ * Variante de error para resaltar estados problemáticos o alertas.
+ * Usar con moderación y solo cuando sea necesario indicar un error o advertencia.
+ */
+export declare const Error: Story;
+/**
+ * Variante outline con borde y fondo transparente.
+ * Útil para interfaces minimalistas o cuando se necesita un contraste menor.
+ */
+export declare const Outline: Story;
+/**
+ * Tipo redondo o cuadrado .
+ */
+export declare const Square: Story;
+/**
+ * Los estilos del Tag.
+ */
+export declare const Styles: Story;
+/**
+ * Tags con iconos para mejorar la comprensión visual.
+ * Los iconos deben ser relevantes y mejorar la comunicación del tag.
+ */
+export declare const WithIcon: Story;
+/**
+ * Variante cerrable que permite al usuario eliminar el tag.
+ * Incluye callback personalizable y feedback visual mediante toast.
+ *
+ * Al pasar la propiedad `closable` a true, se debe pasar la propiedad `onClose` con una función que se ejecutará al cerrar el tag.
+ *
+ * ```tsx
+ * <Tag closable onClose={() => {}}>Tag cerrable</Tag>
+ * ```
+ */
+export declare const Closable: Story;

package/dist/src/components/tag/__test__/Tag.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export * from './Tag';
+export * from './Tag.variants';

package/dist/src/components/textarea/TextArea.d.ts

@@ -0,0 +1,5 @@
+import { HTMLProps } from 'react';
+
+type TextAreaProps = HTMLProps<HTMLTextAreaElement>;
+export declare const TextArea: import('react').ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/src/components/textarea/__doc__/TextArea.stories.d.ts

@@ -0,0 +1,12 @@
+import { TextArea } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+
+declare const meta: Meta<typeof TextArea>;
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+/**
+ * El componente se puede controlar con un estado
+ */
+export declare const Controlled: Story;

package/dist/src/components/textarea/__test__/TextArea.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export * from './TextArea';

package/dist/src/components/timeline/Timeline.d.ts

@@ -0,0 +1,41 @@
+import { HTMLProps, ReactNode } from 'react';
+
+interface ItemTimeline {
+    content?: ReactNode;
+    icon?: ReactNode;
+    status?: "done" | "pending" | "error";
+    color?: string;
+}
+interface TimelineProps {
+    items: ItemTimeline[];
+    itemsProps?: HTMLProps<HTMLDivElement>;
+    containerProps?: HTMLProps<HTMLUListElement>;
+    classNameContainer?: string;
+    classNameItem?: string;
+    classNameItemDot?: string;
+    classNameItemContainerDot?: string;
+    classNameItemContent?: string;
+}
+export declare const Timeline: ({ items, classNameContainer, containerProps, ...itemsProps }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimelineRoot: (props: HTMLProps<HTMLUListElement>) => import("react/jsx-runtime").JSX.Element;
+interface TimelineListItemProps extends HTMLProps<HTMLLIElement> {
+    icon?: ReactNode;
+    status?: "done" | "pending" | "error";
+    color?: string;
+    itemsProps?: HTMLProps<HTMLDivElement>;
+    classNameContainer?: string;
+    classNameItemDot?: string;
+    classNameItemContainerDot?: string;
+    classNameItemContent?: string;
+}
+export declare const TimelineListItem: ({ icon, status, color, classNameItemDot, classNameItemContainerDot, classNameItemContent, itemsProps, children, ...props }: TimelineListItemProps) => import("react/jsx-runtime").JSX.Element;
+interface TimelineItemDotProps {
+    icon?: ReactNode;
+    status?: "done" | "pending" | "error";
+    color?: string;
+    classNameDot?: string;
+    classNameContainerDot?: string;
+}
+export declare const TimelineItemDot: ({ icon, status, color, classNameDot, classNameContainerDot, }: TimelineItemDotProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimelineItemContent: (props: HTMLProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/timeline/TimelineStatus.d.ts

@@ -0,0 +1,5 @@
+export declare const TimelineStatus: {
+    done: string;
+    pending: string;
+    error: string;
+};

package/dist/src/components/timeline/__doc__/Timeline.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Timeline } from '../Timeline';
+
+declare const meta: Meta<typeof Timeline>;
+export default meta;
+type Story = StoryObj<typeof Timeline>;
+export declare const Default: Story;
+export declare const OnlyRight: Story;

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

@@ -0,0 +1 @@
+export * from './Timeline';

package/dist/src/components/toast/Toast.model.d.ts

@@ -0,0 +1,20 @@
+import { LucideProps } from 'lucide-react';
+import { ComponentType, ReactNode } from 'react';
+
+export type ToastType = "info" | "success" | "error" | "loading";
+export interface IToast {
+    id: number | string;
+    title?: string;
+    description: ReactNode;
+    type: ToastType;
+}
+export type ToastArgs = string | Omit<ToastProperties, "type">;
+export interface ToastProperties extends Omit<IToast, "id"> {
+    duration?: number;
+}
+export interface ToastPromiseOptions<T> {
+    loading: string;
+    success: string | ((data: T) => string);
+    error: string | ((error: any) => string);
+}
+export declare const ToastIcons: Record<ToastType, ComponentType<LucideProps>>;

package/dist/src/components/toast/Toast.variants.d.ts

@@ -0,0 +1,6 @@
+export declare const toastVariants: (props?: ({
+    variant?: "error" | "loading" | "success" | "info" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const toastIconVariants: (props?: ({
+    variant?: "error" | "loading" | "success" | "info" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/src/components/toast/__doc__/Toast.stories.d.ts

@@ -0,0 +1,91 @@
+import { Toast } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * ## Configuración
+ * Es necesario importar el componente `Toaster` en app.tsx o en cualquier componente donde se usen los toasts
+ *
+ * Dicho componente se encarga de consumir el store y desplegar los toasts
+ *
+ * ```tsx
+ * // app.tsx
+ * <Toaster />
+ * ```
+ *
+ *
+ * ## Uso
+ * El toast se puede utilizar en su forma base de la siguiente forma:
+ *
+ * ``` tsx
+ * import { toast } from '@/components';
+ *
+ * <Button onClick={() => toast({ type: 'info', title: 'Info Title', description: 'This is an info toast'})}>
+ *   Show Info Toast
+ * </Button>
+ *
+ * <Button onClick={() => toast({ type: 'error', title: 'Error Title', description: 'This is an error toast'})}>
+ *   Show Error Toast
+ * </Button>
+ *
+ * <Button onClick={() => toast({ type: 'success', title: 'Success Title', description: 'This is a success toast'})}>
+ *   Show Success Toast
+ * </Button>
+ * ```
+ *
+ * También se puede utilizar los métodos específicos para cada tipo de toast:
+ *
+ * ``` tsx
+ * import { toast } from '@/components';
+ *
+ * <Button onClick={() => toast.info('This is an info message')}>
+ *   Show Info Toast
+ * </Button>
+ *
+ * <Button onClick={() => toast.error('This is an error message')}>
+ *   Show Error Toast
+ * </Button>
+ *
+ * <Button onClick={() => toast.success('This is a success message')}>
+ *   Show Success Toast
+ * </Button>
+ * ```
+ *
+ * Cada uno de los métodos `toast.info`, `toast.error` y `toast.success` acepta tanto una cadena de texto
+ * como un objeto con las propiedades `title`, `description`, y `duration`:
+ *
+ * ``` tsx
+ * <Button onClick={() => toast.info({ title: 'Info Title', description: 'This is an info toast', duration: 5000 })}>
+ *   Show Info Toast
+ * </Button>
+ *
+ * <Button onClick={() => toast.error({ title: 'Error Title', description: 'This is an error toast', duration: 5000 })}>
+ *   Show Error Toast
+ * </Button>
+ *
+ * <Button onClick={() => toast.success({ title: 'Success Title', description: 'This is a success toast', duration: 5000 })}>
+ *   Show Success Toast
+ * </Button>
+ * ```
+ *
+ * @param args - Los argumentos para crear el toast. Puede ser una cadena de texto para la descripción o un objeto que incluya `type`, `title`, `description`, y `duration`.
+ */
+declare const meta: Meta<typeof Toast>;
+export default meta;
+type Story = StoryObj<typeof Toast>;
+export declare const Default: Story;
+export declare const Success: Story;
+export declare const Error: Story;
+export declare const Description: Story;
+export declare const Title: Story;
+export declare const LongTitle: Story;
+export declare const LongDescription: Story;
+/**
+ * El componente Toast.promise permite mostrar notificaciones basadas en el estado de una promesa.
+ * Recibe los siguientes parámetros:
+ * - promise: La promesa a ejecutar
+ * - options: Un objeto con los mensajes a mostrar:
+ *   - loading: Mensaje mientras la promesa está pendiente
+ *   - success: Mensaje o función que recibe la respuesta cuando la promesa se resuelve
+ *   - error: Mensaje o función que recibe el error cuando la promesa es rechazada
+ */
+export declare const PromiseToast: Story;

package/dist/src/components/toast/__test__/Toast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/toast/components/Toast.d.ts

@@ -0,0 +1,14 @@
+import { IToast } from '../..';
+import { ClassName } from '../../../models';
+import { Omit } from 'lodash';
+import { HTMLProps } from 'react';
+
+type Props = {
+    titleClassName?: ClassName;
+    titleProps?: HTMLProps<HTMLHeadingElement>;
+    descriptionClassName?: ClassName;
+    descriptionProps?: HTMLProps<HTMLParagraphElement>;
+    iconClassName?: ClassName;
+} & Omit<HTMLProps<HTMLDivElement>, "id"> & Omit<IToast, "id">;
+export declare const Toast: import('react').ForwardRefExoticComponent<globalThis.Omit<Props, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/src/components/toast/components/Toaster.d.ts

@@ -0,0 +1,8 @@
+type ToasterProps = React.ComponentProps<"div"> & {
+    iconClassName?: string;
+};
+declare const Toaster: {
+    ({ iconClassName, ...props }: ToasterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Toaster, type ToasterProps };

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

@@ -0,0 +1,2 @@
+export * from './Toast';
+export * from './Toaster';

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

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './store/ToastStore';
+export * from './toast';
+export * from './Toast.model';

package/dist/src/components/toast/store/ToastStore.d.ts

@@ -0,0 +1,13 @@
+import { IToast, ToastPromiseOptions } from '../Toast.model';
+
+interface ToastStore {
+    toasts: IToast[];
+    addToast: (toast: Omit<IToast, "id"> & {
+        duration?: number;
+    }) => number;
+    removeToast: (id: number) => void;
+    updateToast: (id: number, toast: Partial<Omit<IToast, "id">>) => void;
+    promise: <T>(promise: Promise<T>, options: ToastPromiseOptions<T>) => Promise<T>;
+}
+export declare const useToastStore: import('zustand').UseBoundStore<import('zustand').StoreApi<ToastStore>>;
+export {};

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

@@ -0,0 +1 @@
+export * from './ToastStore';

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

@@ -0,0 +1,8 @@
+import { ToastArgs, ToastPromiseOptions, ToastProperties } from './Toast.model';
+
+export declare const toast: ((args: ToastProperties) => number) & {
+    info: (args: ToastArgs) => number;
+    success: (args: ToastArgs) => number;
+    error: (args: ToastArgs) => number;
+    promise: <T>(promise: Promise<T>, options: ToastPromiseOptions<T>) => Promise<T>;
+};

package/dist/src/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,20 @@
+import { PopoverContent } from '..';
+import { ComponentProps, ReactNode, ComponentPropsWithoutRef } from 'react';
+import { PopoverAnchor } from '@radix-ui/react-popover';
+
+type Props = ComponentProps<typeof PopoverAnchor> & {
+    /**
+     * El texto que aparecera en el tooltip
+     */
+    label: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => any;
+    side?: "top" | "right" | "bottom" | "left";
+    offset?: ComponentPropsWithoutRef<typeof PopoverContent>["sideOffset"];
+};
+export declare const Tooltip: {
+    ({ label, open: prop, defaultOpen: defaultProp, onOpenChange: onChange, className, side, offset, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/tooltip/Tooltip.utils.d.ts

@@ -0,0 +1,4 @@
+export declare const calculateTooltipPosition: (target: HTMLElement, tooltip: HTMLElement) => {
+    top: number;
+    left: number;
+};

package/dist/src/components/tooltip/__doc__/Tooltip.stories.d.ts

@@ -0,0 +1,37 @@
+import { Tooltip } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * El componente Tooltip proporciona información adicional al usuario cuando pasa el mouse
+ * o hace focus sobre un elemento.
+ *
+ * ### Características principales
+ * - Aparece al hacer hover o focus sobre el elemento hijo
+ * - Personalizable a través de className
+ * - Posicionamiento automático
+ * - Accesible por teclado
+ *
+ * ### Uso básico
+ * ```tsx
+ * <Tooltip label="Información adicional">
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ * ```
+ */
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+/**
+ * Ejemplo básico del tooltip con un botón como trigger
+ */
+export declare const Default: Story;
+/**
+ * Ejemplo de tooltip personalizado con colores primarios y abierto por defecto
+ * Prop `defaultOpen=true`
+ */
+export declare const Custom: Story;
+export declare const Side: Story;
+/**
+ * Se puede cambiar la distancia del tooltip con la prop `offset`
+ */
+export declare const Offset: Story;

package/dist/src/components/tooltip/__test__/Tooltip.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export * from './Tooltip';

package/dist/src/components/tree/Tree.d.ts

@@ -0,0 +1,13 @@
+import { TreeRoot } from './TreePrimitives';
+import * as React from "react";
+export interface TreeNode {
+    id: string | number;
+    title: string;
+    children: TreeNode[];
+}
+type TreeRootProps = React.ComponentProps<typeof TreeRoot>;
+type Props<T extends TreeNode> = TreeRootProps & {
+    items: T[];
+};
+export declare function Tree<T extends TreeNode>({ items, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/tree/TreePrimitives.d.ts

@@ -0,0 +1,11 @@
+import { TreeItemProps as TreeItemPrimitiveProps, TreeProps, Collection, UNSTABLE_TreeItemContent as TreeItemContentPrimitive } from 'react-aria-components';
+import { OverrideProps } from '../../models';
+import * as React from "react";
+declare const TreeRoot: <T extends object>({ className, ...props }: TreeProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TreeItem: <T extends object>({ className, ...props }: OverrideProps<TreeItemPrimitiveProps<T>, {
+    id: string | number;
+}>) => import("react/jsx-runtime").JSX.Element;
+declare const TreeItemContent: (props: React.ComponentProps<typeof TreeItemContentPrimitive>) => import("react/jsx-runtime").JSX.Element;
+declare const TreeItemIndicator: () => import("react/jsx-runtime").JSX.Element;
+declare const TreeItemLabel: (props: React.HtmlHTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
+export { Collection, TreeItem, TreeItemContent, TreeItemIndicator, TreeItemLabel, TreeRoot, };

package/dist/src/components/tree/__doc__/Tree.stories.d.ts

@@ -0,0 +1,116 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Tree } from '../Tree';
+
+/**
+ * El componente Tree proporciona una vista jerárquica de datos en forma de árbol.
+ * Está construido sobre [@react-aria](https://react-spectrum.adobe.com/react-aria/Tree.html#tree)
+ * y soporta selección, expansión, navegación por teclado y más.
+ *
+ * ## Nodo
+ * Los nodos del árbol deben tener las siguientes propiedades:
+ *
+ * ```tsx
+ * interface TreeNode {
+ *   id: string | number;
+ *   title: string;
+ *   children: TreeNode[];
+ * }
+ * ```
+ */
+declare const meta: Meta<typeof Tree>;
+export default meta;
+type Story = StoryObj<typeof Tree>;
+/**
+ * Ejemplo básico del árbol con selección simple habilitada.
+ * Los usuarios pueden expandir/colapsar nodos y seleccionar un elemento a la vez.
+ */
+export declare const Default: Story;
+/**
+ * Configuración que permite seleccionar un solo elemento a la vez.
+ * Útil cuando necesitas que el usuario elija una única opción del árbol.
+ */
+export declare const SingleSelection: Story;
+/**
+ * Permite seleccionar múltiples elementos simultáneamente.
+ * Los usuarios pueden usar `click` para selección individual
+ * o `shift + click` para selección en rango.
+ */
+export declare const MultipleSelection: Story;
+/**
+ * Ejemplo de árbol con nodos deshabilitados completamente.
+ * Los elementos deshabilitados no pueden ser seleccionados ni expandidos.
+ *
+ * `disabledBehavior="all"` - Deshabilita todas las interacciones
+ *
+ * `disabledKeys` - Array de IDs de elementos a deshabilitar
+ */
+export declare const Disabled: Story;
+/**
+ * Ejemplo donde solo la selección está deshabilitada.
+ * Los elementos pueden expandirse pero no pueden ser seleccionados.
+ *
+ * `disabledBehavior="selection"` - Solo deshabilita la selección
+ *
+ * `disabledKeys` - Array de IDs de elementos a deshabilitar
+ */
+export declare const DisabledSelection: Story;
+/**
+ * Árbol con nodos inicialmente expandidos.
+ * Útil para mostrar cierta estructura desde el inicio.
+ *
+ * `defaultExpandedKeys` - Array de IDs de elementos expandidos por defecto
+ */
+export declare const DefaultExpanded: Story;
+/**
+ * Ejemplo de árbol con expansión controlada.
+ * El estado de expansión es manejado externamente.
+ *
+ * `expandedKeys` - Control explícito de los elementos expandidos
+ */
+export declare const ControlledExpanded: Story;
+/**
+ * Árbol con selección inicial predeterminada.
+ *
+ * `defaultSelectedKeys` - Array de IDs de elementos seleccionados por defecto
+ */
+export declare const DefaultSelected: Story;
+/**
+ * Demostración de los eventos disponibles en el árbol.
+ * Muestra notificaciones toast para:
+ * - Cambios en expansión
+ * - Cambios en selección
+ * - Eventos de scroll
+ */
+export declare const Events: Story;
+/**
+ * ## Estructura con componentes primitivos
+ * ```tsx
+ * import { TreeRoot, TreeItem, Collection } from '@/components/tree'
+ *
+ * const Estructura = () => {
+ *   return (
+ *     <TreeRoot>
+ *       <TreeItem>
+ *         <TreeItemContent>
+ *           <TreeItemIndicator />
+ *           <TreeItemLabel>Item Label</TreeItemLabel>
+ *         </TreeItemContent>
+ *         <Collection>
+ *           Child items
+ *         </Collection>
+ *       </TreeItem>
+ *     </TreeRoot>
+ *   )
+ * }
+ * ```
+ *
+ * Los componentes primitivos del Tree son:
+ *
+ * - `TreeRoot`: Contenedor principal que maneja la selección y expansión
+ * - `TreeItem`: Representa cada elemento del árbol
+ * - `TreeItemContent`: Contenedor del contenido del item
+ * - `TreeItemIndicator`: Indicador de expansión (chevron)
+ * - `TreeItemLabel`: Etiqueta del item
+ * - `Collection`: Contenedor de items hijos que permite manejo con teclado
+ */
+export declare const Primitive: Story;

package/dist/src/components/tree/hooks/useControllableTreeState.d.ts

@@ -0,0 +1,16 @@
+interface UseControllableTreeStateProps {
+    defaultExpandedKeys: string[];
+    defaultSelectedKeys: string[];
+    selectedKeys?: string[];
+    expandedKeys?: string[];
+    multiSelect: boolean;
+    onSelect?: (selectedKeys: string[]) => void;
+    onExpand?: (expandedKeys: string[]) => void;
+}
+export declare function useControllableTreeState({ defaultExpandedKeys, defaultSelectedKeys, selectedKeys: selectedKeysProp, expandedKeys: expandedKeysProp, multiSelect, onSelect, onExpand, }: UseControllableTreeStateProps): {
+    expandedKeys: Set<string>;
+    selectedKeys: Set<string>;
+    handleToggle: (nodeId: string) => void;
+    handleSelect: (nodeId: string) => void;
+};
+export {};

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

@@ -0,0 +1,2 @@
+export * from './Tree';
+export * from './TreePrimitives';

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

@@ -0,0 +1,26 @@
+export { useControllableState } from '@radix-ui/react-use-controllable-state';
+export * from './useArray';
+export * from './useAsync';
+export * from './useClickOutside';
+export * from './useClipboard';
+export * from './useDebounceCallback';
+export * from './useDebounceValue';
+export * from './useDisclosure';
+export * from './useDocumentTitle';
+export * from './useEventListener';
+export * from './useHotkey';
+export * from './useHover';
+export * from './useIsVisible';
+export * from './useLocalStorage';
+export * from './useMediaQuery';
+export * from './useMemoizedFn';
+export * from './useMutation';
+export * from './useObject';
+export * from './usePagination';
+export * from './usePortal';
+export * from './usePreventCloseWindow';
+export * from './useRangePagination';
+export * from './useSelection';
+export * from './useStep';
+export * from './useToggle';
+export * from './useFocusTrap';

package/dist/src/hooks/useArray/__doc__/useArray.stories.d.ts

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * Hook que facilita el manejo de estado de una lista
+ * Se exponen los siguientes métodos:
+ *
+ * | Método | Descripción |
+ * | --- | --- |
+ * | `insertAt(index: number, item: T)` | Inserta un elemento en un índice específico en la lista. |
+ * | `removeAt(index: number)` | Elimina un elemento en un índice específico de la lista. |
+ * | `updateAt(index: number, newItem: T)` | Actualiza un elemento en un índice específico de la lista. |
+ * | `clear()` | Elimina todos los elementos de la lista. |
+ * | `reset()` | Restablece la lista a su valor por defecto o inicial. |
+ * | `push(item: T)` | Agrega un nuevo elemento al final de la lista. |
+ * | `pop()` | Elimina el último elemento de la lista. |
+ * | `set(newList: T[])` | Actualiza la lista con una nueva lista. |
+ * | `update(predicate: ListIterateeCustom<T, boolean>, newItem: T | (item: T) => T)` | Actualiza un elemento de la lista.
+ */
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const DynamicList: Story;

package/dist/src/hooks/useArray/__test__/useArray.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/hooks/useArray/index.d.ts

@@ -0,0 +1 @@
+export { default as useArray } from './useArray';

package/dist/src/hooks/useArray/useArray.d.ts

@@ -0,0 +1,14 @@
+import { ListIterateeCustom } from 'lodash';
+
+declare function useArray<T>(defaultProp: T[]): readonly [T[], {
+    readonly insertAt: (index: number, item: T) => void;
+    readonly removeAt: (index: number) => void;
+    readonly updateAt: (index: number, newItem: T) => void;
+    readonly clear: () => void;
+    readonly reset: () => void;
+    readonly push: (item: T) => void;
+    readonly set: (newList: T[]) => void;
+    readonly pop: () => void;
+    readonly update: (predicate: ListIterateeCustom<T, boolean>, newItem: T | ((item: T) => T)) => void;
+}];
+export default useArray;