@srcroot/ui 0.0.60 → 0.0.62

package/src/registry/ui/text.tsx

@@ -1,61 +1,62 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
+"use client";
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
 
 const textVariants = cva("", {
-    variants: {
-        variant: {
-            h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
-            h2: "scroll-m-20 text-3xl font-semibold tracking-tight",
-            h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
-            h4: "scroll-m-20 text-xl font-semibold tracking-tight",
-            h5: "scroll-m-20 text-lg font-semibold tracking-tight",
-            h6: "scroll-m-20 text-base font-semibold tracking-tight",
-            p: "leading-7 [&:not(:first-child)]:mt-6",
-            lead: "text-xl text-muted-foreground",
-            large: "text-lg font-semibold",
-            small: "text-sm font-medium leading-none",
-            muted: "text-sm text-muted-foreground",
-            code: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
-        },
+  variants: {
+    variant: {
+      h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+      h2: "scroll-m-20 text-3xl font-semibold tracking-tight",
+      h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+      h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+      h5: "scroll-m-20 text-lg font-semibold tracking-tight",
+      h6: "scroll-m-20 text-base font-semibold tracking-tight",
+      p: "leading-7 [&:not(:first-child)]:mt-6",
+      lead: "text-xl text-muted-foreground",
+      large: "text-lg font-semibold",
+      small: "text-sm font-medium leading-none",
+      muted: "text-sm text-muted-foreground",
+      code: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
     },
-    defaultVariants: {
-        variant: "p",
-    },
-})
+  },
+  defaultVariants: {
+    variant: "p",
+  },
+});
 
-type TextVariants = VariantProps<typeof textVariants>
+type TextVariants = VariantProps<typeof textVariants>;
 
 interface TextProps extends TextVariants {
-    className?: string
-    children?: React.ReactNode
-    as?: "p" | "span" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label"
+  className?: string;
+  children?: React.ReactNode;
+  as?: "p" | "span" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label";
 }
 
 /**
  * Text component for typography
- * 
+ *
  * @example
  * // As a heading
  * <Text as="h1" variant="h1">Page Title</Text>
- * 
+ *
  * // Using heading styles on a different element
  * <Text as="span" variant="h2">Styled as H2</Text>
- * 
+ *
  * // Muted text
  * <Text variant="muted">Secondary information</Text>
  */
 const Text = React.forwardRef<HTMLElement, TextProps>(
-    ({ as: Component = "p", className, variant, ...props }, ref) => {
-        return (
-            <Component
-                ref={ref as any}
-                className={cn(textVariants({ variant }), className)}
-                {...props}
-            />
-        )
-    }
-)
-Text.displayName = "Text"
+  ({ as: Component = "p", className, variant, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref as any}
+        className={cn(textVariants({ variant }), className)}
+        {...props}
+      />
+    );
+  },
+);
+Text.displayName = "Text";
 
-export { Text, textVariants }
+export { Text, textVariants };

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

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

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

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

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

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

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

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

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

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