shad-m 1.0.0

package/README.md

@@ -0,0 +1,260 @@
+# CBP UI
+
+A comprehensive React UI component library built with shadcn/ui, Radix UI primitives, and Tailwind CSS. This package provides a collection of reusable, accessible, and customizable components for modern web applications.
+
+## Features
+
+- 🎨 **Modern Design System** - Built with Tailwind CSS and CSS variables for easy theming
+- ♿ **Accessibility First** - Components built on Radix UI primitives for excellent accessibility
+- 🔧 **Fully Customizable** - Easy to customize with Tailwind CSS and CSS variables
+- 📦 **Tree Shakable** - Import only what you need
+- 🎯 **TypeScript Ready** - Full TypeScript support with type definitions
+- 🌙 **Dark Mode Support** - Built-in dark mode support with next-themes
+- 📱 **Mobile Responsive** - Mobile-first responsive design
+
+## Installation
+
+```bash
+npm install @repo/ui
+# or
+yarn add @repo/ui
+# or
+pnpm add @repo/ui
+```
+
+## Setup
+
+### 1. Install peer dependencies
+
+```bash
+npm install react react-dom
+```
+
+### 2. Add Tailwind CSS configuration
+
+Import the Tailwind config in your `tailwind.config.js`:
+
+```js
+// tailwind.config.js
+import { config } from '@repo/ui/tailwind.config';
+
+export default {
+  ...config,
+  content: ['./src/**/*.{js,ts,jsx,tsx}', './node_modules/@repo/ui/src/**/*.{js,ts,jsx,tsx}'],
+};
+```
+
+### 3. Add global styles
+
+Import the global CSS in your main CSS file or app entry point:
+
+```css
+@import '@repo/ui/globals.css';
+```
+
+### 4. Configure providers
+
+Wrap your app with the UI system provider:
+
+```tsx
+import { UISystemProvider } from '@repo/ui/providers';
+
+function App() {
+  return <UISystemProvider>{/* Your app content */}</UISystemProvider>;
+}
+```
+
+## Usage
+
+### Basic Components
+
+```tsx
+import { Button } from '@repo/ui/components/button';
+import { Input } from '@repo/ui/components/input';
+import { Card, CardContent, CardHeader, CardTitle } from '@repo/ui/components/card';
+
+function MyComponent() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Welcome</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          <Input placeholder="Enter your name" />
+          <Button>Get Started</Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+### Form Components
+
+```tsx
+import { EmailField } from '@repo/ui/common/forms/email-field';
+import { PasswordField } from '@repo/ui/common/forms/password-field';
+import { SwitchField } from '@repo/ui/common/forms/switch-field';
+
+function LoginForm() {
+  return (
+    <form className="space-y-4">
+      <EmailField label="Email" name="email" />
+      <PasswordField label="Password" name="password" />
+      <SwitchField label="Remember me" name="remember" />
+    </form>
+  );
+}
+```
+
+### Interactive Components
+
+```tsx
+import { Pressable } from '@repo/ui/common/interactive';
+
+function InteractiveExample() {
+  return (
+    <Pressable trackingName="example" onClick={() => console.log('Pressed!')}>
+      <div className="rounded bg-blue-500 p-4 text-white">Click me</div>
+    </Pressable>
+  );
+}
+```
+
+### Page Components
+
+```tsx
+import { Page404 } from '@repo/ui/common/pages/page-404';
+import { Page500 } from '@repo/ui/common/pages/page-500';
+
+// Use in your error boundaries or routing
+function NotFoundPage() {
+  return <Page404 />;
+}
+
+function ErrorPage() {
+  return <Page500 />;
+}
+```
+
+## Available Components
+
+### UI Components
+
+- **Layout**: Card, Separator, Aspect Ratio, Resizable
+- **Navigation**: Breadcrumb, Navigation Menu, Menubar, Pagination
+- **Forms**: Input, Textarea, Select, Checkbox, Radio Group, Switch, Form, Label
+- **Feedback**: Alert, Alert Dialog, Toast (Sonner), Progress, Spinner, Skeleton
+- **Overlay**: Dialog, Sheet, Drawer, Popover, Hover Card, Tooltip, Context Menu, Dropdown Menu
+- **Data Display**: Table, Badge, Avatar, Calendar, Chart
+- **Interactive**: Button, Toggle, Toggle Group, Accordion, Collapsible, Tabs, Carousel
+- **Input**: Input OTP, Slider, Command
+- **Layout**: Sidebar, Scroll Area
+
+### Common Components
+
+- **Forms**: Email Field, Password Field, Switch Field, Form Input Field
+- **Interactive**: Pressable
+- **Display**: Display HTML String
+- **Pages**: 404 Error Page, 500 Error Page
+
+### Hooks
+
+- `use-mobile`: Responsive mobile detection hook
+
+### Utilities
+
+- `utils`: Utility functions for className merging and component variants
+- `types`: Common TypeScript type definitions
+
+## Theming
+
+The component library uses CSS variables for theming. You can customize the theme by overriding CSS variables in your global styles:
+
+```css
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  /* ... other variables */
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  /* ... other variables */
+}
+```
+
+## Development
+
+### Scripts
+
+```bash
+# Add new shadcn/ui components
+pnpm ui add <component-name>
+
+# Lint the code
+pnpm lint
+
+# Clean build artifacts
+pnpm clean
+```
+
+### Adding New Components
+
+This library uses shadcn/ui as the foundation. To add new components:
+
+```bash
+pnpm ui add <component-name>
+```
+
+This will add the component to the `src/components` directory with proper configuration.
+
+## Dependencies
+
+### Core Dependencies
+
+- **React 18+** - React library
+- **Radix UI** - Unstyled, accessible UI primitives
+- **Tailwind CSS** - Utility-first CSS framework
+- **Class Variance Authority** - Component variant management
+- **Tailwind Merge** - Intelligent Tailwind class merging
+
+### Additional Libraries
+
+- **Lucide React** - Icon library
+- **React Hook Form** - Form management
+- **Zod** - Schema validation
+- **Date-fns** - Date utility library
+- **Next Themes** - Theme management
+- **Recharts** - Chart library
+- **Sonner** - Toast notifications
+
+## Browser Support
+
+This library supports all modern browsers that support ES2015+ and React 18.
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests if applicable
+5. Submit a pull request
+
+## License
+
+This project is private and proprietary.
+
+## Version
+
+Current version: 0.0.0
+
+---
+
+For more detailed documentation on individual components, please refer to the component files in the `src/components` directory.