@e-burgos/tucu-ui 2.0.3 → 2.0.5

package/CHANGELOG.md

@@ -5,6 +5,110 @@ 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
@@ -448,6 +552,7 @@ 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
@@ -458,6 +563,18 @@ 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:

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
 
@@ -33,6 +33,10 @@ Complete Lucide React integration + 97+ custom-designed icons including blockcha
 
 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.
@@ -74,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
@@ -1039,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, tooltips, 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
@@ -1355,7 +1360,7 @@ tucu-ui/
 ├── ui/
 │   └── tucu-ui/             # Main library (@e-burgos/tucu-ui)
 │       ├── src/
-│       │   ├── components/   # All UI components (70+)
+│       │   ├── components/   # All UI components (85+)
 │       │   ├── hooks/        # Utility hooks
 │       │   ├── themes/       # Theme system (Zustand + CSS tokens)
 │       │   └── styles.css    # Tailwind CSS v4 configuration

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;

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/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';

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

@@ -0,0 +1,14 @@
+import { PieDataPoint } from '../types';
+export interface PieChartProps {
+    data: PieDataPoint[];
+    height?: number;
+    className?: string;
+    donut?: boolean;
+    showLabels?: boolean;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    animate?: boolean;
+    innerContent?: React.ReactNode;
+    emptyMessage?: string;
+}
+export declare function PieChart({ data, height, className, donut, showLabels, showTooltip, showLegend, animate, innerContent, emptyMessage, }: PieChartProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { RadarChart } from './radar-chart';
+export type { RadarChartProps } from './radar-chart';

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

@@ -0,0 +1,17 @@
+import { RadarDataPoint } from '../types';
+export interface RadarChartProps {
+    data: RadarDataPoint[];
+    series: {
+        dataKey: string;
+        name?: string;
+        color?: string;
+    }[];
+    height?: number;
+    className?: string;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    fillOpacity?: number;
+    animate?: boolean;
+    emptyMessage?: string;
+}
+export declare function RadarChart({ data, series, height, className, showTooltip, showLegend, fillOpacity, animate, emptyMessage, }: RadarChartProps): import("react/jsx-runtime").JSX.Element;

package/components/charts/types.d.ts

@@ -0,0 +1,32 @@
+export interface ChartDataPoint {
+    name: string;
+    [key: string]: string | number | null | undefined;
+}
+export interface ChartSeries {
+    dataKey: string;
+    name?: string;
+    color?: string;
+    type?: 'line' | 'bar' | 'area';
+    strokeDasharray?: string;
+    fillOpacity?: number;
+    stackId?: string;
+}
+export interface ChartBaseProps {
+    data: ChartDataPoint[];
+    height?: number;
+    className?: string;
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    animate?: boolean;
+    emptyMessage?: string;
+}
+export interface PieDataPoint {
+    name: string;
+    value: number;
+    color?: string;
+}
+export interface RadarDataPoint {
+    subject: string;
+    [key: string]: string | number;
+}

package/components/common/index.d.ts

@@ -1,7 +1,10 @@
 export * from './avatar';
 export * from './badge';
 export * from './collapse';
+export * from './key-value-row';
+export * from './pagination';
 export * from './scrollbar';
 export * from './scrollbar-native';
 export * from './skeleton';
+export * from './stepper';
 export * from './tooltip';

package/components/common/key-value-row.d.ts

@@ -0,0 +1,9 @@
+export interface KeyValueRowProps {
+    label: string;
+    value: React.ReactNode;
+    mono?: boolean;
+    accent?: boolean;
+    className?: string;
+}
+export declare function KeyValueRow({ label, value, mono, accent, className, }: KeyValueRowProps): import("react/jsx-runtime").JSX.Element;
+export default KeyValueRow;

package/components/common/pagination.d.ts

@@ -0,0 +1,9 @@
+export interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    windowSize?: number;
+    className?: string;
+}
+export declare function Pagination({ currentPage, totalPages, onPageChange, windowSize, className, }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;
+export default Pagination;

package/components/common/stepper.d.ts

@@ -0,0 +1,13 @@
+export interface StepperStep {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+export interface StepperProps {
+    steps: StepperStep[];
+    currentStep: number;
+    onStepChange?: (step: number) => void;
+    className?: string;
+}
+export declare function Stepper({ steps, currentStep, onStepChange, className, }: StepperProps): import("react/jsx-runtime").JSX.Element;
+export default Stepper;

package/components/dialog/drawer-container.d.ts

@@ -5,4 +5,4 @@ export interface DrawerContainerProps {
     position?: 'left' | 'right';
     backdrop?: boolean;
 }
-export declare function DrawerContainer({ isOpen, setIsOpen, children, position, backdrop, }: DrawerContainerProps): import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> | null;
+export declare function DrawerContainer({ isOpen, setIsOpen, children, position, backdrop, }: DrawerContainerProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | null;

package/components/dialog/index.d.ts

@@ -3,3 +3,4 @@ export * from './drawer';
 export * from './modal';
 export * from './sidebar-menu';
 export * from './sidebar';
+export * from './tab-modal';

package/components/dialog/tab-modal.d.ts

@@ -0,0 +1,41 @@
+export interface TabModalTab {
+    /** Lucide icon component (e.g. Activity, BarChart3) */
+    icon?: React.ElementType;
+    name: string;
+    content: React.ReactNode;
+}
+export interface TabModalButton {
+    label: string;
+    onClick: () => void;
+}
+export interface TabModalProps {
+    /** Lucide icon component rendered in the header */
+    icon?: React.ElementType;
+    title?: string;
+    subtitle?: string;
+    /** Badge text rendered next to the title (e.g. "SANDBOX", "LIVE") */
+    badgeHeader?: string;
+    /** Extra Tailwind classes applied to the badge element */
+    badgeHeaderClassName?: string;
+    /**
+     * Array of tabs. If provided (and `content` is not), renders a tab bar.
+     * Each tab's `content` is shown when that tab is active.
+     */
+    tabs?: TabModalTab[];
+    /**
+     * Direct content. When provided, the tab bar is hidden and this content
+     * fills the body directly.
+     */
+    content?: React.ReactNode;
+    /** Text shown on the left side of the footer */
+    footerLabel?: string;
+    /** Primary action button (right side of footer) */
+    successButton?: TabModalButton;
+    /** Secondary close button (right side of footer). Defaults to onClose if omitted. */
+    closeButton?: TabModalButton;
+    /** Label for the default close button. Defaults to 'Close'. */
+    closeLabel?: string;
+    onClose: () => void;
+    className?: string;
+}
+export declare function TabModal({ icon: HeaderIcon, title, subtitle, badgeHeader, badgeHeaderClassName, tabs, content, footerLabel, successButton, closeButton, closeLabel: closeLabelProp, onClose, className, }: TabModalProps): import('react').ReactPortal;

package/components/index.d.ts

@@ -3,6 +3,7 @@ export * from './blockchain';
 export * from './buttons';
 export * from './cards';
 export * from './carousel';
+export * from './charts';
 export * from './common';
 export * from './dialog';
 export * from './forms';

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

@@ -1,4 +1,3 @@
-import { ForwardedRef } from 'react';
 export declare const acceptedFileType: {
     img: string;
     pdf: string;
@@ -32,13 +31,8 @@ export interface FileInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
     /** Pass containerClassName to style the container */
     containerClassName?: string;
 }
-/** Upload component allows user to upload files either from file explorer or by dragging and dropping.
- * The component implements native HTML5 drag and drop functionality without external dependencies.
- * Here is the API documentation of Upload component. Rest of the props are same as html input field.
- * 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 FileInputWithRef: import('react').ForwardRefExoticComponent<FileInputProps & {
     children?: import('react').ReactNode | undefined;
 } & import('react').RefAttributes<HTMLInputElement>>;
 export default FileInputWithRef;
+export { FileInputWithRef as FileInput };

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { SelectOption } from './select';
-export declare function InputSearcher({ label, onOptionSelect, options, initialValue, noMatchesMessage, multiple, variant, disabled, ...props }: {
+export interface InputSearcherProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
     label?: string;
     initialValue?: string | number;
     onOptionSelect?: (option: SelectOption | SelectOption[]) => void;
@@ -9,5 +9,6 @@ export declare function InputSearcher({ label, onOptionSelect, options, initialV
     multiple?: boolean;
     variant?: 'ghost' | 'solid' | 'transparent';
     disabled?: boolean;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'>): import("react/jsx-runtime").JSX.Element;
+}
+export declare function InputSearcher({ label, onOptionSelect, options, initialValue, noMatchesMessage, multiple, variant, disabled, ...props }: InputSearcherProps): import("react/jsx-runtime").JSX.Element;
 export default InputSearcher;