@srcroot/ui 0.0.61 → 0.0.63

package/dist/index.js

@@ -850,7 +850,7 @@ var REGISTRY = {
     description: "Mac-style floating dock",
     category: "Navigation",
     dependencies: [],
-    registryDependencies: ["framer-motion"]
+    registryDependencies: []
   },
   marquee: {
     file: "ui/marquee.tsx",
@@ -863,14 +863,14 @@ var REGISTRY = {
     description: "Button to scroll to top",
     category: "Navigation",
     dependencies: ["button"],
-    registryDependencies: ["framer-motion"]
+    registryDependencies: []
   },
   "scroll-animation": {
     file: "ui/scroll-animation.tsx",
     description: "Scroll-triggered animations",
     category: "Layout",
     dependencies: [],
-    registryDependencies: ["framer-motion"]
+    registryDependencies: ["gsap", "@gsap/react"]
   },
   whatsapp: {
     file: "ui/whatsapp.tsx",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.61",
+  "version": "0.0.63",
   "description": "A UI library with polymorphic, accessible React components",
   "author": "Shifaul Islam",
   "license": "MIT",

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

@@ -1,36 +1,38 @@
-import Script from 'next/script';
-import type { FC } from 'react';
+"use client";
+
+import Script from "next/script";
+import type { FC } from "react";
 
 interface GoogleAnalyticsProps {
-    gaIds: string[];
+  gaIds: string[];
 }
 
 const GoogleAnalytics: FC<GoogleAnalyticsProps> = ({ gaIds }) => {
-    if (gaIds.length === 0) {
-        return null;
-    }
+  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: `
+  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')}
+            ${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,62 +1,67 @@
-import Script from 'next/script';
-import type { FC, ReactNode } from 'react';
+"use client";
+
+import Script from "next/script";
+import type { FC, ReactNode } from "react";
 
 interface GTMContainer {
-    gtmId: string;
-    tagServerUrl?: string;
+  gtmId: string;
+  tagServerUrl?: string;
 }
 
 interface GoogleTagManagerProps {
-    containers: GTMContainer[];
+  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: `
+  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('')}
+            .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>
-        </>
-    );
+        }}
+      />
+    ),
+  );
+
+  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,18 +1,20 @@
-import Script from 'next/script';
-import type { FC } from 'react';
+"use client";
+
+import Script from "next/script";
+import type { FC } from "react";
 
 interface MetaPixelProps {
-    pixelIds: string[];           // ← array now
+  pixelIds: string[]; // ← array now
 }
 
 const MetaPixel: FC<MetaPixelProps> = ({ pixelIds }) => {
-    return (
-        <>
-            <Script
-                id="fb-script-multi"
-                strategy="afterInteractive"
-                dangerouslySetInnerHTML={{
-                    __html: `
+  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)};
@@ -21,24 +23,26 @@ const MetaPixel: FC<MetaPixelProps> = ({ pixelIds }) => {
             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')}
+            ${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>
-            ))}
-        </>
-    );
+      {/* 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,31 +1,33 @@
-import Script from 'next/script';
-import type { FC } from 'react';
+"use client";
+
+import Script from "next/script";
+import type { FC } from "react";
 
 interface MicrosoftClarityProps {
-    clarityIds: string[];
+  clarityIds: string[];
 }
 
 const MicrosoftClarity: FC<MicrosoftClarityProps> = ({ clarityIds }) => {
-    return (
-        <>
-            {clarityIds.map((id) => (
-                <Script
-                    key={id}
-                    id={`microsoft-clarity-init-${id}`}
-                    strategy="afterInteractive"
-                    dangerouslySetInnerHTML={{
-                        __html: `
+  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,17 +1,19 @@
-import Script from 'next/script';
-import type { FC } from 'react';
+"use client";
+
+import Script from "next/script";
+import type { FC } from "react";
 
 interface TikTokPixelProps {
-    pixelIds: string[];           // ← array
+  pixelIds: string[]; // ← array
 }
 
 const TikTokPixel: FC<TikTokPixelProps> = ({ pixelIds }) => {
-    return (
-        <Script
-            id="tiktok-script-multi"
-            strategy="afterInteractive"
-            dangerouslySetInnerHTML={{
-                __html: `
+  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"],
@@ -22,13 +24,13 @@ const TikTokPixel: FC<TikTokPixelProps> = ({ pixelIds }) => {
             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')}
+            ${pixelIds.map((id) => `ttq.load('${id}');`).join("\n")}
             ttq.page();
           }(window, document, 'ttq');
         `,
-            }}
-        />
-    );
+      }}
+    />
+  );
 };
 
 export default TikTokPixel;

package/src/registry/ui/alert.tsx

@@ -1,32 +1,34 @@
-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 alertVariants = cva(
-    "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-    {
-        variants: {
-            variant: {
-                default: "bg-background text-foreground",
-                destructive:
-                    "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-        },
-    }
-)
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
 
 /**
  * Alert component for inline feedback
- * 
+ *
  * @example
  * <Alert>
  *   <AlertTitle>Note</AlertTitle>
  *   <AlertDescription>This is an informational message.</AlertDescription>
  * </Alert>
- * 
+ *
  * @example
  * <Alert variant="destructive">
  *   <AlertTitle>Error</AlertTitle>
@@ -34,40 +36,40 @@ const alertVariants = cva(
  * </Alert>
  */
 const Alert = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
 >(({ className, variant, ...props }, ref) => (
-    <div
-        ref={ref}
-        role="alert"
-        className={cn(alertVariants({ variant }), className)}
-        {...props}
-    />
-))
-Alert.displayName = "Alert"
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLHeadingElement>
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
-    <h5
-        ref={ref}
-        className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-        {...props}
-    />
-))
-AlertTitle.displayName = "AlertTitle"
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-    <div
-        ref={ref}
-        className={cn("text-sm [&_p]:leading-relaxed", className)}
-        {...props}
-    />
-))
-AlertDescription.displayName = "AlertDescription"
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };

package/src/registry/ui/aspect-ratio.tsx

@@ -1,23 +1,25 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
 interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * The aspect ratio (width / height)
-     * @default 1
-     */
-    ratio?: number
+  /**
+   * The aspect ratio (width / height)
+   * @default 1
+   */
+  ratio?: number;
 }
 
 /**
  * AspectRatio component to maintain consistent dimensions
- * 
+ *
  * @example
  * // 16:9 video aspect ratio
  * <AspectRatio ratio={16 / 9}>
  *   <img src="..." className="object-cover w-full h-full" />
  * </AspectRatio>
- * 
+ *
  * @example
  * // Square
  * <AspectRatio ratio={1}>
@@ -25,20 +27,20 @@ interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
  * </AspectRatio>
  */
 const AspectRatio = React.forwardRef<HTMLDivElement, AspectRatioProps>(
-    ({ className, ratio = 1, style, children, ...props }, ref) => (
-        <div
-            ref={ref}
-            className={cn("relative w-full", className)}
-            style={{
-                paddingBottom: `${100 / ratio}%`,
-                ...style,
-            }}
-            {...props}
-        >
-            <div className="absolute inset-0">{children}</div>
-        </div>
-    )
-)
-AspectRatio.displayName = "AspectRatio"
+  ({ className, ratio = 1, style, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("relative w-full", className)}
+      style={{
+        paddingBottom: `${100 / ratio}%`,
+        ...style,
+      }}
+      {...props}
+    >
+      <div className="absolute inset-0">{children}</div>
+    </div>
+  ),
+);
+AspectRatio.displayName = "AspectRatio";
 
-export { AspectRatio }
+export { AspectRatio };