@srcroot/ui 0.0.55 → 0.0.56

package/README.md

@@ -1,151 +1,151 @@
-# @srcroot/ui
-
-A UI library with polymorphic, accessible React components.
-This library provides a collection of re-usable components that you can copy and paste into your apps.
-
-## Features
-
-- **Polymorphic**: Most components support an `as` prop (e.g., render a `Button` as an `a` tag).
-- **Accessible**: Built on standard HTML elements and WAI-ARIA patterns.
-- **Copy/Paste**: Not a dependency you install, but code you own.
-- **Styled**: Beautiful defaults using Tailwind CSS and `class-variance-authority`.
-
-## Installation
-
-This library is distributed via a CLI that initializes your project and adds components directly to your source code.
-
-### 1. Initialize
-
-Run the `init` command to set up the necessary dependencies and structural files (like `cn` utility) in your project.
-
-```bash
-npx @srcroot/ui init
-```
-
-This will ask a few questions to configure your project structure (e.g., where to put components).
-
-### 2. Add Components
-
-Use the `add` command to install components. You can do this in three ways:
-
-**Interactive Mode:**
-Run without arguments to select components from a list.
-```bash
-npx @srcroot/ui add
-```
-
-**Specific Components:**
-Add one or more components by name.
-```bash
-npx @srcroot/ui add button card input
-```
-
-**Add All:**
-Install every available component at once.
-```bash
-npx @srcroot/ui add --all
-```
-
-This will copy the component files to your `components/ui` directory and install any necessary peer dependencies (like `react-icons` or `clsx`).
-
-### 3. Usage
-
-Import components directly from your project folder:
-
-```tsx
-import { Button } from "@/components/ui/button"
-
-export default function Home() {
-  return (
-    <Button variant="destructive" onClick={() => alert("Clicked!")}>
-      Click Me
-    </Button>
-  )
-}
-```
-
-## Available Components
-
-run `npx @srcroot/ui list` to see all available components.
-
-### 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.
-
-### 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 support.
-- `calendar` - Date and range picker.
-
-### Layout
-- `card` - Content container with header/content/footer.
-- `container` - Centered layout wrapper.
-- `aspect-ratio` - Maintain element proportions.
-
-### Data Display
-- `text` - Polymorphic typography component.
-- `label` - Accessible form label.
-- `table` - Responsive data table.
-- `accordion` - Collapsible content sections.
-- `collapsible` - Expandable panel.
-- `tabs` - Tabbed content switcher.
-- `progress` - Progress bar.
-- `skeleton` - Loading placeholder state.
-- `image` - Enhanced img with fallback and loading state.
-- `carousel` - Content slider with autoplay.
-
-### Feedback
-- `loading-spinner` - SVG spinner with variants.
-- `star-rating` - Interactive rating component.
-- `toast` - Transient notifications.
-- `alert` - Critical information banner.
-
-### 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.
-
-### Navigation
-- `breadcrumb` - Navigation trail.
-- `pagination` - Page navigation controls.
-
-## Polymorphism
-
-Our components accept an `as` prop to change the underlying HTML element while maintaining styles and behavior.
-
-```tsx
-// Renders as an <a> tag but looks like a button
-<Button as="a" href="/login">
-  Login
-</Button>
-
-// Renders as a specialized text variant
-<Text as="h1" variant="h1">
-  Page Title
-</Text>
-```
-
-## Local Development
-
-To run the documentation/playground locally:
-
-```bash
-cd examples/playground
-npm install
-npm run dev
-```
-
-Visit `http://localhost:3001` to view the component showcase.
+# @srcroot/ui
+
+A UI library with polymorphic, accessible React components.
+This library provides a collection of re-usable components that you can copy and paste into your apps.
+
+## Features
+
+- **Polymorphic**: Most components support an `as` prop (e.g., render a `Button` as an `a` tag).
+- **Accessible**: Built on standard HTML elements and WAI-ARIA patterns.
+- **Copy/Paste**: Not a dependency you install, but code you own.
+- **Styled**: Beautiful defaults using Tailwind CSS and `class-variance-authority`.
+
+## Installation
+
+This library is distributed via a CLI that initializes your project and adds components directly to your source code.
+
+### 1. Initialize
+
+Run the `init` command to set up the necessary dependencies and structural files (like `cn` utility) in your project.
+
+```bash
+npx @srcroot/ui init
+```
+
+This will ask a few questions to configure your project structure (e.g., where to put components).
+
+### 2. Add Components
+
+Use the `add` command to install components. You can do this in three ways:
+
+**Interactive Mode:**
+Run without arguments to select components from a list.
+```bash
+npx @srcroot/ui add
+```
+
+**Specific Components:**
+Add one or more components by name.
+```bash
+npx @srcroot/ui add button card input
+```
+
+**Add All:**
+Install every available component at once.
+```bash
+npx @srcroot/ui add --all
+```
+
+This will copy the component files to your `components/ui` directory and install any necessary peer dependencies (like `react-icons` or `clsx`).
+
+### 3. Usage
+
+Import components directly from your project folder:
+
+```tsx
+import { Button } from "@/components/ui/button"
+
+export default function Home() {
+  return (
+    <Button variant="destructive" onClick={() => alert("Clicked!")}>
+      Click Me
+    </Button>
+  )
+}
+```
+
+## Available Components
+
+run `npx @srcroot/ui list` to see all available components.
+
+### 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.
+
+### 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 support.
+- `calendar` - Date and range picker.
+
+### Layout
+- `card` - Content container with header/content/footer.
+- `container` - Centered layout wrapper.
+- `aspect-ratio` - Maintain element proportions.
+
+### Data Display
+- `text` - Polymorphic typography component.
+- `label` - Accessible form label.
+- `table` - Responsive data table.
+- `accordion` - Collapsible content sections.
+- `collapsible` - Expandable panel.
+- `tabs` - Tabbed content switcher.
+- `progress` - Progress bar.
+- `skeleton` - Loading placeholder state.
+- `image` - Enhanced img with fallback and loading state.
+- `carousel` - Content slider with autoplay.
+
+### Feedback
+- `loading-spinner` - SVG spinner with variants.
+- `star-rating` - Interactive rating component.
+- `toast` - Transient notifications.
+- `alert` - Critical information banner.
+
+### 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.
+
+### Navigation
+- `breadcrumb` - Navigation trail.
+- `pagination` - Page navigation controls.
+
+## Polymorphism
+
+Our components accept an `as` prop to change the underlying HTML element while maintaining styles and behavior.
+
+```tsx
+// Renders as an <a> tag but looks like a button
+<Button as="a" href="/login">
+  Login
+</Button>
+
+// Renders as a specialized text variant
+<Text as="h1" variant="h1">
+  Page Title
+</Text>
+```
+
+## Local Development
+
+To run the documentation/playground locally:
+
+```bash
+cd examples/playground
+npm install
+npm run dev
+```
+
+Visit `http://localhost:3001` to view the component showcase.

package/dist/index.js

@@ -696,7 +696,8 @@ var REGISTRY = {
     file: "ui/file-upload.tsx",
     description: "Drag-and-drop file upload",
     category: "Forms",
-    dependencies: ["button"]
+    dependencies: ["button"],
+    registryDependencies: ["react-dropzone", "react-icons"]
   },
   "hover-card": {
     file: "ui/hover-card.tsx",
@@ -801,43 +802,58 @@ var REGISTRY = {
     category: "Navigation",
     dependencies: []
   },
+  map: {
+    file: "ui/map.tsx",
+    description: "Interactive map with Leaflet/Google",
+    category: "Data Display",
+    dependencies: [],
+    registryDependencies: ["leaflet", "react-leaflet"]
+  },
   "empty-state": {
     file: "ui/empty-state.tsx",
-    description: "Placeholder for empty states",
-    category: "Feedback",
+    description: "Placeholder for empty data",
+    category: "Data Display",
     dependencies: []
   },
   "floating-dock": {
     file: "ui/floating-dock.tsx",
-    description: "Floating action container",
-    category: "Layout",
-    dependencies: []
-  },
-  "map": {
-    file: "ui/map.tsx",
-    description: "Leaflet/Google map integration",
-    category: "Data Display",
+    description: "Mac-style floating dock",
+    category: "Navigation",
     dependencies: [],
-    registryDependencies: ["react-leaflet", "leaflet"]
+    registryDependencies: ["framer-motion"]
   },
   marquee: {
     file: "ui/marquee.tsx",
-    description: "Scrolling marquee text",
+    description: "Infinite scrolling marquee",
     category: "Data Display",
     dependencies: []
   },
   "scroll-to-top": {
     file: "ui/scroll-to-top.tsx",
-    description: "Scroll to top button",
+    description: "Button to scroll to top",
     category: "Navigation",
-    dependencies: ["button"]
+    dependencies: ["button"],
+    registryDependencies: ["framer-motion"]
+  },
+  "scroll-animation": {
+    file: "ui/scroll-animation.tsx",
+    description: "Scroll-triggered animations",
+    category: "Layout",
+    dependencies: [],
+    registryDependencies: ["framer-motion"]
   },
   whatsapp: {
     file: "ui/whatsapp.tsx",
-    description: "WhatsApp floating button",
-    category: "Feedback",
+    description: "WhatsApp chat button",
+    category: "Data Display",
     dependencies: ["button"],
     registryDependencies: ["react-icons"]
+  },
+  patterns: {
+    file: "ui/patterns.tsx",
+    description: "Background patterns",
+    category: "Layout",
+    dependencies: []
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "description": "A UI library with polymorphic, accessible React components",
   "author": "Shifaul Islam",
   "license": "MIT",
@@ -34,15 +34,18 @@
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
+    "@types/leaflet": "^1.9.21",
     "@types/node": "^22.10.1",
     "@types/prompts": "^2.4.9",
     "@types/react": "^19.2.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
+    "leaflet": "^1.9.4",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-icons": "^5.5.0",
+    "react-leaflet": "^5.0.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^3.0.0 || ^4.0.0",
     "tailwindcss-animate": "^1.0.7",
@@ -54,9 +57,11 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
+    "leaflet": "^1.9.4",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-icons": "^5.5.0",
+    "react-leaflet": "^4.2.1",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^3.0.0 || ^4.0.0",
     "tailwindcss-animate": "^1.0.7"
@@ -66,4 +71,4 @@
       "optional": true
     }
   }
-}
+}

package/src/registry/analytics/google-analytics.tsx

@@ -1,39 +1,36 @@
-"use client"
-
-import Script from 'next/script';
-import type { FC } from 'react';
-
-interface GoogleAnalyticsProps {
-    gaIds: string[];
-}
-
-const GoogleAnalytics: FC<GoogleAnalyticsProps> = ({ gaIds }) => {
-    if (gaIds.length === 0) {
-        return null;
-    }
-
-    return (
-        <>
-            <Script
-                id="ga4-script"
-                strategy="afterInteractive"
-                src={`https://www.googletagmanager.com/gtag/js?id=${gaIds[0]}`}
-            />
-            <Script
-                id="ga4-init"
-                strategy="afterInteractive"
-                dangerouslySetInnerHTML={{
-                    __html: `
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            ${gaIds.map((id) => `gtag('config', '${id}', { page_path: window.location.pathname });`).join('\n')}
-          `,
-                }}
-            />
-        </>
-    );
-};
-
-export default GoogleAnalytics;
-
+import Script from 'next/script';
+import type { FC } from 'react';
+
+interface GoogleAnalyticsProps {
+    gaIds: string[];
+}
+
+const GoogleAnalytics: FC<GoogleAnalyticsProps> = ({ gaIds }) => {
+    if (gaIds.length === 0) {
+        return null;
+    }
+
+    return (
+        <>
+            <Script
+                id="ga4-script"
+                strategy="afterInteractive"
+                src={`https://www.googletagmanager.com/gtag/js?id=${gaIds[0]}`}
+            />
+            <Script
+                id="ga4-init"
+                strategy="afterInteractive"
+                dangerouslySetInnerHTML={{
+                    __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            ${gaIds.map((id) => `gtag('config', '${id}', { page_path: window.location.pathname });`).join('\n')}
+          `,
+                }}
+            />
+        </>
+    );
+};
+
+export default GoogleAnalytics;

package/src/registry/analytics/google-tag-manager.tsx

@@ -1,65 +1,62 @@
-"use client"
-
-import Script from 'next/script';
-import type { FC, ReactNode } from 'react';
-
-interface GTMContainer {
-    gtmId: string;
-    tagServerUrl?: string;
-}
-
-interface GoogleTagManagerProps {
-    containers: GTMContainer[];
-}
-
-const GoogleTagManager: FC<GoogleTagManagerProps> = ({ containers }) => {
-    const defaultServer = 'https://www.googletagmanager.com';
-
-    // Group containers by tagServer to avoid duplicate script loads
-    const scriptsMap = containers.reduce((map, container) => {
-        const server = container.tagServerUrl || defaultServer;
-        if (!map.has(server)) {
-            map.set(server, []);
-        }
-        map.get(server)!.push(container.gtmId);
-        return map;
-    }, new Map<string, string[]>());
-
-    const scriptElements: ReactNode[] = Array.from(scriptsMap.entries()).map(([server, ids]) => (
-        <Script
-            key={server}
-            id={`gtm-script-${server}`}
-            strategy="afterInteractive"
-            dangerouslySetInnerHTML={{
-                __html: `
-          ${ids
-                        .map(
-                            id => `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s);j.async=true;j.src="${server}/gtm.js?"+i;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','${id}');`
-                        )
-                        .join('')}
-        `,
-            }}
-        />
-    ));
-
-    return (
-        <>
-            {scriptElements}
-
-            <noscript>
-                {containers.map(({ gtmId, tagServerUrl = defaultServer }) => (
-                    <iframe
-                        key={gtmId}
-                        src={`${tagServerUrl}/ns.html?id=${gtmId}`}
-                        height="0"
-                        width="0"
-                        style={{ display: 'none', visibility: 'hidden' }}
-                    />
-                ))}
-            </noscript>
-        </>
-    );
-};
-
-export default GoogleTagManager;
-
+import Script from 'next/script';
+import type { FC, ReactNode } from 'react';
+
+interface GTMContainer {
+    gtmId: string;
+    tagServerUrl?: string;
+}
+
+interface GoogleTagManagerProps {
+    containers: GTMContainer[];
+}
+
+const GoogleTagManager: FC<GoogleTagManagerProps> = ({ containers }) => {
+    const defaultServer = 'https://www.googletagmanager.com';
+
+    // Group containers by tagServer to avoid duplicate script loads
+    const scriptsMap = containers.reduce((map, container) => {
+        const server = container.tagServerUrl || defaultServer;
+        if (!map.has(server)) {
+            map.set(server, []);
+        }
+        map.get(server)!.push(container.gtmId);
+        return map;
+    }, new Map<string, string[]>());
+
+    const scriptElements: ReactNode[] = Array.from(scriptsMap.entries()).map(([server, ids]) => (
+        <Script
+            key={server}
+            id={`gtm-script-${server}`}
+            strategy="afterInteractive"
+            dangerouslySetInnerHTML={{
+                __html: `
+          ${ids
+                        .map(
+                            id => `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s);j.async=true;j.src="${server}/gtm.js?"+i;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','${id}');`
+                        )
+                        .join('')}
+        `,
+            }}
+        />
+    ));
+
+    return (
+        <>
+            {scriptElements}
+
+            <noscript>
+                {containers.map(({ gtmId, tagServerUrl = defaultServer }) => (
+                    <iframe
+                        key={gtmId}
+                        src={`${tagServerUrl}/ns.html?id=${gtmId}`}
+                        height="0"
+                        width="0"
+                        style={{ display: 'none', visibility: 'hidden' }}
+                    />
+                ))}
+            </noscript>
+        </>
+    );
+};
+
+export default GoogleTagManager;