adminium 1.0.0

package/README.md

@@ -0,0 +1,177 @@
+# @metronic/ui
+
+A beautiful, reusable React component library built with Tailwind CSS, based on
+the Metronic theme design system.
+
+## Features
+
+- 🎨 **25+ UI Components** - Buttons, Cards, Dialogs, Forms, Tables, and more
+- 🌙 **Dark Mode Support** - Built-in light and dark mode theming
+- 📦 **Tree Shakeable** - Only import what you need
+- 💪 **TypeScript** - Full type definitions included
+- 🎯 **Tailwind CSS v4** - Modern CSS with CSS variables
+- ⚡ **Radix UI Primitives** - Accessible and unstyled components
+
+## Installation
+
+```bash
+npm install @metronic/ui
+```
+
+### Peer Dependencies
+
+Make sure you have the following peer dependencies installed:
+
+```bash
+npm install react react-dom tailwindcss
+```
+
+## Quick Start
+
+### 1. Import the theme CSS
+
+Add the theme CSS to your global styles or root layout:
+
+```tsx
+// In your root layout or _app.tsx
+import "@metronic/ui/styles";
+```
+
+Or import directly in your CSS:
+
+```css
+@import "@metronic/ui/src/styles/theme.css";
+```
+
+### 2. Use the components
+
+```tsx
+import {
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Badge,
+} from "@metronic/ui";
+
+function App() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Welcome</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p>Hello from Metronic UI!</p>
+        <Button variant="primary" size="md">
+          Get Started
+        </Button>
+        <Badge variant="success" appearance="light">
+          New
+        </Badge>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+## Components
+
+### Form Components
+
+- `Button` - Buttons with multiple variants and sizes
+- `Input` - Text inputs with addons and grouping
+- `Textarea` - Multi-line text input
+- `Checkbox` - Checkbox with indeterminate state
+- `RadioGroup` - Radio button groups
+- `Select` - Dropdown select with search
+- `Switch` - Toggle switch
+- `Slider` - Range slider
+- `Label` - Form labels
+
+### Layout Components
+
+- `Card` - Content container with header/footer
+- `Separator` - Visual dividers
+- `Tabs` - Tab navigation
+- `Accordion` - Collapsible content sections
+- `ScrollArea` - Custom scrollbar container
+
+### Overlay Components
+
+- `Dialog` - Modal dialogs
+- `Popover` - Floating content
+- `Tooltip` - Hover tooltips
+- `DropdownMenu` - Context menus
+
+### Display Components
+
+- `Badge` - Status indicators
+- `Avatar` - User avatars
+- `Alert` - Feedback messages
+- `Progress` - Progress indicators
+- `Skeleton` - Loading placeholders
+- `Table` - Data tables
+- `Breadcrumb` - Navigation breadcrumbs
+
+## Hooks
+
+```tsx
+import { useIsMobile, useCopyToClipboard, useMounted } from "@metronic/ui";
+
+// Detect mobile viewport
+const isMobile = useIsMobile();
+
+// Copy to clipboard with feedback
+const { isCopied, copyToClipboard } = useCopyToClipboard();
+
+// Track component mount state
+const mounted = useMounted();
+```
+
+## Utility Functions
+
+```tsx
+import { cn } from "@metronic/ui";
+
+// Merge Tailwind classes intelligently
+const className = cn("bg-primary text-white", isActive && "ring-2", className);
+```
+
+## Theming
+
+The library uses CSS custom properties for theming. Override them in your CSS:
+
+```css
+:root {
+  --primary: hsl(220, 90%, 56%);
+  --primary-foreground: hsl(0, 0%, 100%);
+  --background: hsl(0, 0%, 100%);
+  --foreground: hsl(240, 10%, 3.9%);
+  /* ... more variables */
+}
+
+.dark {
+  --primary: hsl(220, 90%, 56%);
+  --primary-foreground: hsl(0, 0%, 100%);
+  --background: hsl(240, 10%, 3.9%);
+  --foreground: hsl(0, 0%, 98%);
+}
+```
+
+## Building the Package
+
+```bash
+# Install dependencies
+npm install
+
+# Build the package
+npm run build
+
+# Development mode with watch
+npm run dev
+```
+
+## License
+
+MIT