@boxcustodia/library 1.2.0 → 1.2.1

package/dist/src/components/popover/PopoverPrimitives.d.ts

@@ -0,0 +1,13 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+declare const PopoverRoot: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+type PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Content> & {
+    matchTriggerWidth?: boolean;
+    focus?: boolean;
+};
+declare const PopoverContent: {
+    ({ className, align, sideOffset, matchTriggerWidth, style, focus, ...props }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+export { PopoverContent, PopoverRoot, PopoverTrigger };

package/dist/src/components/popover/__doc__/Popover.stories.d.ts

@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Popover } from '../Popover';
+
+declare const meta: Meta<typeof Popover>;
+export default meta;
+type Story = StoryObj<typeof Popover>;
+export declare const Default: Story;
+/**
+ * `PopoverContent` recibe la propiedad `matchTriggerWidth` para que el ancho del contenido coincida con el ancho del trigger.
+ **/
+export declare const MatchTrigger: Story;
+/**
+ * Puedes utilizar los primitivos `PopoverRoot`, `PopoverTrigger` y `PopoverContent` para construir
+ * tu propio Popover en lugar de utilizar el componente `Popover` ya compuesto.
+ *
+ * ```tsx
+ * <PopoverRoot>
+ *   <PopoverTrigger asChild>
+ *     Trigger
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     Contenido
+ *   </PopoverContent>
+ * </PopoverRoot>
+ * ```
+ */
+export declare const Primitive: Story;
+/**
+ * ThemeProvider permite customizar de manera global las propiedades del componente
+ *
+ * Ejemplo:
+ * ```tsx
+ * <ThemeProvider
+ *   theme={{
+ *     Popover: {
+ *       side: "right",
+ *       offset: 30,
+ *       contentClassName: "bg-black text-white",
+ *     },
+ *   }}
+ * >
+ *   <Popover trigger={<Button variant="outline">Open</Button>}>
+ *     Contenido
+ *   </Popover>
+ * </ThemeProvider>
+ * ```
+ */
+export declare const Theme: Story;

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

@@ -0,0 +1,2 @@
+export * from './PopoverPrimitives';
+export * from './Popover';

package/dist/src/components/select/Select.d.ts

@@ -0,0 +1,39 @@
+import { SelectContent, SelectItem, SelectRoot, SelectTrigger } from '..';
+import { ClassName, ControllableState, Option, OverrideProps } from '../../models';
+import { ComponentProps, ReactNode } from 'react';
+
+type Props<TItem extends Record<string, any>> = OverrideProps<ComponentProps<typeof SelectRoot> & Omit<ControllableState<string>, "onChange">, {
+    onChange?: (value: string, item: TItem) => void;
+    /**
+     * Listado de elementos a mostrar
+     * @default []
+     */
+    items: TItem[];
+    /**
+     * Identificador del valor del elemento
+     * @default "value"
+     */
+    valueKey?: keyof TItem;
+    /**
+     * Identificador del label del elemento
+     * @default "label"
+     */
+    labelKey?: keyof TItem;
+    /**
+     * Función que renderiza el label del elemento
+     * Por defecto renderiza el label del elemento
+     */
+    renderOption?: (item: TItem) => ReactNode;
+    className?: ClassName;
+    triggerProps?: ComponentProps<typeof SelectTrigger>;
+    contentClassName?: ClassName;
+    contentProps?: ComponentProps<typeof SelectContent>;
+    itemClassName?: ClassName;
+    itemProps?: ComponentProps<typeof SelectItem>;
+    placeholder?: string;
+}>;
+export declare const Select: {
+    <TItem extends Record<string, any> = Option<string>>({ items, valueKey, labelKey, value: prop, onChange, defaultValue: defaultProp, renderOption, triggerProps, contentClassName, contentProps, itemClassName, itemProps, className, placeholder, ...props }: Props<TItem>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/select/SelectPrimitives.d.ts

@@ -0,0 +1,44 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import * as React from "react";
+declare const SelectRoot: React.FC<SelectPrimitive.SelectProps>;
+interface SelectGroupProps extends React.ComponentProps<typeof SelectPrimitive.Group> {
+    heading?: string;
+}
+declare const SelectGroup: React.FC<SelectGroupProps>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+type SelectTriggerProps = React.ComponentProps<typeof SelectPrimitive.Trigger>;
+declare const SelectTrigger: {
+    ({ className, children, ...props }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+type SelectScrollUpButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>;
+declare const SelectScrollUpButton: {
+    ({ className, ...props }: SelectScrollUpButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+type SelectScrollDownButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>;
+declare const SelectScrollDownButton: {
+    ({ className, ...props }: SelectScrollDownButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+type SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Content>;
+declare const SelectContent: {
+    ({ className, children, position, ...props }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+type SelectLabelProps = React.ComponentProps<typeof SelectPrimitive.Label>;
+declare const SelectLabel: {
+    ({ className, ...props }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+type SelectItemProps = React.ComponentProps<typeof SelectPrimitive.Item>;
+declare const SelectItem: {
+    ({ className, children, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+type SelectSeparatorProps = React.ComponentProps<typeof SelectPrimitive.Separator>;
+declare const SelectSeparator: {
+    ({ className, ...props }: SelectSeparatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+export { SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/src/components/select/__doc__/Select.stories.d.ts

@@ -0,0 +1,74 @@
+import { Select } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * Componente que permite seleccionar un valor entre una lista de opciones.
+ */
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const Default: Story;
+/**
+ * Por defecto el componente `Select` espera `items` con la siguiente interfaz
+ *
+ * ```tsx
+ * interface Option = {
+ *   label: string;
+ *   value: string;
+ * }
+ * ```
+ *
+ * En caso de tener un objeto con otra interfaz utilizar la propiedad `valueKey` para identificar el valor y `labelKey` para identificar el label
+ *
+ * ```tsx
+ * const animals: T[] = [
+ *   { key: "cat", label: "Cat", emoji: "🐱" },
+ *   { key: "dog", label: "Dog", emoji: "🐶" },
+ * ];
+ *
+ * <Select
+ *   valueKey="key"
+ *   labelKey="label"
+ *   items={animals}
+ * />
+ * ```
+ */
+export declare const CustomObject: Story;
+/**
+ * Se puede usar la propiedad `renderOption` para mostrar customizar el contenido del label
+ *
+ * ```tsx
+ * const animals: T[] = [
+ *   { key: "cat", label: "Cat", emoji: "🐱" },
+ *   { key: "dog", label: "Dog", emoji: "🐶" },
+ * ];
+ *
+ * <Select
+ *   {...props}
+ *   items={animals}
+ *   renderOption={(item: T) => `${item.emoji} ${item.label}`} // 👈 mostrar el emoji al lado
+ * />
+ * ```
+ */
+export declare const CustomRender: Story;
+export declare const Disabled: Story;
+export declare const Controlled: Story;
+export declare const CustomStyle: Story;
+/**
+ * Componente Primitivo para casos donde se necesite crear un custom Select
+ *
+ * ```tsx
+ * <SelectRoot>
+ *    <SelectTrigger>
+ *     <SelectValue placeholder="..." />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *      <SelectGroup heading="...">
+ *        <SelectItem value="...">...</SelectItem>
+ *      <SelectGroup heading="...">
+ *      <SelectSeparator />
+ *   </SelectContent>
+ * </SelectRoot>
+ *  ```
+ */
+export declare const Primitive: Story;

package/dist/src/components/select/__test__/Select.test.d.ts

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

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

@@ -0,0 +1,2 @@
+export * from './Select';
+export * from './SelectPrimitives';

package/dist/src/components/show/Show.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, ComponentPropsWithoutRef } from 'react';
+import { Presence as AnimatePresence } from '@radix-ui/react-presence';
+import { Slot } from '@radix-ui/react-slot';
+
+interface Props extends ComponentPropsWithoutRef<typeof Slot> {
+    /** Si el componente está presente o no */
+    when: ComponentProps<typeof AnimatePresence>["present"];
+}
+export declare const Show: {
+    (props: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/show/__doc__/Show.stories.d.ts

@@ -0,0 +1,142 @@
+import { Show } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * Componente que permite animar la entrada y salida de un componente.
+ *
+ * Expone dos estados `open` y `closed` para animar la entrada y salida respectivamente.
+ *
+ * ### Uso:
+ *
+ * ```tsx
+ * import { Show } from './Show';
+ *
+ * const Example = () => {
+ *   const [open, toggle] = useToggle(false);
+ *   return (
+ *     <div>
+ *       <button onClick={() => toggle()}>Toggle</button>
+ *       <Show when={open}>
+ *         <div className="animated-box">
+ *           🐙
+ *         </div>
+ *       </Show>
+ *     </div>
+ *   );
+ * };
+ * ```
+ *
+ * ### CSS para animaciones:
+ *
+ * Define las animaciones en un archivo CSS. En este ejemplo, se crean animaciones para la entrada (`fadeInZoomIn`) y la salida (`fadeOutZoomOut`).
+ *
+ * ```css
+ * @keyframes fadeInZoomIn {
+ *   0% {
+ *     opacity: 0;
+ *     transform: scale(0.95);
+ *   }
+ *   100% {
+ *     opacity: 1;
+ *     transform: scale(1);
+ *   }
+ * }
+ *
+ * @keyframes fadeOutZoomOut {
+ *   0% {
+ *     opacity: 1;
+ *     transform: scale(1);
+ *   }
+ *   100% {
+ *     opacity: 0;
+ *     transform: scale(0.95);
+ *   }
+ * }
+ *
+ * .animated-box[data-state="open"] {
+ *   animation: fadeInZoomIn 0.5s forwards;
+ * }
+ *
+ * .animated-box[data-state="closed"] {
+ *   animation: fadeOutZoomOut 0.5s forwards;
+ * }
+ * ```
+ *
+ * ### Alternativa con TailwindCSS:
+ *
+ * Alternativamente, se puede usar el plugin [tailwindcss-animate](https://www.npmjs.com/package/tailwindcss-animate)
+ * que ya trae animaciones predefinidas. Acá un ejemplo:
+ *
+ * ```tsx
+ * import { Show } from './Show';
+ *
+ * const Example = () => {
+ *   const [open, toggle] = useToggle(false);
+ *   return (
+ *     <div>
+ *       <button onClick={() => toggle()}>Toggle</button>
+ *       <Show when={open}>
+ *         <div
+ *           className={cn(
+ *             // Animaciones de entrada
+ *             "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+ *            // Animaciones de salida
+ *             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+ *           )}
+ *         >
+ *           🐙
+ *         </div>
+ *       </Show>
+ *     </div>
+ *   );
+ * };
+ * ```
+ * ## Crea alias para acortar `data-[state-X]`
+ * En caso de que se quiera acortar el prefijo `data-[state-X]` se puede crear una variante en el archivo `tailwind.config.js`:
+ *
+ * ```tsx
+ * // tailwind.config.js
+ *
+ * // Importar plugin
+ * const plugin = require("tailwindcss/plugin");
+ *
+ * module.exports = {
+ *   // ...
+ *   plugins: [
+ *     plugin(function ({ addVariant }) {
+ *       addVariant("open", '&[data-state="open"]');
+ *       addVariant("closed", '&[data-state="closed"]');
+ *     }),
+ *   ],
+ * };
+ *
+ * // Uso
+ * import { Show } from './Show';
+ *
+ * const Example = () => {
+ *   const [open, toggle] = useToggle(false);
+ *   return (
+ *     <div>
+ *       <button onClick={() => toggle()}>Toggle</button>
+ *       <Show when={open}>
+ *         <div
+ *           className={cn(
+ *             // Animaciones de entrada
+ *             "open:animate-in open:fade-in-0 open:zoom-in-95",
+ *            // Animaciones de salida
+ *             "closed:animate-out closed:fade-out-0 closed:zoom-out-95"
+ *           )}
+ *         >
+ *           🐙
+ *         </div>
+ *       </Show>
+ *     </div>
+ *   );
+ * };
+ * ```
+ */
+declare const meta: Meta<typeof Show>;
+export default meta;
+type Story = StoryObj<typeof Show>;
+export declare const Default: Story;
+export declare const Hover: Story;

package/dist/src/components/show/__test__/Presence.test.d.ts

@@ -0,0 +1 @@
+

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

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

package/dist/src/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,25 @@
+import { HTMLProps } from 'react';
+
+interface Props extends HTMLProps<HTMLDivElement> {
+    /**
+     * Determina si el skeleton es isCircle para redondearlo
+     */
+    isCircle?: boolean;
+    /**
+     * Ancho del componente
+     */
+    width?: string;
+    /**
+     * Alto del componente
+     */
+    height?: string;
+    /**
+     * Determina si el skeleton es visible
+     */
+    isLoading?: boolean;
+}
+export declare const Skeleton: {
+    ({ isCircle, width, height, isLoading, ...props }: Props): string | number | bigint | true | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/skeleton/__doc__/Skeleton.stories.d.ts

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from '../..';
+
+/**
+ * Componente que muestra un placeholder mientras se carga el contenido.
+ */
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+/**
+ * Permite setear la propiedad `isCircle` a true para mostrar un círculo como placeholder.
+ */
+export declare const Circle: Story;
+/**
+ * Extiende todas las propiedades de `div`
+ */
+export declare const Custom: Story;

package/dist/src/components/skeleton/__test__/Skeleton.test.d.ts

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

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

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

package/dist/src/components/stack/Stack.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps, CSSProperties } from 'react';
+
+interface StackProps extends ComponentProps<"div"> {
+    inline?: boolean;
+    justify?: CSSProperties["justifyContent"];
+    align?: CSSProperties["alignItems"];
+    direction?: "horizontal" | "vertical";
+    gap?: CSSProperties["gap"];
+}
+export declare const Stack: ({ inline, justify, align, direction, gap, style, ...props }: StackProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/stack/__doc__/Stack.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Stack } from '../Stack';
+
+declare const meta: Meta<typeof Stack>;
+export default meta;
+type Story = StoryObj<typeof Stack>;
+export declare const Horizontal: Story;
+/**
+ * Se puede especificar la propiedad `direction` a "vertical"
+ */
+export declare const Vertical: Story;
+export declare const Nested: Story;
+export declare const Justify: Story;
+export declare const Align: Story;

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

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

package/dist/src/components/stepper/Stepper.d.ts

@@ -0,0 +1,61 @@
+import { HTMLProps, ReactNode } from 'react';
+import { ClassName } from '../../models';
+import { ClassNameValue } from 'tailwind-merge';
+
+interface StepperItemProps {
+    indicator?: ReactNode;
+    title: ReactNode;
+    content?: ReactNode;
+    disabled?: boolean;
+}
+interface StepperProps extends Omit<HTMLProps<HTMLDivElement>, "onChange"> {
+    items?: StepperItemProps[];
+    current?: number;
+    onChange?: (index: number) => void;
+    className?: ClassName;
+    classNameList?: ClassName;
+    classNameItem?: ClassName;
+    classNameButton?: ClassName;
+    classNameIndicator?: ClassName;
+    classNameContent?: ClassName;
+}
+export declare function Stepper({ items, current, onChange, className, classNameList, classNameItem, classNameButton, classNameIndicator, classNameContent, }: StepperProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Stepper {
+    var displayName: string;
+}
+interface StepperContainerProps extends Omit<HTMLProps<HTMLDivElement>, "onChange"> {
+    current?: number;
+    onChange?: (index: number) => void;
+    className?: ClassName;
+}
+export declare function StepperContainer({ current: prop, onChange, className, ...props }: StepperContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace StepperContainer {
+    var displayName: string;
+}
+interface StepperListProps extends HTMLProps<HTMLUListElement> {
+}
+export declare function StepperList({ children, className, ...props }: StepperListProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace StepperList {
+    var displayName: string;
+}
+interface StepperTriggerProps {
+    indicator?: ReactNode;
+    title: ReactNode;
+    value: number;
+    disabled?: boolean;
+    classNameItem?: ClassNameValue;
+    classNameButton?: ClassNameValue;
+    classNameIndicator?: ClassNameValue;
+}
+export declare function StepperTrigger({ disabled, value, title, indicator, classNameItem, classNameButton, classNameIndicator, }: StepperTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace StepperTrigger {
+    var displayName: string;
+}
+interface StepperContentProps extends HTMLProps<HTMLDivElement> {
+    value: number;
+}
+export declare function StepperContent({ value, className, ...props }: StepperContentProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace StepperContent {
+    var displayName: string;
+}
+export {};

package/dist/src/components/stepper/StepperContext.d.ts

@@ -0,0 +1,6 @@
+interface StepperContextProps {
+    activeStep: number;
+    setActiveStep: (index: number) => void;
+}
+export declare const useStepperContext: () => StepperContextProps, StepperContextProvider: import('react').Provider<StepperContextProps | null>;
+export type { StepperContextProps };

package/dist/src/components/stepper/__doc__/Stepper.stories.d.ts

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

package/dist/src/components/stepper/__test__/Stepper.test.d.ts

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

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

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

package/dist/src/components/switch/Switch.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+import { OverrideProps } from '../../models';
+
+type Props = OverrideProps<ComponentProps<"input">, {
+    checked?: boolean;
+    onChange?: (value: boolean) => void;
+    defaultChecked?: boolean;
+    containerClassName?: string;
+    containerProps?: Omit<ComponentProps<"div">, "className">;
+}>;
+export declare const Switch: {
+    ({ className, children, containerProps, containerClassName, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/switch/__doc__/Switch.stories.d.ts

@@ -0,0 +1,19 @@
+import { Switch } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+
+declare const meta: Meta<typeof Switch>;
+export default meta;
+type Story = StoryObj<typeof Switch>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const WithLabel: 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 |
+ **/
+export declare const CustomStyles: Story;
+export declare const Required: Story;

package/dist/src/components/switch/__test__/Switch.test.d.ts

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

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

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

package/dist/src/components/table/Table.d.ts

@@ -0,0 +1,28 @@
+import { ComponentPropsWithoutRef, HTMLProps } from 'react';
+import { ClassName } from '../../models';
+import { ColumnDef } from './Table.model';
+import { TableRoot } from './TablePrimitives';
+
+type Props<T> = {
+    data: T[];
+    columns: ColumnDef<T>[];
+    onRowClick?: (row: T) => void;
+    selected?: (row: T) => boolean;
+} & ExtendedProps & Omit<ComponentPropsWithoutRef<typeof TableRoot>, "data" | "selected">;
+interface ExtendedProps {
+    theadClassName?: ClassName;
+    theadProps?: HTMLProps<HTMLTableSectionElement>;
+    tbodyClassName?: ClassName;
+    tbodyProps?: HTMLProps<HTMLTableSectionElement>;
+    trClassName?: ClassName;
+    trProps?: HTMLProps<HTMLTableRowElement>;
+    thClassName?: ClassName;
+    thProps?: HTMLProps<HTMLTableCellElement>;
+    tdClassName?: ClassName;
+    tdProps?: HTMLProps<HTMLTableCellElement>;
+}
+export declare const Table: {
+    <T>({ data, columns, onRowClick, selected, theadClassName, theadProps, tbodyClassName, tbodyProps, trClassName, trProps, thClassName, thProps, tdClassName, tdProps, ...tableProps }: Props<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/table/Table.model.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+
+export type CellProps<T> = {
+    row: T;
+};
+export type ColumnDef<T> = {
+    /**
+     * Header de la columna
+     */
+    header: string | (() => ReactNode);
+    /**
+     * Clave que identifica la columna
+     */
+    key: keyof T;
+    /**
+     * Elemento que se renderiza en la celda
+     */
+    cell?: (props: CellProps<T>) => ReactNode;
+    /**
+     * Ancho de la columna
+     */
+    width?: string | number;
+};