@srcroot/ui 0.0.55 → 0.0.58

package/package.json

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

package/src/registry/analytics/meta-pixel.tsx

@@ -1,47 +1,44 @@
-"use client"
-
-import Script from 'next/script';
-import type { FC } from 'react';
-
-interface MetaPixelProps {
-    pixelIds: string[];           // ← array now
-}
-
-const MetaPixel: FC<MetaPixelProps> = ({ pixelIds }) => {
-    return (
-        <>
-            <Script
-                id="fb-script-multi"
-                strategy="afterInteractive"
-                dangerouslySetInnerHTML={{
-                    __html: `
-            !function(f,b,e,v,n,t,s)
-            {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
-            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
-            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
-            n.queue=[];t=b.createElement(e);t.async=!0;
-            t.src=v;s=b.getElementsByTagName(e)[0];
-            s.parentNode.insertBefore(t,s)}(window, document,'script',
-            'https://connect.facebook.net/en_US/fbevents.js');
-            ${pixelIds.map(id => `fbq('init', '${id}');`).join('\n')}
-            fbq('track', 'PageView');
-          `,
-                }}
-            />
-
-            {/* One noscript tag per pixel */}
-            {pixelIds.map(id => (
-                <noscript key={id}>
-                    <img
-                        height="1" width="1" style={{ display: 'none' }}
-                        src={`https://www.facebook.com/tr?id=${id}&ev=PageView&noscript=1`}
-                        alt=""
-                    />
-                </noscript>
-            ))}
-        </>
-    );
-};
-
-export default MetaPixel;
-
+import Script from 'next/script';
+import type { FC } from 'react';
+
+interface MetaPixelProps {
+    pixelIds: string[];           // ← array now
+}
+
+const MetaPixel: FC<MetaPixelProps> = ({ pixelIds }) => {
+    return (
+        <>
+            <Script
+                id="fb-script-multi"
+                strategy="afterInteractive"
+                dangerouslySetInnerHTML={{
+                    __html: `
+            !function(f,b,e,v,n,t,s)
+            {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+            n.queue=[];t=b.createElement(e);t.async=!0;
+            t.src=v;s=b.getElementsByTagName(e)[0];
+            s.parentNode.insertBefore(t,s)}(window, document,'script',
+            'https://connect.facebook.net/en_US/fbevents.js');
+            ${pixelIds.map(id => `fbq('init', '${id}');`).join('\n')}
+            fbq('track', 'PageView');
+          `,
+                }}
+            />
+
+            {/* One noscript tag per pixel */}
+            {pixelIds.map(id => (
+                <noscript key={id}>
+                    <img
+                        height="1" width="1" style={{ display: 'none' }}
+                        src={`https://www.facebook.com/tr?id=${id}&ev=PageView&noscript=1`}
+                        alt=""
+                    />
+                </noscript>
+            ))}
+        </>
+    );
+};
+
+export default MetaPixel;

package/src/registry/analytics/microsoft-clarity.tsx

@@ -1,34 +1,31 @@
-"use client"
-
-import Script from 'next/script';
-import type { FC } from 'react';
-
-interface MicrosoftClarityProps {
-    clarityIds: string[];
-}
-
-const MicrosoftClarity: FC<MicrosoftClarityProps> = ({ clarityIds }) => {
-    return (
-        <>
-            {clarityIds.map((id) => (
-                <Script
-                    key={id}
-                    id={`microsoft-clarity-init-${id}`}
-                    strategy="afterInteractive"
-                    dangerouslySetInnerHTML={{
-                        __html: `
-                (function(c,l,a,r,i,t,y){
-                    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-                    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-                    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-                })(window, document, "clarity", "script", "${id}");
-                `,
-                    }}
-                />
-            ))}
-        </>
-    );
-};
-
-export default MicrosoftClarity;
-
+import Script from 'next/script';
+import type { FC } from 'react';
+
+interface MicrosoftClarityProps {
+    clarityIds: string[];
+}
+
+const MicrosoftClarity: FC<MicrosoftClarityProps> = ({ clarityIds }) => {
+    return (
+        <>
+            {clarityIds.map((id) => (
+                <Script
+                    key={id}
+                    id={`microsoft-clarity-init-${id}`}
+                    strategy="afterInteractive"
+                    dangerouslySetInnerHTML={{
+                        __html: `
+                (function(c,l,a,r,i,t,y){
+                    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+                    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+                    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+                })(window, document, "clarity", "script", "${id}");
+                `,
+                    }}
+                />
+            ))}
+        </>
+    );
+};
+
+export default MicrosoftClarity;

package/src/registry/analytics/tiktok-pixel.tsx

@@ -1,37 +1,34 @@
-"use client"
-
-import Script from 'next/script';
-import type { FC } from 'react';
-
-interface TikTokPixelProps {
-    pixelIds: string[];           // ← array
-}
-
-const TikTokPixel: FC<TikTokPixelProps> = ({ pixelIds }) => {
-    return (
-        <Script
-            id="tiktok-script-multi"
-            strategy="afterInteractive"
-            dangerouslySetInnerHTML={{
-                __html: `
-          !function (w, d, t) {
-            w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];
-            ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie","holdConsent","revokeConsent","grantConsent"],
-            ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};
-            for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);
-            ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},
-            ttq.load=function(e,n){var r="https://analytics.tiktok.com/i18n/pixel/events.js";
-            ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=r,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};
-            var s=document.createElement("script");s.type="text/javascript",s.async=!0,s.src=r+"?sdkid="+e+"&lib="+t;
-            var p=document.getElementsByTagName("script")[0];p.parentNode.insertBefore(s,p)};
-            ${pixelIds.map(id => `ttq.load('${id}');`).join('\n')}
-            ttq.page();
-          }(window, document, 'ttq');
-        `,
-            }}
-        />
-    );
-};
-
-export default TikTokPixel;
-
+import Script from 'next/script';
+import type { FC } from 'react';
+
+interface TikTokPixelProps {
+    pixelIds: string[];           // ← array
+}
+
+const TikTokPixel: FC<TikTokPixelProps> = ({ pixelIds }) => {
+    return (
+        <Script
+            id="tiktok-script-multi"
+            strategy="afterInteractive"
+            dangerouslySetInnerHTML={{
+                __html: `
+          !function (w, d, t) {
+            w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];
+            ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie","holdConsent","revokeConsent","grantConsent"],
+            ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};
+            for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);
+            ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},
+            ttq.load=function(e,n){var r="https://analytics.tiktok.com/i18n/pixel/events.js";
+            ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=r,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};
+            var s=document.createElement("script");s.type="text/javascript",s.async=!0,s.src=r+"?sdkid="+e+"&lib="+t;
+            var p=document.getElementsByTagName("script")[0];p.parentNode.insertBefore(s,p)};
+            ${pixelIds.map(id => `ttq.load('${id}');`).join('\n')}
+            ttq.page();
+          }(window, document, 'ttq');
+        `,
+            }}
+        />
+    );
+};
+
+export default TikTokPixel;