@codefast/ui 0.3.10 → 0.3.11-canary.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @codefast/ui
 
+## 0.3.11-canary.1
+
+### Patch Changes
+
+- [`dd5130a`](https://github.com/codefastlabs/codefast/commit/dd5130adb5649dca6773614ffda262cdde732d8f) Thanks [@thevuong](https://github.com/thevuong)! - chore(deps): downgrade @rslib/core to 0.19.1 in package.json and pnpm-lock.yaml
+
+- [`42758ab`](https://github.com/codefastlabs/codefast/commit/42758ab9d8f548ea9f4a806a7dbb7ed295fe2390) Thanks [@thevuong](https://github.com/thevuong)! - chore: update package configurations and TypeScript settings
+
+- [`d2abc63`](https://github.com/codefastlabs/codefast/commit/d2abc636245526ec402811d8585d93684865dde6) Thanks [@thevuong](https://github.com/thevuong)! - chore(deps): update package versions and configurations
+
+- Updated dependencies [[`dd5130a`](https://github.com/codefastlabs/codefast/commit/dd5130adb5649dca6773614ffda262cdde732d8f), [`42758ab`](https://github.com/codefastlabs/codefast/commit/42758ab9d8f548ea9f4a806a7dbb7ed295fe2390), [`d2abc63`](https://github.com/codefastlabs/codefast/commit/d2abc636245526ec402811d8585d93684865dde6), [`49df885`](https://github.com/codefastlabs/codefast/commit/49df8854d51bad598381be68b6e41096e7da814c)]:
+  - @codefast/tailwind-variants@0.3.11-canary.1
+
+## 0.3.11-canary.0
+
+### Patch Changes
+
+- [`bec9cfa`](https://github.com/codefastlabs/codefast/commit/bec9cfab879d59c877db130eb2c2522b1453bc8f) Thanks [@thevuong](https://github.com/thevuong)! - refactor(theme): reorganize imports for improved readability
+
+- [`135c6be`](https://github.com/codefastlabs/codefast/commit/135c6bed9d1bc1e96bad3173adab1bf32d74322f) Thanks [@thevuong](https://github.com/thevuong)! - chore: update linting and formatting scripts in package.json
+
+- [`610cf7a`](https://github.com/codefastlabs/codefast/commit/610cf7a7f9b6e5b37be21e7675ea363ef1020639) Thanks [@thevuong](https://github.com/thevuong)! - fix(hooks): handle missing `navigator.clipboard.writeText` gracefully
+
+- [`b1d23c2`](https://github.com/codefastlabs/codefast/commit/b1d23c27dffff6686193e3cbb3f848970e253493) Thanks [@thevuong](https://github.com/thevuong)! - refactor(chart): update ChartTooltip types for improved compatibility
+
+- [`3e90474`](https://github.com/codefastlabs/codefast/commit/3e90474fbbb9f8ac626c5949bfdbac2eaf1cb3e8) Thanks [@thevuong](https://github.com/thevuong)! - chore: update project configuration and dependencies
+
+- [`5c09d4c`](https://github.com/codefastlabs/codefast/commit/5c09d4ce2df564dc7ac6727b00cfa668164a1af4) Thanks [@thevuong](https://github.com/thevuong)! - refactor(config): rename `check-types` to `typecheck` and update usage
+
+- Updated dependencies [[`135c6be`](https://github.com/codefastlabs/codefast/commit/135c6bed9d1bc1e96bad3173adab1bf32d74322f), [`610cf7a`](https://github.com/codefastlabs/codefast/commit/610cf7a7f9b6e5b37be21e7675ea363ef1020639), [`3e90474`](https://github.com/codefastlabs/codefast/commit/3e90474fbbb9f8ac626c5949bfdbac2eaf1cb3e8), [`5c09d4c`](https://github.com/codefastlabs/codefast/commit/5c09d4ce2df564dc7ac6727b00cfa668164a1af4)]:
+  - @codefast/tailwind-variants@0.3.11-canary.0
+
 ## 0.3.10
 
 ### Patch Changes

package/README.md

@@ -1,17 +1,49 @@
-# UI Components Library
+# @codefast/ui
 
 Core UI components library built with React, Tailwind CSS, and Radix UI for creating modern, accessible, and customizable user interfaces with a comprehensive design system.
 
 [![CI](https://github.com/codefastlabs/codefast/actions/workflows/release.yml/badge.svg)](https://github.com/codefastlabs/codefast/actions/workflows/release.yml)
-[![NPM Version](https://img.shields.io/npm/v/@codefast/ui.svg)](https://www.npmjs.com/package/@codefast/ui)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Node.js](https://img.shields.io/badge/Node.js-20%2B-green.svg)](https://nodejs.org/)
-[![pnpm](https://img.shields.io/badge/pnpm-10%2B-blue.svg)](https://pnpm.io/)
+[![npm version](https://img.shields.io/npm/v/@codefast/ui.svg)](https://www.npmjs.com/package/@codefast/ui)
+[![npm downloads](https://img.shields.io/npm/dm/@codefast/ui.svg)](https://www.npmjs.com/package/@codefast/ui)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/@codefast/ui)](https://bundlephobia.com/package/@codefast/ui)
+[![license](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Installation](#installation)
+- [Styling Integration](#styling-integration)
+  - [SSR with Nitro (TanStack Start)](#ssr-with-nitro-tanstack-start)
+- [Quick Start](#quick-start)
+- [Components](#components)
+  - [Layout](#layout)
+  - [Form](#form)
+  - [Navigation](#navigation)
+  - [Overlay](#overlay)
+  - [Data Display](#data-display)
+- [Usage Examples](#usage-examples)
+- [Theming and Customization](#theming-and-customization)
+- [API Reference](#api-reference)
+- [Accessibility](#accessibility)
+- [Browser Compatibility](#browser-compatibility)
+- [Contributing](#contributing)
+- [License](#license)
+- [Changelog](#changelog)
+
+## Overview
+
+`@codefast/ui` provides **60+ accessible components** for building production-grade user interfaces. Every component is built on [Radix UI](https://radix-ui.com/) primitives, styled with [Tailwind CSS 4](https://tailwindcss.com/), and fully typed with TypeScript.
+
+**Key features:**
+
+- **60+ Components** -- Layout, form, navigation, overlay, and data display categories.
+- **Accessible by Default** -- WAI-ARIA compliant with keyboard navigation and screen reader support.
+- **Fully Typed** -- Complete TypeScript definitions for all components and props.
+- **Customizable** -- Extend styles with Tailwind CSS utility classes or Tailwind Variants.
+- **Tree-shakeable** -- Import only the components you use.
 
 ## Installation
 
-Install the component library via pnpm (recommended):
-
 ```bash
 pnpm add @codefast/ui
 ```
@@ -22,31 +54,161 @@ Or using npm:
 npm install @codefast/ui
 ```
 
-**Peer Dependencies**:
-
-Make sure you have installed the peer dependencies:
+**Peer dependencies:**
 
 ```bash
 pnpm add react react-dom
 pnpm add -D @types/react @types/react-dom
 ```
 
-**Styling**:
+**Requirements:**
+
+- Node.js >= 24.0.0 (LTS)
+- React >= 19.0.0
+- TypeScript >= 5.9.2 (recommended)
+- Tailwind CSS 4.x (for styling)
+
+## Styling Integration
+
+`@codefast/ui` requires CSS styles to render correctly. Choose one of the following approaches based on your project setup.
 
-Import the CSS styles in your application:
+### Option 1: Project Already Uses Tailwind CSS (Recommended)
+
+If your project already has Tailwind CSS 4.x configured (e.g. Vite, Next.js, TanStack Start), import only the **theme variables** and **preset** to avoid duplicate Tailwind output:
+
+**1. In your main CSS file** (e.g. `src/styles.css` or `src/index.css`):
+
+```css
+@import "tailwindcss";
+
+/* @codefast/ui – theme variables & preset (must come after tailwindcss) */
+@import "@codefast/ui/css/slate.css";
+@import "@codefast/ui/css/preset.css";
+```
+
+**2. Select a theme.** Available themes (replace `slate` with any below):
+
+| Theme   | Import Path                    |
+| ------- | ------------------------------ |
+| slate   | `@codefast/ui/css/slate.css`   |
+| gray    | `@codefast/ui/css/gray.css`    |
+| zinc    | `@codefast/ui/css/zinc.css`    |
+| neutral | `@codefast/ui/css/neutral.css` |
+| stone   | `@codefast/ui/css/stone.css`   |
+| red     | `@codefast/ui/css/red.css`     |
+| orange  | `@codefast/ui/css/orange.css`  |
+| amber   | `@codefast/ui/css/amber.css`   |
+| yellow  | `@codefast/ui/css/yellow.css`  |
+| lime    | `@codefast/ui/css/lime.css`    |
+| green   | `@codefast/ui/css/green.css`   |
+| emerald | `@codefast/ui/css/emerald.css` |
+| teal    | `@codefast/ui/css/teal.css`    |
+| cyan    | `@codefast/ui/css/cyan.css`    |
+| sky     | `@codefast/ui/css/sky.css`     |
+| blue    | `@codefast/ui/css/blue.css`    |
+| indigo  | `@codefast/ui/css/indigo.css`  |
+| violet  | `@codefast/ui/css/violet.css`  |
+| purple  | `@codefast/ui/css/purple.css`  |
+| fuchsia | `@codefast/ui/css/fuchsia.css` |
+| pink    | `@codefast/ui/css/pink.css`    |
+| rose    | `@codefast/ui/css/rose.css`    |
+
+**3. Dark mode.** All themes include light/dark variants. Add the `.dark` class to `<html>` or `<body>` to enable dark mode:
 
 ```tsx
-import "@codefast/ui/styles.css";
+// Example: toggle dark mode
+document.documentElement.classList.toggle("dark", isDark);
 ```
 
-**Requirements**:
+### Option 2: Standalone (No Existing Tailwind)
+
+If your project does **not** use Tailwind yet, import the full stylesheet (includes Tailwind + theme + preset):
+
+```tsx
+// In your app entry (e.g. main.tsx, _app.tsx)
+import "@codefast/ui/css/style.css";
+```
+
+> **Note:** This bundles Tailwind CSS. Ensure your build tool (Vite, webpack, etc.) can process CSS `@import`. You may need `@tailwindcss/vite` or `@tailwindcss/postcss` in devDependencies.
+
+### Option 3: Framework-Specific Setup
+
+**Vite (with `@tailwindcss/vite`):**
+
+```css
+/* src/styles.css */
+@import "tailwindcss";
+@import "@codefast/ui/css/slate.css";
+@import "@codefast/ui/css/preset.css";
+```
+
+**Next.js (App Router):**
+
+```css
+/* app/globals.css */
+@import "tailwindcss";
+@import "@codefast/ui/css/slate.css";
+@import "@codefast/ui/css/preset.css";
+```
+
+**TanStack Start:**
+
+```css
+/* src/styles.css */
+@import "tailwindcss";
+@import "@codefast/ui/css/slate.css";
+@import "@codefast/ui/css/preset.css";
+```
+
+#### SSR with Nitro (TanStack Start)
+
+When deploying with [Nitro](https://v3.nitro.build/) (Vercel, self-host Node.js, etc.), add this to your `vite.config.ts` to avoid a Rolldown CJS→ESM interop error with `tslib` (used by Radix UI):
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      // Workaround: Rolldown mishandles tslib CJS; force ESM to avoid SSR 500.
+      tslib: "tslib/tslib.es6.mjs",
+    },
+  },
+  // ... other config
+});
+```
+
+**Symptom without this:** `TypeError: Cannot destructure property '__extends' of '__toESM(...).default' as it is undefined` when serving SSR pages.
+
+### Troubleshooting
+
+| Issue                                              | Solution                                                                                                                          |
+| -------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| Components look unstyled                           | Ensure CSS imports run before any component renders (entry point first).                                                          |
+| Duplicate Tailwind CSS                             | Use Option 1 (theme + preset only), **not** `style.css`.                                                                          |
+| Dark mode not working                              | Add `class="dark"` to `<html>` when dark mode is active.                                                                          |
+| Build: CSS not found                               | Verify path: `@codefast/ui/css/[theme].css` (e.g. `slate.css`).                                                                   |
+| SSR 500: `Cannot destructure property '__extends'` | Add `resolve.alias: { tslib: 'tslib/tslib.es6.mjs' }` in `vite.config.ts` (see [SSR with Nitro](#ssr-with-nitro-tanstack-start)). |
+
+### Customizing Theme
+
+Override CSS variables in your own CSS after imports:
+
+```css
+@import "@codefast/ui/css/slate.css";
+@import "@codefast/ui/css/preset.css";
 
-- Node.js version 20.0.0 or higher
-- React version 19.0.0 or higher
-- TypeScript version 5.9.2 or higher (recommended)
+:root {
+  --radius: 0.5rem; /* Increase border radius */
+  --primary: oklch(0.4 0.2 260); /* Custom primary color */
+}
+```
 
 ## Quick Start
 
+After integrating styles (see [Styling Integration](#styling-integration)), import and use components:
+
 ```tsx
 import { Button, Card, CardContent, CardHeader, CardTitle } from "@codefast/ui";
 
@@ -67,58 +229,63 @@ function App() {
 }
 ```
 
-## Usage
-
-### Components Overview
-
-The library provides a comprehensive set of components organized into categories:
+## Components
 
-#### Layout Components
+### Layout
 
-- **Box**: Flexible container component
-- **Card**: Content containers with header, content, and footer sections
-- **Separator**: Visual dividers between content sections
-- **AspectRatio**: Maintain consistent aspect ratios for content
+| Component   | Description                                                 |
+| ----------- | ----------------------------------------------------------- |
+| Card        | Content container with header, content, and footer sections |
+| Separator   | Visual divider between content sections                     |
+| AspectRatio | Maintain consistent aspect ratios for media content         |
 
-#### Form Components
+### Form
 
-- **Button**: Interactive buttons with various styles and sizes
-- **Input**: Text input fields with validation support
-- **Checkbox**: Individual checkboxes and checkbox groups
-- **RadioGroup**: Radio button groups for single selection
-- **Select**: Dropdown selection components
-- **Switch**: Toggle switches for boolean values
-- **Slider**: Range input sliders
-- **Label**: Form labels with accessibility features
+| Component  | Description                                         |
+| ---------- | --------------------------------------------------- |
+| Button     | Interactive button with multiple variants and sizes |
+| Input      | Text input with validation support                  |
+| Checkbox   | Individual checkbox and checkbox groups             |
+| RadioGroup | Radio button group for single selection             |
+| Select     | Dropdown selection component                        |
+| Switch     | Toggle switch for boolean values                    |
+| Slider     | Range input slider                                  |
+| Label      | Form label with accessibility features              |
 
-#### Navigation Components
+### Navigation
 
-- **Breadcrumb**: Navigation breadcrumbs
-- **NavigationMenu**: Complex navigation menus
-- **Menubar**: Application menu bars
-- **Tabs**: Tabbed interfaces
+| Component      | Description                            |
+| -------------- | -------------------------------------- |
+| Breadcrumb     | Navigation breadcrumb trail            |
+| NavigationMenu | Complex navigation menus with submenus |
+| Menubar        | Application menu bar                   |
+| Tabs           | Tabbed interface with content panels   |
 
-#### Overlay Components
+### Overlay
 
-- **Dialog**: Modal dialogs and popups
-- **AlertDialog**: Confirmation and alert dialogs
-- **Popover**: Contextual popovers
-- **Tooltip**: Informational tooltips
-- **HoverCard**: Rich hover cards with content
+| Component   | Description                          |
+| ----------- | ------------------------------------ |
+| Dialog      | Modal dialog and popup               |
+| AlertDialog | Confirmation and alert dialog        |
+| Popover     | Contextual popover                   |
+| Tooltip     | Informational tooltip                |
+| HoverCard   | Rich hover card with preview content |
 
-#### Data Display Components
+### Data Display
 
-- **Avatar**: User profile images and fallbacks
-- **Badge**: Status indicators and labels
-- **Alert**: System messages and notifications
-- **Progress**: Progress indicators
-- **Accordion**: Expandable content sections
-- **Calendar**: Date selection calendars
-- **Carousel**: Content carousels and sliders
+| Component | Description                      |
+| --------- | -------------------------------- |
+| Avatar    | User profile image with fallback |
+| Badge     | Status indicator and label       |
+| Alert     | System message and notification  |
+| Progress  | Progress indicator               |
+| Accordion | Expandable content sections      |
+| Calendar  | Date selection calendar          |
+| Carousel  | Content carousel and slider      |
 
-### Basic Component Usage
+## Usage Examples
 
-#### Using Form Components
+### Form Components
 
 ```tsx
 import { Button, Input, Label, Card, CardContent, CardHeader, CardTitle } from "@codefast/ui";
@@ -150,7 +317,7 @@ function ContactForm() {
 }
 ```
 
-#### Using Navigation Components
+### Navigation Components
 
 ```tsx
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@codefast/ui";
@@ -173,7 +340,7 @@ function TabExample() {
 }
 ```
 
-#### Using Overlay Components
+### Overlay Components
 
 ```tsx
 import {
@@ -206,21 +373,13 @@ function DialogExample() {
 }
 ```
 
-### Theming and Customization
+## Theming and Customization
 
-The library uses Tailwind CSS for styling and supports theme customization:
+All components use CSS custom properties (`--primary`, `--background`, `--radius`, etc.). You can:
 
-```tsx
-import { ThemeProvider } from "next-themes";
-
-function App() {
-  return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      <div className="bg-background text-foreground min-h-screen">{/* Your app content */}</div>
-    </ThemeProvider>
-  );
-}
-```
+1. **Switch themes** — Import a different theme file (e.g. `zinc.css` instead of `slate.css`).
+2. **Override variables** — Define your own values in `:root` or `.dark` after imports (see [Customizing Theme](#customizing-theme)).
+3. **Use a theme provider** — For system/light/dark switching, add/remove `dark` class on `<html>`; many apps use `next-themes` or similar for persistence.
 
 ## API Reference
 
@@ -231,99 +390,71 @@ Most components accept these common props:
 | Prop        | Type              | Default     | Description            |
 | ----------- | ----------------- | ----------- | ---------------------- |
 | `className` | `string`          | `undefined` | Additional CSS classes |
-| `children`  | `React.ReactNode` | `undefined` | Child components       |
-
-### Component Categories
+| `children`  | `React.ReactNode` | `undefined` | Child elements         |
 
-#### Layout Components
-
-- **Box**: `BoxProps` - Flexible container with layout utilities
-- **Card**: `CardProps` - Content container with sections
-- **Separator**: `SeparatorProps` - Visual divider element
-- **AspectRatio**: `AspectRatioProps` - Aspect ratio container
+### TypeScript Support
 
-#### Form Components
+All components export their prop types for use in custom wrappers:
 
-- **Button**: `ButtonProps` - Interactive button with variants
-- **Input**: `InputProps` - Text input with validation
-- **Label**: `LabelProps` - Form label with accessibility
-- **Checkbox**: `CheckboxProps` - Boolean input control
-- **RadioGroup**: `RadioGroupProps` - Single selection group
-- **Select**: `SelectProps` - Dropdown selection
-- **Switch**: `SwitchProps` - Boolean toggle control
-- **Slider**: `SliderProps` - Range input control
+```tsx
+import type { ButtonProps, CardProps, InputProps } from "@codefast/ui";
 
-#### Navigation Components
+function MyCustomButton(props: ButtonProps) {
+  return <Button {...props} />;
+}
+```
 
-- **Tabs**: `TabsProps` - Tabbed interface container
-- **NavigationMenu**: `NavigationMenuProps` - Complex navigation
-- **Breadcrumb**: `BreadcrumbProps` - Navigation breadcrumbs
-- **Menubar**: `MenubarProps` - Application menu bar
+### Component Prop Types
 
-#### Overlay Components
+**Layout:** `CardProps`, `SeparatorProps`, `AspectRatioProps`
 
-- **Dialog**: `DialogProps` - Modal dialog container
-- **AlertDialog**: `AlertDialogProps` - Confirmation dialog
-- **Popover**: `PopoverProps` - Contextual overlay
-- **Tooltip**: `TooltipProps` - Informational overlay
-- **HoverCard**: `HoverCardProps` - Rich content overlay
+**Form:** `ButtonProps`, `InputProps`, `LabelProps`, `CheckboxProps`, `RadioGroupProps`, `SelectProps`, `SwitchProps`, `SliderProps`
 
-### TypeScript Support
+**Navigation:** `TabsProps`, `NavigationMenuProps`, `BreadcrumbProps`, `MenubarProps`
 
-All components are fully typed with TypeScript. Import types alongside components:
+**Overlay:** `DialogProps`, `AlertDialogProps`, `PopoverProps`, `TooltipProps`, `HoverCardProps`
 
-```tsx
-import type { ButtonProps, CardProps, InputProps, ComponentProps } from "@codefast/ui";
+## Accessibility
 
-// Component props are fully typed using ComponentProps
-function MyButton(props: ComponentProps<typeof Button>) {
-  return <Button {...props} />;
-}
+All components follow [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) guidelines and provide:
 
-// Alternative using ButtonProps
-function MyCustomButton(props: ButtonProps) {
-  return <Button {...props} />;
-}
-```
+- **Keyboard Navigation** -- Full keyboard support for all interactive elements.
+- **Screen Reader Support** -- Proper ARIA labels and descriptions.
+- **Focus Management** -- Logical focus order and visible focus indicators.
+- **High Contrast** -- Support for high contrast themes.
+- **Reduced Motion** -- Respects the `prefers-reduced-motion` media query.
 
-### Accessibility Features
+### Keyboard Shortcuts
 
-All components follow WAI-ARIA guidelines and provide:
+| Key                 | Action                                |
+| ------------------- | ------------------------------------- |
+| `Tab` / `Shift+Tab` | Navigate between focusable elements   |
+| `Enter` / `Space`   | Activate buttons and controls         |
+| `Arrow Keys`        | Navigate within component groups      |
+| `Escape`            | Close overlays and cancel actions     |
+| `Home` / `End`      | Navigate to first/last items in lists |
 
-- **Keyboard Navigation**: Full keyboard support for all interactive elements
-- **Screen Reader Support**: Proper ARIA labels and descriptions
-- **Focus Management**: Logical focus order and visual indicators
-- **High Contrast**: Support for high contrast themes
-- **Reduced Motion**: Respects user's motion preferences
+## Browser Compatibility
 
-#### Keyboard Navigation
+`@codefast/ui` supports all modern browsers:
 
-Common keyboard shortcuts across components:
+| Browser | Version         |
+| ------- | --------------- |
+| Chrome  | Last 2 versions |
+| Firefox | Last 2 versions |
+| Safari  | Last 2 versions |
+| Edge    | Last 2 versions |
 
-- **Tab/Shift+Tab**: Navigate between focusable elements
-- **Enter/Space**: Activate buttons and controls
-- **Arrow Keys**: Navigate within component groups
-- **Escape**: Close overlays and cancel actions
-- **Home/End**: Navigate to first/last items in lists
+> Internet Explorer is not supported.
 
 ## Contributing
 
-We welcome all contributions! To get started with development:
+We welcome contributions! Please see the [contributing guide](../../README.md#contributing) in the root of this repository for detailed instructions.
 
-### Environment Setup
-
-1. Fork this repository
-2. Clone to your machine: `git clone <your-fork-url>`
-3. Install dependencies: `pnpm install`
-4. Create a new branch: `git checkout -b feature/feature-name`
-
-### Development Workflow
+For package-specific development:
 
 ```bash
-# Build all packages
-pnpm build:packages
-
-# Development mode for UI components
+# Development mode
 pnpm dev --filter=@codefast/ui
 
 # Run tests
@@ -331,41 +462,20 @@ pnpm test --filter=@codefast/ui
 
 # Run tests with coverage
 pnpm test:coverage --filter=@codefast/ui
-
-# Lint and format
-pnpm lint:fix
-pnpm format
 ```
 
 ### Adding New Components
 
-1. Create component files in `src/components/[component-name]/`
-2. Export component and types from `src/index.ts`
-3. Add comprehensive tests
-4. Update documentation
-5. Submit a pull request
+1. Create component files in `src/components/[component-name]/`.
+2. Export the component and types from the package entry point.
+3. Add comprehensive tests.
+4. Update documentation.
+5. Submit a pull request.
 
 ## License
 
 Distributed under the MIT License. See [LICENSE](../../LICENSE) for more details.
 
-## Contact
-
-- npm: [@codefast/ui](https://www.npmjs.com/package/@codefast/ui)
-- GitHub: [codefastlabs/codefast](https://github.com/codefastlabs/codefast)
-- Issues: [GitHub Issues](https://github.com/codefastlabs/codefast/issues)
-- Documentation: [Component Docs](https://codefast.dev/docs/components)
-
-## Acknowledgments
-
-This library is built on top of excellent open-source projects:
-
-- **[Radix UI](https://radix-ui.com/)** - Accessible component primitives
-- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
-- **[Lucide React](https://lucide.dev/)** - Icon library
-- **[React Hook Form](https://react-hook-form.com/)** - Form validation
-- **[Next Themes](https://github.com/pacocoursey/next-themes)** - Theme management
-
 ## Changelog
 
 See [CHANGELOG.md](./CHANGELOG.md) for a complete list of changes and version history.

package/dist/components/accordion.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentProps, JSX } from 'react';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { Slot } from '@radix-ui/react-slot';
+import type { ComponentProps, JSX } from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { Slot } from "@radix-ui/react-slot";
 type AccordionProps = ComponentProps<typeof AccordionPrimitive.Root>;
 declare function Accordion({ ...props }: AccordionProps): JSX.Element;
 type AccordionItemProps = ComponentProps<typeof AccordionPrimitive.Item>;
@@ -15,4 +15,4 @@ declare function AccordionTrigger({ children, className, ...props }: AccordionTr
 type AccordionContentProps = ComponentProps<typeof AccordionPrimitive.Content>;
 declare function AccordionContent({ children, className, ...props }: AccordionContentProps): JSX.Element;
 export { Accordion, AccordionContent, AccordionIcon, AccordionItem, AccordionTrigger };
-export type { AccordionContentProps, AccordionIconProps, AccordionItemProps, AccordionProps, AccordionTriggerProps };
+export type { AccordionContentProps, AccordionIconProps, AccordionItemProps, AccordionProps, AccordionTriggerProps, };

package/dist/components/accordion.js

@@ -12,7 +12,7 @@ function Accordion({ ...props }) {
 }
 function AccordionItem({ className, ...props }) {
     return /*#__PURE__*/ jsx(Item, {
-        className: cn('border-b last:border-b-0', className),
+        className: cn("border-b last:border-b-0", className),
         "data-slot": "accordion-item",
         ...props
     });
@@ -21,7 +21,7 @@ function AccordionIcon({ asChild, className, ...props }) {
     const Component = asChild ? Slot : ChevronDownIcon;
     return /*#__PURE__*/ jsx(Component, {
         "aria-hidden": true,
-        className: cn('text-muted-foreground size-4 shrink-0 translate-y-0.5 transition-transform duration-200', className),
+        className: cn("size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200", className),
         "data-slot": "accordion-icon",
         ...props
     });
@@ -31,7 +31,7 @@ function AccordionTrigger({ children, className, ...props }) {
         className: "flex",
         "data-slot": "accordion-trigger-wrapper",
         children: /*#__PURE__*/ jsx(Trigger, {
-            className: cn('focus-visible:ring-ring/50 group/accordion-trigger flex grow items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-hidden hover:not-disabled:underline focus-visible:ring-3 disabled:opacity-50 [&[data-state=open]>svg]:rotate-180', className),
+            className: cn("group/accordion-trigger flex grow items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-hidden hover:not-disabled:underline focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-50 [&[data-state=open]>svg]:rotate-180", className),
             "data-slot": "accordion-trigger",
             ...props,
             children: children
@@ -40,11 +40,11 @@ function AccordionTrigger({ children, className, ...props }) {
 }
 function AccordionContent({ children, className, ...props }) {
     return /*#__PURE__*/ jsx(Content, {
-        className: "data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden",
+        className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
         "data-slot": "accordion-content",
         ...props,
         children: /*#__PURE__*/ jsx("div", {
-            className: cn('pt-0 pb-4 text-sm', className),
+            className: cn("pt-0 pb-4 text-sm", className),
             children: children
         })
     });