@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/CHANGELOG.md

@@ -5,6 +5,222 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.0] - 2026-01-15
+
+### Added
+
+- **Advanced Routing System**: Complete routing architecture with two patterns
+  - **Standalone App Pattern** (default): Automatic route generation from `menuItems`
+    - Simple configuration with menu-driven navigation
+    - Perfect for single-page applications
+    - Optional `customRoutes` for advanced routing needs
+    - Type-safe with `StandaloneAppRoutesMenuItem[]` interface
+  - **Micro Frontends (MFE) Pattern**: Explicit route configuration
+    - Route protection with `isPublic` and `isAuthenticated` props
+    - Base path support for micro-frontend integration
+    - Type-safe with `IAppRouteConfig[]` interface
+    - `ShellWrapper` component for MFE integration
+  - TypeScript discriminated unions ensure correct prop usage for each pattern
+  - Comprehensive documentation with examples for both patterns
+- **Enhanced Theming System**: Major improvements to color architecture
+  - Expanded from 26+ to **34+ color presets**
+  - **12-layer color architecture**: primary, dark primary, secondary, dark secondary, accent, dark accent, muted, dark muted, and background variations
+  - New modern color presets: Mint, Lavender, Violet, Chocolate, Tan, Beige
+  - Enhanced color system with CSS variables for all layers
+  - Improved theme persistence and restoration
+- **Standalone Application Examples**: Complete standalone app example
+  - Full integration guide documentation
+  - Architecture documentation
+  - Development guide
+  - Example application with all features
+- **Micro Frontends Examples**: Complete MFE example
+  - Full integration guide documentation
+  - Architecture documentation
+  - Development guide
+  - Example applications (authentication, dashboard, landing)
+- **Documentation Pattern System**: Comprehensive documentation standards
+  - New `.cursor/rules/documentation-pattern-rules.mdc` for AI-assisted linting
+  - Updated `documentation-pattern-guide.md` with design rules
+  - Standardized iconography with colored gradients
+  - Container background guidelines (`bg-light-dark`, semantic classes)
+  - Text highlighting with borders instead of backgrounds
+  - `BasicTable` component requirement for all tables
+  - Alert component text color guidelines
+- **Documentation Improvements**: Major updates across all documentation pages
+  - Updated routing system documentation with Standalone and MFE sections
+  - Refactored `RoutingSystem.tsx` with three distinct sections:
+    - Micro Frontends (MFE) Support
+    - Standalone App
+    - Architectural Patterns: Standalone vs MFE
+  - Updated all component documentation pages to follow new design patterns
+  - Updated form system documentation pages
+  - Updated features documentation pages
+  - Updated tailwind utilities documentation pages
+  - Consistent use of `BasicTable` component throughout
+  - Standardized iconography and container backgrounds
+- **BasicTable Component**: Enhanced table component for documentation
+  - Reusable component for displaying tabular data
+  - Consistent styling and responsiveness
+  - Dark mode support
+  - Used throughout documentation for props tables and API references
+- **Icon System Enhancements**: Complete icon system documentation
+  - 5000+ Lucide React icons fully integrated
+  - 97+ custom-designed icons
+  - Comprehensive icon system documentation
+  - Icon sizing guide
+  - Custom icons guide
+  - Usage examples and best practices
+- **Accessibility Improvements**: Enhanced accessibility documentation
+  - WCAG 2.1 AA compliance documentation
+  - Component accessibility status tracking
+  - Keyboard navigation guides
+  - Testing guidelines
+  - Implementation examples
+- **Hooks Utilities Documentation**: Comprehensive hooks documentation
+  - Complete hook categories documentation
+  - Live demonstrations
+  - Best practices guide
+  - Hook features overview
+
+### Changed
+
+- **ThemeProvider Component**: Major architectural improvements
+  - Split into two providers: `StandaloneAppThemeProvider` and `MfeAppThemeProvider`
+  - TypeScript discriminated unions for type safety
+  - Conditional prop requirements based on `architecturalPatterns`
+  - Enhanced prop validation and IntelliSense support
+  - Removed deprecated `architecturalPatterns="single"` (now `"standalone"`)
+- **Color System**: Expanded and improved
+  - Increased from 26+ to 34+ color presets
+  - Implemented 12-layer color architecture
+  - Enhanced CSS variable system
+  - Improved color mixing and theming
+- **Documentation Structure**: Comprehensive refactoring
+  - All documentation pages updated to follow new design patterns
+  - Consistent use of semantic background classes (`bg-light-dark`, `bg-light dark:bg-dark`)
+  - Standardized iconography with colored gradients (`bg-linear-to-br` with `shadow-lg`)
+  - Unified text highlighting approach (borders instead of backgrounds for inline code)
+  - Replaced HTML tables with `BasicTable` component
+  - Updated 100+ documentation files across components, features, form-system, and tailwind sections
+  - Consistent spacing, typography, and component usage patterns
+- **README Files**: Major updates
+  - Updated main README.md with v2.0.0 features
+  - Updated README-es.md (Spanish) with v2.0.0 features
+  - Added comprehensive examples for both architectural patterns
+  - Updated props reference tables
+  - Enhanced quick start guides
+
+### Fixed
+
+- **Type Safety**: Improved TypeScript type checking
+  - Discriminated unions prevent mixing Standalone and MFE props
+  - Compile-time errors for incorrect pattern usage
+  - Enhanced IntelliSense support
+- **Documentation Consistency**: Standardized across all pages
+  - Fixed inconsistent background classes
+  - Fixed iconography styling
+  - Fixed text highlighting approaches
+  - Replaced all HTML tables with `BasicTable`
+
+### Documentation
+
+- **New Documentation Pages**:
+  - Standalone application integration guide
+  - Standalone application architecture documentation
+  - Standalone application development guide
+  - Micro Frontends integration guide (updated)
+  - Routing system comprehensive documentation
+- **Updated Documentation Pages**:
+  - Introduction page with v2.0.0 features
+  - Routing system with three distinct sections
+  - All component documentation pages
+  - All form system documentation pages
+  - All features documentation pages
+  - All tailwind utilities documentation pages
+- **Documentation Standards**:
+  - Created `.cursor/rules/documentation-pattern-rules.mdc`
+  - Updated `documentation-pattern-guide.md`
+  - Established design pattern guidelines
+  - Standardized component usage patterns
+
+### Migration from 1.x to 2.0.0
+
+- **No Breaking Changes for Standalone Apps**: If you're using `ThemeProvider` with `menuItems`, no changes are required - Standalone is now the default pattern
+- **MFE Migration**: If migrating to MFE pattern, set `architecturalPatterns="mfe"` and provide required props (`basePath`, `appRoutesConfig`)
+- **Deprecated**: `architecturalPatterns="single"` has been removed - use `"standalone"` or omit it (default)
+- **TypeScript**: Enhanced type safety will catch incorrect prop usage at compile time
+- **Color Presets**: Expanded from 26+ to 34+ presets - all existing presets remain compatible
+- **Documentation**: All documentation has been updated - refer to new examples for best practices
+
+## [1.2.0] - 2025-11-11
+
+### Added
+
+- **Carousel Components**: Complete carousel system with multiple variants
+  - `CarouselComponent`: Main carousel component with Swiper integration
+  - `CarouselCards`: Carousel variant for displaying cards
+  - `CarouselImage`: Carousel variant for displaying images
+  - Comprehensive README documentation (279 lines)
+  - Full Storybook stories for all carousel variants
+- **Input Component**: Major enhancements and new features
+  - Improved date picker functionality
+  - Enhanced password visibility toggle
+  - Better validation and error handling
+  - Expanded Storybook stories with more examples
+- **InputSearcher Component**: Significant refactoring and improvements
+  - Enhanced filtering and search capabilities
+  - Improved state management
+  - Better user experience with error handling
+  - New comprehensive Storybook stories (232 lines)
+- **CodeBlock Component**: Improved syntax highlighting and display
+  - Better Prism.js integration
+  - Enhanced code formatting
+
+### Changed
+
+- **Input Component**: Major refactoring (344 lines changed)
+  - Improved internal structure and organization
+  - Enhanced prop handling and validation
+  - Better TypeScript typing
+- **InputSearcher Component**: Complete refactoring (331 lines changed)
+  - Improved internal state management
+  - Better filtering algorithm
+  - Enhanced dropdown behavior
+- **Radio Component**: Enhanced implementation (108 lines changed)
+  - Improved styling and behavior
+  - Better accessibility support
+- **Checkbox Component**: Minor improvements (15 lines changed)
+- **PinCode Component**: Enhanced functionality (18 lines changed)
+- **RadioGroup Component**: Minor updates (4 lines changed)
+- **Tab Components**: Improved animations and transitions
+  - `Tab`: Enhanced panel transitions (13 lines changed)
+  - `TabSelect`: Minor improvements (2 lines changed)
+- **Vite Configuration**: Updated build configuration
+  - Enhanced plugin setup
+  - Improved build optimization
+
+### Fixed
+
+- **Input Components**: Fixed various edge cases and bugs
+- **Auth Components**: Fixed `ResetPinForm` component issues (4 lines changed)
+- **Layout Components**: Fixed responsive layout issues in classic and minimal layouts
+
+### Documentation
+
+- **Storybook**: Major documentation updates
+  - Expanded `01-introduction.mdx` with comprehensive library overview (650+ lines)
+  - Removed fragmented MDX documentation files (consolidated into introduction)
+  - Updated all input component stories with better examples
+  - Added new Storybook stories for carousel components
+
+## [1.1.1] - 2025-11-10
+
+### Changed
+
+- **Package**: Published beta version to npm
+  - Updated package.json version
+  - Prepared for beta release
+
 ## [1.1.0] - 2024-12-19
 
 ### Added
@@ -56,6 +272,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- Future improvements and enhancements
+
 ## [1.0.0] - Initial Release
 
 ### Added
@@ -99,5 +319,38 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Version History
 
+- **2.0.0** - Major release with advanced routing system (Standalone & MFE), enhanced theming (34+ presets, 12-layer architecture), comprehensive documentation improvements, and architectural pattern support
+- **1.2.0** - Major input components update, new carousel system, and comprehensive improvements
+- **1.1.1** - Beta version publication
 - **1.1.0** - Enhanced form components with improved hover states, removed DEFAULT values, and bug fixes
 - **1.0.0** - Initial release with core form components and UI elements
+
+## Migration Notes
+
+### Version 2.0.0 Migration
+
+If you're upgrading from version 1.x to 2.0.0:
+
+- **Architectural Patterns**: The `ThemeProvider` now supports two patterns:
+  - **Standalone** (default): No changes needed if using `menuItems` - this is the default behavior
+  - **MFE**: Set `architecturalPatterns="mfe"` and provide `basePath` and `appRoutesConfig`
+- **Breaking**: Removed `architecturalPatterns="single"` - use `"standalone"` instead (or omit it, as it's the default)
+- **Type Safety**: TypeScript will now enforce correct props for each architectural pattern
+- **Color Presets**: Expanded from 26+ to 34+ presets with 12-layer architecture
+- **Documentation**: All documentation has been updated with new patterns and examples
+
+### Tailwind CSS v4 Migration (v1.1.0+)
+
+If you're upgrading from a version before the Tailwind v4 migration:
+
+- **Required**: Update to Tailwind CSS v4 (`>=4.0.0`) in your project
+- **Breaking**: The library no longer includes custom Tailwind utility CSS files
+- **Breaking**: `tailwind.config.js` configuration has changed - refer to Tailwind v4 documentation
+- **Note**: All styles are now consolidated in `globals.css`
+- **Action**: Ensure your project uses Tailwind CSS v4 to avoid compatibility issues
+
+### Package Manager Migration (v1.1.0+)
+
+- The project now uses `pnpm` as the package manager
+- If contributing, ensure you have `pnpm` installed
+- Dependencies are managed through `pnpm` workspace configuration

package/CardContainerSection-Cso5x1TX.mjs

@@ -0,0 +1,99 @@
+import { jsxs as r, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { T as a, C as t, a as n, B as d, c as o } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => /* @__PURE__ */ r(i, { children: [
+  /* @__PURE__ */ r("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "CardContainer" }),
+    /* @__PURE__ */ e(
+      a,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A container component that provides consistent styling and layout for card-based content."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ r(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Basic Card" }),
+      /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(a, { tag: "p", children: "Card content goes here" }) })
+    ] }),
+    /* @__PURE__ */ r(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "With Custom Content" }),
+      /* @__PURE__ */ r(t, { children: [
+        /* @__PURE__ */ e(a, { tag: "h3", className: "font-bold mb-2", children: "Card Title" }),
+        /* @__PURE__ */ e(a, { tag: "p", children: "This is a card with custom content including a title and description." })
+      ] })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(d, { columns: [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (s) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(s) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (s) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(s) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (s) => {
+        const l = String(s);
+        return l === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: l });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], data: [
+    {
+      prop: "children",
+      type: "React.ReactNode",
+      default: "-",
+      description: "Content to display inside the card"
+    },
+    {
+      prop: "className",
+      type: "string",
+      default: "-",
+      description: "Additional CSS classes"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    o,
+    {
+      language: "tsx",
+      code: `import { CardContainer, Typography } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<CardContainer>
+  <Typography tag="p">Card content goes here</Typography>
+</CardContainer>
+
+// With custom content
+<CardContainer>
+  <Typography tag="h3" className="font-bold mb-2">
+    Card Title
+  </Typography>
+  <Typography tag="p">
+    Card description and content
+  </Typography>
+</CardContainer>
+
+// With custom className
+<CardContainer className="bg-blue-50">
+  <Typography tag="p">Custom styled card</Typography>
+</CardContainer>`
+    }
+  ) }) }) })
+] });
+export {
+  x as default
+};

package/CardContainerSection-_OZaMbIu.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const s=[{key:"prop",label:"Prop",render:r=>e.jsx("code",{className:"text-xs text-brand",children:String(r)})},{key:"type",label:"Type",render:r=>e.jsx("code",{className:"text-xs",children:String(r)})},{key:"default",label:"Default",render:r=>{const t=String(r);return t==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:t})}},{key:"description",label:"Description"}],n=[{prop:"children",type:"React.ReactNode",default:"-",description:"Content to display inside the card"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"CardContainer"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A container component that provides consistent styling and layout for card-based content."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Card"}),e.jsx(a.CardContainer,{children:e.jsx(a.Typography,{tag:"p",children:"Card content goes here"})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Custom Content"}),e.jsxs(a.CardContainer,{children:[e.jsx(a.Typography,{tag:"h3",className:"font-bold mb-2",children:"Card Title"}),e.jsx(a.Typography,{tag:"p",children:"This is a card with custom content including a title and description."})]})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:s,data:n})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { CardContainer, Typography } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<CardContainer>
+  <Typography tag="p">Card content goes here</Typography>
+</CardContainer>
+
+// With custom content
+<CardContainer>
+  <Typography tag="h3" className="font-bold mb-2">
+    Card Title
+  </Typography>
+  <Typography tag="p">
+    Card description and content
+  </Typography>
+</CardContainer>
+
+// With custom className
+<CardContainer className="bg-blue-50">
+  <Typography tag="p">Custom styled card</Typography>
+</CardContainer>`})})})})]})};exports.default=i;

package/CardTitleSection-BNmdH8MJ.mjs

@@ -0,0 +1,113 @@
+import { jsxs as a, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { T as t, C as r, a as l, B as o, c } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const N = () => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "CardTitle" }),
+    /* @__PURE__ */ e(
+      t,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A card component with an integrated title that appears above the card border."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ a(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Title" }),
+      /* @__PURE__ */ e(l, { title: "Card Title", children: /* @__PURE__ */ e(t, { tag: "p", children: "Card content goes here" }) })
+    ] }),
+    /* @__PURE__ */ a(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Without Border" }),
+      /* @__PURE__ */ e(l, { title: "No Border", border: !1, children: /* @__PURE__ */ e(t, { tag: "p", children: "Card without border" }) })
+    ] }),
+    /* @__PURE__ */ a(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Rich Content" }),
+      /* @__PURE__ */ e(l, { title: "Rich Content", children: /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(t, { tag: "p", children: "First paragraph" }),
+        /* @__PURE__ */ e(t, { tag: "p", children: "Second paragraph" })
+      ] }) })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(o, { columns: [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (i) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(i) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (i) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(i) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (i) => {
+        const d = String(i);
+        return d === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: d });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], data: [
+    {
+      prop: "title",
+      type: "string",
+      default: "-",
+      description: "Title text to display"
+    },
+    {
+      prop: "border",
+      type: "boolean",
+      default: "true",
+      description: "Whether to show border"
+    },
+    {
+      prop: "children",
+      type: "React.ReactNode",
+      default: "-",
+      description: "Content to display inside the card"
+    },
+    {
+      prop: "className",
+      type: "string",
+      default: "-",
+      description: "Additional CSS classes"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    c,
+    {
+      language: "tsx",
+      code: `import { CardTitle, Typography } from '@e-burgos/tucu-ui';
+
+// With title
+<CardTitle title="Card Title">
+  <Typography tag="p">Card content goes here</Typography>
+</CardTitle>
+
+// Without border
+<CardTitle title="No Border" border={false}>
+  <Typography tag="p">Card without border</Typography>
+</CardTitle>
+
+// With rich content
+<CardTitle title="Rich Content">
+  <div className="space-y-2">
+    <Typography tag="p">First paragraph</Typography>
+    <Typography tag="p">Second paragraph</Typography>
+  </div>
+</CardTitle>`
+    }
+  ) }) }) })
+] });
+export {
+  N as default
+};

package/CardTitleSection-CGnIM20t.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const s=[{key:"prop",label:"Prop",render:a=>e.jsx("code",{className:"text-xs text-brand",children:String(a)})},{key:"type",label:"Type",render:a=>e.jsx("code",{className:"text-xs",children:String(a)})},{key:"default",label:"Default",render:a=>{const t=String(a);return t==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:t})}},{key:"description",label:"Description"}],i=[{prop:"title",type:"string",default:"-",description:"Title text to display"},{prop:"border",type:"boolean",default:"true",description:"Whether to show border"},{prop:"children",type:"React.ReactNode",default:"-",description:"Content to display inside the card"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(r.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"CardTitle"}),e.jsx(r.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A card component with an integrated title that appears above the card border."})]}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"With Title"}),e.jsx(r.CardTitle,{title:"Card Title",children:e.jsx(r.Typography,{tag:"p",children:"Card content goes here"})})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Without Border"}),e.jsx(r.CardTitle,{title:"No Border",border:!1,children:e.jsx(r.Typography,{tag:"p",children:"Card without border"})})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"With Rich Content"}),e.jsx(r.CardTitle,{title:"Rich Content",children:e.jsxs("div",{className:"space-y-2",children:[e.jsx(r.Typography,{tag:"p",children:"First paragraph"}),e.jsx(r.Typography,{tag:"p",children:"Second paragraph"})]})})]})]})})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.BasicTable,{columns:s,data:i})})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.CodeBlock,{language:"tsx",code:`import { CardTitle, Typography } from '@e-burgos/tucu-ui';
+
+// With title
+<CardTitle title="Card Title">
+  <Typography tag="p">Card content goes here</Typography>
+</CardTitle>
+
+// Without border
+<CardTitle title="No Border" border={false}>
+  <Typography tag="p">Card without border</Typography>
+</CardTitle>
+
+// With rich content
+<CardTitle title="Rich Content">
+  <div className="space-y-2">
+    <Typography tag="p">First paragraph</Typography>
+    <Typography tag="p">Second paragraph</Typography>
+  </div>
+</CardTitle>`})})})})]})};exports.default=l;

package/CarouselCardsSection-CqwkiKuv.js

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-CjRk4ezu.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const i=[{title:"Performance",description:"Blazing fast performance with optimized rendering and minimal bundle size",icon:e.jsx(s.Zap,{className:"w-8 h-8"})},{title:"Customizable",description:"Highly customizable with extensive theming options and variants",icon:e.jsx(s.Palette,{className:"w-8 h-8"})},{title:"Accessible",description:"Built with accessibility in mind, WCAG 2.1 compliant",icon:e.jsx(s.Users,{className:"w-8 h-8"})},{title:"Responsive",description:"Mobile-first design that works seamlessly across all devices",icon:e.jsx(s.Smartphone,{className:"w-8 h-8"})},{title:"Type Safe",description:"Full TypeScript support with comprehensive type definitions",icon:e.jsx(s.Shield,{className:"w-8 h-8"})},{title:"Documentation",description:"Extensive documentation with examples and best practices",icon:e.jsx(s.BookOpen,{className:"w-8 h-8"})}],l=[{key:"prop",label:"Prop",render:r=>e.jsx("code",{className:"text-xs text-brand",children:String(r)})},{key:"type",label:"Type",render:r=>e.jsx("code",{className:"text-xs",children:String(r)})},{key:"default",label:"Default",render:r=>{const t=String(r);return t==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:t})}},{key:"description",label:"Description"}],d=[{prop:"cards",type:"CarouselCardItem[]",default:"required",description:"Array of card items to display"},{prop:"cardSize",type:"'sm' | 'md' | 'lg' | 'xl'",default:"'md'",description:"Size of the cards"},{prop:"variant",type:"'default' | 'elevated' | 'outlined' | 'filled'",default:"'default'",description:"Visual variant of the cards"},{prop:"showCardTitles",type:"boolean",default:"true",description:"Whether to show card titles"},{prop:"showNavigation",type:"boolean",default:"false",description:"Show navigation arrows"},{prop:"showPagination",type:"boolean",default:"false",description:"Show pagination dots"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"CarouselCards"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A carousel component specifically designed for displaying cards with customizable sizes and variants."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Carousel Cards"}),e.jsx("div",{className:"w-full",children:e.jsx(a.CarouselCards,{cardClassName:"min-h-[250px]",cards:i})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Navigation and Pagination"}),e.jsx("div",{className:"w-full",children:e.jsx(a.CarouselCards,{cards:i,showNavigation:!0,showPagination:!0})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Elevated Variant - Medium Size"}),e.jsx("div",{className:"w-full",children:e.jsx(a.CarouselCards,{cards:i,variant:"elevated",cardSize:"md",showNavigation:!0})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Outlined Variant - Large Size"}),e.jsx("div",{className:"w-full",children:e.jsx(a.CarouselCards,{cards:i,variant:"outlined",cardSize:"lg",showPagination:!0})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Filled Variant - Small Size"}),e.jsx("div",{className:"w-full",children:e.jsx(a.CarouselCards,{cards:i,variant:"filled",cardSize:"sm",showNavigation:!0,showPagination:!0})})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:l,data:d})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { CarouselCards, LucideIcons } from '@e-burgos/tucu-ui';
+
+const cards = [
+  {
+    title: 'Performance',
+    description: 'Blazing fast performance with optimized rendering',
+    icon: <LucideIcons.Zap className="w-8 h-8" />,
+  },
+  {
+    title: 'Customizable',
+    description: 'Highly customizable with extensive theming options',
+    icon: <LucideIcons.Palette className="w-8 h-8" />,
+  },
+  {
+    title: 'Accessible',
+    description: 'Built with accessibility in mind, WCAG 2.1 compliant',
+    icon: <LucideIcons.Users className="w-8 h-8" />,
+  },
+  // ... more cards
+];
+
+// Basic usage
+<CarouselCards cards={cards} />
+
+// With navigation and pagination
+<CarouselCards cards={cards} showNavigation showPagination />
+
+// Different variants
+<CarouselCards cards={cards} variant="elevated" cardSize="md" />
+<CarouselCards cards={cards} variant="outlined" cardSize="lg" />
+<CarouselCards cards={cards} variant="filled" cardSize="sm" />
+
+// Different sizes
+<CarouselCards cards={cards} cardSize="sm" />
+<CarouselCards cards={cards} cardSize="md" />
+<CarouselCards cards={cards} cardSize="lg" />
+<CarouselCards cards={cards} cardSize="xl" />`})})})})]})};exports.default=n;