# ZwheUI Component Library

A showcase of a modern, reusable, and aesthetically pleasing React component library built with TypeScript. This project demonstrates a complete design system with a focus on dark-mode aesthetics, smooth animations, and a highly composable architecture.

## ✨ Features

*   **Comprehensive Component Set**: Over 80+ components, ranging from basic form elements to a complex, interactive node editor and data visualization charts.
*   **Built with React & TypeScript**: Type-safe and modern component architecture.
*   **Zero-Dependency Styling**: A custom CSS-in-JS solution (`useStyles` hook) provides scoped styles without external libraries.
*   **Dynamic Theming**: Easily switch between dark, light, and a fully customizable theme in real-time.
*   **Responsive & Accessible**: Components are designed to be responsive and include ARIA attributes for accessibility.
*   **Composable by Design**: Complex components like `Audio`, `Video`, and `Charts` are built from smaller, reusable parts.
*   **Animation Hooks**: Custom hooks for creating fluid animations and transitions (`useFade`, `useSlide`, `useCurveAnimation`).

## 🚀 Live Showcase

This application itself serves as a live interactive showcase. You can see all the components in action, test their functionality, and switch themes to see how they adapt.

## 📚 Library Documentation

For guides on how to use the library, please see the documentation files:

### Core Concepts
*   [Installation](./docs/Installation.md)
*   [Getting Started](./docs/GettingStarted.md)
*   [Design Principles](./docs/DesignPrinciples.md)
*   [Styling System](./docs/Styling.md)
*   [Theming](./docs/Theming.md)
*   [Layout Primitives](./docs/Layout.md)
*   [Polymorphic Components (`as` prop)](./docs/Polymorphism.md)
*   [Composable Components](./docs/Composition.md)
*   [Animation Hooks](./docs/Animation.md)
*   [Utility Hooks](./docs/Hooks.md)
*   [Icons Guide](./docs/Icons.md)

### Component Guides
*   [Forms & Inputs](./docs/Forms.md)
*   [Data Display](./docs/DataDisplay.md)
*   [Navigation Patterns](./docs/Navigation.md)
*   [Feedback & Overlays](./docs/Feedback.md)
*   [Notification Systems (Toast & Snackbar)](./docs/Notifications.md)

### Advanced Topics
*   [Accessibility (A11Y)](./docs/Accessibility.md)
*   [Performance Optimization](./docs/Performance.md)
*   [Customization](./docs/Customization.md)
*   [Server-Side Rendering (SSR)](./docs/ServerSideRendering.md)
*   [Testing](./docs/Testing.md)
*   [Advanced Charts](./docs/AdvancedCharts.md)
*   [Graphics Node Editor](./docs/NodeEditor.md)
*   [Advanced Node Editor](./docs/AdvancedNodeEditor.md)
*   [Authentication](./docs/Authentication.md)

### Recipes & Guides
*   [Recipe: Building a Dashboard](./docs/Recipes-Dashboard.md)
*   [Recipe: Building a Chat Interface](./docs/Recipes-ChatInterface.md)
*   [Recipe: Building a Settings Page](./docs/Recipes-SettingsPage.md)

### Project
*   [Contributing](./docs/Contributing.md)
*   [Changelog](./docs/Changelog.md)


## 📦 Component Documentation

*   [Accordion](./src/components/Accordion/Accordion.md)
*   [Alert](./src/components/Alert/Alert.md)
*   [AnimatedBlock](./src/components/AnimatedBlock/AnimatedBlock.md)
*   [AspectRatio](./src/components/AspectRatio/AspectRatio.md)
*   [Audio](./src/components/Audio/Audio.md)
*   [Avatar](./src/components/Avatar/Avatar.md)
*   [Backdrop](./src/components/Backdrop/Backdrop.md)
*   [Badge](./src/components/Badge/Badge.md)
*   [Blockquote](./src/components/Blockquote/Blockquote.md)
*   [Box](./src/components/Box/Box.md)
*   [Breadcrumbs](./src/components/Breadcrumbs/Breadcrumbs.md)
*   [Button](./src/components/Button.md)
*   [ButtonGroup](./src/components/ButtonGroup/ButtonGroup.md)
*   [Calendar](./src/components/Calendar/Calendar.md)
*   [Card](./src/components/Card/Card.md)
*   [Carousel](./src/components/Carousel/Carousel.md)
*   [Center](./src/components/Center/Center.md)
*   [Charts](./src/components/Charts/Charts.md)
*   [Checkbox](./src/components/Checkbox/Checkbox.md)
*   [Code](./src/components/Code/Code.md)
*   [CodeEditor](./src/components/Code/CodeEditor.md)
*   [CodePreview](./src/components/Code/CodePreview.md)
*   [Collapse](./src/components/Collapse/Collapse.md)
*   [ColorPicker](./src/components/ColorPicker/ColorPicker.md)
*   [Combobox](./src/components/Combobox/Combobox.md)
*   [Command](./src/components/Command/Command.md)
*   [Container](./src/components/Container/Container.md)
*   [ContextMenu](./src/components/ContextMenu/ContextMenu.md)
*   [DataTable](./src/components/DataTable/DataTable.md)
*   [DatePicker](./src/components/DatePicker/DatePicker.md)
*   [Dialog](./src/components/Dialog/Dialog.md)
*   [Divider](./src/components/Divider/Divider.md)
*   [Drawer](./src/components/Drawer/Drawer.md)
*   [Dropdown](./src/components/Dropdown/Dropdown.md)
*   [Editable](./src/components/Editable/Editable.md)
*   [EmptyState](./src/components/EmptyState/EmptyState.md)
*   [Error](./src/components/Error/Error.md)
*   [FileUpload](./src/components/FileUpload/FileUpload.md)
*   [Flex](./src/components/Flex/Flex.md)
*   [FloatingActionButton](./src/components/FloatingActionButton/FloatingActionButton.md)
*   [Footer](./src/components/Footer/Footer.md)
*   [FormControl](./src/components/FormControl/FormControl.md)
*   [GraphicsNodeEditor](./src/components/GraphicsNodeEditor/GraphicsNodeEditor.md)
*   [Grid](./src/components/Grid/Grid.md)
*   [Header](./src/components/Header/Header.md)
*   [HoverCard](./src/components/HoverCard/HoverCard.md)
*   [Icon](./src/components/Icon/Icon.md)
*   [IconButton](./src/components/IconButton/IconButton.md)
*   [Image](./src/components/Image/Image.md)
*   [Input](./src/components/Input/Input.md)
*   [Kbd](./src/components/Kbd/Kbd.md)
*   [Layer](./src/components/Layer/Layer.md)
*   [Layout](./src/components/Layout/Layout.md)
*   [Link](./src/components/Link/Link.md)
*   [List](./src/components/List/List.md)
*   [Markdown](./src/components/Markdown/Markdown.md)
*   [Menu](./src/components/Menu/Menu.md)
*   [Message](./src/components/Message/Message.md)
*   [Modal](./src/components/Modal/Modal.md)
*   [Nav](./src/components/Nav/Nav.md)
*   [NumberInput](./src/components/NumberInput/NumberInput.md)
*   [PageHeader](./src/components/PageHeader/PageHeader.md)
*   [Pagination](./src/components/Pagination/Pagination.md)
*   [PinInput](./src/components/PinInput/PinInput.md)
*   [Popover](./src/components/Popover/Popover.md)
*   [Popper](./src/components/Popper/Popper.md)
*   [Progress](./src/components/Progress/Progress.md)
*   [RadioGroup](./src/components/RadioGroup/RadioGroup.md)
*   [Rating](./src/components/Rating/Rating.md)
*   [Search](./src/components/Search/Search.md)
*   [SegmentedControl](./src/components/SegmentedControl/SegmentedControl.md)
*   [Select](./src/components/Select/Select.md)
*   [Sidebar](./src/components/Sidebar/Sidebar.md)
*   [SignInPage](./src/components/SignInPage/SignInPage.md)
*   [Skeleton](./src/components/Skeleton/Skeleton.md)
*   [Slider](./src/components/Slider/Slider.md)
*   [Snackbar](./src/components/Snackbar/Snackbar.md)
*   [Sofa](./src/components/Sofa/Sofa.md)
*   [SpeedDial](./src/components/SpeedDial/SpeedDial.md)
*   [Spinner](./src/components/Spinner/Spinner.md)
*   [Stat](./src/components/Stat/Stat.md)
*   [Stepper](./src/components/Stepper/Stepper.md)
*   [Switch](./src/components/Switch/Switch.md)
*   [Table](./src/components/Table/Table.md)
*   [Tabs](./src/components/Tabs/Tabs.md)
*   [Tag](./src/components/Tag/Tag.md)
*   [Text](./src/components/Text/Text.md)
*   [Textarea](./src/components/Textarea/Textarea.md)
*   [TextInput](./src/components/TextInput/TextInput.md)
*   [ThemeSwitcher](./src/components/ThemeSwitcher/ThemeSwitcher.md)
*   [Timeline](./src/components/Timeline/Timeline.md)
*   [Toast](./src/components/Toast/Toast.md)
*   [ToggleButton](./src/components/ToggleButton/ToggleButton.md)
*   [Tooltip](./src/components/Tooltip/Tooltip.md)
*   [TransferList](./src/components/TransferList/TransferList.md)
*   [TreeView](./src/components/TreeView/TreeView.md)
*   [Video](./src/components/Video/Video.md)
*   [XNodeTree](./src/components/XNodeTree/XNodeTree.md)
*   [XmlRenderer](./src/components/XmlRenderer/XmlRenderer.md)