@e-burgos/tucu-ui 2.0.2 → 2.0.4

package/CHANGELOG.md

@@ -5,6 +5,195 @@ 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.4] - 2026-05-06
+
+### Added
+
+- **Charts System**: Complete chart module built on Recharts 3.8.1 with 6 chart components
+  - `BarChart`: Vertical/horizontal bar charts with stacked mode, configurable bar radius and gap
+  - `LineChart`: Line charts with curved/straight lines, dot markers, configurable stroke width
+  - `AreaChart`: Area charts with gradient fill, stacked mode, curved/flat options
+  - `PieChart`: Pie/donut charts with labels, inner content support, and customizable colors
+  - `RadarChart`: Radar/spider charts for multi-variable comparisons with configurable fill opacity
+  - `ComposedChart`: Mixed chart combining bar, line, and area series in a single visualization
+  - Shared infrastructure: `ChartContainer`, `ChartTooltip`, `ChartEmptyState`, `useChartTheme` hook
+  - Full dark mode support with automatic theme-aware color palettes
+  - TypeScript interfaces: `ChartSeries`, `ComposedChartSeries`, `ChartDataItem`
+- **Card Component**: New flexible card component with title, description, icon, header, footer, and actions slots
+- **InfoCard Component**: Multi-column info card with grouped key-value data, accent colors, and tooltip support
+- **KeyValueRow Component**: Compact label-value display with mono and accent styling options
+- **Pagination Component**: Page navigation with configurable window size and chevron controls
+- **Stepper Component**: Step progress indicator with icons, labels, and step change callbacks
+- **TabModal Component**: Tabbed modal dialog with sidebar navigation, mobile-responsive dropdown, and portal rendering
+- **Charts Documentation Page**: Full interactive demo with 6 chart sections including PropPlayground and AutoPropsTable
+- **New Demo Sections**: CardSection, InfoCardSection, KeyValueRowSection, PaginationSection, StepperSection, TabModalSection
+
+### Changed
+
+- **Tab Component**: Complete rewrite without `@headlessui/react`
+  - Removed dependency on HeadlessUI `TabGroup`, `TabList`, `TabPanel`, `TabPanels`
+  - Implemented custom tab system using React context, `useId`, and keyboard navigation
+  - Added ARIA roles (`tablist`, `tab`, `tabpanel`) with proper `aria-selected` and `aria-controls`
+  - Full keyboard navigation (Arrow Left/Right, Home, End)
+  - Maintained Framer Motion `LayoutGroup` animations
+  - Portal rendering for mobile dropdown
+- **TabSelect Component**: Complete rewrite without `@headlessui/react`
+  - Removed HeadlessUI dependency
+  - Implemented portal-based dropdown with dynamic positioning
+  - Added keyboard navigation (Arrow Up/Down, Enter, Escape)
+  - Added close animation state management
+  - Improved highlight tracking and ARIA attributes
+- **ToggleBar Component**: Rewritten without `@headlessui/react` Switch
+  - Replaced HeadlessUI `Switch` with native `<button role="switch">` element
+  - Added `aria-checked` attribute and proper focus-visible ring
+  - Maintained same visual appearance and transitions
+- **InputSearcher Component**: Complete rewrite without `@headlessui/react`
+  - Removed HeadlessUI `Transition` component
+  - Implemented portal-based dropdown with `createPortal`
+  - Added full keyboard navigation and proper TypeScript interface
+  - Enhanced filtering with `useMemo` and memoized callbacks
+- **CoinListBox Component**: Complete rewrite without `@headlessui/react`
+  - Removed HeadlessUI `Listbox` and `Transition` components
+  - Implemented custom listbox with `createPortal` for dropdown
+  - Added keyboard navigation and ARIA compliance
+- **CollectionSelectList Component**: Refactored with new search/filter UI
+  - Replaced custom search icon with Lucide `Search` and `X` icons
+  - Integrated `Scrollbar` component for list scrolling
+- **Select Component**: Enhanced with search and clear icons from `lucide-react`
+- **Scrollbar Component**: Improved overflow handling
+  - Added `max-h-[inherit]` for proper nested height inheritance
+  - Simplified overflow management with inline style
+  - Improved timeout cleanup with null checks
+- **ScrollToTop Component**: Enhanced with new props
+  - New `behavior` prop (`'smooth' | 'instant'`) for scroll animation control
+  - Improved position prop documentation (CSS values instead of Tailwind classes)
+  - Better internal memoization with `useCallback` and `useRef`
+- **Image Component**: Improved loading and error handling
+  - Added cached image detection using `requestAnimationFrame` + `naturalWidth` check
+  - Added fallback loop prevention (won't retry if fallback also fails)
+  - Better dimension normalization for numeric strings
+- **BasicTable Component**: Minor styling improvements
+- **HorizontalNavMenu**: Layout adjustments
+- **SettingsDrawer**: Styling improvements (~116 lines changed)
+- **globals.css**: Expanded color token system with new color scale mappings
+- **Props Metadata**: Regenerated to include all new components (charts, cards, common utilities)
+- **Recharts**: Upgraded from `3.0.0` to `3.8.1`
+- **React Types**: Upgraded `@types/react` to `^19.2.14` and `@types/react-dom` to `^19.2.3`
+
+### Removed
+
+- **`@headlessui/react` Dependency**: Completely removed from the library
+  - All components previously depending on HeadlessUI have been rewritten with native React
+  - Affected components: Tab, TabSelect, ToggleBar, InputSearcher, CoinListBox
+  - Reduces bundle size and eliminates external UI dependency
+  - All functionality maintained with custom implementations
+
+### Fixed
+
+- **Charts TooltipContentProps**: Fixed TypeScript error with Recharts 3.x by wrapping with `Partial<>`
+- **Charts Focus Ring**: Removed unwanted focus outlines on chart interactions
+  - Disabled `accessibilityLayer` on chart containers
+  - Applied `tabIndex={-1}` and `outline: none` styles
+  - Added CSS `ring-0` and `[&_*]:outline-none` to `ChartContainer`
+- **Scrollbar Native**: Removed unused scrollbar-native component (8 lines)
+- **Image Component**: Fixed infinite fallback loop when both src and fallback fail
+- **PropPlayground**: Minor adjustments for chart component integration
+
+### Documentation
+
+- **Charts Components Page**: New full documentation page with 6 chart sections
+  - Each section includes multiple demo cards with different configurations
+  - CodeBlock usage examples for each chart type
+  - PropPlayground for interactive prop manipulation
+  - AutoPropsTable for auto-generated API reference
+- **New UI Component Sections**: Card, InfoCard, KeyValueRow, Pagination, Stepper, TabModal
+- **Updated Props Registry**: All new components registered with complete prop metadata
+
+## [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 +552,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Version History
 
+- **2.0.4** - Charts system (6 components), new UI components (Card, InfoCard, KeyValueRow, Pagination, Stepper, TabModal), complete removal of @headlessui/react, recharts 3.8.1
+- **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 +563,28 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Migration Notes
 
+### Version 2.0.4 Migration
+
+If you're upgrading from version 2.0.3 to 2.0.4:
+
+- **`@headlessui/react` Removed**: This dependency is no longer required. You can remove it from your project if not used elsewhere
+- **Tab/TabSelect**: API remains the same — no breaking changes in props or behavior
+- **ToggleBar**: Same props (`checked`, `onChange`) — internal implementation changed but external API is identical
+- **InputSearcher**: TypeScript interface now explicitly exported as `InputSearcherProps`
+- **Charts**: New module available at `import { BarChart, LineChart, ... } from '@e-burgos/tucu-ui'`
+- **Recharts Peer Dependency**: If using charts, ensure `recharts >= 3.8.1` is installed
+- **React Types**: Updated to `@types/react@^19.2.14` — ensure compatibility with your React version
+
+### 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

@@ -1,6 +1,6 @@
 # Tucu UI
 
-A modern, comprehensive React component library built with TypeScript, Tailwind CSS v4, and designed for creating production-ready web applications. Features **automatic layout generation**, **advanced routing system** with Standalone and Micro Frontends (MFE) support, **powerful form systems** with React Hook Form, **5000+ icons**, **specialized blockchain components**, and **WCAG 2.1 AA accessibility compliance**.
+A modern, comprehensive React component library built with TypeScript, Tailwind CSS v4, and designed for creating production-ready web applications. Features **automatic layout generation**, **advanced routing system** with Standalone and Micro Frontends (MFE) support, **powerful form systems** with React Hook Form, **data visualization charts**, **5000+ icons**, **specialized blockchain components**, and **WCAG 2.1 AA accessibility compliance**.
 
 ## 🌟 Documentation
 
@@ -29,6 +29,14 @@ 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.
+
+### **📊 Data Visualization Charts**
+
+6 chart components built on Recharts 3.8.1 with full dark mode support: BarChart, LineChart, AreaChart, PieChart, RadarChart, and ComposedChart. Theme-aware color palettes, empty states, and shared tooltip infrastructure.
+
 ### **♿ Accessibility First**
 
 WCAG 2.1 AA compliant components with proper ARIA attributes and keyboard navigation.
@@ -41,7 +49,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**
@@ -70,7 +78,7 @@ All utilities are configured through optimized `@source inline()` directives for
 
 Built on industry-leading libraries for maximum reliability:
 
-- **[React 18+](https://react.dev/)** - Modern React with hooks and concurrent features
+- **[React 19+](https://react.dev/)** - Modern React with hooks and concurrent features
 - **[TypeScript](https://www.typescriptlang.org/)** - Full type safety and excellent DX
 - **[Tailwind CSS v4](https://tailwindcss.com/)** - Complete Tailwind v4 integration included with all utilities pre-configured
 - **[React Hook Form](https://react-hook-form.com/)** - Performant form handling and validation
@@ -79,6 +87,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 +895,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 +1043,8 @@ 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** - 50+ UI components (buttons, cards, dialogs, tooltips, charts, notifications, etc.)
+  - **Charts Components** - 6 chart types (Bar, Line, Area, Pie, Radar, Composed)
   - **Input Components** - 11+ form input components
   - **Blockchain Components** - 9+ specialized DeFi/Web3 components
 - **Form System** - Complete form solution with validation
@@ -1299,33 +1335,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 (85+)
+│       │   ├── 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

@@ -1,5 +1,6 @@
+import { ReactNode } from 'react';
 export type CoinTypes = {
-    icon: JSX.Element;
+    icon: ReactNode;
     code: string;
     name: string;
     price: number;
@@ -11,4 +12,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/blockchain/collection-select-list.d.ts

@@ -6,6 +6,9 @@ type CollectionList = {
 export interface CollectionSelectListTypes {
     collectionList: CollectionList[];
     onSelect: (value: string) => void;
+    placeholder?: string;
+    noResultsMessage?: string;
+    className?: string;
 }
-export declare function CollectionSelectList({ collectionList, onSelect, }: CollectionSelectListTypes): import("react/jsx-runtime").JSX.Element;
+export declare function CollectionSelectList({ collectionList, onSelect, placeholder, noResultsMessage, className, }: CollectionSelectListTypes): import("react/jsx-runtime").JSX.Element;
 export default CollectionSelectList;

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/cards/card.d.ts

@@ -0,0 +1,13 @@
+export interface CardProps {
+    title?: string;
+    description?: string;
+    icon?: React.ReactNode;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    actions?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    onClick?: () => void;
+}
+export declare function Card({ title, description, icon, header, footer, actions, children, className, onClick, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export default Card;

package/components/cards/index.d.ts

@@ -1,5 +1,7 @@
 export * from './author-card';
+export * from './card';
 export * from './card-container';
 export * from './card-title';
+export * from './info-card';
 export * from './panel-action-card';
 export * from './panel-card';

package/components/cards/info-card.d.ts

@@ -0,0 +1,54 @@
+export interface InfoCardColumn {
+    /** Unique key for the column */
+    key: string;
+    /** Column group label (shown uppercase) */
+    label: string;
+    /** Icon element for the group header */
+    icon?: React.ReactNode;
+    /** Accent color class for the vertical bar (e.g. 'bg-brand') */
+    accent?: string;
+    /** Accent text color class for label and icon (e.g. 'text-brand') */
+    accentText?: string;
+    /** Key-value rows to render */
+    items: InfoCardItem[];
+}
+export interface InfoCardItem {
+    label: string;
+    value: React.ReactNode;
+    /** Optional text color class for the value */
+    color?: string;
+}
+export interface InfoCardFooterTag {
+    label: string;
+    /** Tailwind color classes for the tag */
+    className?: string;
+    icon?: React.ReactNode;
+    /** Tooltip content shown on hover */
+    tooltip?: React.ReactNode;
+}
+export interface InfoCardProps {
+    /** Title displayed in the header */
+    title?: string;
+    /** Subtitle/description under the title */
+    subtitle?: string;
+    /** Icon rendered in a styled badge in the header */
+    icon?: React.ReactNode;
+    /** Element rendered on the right side of the header (e.g. status badge) */
+    headerRight?: React.ReactNode;
+    /** Column groups for the structured grid layout */
+    columns?: InfoCardColumn[];
+    /** Number of grid columns on lg breakpoint (default: columns.length or 4) */
+    gridCols?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Free-form children (rendered below columns if both provided) */
+    children?: React.ReactNode;
+    /** Footer tags/pills */
+    footerTags?: InfoCardFooterTag[];
+    /** Footer label prefix */
+    footerLabel?: string;
+    /** Custom footer content (takes precedence over footerTags) */
+    footer?: React.ReactNode;
+    /** Additional className for the root container */
+    className?: string;
+}
+export declare function InfoCard({ title, subtitle, icon, headerRight, columns, gridCols, children, footerTags, footerLabel, footer, className, }: InfoCardProps): import("react/jsx-runtime").JSX.Element;
+export default InfoCard;

package/components/charts/area-chart/area-chart.d.ts

@@ -0,0 +1,9 @@
+import { ChartBaseProps, ChartSeries } from '../types';
+export interface AreaChartProps extends ChartBaseProps {
+    series: ChartSeries[];
+    xAxisKey?: string;
+    curved?: boolean;
+    gradient?: boolean;
+    stacked?: boolean;
+}
+export declare function AreaChart({ data, series, height, className, xAxisKey, curved, gradient, stacked, showGrid, showTooltip, showLegend, animate, emptyMessage, }: AreaChartProps): import("react/jsx-runtime").JSX.Element;

package/components/charts/area-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { AreaChart } from './area-chart';
+export type { AreaChartProps } from './area-chart';

package/components/charts/bar-chart/bar-chart.d.ts

@@ -0,0 +1,10 @@
+import { ChartBaseProps, ChartSeries } from '../types';
+export interface BarChartProps extends ChartBaseProps {
+    series: ChartSeries[];
+    xAxisKey?: string;
+    layout?: 'horizontal' | 'vertical';
+    stacked?: boolean;
+    barRadius?: number;
+    barGap?: number;
+}
+export declare function BarChart({ data, series, height, className, xAxisKey, layout, stacked, barRadius, barGap, showGrid, showTooltip, showLegend, animate, emptyMessage, }: BarChartProps): import("react/jsx-runtime").JSX.Element;

package/components/charts/bar-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { BarChart } from './bar-chart';
+export type { BarChartProps } from './bar-chart';

package/components/charts/components/chart-container.d.ts

@@ -0,0 +1,8 @@
+interface ChartContainerProps {
+    children: React.ReactNode;
+    height?: number;
+    className?: string;
+    ariaLabel?: string;
+}
+export declare function ChartContainer({ children, height, className, ariaLabel, }: ChartContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/charts/components/chart-empty-state.d.ts

@@ -0,0 +1,6 @@
+interface ChartEmptyStateProps {
+    message?: string;
+    height?: number;
+}
+export declare function ChartEmptyState({ message, height, }: ChartEmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/charts/components/chart-tooltip.d.ts

@@ -0,0 +1,2 @@
+import { TooltipContentProps } from 'recharts';
+export declare function ChartTooltip({ active, payload, label, }: Partial<TooltipContentProps<number | string, string>>): import("react/jsx-runtime").JSX.Element | null;

package/components/charts/components/index.d.ts

@@ -0,0 +1,3 @@
+export { ChartContainer } from './chart-container';
+export { ChartTooltip } from './chart-tooltip';
+export { ChartEmptyState } from './chart-empty-state';

package/components/charts/composed-chart/composed-chart.d.ts

@@ -0,0 +1,9 @@
+import { ChartBaseProps, ChartSeries } from '../types';
+export interface ComposedChartProps extends ChartBaseProps {
+    series: (ChartSeries & {
+        type: 'line' | 'bar' | 'area';
+    })[];
+    xAxisKey?: string;
+    barRadius?: number;
+}
+export declare function ComposedChart({ data, series, height, className, xAxisKey, barRadius, showGrid, showTooltip, showLegend, animate, emptyMessage, }: ComposedChartProps): import("react/jsx-runtime").JSX.Element;

package/components/charts/composed-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { ComposedChart } from './composed-chart';
+export type { ComposedChartProps } from './composed-chart';

package/components/charts/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useChartTheme } from './use-chart-theme';
+export type { ChartTheme } from './use-chart-theme';

package/components/charts/hooks/use-chart-theme.d.ts

@@ -0,0 +1,13 @@
+export interface ChartTheme {
+    mode: 'light' | 'dark';
+    colors: string[];
+    grid: string;
+    text: string;
+    background: string;
+    border: string;
+    tooltipBg: string;
+    tooltipText: string;
+    tooltipBorder: string;
+    cursorFill: string;
+}
+export declare function useChartTheme(): ChartTheme;

package/components/charts/index.d.ts

@@ -0,0 +1,18 @@
+export { LineChart } from './line-chart';
+export { BarChart } from './bar-chart';
+export { AreaChart } from './area-chart';
+export { PieChart } from './pie-chart';
+export { RadarChart } from './radar-chart';
+export { ComposedChart } from './composed-chart';
+export { ChartContainer } from './components/chart-container';
+export { ChartTooltip } from './components/chart-tooltip';
+export { ChartEmptyState } from './components/chart-empty-state';
+export { useChartTheme } from './hooks';
+export type { ChartDataPoint, ChartSeries, ChartBaseProps, PieDataPoint, RadarDataPoint, } from './types';
+export type { ChartTheme } from './hooks';
+export type { LineChartProps } from './line-chart';
+export type { BarChartProps } from './bar-chart';
+export type { AreaChartProps } from './area-chart';
+export type { PieChartProps } from './pie-chart';
+export type { RadarChartProps } from './radar-chart';
+export type { ComposedChartProps } from './composed-chart';

package/components/charts/line-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { LineChart } from './line-chart';
+export type { LineChartProps } from './line-chart';

package/components/charts/line-chart/line-chart.d.ts

@@ -0,0 +1,9 @@
+import { ChartBaseProps, ChartSeries } from '../types';
+export interface LineChartProps extends ChartBaseProps {
+    series: ChartSeries[];
+    xAxisKey?: string;
+    curved?: boolean;
+    showDots?: boolean;
+    strokeWidth?: number;
+}
+export declare function LineChart({ data, series, height, className, xAxisKey, curved, showDots, strokeWidth, showGrid, showTooltip, showLegend, animate, emptyMessage, }: LineChartProps): import("react/jsx-runtime").JSX.Element;

package/components/charts/pie-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { PieChart } from './pie-chart';
+export type { PieChartProps } from './pie-chart';