@srcroot/ui 1.0.2 → 1.0.5

package/README.md

@@ -1,143 +1,39 @@
 # @srcroot/ui
 
-A lightweight UI library with polymorphic, accessible React components for Next.js, Vite, and other React frameworks.
-
-## Features
-
-- **Framework-Aware**: Automatically detects Next.js or Vite and uses optimized component variants
-- **Polymorphic**: Most components support an `as` prop to change the underlying HTML element
-- **Accessible**: Built on standard HTML elements and WAI-ARIA patterns
-- **Copy/Paste**: Components are copied directly into your project — you own the code
-- **Styled**: Beautiful defaults using Tailwind CSS and `class-variance-authority`
-- **Zero Runtime Dependencies**: No library bundle — just copy what you need
+UI components for Next.js and Vite. Copy-paste into your project.
 
 ## Install
 
 ```bash
+# npm
 npx @srcroot/ui init
+
+# yarn
+yarn dlx @srcroot/ui init
+
+# pnpm
+pnpm dlx @srcroot/ui init
+
+# bun
+bunx @srcroot/ui init
+
+# deno
+deno run -A npm:@srcroot/ui init
 ```
 
 ## Add Components
 
 ```bash
-# Interactive mode
+# Interactive
 npx @srcroot/ui add
 
 # Specific components
 npx @srcroot/ui add button card input
 
-# Add all components
+# All components
 npx @srcroot/ui add --all
 ```
 
-## Supported Package Managers
-
-The CLI automatically detects and uses your package manager:
-
-| Manager | Command |
-|---------|---------|
-| npm | `npm install` |
-| Yarn | `yarn add` |
-| pnpm | `pnpm add` |
-| Bun | `bun add` |
-| Deno | `deno add -A` |
-
-## Framework Detection
-
-| Framework | Detection | Notes |
-|-----------|-----------|-------|
-| Next.js | `next.config.ts/js/mjs` or `src/app` | Uses `next/script` for analytics |
-| Vite | `vite.config.ts/js/mjs` | Uses `useEffect` for analytics, localStorage for themes |
-
-## Components
-
-### Analytics
-- `google-analytics` - Google Analytics 4 integration
-- `google-tag-manager` - Google Tag Manager container
-- `meta-pixel` - Meta/Facebook Pixel tracking
-- `microsoft-clarity` - Microsoft Clarity analytics
-- `tiktok-pixel` - TikTok Pixel tracking
-
-### Core
-- `button` - Polymorphic button with variants
-- `badge` - Status indicators
-- `avatar` - User profile images with fallbacks
-- `separator` - Visual divider
-- `button-group` - Attached or spaced button sets
-- `slot` - Polymorphic slot for component composition
-
-### Forms
-- `input` - Basic text input
-- `textarea` - Multi-line text input
-- `checkbox` - Toggle selection
-- `radio` - Single selection from list
-- `switch` - Toggle switch
-- `select` - Dropdown selection
-- `slider` - Range input
-- `otp-input` - One-time password verification
-- `search` - Search input with debounce
-- `calendar` - Date and range picker
-- `date-picker` - Date selection component
-- `form-field` - Form field wrapper with label and validation
-- `input-group` - Input with attached elements
-
-### Layout
-- `card` - Content container with header/content/footer
-- `container` - Centered layout wrapper
-- `aspect-ratio` - Maintain element proportions
-- `resizable` - Resizable panel groups
-
-### Data Display
-- `text` - Polymorphic typography
-- `label` - Accessible form label
-- `table` - Responsive data table
-- `table-of-contents` - Auto-generated TOC
-- `accordion` - Collapsible content sections
-- `collapsible` - Expandable panel
-- `tabs` - Tabbed content switcher
-- `progress` - Progress bar
-- `skeleton` - Loading placeholder
-- `image` - Enhanced image with fallback
-- `carousel` - Content slider with autoplay
-- `marquee` - Scrolling marquee animation
-
-### Feedback
-- `loading-spinner` - SVG spinner with variants
-- `star-rating` - Interactive rating component
-- `toast` - Transient notifications
-- `alert` - Critical information banner
-- `scroll-to-top` - Scroll to top button
-- `scroll-animation` - Scroll-triggered animations
-
-### Overlays
-- `dialog` - Modal dialog
-- `alert-dialog` - Modal for confirming actions
-- `sheet` - Side-panel overlay
-- `popover` - Content appearing over trigger
-- `tooltip` - Hover information
-- `dropdown-menu` - Menu for actions/navigation
-- `context-menu` - Right-click context menu
-
-### Navigation
-- `breadcrumb` - Navigation trail
-- `pagination` - Page navigation controls
-- `sidebar` - Collapsible sidebar with navigation
-- `menubar` - Menu bar component
-
-### Specialized
-- `chatbot` - Chat interface widget
-- `chart` - Recharts-based chart component
-- `map` - Google Maps embed
-- `combobox` - Searchable dropdown (Command menu pattern)
-- `command` - Command menu (Cmd+k style)
-- `file-upload` - Drag-and-drop file upload
-- `hover-card` - Hover-triggered card
-- `native-select` - Native select wrapper
-- `patterns` - Decorative background patterns
-- `theme-switcher` - Light/dark/system theme toggle
-- `whatsapp` - WhatsApp floating button
-- `floating-dock` - macOS-style floating dock
-
 ## Usage
 
 ```tsx
@@ -158,23 +54,40 @@ export default function Home() {
 }
 ```
 
-## Polymorphism
+## Components
 
-Components accept an `as` prop to change the underlying HTML element:
+**Analytics:** google-analytics, google-tag-manager, meta-pixel, microsoft-clarity, tiktok-pixel
 
-```tsx
-<Button as="a" href="/login">Login</Button>
+**Core:** button, badge, avatar, separator, button-group, slot
 
-<Text as="h1" variant="h1">Page Title</Text>
-```
+**Forms:** input, textarea, checkbox, radio, switch, select, slider, otp-input, search, calendar, date-picker, form-field, input-group
+
+**Layout:** card, container, aspect-ratio, resizable
+
+**Data Display:** text, label, table, table-of-contents, accordion, collapsible, tabs, progress, skeleton, image, carousel, marquee
+
+**Feedback:** loading-spinner, star-rating, toast, alert, scroll-to-top, scroll-animation
+
+**Overlays:** dialog, alert-dialog, sheet, popover, tooltip, dropdown-menu, context-menu
+
+**Navigation:** breadcrumb, pagination, sidebar, menubar
+
+**Specialized:** chatbot, chart, map, combobox, command, file-upload, hover-card, native-select, patterns, theme-switcher, whatsapp, floating-dock
+
+## Features
+
+- **Framework-aware** — auto-detects Next.js (uses `next/script`) or Vite (uses `useEffect`)
+- **Polymorphic** — use `as` prop to change the HTML element: `<Button as="a" href="/">`
+- **Accessible** — built on WAI-ARIA patterns
+- **No bundle** — components live in your project
 
-## CLI Reference
+## CLI
 
 ```bash
-npx @srcroot/ui init          Initialize project structure
-npx @srcroot/ui add [comps]   Add component(s)
+npx @srcroot/ui init          Setup project
+npx @srcroot/ui add [comps]   Add components
 npx @srcroot/ui add --all     Add all components
-npx @srcroot/ui list          List available components
+npx @srcroot/ui list          List all components
 ```
 
 ## License

package/dist/index.js

@@ -971,12 +971,11 @@ var ComponentAdder = class {
     return "unknown";
   }
   transformForVite(name, content) {
-    content = content.replace(/^"use client"[;\n\r]*/m, "");
-    content = content.replace(/import\s*{\s*useTheme\s*}\s*from\s*"next-themes"\s*;?\n?/g, "");
-    content = content.replace(/import\s*{\s*ThemeProvider\s*}\s*from\s*"next-themes"\s*;?\n?/g, "");
-    content = content.replace(/import\s*{\s*cn\s*}\s*from\s*"@\/lib\/utils"\s*;?\n?/g, 'import { cn } from "../../lib/utils"\n');
-    content = content.replace(/import\s*{\s*Slot\s*}\s*from\s*"@\/components\/ui\/slot"\s*;?\n?/g, 'import { Slot } from "./slot"\n');
-    const otherUiImports = [
+    content = content.replace(/^["']use client["'];?\r?\n?/m, "");
+    content = content.replace(/import\s*\{[^}]*\}\s*from\s*["']next-themes["'];?\r?\n?/g, "");
+    content = content.replace(/import\s*\{[^}]*\}\s*from\s*["']@\/lib\/utils["'];?\r?\n?/g, 'import { cn } from "../../lib/utils"\n');
+    content = content.replace(/import\s*\{[^}]*\}\s*from\s*["']@\/components\/ui\/slot["'];?\r?\n?/g, 'import { Slot } from "./slot"\n');
+    const allComponents = [
       "accordion",
       "alert-dialog",
       "alert",
@@ -1046,9 +1045,8 @@ var ComponentAdder = class {
       "tooltip",
       "whatsapp"
     ];
-    for (const comp of otherUiImports) {
-      const regex = new RegExp(`from\\s+"@/components/ui/${comp}"`, "g");
-      content = content.replace(regex, `from "./${comp}"`);
+    for (const comp of allComponents) {
+      content = content.replace(new RegExp(`from\\s+["']@/components/ui/${comp}["']`, "g"), `from "./${comp}"`);
     }
     return content.trimStart();
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "A UI library with polymorphic, accessible React components",
   "author": "Shifaul Islam",
   "license": "MIT",
@@ -14,7 +14,8 @@
   },
   "files": [
     "dist",
-    "src/registry"
+    "src/registry",
+    "README.md"
   ],
   "keywords": [
     "react",