@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/CHANGELOG.md

@@ -5,6 +5,172 @@ 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.10] - 2026-05-22
+
+### Added
+
+- **`ThemeBackground` Component**: New unified background component replacing `MacOSBackground`
+  - 10 background variants: `none`, `base`, `sonoma`, `radial`, `aurora`, `depth`, `demo`, `window`, `wave`, `wallpaper`, `mobile`
+  - Two positioning modes: `'fixed'` (fullscreen layer + content wrapper) and `'absolute'` (within parent container)
+  - 7 CSS-only gradients (no image download) + 3 SVG asset variants from CDN
+  - Automatic dark/light mode adaptation via CSS classes (`tucu-bg-base`, `tucu-bg-radial`, etc.)
+  - Animated aurora variant with `prefers-reduced-motion` support
+  - `getBackgroundUrl()` helper for direct SVG asset URLs
+- **`default-backgrounds.css`**: New CSS file with all background variant styles (276 lines)
+- **Clean Layout Variants**: Two new layout options for minimal content-only rendering
+  - `MacOSSonomaCleanLayout`: Sonoma with only background + content (no sidebar/toolbar)
+  - `MacOSTahoeCleanLayout`: Tahoe with only background + content (no sidebar/dock)
+  - New `LAYOUT_OPTIONS.MACOS_CLEAN` and `LAYOUT_OPTIONS.MACOS_TAHOE_CLEAN` enum values
+- **BackgroundPicker**: New unified Settings panel section available across all three themes
+  - 11-option grid (None, Base, Sonoma, Radial, Wave, Wallpaper, Mobile, Window, Aurora, Depth, Demo)
+  - Replaces previous Tahoe-only `TahoeBackgroundPicker`
+- **Settings Drawer — Visual Color Editor**:
+  - `ColorSwatchModal`: Full-featured color picker with preset grid, native color input, opacity slider, and mode switcher
+  - `DefaultColorSettings`: Grouped dot-based color editor (Brand, Surfaces, Text, Status) with light/dark awareness
+  - Replaces old `Select`-based `ColorSwitcher` with a more compact, visual interface
+- **Extended Color Presets**: 12 new preset categories in theme store
+  - `successPreset` / `darkSuccessPreset`, `warningPreset` / `darkWarningPreset`
+  - `errorPreset` / `darkErrorPreset`, `infoPreset` / `darkInfoPreset`
+  - `fgPreset` / `darkFgPreset`, `borderPreset` / `darkBorderPreset`
+- **`useThemeColor` expanded**: Now applies status colors, foreground, and border to DOM via `setProperty()`
+- **`ThemeWrapper` expanded**: Supports all 24 color palette slots + new `background` prop
+- **`BackgroundVariant` type** exported from `use-theme.tsx` (11 options)
+- **Backgrounds Documentation**: New `BackgroundsSection` demo page with interactive previews and props table
+- **Layout Switcher for Sonoma**: Now shows macOS + Clean options (previously hidden)
+- **Layout Switcher for Tahoe**: Expanded to 3 columns (Sidebar, Dock, Clean)
+
+### Changed
+
+- **Renamed**: `MacOSBackground` → `ThemeBackground`, `getMacOSBackgroundUrl` → `getBackgroundUrl`
+- **`backgroundVariant` store default**: Changed from `'base'` to `'radial'`
+- **`restoreDefaultColors`**: Now theme-aware — resets to different defaults per `colorScheme`:
+  - `'macos-tahoe'`: Glass Neutral bundle + radial background
+  - `'macos'`: Blue Sonoma bundle + sonoma background
+  - `'default'`: Default presets + no background
+- **`applyMacOSTheme`**: Now also sets `backgroundVariant: 'sonoma'`
+- **`applyMacOSTahoeTheme`**: Now also sets `backgroundVariant: 'radial'`
+- **`applyDefaultTheme`**: Now also sets `backgroundVariant: 'none'`
+- **`applyThemeStyle`**: Sets appropriate background variant per theme style
+- **Settings Drawer structure**: All themes share `DefaultColorSettings` + `BackgroundPicker` sections
+- **`settings-button.tsx`**: Now reads all 24 color slots for theme detection
+- **`THEME_STYLE_LAYOUTS`**: Added `MACOS_CLEAN` and `MACOS_TAHOE_CLEAN` to valid layouts
+- **Demo pages**: Migrated all border classes from `border-gray-200 dark:border-gray-700` → `border-border`
+  - Updated: MacOSBackgroundsSection, MacOSColorsSection, MacOSMaterialsSection, MacOSTextStylesSection, TahoeLayoutContentSection, TahoeLayoutSidebarSection, TahoeToolbarSection, BackgroundUtilities, Colors, EffectsUtilities, FiltersUtilities, TablesUtilities, TypographyUtilities, AccessibilityUtilities
+
+### Fixed
+
+- **Border Color Settings**: Fixed `--color-border` not updating when changing the Border color in the Settings panel
+  - `--color-border` now references `--color-semantic-line-primary-subtle` (with `color-mix()` fallback) instead of a hardcoded formula
+  - The `useThemeColor` hook correctly updates `--color-semantic-line-primary-subtle` which propagates to `border-border` Tailwind class
+- **Sonoma Circular CSS Reference**: Fixed `--macos-separator` ↔ `--color-border` ↔ `--color-semantic-line-primary-subtle` circular dependency
+  - Inverted dependency: `--color-semantic-line-primary-subtle` now holds the concrete value, `--macos-separator` derives from it
+  - All three themes (Default, Sonoma, Tahoe) use consistent `color-mix()` formulas for borders
+- **Restore Theme Border Presets**: Fixed "Restore Theme" button not resetting border colors
+  - Added `borderPreset` and `darkBorderPreset` to `buildSonomaPresets()` and `buildTahoePresets()`
+  - Default border preset values now use `color-mix(in oklab, var(--color-black) 10%, transparent)` (light) and `color-mix(in oklab, var(--color-white) 8%, transparent)` (dark)
+- **InfoCard Key Warning**: Fixed React "Each child in a list should have a unique key prop" warning in footer tags rendering
+- **Tahoe section border typo**: Fixed `border-borderrounded-2xl` → `border-border rounded-2xl` in MacOSTahoeSection
+
+### Removed
+
+- **`MacOSBackground`**: Replaced by unified `ThemeBackground` component
+- **`getMacOSBackgroundUrl`**: Replaced by `getBackgroundUrl`
+- **`TahoeBackgroundPicker`**: Replaced by shared `BackgroundPicker` available in all themes
+- **`ColorSwitcher` (old Select-based)**: Replaced by `ColorDot` + `ColorSwatchModal`
+
+## [2.0.9] - 2026-05-19
+
+### Added
+
+- **macOS Tahoe Design System**: Complete macOS Tahoe (macOS 26) design language with Liquid Glass aesthetics
+  - **11 new Tahoe components**: `WindowTahoe`, `DockTahoe`, `CommandPaletteTahoe`, `DialogTahoe`, `PopoverTahoe`, `SearchBarTahoe`, `SegmentedControlTahoe`, `ProgressBarTahoe`, `NotificationBannerTahoe`, `WidgetTahoe`, `index.ts` barrel export
+  - **Tahoe CSS module**: 16 new CSS files (`macos-foundations.css`, `macos-buttons.css`, `macos-inputs.css`, `macos-tables.css`, `macos-typography.css`, `macos-layouts.css`, `macos-sidebar.css`, `macos-toolbar.css`, `macos-window.css`, `macos-cards.css`, `macos-dialogs.css`, `macos-feedback.css`, `macos-navigation.css`, `macos-menus.css`, `macos-liquid-glass.css`, `macos-misc.css`)
+  - **Tahoe Accent Bundles**: 9 accent color presets (Glass, Blue, Purple, Pink, Red, Orange, Yellow, Green, Graphite) matching macOS System Preferences
+  - `TahoeAccentBundle` interface and `TAHOE_ACCENT_BUNDLES` constant for light/dark primary and accent colors
+  - `buildTahoePresets` utility to generate full theme presets from accent bundles
+- **macOS Tahoe Layouts**: Two new layout options
+  - `MacOSTahoeLayout`: Full desktop layout with sidebar, toolbar, and content area
+  - `MacOSTahoeDockLayout`: Dock-based layout with floating app dock and content
+  - New `LAYOUT_OPTIONS.MACOS_TAHOE_DOCK` enum value
+  - Layout utilities module (`utils.ts`) for shared macOS layout helpers
+- **macOS Sonoma Layout Extraction**: Separated Sonoma layout into its own module
+  - `MacOSSonomaLayout`: Extracted from monolithic `macos-layout/index.tsx`
+  - `SONOMA_ACCENT_BUNDLES` and `buildSonomaPresets` for Sonoma-specific accent colors
+- **macOS Common Components**: New shared macOS components
+  - `Background`: Dynamic gradient/mesh background component for macOS layouts
+  - `CommandPalette`: Spotlight-style command palette with keyboard navigation
+- **Sonoma CSS Module**: Reorganized into dedicated `sonoma/` subdirectory with 21 CSS files
+  - Added `macos-auth.css`, `macos-backgrounds.css`, `macos-content.css`, `macos-liquid-glass.css`, `macos-menus.css`, `macos-selection.css`, `macos-sidebar.css`, `macos-toolbar.css`, `macos-window.css`
+- **Theme System Enhancements**:
+  - New `THEME_VARIANT` value: `'macos-tahoe'`
+  - `ThemeStyleConfig` interface and `THEME_STYLE_LAYOUTS` mapping (theme style → valid layouts + default layout)
+  - `applyMacOSTahoeTheme()` action in `useTheme` Zustand store
+  - `applyThemeStyle(themeStyle)` generic action to switch between any theme variant
+- **BasicTable Enhancements**:
+  - `resizable` prop: Drag-to-resize column handles with min-width constraints
+  - `width` and `minWidth` properties in `TableColumn` interface
+  - Sticky header with `thead sticky top-0 z-10`
+  - Split container into clip wrapper + scroll wrapper for proper overflow handling
+- **CSS Architecture Refactor**:
+  - New `base.css`: Extracted base styles from `globals.css` (537 lines)
+  - New `utilities.css`: Custom utility classes (101 lines)
+  - New `third-party.css`: Third-party component overrides (35 lines)
+  - Improved `scrollbar.css` with theme-aware styling
+- **Variable Fonts**: Added Inter and JetBrains Mono as self-hosted variable font files (`.woff2`)
+  - Includes italic variants for both families
+  - License files included (SIL Open Font License)
+- **`data-tucu` Attributes**: Added semantic data attributes to UI components for CSS targeting
+  - Auth forms: `data-tucu="auth-form"`, `data-tucu="auth-form-panel"`
+  - Inputs: `data-tucu="input"`, `data-tucu="textarea"`, `data-tucu="select"`, `data-tucu="checkbox"`, `data-tucu="radio"`, `data-tucu="switch-control"`, `data-tucu="pin-code-input"`, `data-tucu="file-input-dropzone"`
+  - Cards: `data-tucu="card-container"`, `data-tucu="card-title"`
+  - Layout: `data-tucu="sidebar-item"`, `data-tucu="menu-item"`, `data-tucu="command-palette-item"`
+- **Sidebar Position Prop**: New `position` prop (`'left' | 'right'`) in `Sidebar` and `SidebarMenu` components
+- **Settings Drawer**: Added macOS Tahoe theme section with accent bundle selector and layout switcher
+- **Demo Documentation**: New Tahoe showcase pages with dedicated sections for all Tahoe components
+  - `TahoeDockSection`, `TahoeWindowSection`, `TahoeCommandPaletteSection`, `TahoeDialogSection`, `TahoePopoverSection`, `TahoeSearchBarSection`, `TahoeSegmentedControlSection`, `TahoeProgressBarSection`, `TahoeNotificationBannerSection`, `TahoeWidgetSection`
+
+### Changed
+
+- **macOS Layout Architecture**: Refactored monolithic `macos-layout/index.tsx` (~548 lines) into three focused modules
+  - `macos-sonoma-layout.tsx` (330 lines): Sonoma-specific layout
+  - `macos-tahoe-layout.tsx` (372 lines): Tahoe desktop layout
+  - `macos-tahoe-dock-layout.tsx` (143 lines): Tahoe dock layout
+  - `index.tsx` now acts as router selecting the correct sub-layout based on current `layout` state
+- **CSS Organization**: Reorganized macOS CSS from flat files into `sonoma/` and `tahoe/` subdirectories
+  - Removed legacy flat macOS CSS files (`macos-buttons.css`, `macos-fonts.css`, `macos-foundations.css`, `macos-layouts.css`, `macos-typography.css`)
+  - Each variant now has its own complete CSS module with `index.css` barrel
+- **`globals.css`**: Major refactoring — extracted 900+ lines into `base.css`, `utilities.css`, and `third-party.css`
+- **Theme Config**: Expanded `LAYOUT_OPTIONS` enum with `MACOS_TAHOE_DOCK` value
+- **Theme Store**: `applyMacOSTheme` now sets `layout: LAYOUT_OPTIONS.MACOS` (previously set `MACOS_TAHOE`)
+- **Sidebar & SidebarMenu**: Theme-aware rendering with dedicated Tahoe variant (rounded Liquid Glass panels)
+- **Drawer & Modal**: Added `data-tucu` attributes and Tahoe-aware styling
+- **Auth Components**: Added `data-tucu` semantic attributes for macOS CSS targeting
+- **Settings Drawer**: Expanded with theme style switcher (Default/macOS/Tahoe), accent color picker, and layout selector per theme variant (~307 lines added)
+- **BasicTable**: Improved default theme styles (bg-gray-100 header, font-semibold, proper borders), uses `ring-1` instead of `border` to fix corner artifacts
+- **macOS Table Styles**: Use `box-shadow inset` for table border (no corner bleed), overflow hidden on wrapper for proper clipping, resize handle accent color styles
+
+### Removed
+
+- **Unused Image Assets**: Removed 70+ legacy image files from the library
+  - Avatar images, logo variants, blockchain icons, portfolio SVGs, collection samples, wallet icons
+  - Reduces bundle size significantly by removing unused assets
+- **Legacy macOS CSS Files**: Removed flat `macos-buttons.css`, `macos-fonts.css`, `macos-foundations.css`, `macos-layouts.css`, `macos-typography.css` (replaced by `sonoma/` and `tahoe/` modules)
+
+### Fixed
+
+- **BasicTable Border Artifacts**: Fixed corner radius bleed by using `ring-1` instead of `border` with proper clip wrapper separation
+- **macOS Table Borders**: Fixed corner bleed in macOS themes using inset box-shadow
+- **Input Focus Rings**: Removed default focus outlines from all inputs globally via `data-tucu` CSS selectors
+- **Dropdown/Popover Backgrounds**: Fixed background transparency issues with material design tokens
+- **ListItem Double Hover**: Fixed duplicate hover background state in list items
+- **Sidebar menu close**: Improved close button behavior for Tahoe variant drawers
+
+### Documentation
+
+- **macOS Tahoe Showcase**: New documentation pages with dedicated sections for all 11 Tahoe components
+- **macOS Sonoma Split**: Separated Sonoma demos from Tahoe demos into distinct showcase pages
+- **SVG Assets**: Replaced zip documentation assets with extracted SVG files for Dock and Menu Bar illustrations
+
 ## [2.0.8] - 2026-05-07
 
 ### Changed

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, **data visualization charts**, **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**, **macOS-inspired design systems** (Sonoma & Tahoe with Liquid Glass), **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
 
@@ -21,9 +21,18 @@ Centralized validation powered by React Hook Form with built-in error handling a
 
 Specialized components for DeFi applications, NFT marketplaces, and crypto wallets.
 
+### **💻 macOS Design Systems**
+
+Two complete macOS-inspired design variants:
+
+- **macOS Sonoma**: Classic macOS desktop experience with sidebar navigation, toolbar, and translucent materials
+- **macOS Tahoe** (NEW): Liquid Glass aesthetics from macOS 26 — floating dock, frosted panels, 9 accent color bundles, command palette, and window chrome components
+
+Includes 11 dedicated Tahoe components (Window, Dock, CommandPalette, Dialog, Popover, SearchBar, SegmentedControl, ProgressBar, NotificationBanner, Widget) with full dark/light mode and accent color theming.
+
 ### **🎭 Advanced Theming System**
 
-34+ color presets with 12-layer color architecture (primary, dark primary, secondary, dark secondary, accent, dark accent, muted, dark muted, backgrounds). Includes modern colors (Bufus Blue, Coral, Mint, Lavender), secondary/accent color support, dark/light mode, RTL support, and persistent user preferences. Dynamic color system with CSS variables for brand, secondary, accent, and semantic colors.
+34+ color presets with 12-layer color architecture (primary, dark primary, secondary, dark secondary, accent, dark accent, muted, dark muted, backgrounds). Three theme styles (`default`, `macos`, `macos-tahoe`) with per-style layout constraints. Includes modern colors (Bufus Blue, Coral, Mint, Lavender), secondary/accent color support, dark/light mode, RTL support, and persistent user preferences. Dynamic color system with CSS variables for brand, secondary, accent, and semantic colors.
 
 ### **🎯 5000+ Icons Integrated**
 
@@ -434,7 +443,7 @@ All theme settings (colors, layout, mode, direction) are automatically persisted
 
 ## 🎨 Layout System
 
-### **Three Layout Types**
+### **Five Layout Types**
 
 #### **1. Classic Layout** - Traditional Dashboard
 
@@ -453,6 +462,19 @@ All theme settings (colors, layout, mode, direction) are automatically persisted
 - No predefined layout structure
 - Perfect for auth pages and custom designs
 
+#### **4. macOS Sonoma Layout** - Desktop Experience
+
+- Translucent sidebar with vibrancy effects
+- Toolbar and content area mimicking native macOS apps
+- Accent color bundles matching System Preferences
+
+#### **5. macOS Tahoe Layout** - Liquid Glass (NEW)
+
+- Floating Dock with app icons (bottom-anchored)
+- Frosted glass panels with blur and transparency
+- 9 accent color bundles (Glass, Blue, Purple, Pink, Red, Orange, Yellow, Green, Graphite)
+- Also available as `MacOSTahoeDockLayout` for dock-centric designs
+
 ### **Architectural Patterns**
 
 Tucu UI supports two architectural patterns for different use cases:
@@ -477,7 +499,8 @@ Tucu UI supports two architectural patterns for different use cases:
 - ✅ **Dark/Light Mode** - Automatic theme switching
 - ✅ **RTL Support** - Full right-to-left language support
 - ✅ **Brand Colors** - 34+ color presets with multi-layer architecture
-- ✅ **Settings Panel** - Built-in user customization
+- ✅ **macOS Themes** - Sonoma & Tahoe design systems with accent bundles
+- ✅ **Settings Panel** - Built-in user customization with theme style switcher
 - ✅ **Routing Integration** - Automatic route generation (Standalone) or explicit configuration (MFE)
 - ✅ **Type Safety** - TypeScript discriminated unions ensure correct pattern usage
 

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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export interface CardContainerProps {
+export interface CardContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
     children?: React.ReactNode;
 }

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

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export type ColorCardColor = 'blue' | 'indigo' | 'cyan' | 'purple' | 'emerald' | 'orange' | 'green' | 'red' | 'pink' | 'amber' | 'teal' | 'violet' | 'rose' | 'sky';
+export interface ColorCardProps {
+    /** Icon element (e.g. LucideIcon) */
+    icon: React.ReactNode;
+    /** Card title */
+    title: string;
+    /** Description text */
+    description: string;
+    /** Predefined color preset (takes precedence over colorClassName) */
+    color?: ColorCardColor;
+    /** Color classes for background gradient, text color, and border (fallback for custom colors not in presets) */
+    colorClassName?: string;
+    /** Extra classes for the container */
+    className?: string;
+    /** Click handler */
+    onClick?: () => void;
+}
+export declare const ColorCard: React.FC<ColorCardProps>;
+export default ColorCard;

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

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export interface FeatureCardProps {
+    /** Icon element (e.g. LucideIcon) */
+    icon: React.ReactNode;
+    /** Card title */
+    title: string;
+    /** Badge text (e.g. "25+", "Built-in") */
+    badge?: string;
+    /** Description text */
+    description: React.ReactNode;
+    /** Gradient class for icon background (e.g. "from-pink-500 to-rose-500") */
+    iconBgClassName?: string;
+    /** Extra classes for the card container */
+    className?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Layout direction: vertical (centered, default), horizontal (icon left), or showcase (icon + stacked title/badge + tags) */
+    layout?: 'vertical' | 'horizontal' | 'showcase';
+    /** Tags displayed at the bottom (only for showcase layout) */
+    tags?: string[];
+}
+export declare const FeatureCard: React.FC<FeatureCardProps>;
+export default FeatureCard;

package/components/cards/index.d.ts

@@ -2,6 +2,8 @@ export * from './author-card';
 export * from './card';
 export * from './card-container';
 export * from './card-title';
+export * from './color-card';
+export * from './feature-card';
 export * from './info-card';
 export * from './panel-action-card';
 export * from './panel-card';

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

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

package/components/dialog/modal.d.ts

@@ -8,6 +8,7 @@ export interface ModalProps {
     className?: string;
     contentClassName?: string;
     titleContainerClassName?: string;
+    hideCloseButton?: boolean;
     text?: {
         title?: string;
         content?: string;

package/components/dialog/sidebar-menu.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { LogoPropTypes } from '../logos/logo';
 import { IMenuItem } from '../layouts/menus/menu-item';
-export declare function SidebarMenu({ className, menuItems, children, title, actionContent, onClose, logo, }: {
+export declare function SidebarMenu({ className, menuItems, children, title, actionContent, onClose, logo, position, }: {
     className?: string;
     menuItems: IMenuItem[];
     children?: React.ReactNode;
@@ -9,5 +9,6 @@ export declare function SidebarMenu({ className, menuItems, children, title, act
     actionContent?: React.ReactNode;
     onClose: () => void;
     logo?: LogoPropTypes;
+    position?: 'left' | 'right';
 }): import("react/jsx-runtime").JSX.Element;
 export default SidebarMenu;

package/components/dialog/sidebar.d.ts

@@ -7,6 +7,7 @@ export interface SidebarProps {
     actionContent?: React.ReactNode;
     logo?: LogoPropTypes;
     onClose?: () => void;
+    position?: 'left' | 'right';
 }
-export declare function Sidebar({ className, children, title, actionContent, logo, onClose, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Sidebar({ className, children, title, actionContent, logo, onClose, position, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
 export default Sidebar;

package/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './auth';
 export * from './blockchain';
+export * from './macos';
 export * from './buttons';
 export * from './cards';
 export * from './carousel';

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

@@ -1,3 +1,4 @@
+import { ControlColor } from './helpers/control-colors';
 export declare const acceptedFileType: {
     img: string;
     pdf: string;
@@ -16,6 +17,8 @@ export interface FileInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
     children?: React.ReactNode;
     /** Pass field label */
     label?: React.ReactNode;
+    /** Change input color */
+    color?: ControlColor;
     /** Set your custom text to show in upload field */
     placeholderText?: React.ReactNode;
     /** To pass additional props to the container element */

package/components/inputs/helpers/control-colors.d.ts

@@ -0,0 +1,13 @@
+export type ControlColor = 'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning';
+type TextControlVariant = 'ghost' | 'solid' | 'transparent';
+export declare const textControlColorClasses: Record<TextControlVariant, Record<ControlColor, string>>;
+export declare const controlAccentTextClasses: Record<ControlColor, string>;
+export declare const controlAccentChipClasses: Record<ControlColor, string>;
+type ButtonLikeColor = 'primary' | 'gray' | 'danger' | 'info' | 'success' | 'warning';
+export declare const buttonColorByControlColor: Record<ControlColor, ButtonLikeColor>;
+export declare const buttonHoverClassByControlColor: Record<ControlColor, string>;
+export declare const fileInputColorClasses: Record<ControlColor, {
+    wrapper: string;
+    dropzone: string;
+}>;
+export {};

package/components/inputs/helpers/control-sizes.d.ts

@@ -0,0 +1,2 @@
+export type TextControlSize = 'sm' | 'md' | 'lg';
+export declare const textControlSizeClasses: Record<'input' | 'select' | 'textarea', Record<TextControlSize, string>>;

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

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

package/components/inputs/input.d.ts

@@ -1,6 +1,8 @@
+import { ControlColor } from './helpers/control-colors';
+import { TextControlSize } from './helpers/control-sizes';
 export type DateFormat = 'DD-MM-YYYY' | 'MM-DD-YYYY' | 'YYYY-MM-DD' | 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY/MM/DD';
 export type Locale = 'en-US' | 'es-ES' | 'fr-FR' | 'de-DE' | 'pt-BR';
-export type InputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+export type InputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'size'> & {
     label?: string;
     error?: string;
     variant?: 'ghost' | 'solid' | 'transparent';
@@ -9,11 +11,14 @@ export type InputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLI
     labelClassName?: string;
     useUppercaseLabel?: boolean;
     helperText?: string;
+    /** Change input color */
+    color?: ControlColor;
     suffix?: React.ReactNode;
     suffixClassName?: string;
     icon?: React.ReactNode;
     dateFormat?: DateFormat;
     locale?: Locale;
+    size?: TextControlSize;
 };
 export declare const inputVariantClasses: {
     ghost: string;

package/components/inputs/pin-code.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { ControlColor } from './helpers/control-colors';
 declare const inputClasses: {
     base: string;
     numberType: string;
@@ -19,36 +20,12 @@ declare const inputClasses: {
     variant: {
         ghost: {
             base: string;
-            color: {
-                primary: string;
-                secondary: string;
-                danger: string;
-                info: string;
-                success: string;
-                warning: string;
-            };
         };
         solid: {
             base: string;
-            color: {
-                primary: string;
-                secondary: string;
-                danger: string;
-                info: string;
-                success: string;
-                warning: string;
-            };
         };
         transparent: {
             base: string;
-            color: {
-                primary: string;
-                secondary: string;
-                danger: string;
-                info: string;
-                success: string;
-                warning: string;
-            };
         };
     };
 };
@@ -74,7 +51,7 @@ export interface PinCodeProps extends Omit<React.InputHTMLAttributes<HTMLInputEl
     /** The variants of the component are: */
     variant?: keyof typeof inputClasses.variant;
     /** Change input color */
-    color?: keyof (typeof inputClasses.variant)['ghost']['color'];
+    color?: ControlColor;
     /** Show error message using this prop */
     error?: string;
     /** Add custom classes for the input filed extra style */

package/components/inputs/radio-group.d.ts

@@ -41,7 +41,7 @@ export interface RadioGroupProps {
         label: React.ReactNode;
         value: string | number;
         disabled?: boolean;
-        [key: string]: any;
+        [key: string]: unknown;
     }>;
     /** Children radio components */
     children?: React.ReactNode;

package/components/inputs/radio.d.ts

@@ -10,6 +10,7 @@ declare const inputClasses: {
     variant: {
         ghost: {
             base: string;
+            defaultColor: string;
             color: {
                 primary: string;
                 secondary: string;
@@ -21,6 +22,7 @@ declare const inputClasses: {
         };
         solid: {
             base: string;
+            defaultColor: string;
             color: {
                 primary: string;
                 secondary: string;
@@ -32,6 +34,7 @@ declare const inputClasses: {
         };
         transparent: {
             base: string;
+            defaultColor: string;
             color: {
                 primary: string;
                 secondary: string;

package/components/inputs/select.d.ts

@@ -1,3 +1,5 @@
+import { ControlColor } from './helpers/control-colors';
+import { TextControlSize } from './helpers/control-sizes';
 export type SelectOption = {
     name: string;
     value: string;
@@ -17,12 +19,14 @@ export interface SelectTypes {
     label?: string;
     useUppercaseLabel?: boolean;
     required?: boolean;
+    color?: ControlColor;
     value?: string;
     name?: string;
     errorMessage?: string;
     helperText?: string;
     placeholder?: string;
     buttonClassName?: string;
+    size?: TextControlSize;
     /** Enable search/filter input inside the dropdown */
     searchable?: boolean;
     /** Placeholder for the search input */
@@ -30,5 +34,5 @@ export interface SelectTypes {
     /** Show a check icon next to the selected option */
     showCheck?: boolean;
 }
-export declare function Select({ options, onChange, onSelect, variant, selectedOption: propSelectedOption, className, children, disabled, label, useUppercaseLabel, required, value, name, errorMessage, helperText, placeholder, buttonClassName, searchable, searchPlaceholder, showCheck, }: SelectTypes): import("react/jsx-runtime").JSX.Element;
+export declare function Select({ options, onChange, onSelect, variant, selectedOption: propSelectedOption, className, children, disabled, label, useUppercaseLabel, required, color, value, name, errorMessage, helperText, placeholder, buttonClassName, size, searchable, searchPlaceholder, showCheck, }: SelectTypes): import("react/jsx-runtime").JSX.Element;
 export default Select;

package/components/inputs/switch.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+type SwitchColor = 'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning';
 export interface SwitchProps {
     label?: string | React.ReactNode;
     offLabel?: string | React.ReactNode;
@@ -6,6 +7,7 @@ export interface SwitchProps {
     checked: boolean;
     onChange: (checked: boolean) => void;
     variant?: 'ghost' | 'solid' | 'transparent';
+    color?: SwitchColor;
     className?: string;
     errorMessage?: string;
     helperText?: string;

package/components/inputs/textarea.d.ts

@@ -1,3 +1,5 @@
+import { ControlColor } from './helpers/control-colors';
+import { TextControlSize } from './helpers/control-sizes';
 export declare const textareaVariantClasses: {
     ghost: string;
     solid: string;
@@ -11,6 +13,8 @@ export type TextareaProps = React.DetailedHTMLProps<React.TextareaHTMLAttributes
     inputClassName?: string;
     useUppercaseLabel?: boolean;
     helperText?: string;
+    color?: ControlColor;
+    size?: TextControlSize;
 };
 export declare const Textarea: import('react').ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
 export default Textarea;

package/components/inputs/toggle-bar.d.ts

@@ -1,9 +1,11 @@
+import { ControlColor } from './helpers/control-colors';
 export interface ToggleBarProps {
     title: string;
     subTitle?: string;
     icon?: React.ReactNode;
+    color?: ControlColor;
     checked: boolean;
     onChange: () => void;
 }
-export declare function ToggleBar({ title, subTitle, icon, checked, onChange, children, }: React.PropsWithChildren<ToggleBarProps>): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleBar({ title, subTitle, icon, color, checked, onChange, children, }: React.PropsWithChildren<ToggleBarProps>): import("react/jsx-runtime").JSX.Element;
 export default ToggleBar;

package/components/layouts/index.d.ts

@@ -11,3 +11,4 @@ export * from './menus/expandable-sidebar';
 export * from './menus/horizontal-nav-menu';
 export * from './menus/menu-item';
 export * from './root-layout';
+export * from './macos-layout/index';

package/components/layouts/macos-layout/index.d.ts

@@ -0,0 +1,21 @@
+import { MacOSSonomaLayout, MacOSSonomaLayoutProps } from './macos-sonoma-layout';
+import { MacOSTahoeLayout, MacOSTahoeLayoutProps } from './macos-tahoe-layout';
+import { MacOSTahoeDockLayout, MacOSTahoeDockLayoutProps } from './macos-tahoe-dock-layout';
+import { MacOSTahoeCleanLayout, MacOSTahoeCleanLayoutProps } from './macos-tahoe-clean-layout';
+import { MacOSSonomaCleanLayout, MacOSSonomaCleanLayoutProps } from './macos-sonoma-clean-layout';
+type MacOSLayoutVariant = 'sonoma' | 'sonoma-clean' | 'tahoe' | 'tahoe-dock' | 'macos-tahoe-clean';
+export interface MacOSLayoutProps {
+    children: React.ReactNode;
+    menuItems: MacOSSonomaLayoutProps['menuItems'];
+    logo?: MacOSSonomaLayoutProps['logo'];
+    rightButton?: React.ReactNode;
+    className?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+    fullWidth?: boolean;
+    variant?: MacOSLayoutVariant;
+}
+export declare function MacOSLayout({ variant, ...props }: MacOSLayoutProps): import("react/jsx-runtime").JSX.Element;
+export default MacOSLayout;
+export { MacOSSonomaLayout, MacOSSonomaCleanLayout, MacOSTahoeLayout, MacOSTahoeDockLayout, MacOSTahoeCleanLayout, };
+export type { MacOSSonomaLayoutProps, MacOSSonomaCleanLayoutProps, MacOSTahoeLayoutProps, MacOSTahoeDockLayoutProps, MacOSTahoeCleanLayoutProps, MacOSLayoutVariant, };

package/components/layouts/macos-layout/macos-sonoma-clean-layout.d.ts

@@ -0,0 +1,7 @@
+export interface MacOSSonomaCleanLayoutProps {
+    children: React.ReactNode;
+    className?: string;
+    contentClassName?: string;
+}
+export declare function MacOSSonomaCleanLayout({ children, className, contentClassName, }: MacOSSonomaCleanLayoutProps): import("react/jsx-runtime").JSX.Element;
+export default MacOSSonomaCleanLayout;