@jonapin006/tiger 1.0.11 → 1.0.13

package/README.md

@@ -2,76 +2,84 @@
 
 Welcome to **Tiger Design System**, a high-fidelity, professional-grade UI library and framework built on **Clean Architecture** principles and **SOLID** engineering. 
 
-This project is a showcase of advanced React engineering, featuring a robust multi-theme token architecture and a sophisticated "Geometry-by-Size" design system.
+Tiger handles complex multi-theme token architectures and a sophisticated "Geometry-by-Size" system, optimized for the **Wallet** ecosystem.
 
 ---
 
-## 🎨 Design Ecosystem: The Three Pillars
+## 🚀 Integración (Quick Start)
 
-Tiger features three distinct visual universes, each with its own light and dark mode implementation, driven by a centralized token configuration.
+Sigue estos pasos para integrar Tiger en tu proyecto externo de React.
 
-### 1. 💎 Glassmorphism (Modern/High-Context)
-Our flagship theme. It utilizes advanced backdrop blurs (up to `blur-3xl`), suttle card borders with varying opacities, and deep shadows to create a layered, "floating" UI experience.
-*   **Key Features**: Translucent containers, premium glass elevation, and vibrant semantic indicators for Toasts and Status badges.
-*   **Ideal for**: Modern administrative dashboards and high-fidelity consumer apps.
-
-### 2. 🎡 Mandala (Organic/Soft)
-Inspired by balance and nature. This theme focuses on softer corner radii, nature-derived color palettes, and smooth, organic transitions.
-*   **Key Features**: Earthy tones, pastel accents, and "squircle" geometry that avoids hard edges.
-*   **Ideal for**: Wellness apps, lifestyle projects, and content-heavy interfaces.
-
-### 3. 🎯 Mispuntos (Dynamic/Precision)
-Designed for density and readability. This theme prioritizes pixel-perfect alignment, higher contrast ratios, and a more structured, grid-based layout.
-*   **Key Features**: Sharp focus on data presentation, compact components, and high-contrast tables.
-*   **Ideal for**: E-commerce, loyalty platforms (Puntos), and data-intensive systems.
+### 1. Instalación
+```bash
+npm install @jonapin006/tiger@1.0.11
+```
 
----
+### 2. Configuración Raíz (`src/main.tsx`)
+Importa los estilos globales y envuelve tu aplicación con el `ThemeProvider`.
 
-## 🏗️ Architectural Excellence
+```tsx
+import { ThemeProvider } from '@jonapin006/tiger';
+import '@jonapin006/tiger/styles'; // Estilos base de Tiger
+import './index.css'; // Tu Tailwind local
 
-Tiger isn't just about looks. It's built on a rigorous engineering foundation:
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <ThemeProvider> 
+    <App />
+  </ThemeProvider>
+);
+```
 
--   **Clean Architecture**: Separation of concerns between `Domain` (Theme types, Logic), `Application` (Contexts, Hooks), `Infrastructure` (Theme implementations, Libs), and `Presentation` (React Components).
--   **SOLID Principles**: Every component is designed following the Single Responsibility and Interface Segregation principles.
--   **Scaling System**: A strict 4-tier sizing system (**XS, SM, MD, LG, XL**) applied across all atomic elements (Buttons, Inputs, Thumbnails, Lists).
--   **Token Geometry**: Geometry (padding, height, width, corner) is decoupled from colors (Mode Config), allowing theme-specific shapes without logic changes.
+### 3. Layout Responsivo (Sidebar vs Desktop)
+Usa los breakpoints de Tailwind (`md:`) para asegurar que el Sidebar se vea solo en Desktop y el menú hamburguesa solo en móvil:
+
+```tsx
+// Ejemplo de Layout
+<div className="flex flex-col md:flex-row min-h-screen">
+  
+  {/* SIDEBAR PARA DESKTOP: Oculto en móvil, visible en md y superior */}
+  <aside className="hidden md:flex w-80 h-screen sticky top-0 bg-white/5 border-r border-white/5">
+     {/* Contenido de navegación */}
+     <nav> ... </nav>
+  </aside>
+
+  {/* CONTENIDO PRINCIPAL */}
+  <main className="flex-1 p-6 md:p-16">
+    {children}
+  </main>
+</div>
+```
 
 ---
 
-## 🚀 Getting Started
+## 🛠️ Uso del Hook de Temas (`useTheme`)
 
-### Prerequisites
-- Node.js (Latest stable)
-- npm or yarn
+Para evitar errores de tipo `ReferenceError: mode is not defined`, asegúrate siempre de extraer las variables del contexto:
 
-### Installation
-```bash
-# Clone the repository
-git clone https://github.com/jonapin006/tiger.git
+```tsx
+import { useTheme } from '@jonapin006/tiger';
 
-# Install dependencies
-npm install
+const MyComponent = () => {
+    const { mode, themeConfig, toggleMode } = useTheme();
 
-# Run the development server
-npm run dev
+    return (
+        <button onClick={toggleMode} className={themeConfig.buttonText}>
+            Modo: {mode}
+        </button>
+    );
+};
 ```
 
-### Extending the Design System
-To add new components or modify styles, focus on these files:
--   `src/domain/theme/Theme.ts`: Define the interfaces and token structure.
--   `src/infrastructure/theme/glassmorphism.ts`: Implement specific theme tokens and geometry.
--   `src/presentation/components/`: Build your components consuming the `useTheme` hook.
-
 ---
 
-## 🛠️ Tech Stack
--   **React + TypeScript**
--   **Tailwind CSS** (for Utility-First styling & Token consumption)
--   **Lucide React** (Consistent iconography)
--   **Vitest** (Unit testing for critical components)
--   **Vite** (Next-gen bundling)
+## 🏗️ Excelencia Arquitectónica
+
+-   **Clean Architecture**: Separación estricta entre `Domain` (Tipos), `Application` (Hooks), `Infrastructure` (Temas) y `Presentation` (Componentes).
+-   **SOLID Principles**: Componentes desacoplados y con una única responsabilidad (SRP).
+-   **Scale System**: Sistema de 4 niveles de tamaño (**S, M, L, XL**) consistente en toda la librería.
+-   **Native Support**: Soporte nativo para atributos HTML y `forwardRef` para compatibilidad total con `react-hook-form`.
 
 ---
 
-## 📄 License
-Tiger Design System is private and intellectual property of **jonapin006**.
+## 📄 Licencia
+Tiger Design System es propiedad intelectual privada de **jonapin006**.

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { default as default_2 } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { InputHTMLAttributes } from 'react';
+import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 
 export declare interface BaseComponentProps {
@@ -43,6 +44,12 @@ export declare const mispuntosTheme: ThemeDefinition;
 
 declare type ProgressVariant = 'bar' | 'steps';
 
+export declare interface SidebarItem {
+    id: string;
+    label: string;
+    icon: default_2.ElementType;
+}
+
 export declare interface SizedComponentProps extends BaseComponentProps {
     size?: ComponentSize;
 }
@@ -301,6 +308,17 @@ export declare interface ThemeGeometryConfig {
         valueStyles: string;
         typographyMappings: Record<'small' | 'medium' | 'large' | 'xlarge', ComponentSize>;
     });
+    dropdown: (Record<Exclude<ComponentSize, ComponentSize.Xsmall>, {
+        size: string;
+    }> & {
+        contentPositioning: string;
+        typographyMappings: {
+            small: ComponentSize;
+            medium: ComponentSize;
+            large: ComponentSize;
+            xlarge: ComponentSize;
+        };
+    });
     stack: (Record<Exclude<ComponentSize, ComponentSize.Xsmall>, {
         gap: string;
     }> & {
@@ -357,6 +375,48 @@ export declare interface ThemeGeometryConfig {
         closeButton: string;
         corner: string;
     };
+    switch: (Record<ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large, {
+        track: string;
+        thumb: string;
+        translateChecked: string;
+        translateUnchecked: string;
+    }> & {
+        baseStyles: string;
+        thumbStyles: string;
+        label: string;
+        description: string;
+    });
+    sidebar: {
+        wrapper: string;
+        container: string;
+        nav: string;
+        item: string;
+        iconSize: number;
+        padding: string;
+        margin: string;
+        corner: string;
+        logoContainer: string;
+        logo: string;
+    };
+    topbar: {
+        wrapper: string;
+        container: string;
+        padding: string;
+        margin: string;
+        corner: string;
+        height: string;
+        width: string;
+        logoContainer: string;
+        logo: string;
+    };
+    layout: {
+        bodyWrapper: string;
+        bodyContent: string;
+        bodyCorner: string;
+        bodyPadding: string;
+        bodyMargin: string;
+        bodyBlobs: string[];
+    };
 }
 
 export declare enum ThemeMode {
@@ -410,8 +470,15 @@ export declare interface ThemeModeConfig {
         xlarge: string;
     };
     layout: {
-        sidebar: string;
+        sidebar: {
+            container: string;
+        };
+        topbar: {
+            container: string;
+        };
         main: string;
+        bodyBlobs: string[];
+        useGlassBody?: boolean;
     };
     statusColors: {
         success: {
@@ -514,6 +581,20 @@ export declare interface ThemeModeConfig {
         fillEffectColor: string;
         value: string;
     };
+    dropdown: {
+        trigger: string;
+        triggerSize: string;
+        content: string;
+        contentSize: string;
+        item: string;
+        itemHover: string;
+        itemFocus: string;
+    };
+    switch: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+    };
 }
 
 export declare const ThemeProvider: default_2.FC<{
@@ -525,6 +606,33 @@ export declare enum ThumbnailShape {
     Circle = "circle"
 }
 
+export declare const TigerAccordion: default_2.FC<TigerAccordionProps>;
+
+export declare const TigerAccordionItem: ({ id, title, content, disabled, icon, }: TigerAccordionItemConfig) => {
+    id: string;
+    title: default_2.ReactNode;
+    content: default_2.ReactNode;
+    disabled: boolean;
+    icon: default_2.ReactNode;
+};
+
+export declare interface TigerAccordionItemConfig {
+    id: string;
+    title: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+    icon?: default_2.ReactNode;
+}
+
+export declare interface TigerAccordionProps {
+    items: TigerAccordionItemConfig[];
+    defaultExpandedId?: string;
+    onExpandedChange?: (id: string) => void;
+    allowMultiple?: boolean;
+    size?: ComponentSize;
+    className?: string;
+}
+
 export declare const TigerBadge: default_2.FC<TigerBadgeProps>;
 
 declare interface TigerBadgeProps extends BaseComponentProps {
@@ -559,6 +667,32 @@ declare interface TigerCheckboxProps extends BaseComponentProps {
     disabled?: boolean;
 }
 
+export declare const TigerDropdown: default_2.FC<TigerDropdownProps>;
+
+export declare const TigerDropdownContent: default_2.FC<TigerDropdownContentProps>;
+
+declare interface TigerDropdownContentProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    size?: Exclude<ComponentSize, ComponentSize.Xsmall>;
+}
+
+export declare const TigerDropdownItem: default_2.FC<TigerDropdownItemProps>;
+
+declare interface TigerDropdownItemProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    value?: string;
+}
+
+declare interface TigerDropdownProps extends SizedComponentProps {
+    defaultOpen?: boolean;
+    size?: Exclude<ComponentSize, ComponentSize.Xsmall>;
+}
+
+export declare const TigerDropdownTrigger: default_2.FC<TigerDropdownTriggerProps>;
+
+declare interface TigerDropdownTriggerProps extends Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+    label?: string;
+    value?: default_2.ReactNode;
+}
+
 export declare const TigerGlassContainer: default_2.FC<TigerGlassContainerProps>;
 
 declare interface TigerGlassContainerProps extends BaseComponentProps, default_2.HTMLAttributes<HTMLDivElement> {
@@ -630,6 +764,17 @@ declare interface TigerProgressProps {
     className?: string;
 }
 
+export declare const TigerSidebar: default_2.FC<TigerSidebarProps>;
+
+export declare interface TigerSidebarProps {
+    items: SidebarItem[];
+    activeId: string;
+    onItemSelect: (id: string) => void;
+    header?: default_2.ReactNode;
+    footer?: default_2.ReactNode;
+    className?: string;
+}
+
 export declare const TigerStack: default_2.FC<TigerStackProps>;
 
 declare interface TigerStackProps {
@@ -640,6 +785,24 @@ declare interface TigerStackProps {
     className?: string;
 }
 
+export declare const TigerSwitch: default_2.FC<TigerSwitchProps>;
+
+export declare enum TigerSwitchColor {
+    Primary = "primary",
+    Secondary = "secondary",
+    Disabled = "disabled"
+}
+
+export declare interface TigerSwitchProps extends BaseComponentProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
+    color?: TigerSwitchColor;
+    label?: string;
+    description?: string;
+}
+
 export declare interface TigerTabItem {
     id: string;
     label: default_2.ReactNode;
@@ -733,6 +896,14 @@ declare interface TigerToastProps extends TigerToastItem {
 
 declare type TigerToastType = 'success' | 'error' | 'info' | 'warning' | 'neutral';
 
+export declare const TigerTopBar: default_2.FC<TigerTopBarProps>;
+
+export declare interface TigerTopBarProps {
+    title?: default_2.ReactNode;
+    actions?: default_2.ReactNode;
+    className?: string;
+}
+
 export declare const TigerTr: default_2.FC<TigerTrProps>;
 
 declare interface TigerTrProps extends BaseComponentProps {