@boxcustodia/library 1.2.0 → 1.2.1

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,43 @@
+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 './password';
+export * from './popover';
+export * from './select';
+export * from './show';
+export * from './skeleton';
+export * from './stack';
+export * from './stepper';
+export * from './switch';
+export * from './table';
+export * from './tablePagination';
+export * from './tabs';
+export * from './tag';
+export * from './textarea';
+export * from './timeline';
+export * from './toast';
+export * from './tooltip';
+export * from './tree';

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

@@ -0,0 +1,16 @@
+import { OverrideProps } from '../../models';
+import { ComponentProps } from 'react';
+
+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: {
+    ({ value: prop, onChange, defaultValue: defaultProp, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,38 @@
+import { Input } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * 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;
+/**
+ * ThemeProvider permite customizar de manera global las propiedades del componente
+ *
+ * Ejemplo:
+ * ```tsx
+ * <ThemeProvider
+ *   theme={{
+ *     Input: {
+ *       placeholder: "Placeholder por defecto...",
+ *       className: "bg-gray-200 rounded-full placeholder:text-gray-400",
+ *     },
+ *   }}
+ * >
+ *   <Input />
+ * </ThemeProvider>
+ * ```
+ */
+export declare const Theme: 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,7 @@
+import * as React from "react";
+type Props = React.ComponentProps<"label">;
+export declare const Label: {
+    ({ className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

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

package/dist/src/components/menu/Menu.d.ts

@@ -0,0 +1,45 @@
+import { default as React, ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+import { MenuItem, MenuCheckboxItem, MenuRadioItem, MenuLabel, MenuSeparator, MenuSubTrigger, MenuContent, MenuShortcut } from './MenuPrimitives';
+
+type MenuShortcutProps = ComponentPropsWithoutRef<typeof MenuShortcut>;
+type Shortcut = Partial<{
+    shortcut: MenuShortcutProps["keys"];
+    onShortcut: MenuShortcutProps["handler"];
+    shortcutOptions: MenuShortcutProps["options"];
+}>;
+type MenuItemBase<T extends ElementType> = ComponentPropsWithoutRef<T> & {
+    label?: ReactNode;
+    type: string;
+} & Shortcut;
+type MenuItemItem = MenuItemBase<typeof MenuItem> & {
+    type: "item";
+};
+type MenuItemCheckbox = MenuItemBase<typeof MenuCheckboxItem> & {
+    type: "checkbox";
+};
+type MenuItemRadio = MenuItemBase<typeof MenuRadioItem> & {
+    type: "radio";
+};
+type MenuItemLabel = MenuItemBase<typeof MenuLabel> & {
+    type: "label";
+};
+type MenuItemSeparator = MenuItemBase<typeof MenuSeparator> & {
+    type: "separator";
+};
+type MenuItemSubmenu = MenuItemBase<typeof MenuSubTrigger> & {
+    type: "submenu";
+    items: MenuItemType[];
+};
+export type MenuItemType = MenuItemItem | MenuItemCheckbox | MenuItemRadio | MenuItemLabel | MenuItemSeparator | MenuItemSubmenu;
+export interface GenericMenuProps {
+    trigger: React.ReactNode;
+    items: MenuItemType[];
+    side?: "top" | "right" | "bottom" | "left";
+    offset?: ComponentPropsWithoutRef<typeof MenuContent>["sideOffset"];
+    contentProps?: ComponentPropsWithoutRef<typeof MenuContent>;
+}
+export declare const Menu: {
+    ({ trigger, items, contentProps, side, offset, }: GenericMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/menu/MenuPrimitives.d.ts

@@ -0,0 +1,66 @@
+import { HotkeyOptions, Keys } from '../../hooks/useHotkey/useHotkey';
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+declare const MenuRoot: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const MenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const MenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const MenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const MenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+type MenuSubTriggerProps = React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+};
+declare const MenuSubTrigger: {
+    ({ className, inset, children, ...props }: MenuSubTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+type MenuSubContentProps = React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>;
+declare const MenuSubContent: {
+    ({ className, ...props }: MenuSubContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+type MenuContentProps = React.ComponentProps<typeof DropdownMenuPrimitive.Content>;
+declare const MenuContent: {
+    ({ className, sideOffset, ...props }: MenuContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+type MenuItemProps = React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+};
+declare const MenuItem: {
+    ({ className, inset, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+type MenuCheckboxItemProps = React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>;
+declare const MenuCheckboxItem: {
+    ({ className, children, checked, ...props }: MenuCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+type MenuRadioItemProps = React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>;
+declare const MenuRadioItem: {
+    ({ className, children, ...props }: MenuRadioItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+type MenuLabelProps = React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+};
+declare const MenuLabel: {
+    ({ className, inset, ...props }: MenuLabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+type MenuSeparatorProps = React.ComponentProps<typeof DropdownMenuPrimitive.Separator>;
+declare const MenuSeparator: {
+    ({ className, ...props }: MenuSeparatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+type MenuShortcutProps = React.ComponentPropsWithoutRef<"span"> & {
+    keys: Keys;
+    handler: (event: KeyboardEvent) => any;
+    options?: HotkeyOptions;
+};
+declare const MenuShortcut: {
+    ({ className, keys, handler, options, ...props }: MenuShortcutProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuShortcut, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, };

package/dist/src/components/menu/Util.d.ts

@@ -0,0 +1,3 @@
+import { MenuItemType } from './Menu';
+
+export declare const renderMenuItem: (item: MenuItemType, children?: any) => import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/menu/__doc__/Menu.stories.d.ts

@@ -0,0 +1,16 @@
+import { Menu } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+
+declare const meta: Meta<typeof Menu>;
+export default meta;
+type Story = StoryObj<typeof Menu>;
+/**
+ * ```tsx
+ * type ItemType = "item" | "checkbox" | "radio" | "label" | "separator" | "submenu"
+ * ```
+ */
+export declare const Generic: Story;
+/**
+ * Se exportan los primitivos para poder construir cualquier tipo de Menu
+ */
+export declare const Primitive: Story;

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

@@ -0,0 +1,2 @@
+export * from './MenuPrimitives';
+export * from './Menu';

package/dist/src/components/multiSelect/MultiSelect.d.ts

@@ -0,0 +1,50 @@
+import { Option, OverrideProps } from '../../models';
+import { VariantProps } from 'class-variance-authority';
+import { multiSelectVariants } from './MultiSelect.variants';
+
+import * as React from "react";
+type OpenProps = {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+};
+type MultiSelectProps<TItem extends Record<string, any>> = OverrideProps<React.ButtonHTMLAttributes<HTMLButtonElement> & OpenProps & VariantProps<typeof multiSelectVariants>, {
+    items: TItem[];
+    /**
+     * Identificador del valor del elemento
+     * @default "value"
+     */
+    valueKey?: keyof TItem;
+    /**
+     * Identificador del label del elemento
+     * @default "label"
+     */
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    defaultValue?: string[];
+    labelKey?: keyof TItem;
+    placeholder?: string;
+    /**
+     * Cantidad máxima de elementos que se van a visualizar
+     * @default 3
+     */
+    maxCount?: number;
+    className?: string;
+    renderOption?: (item: TItem) => React.ReactNode;
+    withCheckbox?: boolean;
+    /**
+     * Para mostrar o no la barra de búsqueda
+     * @default true
+     */
+    showSearch?: boolean;
+    /**
+     * Para mostrar o no el "Seleccionar todos"
+     * @default true
+     */
+    showSelectAll?: boolean;
+}>;
+export declare const MultiSelect: {
+    <TItem extends Record<string, any> = Option<string>>({ items, value, valueKey, labelKey, onChange, variant, defaultValue, placeholder, maxCount, className, renderOption, withCheckbox, showSearch, showSelectAll, ...props }: MultiSelectProps<TItem>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/multiSelect/MultiSelect.variants.d.ts

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