@e-burgos/tucu-ui 2.0.2 → 2.0.3

package/CHANGELOG.md

@@ -5,6 +5,91 @@ 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.3] - 2026-02-25
+
+### Added
+
+- **Tooltip Component**: New reusable `Tooltip` component exported from `common/index.ts`
+  - Supports `TooltipPlacement` and `TooltipColor` types
+  - Natively integrated in `Button` and `Typography` components
+- **Button Tooltip Integration**: Enhanced `Button` component with built-in tooltip support
+  - `tooltip` prop now accepts `React.ReactNode` (previously `string`)
+  - New props: `tooltipPlacement`, `tooltipColor`, `tooltipArrow`
+  - Replaced manual hover state tooltip with `Tooltip` component
+- **Typography Tooltip Integration**: Added native tooltip support to `Typography` component
+  - New props: `tooltip`, `tooltipPlacement`, `tooltipColor`, `tooltipArrow`
+  - Wraps element in `Tooltip` component when tooltip prop is provided
+- **Nested Routes Support**: New `enableNestedRoutes` prop in `StandaloneAppRoutesMenuItem`
+  - When `true`, appends `/*` to the route path for internal sub-route support
+- **TableOfContents Navigation Mode**: New props in `TableOfContents` component
+  - `navigationMode` prop (`'anchor' | 'route'`) for route-based navigation
+  - `activeSectionId` prop for active category auto-expansion
+- **Vitest**: Migrated testing framework from Jest to Vitest (`@nx/vitest`)
+- **Props Generation Script**: New `generate-props` script using `react-docgen-typescript`
+
+### Changed
+
+- **useTheme Hook**: Major refactoring of the Zustand store
+  - Introduced `defaultPresets` and `defaultState` as single source of truth
+  - Created generic `Setters<T>` type for auto-generated setter types
+  - New `IThemeState` interface (values only) separated from `ITheme` (state + setters + actions)
+  - `createSetters()` function dynamically generates ~19 setters (eliminates ~60 lines of boilerplate)
+  - `restoreDefaultColors` uses `defaultPresets` instead of duplicating values
+  - `partialize` now filters functions generically instead of listing each key manually
+- **ThemeWrapper Component**: Major refactoring (~255→70 lines of logic)
+  - Introduced `PALETTE_MAP` and `resolveColor()` helper to eliminate 12 repetitive if/else blocks
+  - Theme initialization with a single `useTheme.setState()` instead of multiple callbacks
+  - Custom palette colors applied in a single `setState` batch instead of 12 individual setter calls
+  - Dark/light mode toggle with `classList.toggle()` instead of `remove()`+`add()`
+  - Menu items memoized with `useMemo`
+- **SettingsDrawer Component**: Major refactoring
+  - New `COLOR_CONFIG` record as single source of truth for 12 color types
+  - `ColorSwitcher` simplified: uses dynamic Zustand selectors instead of destructuring entire store
+  - ColorSwitchers rendered with `.map()` instead of 12 hardcoded instances
+  - Migrated arbitrary CSS values (`[70px]`, `[12px]`, `[32px]`) to standard Tailwind classes
+- **Select Component**: Refactored controlled state synchronization
+  - Immediate state initialization from `value` prop (avoids React "uncontrolled to controlled" warning)
+  - Removed `setTimeout(100ms)` hack for state sync
+  - Extracted `resolveOption()` helper
+- **RadioGroup Component**: Removed `setTimeout(100ms)` in controlled `value` synchronization
+  - `setSelectedValue` is now called directly in `useEffect`
+- **FormField Component**: Added `field.value` normalization
+  - Checkboxes/radios normalized to `!!field.value`
+  - Other fields normalized to `field.value ?? ''`
+  - Select `value` normalized with `?? ''`
+- **Nx & Toolchain**: Upgraded from Nx 21.6.3 → 22.5.2
+  - Updated `@swc/core`, `@swc/cli`, `@swc/helpers`, `@swc-node/register`
+  - Added `"type": "module"` to root `package.json`
+- **tsconfig.lib.json**: Include pattern changed from specific path to generic glob `src/**/*.tsx?raw`
+
+### Removed
+
+- **Storybook**: Completely removed Storybook and all related files
+  - Removed `.storybook/` configuration directory
+  - Removed all 76 story files (~15,297 lines)
+  - Removed `StoryContainer`, internal pages (Introduction, Accessibility), and `useDummy` hook
+  - Demo app now serves as the interactive documentation
+- **Storybook Dependencies**: Removed `storybook`, `@storybook/addon-docs`, `@storybook/builder-vite`, `@storybook/react-vite`, `@chromatic-com/storybook`, `@chromatic-com/turbosnap-helper`, `eslint-plugin-storybook`, `remark-gfm`
+- **Jest Dependencies**: Removed `jest`, `jest-environment-jsdom`, `jest-util`, `ts-jest`, `babel-jest`, `@types/jest`, `@nx/jest`
+- **Storybook Scripts**: Removed `storybook`, `build-storybook`, `publish-storybook`, `serve-storybook`, `chromatic`, `storybook-doctor` scripts
+
+### Fixed
+
+- **Select Component**: Fixed initial render without visible selection when used with `react-hook-form`
+  - State now initializes immediately from `value` prop instead of delayed `setTimeout`
+- **RadioGroup Component**: Fixed state sync race conditions by removing `setTimeout` hack
+- **FormField Component**: Fixed React "uncontrolled to controlled" warnings
+  - Normalized `undefined` values to `''` or `false` depending on input type
+- **FileInput Component**: Added `displayName = 'FileInput'` for better React DevTools debugging
+- **CoinListBox Component**: Added `displayName = 'CoinListBox'` for better React DevTools debugging
+
+### Documentation
+
+- **Demo App Refactoring**: Major refactoring of 76+ documentation section files
+  - Cleaner, more consistent patterns across all component documentation
+  - New exports in `demo/components/index.ts` and `demo/index.ts`
+  - Updated all UI component, input, blockchain, design system, features, and form system sections
+
 ## [2.0.2] - 2026-01-22
 
 ### Changed
@@ -363,6 +448,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Version History
 
+- **2.0.3** - Removed Storybook, new Tooltip component, major theme/component refactoring, migrated from Jest to Vitest, upgraded Nx to 22.5.2
 - **2.0.2** - Responsive navigation menu improvements with dynamic text sizing
 - **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
@@ -372,6 +458,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Migration Notes
 
+### Version 2.0.3 Migration
+
+If you're upgrading from version 2.0.2 to 2.0.3:
+
+- **Storybook Removed**: Storybook is no longer included. Use the demo app for interactive documentation
+- **Button `tooltip` Prop**: Changed from `string` to `React.ReactNode`. Existing string values still work
+- **Button Tooltip Props**: New optional props `tooltipPlacement`, `tooltipColor`, `tooltipArrow` available
+- **Testing**: Migrated from Jest to Vitest. Update test configuration accordingly
+- **Nx**: Upgraded to Nx 22.5.2. Run `pnpm install` to update dependencies
+
 ### Version 2.0.0 Migration
 
 If you're upgrading from version 1.x to 2.0.0:

package/README.md

@@ -29,6 +29,10 @@ Specialized components for DeFi applications, NFT marketplaces, and crypto walle
 
 Complete Lucide React integration + 97+ custom-designed icons including blockchain/crypto icons, layout controls, social brands, and specialized UI elements.
 
+### **💬 Tooltip System**
+
+Flexible Tooltip component with portal-based rendering (`createPortal`), 4 placement options (top, bottom, left, right), 7 color themes, smart auto-repositioning within the viewport, configurable enter/leave delays, and ARIA-compliant accessibility.
+
 ### **♿ Accessibility First**
 
 WCAG 2.1 AA compliant components with proper ARIA attributes and keyboard navigation.
@@ -41,7 +45,7 @@ Responsive design across all components with support for ultra-wide displays (up
 
 Built-in React Router integration with support for two architectural patterns:
 
-- **Standalone App** (default): Automatic route generation from menuItems
+- **Standalone App** (default): Automatic route generation from menuItems with nested routes support (`enableNestedRoutes`)
 - **Micro Frontends (MFE)**: Explicit route configuration with basePath and route protection
 
 ### **🎨 Tailwind CSS v4 Complete Integration**
@@ -79,6 +83,7 @@ Built on industry-leading libraries for maximum reliability:
 - **[Framer Motion](https://www.framer.com/motion/)** - Smooth animations and transitions
 - **[Recharts](https://recharts.org/)** - Composable charting library for data visualization
 - **[Swiper](https://swiperjs.com/)** - Modern mobile touch slider
+- **[Vitest](https://vitest.dev/)** - Fast unit testing framework powered by Vite
 
 ## 📦 Installation
 
@@ -886,6 +891,32 @@ import { Carousel, CarouselCards, CarouselImage } from '@e-burgos/tucu-ui';
 />
 ```
 
+### **Tooltip Component**
+
+```tsx
+import { Tooltip } from '@e-burgos/tucu-ui';
+
+// Basic Tooltip
+<Tooltip content="Edit profile" placement="top">
+  <button>Hover me</button>
+</Tooltip>
+
+// Tooltip with custom color and delay
+<Tooltip content="Delete item" color="danger" enterDelay={300} arrow>
+  <button>Delete</button>
+</Tooltip>
+
+// Rich content Tooltip
+<Tooltip
+  content={<div><strong>Pro tip:</strong> Use keyboard shortcuts for faster navigation.</div>}
+  placement="right"
+  color="primary"
+  arrow
+>
+  <span>Help</span>
+</Tooltip>
+```
+
 ### **Feedback Components**
 
 ```tsx
@@ -1008,7 +1039,7 @@ Tucu UI includes comprehensive documentation pages to help you get started:
   - **Hooks Utilities** - Custom React hooks for common patterns
   - **Accessibility** - WCAG 2.1 AA compliance and best practices
 - **Components** - Component library overview and usage patterns
-  - **UI Components** - 43+ UI components (buttons, cards, dialogs, notifications, etc.)
+  - **UI Components** - 43+ UI components (buttons, cards, dialogs, tooltips, notifications, etc.)
   - **Input Components** - 11+ form input components
   - **Blockchain Components** - 9+ specialized DeFi/Web3 components
 - **Form System** - Complete form solution with validation
@@ -1299,33 +1330,38 @@ Tucu UI is built with accessibility in mind:
 git clone <repository-url>
 
 # Install dependencies
-npm install
+pnpm install
 
-# Run Storybook for development
-npm run @e-burgos/tucu-ui
+# Run the demo for development
+pnpm nx run demo:serve
 
 # Build the library
-npm run @e-burgos/tucu-ui:build
+pnpm nx run tucu-ui:build
 
 # Run tests
-npm test
+pnpm nx run tucu-ui:test
 ```
 
 ### **Nx Monorepo Structure**
 
 ```
-@e-burgos/tucu-ui/
+tucu-ui/
 ├── apps/
-│   └── demo/                 # Demo application
+│   ├── demo/                 # Documentation & demo app (tucu-ui.netlify.app)
+│   └── test-lib/             # Library testing playground
+├── examples/
+│   ├── standalone/           # Standalone architecture example
+│   └── micro-frontends/      # Micro Frontends architecture example
 ├── ui/
-│   └── tucu-ui/             # Main library
+│   └── tucu-ui/             # Main library (@e-burgos/tucu-ui)
 │       ├── src/
-│       │   ├── components/   # All UI components
-│       │   ├── hooks/       # Utility hooks
-│       │   ├── themes/      # Theme system
-│       │   └── storybook/   # Documentation
+│       │   ├── components/   # All UI components (70+)
+│       │   ├── hooks/        # Utility hooks
+│       │   ├── themes/       # Theme system (Zustand + CSS tokens)
+│       │   └── styles.css    # Tailwind CSS v4 configuration
 │       └── package.json
-└── nx.json                  # Nx configuration
+├── scripts/                  # Build & generation scripts
+└── nx.json                   # Nx workspace configuration
 ```
 
 ## 📄 License

package/components/blockchain/coin-listbox.d.ts

@@ -11,4 +11,8 @@ export type CoinListBoxProps = {
     className?: string;
     disabled?: boolean;
 };
-export default function CoinListBox({ className, coins, selectedCoin, setSelectedCoin, disabled, }: CoinListBoxProps): import("react/jsx-runtime").JSX.Element;
+declare function CoinListBox({ className, coins, selectedCoin, setSelectedCoin, disabled, }: CoinListBoxProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CoinListBox {
+    var displayName: string;
+}
+export default CoinListBox;

package/components/buttons/button/index.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { LoaderSizeTypes, LoaderVariantTypes } from '../../loaders/loader';
+import { TooltipPlacement, TooltipColor } from '../../common/tooltip';
 type ShapeNames = 'rounded' | 'pill' | 'circle';
 type VariantNames = 'solid' | 'ghost' | 'transparent';
 type ColorNames = 'primary' | 'white' | 'gray' | 'success' | 'info' | 'warning' | 'danger';
@@ -14,7 +15,14 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     fullWidth?: boolean;
     loaderSize?: LoaderSizeTypes;
     loaderVariant?: LoaderVariantTypes;
-    tooltip?: string;
+    /** Tooltip text or content to display on hover */
+    tooltip?: React.ReactNode;
+    /** Tooltip placement relative to button */
+    tooltipPlacement?: TooltipPlacement;
+    /** Tooltip color theme */
+    tooltipColor?: TooltipColor;
+    /** Show an arrow on the tooltip */
+    tooltipArrow?: boolean;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     'aria-label'?: string;
     'aria-describedby'?: string;

package/components/common/index.d.ts

@@ -4,3 +4,4 @@ export * from './collapse';
 export * from './scrollbar';
 export * from './scrollbar-native';
 export * from './skeleton';
+export * from './tooltip';

package/components/common/tooltip.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipColor = 'dark' | 'light' | 'primary' | 'success' | 'info' | 'warning' | 'danger';
+export interface TooltipProps {
+    /** Content to display inside the tooltip */
+    content: React.ReactNode;
+    /** Preferred placement of the tooltip relative to anchor */
+    placement?: TooltipPlacement;
+    /** Color theme of the tooltip. When undefined, automatically uses 'dark' in light mode and 'light' in dark mode based on the current theme. */
+    color?: TooltipColor;
+    /** Show an arrow pointing to the anchor */
+    arrow?: boolean;
+    /** Delay in ms before the tooltip appears */
+    enterDelay?: number;
+    /** Delay in ms before the tooltip hides */
+    leaveDelay?: number;
+    /** Whether the tooltip is disabled */
+    disabled?: boolean;
+    /** Additional class name for the tooltip container */
+    className?: string;
+    /** The element that triggers the tooltip */
+    children: React.ReactElement;
+}
+/**
+ * Tooltip component that uses a React Portal to render above all other DOM elements.
+ * Supports configurable placement, arrow, color theme, and enter/leave delays.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Hello!" placement="top" arrow>
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ * ```
+ */
+export declare function Tooltip({ content, placement, color, arrow, enterDelay, leaveDelay, disabled, className, children, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Tooltip {
+    var displayName: string;
+}
+export default Tooltip;

package/components/inputs/file-input.d.ts

@@ -38,7 +38,7 @@ export interface FileInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
  * You can use props like `disabled`, `multiple`, `capture` etc.
  */
 export declare function FileInput({ accept, children, label, containerProps, additionalInputProps, placeholderText, containerClassName, wrapperClassName, labelClassName, onChange, multiple, ...props }: React.PropsWithChildren<FileInputProps>, ref: ForwardedRef<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
-declare const _default: import('react').ForwardRefExoticComponent<FileInputProps & {
+declare const FileInputWithRef: import('react').ForwardRefExoticComponent<FileInputProps & {
     children?: import('react').ReactNode | undefined;
 } & import('react').RefAttributes<HTMLInputElement>>;
-export default _default;
+export default FileInputWithRef;

package/components/typography/index.d.ts

@@ -1,3 +1,4 @@
+import { TooltipPlacement, TooltipColor } from '../common/tooltip';
 declare const classes: {
     h1: string;
     h2: string;
@@ -55,10 +56,18 @@ export interface TypographyProps {
     fontFamily?: keyof typeof fontFamilyClasses;
     /** Add custom classes for extra style */
     className?: string;
+    /** Tooltip text or content to display on hover */
+    tooltip?: React.ReactNode;
+    /** Tooltip placement relative to the text element */
+    tooltipPlacement?: TooltipPlacement;
+    /** Tooltip color theme */
+    tooltipColor?: TooltipColor;
+    /** Show an arrow on the tooltip */
+    tooltipArrow?: boolean;
 }
 /**
  * Text component is the used to render text and paragraphs within an interface using well-defined typographic styles.
  *  It renders a `<p>` tag by default.
  */
-export declare function Typography({ tag, title, children, className, color, fontFamily, }: React.PropsWithChildren<TypographyProps>): import("react/jsx-runtime").JSX.Element;
+export declare function Typography({ tag, title, children, className, color, fontFamily, tooltip, tooltipPlacement, tooltipColor, tooltipArrow, }: React.PropsWithChildren<TypographyProps>): import("react/jsx-runtime").JSX.Element;
 export default Typography;

package/demo/components/auto-props-table.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export interface AutoPropsTableProps {
+    /** Component name as it appears in propsRegistry (e.g. "Button", "Input") */
+    componentName: string;
+    /** Optional title override (defaults to "{ComponentName} Props") */
+    title?: string;
+    /** Whether to show the component source file path */
+    showFilePath?: boolean;
+    /** Additional className for the container */
+    className?: string;
+    /** Filter props by name (show only matching) */
+    filterProps?: string[];
+    /** Hide props by name */
+    hideProps?: string[];
+}
+export declare const AutoPropsTable: React.FC<AutoPropsTableProps>;

package/demo/components/dynamic-sections-page.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+export interface SectionConfig {
+    /** Unique identifier (kebab-case), used in URL path */
+    id: string;
+    /** Display label for the TOC item */
+    label: string;
+    /** Optional category for grouping in the TOC sidebar */
+    category?: string;
+    /** Lazy-loaded section component */
+    component: React.LazyExoticComponent<React.ComponentType<Record<string, never>>>;
+}
+export interface DynamicSectionsPageProps {
+    /** Array of section configurations */
+    sections: SectionConfig[];
+    /** Hero card or intro content shown at the top */
+    hero: React.ReactNode;
+    /** Title for the table of contents sidebar */
+    tocTitle?: string;
+    /** Optional placeholder when no section is selected (defaults to a sections grid) */
+    placeholder?: React.ReactNode;
+}
+/**
+ * Hook that extracts the current section from the URL wildcard param
+ * and provides navigation helpers.
+ *
+ * Requires the parent route to be registered with `enableNestedRoutes: true`
+ * (which appends /* to the route path).
+ */
+export declare function useDynamicSection(sectionIds: string[]): {
+    sectionId: string | undefined;
+    basePath: string;
+    navigateToSection: (id: string) => void;
+    navigateToBase: () => void;
+};
+/**
+ * Generic page component that renders a TOC sidebar + a single section
+ * based on the current URL. Each section gets its own route/page.
+ *
+ * Usage:
+ * ```tsx
+ * const sections: SectionConfig[] = [
+ *   { id: 'button', label: 'Button', category: 'Buttons', component: lazy(() => import('./ButtonSection')) },
+ * ];
+ * <DynamicSectionsPage sections={sections} hero={<HeroCard ... />} />
+ * ```
+ */
+export declare const DynamicSectionsPage: React.FC<DynamicSectionsPageProps>;
+export default DynamicSectionsPage;

package/demo/components/index.d.ts

@@ -1,5 +1,8 @@
+export * from './auto-props-table';
+export * from './dynamic-sections-page';
 export * from './hero-card';
 export * from './nav-options';
 export * from './playground-button';
+export * from './prop-playground';
 export * from './table-of-contents';
 export * from './lazy-component-section';

package/demo/components/prop-playground.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export interface PropPlaygroundProps {
+    /** Component name from propsRegistry */
+    componentName: string;
+    /** The component to render with interactive props */
+    children: (props: any) => React.ReactNode;
+    /** Default prop values to start with */
+    defaultValues?: Record<string, any>;
+    /** Props to exclude from the playground controls */
+    excludeProps?: string[];
+    /** Only show these props in the controls */
+    includeProps?: string[];
+    /** Additional className */
+    className?: string;
+    /** Title override */
+    title?: string;
+}
+export declare const PropPlayground: React.FC<PropPlaygroundProps>;

package/demo/components/table-of-contents.d.ts

@@ -11,6 +11,10 @@ interface TableOfContentsProps {
     onItemClick?: (item: TableOfContentsItem) => void;
     children?: React.ReactNode;
     onSidebarToggle?: (isOpen: boolean) => void;
+    /** Navigation mode: 'anchor' scrolls to sections (default), 'route' navigates via onItemClick */
+    navigationMode?: 'anchor' | 'route';
+    /** Active section ID (used in 'route' mode to highlight the current item) */
+    activeSectionId?: string;
 }
 export declare const TableOfContents: React.FC<TableOfContentsProps>;
 export default TableOfContents;

package/demo/generated/props-metadata.d.ts

@@ -0,0 +1,23 @@
+/**
+ * AUTO-GENERATED — Do not edit manually.
+ * Generated by: scripts/generate-props.ts
+ * Last updated: 2026-02-25T13:56:00.470Z
+ * Components: 91
+ */
+export interface PropInfo {
+    name: string;
+    type: string;
+    defaultValue: string | null;
+    required: boolean;
+    description: string;
+}
+export interface ComponentMeta {
+    displayName: string;
+    description: string;
+    filePath: string;
+    props: PropInfo[];
+}
+export declare const propsRegistry: Record<string, ComponentMeta>;
+export declare function getComponentProps(componentName: string): ComponentMeta | undefined;
+export declare function getComponentNames(): string[];
+export declare function searchComponents(query: string): ComponentMeta[];

package/demo/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
+export * from './generated/props-metadata';
 export * from './utils';
 export * from './pages';

package/demo/pages/blockchain/BlockchainComponents.d.ts

@@ -1 +1,2 @@
 export declare function BlockchainComponents(): import("react/jsx-runtime").JSX.Element;
+export default BlockchainComponents;

package/demo/pages/components/UiComponents.d.ts

@@ -1 +1,2 @@
 export declare function UiComponents(): import("react/jsx-runtime").JSX.Element;
+export default UiComponents;

package/demo/pages/components/ui-components-sections/TooltipSection.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const TooltipSection: React.FC;
+export default TooltipSection;

package/documentation/APIReferenceSection-B2oYdmby.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-D874Kozv.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const i=[{key:"prop",label:"Property",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:"required",label:"Required",render:r=>String(r)==="Yes"?e.jsx(t.Badge,{variant:"outline",className:"text-xs",children:"Yes"}):e.jsx(t.Badge,{variant:"outline",className:"text-xs",children:"Optional"})},{key:"description",label:"Description"}],s=[{prop:"name",type:"string",required:"Yes",description:"Display name for navigation menu"},{prop:"path",type:"string",required:"Yes",description:"URL path for the route"},{prop:"component",type:"JSX.Element",required:"Yes",description:"Component to render for this route"},{prop:"icon",type:"React.ReactNode",required:"Optional",description:"Icon to display in navigation"},{prop:"dropdownItems",type:"StandaloneAppRoutesMenuItem[]",required:"Optional",description:"Array of nested sub-routes"},{prop:"hide",type:"boolean",required:"Optional",description:"Hide route from navigation menu"},{prop:"isPublic",type:"boolean",required:"Optional",description:"Whether the route is publicly accessible (default: true)"}],n=[{key:"prop",label:"Property",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:"required",label:"Required",render:r=>String(r)==="Yes"?e.jsx(t.Badge,{variant:"outline",className:"text-xs",children:"Yes"}):e.jsx(t.Badge,{variant:"outline",className:"text-xs",children:"Optional"})},{key:"description",label:"Description"}],a=[{prop:"key",type:"string",required:"Yes",description:"Unique identifier for the route"},{prop:"path",type:"string",required:"Yes",description:"URL path for the route"},{prop:"element",type:"JSX.Element",required:"Yes",description:"Component to render for this route"},{prop:"isPublic",type:"boolean",required:"Optional",description:"Whether the route is publicly accessible (default: false)"},{prop:"disabled",type:"boolean",required:"Optional",description:"Whether the route is disabled"}];return e.jsx("div",{className:"space-y-8",children:e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"API Reference",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsx(t.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Complete API reference for the routing system components and interfaces."}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"StandaloneAppRoutesMenuItem Properties"}),e.jsx(t.BasicTable,{columns:i,data:s})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"IAppRouteConfig Properties (MFE)"}),e.jsx(t.BasicTable,{columns:n,data:a})]})]})]})})})})};exports.default=l;

package/{APIReferenceSection-DIjWDVUT.mjs → documentation/APIReferenceSection-h-8Utbap.js}

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { C as s, a as l, T as i, B as n, D as a } from "./index-HwvOEWI7.mjs";
+import { C as s, a as l, T as i, l as n, G as a } from "../index-DsiBIFwo.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/ActiveLinkSection-C95OfpHr.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-D874Kozv.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"ActiveLink"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A link component that automatically applies an active class when the current path matches the link path."})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.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(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Active Link"}),e.jsxs("div",{className:"flex gap-4",children:[e.jsx(t.ActiveLink,{to:"/components",path:"/components",children:"Components"}),e.jsx(t.ActiveLink,{to:"/about",path:"/about",children:"About"})]})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"With Custom Active Class"}),e.jsx(t.ActiveLink,{to:"/home",path:"/home",activeClassName:"text-brand font-bold",children:"Home"})]})]})})})}),e.jsx(t.PropPlayground,{componentName:"ActiveLink",defaultValues:{path:"/demo",activeClassName:"active"},excludeProps:["state","to"],children:a=>e.jsx(t.ActiveLink,{...a,to:"#",children:"Active Link Example"})}),e.jsx(t.AutoPropsTable,{componentName:"ActiveLink"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { ActiveLink } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<ActiveLink to="/components" path="/components">
+  Components
+</ActiveLink>
+
+// With custom active class
+<ActiveLink
+  to="/home"
+  path="/home"
+  activeClassName="text-brand font-bold"
+>
+  Home
+</ActiveLink>
+
+// Navigation example
+<nav>
+  <ActiveLink to="/" path="/">Home</ActiveLink>
+  <ActiveLink to="/about" path="/about">About</ActiveLink>
+  <ActiveLink to="/contact" path="/contact">Contact</ActiveLink>
+</nav>`})})})})]});exports.default=i;

package/documentation/ActiveLinkSection-CdXQGIsJ.js

@@ -0,0 +1,81 @@
+import { jsxs as t, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { T as a, C as i, a as o, V as c, s as l, A as m, c as r } from "../index-DsiBIFwo.js";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const A = () => /* @__PURE__ */ t(s, { children: [
+  /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "ActiveLink" }),
+    /* @__PURE__ */ e(
+      a,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A link component that automatically applies an active class when the current path matches the link path."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ t(i, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Active Link" }),
+      /* @__PURE__ */ t("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ e(c, { to: "/components", path: "/components", children: "Components" }),
+        /* @__PURE__ */ e(c, { to: "/about", path: "/about", children: "About" })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(i, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "With Custom Active Class" }),
+      /* @__PURE__ */ e(
+        c,
+        {
+          to: "/home",
+          path: "/home",
+          activeClassName: "text-brand font-bold",
+          children: "Home"
+        }
+      )
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(
+    l,
+    {
+      componentName: "ActiveLink",
+      defaultValues: { path: "/demo", activeClassName: "active" },
+      excludeProps: ["state", "to"],
+      children: (n) => /* @__PURE__ */ e(c, { ...n, to: "#", children: "Active Link Example" })
+    }
+  ),
+  /* @__PURE__ */ e(m, { componentName: "ActiveLink" }),
+  /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    r,
+    {
+      language: "tsx",
+      code: `import { ActiveLink } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<ActiveLink to="/components" path="/components">
+  Components
+</ActiveLink>
+
+// With custom active class
+<ActiveLink
+  to="/home"
+  path="/home"
+  activeClassName="text-brand font-bold"
+>
+  Home
+</ActiveLink>
+
+// Navigation example
+<nav>
+  <ActiveLink to="/" path="/">Home</ActiveLink>
+  <ActiveLink to="/about" path="/about">About</ActiveLink>
+  <ActiveLink to="/contact" path="/contact">Contact</ActiveLink>
+</nav>`
+    }
+  ) }) }) })
+] });
+export {
+  A as default
+};

package/{AdvancedColorSystemSection-CPywSlwi.mjs → documentation/AdvancedColorSystemSection-BQshRXTc.js}

@@ -1,5 +1,5 @@
 import { jsxs as e, Fragment as i, jsx as a } from "react/jsx-runtime";
-import { T as r, C as c, a as o, c as d } from "./index-HwvOEWI7.mjs";
+import { T as r, C as c, a as o, c as d } from "../index-DsiBIFwo.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";