@boxcustodia/library 1.2.1 → 1.3.0

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

@@ -1,13 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

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

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

@@ -1,39 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

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

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

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

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

@@ -1,13 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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

@@ -1 +0,0 @@
-

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

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

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

@@ -1,25 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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

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

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

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

@@ -1,11 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

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

@@ -1,61 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

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

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

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

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

@@ -1,15 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

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

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

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

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

@@ -1,28 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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;
-};