chiperos-ai-components-library 0.0.1

package/dist/components/ActionCard/ActionCard.stories.d.ts

@@ -0,0 +1,22 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./index').ActionCardProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LowInventory: Story;
+export declare const TopPerformers: Story;
+export declare const AlertAction: Story;
+export declare const InfoAction: Story;
+export declare const PendingTasks: Story;
+export declare const Notification: Story;
+export declare const WithoutAction: Story;
+export declare const ClickableCard: Story;
+export declare const DashboardGrid: Story;
+export declare const LongDescription: Story;

package/dist/components/ActionCard/ActionCard.test.d.ts

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

package/dist/components/ActionCard/index.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+export interface ActionCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Título de la acción
+     */
+    title: string;
+    /**
+     * Descripción de la acción
+     */
+    description: string;
+    /**
+     * Ícono de la acción (React node)
+     */
+    icon: React.ReactNode;
+    /**
+     * Botón de acción (CTA) opcional
+     */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /**
+     * Callback al hacer clic en toda la card
+     */
+    onClick?: () => void;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Componente ActionCard
+ *
+ * Card con ícono, título, descripción y call-to-action opcional.
+ * Ideal para dashboards, acciones rápidas y notificaciones.
+ *
+ * @example
+ * ```tsx
+ * <ActionCard
+ *   icon={<Package size={32} color="#d48620" strokeWidth={2} />}
+ *   title="Identify Low Inventory Items"
+ *   description="Find SKUs with less than 5 days of inventory remaining."
+ *   action={{
+ *     label: "Show low inventory",
+ *     onClick: () => navigate('/inventory/low')
+ *   }}
+ * />
+ * ```
+ */
+export declare const ActionCard: React.ForwardRefExoticComponent<ActionCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/BannerAlerts/BannerAlerts.stories.d.ts

@@ -0,0 +1,42 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./index').BannerAlertsProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        title: {
+            control: "text";
+            description: string;
+        };
+        description: {
+            control: "text";
+            description: string;
+        };
+        icon: {
+            control: false;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Warning: Story;
+export declare const Information: Story;
+export declare const Grey: Story;
+export declare const CustomIcon: Story;
+export declare const AllVariants: Story;
+export declare const DifferentLengths: Story;
+export declare const CommonUseCases: Story;
+export declare const CustomIcons: Story;
+export declare const InForms: Story;
+export declare const InDashboard: Story;
+export declare const Responsive: Story;

package/dist/components/BannerAlerts/BannerAlerts.test.d.ts

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

package/dist/components/BannerAlerts/index.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+export interface BannerAlertsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Variante del banner alert
+     * @default "information"
+     */
+    variant?: 'warning' | 'information' | 'grey';
+    /**
+     * Título del alert
+     */
+    title: string;
+    /**
+     * Descripción del alert
+     */
+    description: string;
+    /**
+     * Icono personalizado (opcional)
+     */
+    icon?: React.ReactNode;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Componente BannerAlerts - Banners informativos con diferentes variantes
+ *
+ * Muestra mensajes de alerta con tres variantes:
+ * - warning: Para alertas de advertencia (naranja)
+ * - information: Para información general (azul)
+ * - grey: Para notificaciones neutras (gris)
+ *
+ * Cada banner incluye un icono, título y descripción.
+ */
+declare const BannerAlerts: React.ForwardRefExoticComponent<BannerAlertsProps & React.RefAttributes<HTMLDivElement>>;
+export { BannerAlerts };

package/dist/components/BrandIcons/BrandIcons.stories.d.ts

@@ -0,0 +1,45 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./index').BrandIconsProps & import('react').RefAttributes<HTMLImageElement>>;
+    parameters: {
+        layout: string;
+        backgrounds: {
+            default: string;
+            values: {
+                name: string;
+                value: string;
+            }[];
+        };
+    };
+    tags: string[];
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        mode: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        gradient: {
+            control: "boolean";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LargeDark: Story;
+export declare const LargeLight: Story;
+export declare const LargeGradient: Story;
+export declare const SmallDark: Story;
+export declare const SmallLight: Story;
+export declare const AllVariants: Story;
+export declare const SizeComparison: Story;
+export declare const InNavigation: Story;
+export declare const InFooter: Story;
+export declare const ResponsiveLogo: Story;

package/dist/components/BrandIcons/BrandIcons.test.d.ts

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

package/dist/components/BrandIcons/index.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+declare const LOGO_ASSETS: {
+    largeDark: string;
+    largeLight: string;
+    smallDark: string;
+    smallLight: string;
+    gradientLarge: string;
+};
+export interface BrandIconsProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /**
+     * Tamaño del logo
+     * @default "large"
+     */
+    size?: 'large' | 'small';
+    /**
+     * Modo de color del logo
+     * @default "dark"
+     */
+    mode?: 'dark' | 'light';
+    /**
+     * Si el logo tiene gradiente
+     * @default false
+     */
+    gradient?: boolean;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Componente BrandIcons - Logo de Chiperos
+ *
+ * Muestra el logo de la marca Chiperos con diferentes variantes:
+ * - Tamaños: large (143x32px) y small (40x32px)
+ * - Modos: dark y light
+ * - Con o sin gradiente
+ */
+declare const BrandIcons: React.ForwardRefExoticComponent<BrandIconsProps & React.RefAttributes<HTMLImageElement>>;
+export { BrandIcons, LOGO_ASSETS };

package/dist/components/ButtonRadix/Button.stories.d.ts

@@ -0,0 +1,55 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./index').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        iconOnly: {
+            control: "boolean";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        asChild: {
+            control: "boolean";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const PrimaryWithLeftIcon: Story;
+export declare const PrimaryWithRightIcon: Story;
+export declare const PrimaryIconOnly: Story;
+export declare const Secondary: Story;
+export declare const SecondaryWithLeftIcon: Story;
+export declare const SecondaryIconOnly: Story;
+export declare const Alert: Story;
+export declare const AlertWithIcon: Story;
+export declare const Ghost: Story;
+export declare const GhostWithIcon: Story;
+export declare const Plain: Story;
+export declare const SmallSize: Story;
+export declare const MediumSize: Story;
+export declare const LargeSize: Story;
+export declare const Disabled: Story;
+export declare const AllVariants: Story;
+export declare const AllSizes: Story;
+export declare const CTAGroup: Story;

package/dist/components/ButtonRadix/Button.test.d.ts

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

package/dist/components/ButtonRadix/index.d.ts

@@ -0,0 +1,14 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const buttonVariants: (props?: ({
+    variant?: "alert" | "primary" | "secondary" | "ghost" | "plain" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/components/CardsGrid/CardsGrid.stories.d.ts

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./index').CardsGridProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ThreeColumnsFeatures: Story;
+export declare const TwoColumnsActions: Story;
+export declare const FourColumnsFeatures: Story;
+export declare const SingleColumnActions: Story;
+export declare const OptionCardsInGrid: Story;
+export declare const ResponsiveGrid: Story;
+export declare const GapVariations: Story;
+export declare const MixedCards: Story;
+export declare const DashboardLayout: Story;

package/dist/components/CardsGrid/CardsGrid.test.d.ts

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

package/dist/components/CardsGrid/index.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+export interface CardsGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Número de columnas del grid
+     * @example 3
+     */
+    columns: number;
+    /**
+     * Gap entre las cards (en Tailwind units o px)
+     * @default 4
+     * @example 6 // gap-6
+     * @example "1.5rem" // custom gap
+     */
+    gap?: number | string;
+    /**
+     * Número de columnas en tablets (opcional, responsive)
+     * @example 2
+     */
+    tabletColumns?: number;
+    /**
+     * Número de columnas en móviles (opcional, responsive)
+     * @default 1
+     * @example 1
+     */
+    mobileColumns?: number;
+    /**
+     * Children (cards u otros componentes)
+     */
+    children: React.ReactNode;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Componente CardsGrid
+ *
+ * Contenedor de grid para organizar cards de forma responsive.
+ * Ajusta automáticamente el ancho de las cards al 100% del espacio disponible.
+ *
+ * @example
+ * ```tsx
+ * <CardsGrid columns={3} gap={6}>
+ *   <FeatureCard title="Feature 1" description="..." icon={<Icon />} />
+ *   <FeatureCard title="Feature 2" description="..." icon={<Icon />} />
+ *   <FeatureCard title="Feature 3" description="..." icon={<Icon />} />
+ * </CardsGrid>
+ * ```
+ *
+ * @example Con responsive
+ * ```tsx
+ * <CardsGrid columns={3} tabletColumns={2} mobileColumns={1} gap={4}>
+ *   <ActionCard title="Action 1" description="..." icon={<Icon />} />
+ *   <ActionCard title="Action 2" description="..." icon={<Icon />} />
+ * </CardsGrid>
+ * ```
+ */
+export declare const CardsGrid: React.ForwardRefExoticComponent<CardsGridProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/FeatureCard/FeatureCard.stories.d.ts

@@ -0,0 +1,38 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./index').FeatureCardProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        title: {
+            control: "text";
+            description: string;
+        };
+        description: {
+            control: "text";
+            description: string;
+        };
+        iconBackground: {
+            control: "color";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Security: Story;
+export declare const Performance: Story;
+export declare const Collaboration: Story;
+export declare const Protection: Story;
+export declare const CloudBased: Story;
+export declare const AIFeature: Story;
+export declare const Clickable: Story;
+export declare const FeaturesGrid: Story;
+export declare const ColorVariants: Story;
+export declare const CustomStyling: Story;
+export declare const LongDescription: Story;
+export declare const Minimal: Story;

package/dist/components/FeatureCard/FeatureCard.test.d.ts

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

package/dist/components/FeatureCard/index.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+export interface FeatureCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Título de la característica
+     */
+    title: string;
+    /**
+     * Descripción de la característica
+     */
+    description: string;
+    /**
+     * Ícono de la característica (React node)
+     */
+    icon: React.ReactNode;
+    /**
+     * Background del contenedor del ícono
+     * @default "#e6f8ef"
+     */
+    iconBackground?: string;
+    /**
+     * Callback al hacer clic en la card
+     */
+    onClick?: () => void;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Componente FeatureCard
+ *
+ * Card centrada para destacar características o features.
+ * Ideal para landing pages, páginas de bienvenida y showcase de características.
+ *
+ * @example
+ * ```tsx
+ * <FeatureCard
+ *   icon={<Lock size={32} color="#00995a" strokeWidth={2} />}
+ *   title="Built for Security"
+ *   description="Your data is protected by enterprise-grade, zero-trust architecture."
+ * />
+ * ```
+ */
+export declare const FeatureCard: React.ForwardRefExoticComponent<FeatureCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Header/Header.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as HeaderLib } from './index';
+
+declare const meta: Meta<typeof HeaderLib>;
+export default meta;
+type Story = StoryObj<typeof HeaderLib>;
+export declare const Default: Story;
+export declare const WithDescription: Story;
+export declare const WithGoBack: Story;
+export declare const WithSearchAndLanguage: Story;
+export declare const WithChildren: Story;

package/dist/components/Header/index.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { AppRouterInstance } from '../../types';
+
+interface HeaderLibProps {
+    goBackText?: string;
+    goBackHref?: string;
+    onBack?: () => void;
+    title: string;
+    description?: string;
+    children?: React.ReactNode;
+    onSearch?: () => void;
+    showSearch?: boolean;
+    showLanguageSwitcher?: boolean;
+    useRouter: () => AppRouterInstance;
+}
+declare const HeaderLib: React.FC<HeaderLibProps>;
+export default HeaderLib;

package/dist/components/KPICard/KPICard.stories.d.ts

@@ -0,0 +1,52 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./index').KPICardProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        title: {
+            control: "text";
+            description: string;
+        };
+        value: {
+            control: "text";
+            description: string;
+        };
+        unit: {
+            control: "text";
+            description: string;
+        };
+        description: {
+            control: "text";
+            description: string;
+        };
+        iconColor: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const WithPositiveComparison: Story;
+export declare const WithNegativeComparison: Story;
+export declare const WithTag: Story;
+export declare const WithRedTag: Story;
+export declare const WithFraction: Story;
+export declare const WithButton: Story;
+export declare const BrandIcon: Story;
+export declare const AllVariants: Story;
+export declare const Dashboard: Story;
+export declare const CustomIcon: Story;
+export declare const Clickable: Story;
+export declare const LargeValues: Story;
+export declare const WithoutComparison: Story;
+export declare const LongDescription: Story;
+export declare const Compact: Story;
+export declare const Complete: Story;

package/dist/components/KPICard/KPICard.test.d.ts

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

package/dist/components/KPICard/KPICardCustom.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+export interface KPICardCustomProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+    /**
+     * Título de la card
+     */
+    title: string;
+    /**
+     * Contenido principal (puede ser cualquier React node)
+     */
+    content: React.ReactNode;
+    /**
+     * Contenido secundario/descriptivo (opcional)
+     */
+    description?: React.ReactNode;
+    /**
+     * Contenido del footer (opcional)
+     */
+    footer?: React.ReactNode;
+    /**
+     * Tag personalizado (opcional)
+     */
+    tag?: {
+        label: string;
+        variant?: 'default' | 'red' | 'green' | 'blue' | 'yellow';
+    };
+    /**
+     * Ícono personalizado
+     */
+    icon: React.ReactNode;
+    /**
+     * Callback al hacer clic en la card
+     */
+    onClick?: () => void;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Componente KPICardCustom
+ *
+ * Versión completamente personalizable de KPICard donde puedes
+ * especificar cualquier contenido usando React nodes, sin limitaciones
+ * de estructura predefinida.
+ *
+ * @example
+ * ```tsx
+ * <KPICardCustom
+ *   title="Custom Metric"
+ *   icon={<CustomIcon />}
+ *   content={
+ *     <div>
+ *       <h2>42</h2>
+ *       <p>Custom layout</p>
+ *     </div>
+ *   }
+ *   description="Any custom description"
+ *   footer={<button>Action</button>}
+ *   tag={{ label: "New", variant: "green" }}
+ * />
+ * ```
+ */
+export declare const KPICardCustom: React.ForwardRefExoticComponent<KPICardCustomProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/KPICard/KPICardCustom.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./KPICardCustom').KPICardCustomProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const ComplexContent: Story;
+export declare const WithChart: Story;
+export declare const WithList: Story;
+export declare const WithActions: Story;
+export declare const AllVariants: Story;
+export declare const FullyCustom: Story;