@boxcustodia/library 0.5.4 → 0.5.5

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 | true | Iterable<import('react').ReactNode> | 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: import('react').ForwardRefExoticComponent<Omit<StackProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+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;
+};

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+type ContainerProps = React.ComponentPropsWithoutRef<"div">;
+declare const TableRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
+    containerClassName?: ContainerProps["className"];
+    containerProps?: ContainerProps;
+} & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+export { TableRoot, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

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

@@ -0,0 +1,27 @@
+import { Table } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+import { User } from 'lucide-react';
+
+declare const meta: Meta<typeof Table>;
+export default meta;
+type Story<T> = StoryObj<typeof Table<T>>;
+interface User {
+    id: number;
+    name: string;
+    photo: string;
+    age: number;
+    gender: "male" | "female";
+}
+export declare const Default: Story<User>;
+/**
+ * Al setear una altura en la propiedad `containerClassName` se puede hacer Scrollable
+ *
+ * ```tsx
+ * <Table
+ *   ....
+ *   containerClassName="max-h-[500px]"
+ *  />
+ * ```
+ */
+export declare const Scrollable: Story<User>;
+export declare const Selection: Story<User>;

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

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

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

@@ -0,0 +1,3 @@
+export * from './Table';
+export * from './TablePrimitives';
+export * from './Table.model';

package/dist/src/components/tablePagination/TablePagination.d.ts

@@ -0,0 +1,21 @@
+import { usePaginationProps } from '../../hooks';
+import { ClassName } from '../../models';
+import { HTMLProps } from 'react';
+import { PageSize } from './TablePagination.model';
+
+interface TablePaginationExtendedProps {
+    containerClassName?: ClassName;
+    containerProps?: HTMLProps<HTMLDivElement>;
+    selectClassName?: ClassName;
+    selectProps?: HTMLProps<HTMLSelectElement>;
+    sizes?: PageSize[] | false;
+}
+type Props = {
+    setPageSize?: (value: PageSize) => void;
+    pageSize?: PageSize;
+} & Omit<usePaginationProps, "pageSize"> & TablePaginationExtendedProps;
+export declare const TablePagination: {
+    ({ containerClassName, containerProps, selectClassName, selectProps, sizes, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/tablePagination/TablePagination.model.d.ts

@@ -0,0 +1,2 @@
+export declare const TABLE_PAGE_SIZES: number[];
+export type PageSize = (typeof TABLE_PAGE_SIZES)[number];

package/dist/src/components/tablePagination/__doc__/TablePagination.stories.d.ts

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

package/dist/src/components/tablePagination/__test__/TablePagination.test.d.ts

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

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

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

package/dist/src/components/tabs/Tabs.d.ts

@@ -0,0 +1,43 @@
+import { HTMLProps, ReactNode } from 'react';
+
+interface TabsExtendedProps extends TabsProps {
+    listClassName: TabListProps["className"];
+    listProps: TabListProps;
+    triggerClassName: TabTriggerProps["className"];
+    triggerProps: TabTriggerProps;
+    contentClassName: TabContentProps["className"];
+    contentProps: TabContentProps;
+}
+interface TabsProps extends Omit<HTMLProps<HTMLDivElement>, "value" | "defaultValue" | "onChange"> {
+    value?: string;
+    onChange?: (tab: string) => void;
+    defaultValue?: string;
+}
+declare const Tabs: {
+    ({ children, value: prop, onChange, defaultValue, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface TabListProps {
+    children: ReactNode;
+    className?: string;
+}
+declare const TabList: {
+    ({ children, className }: TabListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface TabTriggerProps extends Omit<HTMLProps<HTMLButtonElement>, "onClick" | "type"> {
+    value: string;
+}
+declare const TabTrigger: {
+    ({ value, className, ...props }: TabTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface TabContentProps extends HTMLProps<HTMLDivElement> {
+    value: string;
+}
+declare const TabContent: {
+    ({ value, ...props }: TabContentProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export { Tabs, TabList, TabTrigger, TabContent };
+export type { TabsProps, TabListProps, TabTriggerProps, TabContentProps, TabsExtendedProps, };

package/dist/src/components/tabs/TabsContext.d.ts

@@ -0,0 +1,8 @@
+interface TabsContextProps {
+    activeTab: string;
+    setActiveTab: (tab: string) => void;
+    targetRef: HTMLButtonElement | null;
+    setTargetRef: (element: HTMLButtonElement | null) => void;
+}
+export declare const useTabsContext: () => TabsContextProps, TabsContextProvider: import('react').Provider<TabsContextProps | null>;
+export type { TabsContextProps };

package/dist/src/components/tabs/__doc__/Tabs.stories.d.ts

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

package/dist/src/components/tabs/__test__/Tabs.test.d.ts

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

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

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

package/dist/src/components/tag/Tag.d.ts

@@ -0,0 +1,26 @@
+import { TagVariant } from './Tag.variants';
+
+type VariantProps = {
+    color?: never;
+    variant?: TagVariant["variant"];
+};
+type ColorProps = {
+    color: string;
+    variant?: "outline" | "borderless";
+};
+type StyleProps = ColorProps | VariantProps;
+type BaseProps = {
+    icon?: React.ReactNode;
+    rounded?: TagVariant["rounded"];
+} & StyleProps & React.HTMLAttributes<HTMLDivElement>;
+type ClosableProps = BaseProps & {
+    closable: true;
+    onClose: () => void;
+};
+type NonClosableProps = BaseProps & {
+    closable?: false;
+    onClose?: never;
+};
+type Props = ClosableProps | NonClosableProps;
+export declare const Tag: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/src/components/tag/Tag.variants.d.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+
+export declare const tagVariants: (props?: ({
+    rounded?: "default" | "square" | "full" | null | undefined;
+    variant?: "error" | "success" | "outline" | "secondary" | "primary" | "borderless" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TagVariant = VariantProps<typeof tagVariants>;