@srcroot/ui 0.0.55 → 0.0.56

package/src/registry/ui/empty-state.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { cn } from "@/lib/utils"
 
 interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/registry/ui/form-field.tsx

@@ -1,94 +1,91 @@
-"use client"
-
-import * as React from "react"
-import { Label } from "@/components/ui/label"
-import { cn } from "@/lib/utils"
-
-export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * The label for the field
-     */
-    label?: React.ReactNode
-    /**
-     * Helper text description
-     */
-    description?: React.ReactNode
-    /**
-     * Error message
-     */
-    error?: React.ReactNode
-    /**
-     * Whether the field is required (shows asterisk)
-     */
-    required?: boolean
-    /**
-     * The ID of the input element, used for label association
-     */
-    htmlFor?: string
-}
-
-/**
- * FormField wrapper for consistent label and error placement
- * 
- * @example
- * <FormField
- *   label="Email"
- *   description="We'll never share your email."
- *   error={errors.email}
- *   required
- * >
- *   <Input placeholder="user@example.com" />
- * </FormField>
- */
-const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(
-    ({ className, label, description, error, required, htmlFor, children, ...props }, ref) => {
-        const id = htmlFor || React.useId()
-
-        // Clone child to inject id and error state if it's a valid React element
-        const childWithProps = React.isValidElement(children)
-            ? React.cloneElement(children as React.ReactElement<any>, {
-                id: id,
-                error: !!error,
-                "aria-describedby": error ? `${id}-error` : description ? `${id}-desc` : undefined,
-            })
-            : children
-
-        return (
-            <div
-                ref={ref}
-                className={cn("space-y-2", className)}
-                {...props}
-            >
-                {label && (
-                    <Label htmlFor={id} required={required}>
-                        {label}
-                    </Label>
-                )}
-
-                {childWithProps}
-
-                {description && !error && (
-                    <p
-                        id={`${id}-desc`}
-                        className="text-[0.8rem] text-muted-foreground"
-                    >
-                        {description}
-                    </p>
-                )}
-
-                {error && (
-                    <p
-                        id={`${id}-error`}
-                        className="text-[0.8rem] font-medium text-destructive"
-                    >
-                        {error}
-                    </p>
-                )}
-            </div>
-        )
-    }
-)
-FormField.displayName = "FormField"
-
-export { FormField }
-
+import * as React from "react"
+import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils"
+
+export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The label for the field
+     */
+    label?: React.ReactNode
+    /**
+     * Helper text description
+     */
+    description?: React.ReactNode
+    /**
+     * Error message
+     */
+    error?: React.ReactNode
+    /**
+     * Whether the field is required (shows asterisk)
+     */
+    required?: boolean
+    /**
+     * The ID of the input element, used for label association
+     */
+    htmlFor?: string
+}
+
+/**
+ * FormField wrapper for consistent label and error placement
+ * 
+ * @example
+ * <FormField
+ *   label="Email"
+ *   description="We'll never share your email."
+ *   error={errors.email}
+ *   required
+ * >
+ *   <Input placeholder="user@example.com" />
+ * </FormField>
+ */
+const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(
+    ({ className, label, description, error, required, htmlFor, children, ...props }, ref) => {
+        const id = htmlFor || React.useId()
+
+        // Clone child to inject id and error state if it's a valid React element
+        const childWithProps = React.isValidElement(children)
+            ? React.cloneElement(children as React.ReactElement<any>, {
+                id: id,
+                error: !!error,
+                "aria-describedby": error ? `${id}-error` : description ? `${id}-desc` : undefined,
+            })
+            : children
+
+        return (
+            <div
+                ref={ref}
+                className={cn("space-y-2", className)}
+                {...props}
+            >
+                {label && (
+                    <Label htmlFor={id} required={required}>
+                        {label}
+                    </Label>
+                )}
+
+                {childWithProps}
+
+                {description && !error && (
+                    <p
+                        id={`${id}-desc`}
+                        className="text-[0.8rem] text-muted-foreground"
+                    >
+                        {description}
+                    </p>
+                )}
+
+                {error && (
+                    <p
+                        id={`${id}-error`}
+                        className="text-[0.8rem] font-medium text-destructive"
+                    >
+                        {error}
+                    </p>
+                )}
+            </div>
+        )
+    }
+)
+FormField.displayName = "FormField"
+
+export { FormField }

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

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

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