@boxcustodia/library 0.5.4 → 0.5.5

package/dist/src/components/dropzone/FileTypes.d.ts

@@ -0,0 +1,27 @@
+export declare const FileType: {
+    readonly JPEG: "image/jpeg";
+    readonly JPG: "image/jpg";
+    readonly PNG: "image/png";
+    readonly GIF: "image/gif";
+    readonly WEBP: "image/webp";
+    readonly SVG: "image/svg+xml";
+    readonly PDF: "application/pdf";
+    readonly DOC: "application/msword";
+    readonly DOCX: "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+    readonly XLS: "application/vnd.ms-excel";
+    readonly XLSX: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+    readonly PPT: "application/vnd.ms-powerpoint";
+    readonly PPTX: "application/vnd.openxmlformats-officedocument.presentationml.presentation";
+    readonly TXT: "text/plain";
+    readonly CSV: "text/csv";
+    readonly ZIP: "application/zip";
+    readonly RAR: "application/x-rar-compressed";
+    readonly MP3: "audio/mpeg";
+    readonly WAV: "audio/wav";
+    readonly MP4: "video/mp4";
+    readonly WEBM: "video/webm";
+    readonly JSON: "application/json";
+    readonly XML: "application/xml";
+};
+export type FileTypeValue = (typeof FileType)[keyof typeof FileType];
+export declare const FileTypeGroups: Record<string, FileTypeValue[]>;

package/dist/src/components/dropzone/UploadPrimitives.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+
+type UploadRootProps = {
+    onFileAdd?: (files: File[]) => void;
+    onFileRemove?: (index: number, type: "accepted" | "rejected") => void;
+    onChangeFiles?: (files: File[]) => void;
+    files?: File[];
+    maxFiles?: number;
+    allowedExtensions?: string[];
+    maxFileSize?: number;
+    multiple?: true;
+    className?: string;
+    children?: ReactNode;
+};
+declare const UploadRoot: ({ onFileAdd, onFileRemove, onChangeFiles, files: prop, maxFiles, allowedExtensions, maxFileSize, multiple, children, ...props }: UploadRootProps) => import("react/jsx-runtime").JSX.Element;
+type UploadTriggerProps = {
+    asChild?: boolean;
+} & ComponentPropsWithoutRef<"button">;
+declare const UploadTrigger: ({ asChild, ...props }: UploadTriggerProps) => import("react/jsx-runtime").JSX.Element;
+type UploadContentProps = ComponentPropsWithoutRef<"div"> & {
+    renderRejectedFile?: (file: File) => ReactNode;
+};
+declare const UploadContent: ({ className, ...props }: UploadContentProps) => import("react/jsx-runtime").JSX.Element;
+type UploadFilesListProps = {
+    files: File[];
+    handleFileRemove: (index: number, type: "accepted" | "rejected") => void;
+    fileType: "accepted" | "rejected";
+    children?: ReactNode;
+    renderFile?: (file: File, removeItem: () => void) => ReactNode;
+};
+type UploadFilesProps = Omit<UploadFilesListProps, "fileType" | "handleFileRemove" | "files">;
+export declare const UploadAcceptedFiles: (props: UploadFilesProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UploadRejectedFiles: (props: UploadFilesProps) => import("react/jsx-runtime").JSX.Element;
+type UploadItemProps = ComponentPropsWithoutRef<"div"> & {
+    file: File;
+    onRemove: () => void;
+    renderIcon?: (file: File) => ReactNode;
+};
+declare const UploadItem: ({ file, onRemove, className, renderIcon, ...props }: UploadItemProps) => import("react/jsx-runtime").JSX.Element;
+export { UploadRoot, UploadTrigger, UploadContent, UploadItem };

package/dist/src/components/dropzone/__doc__/Dropzone.stories.d.ts

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Dropzone } from '../Dropzone';
+
+declare const meta: Meta<typeof Dropzone>;
+export default meta;
+type Story = StoryObj<typeof Dropzone>;
+export declare const Default: Story;
+export declare const WithCustomIcon: Story;
+export declare const FileUploader: Story;
+export declare const MultipleFiles: Story;
+export declare const CustomFilePreview: Story;
+/**
+ * El componente Dropzone está compuesto por los componentes primitivos UploadRoot, UploadTrigger, UploadContent, UploadAcceptedFiles y UploadRejectedFiles.
+ *
+ * Este ejemplo muestra como armar el componente Dropzone usando los componentes primitivos.
+ *
+ * ##### Estructura
+ * ```tsx
+ * <UploadRoot>
+ *   <UploadTrigger>
+ *   ...
+ *   </UploadTrigger>
+ *   <UploadContent>
+ *     <UploadAcceptedFiles />
+ *     <UploadRejectedFiles />
+ *   </UploadContent>
+ * </UploadRoot>
+ * ```
+ */
+export declare const Primitives: Story;

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

@@ -0,0 +1,3 @@
+export * from './UploadPrimitives';
+export * from './Dropzone';
+export * from './FileTypes';

package/dist/src/components/dropzone/useDropzone.d.ts

@@ -0,0 +1,17 @@
+type UseDropzoneProps = {
+    onDrop: (acceptedFiles: File[], rejectedFiles: File[]) => void;
+    allowedExtensions?: string[];
+    maxFileSize?: number;
+    maxFiles?: number;
+};
+export declare const useDropzone: ({ onDrop, allowedExtensions, maxFileSize, maxFiles, }: UseDropzoneProps) => {
+    isDragActive: boolean;
+    validateFiles: (files: File[]) => [File[], File[]];
+    dropzoneProps: {
+        onDragOver: (e: React.DragEvent<HTMLDivElement>) => void;
+        onDragEnter: (e: React.DragEvent<HTMLDivElement>) => void;
+        onDragLeave: (e: React.DragEvent<HTMLDivElement>) => void;
+        onDrop: (e: React.DragEvent<HTMLDivElement>) => void;
+    };
+};
+export {};

package/dist/src/components/emptyState/EmptyState.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+type Props = ComponentPropsWithoutRef<"div"> & {
+    icon?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+};
+export declare const EmptyState: {
+    ({ icon, title, description, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/emptyState/__doc__/EmptyState.stories.d.ts

@@ -0,0 +1,23 @@
+import { EmptyState } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * El componente EmptyState proporciona una interfaz visual para mostrar cuando no hay datos o contenido disponible.
+ *
+ * ### Características principales
+ * - Soporte para íconos personalizados
+ * - Título y descripción configurables
+ * - Capacidad de agregar acciones mediante children
+ */
+declare const meta: Meta<typeof EmptyState>;
+export default meta;
+type Story = StoryObj<typeof EmptyState>;
+/**
+ * Ejemplo básico del EmptyState con título y descripción
+ */
+export declare const Default: Story;
+/**
+ * Ejemplo con ícono personalizado y botones de acción.
+ * Demuestra cómo agregar interactividad al estado vacío.
+ */
+export declare const Actions: Story;

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

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

package/dist/src/components/field/Field.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+interface Props extends ComponentPropsWithoutRef<"div"> {
+    label?: ReactNode;
+    labelClassName?: string;
+    labelProps?: ComponentPropsWithoutRef<"label">;
+    error?: ReactNode;
+    errorClassName?: string;
+    errorProps?: ComponentPropsWithoutRef<"p">;
+}
+export declare const Field: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/src/components/field/__doc__/Field.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Field } from '../..';
+
+/**
+ * Componente Field que representa un campo de formulario.
+ *
+ * Agrega un label al campo y un mensaje de error opcional.
+ **/
+declare const meta: Meta<typeof Field>;
+export default meta;
+type Story = StoryObj<typeof Field>;
+export declare const Default: Story;

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

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

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

@@ -0,0 +1,28 @@
+import { ControllerRenderProps, FieldPath, FieldValues, UseFormReturn } from 'react-hook-form';
+import * as React from "react";
+type Props<TFieldValues extends FieldValues> = {
+    onSubmit: (data: TFieldValues) => void;
+    form: UseFormReturn<TFieldValues>;
+    children: React.ReactNode;
+    className?: string;
+    id?: string;
+};
+declare const Form: <TFieldValues extends FieldValues>({ onSubmit, id, form, children, className, }: Props<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    name: TName;
+    label: string;
+    description?: string;
+    render: (field: ControllerRenderProps<TFieldValues, TName>) => React.ReactNode;
+    itemProps?: React.ComponentProps<typeof FormItem>;
+    labelProps?: React.ComponentProps<typeof FormLabel>;
+    controlProps?: React.ComponentProps<typeof FormControl>;
+    descriptionProps?: React.ComponentProps<typeof FormDescription>;
+    messageProps?: React.ComponentProps<typeof FormMessage>;
+};
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, render, itemProps, labelProps, controlProps, descriptionProps, messageProps, }: FormFieldProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-slot').SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, };

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

@@ -0,0 +1,120 @@
+import { Form } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+
+declare const meta: Meta<typeof Form>;
+export default meta;
+type Story = StoryObj<typeof Form>;
+/**
+ * Para utilizar el componente `Form`, sigue estos pasos:
+ *
+ * **Crear un esquema de validación con Zod**:
+ * El primer paso es definir un esquema de validación usando `zod`.
+ * Este esquema establecerá las reglas para los datos del formulario,
+ * como los tipos de datos esperados y los mensajes de error personalizados.
+ *
+ * ```tsx
+ * const FormSchema = z.object({
+ *   username: z.string().min(1, {
+ *     message: "Debe tener al menos dos carácteres",
+ *  }),
+ *  email: z
+ *     .string()
+ *     .min(1, { message: "Debe ingresar un correo electrónico" })
+ *     .email("Debe ingresar un correo electrónico válido"),
+ * });
+ *    ```
+ *
+ * **Llamar al hook `useForm`**:
+ * Una vez definido el esquema, debes llamar al hook `useForm`
+ * para inicializar el formulario con el esquema de validación.
+ * También puedes definir valores predeterminados para los campos del formulario.
+ *
+ * ```tsx
+ * const form = useForm<MyForm>(FormSchema, {
+ *   defaultValues: {
+ *     username: "",
+ *     email: "",
+ *   },
+ * });
+ * ```
+ *
+ * **Usar el componente `Form`**:
+ * Finalmente, utiliza el componente `Form` pasándole la instancia
+ * del formulario creada por el hook `useForm`. Dentro de este componente,
+ * puedes definir los campos del formulario utilizando `FormField` y otros
+ * componentes de entrada, como `Input`, `Select`, y `TextArea`.
+ *
+ * ```tsx
+ * <Form form={form} onSubmit={onSubmit}>
+ *   <FormField
+ *     name="username"
+ *     label="Username"
+ *     description="Ingresa tu nombre de usuario"
+ *     render={(field) => <Input {...field} />}
+ *   />
+ *   <FormField
+ *     name="email"
+ *     label="Email"
+ *     description="Ingresa tu correo electrónico"
+ *     render={(field) => <Input {...field} type="email" />}
+ *   />
+ * </Form>
+ * ```
+ *
+ * **Manejo del envío del formulario**:
+ * Define una función `onSubmit` que será llamada cuando el formulario sea enviado.
+ * Esta función recibirá los datos validados según el esquema y permitirá manejar
+ * el envío, como mostrar un mensaje de éxito o enviar los datos a un servidor.
+ *
+ * ```tsx
+ * const onSubmit = (data: MyForm) => {
+ *   ...
+ * }
+ * ```
+ */
+export declare const Default: Story;
+/**
+ * **Formulario controlado**:
+ * Puedes controlar los valores del formulario programáticamente usando los métodos
+ * que proporciona `react-hook-form`. En este ejemplo, mostramos cómo usar `setValue` para
+ * actualizar campos específicos del formulario.
+ *
+ * ```tsx
+ * const form = useForm<MyForm>(schema);
+ *
+ * // Actualizar valores individuales
+ * form.setValue('username', 'John');
+ * form.setValue('fruit', 'apple');
+ * ```
+ *
+ * Esto es útil cuando necesitas:
+ * - Establecer valores por defecto de forma asíncrona
+ * - Actualizar el formulario basado en acciones del usuario
+ * - Rellenar el formulario con datos externos
+ *
+ * El componente `Form` reaccionará automáticamente a estos cambios y
+ * actualizará la interfaz de usuario en consecuencia.
+ */
+export declare const Controlled: Story;
+/**
+ * **Valores por defecto asíncronos**:
+ * El componente Form también admite la carga asíncrona de valores por defecto.
+ * Esto es útil cuando necesitas obtener los valores iniciales desde una API
+ * o cualquier otra fuente asíncrona.
+ *
+ * ```tsx
+ * const fetchDefaultValues = async () => {
+ *   const response = await api.getUser();
+ *   return response.data;
+ * };
+ *
+ * const form = useForm({
+ *   defaultValues: async () => fetchDefaultValues()
+ * });
+ * ```
+ *
+ * En este ejemplo, los valores del formulario se cargarán después de una
+ * simulación de llamada a API. Durante la carga, los campos permanecerán
+ * vacíos hasta que se resuelva la promesa.
+ */
+export declare const AsyncDefaultValues: Story;

package/dist/src/components/form/context/FormFieldContext.d.ts

@@ -0,0 +1,6 @@
+import { FieldValues, FieldPath } from 'react-hook-form';
+
+export type FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    name: TName;
+};
+export declare const useFormFieldContext: () => FormFieldContextValue<FieldValues, string>, FormFieldContextProvider: import('react').Provider<FormFieldContextValue<FieldValues, string> | null>;

package/dist/src/components/form/context/FormItemContext.d.ts

@@ -0,0 +1,4 @@
+export type FormItemContextValue = {
+    id: string;
+};
+export declare const useFormItemContext: () => FormItemContextValue, FormItemContextProvider: import('react').Provider<FormItemContextValue | null>;

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

@@ -0,0 +1,2 @@
+export * from './FormItemContext';
+export * from './FormFieldContext';

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

@@ -0,0 +1,2 @@
+export * from './useForm';
+export * from './useFormField';

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

@@ -0,0 +1,4 @@
+import { FieldValues, UseFormProps } from 'react-hook-form';
+import { ZodType } from 'zod';
+
+export declare function useForm<T extends FieldValues = FieldValues>(schema: ZodType<T>, options?: Partial<UseFormProps<T>>): import('react-hook-form').UseFormReturn<T, any, undefined>;

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

@@ -0,0 +1,12 @@
+export declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import('react-hook-form').FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};

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

@@ -0,0 +1,2 @@
+export * from './Form';
+export * from './hooks';

package/dist/src/components/heading/Heading.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import { HeadingVariants } from './Heading.variants';
+
+type Props<C extends React.ElementType> = VariantProps<typeof HeadingVariants> & {
+    as?: C;
+} & Omit<React.ComponentPropsWithoutRef<C>, "as">;
+export declare const Heading: {
+    <C extends React.ElementType = "h2">({ className, size, weight, as, ...props }: Props<C>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/heading/Heading.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const HeadingVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/src/components/heading/__doc__/Heading.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Heading } from '../..';
+
+declare const meta: Meta<typeof Heading>;
+export default meta;
+type Story = StoryObj<typeof Heading>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const Weights: Story;
+export declare const As: Story;

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

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

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

@@ -0,0 +1,42 @@
+export * from './alertdialog';
+export * from './autoComplete';
+export * from './avatar';
+export * from './backgroundImage';
+export * from './button';
+export * from './calendar';
+export * from './card';
+export * from './center';
+export * from './checkbox';
+export * from './combobox';
+export * from './datepicker';
+export * from './dialog';
+export * from './divider';
+export * from './dropzone';
+export * from './emptyState';
+export * from './field';
+export * from './form';
+export * from './heading';
+export * from './input';
+export * from './kbd';
+export * from './label';
+export * from './loader';
+export * from './menu';
+export * from './multiSelect';
+export * from './numberInput';
+export * from './pagination';
+export * from './popover';
+export * from './select';
+export * from './show';
+export * from './skeleton';
+export * from './stack';
+export * from './switch';
+export * from './table';
+export * from './tablePagination';
+export * from './tabs';
+export * from './tag';
+export * from './textarea';
+export * from './toast';
+export * from './tooltip';
+export * from './tree';
+export * from './stepper';
+export * from './timeline';

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

@@ -0,0 +1,13 @@
+import { ComponentProps } from 'react';
+import { OverrideProps } from '../../models';
+
+type Props = OverrideProps<ComponentProps<"input">, {
+    /** valor del input */
+    value?: string;
+    /** functión a ejecutar cuando el valor cambia */
+    onChange?: (value: string) => void;
+    /** valor por defecto del input */
+    defaultValue?: string;
+}>;
+export declare const Input: import('react').ForwardRefExoticComponent<Omit<Props, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Input } from '../..';
+
+/**
+ * Componente principal para ingresar datos
+ */
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const File: Story;
+/**
+ * El componente permite recibir una referencia para manipular el componente
+ */
+export declare const Reference: Story;
+/**
+ * El componente se puede controlar con un estado
+ */
+export declare const Controlled: Story;

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

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

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

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

package/dist/src/components/kbd/Kbd.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import { ComponentPropsWithoutRef } from 'react';
+import { KbdVariants } from './Kbd.variants';
+
+type Props = ComponentPropsWithoutRef<"kbd"> & VariantProps<typeof KbdVariants>;
+export declare const Kbd: {
+    ({ variant, size, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/kbd/Kbd.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const KbdVariants: (props?: ({
+    variant?: "default" | "error" | "outline" | "secondary" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/src/components/kbd/__doc__/Kbd.stories.d.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Kbd } from '../..';
+
+declare const meta: Meta<typeof Kbd>;
+export default meta;
+type Story = StoryObj<typeof Kbd>;
+export declare const Default: Story;
+export declare const Secondary: Story;
+export declare const Error: Story;
+export declare const Outline: Story;
+export declare const WithText: Story;
+/**
+ * Se puede utilizar el atributo `size` para cambiar el tamaño del componente
+ * los tamaños disponibles son `default`, `sm` y `lg`
+ */
+export declare const Sizes: Story;

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

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

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

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;

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

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

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

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

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

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

package/dist/src/components/loader/Loader.d.ts

@@ -0,0 +1,12 @@
+import { LucideProps } from 'lucide-react';
+import { LoaderVariants } from './loader.variants';
+
+type Props = LucideProps & LoaderVariants & {
+    center?: boolean;
+    containerClassName?: string;
+};
+export declare const Loader: {
+    ({ center, containerClassName, variant, size, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/loader/__doc__/Loader.stories.d.ts

@@ -0,0 +1,43 @@
+import { Loader } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * El componente Loader proporciona una indicación visual de que una operación está en progreso.
+ *
+ * ### Características principales
+ * - Múltiples variantes de color
+ * - Diferentes tamaños
+ * - Opción para centrado automático
+ * - Personalizable mediante props
+ *
+ * ### Uso básico
+ * ```tsx
+ * <Loader />
+ * ```
+ */
+declare const meta: Meta<typeof Loader>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Ejemplo básico del loader con configuración por defecto
+ */
+export declare const Default: Story;
+/**
+ * El loader viene con diferentes variantes de color para adaptarse a distintos contextos `primary`, `secondary`, `ghost`, `error`, `success`
+ */
+export declare const Variants: Story;
+/**
+ * Disponible en tres tamaños diferentes:
+ * - `sm`: Pequeño (16x16px)
+ * - `default`: Mediano (28x28px)
+ * - `lg`: Grande (40x40px)
+ */
+export declare const Sizes: Story;
+/**
+ * Con la prop `center={true}`, el loader se centrará automáticamente en su contenedor
+ */
+export declare const Centered: Story;
+/**
+ * El loader puede ser personalizado con props adicionales como color y tamaño
+ */
+export declare const Custom: Story;

package/dist/src/components/loader/__test__/Loader.test.d.ts

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

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

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

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

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+
+export declare const loaderVariants: (props?: ({
+    variant?: "error" | "success" | "secondary" | "ghost" | "primary" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type LoaderVariants = VariantProps<typeof loaderVariants>;