@srcroot/ui 0.0.30 → 0.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.30",
+  "version": "0.0.33",
   "description": "A UI library with polymorphic, accessible React components",
   "type": "module",
   "bin": {
@@ -12,7 +12,7 @@
   },
   "files": [
     "dist",
-    "registry"
+    "src/registry"
   ],
   "keywords": [
     "react",
@@ -33,28 +33,29 @@
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.10.1",
     "@types/prompts": "^2.4.9",
-    "tsup": "^8.3.5",
-    "typescript": "^5.7.2",
-    "tailwindcss-animate": "^1.0.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^3.0.0 || ^4.0.0",
-    "react-icons": "^5.5.0"
+    "tailwindcss-animate": "^1.0.7",
+    "tsup": "^8.3.5",
+    "type-fest": "^5.3.1",
+    "typescript": "^5.7.2"
   },
   "peerDependencies": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "react-icons": "^5.5.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.4.0",
-    "tailwindcss-animate": "^1.0.7",
-    "tailwindcss": "^3.0.0 || ^4.0.0"
+    "tailwindcss": "^3.0.0 || ^4.0.0",
+    "tailwindcss-animate": "^1.0.7"
   },
   "peerDependenciesMeta": {
     "cmdk": {

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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,62 @@
+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/gtm.js';
+
+    // 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}?"+i;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','${id}');`
+                        )
+                        .join('')}
+        `,
+            }}
+        />
+    ));
+
+    return (
+        <>
+            {scriptElements}
+
+            <noscript>
+                {containers.map(({ gtmId, tagServer = defaultServer }) => (
+                    <iframe
+                        key={gtmId}
+                        src={`${tagServer}/ns.html?id=${gtmId}`}
+                        height="0"
+                        width="0"
+                        style={{ display: 'none', visibility: 'hidden' }}
+                    />
+                ))}
+            </noscript>
+        </>
+    );
+};
+
+export default GoogleTagManager;

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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,34 @@
+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;

package/src/registry/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/registry/themes/gradients.css

@@ -0,0 +1,236 @@
+@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 250 20% 10%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 250 20% 10%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 250 20% 10%;
+
+        --primary: 246 80% 60%;
+        --primary-foreground: 0 0% 100%;
+
+        --secondary: 320 85% 55%;
+        --secondary-foreground: 0 0% 100%;
+
+        --muted: 250 20% 96%;
+        --muted-foreground: 250 10% 45%;
+
+        --accent: 320 85% 55%;
+        --accent-foreground: 0 0% 100%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 40% 98%;
+
+        --border: 250 15% 90%;
+        --input: 250 15% 90%;
+        --ring: 246 80% 60%;
+
+        --radius: 0.75rem;
+
+        /* Custom brand colors */
+        --brand-purple: 246 80% 60%;
+        --brand-magenta: 320 85% 55%;
+        --brand-light: 300 60% 97%;
+
+        /* Gradients */
+        --gradient-brand: linear-gradient(135deg, hsl(246 80% 60%) 0%, hsl(320 85% 55%) 100%);
+        --gradient-hero: linear-gradient(135deg, hsl(270 60% 95%) 0%, hsl(320 70% 95%) 50%, hsl(246 60% 95%) 100%);
+        --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(300 60% 98%) 100%);
+
+        /* Shadows */
+        --shadow-sm: 0 2px 8px -2px hsl(246 80% 60% / 0.1);
+        --shadow-md: 0 8px 24px -4px hsl(246 80% 60% / 0.15);
+        --shadow-lg: 0 16px 48px -8px hsl(246 80% 60% / 0.2);
+        --shadow-glow: 0 0 40px hsl(320 85% 55% / 0.3);
+
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 240 5.3% 26.1%;
+        --sidebar-primary: 240 5.9% 10%;
+        --sidebar-primary-foreground: 0 0% 98%;
+        --sidebar-accent: 240 4.8% 95.9%;
+        --sidebar-accent-foreground: 240 5.9% 10%;
+        --sidebar-border: 220 13% 91%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
+    }
+
+    .dark {
+        --background: 250 20% 6%;
+        --foreground: 0 0% 98%;
+
+        --card: 250 20% 8%;
+        --card-foreground: 0 0% 98%;
+
+        --popover: 250 20% 8%;
+        --popover-foreground: 0 0% 98%;
+
+        --primary: 246 80% 65%;
+        --primary-foreground: 250 20% 6%;
+
+        --secondary: 320 85% 60%;
+        --secondary-foreground: 0 0% 100%;
+
+        --muted: 250 20% 15%;
+        --muted-foreground: 250 10% 60%;
+
+        --accent: 320 85% 60%;
+        --accent-foreground: 0 0% 100%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+
+        --border: 250 20% 18%;
+        --input: 250 20% 18%;
+        --ring: 246 80% 65%;
+
+        --brand-purple: 246 80% 65%;
+        --brand-magenta: 320 85% 60%;
+        --brand-light: 250 20% 12%;
+
+        --gradient-brand: linear-gradient(135deg, hsl(246 80% 65%) 0%, hsl(320 85% 60%) 100%);
+        --gradient-hero: linear-gradient(135deg, hsl(250 30% 12%) 0%, hsl(320 30% 15%) 50%, hsl(246 30% 12%) 100%);
+        --gradient-card: linear-gradient(180deg, hsl(250 20% 10%) 0%, hsl(300 20% 12%) 100%);
+
+        --shadow-sm: 0 2px 8px -2px hsl(0 0% 0% / 0.3);
+        --shadow-md: 0 8px 24px -4px hsl(0 0% 0% / 0.4);
+        --shadow-lg: 0 16px 48px -8px hsl(0 0% 0% / 0.5);
+        --shadow-glow: 0 0 40px hsl(320 85% 60% / 0.2);
+
+        --sidebar-background: 240 5.9% 10%;
+        --sidebar-foreground: 240 4.8% 95.9%;
+        --sidebar-primary: 224.3 76.3% 48%;
+        --sidebar-primary-foreground: 0 0% 100%;
+        --sidebar-accent: 240 3.7% 15.9%;
+        --sidebar-accent-foreground: 240 4.8% 95.9%;
+        --sidebar-border: 240 3.7% 15.9%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground font-sans antialiased;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        @apply font-display font-bold tracking-tight;
+    }
+}
+
+@layer utilities {
+    .gradient-brand {
+        background: var(--gradient-brand);
+    }
+
+    .gradient-hero {
+        background: var(--gradient-hero);
+    }
+
+    .gradient-card {
+        background: var(--gradient-card);
+    }
+
+    .text-gradient {
+        background: var(--gradient-brand);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    .shadow-brand-sm {
+        box-shadow: var(--shadow-sm);
+    }
+
+    .shadow-brand-md {
+        box-shadow: var(--shadow-md);
+    }
+
+    .shadow-brand-lg {
+        box-shadow: var(--shadow-lg);
+    }
+
+    .shadow-glow {
+        box-shadow: var(--shadow-glow);
+    }
+}
+
+@layer components {
+    .animate-fade-up {
+        animation: fadeUp 0.6s ease-out forwards;
+    }
+
+    .animate-fade-in {
+        animation: fadeIn 0.5s ease-out forwards;
+    }
+
+    .animate-scale-in {
+        animation: scaleIn 0.4s ease-out forwards;
+    }
+
+    .animate-slide-in {
+        animation: slideIn 0.5s ease-out forwards;
+    }
+}
+
+@keyframes fadeUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes scaleIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}

package/{registry/themes → src/registry/themes/v3}/gray.css

@@ -1,8 +1,12 @@
 /**
- * @srcroot/ui - Gray Theme
+ * @srcroot/ui - Gray Theme (Tailwind 3)
  * True neutral gray (the default)
  */
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @layer base {
     :root {
         --background: 0 0% 100%;
@@ -107,4 +111,44 @@
         --sidebar-border: 215 27.9% 16.9%;
         --sidebar-ring: 216 12.2% 83.9%;
     }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+@layer utilities {
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-accordion-content-height);
+        }
+    }
+
+    @keyframes accordion-up {
+        from {
+            height: var(--radix-accordion-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+
+    .animate-accordion-down {
+        animation: accordion-down 0.2s ease-out;
+    }
+
+    .animate-accordion-up {
+        animation: accordion-up 0.2s ease-out;
+    }
 }

package/{registry/themes → src/registry/themes/v3}/neutral.css

@@ -1,8 +1,12 @@
 /**
- * @srcroot/ui - Neutral Theme
+ * @srcroot/ui - Neutral Theme (Tailwind 3)
  * A balanced gray with no strong undertones
  */
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @layer base {
     :root {
         --background: 0 0% 100%;
@@ -107,4 +111,44 @@
         --sidebar-border: 0 0% 14.9%;
         --sidebar-ring: 0 0% 83.1%;
     }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+@layer utilities {
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-accordion-content-height);
+        }
+    }
+
+    @keyframes accordion-up {
+        from {
+            height: var(--radix-accordion-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+
+    .animate-accordion-down {
+        animation: accordion-down 0.2s ease-out;
+    }
+
+    .animate-accordion-up {
+        animation: accordion-up 0.2s ease-out;
+    }
 }

package/{registry/themes → src/registry/themes/v3}/slate.css

@@ -1,8 +1,12 @@
 /**
- * @srcroot/ui - Slate Theme
+ * @srcroot/ui - Slate Theme (Tailwind 3)
  * Cool gray with strong blue undertones (shadcn default)
  */
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @layer base {
     :root {
         --background: 0 0% 100%;
@@ -107,4 +111,44 @@
         --sidebar-border: 217.2 32.6% 17.5%;
         --sidebar-ring: 212.7 26.8% 83.9%;
     }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+@layer utilities {
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-accordion-content-height);
+        }
+    }
+
+    @keyframes accordion-up {
+        from {
+            height: var(--radix-accordion-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+
+    .animate-accordion-down {
+        animation: accordion-down 0.2s ease-out;
+    }
+
+    .animate-accordion-up {
+        animation: accordion-up 0.2s ease-out;
+    }
 }