@boxcustodia/library 0.5.3 → 0.5.5

package/dist/src/components/backgroundImage/__doc__/BackgroundImage.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { BackgroundImage } from '../..';
+
+/**
+ * Componente que facilita el manejo de imágenes de fondo.
+ */
+declare const meta: Meta<typeof BackgroundImage>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/components/backgroundImage/__test__/BackgroundImage.test.d.ts

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

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

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

package/dist/src/components/button/BaseButton.d.ts

@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes } from 'react';
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+    loading?: boolean;
+    showLoader?: boolean;
+}
+export declare const BaseButton: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/src/components/button/Button.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
+import { buttonVariants } from './Button.variants';
+import { BaseButton } from './BaseButton';
+
+type BaseButtonProps = ComponentProps<typeof BaseButton>;
+type Props = BaseButtonProps & VariantProps<typeof buttonVariants>;
+export declare const Button: import('react').ForwardRefExoticComponent<Omit<Props, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/src/components/button/Button.variants.d.ts

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

package/dist/src/components/button/__components/LoadingIcon.d.ts

@@ -0,0 +1,10 @@
+import { LucideProps } from 'lucide-react';
+
+interface LoadingIconProps extends LucideProps {
+    loading?: boolean;
+}
+declare const LoadingIcon: {
+    ({ loading, ...props }: LoadingIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { LoadingIcon, type LoadingIconProps };

package/dist/src/components/button/__doc__/Button.stories.d.ts

@@ -0,0 +1,104 @@
+import { Button } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * Componente principal para ejecutar acciones.
+ *
+ * Extendiende al componente `BaseButton` agregándole variantes
+ */
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Default: Story;
+export declare const Outline: Story;
+export declare const Secondary: Story;
+export declare const Ghost: Story;
+export declare const Link: Story;
+export declare const Error: Story;
+export declare const Success: Story;
+export declare const WithIcon: Story;
+export declare const Loading: Story;
+/**
+ * Al setear `asChild` a `true`, puedes renderizar cualquier elemento con los estilos, props y referencias del `Button`.
+ *
+ * En este caso, se usa un elemento `a` que hereda los estilos, props y referencias del `Button`.
+ * Esto es útil para aplicar los mismos estilos y garantizar consistencia en la interfaz de usuario de su aplicación.
+ * Se puede verificar abriendo la consola del navegador.
+ */
+export declare const AsChild: Story;
+/**
+ * El componente recibe todas las propiedades de `button`, por lo que se puede customizar los estilos, accesibilidad, referencias, eventos, etc
+ */
+export declare const Custom: Story;
+/**
+ * Estos son los tamanos disponibles para el `Button`.
+ */
+export declare const Sizes: Story;
+/**
+ * #### Crea tus propias variantes
+ * En caso de que necesites customizar demasiado a tu componente, lo mejor es crear tus propias variantes.
+ * Para esto se puede importar el componente `BaseButton` el cuál no incluye estilos por defecto y se puede extender para crear variantes personalizadas.
+ *
+ * A continuación, se definen las variantes de botón que puedes extender o modificar a tus necesidades.
+ *
+ * ```tsx
+ * import { ComponentProps, forwardRef } from 'react';
+ * import { cva, type VariantProps } from 'class-variance-authority';
+ * import { BaseButton, cn } from '@boxcustodia/library';
+ *
+ * export const buttonVariants = cva(
+ *   [
+ *     'flex items-center justify-center gap-2',
+ *     'text-sm font-medium transition-all',
+ *     'rounded-md ring-offset-background',
+ *     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+ *     'disabled:pointer-events-none disabled:opacity-50',
+ *     'hover:brightness-105',
+ *   ],
+ *   {
+ *     variants: {
+ *       variant: {
+ *         default: "bg-primary text-primary-foreground",
+ *         error: "bg-error text-error-foreground",
+ *         success: "bg-success text-success-foreground",
+ *         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ *         secondary: "bg-secondary text-secondary-foreground hover:brightness-100 hover:bg-secondary/80",
+ *         ghost: "hover:bg-accent hover:brightness-100 hover:text-accent-foreground",
+ *         link: "text-primary underline-offset-4 hover:underline",
+ *         white: 'bg-white text-primary', <-- Nueva variante
+ *         black: 'bg-black text-white', <-- Nueva variante
+ *       },
+ *       size: {
+ *         default: "h-10 px-4 py-2",
+ *         sm: "h-9 rounded-md px-3",
+ *         lg: "h-11 rounded-md px-8",
+ *         icon: "w-10 aspect-square",
+ *       },
+ *     },
+ *     defaultVariants: {
+ *       variant: 'default',
+ *       size: 'default',
+ *     },
+ *   },
+ * );
+ *
+ * type BaseButtonProps = ComponentProps<typeof BaseButton>;
+ * typer Props = BaseButtonProps, VariantProps<typeof buttonVariants>
+ *
+ * export const Button = forwardRef<HTMLButtonElement, Props>(
+ *   ({ className, variant, size, ...props }, ref) => {
+ *     return (
+ *       <BaseButton
+ *         ref={ref}
+ *         {...props}
+ *         className={cn(buttonVariants({ variant, size }), className)}
+ *       />
+ *     );
+ *   },
+ * );
+ *
+ * Button.displayName = 'Button';
+ * ```
+ *
+ */
+export declare const CustomVariants: Story;

package/dist/src/components/button/__test__/Button.test.d.ts

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

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

@@ -0,0 +1,2 @@
+export * from './Button';
+export * from './BaseButton';

package/dist/src/components/calendar/Calendar.d.ts

@@ -0,0 +1,16 @@
+import { CalendarModeProps, CalendarView, Mode } from './Calendar.model';
+import { CalendarNavigationProps, MonthViewProps } from './components';
+import { ClassName } from '../../models';
+
+type NavigationProps = Pick<CalendarNavigationProps, "goNextProps" | "goBackProps" | "changeViewProps">;
+type CalendarProps<T extends Mode> = CalendarModeProps<T> & NavigationProps & {
+    initialView?: CalendarView;
+    initialDate?: Date;
+    monthViewProps?: Omit<MonthViewProps, "navigationDate">;
+    className?: ClassName;
+};
+export declare const Calendar: {
+    <T extends Mode>(props: CalendarProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/calendar/Calendar.model.d.ts

@@ -0,0 +1,51 @@
+export type CalendarView = "month" | "year" | "decade";
+export type Mode = "single" | "range" | "multiple";
+export type DateSingle = Date | null;
+export type DateRange = {
+    start: DateSingle;
+    end: DateSingle;
+};
+export type DateMultiple = Date[];
+export type DateMatcher = DateSingle | DateRange | DateMultiple;
+export type SingleDateValue = {
+    value?: DateSingle;
+    defaultValue?: DateSingle;
+    onChange?: (date: DateSingle) => void;
+};
+export type RangeDateValue = {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (date: DateRange) => void;
+};
+export type MultipleDateValue = {
+    value?: Date[];
+    defaultValue?: Date[];
+    onChange?: (dates: Date[]) => void;
+};
+export type CalendarBaseProps<T extends Mode> = {
+    disabled?: (date: Date) => boolean;
+    mode: T;
+};
+export type CalendarModeProps<T extends Mode> = CalendarBaseProps<T> & {
+    single: SingleDateValue;
+    range: RangeDateValue;
+    multiple: MultipleDateValue;
+}[T];
+export interface ViewProps {
+    value: Date;
+    onChange: (date: Date) => void;
+}
+export type CalendarState = {
+    defaultStartDate: Date;
+    mode: Mode;
+    isSingleMode: boolean;
+    isRangeMode: boolean;
+    selected: DateMatcher;
+    selectDate: (date: Date) => void;
+    isSelected: (day: Date) => boolean;
+    isInRange: (day: Date) => boolean;
+    isFirstDayFromRange: (day: Date) => boolean;
+    isLastDayFromRange: (day: Date) => boolean;
+};
+export declare const monthNames: readonly ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
+export declare const weeksDays: string[];

package/dist/src/components/calendar/__doc__/Calendar.stories.d.ts

@@ -0,0 +1,65 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Calendar } from '../..';
+
+declare const meta: Meta<typeof Calendar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Single: Story;
+/**
+ * El modo range permite seleccionar un rango de fecha en el calendario. La forma de `value` debe ser un objeto de la siguiente forma
+ *
+ * ```tsx
+ * interface DateRange {
+ *   start: Date
+ *   end: Date
+ * }
+ * ```
+ */
+export declare const Range: Story;
+export declare const Multiple: Story;
+/**
+ * Se puede definir cuál va a ser la vista inicial del calendario con la propiedad `initialView`, los posibles valores son `month`, `year` y `decade`.
+ */
+export declare const InitialView: {
+    args: {
+        initialView: string;
+    };
+};
+/**
+ * Se puede utilizar la propiedad `disabled` para deshabilitar ciertas fechas del calendario.
+ * Ejemplo de `disabled` desactivar los fines de semana
+ *
+ * ```tsx
+ * disabled: (date: Date) => isWeekend(date)
+ * ```
+ */
+export declare const Disabled: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+/**
+ * Se exponen los siguientes atributos:
+ *
+ * | Atributo | Descripción |
+ * | --- | --- |
+ * | `data-state-mode='single'` | Si el modo es `single`. |
+ * | `data-state-mode='multiple'` | Si el modo es `multiple`. |
+ * | `data-state-mode='range'` | Si el modo es `range`. |
+ * | `data-state-today=true` | Si el día representa el día de hoy. |
+ * | `data-state-selected=true` | Si el día está seleccionado. |
+ * | `data-state-different-month=true` | Si el día pertenece a un mes diferente. |
+ * | `data-state-weekend=true` | Si el día es fin de semana. |
+ * | `data-state-range-mode=true` | Si el componente está en modo de rango. |
+ * | `data-state-first-day=true` | Si el día es el primer día de un rango. |
+ * | `data-state-last-day=true` | Si el día es el último día de un rango. |
+ * | `data-state-in-range=true` | Si el día está dentro de un rango y está seleccionado. |
+ */
+export declare const CustomStyles: {
+    args: {
+        mode: string;
+        className: string;
+        monthViewProps: {
+            weekDaysClassName: string;
+            dayClassName: string;
+        };
+    };
+};

package/dist/src/components/calendar/__test__/Calendar.test.d.ts

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

package/dist/src/components/calendar/components/CalendarNavigation.d.ts

@@ -0,0 +1,24 @@
+import { Button } from '../..';
+import { ComponentProps, HTMLProps } from 'react';
+import { CalendarView } from '../Calendar.model';
+
+type ButtonProps = ComponentProps<typeof Button>;
+interface CalendarNavigationProps {
+    view: CalendarView;
+    setView: (view: CalendarView) => void;
+    value: Date;
+    previousMonth: () => void;
+    nextMonth: () => void;
+    previousYear: () => void;
+    nextYear: () => void;
+    previousDecade: () => void;
+    nextDecade: () => void;
+    goBackProps?: Omit<ButtonProps, "onClick">;
+    goNextProps?: Omit<ButtonProps, "onClick">;
+    changeViewProps?: Omit<HTMLProps<HTMLButtonElement>, "onClick">;
+}
+declare const CalendarNavigation: {
+    ({ view, setView, value, previousMonth, nextMonth, previousYear, nextYear, previousDecade, nextDecade, goBackProps, goNextProps, changeViewProps, }: CalendarNavigationProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { CalendarNavigation, type CalendarNavigationProps };

package/dist/src/components/calendar/components/Day.d.ts

@@ -0,0 +1,11 @@
+import { HTMLProps } from 'react';
+
+type DayProps = {
+    day: Date;
+    navigationDate: Date;
+} & HTMLProps<HTMLButtonElement>;
+declare const Day: {
+    ({ day, navigationDate, className, ...props }: DayProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Day, type DayProps };

package/dist/src/components/calendar/components/DecadeView.d.ts

@@ -0,0 +1,7 @@
+import { ViewProps } from '../Calendar.model';
+
+declare const DecadeView: {
+    ({ value, onChange }: ViewProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DecadeView, type ViewProps as DecadeViewProps };

package/dist/src/components/calendar/components/MonthView.d.ts

@@ -0,0 +1,17 @@
+import { DayProps } from './Day';
+import { WeekDaysProps } from './WeekDays';
+import { ClassName } from '../../../models';
+
+type MonthViewProps = {
+    navigationDate: Date;
+    disabled?: (date: Date) => boolean;
+    dayClassName?: ClassName;
+    dayProps?: DayProps;
+    weekDaysClassName?: ClassName;
+    weekDaysProps?: WeekDaysProps;
+};
+declare const MonthView: {
+    ({ navigationDate, disabled, weekDaysClassName, weekDaysProps, dayClassName, dayProps, }: MonthViewProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { MonthView, type MonthViewProps };

package/dist/src/components/calendar/components/WeekDays.d.ts

@@ -0,0 +1,8 @@
+import { HTMLProps } from 'react';
+
+type WeekDaysProps = HTMLProps<HTMLDivElement>;
+declare const WeekDays: {
+    (props: WeekDaysProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { WeekDays, type WeekDaysProps };

package/dist/src/components/calendar/components/YearView.d.ts

@@ -0,0 +1,7 @@
+import { ViewProps } from '../Calendar.model';
+
+declare const YearView: {
+    ({ value, onChange }: ViewProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { YearView, type ViewProps as YearViewProps };

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

@@ -0,0 +1,6 @@
+export * from './CalendarNavigation';
+export * from './Day';
+export * from './DecadeView';
+export * from './MonthView';
+export * from './WeekDays';
+export * from './YearView';

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

@@ -0,0 +1,4 @@
+export { default as useCalendar } from './useCalendar';
+export { default as useCalendarNavigation } from './useCalendarNavigation';
+export { default as useRangeCalendar } from './useRangeCalendar';
+export { default as useSingleCalendar } from './useSingleCalendar';

package/dist/src/components/calendar/hooks/useCalendar.d.ts

@@ -0,0 +1,16 @@
+import { CalendarModeProps, CalendarState, DateMatcher, Mode } from '../Calendar.model';
+
+export declare const CalendarContext: import('react').Context<CalendarState>;
+declare function useCalendar<T extends Mode>(props: CalendarModeProps<T>): {
+    isFirstDayFromRange: (day: Date) => boolean;
+    isLastDayFromRange: (day: Date) => boolean;
+    defaultStartDate: Date;
+    isSingleMode: boolean;
+    isRangeMode: boolean;
+    selected: DateMatcher;
+    isSelected: (day: Date) => boolean;
+    selectDate: (date: Date) => void;
+    isInRange: (day: Date) => boolean;
+    mode: T;
+};
+export default useCalendar;

package/dist/src/components/calendar/hooks/useCalendarNavigation.d.ts

@@ -0,0 +1,14 @@
+import { DateSingle } from '../Calendar.model';
+
+declare function useCalendarNavigation(value?: DateSingle): {
+    navigationDate: Date;
+    setMonth: (newDate: Date) => void;
+    setYear: (newDate: Date) => void;
+    previousMonth: () => void;
+    nextMonth: () => void;
+    previousYear: () => void;
+    nextYear: () => void;
+    previousDecade: () => void;
+    nextDecade: () => void;
+};
+export default useCalendarNavigation;

package/dist/src/components/calendar/hooks/useMultipleCalendar.d.ts

@@ -0,0 +1,7 @@
+import { DateMultiple } from '../Calendar.model';
+
+declare function useMultipleCalendar(selected: DateMultiple | undefined, setSelected: (dates: DateMultiple) => void): {
+    selectMultipleDate: (date: Date) => void;
+    isMultipleSelected: (day: Date) => boolean;
+};
+export default useMultipleCalendar;

package/dist/src/components/calendar/hooks/useRangeCalendar.d.ts

@@ -0,0 +1,9 @@
+import { DateRange } from '../Calendar.model';
+
+declare function useRangeCalendar(selected: DateRange | undefined, setSelected: any, disabled?: (date: Date) => boolean): {
+    selectRangeDate: (date: Date) => void;
+    isInRange: (day: Date) => boolean;
+    isFirstDayFromRange: (day: Date) => boolean;
+    isLastDayFromRange: (day: Date) => boolean;
+};
+export default useRangeCalendar;

package/dist/src/components/calendar/hooks/useSingleCalendar.d.ts

@@ -0,0 +1,7 @@
+import { DateSingle } from '../Calendar.model';
+
+declare function useSingleCalendar(selected: DateSingle | undefined, setSelected: any): {
+    selectSingleDate: (date: Date) => void;
+    isSingleSelected: (day: Date) => boolean;
+};
+export default useSingleCalendar;

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

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

package/dist/src/components/calendar/utils/typeguards.d.ts

@@ -0,0 +1,3 @@
+import { DateRange } from '../Calendar.model';
+
+export declare function isDateRange(value: unknown): value is DateRange;

package/dist/src/components/card/Card.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+
+export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/card/__doc__/Card.stories.d.ts

@@ -0,0 +1,42 @@
+import { Card } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * El componente Card es un contenedor versátil que permite organizar y presentar contenido
+ * de manera estructurada y visualmente atractiva.
+ *
+ * ### Características principales
+ * - Diseño modular y flexible
+ * - Soporte para encabezados, contenido y pie de página
+ * - Personalizable a través de className
+ * - Ideal para mostrar información, productos, artículos, etc.
+ *
+ * ### Estructura básica
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Título del Card</CardTitle>
+ *     <CardDescription>Descripción opcional</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>
+ *     Contenido principal
+ *   </CardContent>
+ *   <CardFooter>
+ *     Acciones o contenido adicional
+ *   </CardFooter>
+ * </Card>
+ * ```
+ */
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+/**
+ * Ejemplo básico de un Card con todos sus componentes.
+ * Muestra la estructura típica con encabezado, contenido y pie de página.
+ */
+export declare const Default: Story;
+/**
+ * Ejemplo de Card con imagen y diseño de producto.
+ * Demuestra cómo integrar elementos multimedia y crear layouts más complejos.
+ */
+export declare const Media: Story;

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

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

package/dist/src/components/center/Center.d.ts

@@ -0,0 +1,3 @@
+import { ComponentPropsWithoutRef } from 'react';
+
+export declare const Center: ({ className, ...props }: ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/center/__doc__/Center.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Center } from '../..';
+
+/**
+ * Componente que centra verticalmente y horizontalmente su contenido
+ */
+declare const meta: Meta<typeof Center>;
+export default meta;
+type Story = StoryObj<typeof Center>;
+export declare const Default: Story;
+export declare const Icon: Story;

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

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

package/dist/src/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps } from 'react';
+import { OverrideProps } from '../../models';
+
+type Props = OverrideProps<ComponentProps<"input">, {
+    /**
+     * Valor controlado del checkbox.
+     */
+    checked?: boolean;
+    /**
+     *  Función que se ejecuta cuando el valor del checkbox cambia.
+     */
+    onChange?: (value: boolean) => void;
+    /**
+     * Valor por defecto del checkbox.
+     */
+    defaultChecked?: boolean;
+    size?: string | number;
+    containerClassName?: string;
+    containerProps?: Omit<ComponentProps<"div">, "className">;
+}>;
+export declare const Checkbox: {
+    ({ checked, onChange, defaultChecked, className, size, children, containerClassName, containerProps, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/checkbox/__doc__/Checkbox.stories.d.ts

@@ -0,0 +1,28 @@
+import { Checkbox } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const Controlled: Story;
+export declare const WithLabel: Story;
+export declare const Sizes: Story;
+/**
+ * Se exponen los siguientes atributos:
+ *
+ * | Atributo | Descripción |
+ * | --- | --- |
+ * | `data-state=checked` | si el elemento está chequeado |
+ * | `data-state=unchecked` | si el elemento no está chequeado |
+ *
+ *
+ * También se puede customizar globalmente cambiando la variable css
+ *
+ * ```css
+ * --checkbox: #ef4444; // HEX
+ * ```
+ **/
+export declare const CustomStyles: Story;
+export declare const Required: Story;

package/dist/src/components/checkbox/__test__/Checkbox.test.d.ts

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

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

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

package/dist/src/components/combobox/Combobox.d.ts

@@ -0,0 +1,17 @@
+import { AutoCompleteRoot, Select, AutoCompleteInput } from '..';
+import { ComponentProps } from 'react';
+
+type SelectProps<TItem extends Record<string, any>> = ComponentProps<typeof Select<TItem>>;
+interface SearchProps {
+    search?: string;
+    searchDefaultValue?: string;
+    onSearchChange?: (search: string) => void;
+    searchProps?: ComponentProps<typeof AutoCompleteInput>;
+    searchPlaceholder?: string;
+}
+type Props<TItem extends Record<string, any>> = {
+    emptyMessage?: string;
+    commandProps?: ComponentProps<typeof AutoCompleteRoot>;
+} & SearchProps & SelectProps<TItem>;
+export declare function Combobox<TItem extends Record<string, any>>({ items, valueKey, labelKey, placeholder, searchPlaceholder, emptyMessage, searchProps, className, triggerProps, itemProps, itemClassName, contentProps, contentClassName, value: prop, onChange, defaultValue: defaultProp, renderOption, commandProps, ...props }: Props<TItem>): import("react/jsx-runtime").JSX.Element;
+export {};