@boxcustodia/library 1.2.1 → 1.2.2

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

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

@@ -1,47 +0,0 @@
-import * as React from "react";
-type ContainerProps = React.ComponentProps<"div">;
-type TableProps = React.ComponentProps<"table">;
-type TableRootProps = TableProps & {
-    containerClassName?: ContainerProps["className"];
-    containerProps?: ContainerProps;
-};
-declare const TableRoot: {
-    ({ className, containerClassName, containerProps, ...props }: TableRootProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-type TableHeaderProps = React.ComponentProps<"thead">;
-declare const TableHeader: {
-    ({ className, ...props }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-type TableBodyProps = React.ComponentProps<"tbody">;
-declare const TableBody: {
-    ({ className, ...props }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-type TableFooterProps = React.ComponentProps<"tfoot">;
-declare const TableFooter: {
-    ({ className, ...props }: TableFooterProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-type TableRowProps = React.ComponentProps<"tr">;
-declare const TableRow: {
-    ({ className, ...props }: TableRowProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-type TableHeadProps = React.ComponentProps<"th">;
-declare const TableHead: {
-    ({ className, ...props }: TableHeadProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-type TableCellProps = React.ComponentProps<"td">;
-declare const TableCell: {
-    ({ className, ...props }: TableCellProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-type TableCaptionProps = React.ComponentProps<"caption">;
-declare const TableCaption: {
-    ({ className, ...props }: TableCaptionProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRoot, TableRow, };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,29 +0,0 @@
-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: {
-    ({ className, color, variant, rounded, icon, closable, onClose, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export {};

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

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