adminium 1.0.1-beta.7 → 1.0.1-patch.0

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
@@ -46,9 +58,6 @@ If you do not use Tailwind in the host app, import the precompiled CSS instead
 import "adminium/styles/adminium.css";
 ```
 
-If you need style isolation later, we can reintroduce a scoped build that
-prefixes selectors with a wrapper class.
-
 ### 2. Use the components
 
 ```tsx
@@ -123,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();
@@ -138,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);
@@ -165,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

package/dist/styles/adminium.css

@@ -369,6 +369,9 @@
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminium",
-  "version": "1.0.1-beta.7",
+  "version": "1.0.1-patch.0",
   "description": "Metronic UI Component Library - A beautiful, reusable React component library built with Tailwind CSS",
   "author": "linkedunion",
   "license": "MIT",