@boxcustodia/library 0.5.3 → 0.5.5

package/dist/src/components/tablePagination/TablePagination.d.ts

@@ -0,0 +1,21 @@
+import { usePaginationProps } from '../../hooks';
+import { ClassName } from '../../models';
+import { HTMLProps } from 'react';
+import { PageSize } from './TablePagination.model';
+
+interface TablePaginationExtendedProps {
+    containerClassName?: ClassName;
+    containerProps?: HTMLProps<HTMLDivElement>;
+    selectClassName?: ClassName;
+    selectProps?: HTMLProps<HTMLSelectElement>;
+    sizes?: PageSize[] | false;
+}
+type Props = {
+    setPageSize?: (value: PageSize) => void;
+    pageSize?: PageSize;
+} & Omit<usePaginationProps, "pageSize"> & TablePaginationExtendedProps;
+export declare const TablePagination: {
+    ({ containerClassName, containerProps, selectClassName, selectProps, sizes, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/tablePagination/TablePagination.model.d.ts

@@ -0,0 +1,2 @@
+export declare const TABLE_PAGE_SIZES: number[];
+export type PageSize = (typeof TABLE_PAGE_SIZES)[number];

package/dist/src/components/tablePagination/__doc__/TablePagination.stories.d.ts

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

package/dist/src/components/tablePagination/__test__/TablePagination.test.d.ts

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

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

@@ -0,0 +1,2 @@
+export * from './TablePagination';
+export * from './TablePagination.model';

package/dist/src/components/tabs/Tabs.d.ts

@@ -0,0 +1,43 @@
+import { HTMLProps, ReactNode } from 'react';
+
+interface TabsExtendedProps extends TabsProps {
+    listClassName: TabListProps["className"];
+    listProps: TabListProps;
+    triggerClassName: TabTriggerProps["className"];
+    triggerProps: TabTriggerProps;
+    contentClassName: TabContentProps["className"];
+    contentProps: TabContentProps;
+}
+interface TabsProps extends Omit<HTMLProps<HTMLDivElement>, "value" | "defaultValue" | "onChange"> {
+    value?: string;
+    onChange?: (tab: string) => void;
+    defaultValue?: string;
+}
+declare const Tabs: {
+    ({ children, value: prop, onChange, defaultValue, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface TabListProps {
+    children: ReactNode;
+    className?: string;
+}
+declare const TabList: {
+    ({ children, className }: TabListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface TabTriggerProps extends Omit<HTMLProps<HTMLButtonElement>, "onClick" | "type"> {
+    value: string;
+}
+declare const TabTrigger: {
+    ({ value, className, ...props }: TabTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface TabContentProps extends HTMLProps<HTMLDivElement> {
+    value: string;
+}
+declare const TabContent: {
+    ({ value, ...props }: TabContentProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export { Tabs, TabList, TabTrigger, TabContent };
+export type { TabsProps, TabListProps, TabTriggerProps, TabContentProps, TabsExtendedProps, };

package/dist/src/components/tabs/TabsContext.d.ts

@@ -0,0 +1,8 @@
+interface TabsContextProps {
+    activeTab: string;
+    setActiveTab: (tab: string) => void;
+    targetRef: HTMLButtonElement | null;
+    setTargetRef: (element: HTMLButtonElement | null) => void;
+}
+export declare const useTabsContext: () => TabsContextProps, TabsContextProvider: import('react').Provider<TabsContextProps | null>;
+export type { TabsContextProps };

package/dist/src/components/tabs/__doc__/Tabs.stories.d.ts

@@ -0,0 +1,11 @@
+import { Tabs } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const Default: Story;
+/**
+ * Se puede utilizar el hook `useStep` para facilitar el manejo de estado y validaciones
+ */
+export declare const Steps: Story;

package/dist/src/components/tabs/__test__/Tabs.test.d.ts

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

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

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

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

@@ -0,0 +1,26 @@
+import { TagVariant } from './Tag.variants';
+
+type VariantProps = {
+    color?: never;
+    variant?: TagVariant["variant"];
+};
+type ColorProps = {
+    color: string;
+    variant?: "outline" | "borderless";
+};
+type StyleProps = ColorProps | VariantProps;
+type BaseProps = {
+    icon?: React.ReactNode;
+    rounded?: TagVariant["rounded"];
+} & StyleProps & React.HTMLAttributes<HTMLDivElement>;
+type ClosableProps = BaseProps & {
+    closable: true;
+    onClose: () => void;
+};
+type NonClosableProps = BaseProps & {
+    closable?: false;
+    onClose?: never;
+};
+type Props = ClosableProps | NonClosableProps;
+export declare const Tag: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/src/components/tag/Tag.variants.d.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+
+export declare const tagVariants: (props?: ({
+    rounded?: "default" | "square" | "full" | null | undefined;
+    variant?: "error" | "success" | "outline" | "secondary" | "primary" | "borderless" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TagVariant = VariantProps<typeof tagVariants>;

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, };