@kubit-ui-web/react-components 2.0.0-beta.44 → 2.0.0-beta.45

package/README.md

@@ -1,405 +1,551 @@
-<p align="center">
-  <a href="https://kubit-ui.com">
-    <picture>
-      <img src="https://raw.githubusercontent.com/kubit-ui/kubit-react-components/27f3b176bf71555552834d566ebf4b6c0c1b2da5/assets/banner_kubit_readme.png" alt="Kubit React Components" />
-    </picture>
-  </a>
-</p>
+# @kubit-ui-web/react-components
 
-<div align="center">
+[![npm version](https://img.shields.io/npm/v/@kubit-ui-web/react-components.svg)](https://www.npmjs.com/package/@kubit-ui-web/react-components)
+[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue)](https://www.typescriptlang.org/)
 
-[![NPM Version](https://img.shields.io/npm/v/@kubit-ui-web/react-components?style=for-the-badge&logo=npm&color=CB3837)](https://www.npmjs.com/package/@kubit-ui-web/react-components)
-[![NPM Downloads](https://img.shields.io/npm/dm/@kubit-ui-web/react-components?style=for-the-badge&logo=npm&color=CB3837)](https://www.npmjs.com/package/@kubit-ui-web/react-components)
-[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@kubit-ui-web/react-components?style=for-the-badge&logo=webpack&color=8DD6F9)](https://bundlephobia.com/package/@kubit-ui-web/react-components)
+A comprehensive, production-ready library of customizable and accessible React web components designed to enhance your application's user experience.
 
-[![License](https://img.shields.io/github/license/kubit-ui/kubit-react-components?style=for-the-badge&color=blue)](./LICENSE.md)
-[![GitHub Stars](https://img.shields.io/github/stars/kubit-ui/kubit-react-components?style=for-the-badge&logo=github&color=yellow)](https://github.com/kubit-ui/kubit-react-components/stargazers)
-[![GitHub Issues](https://img.shields.io/github/issues/kubit-ui/kubit-react-components?style=for-the-badge&logo=github&color=red)](https://github.com/kubit-ui/kubit-react-components/issues)
+## Overview
 
-[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/)
-[![React](https://img.shields.io/badge/React-18.3-61DAFB?style=for-the-badge&logo=react)](https://reactjs.org/)
-[![Storybook](https://img.shields.io/badge/Storybook-10.1-FF4785?style=for-the-badge&logo=storybook)](https://storybook.js.org/)
+Kubit React Components is a professional component library that provides a complete set of UI building blocks for modern web applications. Built with TypeScript, accessibility, and performance in mind, it offers 50+ carefully crafted components that follow best practices and design system principles.
 
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge)](CONTRIBUTING.md)
-[![Coverage](https://img.shields.io/codecov/c/github/kubit-ui/kubit-react-components?style=for-the-badge&logo=codecov)](https://app.codecov.io/gh/kubit-ui/kubit-react-components/)
-
-</div>
-
-<br />
-
----
-
-<br />
-
-# Getting Started
-
-> **Kubit React Components** is a customizable, accessible library of React web components, designed to enhance your application's user experience with production-ready components.
-
-## 📋 Table of Contents
+## Features
 
-- [Installation](#installation)
-- [Quick Start](#quick-start)
-- [Usage](#usage)
-- [Documentation](#documentation)
-- [Storybook](#storybook)
-- [Features](#features)
-- [Browser Support](#browser-support)
-- [Contributing](#contributing)
-- [License](#license)
+- **Fully Typed**: Complete TypeScript support with comprehensive type definitions
+- **Accessible**: WCAG 2.1 Level AA compliant components with keyboard navigation and screen reader support
+- **Customizable**: Flexible theming system powered by design tokens
+- **Tree-shakeable**: Optimized bundle size with ESM and CommonJS exports
+- **SSR Ready**: Full support for server-side rendering
+- **Composable**: Flexible API allowing controlled and uncontrolled usage patterns
+- **Well Tested**: Extensive test coverage with unit, integration, and accessibility tests
+- **Production Ready**: Battle-tested in real-world applications
 
 ## Installation
 
 Install the package using your preferred package manager:
 
-### npm
-
 ```bash
-npm install @kubit-ui-web/react-components
+npm install @kubit-ui-web/react-components @kubit-ui-web/design-system
 ```
 
-### yarn
-
 ```bash
-yarn add @kubit-ui-web/react-components
+yarn add @kubit-ui-web/react-components @kubit-ui-web/design-system
 ```
 
-### pnpm
-
 ```bash
-pnpm add @kubit-ui-web/react-components
+pnpm add @kubit-ui-web/react-components @kubit-ui-web/design-system
 ```
 
-**Package Info:**
+## Peer Dependencies
 
-- 📦 Size: ~235 KB (gzipped)
-- 🎯 Tree-shakeable: Yes
-- 📘 TypeScript: Full support
-- ⚛️ React: 17+ and 18+
+This package requires the following peer dependencies:
 
-## Quick Start
-
-Import and use components in your application:
+- `react` >= 17.0.0 || >= 18.3.1
+- `react-dom` >= 17.0.0 || >= 18.3.1
 
 ## Quick Start
 
-Import and use components in your application:
+### Basic Usage
 
 ```tsx
-import React from 'react';
-
-import { Button, KubitProvider } from '@kubit-ui-web/react-components';
-import '@kubit-ui-web/react-components/styles/default/default.min.css';
+import {
+  Button,
+  Card,
+  Input,
+  StylesProvider,
+} from '@kubit-ui-web/react-components';
+import {
+  ButtonSizeType,
+  ButtonVariantType,
+} from '@kubit-ui-web/react-components';
 
-const App = () => {
+function App() {
   return (
-    <KubitProvider>
-      <Button variant="PRIMARY" size="MEDIUM">
-        Click me
-      </Button>
-    </KubitProvider>
+    <StylesProvider>
+      <Card>
+        <Input placeholder="Enter your email" type="email" />
+        <Button variant={ButtonVariantType.PRIMARY} size={ButtonSizeType.LARGE}>
+          Subscribe
+        </Button>
+      </Card>
+    </StylesProvider>
   );
-};
-
-export default App;
+}
 ```
 
-> **Note:** The `KubitProvider` is required to use the components. It provides the theme and other context.
+### Using with Custom Bernova Provider
 
-## Usage
-
-### Basic Components
+You can pass your own Bernova provider to customize the theme:
 
 ```tsx
+import { Button, StylesProvider } from '@kubit-ui-web/react-components';
 import {
-  Button,
-  Input,
-  KubitProvider,
-  Modal,
-  Tooltip,
+  ButtonSizeType,
+  ButtonVariantType,
 } from '@kubit-ui-web/react-components';
 
-function MyApp() {
-  return (
-    <KubitProvider>
-      <Input label="Email" placeholder="Enter your email" type="email" />
+import { Provider } from './my-custom-theme';
 
-      <Button variant="PRIMARY" onClick={handleClick}>
-        Submit
+function App() {
+  return (
+    <StylesProvider bernovaProvider={Provider as never}>
+      <Button variant={ButtonVariantType.PRIMARY} size={ButtonSizeType.LARGE}>
+        Custom Theme Button
       </Button>
-
-      <Tooltip content="Helpful information">
-        <span>Hover me</span>
-      </Tooltip>
-    </KubitProvider>
+    </StylesProvider>
   );
 }
 ```
 
-### Custom Theme
+### Using Existing Design System Themes
 
-Customize the theme to match your brand:
+Import and use pre-built themes from `@kubit-ui-web/design-system`:
 
 ```tsx
-import { KubitProvider } from '@kubit-ui-web/react-components';
-
-const customTheme = {
-  colors: {
-    primary: '#your-color',
-    secondary: '#your-secondary',
-  },
-};
+import { Provider as DefaultProvider } from '@kubit-ui-web/design-system';
+import { Button, StylesProvider } from '@kubit-ui-web/react-components';
+import {
+  ButtonSizeType,
+  ButtonVariantType,
+} from '@kubit-ui-web/react-components';
 
 function App() {
   return (
-    <KubitProvider theme={customTheme}>{/* Your components */}</KubitProvider>
+    <StylesProvider bernovaProvider={DefaultProvider as never}>
+      <Button variant={ButtonVariantType.PRIMARY} size={ButtonSizeType.LARGE}>
+        Themed Button
+      </Button>
+    </StylesProvider>
   );
 }
 ```
 
-For more information about theme customization, visit [Kubit UI Documentation](https://kubit-ui.com).
+## Available Components
+
+### Layout & Structure (6)
+
+- **Accordion**: Collapsible content panels with controlled and uncontrolled modes
+- **Card**: Flexible container for content grouping
+- **Modal**: Dialog overlays for focused user interactions
+- **Popover**: Floating content containers with positioning
+- **Portal**: Render components outside the DOM hierarchy
+- **Tabs**: Tabbed interface for organizing content
+
+### Navigation (4)
+
+- **Breadcrumbs**: Hierarchical navigation trail
+- **Link**: Accessible navigation links
+- **Pagination**: Page navigation controls
+- **PageControl**: Dot-based page indicators
+
+### Data Display (14)
+
+- **Avatar**: User profile images and initials
+- **Badge**: Status indicators and counters
+- **Chip**: Compact element for tags or selections
+- **Dot**: Visual status indicators
+- **Icon**: SVG icon system
+- **Image**: Optimized image component
+- **Tag**: Labeled data elements
+- **Skeleton**: Loading state placeholders
+- **Table**: Data table container
+- **TableHead**: Table header section
+- **TableBody**: Table body content
+- **TableRow**: Table row wrapper
+- **TableCell**: Individual table cells
+- **TableFoot**: Table footer section
+- **TableCaption**: Table caption element
+- **TableDivider**: Visual row separators
+- **DataTable**: Full-featured data grid
+- **Calendar**: Date selection interface
+- **Carousel**: Slideshow component
+- **ProgressBar**: Progress indicators
+
+### Forms & Input (18)
+
+- **Button**: Action triggers with multiple variants
+- **Input**: Text input field
+- **InputBase**: Base input functionality
+- **InputDecoration**: Input wrapper with decorations
+- **InputSignature**: Signature capture input
+- **TextArea**: Multi-line text input
+- **Checkbox**: Single checkbox control
+- **CheckboxBase**: Base checkbox functionality
+- **RadioButton**: Radio button selection
+- **Toggle**: Binary switch control
+- **Select**: Dropdown selection menu
+- **Slider**: Range selection slider
+- **StepperNumber**: Numeric stepper input
+- **Label**: Form field labels
+- **Option**: Select option items
+- **ListOptions**: Option list container
+- **SelectorBoxFile**: File upload selector
+- **VirtualKeyboard**: On-screen keyboard input
+
+### Feedback (3)
+
+- **Alert**: Contextual feedback messages
+- **Snackbar**: Temporary notification messages
+- **Tooltip**: Contextual help overlays
+
+### Typography (1)
+
+- **Text**: Styled text component with variants
+
+## Component Patterns
+
+### Controlled vs Uncontrolled
+
+Many components offer both controlled and uncontrolled patterns:
 
-## Features
+```tsx
+import { Accordion, AccordionPanel, StylesProvider } from '@kubit-ui-web/react-components';
+
+// Uncontrolled (component manages state)
+<StylesProvider>
+  <Accordion defaultExpanded={0}>
+    <AccordionPanel title="Section 1">Content 1</AccordionPanel>
+  </Accordion>
+</StylesProvider>
+
+// Controlled (you manage state)
+<StylesProvider>
+  <Accordion expanded={activeIndex} onExpandedChange={setActiveIndex}>
+    <AccordionPanel title="Section 1">Content 1</AccordionPanel>
+  </Accordion>
+</StylesProvider>
+```
 
-✨ **50+ Production-Ready Components**
+### StandAlone Components
 
-- Buttons, Inputs, Modals, Tooltips, and more
-- Fully customizable and themeable
+Each component includes a StandAlone variant for maximum flexibility:
 
-♿ **Accessible by Default**
+```tsx
+import { ButtonStandAlone } from '@kubit-ui-web/react-components';
 
-- WCAG 2.1 AA compliant
-- Keyboard navigation support
-- Screen reader friendly
+// Full control over rendering and behavior
+<ButtonStandAlone styles={customStyles} onClick={handleClick}>
+  Custom Button
+</ButtonStandAlone>;
+```
 
-🎨 **Design System Integration**
+## Project Structure
 
-- Built with design tokens
-- CSS variables for easy customization
-- Bernova CSS generation
+```
+src/
+├── components/           # All UI components
+│   ├── accordion/       # Accordion component
+│   ├── alert/           # Alert component
+│   ├── avatar/          # Avatar component
+│   └── ...              # 50+ components
+├── lib/                 # Shared utilities
+│   ├── components/      # Base component utilities
+│   ├── constants/       # Shared constants
+│   ├── hooks/           # Reusable React hooks
+│   ├── provider/        # Context providers
+│   ├── types/           # TypeScript type definitions
+│   └── utils/           # Helper functions
+└── index.ts            # Main entry point
+```
 
-📦 **Developer Experience**
+## Development
 
-- Full TypeScript support
-- Tree-shakeable exports
-- Comprehensive documentation
-- Rich Storybook examples
+### Prerequisites
 
-🚀 **Performance Optimized**
+- Node.js 22.x or higher
+- pnpm 10.28.1
 
-- Small bundle size (~235 KB gzipped)
-- Code splitting ready
-- Minimal runtime overhead
+### Setup
 
-## Browser Support
+```bash
+# Install dependencies
+pnpm install
 
-| Browser | Version         |
-| ------- | --------------- |
-| Chrome  | Last 2 versions |
-| Firefox | Last 2 versions |
-| Safari  | Last 2 versions |
-| Edge    | Last 2 versions |
+# Start development mode
+pnpm dev
 
-## Documentation
+# Run tests
+pnpm test
 
-You can find comprehensive documentation for all components at:
+# Type checking
+pnpm typecheck
 
-🌐 **[Kubit UI Website](https://kubit-ui.com)**
+# Lint code
+pnpm lint
 
-- Component API documentation
-- Interactive examples
-- Design guidelines
-- Migration guides
+# Format code
+pnpm format
+```
 
-## Storybook
+### Build
 
-Explore all components interactively in Storybook.
+```bash
+# Build for production
+pnpm build
 
-### View Online
+# Clean build artifacts
+pnpm clean:build
+```
 
-🎭 **[View Storybook](https://kubit-ui.com/storybook)** - Browse all components online
+### Testing
 
-### Run Locally
+```bash
+# Run all tests
+pnpm test
 
-To run Storybook locally:
+# Run tests in watch mode
+pnpm test:watch
 
-1. Clone the repository:
+# Generate coverage report
+pnpm test:coverage
 
-   ```bash
-   git clone https://github.com/kubit-ui/kubit-react-components.git
-   cd kubit-react-components
-   ```
+# Run coverage with UI
+pnpm test:coverage:ui
+```
 
-2. Install dependencies:
+### Code Quality
 
-   ```bash
-   pnpm install
-   ```
+```bash
+# Lint code
+pnpm lint
 
-3. Start Storybook:
-   ```bash
-   pnpm storybook
-   ```
+# Fix linting issues
+pnpm lint:fix
 
-This will start the Storybook server at `http://localhost:6006` where you can see all components in action.
+# Check formatting
+pnpm format:check
 
-## Tests
+# Format code
+pnpm format
 
-Run the test suite to ensure everything works correctly:
+# Type check
+pnpm typecheck
 
-```bash
-# Run all tests
-pnpm test
+# Run all validations
+pnpm validate
+```
 
-# Watch mode (for development)
-pnpm test:watch
+## Package Distribution
 
-# Coverage report
-pnpm test:coverage
-```
+This package is distributed with multiple module formats:
 
-**Test Stack:**
+- **ESM** (ES Modules): `dist/esm/` - Modern bundlers and environments
+- **CJS** (CommonJS): `dist/cjs/` - Node.js and legacy tooling
+- **Types**: `dist/types/` - TypeScript type definitions
 
-- ✅ Vitest - Fast unit testing
-- 🧪 Testing Library - Component testing
-- ♿ vitest-axe - Accessibility testing
+### Exports
 
-## Contributing
+The package provides granular exports for optimal tree-shaking:
 
-We welcome contributions from the community! Here's how you can help:
+```tsx
+// Import everything
+import { Button, Input, StylesProvider } from '@kubit-ui-web/react-components';
 
-### Ways to Contribute
+// Import specific components (better for tree-shaking)
+import { Button } from '@kubit-ui-web/react-components/components/button';
 
-- 🐛 Report bugs
-- 💡 Suggest new features
-- 📝 Improve documentation
-- 🔧 Submit pull requests
-- ⭐ Star the repository
+// Import StylesProvider
+import { StylesProvider } from '@kubit-ui-web/react-components/provider/styles';
+```
 
-### Contribution Steps
+## Theming
 
-1. **Fork the Repository**: Click the "Fork" button in the upper right corner of the [repository's page](https://github.com/kubit-ui/kubit-react-components) on GitHub.
+### StylesProvider Configuration
 
-2. **Clone the Repository**: Clone your fork to your local machine.
+The `StylesProvider` component is the root wrapper that provides theming capabilities through Bernova:
 
-   ```bash
-   git clone https://github.com/YOUR_USERNAME/kubit-react-components.git
-   cd kubit-react-components
-   ```
+```tsx
+import { StylesProvider } from '@kubit-ui-web/react-components';
 
-3. **Create a Branch**: Create a new branch for your changes.
+// Without custom theme (uses default)
+<StylesProvider>
+  <YourApp />
+</StylesProvider>
 
-   ```bash
-   git checkout -b feature/your-feature-name
-   ```
+// With custom Bernova provider
+<StylesProvider bernovaProvider={CustomProvider as never}>
+  <YourApp />
+</StylesProvider>
+```
 
-4. **Install Dependencies**:
+### Creating a Custom Theme
 
-   ```bash
-   pnpm install
-   ```
+Create your own Bernova provider with custom design tokens:
 
-5. **Make Changes**: Make your changes and test them thoroughly.
+```tsx
+// my-theme/provider.ts
+import { createProvider } from '@kubit-ui-web/design-system';
 
-   ```bash
-   pnpm test
-   pnpm lint
-   pnpm typecheck
-   ```
+export const MyCustomProvider = createProvider({
+  colors: {
+    primary: '#007bff',
+    secondary: '#6c757d',
+    // ... more color tokens
+  },
+  spacing: {
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    // ... more spacing tokens
+  },
+  typography: {
+    fontFamily: 'Inter, sans-serif',
+    // ... more typography tokens
+  },
+  // ... more design tokens
+});
 
-6. **Commit Changes**: Use conventional commits for your messages.
+// App.tsx
+import { StylesProvider } from '@kubit-ui-web/react-components';
+import { MyCustomProvider } from './my-theme/provider';
 
-   ```bash
-   git commit -m "feat: add new component feature"
-   ```
+function App() {
+  return (
+    <StylesProvider bernovaProvider={MyCustomProvider as never}>
+      <YourApp />
+    </StylesProvider>
+  );
+}
+```
 
-   **Commit Types:**
-   - `feat:` - New feature
-   - `fix:` - Bug fix
-   - `docs:` - Documentation changes
-   - `style:` - Code style changes (formatting)
-   - `refactor:` - Code refactoring
-   - `test:` - Adding or updating tests
-   - `chore:` - Maintenance tasks
+### Using Pre-built Themes
 
-7. **Push Changes**: Push your changes to your fork.
+Use themes from the design system package:
 
-   ```bash
-   git push origin feature/your-feature-name
-   ```
+```tsx
+import { StylesProvider } from '@kubit-ui-web/react-components';
+import {
+  Provider as DefaultProvider,
+  DarkProvider,
+  LightProvider
+} from '@kubit-ui-web/design-system';
+
+// Default theme
+<StylesProvider bernovaProvider={DefaultProvider as never}>
+  <YourApp />
+</StylesProvider>
+
+// Dark theme
+<StylesProvider bernovaProvider={DarkProvider as never}>
+  <YourApp />
+</StylesProvider>
+
+// Light theme
+<StylesProvider bernovaProvider={LightProvider as never}>
+  <YourApp />
+</StylesProvider>
+```
 
-8. **Open a Pull Request**: Go to the original repository and click "New pull request". Fill out the PR template with details about your changes.
+## Browser Support
 
-### Development Commands
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
 
-```bash
-# Start development server
-pnpm dev
+## Accessibility
 
-# Run Storybook
-pnpm storybook
+All components follow WCAG 2.1 Level AA guidelines:
 
-# Build library
-pnpm dist
+- Semantic HTML structure
+- ARIA attributes and roles
+- Keyboard navigation support
+- Focus management
+- Screen reader optimization
+- Color contrast compliance
+- Skip links and landmarks
 
-# Run tests
-pnpm test
+Accessibility is tested using:
 
-# Lint code
-pnpm lint
+- `vitest-axe` for automated accessibility testing
+- `@testing-library/react` for user interaction testing
+- Manual screen reader testing
 
-# Type check
-pnpm typecheck
+## TypeScript Support
+
+Full TypeScript support with:
+
+- Comprehensive type definitions
+- Generic type parameters for flexible typing
+- Strict type checking
+- IntelliSense support in VS Code
+- JSDoc documentation
+
+```tsx
+import type {
+  ButtonProps,
+  ButtonVariant,
+} from '@kubit-ui-web/react-components';
 
-# Check package size
-pnpm pack:size
+const MyButton: React.FC<ButtonProps> = (props) => {
+  return <Button {...props} />;
+};
 ```
 
-For more detailed information, please refer to the [CONTRIBUTING.md](./CONTRIBUTING.md) file.
+## Testing
 
-## Community & Support
+The component library uses:
 
-- 💬 [GitHub Discussions](https://github.com/kubit-ui/kubit-react-components/discussions) - Ask questions and share ideas
-- 🐛 [Issue Tracker](https://github.com/kubit-ui/kubit-react-components/issues) - Report bugs and request features
-- 📧 [Email](mailto:kubit@opendigitalservices.com) - Contact the team
-- 🐦 [Twitter](https://twitter.com/kubit_ui) - Follow for updates
+- **Vitest**: Fast unit test runner
+- **@testing-library/react**: Component testing utilities
+- **@testing-library/user-event**: User interaction simulation
+- **vitest-axe**: Accessibility testing
+- **jsdom**: DOM environment for testing
+- **@vitest/coverage-v8**: Code coverage reporting
 
-## Related Projects
+Test coverage is maintained at a high level for reliability.
 
-- [Kubit Design System](https://kubit-ui.com) - Complete design system documentation
-- [Kubit Figma Kit](https://figma.com/@kubit) - Design files and components
+## Contributing
 
-## Changelog
+Contributions are welcome! Please read our [Contributing Guide](../../CONTRIBUTING.md) for details on our development process and how to submit pull requests.
 
-See [CHANGELOG.md](./CHANGELOG.md) for a list of changes and migration guides.
+### Development Guidelines
 
-## Migration Guides
+- Write tests for new components and features
+- Follow the existing component patterns
+- Ensure accessibility compliance
+- Update TypeScript types
+- Document component APIs
+- Run `pnpm validate` before submitting
 
-- [v1.x to v2.0.0](./MIGRATION_GUIDE.md) - Complete migration guide for major version
+## Documentation
 
-## License
+- **Website**: [https://www.kubit-ui.com](https://www.kubit-ui.com)
+- **Storybook**: Interactive component documentation
+- **API Docs**: TypeScript definitions and JSDoc comments
+- **Examples**: Component README files with usage examples
 
-This project is licensed under the **Apache License 2.0** - see the [LICENSE.md](./LICENSE.md) file for details.
+## Performance
 
-```
-Copyright 2025 Kubit
+The library is optimized for performance:
 
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
+- Tree-shakeable exports
+- Code splitting support
+- Lazy loading compatible
+- Minimal re-renders
+- Optimized bundle size
+- No runtime dependencies (except @floating-ui/dom for positioning)
 
-    http://www.apache.org/licenses/LICENSE-2.0
-```
+## License
 
----
+Apache License 2.0 - see [LICENSE](../../LICENSE) for details.
 
-<div align="center">
+## Support
 
-**Made with ❤️ by the Kubit Team**
+- **Issues**: [GitHub Issues](https://github.com/kubit-ui/kubit-react-components/issues)
+- **Email**: kubit.lab.dev@gmail.com
+- **Funding**: [Open Collective](https://opencollective.com/kubit-ui)
 
-[![GitHub](https://img.shields.io/badge/GitHub-kubit--ui-181717?style=for-the-badge&logo=github)](https://github.com/kubit-ui/kubit-react-components)
-[![NPM](https://img.shields.io/badge/NPM-%40kubit--ui--web%2Freact--components-CB3837?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@kubit-ui-web/react-components)
-[![Website](https://img.shields.io/badge/Website-kubit--ui.com-4A90E2?style=for-the-badge&logo=google-chrome&logoColor=white)](https://kubit-ui.com)
+## Related Packages
 
-If you find this project useful, please consider giving it a ⭐️!
+- **@kubit-ui-web/design-system**: CSS-in-JS design system and themes
+- **@kubit-ui-web/storybook**: Interactive component documentation
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md) for release history and updates.
+
+---
 
-</div>
+Built with dedication by the Kubit team and community contributors.