adminium 1.0.1 → 1.0.3

package/README.md

@@ -1,21 +1,33 @@
-# @metronic/ui
+# Adminium
 
-A beautiful, reusable React component library built with Tailwind CSS, based on
-the Metronic theme design system.
+A beautiful, reusable React component library built with Tailwind CSS v4, 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
+- 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
+- CVA Variants - Type-safe component variants with Class Variance Authority
+
+## Tech Stack
+
+- React 19+ / TypeScript 5.8
+- Tailwind CSS v4 (CSS variables approach)
+- Radix UI primitives
+- Storybook 10 with Vitest integration
+- TSUP for bundling
+- Next.js 16 for demo app
 
 ## Installation
 
 ```bash
-npm install @metronic/ui
+npm install adminium
+# or
+yarn add adminium
 ```
 
 ### Peer Dependencies
@@ -28,19 +40,22 @@ npm install react react-dom tailwindcss
 
 ## Quick Start
 
-### 1. Import the theme CSS
+### 1. Import styles (choose one approach)
 
-Add the theme CSS to your global styles or root layout:
+If your app already uses Tailwind (recommended), import the library styles into
+your global CSS so Tailwind can generate both your app utilities and the library
+utilities:
 
-```tsx
-// In your root layout or _app.tsx
-import "@metronic/ui/styles";
+```css
+@import "tailwindcss";
+@import "adminium/styles/global.css";
 ```
 
-Or import directly in your CSS:
+If you do not use Tailwind in the host app, import the precompiled CSS instead
+(your app won't have Tailwind utilities like `lg:flex`):
 
-```css
-@import "@metronic/ui/src/styles/theme.css";
+```tsx
+import "adminium/styles/adminium.css";
 ```
 
 ### 2. Use the components
@@ -53,7 +68,7 @@ import {
   CardTitle,
   CardContent,
   Badge,
-} from "@metronic/ui";
+} from "adminium";
 
 function App() {
   return (
@@ -62,7 +77,7 @@ function App() {
         <CardTitle>Welcome</CardTitle>
       </CardHeader>
       <CardContent>
-        <p>Hello from Metronic UI!</p>
+        <p>Hello from Adminium UI!</p>
         <Button variant="primary" size="md">
           Get Started
         </Button>
@@ -117,7 +132,7 @@ function App() {
 ## Hooks
 
 ```tsx
-import { useIsMobile, useCopyToClipboard, useMounted } from "@metronic/ui";
+import { useIsMobile, useCopyToClipboard, useMounted } from "adminium";
 
 // Detect mobile viewport
 const isMobile = useIsMobile();
@@ -132,7 +147,7 @@ const mounted = useMounted();
 ## Utility Functions
 
 ```tsx
-import { cn } from "@metronic/ui";
+import { cn } from "adminium";
 
 // Merge Tailwind classes intelligently
 const className = cn("bg-primary text-white", isActive && "ring-2", className);
@@ -159,19 +174,56 @@ The library uses CSS custom properties for theming. Override them in your CSS:
 }
 ```
 
-## Building the Package
+## Development
 
-```bash
-# Install dependencies
-npm install
+### Commands
 
-# Build the package
-npm run build
+```bash
+yarn run dev          # Start Next.js development server
+yarn run dev:lib      # Watch mode for library development
+yarn run build        # Build library (tsup + PostCSS for CSS)
+yarn run storybook    # Start Storybook dev server on port 6006
+yarn run lint         # Run ESLint
+yarn run format       # Format with Prettier
+yarn run typecheck    # TypeScript type checking
+```
 
-# Development mode with watch
-npm run dev
+### Folder Structure
+
+```text
+src/
+├── components/
+│   ├── Button/
+│   │   ├── button.tsx           # Component implementation
+│   │   └── Button.stories.ts    # Storybook stories
+│   ├── Card/
+│   │   ├── Card.tsx
+│   │   └── Card.stories.tsx
+│   ├── [ComponentName]/         # Each component follows this pattern
+│   └── index.ts                 # Barrel export for all components
+├── hooks/
+│   ├── use-mobile.tsx
+│   ├── use-copy-to-clipboard.ts
+│   ├── use-mounted.ts
+│   └── index.ts
+├── lib/
+│   └── utils.ts                 # cn() utility
+├── styles/
+│   ├── global.css               # Main CSS entry
+│   └── config.reui.css          # Theme CSS variables
+└── index.ts                     # Main library entry point
 ```
 
+### Build Output
+
+- **ESM**: `dist/index.js`
+- **CJS**: `dist/index.cjs`
+- **Types**: `dist/index.d.ts`
+- **CSS**: `dist/styles/adminium.css`
+
+The build automatically adds `"use client"` directive to the bundled output for
+Next.js compatibility.
+
 ## License
 
 MIT