@srcroot/ui 1.0.4 → 1.0.5

package/README.md

@@ -1,20 +1,9 @@
 # @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
 
-Initialize your project with `@srcroot/ui`:
-
 ```bash
 # npm
 npx @srcroot/ui init
@@ -34,143 +23,17 @@ deno run -A npm:@srcroot/ui init
 
 ## Add Components
 
-Add components to your project:
-
 ```bash
-# npm
+# Interactive
 npx @srcroot/ui add
-npx @srcroot/ui add button card input
-npx @srcroot/ui add --all
-
-# yarn
-yarn dlx @srcroot/ui add
-yarn dlx @srcroot/ui add button card input
-yarn dlx @srcroot/ui add --all
-
-# pnpm
-pnpm dlx @srcroot/ui add
-pnpm dlx @srcroot/ui add button card input
-pnpm dlx @srcroot/ui add --all
 
-# bun
-bunx @srcroot/ui add
-bunx @srcroot/ui add button card input
-bunx @srcroot/ui add --all
+# Specific components
+npx @srcroot/ui add button card input
 
-# deno
-deno run -A npm:@srcroot/ui add
-deno run -A npm:@srcroot/ui add button card input
-deno run -A npm:@srcroot/ui add --all
+# 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
@@ -191,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "1.0.4",
+  "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",