chiperos-ai-components-library 0.0.1

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

@@ -0,0 +1,93 @@
+import * as React from 'react';
+export interface KPICardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Título de la card
+     */
+    title: string;
+    /**
+     * Valor principal a mostrar
+     */
+    value: number | string;
+    /**
+     * Unidad del valor (%, x, etc.)
+     * @default "%"
+     */
+    unit?: string;
+    /**
+     * Valor total para mostrar fracción (ej: 3/17)
+     * Solo se usa si se proporciona
+     */
+    total?: number;
+    /**
+     * Texto descriptivo
+     */
+    description?: string;
+    /**
+     * Datos de comparación KPI (opcional)
+     */
+    comparison?: {
+        percentage: number;
+        trend: 'positive' | 'negative';
+        label?: string;
+        showWarning?: boolean;
+    };
+    /**
+     * Tag opcional
+     */
+    tag?: {
+        label: string;
+        variant?: 'default' | 'red';
+    };
+    /**
+     * Ícono personalizado
+     */
+    icon?: React.ReactNode;
+    /**
+     * Color del ícono
+     * @default "primary"
+     */
+    iconColor?: 'primary' | 'error' | 'brand';
+    /**
+     * Texto adicional del body (para variante Text)
+     */
+    bodyText?: string;
+    /**
+     * Botón opcional
+     */
+    button?: {
+        label: string;
+        onClick?: () => void;
+    };
+    /**
+     * Callback al hacer clic en la card
+     */
+    onClick?: () => void;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Componente KPICard
+ *
+ * Card completa para mostrar KPIs con diferentes variantes:
+ * - Con comparación de tendencia
+ * - Con tags
+ * - Con descripción
+ * - Con botones
+ *
+ * @example
+ * ```tsx
+ * <KPICard
+ *   title="Active Users"
+ *   value={3}
+ *   unit="%"
+ *   description="Descriptive text goes here"
+ *   comparison={{ percentage: 1.0, trend: "positive" }}
+ *   tag={{ label: "Monthly", variant: "default" }}
+ * />
+ * ```
+ */
+export declare const KPICard: React.ForwardRefExoticComponent<KPICardProps & React.RefAttributes<HTMLDivElement>>;
+export { KPICardCustom } from './KPICardCustom';
+export type { KPICardCustomProps } from './KPICardCustom';

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

@@ -0,0 +1,44 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./index').KPIComparisonProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        percentage: {
+            control: "number";
+            description: string;
+        };
+        trend: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        label: {
+            control: "text";
+            description: string;
+        };
+        showWarning: {
+            control: "boolean";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Positive: Story;
+export declare const Negative: Story;
+export declare const PositiveWithWarning: Story;
+export declare const NegativeWithWarning: Story;
+export declare const CustomLabel: Story;
+export declare const SmallValue: Story;
+export declare const LargeValue: Story;
+export declare const AllStates: Story;
+export declare const InCardContext: Story;
+export declare const MultipleComparisons: Story;
+export declare const DifferentLabels: Story;
+export declare const ZeroValue: Story;
+export declare const PreciseDecimals: Story;

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

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

package/dist/components/KPIComparison/KPIComparisonCustom.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+export interface KPIComparisonCustomProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Ícono izquierdo personalizado
+     */
+    icon: React.ReactNode;
+    /**
+     * Texto principal (ej: porcentaje, valor, etc.)
+     */
+    primaryText: string;
+    /**
+     * Color del texto principal
+     * @default "#312e4d"
+     */
+    primaryTextColor?: string;
+    /**
+     * Texto secundario/label
+     */
+    secondaryText?: string;
+    /**
+     * Color del texto secundario
+     * @default "#575385"
+     */
+    secondaryTextColor?: string;
+    /**
+     * Ícono derecho opcional (ej: warning)
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Componente KPIComparisonCustom
+ *
+ * Versión completamente personalizable de KPIComparison donde puedes
+ * especificar cualquier ícono, texto y colores sin limitaciones de
+ * tendencias predefinidas.
+ *
+ * @example
+ * ```tsx
+ * <KPIComparisonCustom
+ *   icon={<CustomIcon />}
+ *   primaryText="1.2M"
+ *   primaryTextColor="#00995a"
+ *   secondaryText="total users"
+ *   rightIcon={<InfoIcon />}
+ * />
+ * ```
+ */
+export declare const KPIComparisonCustom: React.ForwardRefExoticComponent<KPIComparisonCustomProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/KPIComparison/KPIComparisonCustom.stories.d.ts

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./KPIComparisonCustom').KPIComparisonCustomProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const PositiveTrend: Story;
+export declare const NegativeTrend: Story;
+export declare const WithAlert: Story;
+export declare const CustomValues: Story;
+export declare const WithCounter: Story;
+export declare const MinimalLayout: Story;
+export declare const AllVariants: Story;
+export declare const InCardContext: Story;
+export declare const MultipleMetrics: Story;

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+export interface KPIComparisonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Porcentaje de cambio (puede ser positivo o negativo)
+     * @example 1.0, -10.5
+     */
+    percentage: number;
+    /**
+     * Tendencia del KPI
+     * - 'positive': Verde con flecha arriba
+     * - 'negative': Rojo con flecha abajo
+     */
+    trend: 'positive' | 'negative';
+    /**
+     * Texto descriptivo al lado del porcentaje
+     * @default "KPI comparison"
+     */
+    label?: string;
+    /**
+     * Mostrar ícono de alerta/warning
+     * @default false
+     */
+    showWarning?: boolean;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Componente KPIComparison
+ *
+ * Muestra una comparación de KPI con tendencia (positiva o negativa)
+ * y un ícono de alerta opcional.
+ *
+ * @example
+ * ```tsx
+ * <KPIComparison percentage={1.0} trend="positive" label="KPI comparison" />
+ * <KPIComparison percentage={-10} trend="negative" showWarning={true} />
+ * ```
+ */
+export declare const KPIComparison: React.ForwardRefExoticComponent<KPIComparisonProps & React.RefAttributes<HTMLDivElement>>;
+export { KPIComparisonCustom } from './KPIComparisonCustom';
+export type { KPIComparisonCustomProps } from './KPIComparisonCustom';

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+
+interface LanguageSwitcherProps {
+    className?: string;
+    showText?: boolean;
+}
+declare const LanguageSwitcher: React.FC<LanguageSwitcherProps>;
+export default LanguageSwitcher;

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

@@ -0,0 +1,49 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./index').LoaderProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        type: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        show: {
+            control: "boolean";
+            description: string;
+        };
+        variant: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        size: {
+            control: "number";
+            description: string;
+        };
+        width: {
+            control: "number";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SpinnerActive: Story;
+export declare const SpinnerDisabled: Story;
+export declare const LinearActive: Story;
+export declare const LinearDisabled: Story;
+export declare const SpinnerHidden: Story;
+export declare const AllTypes: Story;
+export declare const SpinnerSizes: Story;
+export declare const LinearWidths: Story;
+export declare const Interactive: Story;
+export declare const LoadingContext: Story;
+export declare const OverlaySpinner: Story;
+export declare const FormProgress: Story;
+export declare const MultipleLoaders: Story;

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

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

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Tipo de loader
+     * @default "spinner"
+     */
+    type?: 'spinner' | 'linear';
+    /**
+     * Controla la visibilidad del loader
+     * @default true
+     */
+    show?: boolean;
+    /**
+     * Variante del loader (active o disabled)
+     * @default "active"
+     */
+    variant?: 'active' | 'disabled';
+    /**
+     * Tamaño del spinner (solo para type="spinner")
+     * @default 48
+     */
+    size?: number;
+    /**
+     * Ancho de la barra (solo para type="linear")
+     * @default 230
+     */
+    width?: number;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Componente Loader - Indicadores de carga
+ *
+ * Muestra indicadores de carga con dos tipos:
+ * - spinner: Loader circular que gira
+ * - linear: Barra de progreso horizontal animada
+ *
+ * Incluye parámetro show para controlar visibilidad.
+ */
+declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;
+export { Loader };

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

@@ -0,0 +1,20 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./index').OptionCardProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Unselected: Story;
+export declare const Selected: Story;
+export declare const Disabled: Story;
+export declare const RoleSelection: Story;
+export declare const SubscriptionPlans: Story;
+export declare const WithDisabledOptions: Story;
+export declare const SettingsConfiguration: Story;
+export declare const AllStates: Story;

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

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

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

@@ -0,0 +1,56 @@
+import * as React from 'react';
+export interface OptionCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /**
+     * Título/Nombre de la opción
+     */
+    title: string;
+    /**
+     * Descripción de la opción
+     */
+    description: string;
+    /**
+     * Valor asociado (útil para radio groups)
+     */
+    value: string;
+    /**
+     * Si está seleccionada
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Callback cuando se selecciona
+     */
+    onSelect?: (value: string) => void;
+    /**
+     * Si está deshabilitada
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Componente OptionCard
+ *
+ * Card seleccionable con radio button integrado.
+ * Ideal para selección de opciones, roles, planes, etc.
+ *
+ * Estados:
+ * - Default: Border gris, radio sin seleccionar
+ * - Selected: Border verde, radio seleccionado
+ * - Disabled: Opacidad reducida, no interactivo
+ *
+ * @example
+ * ```tsx
+ * <OptionCard
+ *   title="Admin"
+ *   description="Full access to all features and administrative settings"
+ *   value="admin"
+ *   selected={selectedRole === 'admin'}
+ *   onSelect={(value) => setSelectedRole(value)}
+ * />
+ * ```
+ */
+export declare const OptionCard: React.ForwardRefExoticComponent<OptionCardProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,59 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./index').OrderCardProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        state: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        count: {
+            control: "number";
+            description: string;
+        };
+        countLabel: {
+            control: "text";
+            description: string;
+        };
+        grossSales: {
+            control: "number";
+            description: string;
+        };
+        netSales: {
+            control: "number";
+            description: string;
+        };
+        hasDelays: {
+            control: "boolean";
+            description: string;
+        };
+        currencySymbol: {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Received: Story;
+export declare const Picking: Story;
+export declare const Dispatched: Story;
+export declare const Delivered: Story;
+export declare const WithoutDelays: Story;
+export declare const WithDelayCount: Story;
+export declare const WithoutFilter: Story;
+export declare const EuroCurrency: Story;
+export declare const AllStates: Story;
+export declare const OrdersDashboard: Story;
+export declare const SmallValues: Story;
+export declare const LargeValues: Story;
+export declare const InteractiveCallbacks: Story;
+export declare const SalesComparison: Story;
+export declare const DifferentCountLabels: Story;
+export declare const CustomIcon: Story;

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

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

package/dist/components/OrderCard/OrderCardCustom.d.ts

@@ -0,0 +1,69 @@
+import * as React from 'react';
+export interface OrderCardCustomProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Título personalizado de la card
+     */
+    title: string;
+    /**
+     * Cantidad principal
+     */
+    count: number | string;
+    /**
+     * Etiqueta de la cantidad
+     * @default "orders"
+     */
+    countLabel?: string;
+    /**
+     * Línea 1 de información (ej: "Gross Sales: $100,000.00")
+     */
+    infoLine1?: string;
+    /**
+     * Línea 2 de información (ej: "Net Sales: $100,000.00")
+     */
+    infoLine2?: string;
+    /**
+     * Ícono personalizado (React node)
+     */
+    icon: React.ReactNode;
+    /**
+     * Badge personalizado (opcional)
+     */
+    badge?: {
+        label: string;
+        variant?: 'default' | 'red' | 'green' | 'blue';
+        onClick?: () => void;
+    };
+    /**
+     * Botón personalizado (opcional)
+     */
+    button?: {
+        label: string;
+        onClick?: () => void;
+    };
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Componente OrderCardCustom
+ *
+ * Versión personalizable de OrderCard donde puedes especificar
+ * cualquier título, ícono, información y badges sin estar limitado
+ * a estados predefinidos.
+ *
+ * @example
+ * ```tsx
+ * <OrderCardCustom
+ *   title="Processing"
+ *   count={42}
+ *   countLabel="items"
+ *   infoLine1="Total: $50,000.00"
+ *   infoLine2="Pending: 12 items"
+ *   icon={<CustomIcon />}
+ *   badge={{ label: "Urgent", variant: "red" }}
+ *   button={{ label: "View", onClick: () => {} }}
+ * />
+ * ```
+ */
+export declare const OrderCardCustom: React.ForwardRefExoticComponent<OrderCardCustomProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/OrderCard/OrderCardCustom.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./OrderCardCustom').OrderCardCustomProps & 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 WithUrgentBadge: Story;
+export declare const WithSuccessBadge: Story;
+export declare const WithInfoBadge: Story;
+export declare const SimpleLayout: Story;
+export declare const AllVariants: Story;
+export declare const FullyCustomized: Story;

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

@@ -0,0 +1,82 @@
+import * as React from 'react';
+export interface OrderCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Estado de la orden (cada uno con su ícono)
+     */
+    state: 'received' | 'picking' | 'dispatched' | 'delivered';
+    /**
+     * Cantidad de órdenes/rutas
+     */
+    count: number;
+    /**
+     * Etiqueta de la cantidad
+     * @default "orders"
+     */
+    countLabel?: string;
+    /**
+     * Ventas brutas
+     */
+    grossSales: number;
+    /**
+     * Ventas netas
+     */
+    netSales: number;
+    /**
+     * Mostrar badge de delays
+     * @default false
+     */
+    hasDelays?: boolean;
+    /**
+     * Número de delays (opcional)
+     */
+    delayCount?: number;
+    /**
+     * Callback al hacer clic en el badge de Delays
+     */
+    onDelaysClick?: () => void;
+    /**
+     * Callback al hacer clic en el botón Filter
+     */
+    onFilterClick?: () => void;
+    /**
+     * Ícono personalizado (opcional)
+     */
+    icon?: React.ReactNode;
+    /**
+     * Símbolo de moneda
+     * @default "$"
+     */
+    currencySymbol?: string;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Componente OrderCard
+ *
+ * Card para mostrar el estado de órdenes con métricas de ventas,
+ * badges de delays opcionales, y botón de filtro.
+ *
+ * Estados disponibles:
+ * - received: Órdenes recibidas
+ * - picking: Órdenes en preparación
+ * - dispatched: Órdenes despachadas
+ * - delivered: Órdenes entregadas
+ *
+ * @example
+ * ```tsx
+ * <OrderCard
+ *   state="received"
+ *   count={24}
+ *   countLabel="orders"
+ *   grossSales={100000.00}
+ *   netSales={100000.00}
+ *   hasDelays={true}
+ *   onFilterClick={() => console.log('Filter')}
+ * />
+ * ```
+ */
+export declare const OrderCard: React.ForwardRefExoticComponent<OrderCardProps & React.RefAttributes<HTMLDivElement>>;
+export { OrderCardCustom } from './OrderCardCustom';
+export type { OrderCardCustomProps } from './OrderCardCustom';

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { PaginationLib } from './';
+
+declare const meta: Meta<typeof PaginationLib>;
+export default meta;
+type Story = StoryObj<typeof PaginationLib>;
+export declare const Default: Story;
+export declare const MiddlePage: Story;
+export declare const LastPage: Story;
+export declare const ManyPages: Story;
+export declare const FewPages: Story;