@srcroot/ui 0.0.54 → 0.0.56

package/src/registry/ui/textarea.tsx

@@ -1,42 +1,41 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-export interface TextareaProps
-    extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-    /**
-     * Whether the textarea is in an error state
-     */
-    error?: boolean
-}
-
-/**
- * Textarea component for multi-line text input
- * 
- * @example
- * <Textarea placeholder="Enter your message" />
- * 
- * @example
- * <Textarea error placeholder="Required field" />
- */
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-    ({ className, error, ...props }, ref) => {
-        return (
-            <textarea
-                className={cn(
-                    "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-                    error && "border-destructive focus-visible:ring-destructive",
-                    className
-                )}
-                ref={ref}
-                aria-invalid={error ? "true" : undefined}
-                {...props}
-            />
-        )
-    }
-)
-Textarea.displayName = "Textarea"
-
-export { Textarea }
-
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+    extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /**
+     * Whether the textarea is in an error state
+     */
+    error?: boolean
+}
+
+/**
+ * Textarea component for multi-line text input
+ * 
+ * @example
+ * <Textarea placeholder="Enter your message" />
+ * 
+ * @example
+ * <Textarea error placeholder="Required field" />
+ */
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    ({ className, error, ...props }, ref) => {
+        return (
+            <textarea
+                className={cn(
+                    "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                    error && "border-destructive focus-visible:ring-destructive",
+                    className
+                )}
+                ref={ref}
+                aria-invalid={error ? "true" : undefined}
+                {...props}
+            />
+        )
+    }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/src/registry/ui/theme-switcher.tsx

@@ -1,66 +1,66 @@
-"use client"
-
-import * as React from "react"
-import { useTheme } from "next-themes"
-import { FiSun, FiMoon, FiMonitor } from "react-icons/fi"
-
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
-
-/**
- * ThemeSwitcher component for use within a DropdownMenu
- * Toggles between light, dark, and system themes
- * 
- * @example
- * <DropdownMenu>
- *   <DropdownMenuContent>
- *     <ThemeSwitcher />
- *   </DropdownMenuContent>
- * </DropdownMenu>
- */
-export function ThemeSwitcher() {
-    const { setTheme, theme, resolvedTheme } = useTheme()
-    const [mounted, setMounted] = React.useState(false)
-
-    // Avoid hydration mismatch
-    React.useEffect(() => {
-        setMounted(true)
-    }, [])
-
-    const toggleTheme = () => {
-        // Cycle: light -> dark -> system -> light
-        if (theme === "light") {
-            setTheme("dark")
-        } else if (theme === "dark") {
-            setTheme("system")
-        } else {
-            setTheme("light")
-        }
-    }
-
-    const getIcon = () => {
-        if (!mounted) {
-            return <FiSun className="mr-2 h-4 w-4" />
-        }
-        if (theme === "system") {
-            return <FiMonitor className="mr-2 h-4 w-4" />
-        }
-        if (resolvedTheme === "dark") {
-            return <FiMoon className="mr-2 h-4 w-4" />
-        }
-        return <FiSun className="mr-2 h-4 w-4" />
-    }
-
-    const getLabel = () => {
-        if (!mounted) return "Theme"
-        if (theme === "system") return "System"
-        if (theme === "dark") return "Dark"
-        return "Light"
-    }
-
-    return (
-        <DropdownMenuItem onClick={toggleTheme} closeOnSelect={false}>
-            {getIcon()}
-            <span>Theme: {getLabel()}</span>
-        </DropdownMenuItem>
-    )
-}
+"use client"
+
+import * as React from "react"
+import { useTheme } from "next-themes"
+import { FiSun, FiMoon, FiMonitor } from "react-icons/fi"
+
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
+
+/**
+ * ThemeSwitcher component for use within a DropdownMenu
+ * Toggles between light, dark, and system themes
+ * 
+ * @example
+ * <DropdownMenu>
+ *   <DropdownMenuContent>
+ *     <ThemeSwitcher />
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ */
+export function ThemeSwitcher() {
+    const { setTheme, theme, resolvedTheme } = useTheme()
+    const [mounted, setMounted] = React.useState(false)
+
+    // Avoid hydration mismatch
+    React.useEffect(() => {
+        setMounted(true)
+    }, [])
+
+    const toggleTheme = () => {
+        // Cycle: light -> dark -> system -> light
+        if (theme === "light") {
+            setTheme("dark")
+        } else if (theme === "dark") {
+            setTheme("system")
+        } else {
+            setTheme("light")
+        }
+    }
+
+    const getIcon = () => {
+        if (!mounted) {
+            return <FiSun className="mr-2 h-4 w-4" />
+        }
+        if (theme === "system") {
+            return <FiMonitor className="mr-2 h-4 w-4" />
+        }
+        if (resolvedTheme === "dark") {
+            return <FiMoon className="mr-2 h-4 w-4" />
+        }
+        return <FiSun className="mr-2 h-4 w-4" />
+    }
+
+    const getLabel = () => {
+        if (!mounted) return "Theme"
+        if (theme === "system") return "System"
+        if (theme === "dark") return "Dark"
+        return "Light"
+    }
+
+    return (
+        <DropdownMenuItem onClick={toggleTheme} closeOnSelect={false}>
+            {getIcon()}
+            <span>Theme: {getLabel()}</span>
+        </DropdownMenuItem>
+    )
+}

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

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

package/src/registry/ui/toast.tsx

@@ -1,98 +1,97 @@
-"use client"
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-
-const toastVariants = cva(
-    "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all",
-    {
-        variants: {
-            variant: {
-                default: "border bg-background text-foreground",
-                destructive:
-                    "destructive group border-destructive bg-destructive text-destructive-foreground",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-        },
-    }
-)
-
-interface ToastProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof toastVariants> {
-    onClose?: () => void
-}
-
-/**
- * Toast notification component
- * 
- * For a complete toast system, use with a ToastProvider context.
- * This is the individual toast component.
- * 
- * @example
- * <Toast variant="default">
- *   <ToastTitle>Success</ToastTitle>
- *   <ToastDescription>Your action was completed.</ToastDescription>
- * </Toast>
- */
-const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
-    ({ className, variant, onClose, children, ...props }, ref) => {
-        return (
-            <div
-                ref={ref}
-                role={variant === "destructive" ? "alert" : "status"}
-                aria-live={variant === "destructive" ? "assertive" : "polite"}
-                className={cn(toastVariants({ variant }), className)}
-                {...props}
-            >
-                <div className="grid gap-1">{children}</div>
-                {onClose && (
-                    <button
-                        className="absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100"
-                        onClick={onClose}
-                    >
-                        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-                        </svg>
-                    </button>
-                )}
-            </div>
-        )
-    }
-)
-Toast.displayName = "Toast"
-
-const ToastTitle = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("text-sm font-semibold [&+div]:text-xs", className)} {...props} />
-))
-ToastTitle.displayName = "ToastTitle"
-
-const ToastDescription = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
-))
-ToastDescription.displayName = "ToastDescription"
-
-const ToastAction = React.forwardRef<
-    HTMLButtonElement,
-    React.ButtonHTMLAttributes<HTMLButtonElement>
->(({ className, ...props }, ref) => (
-    <button
-        ref={ref}
-        className={cn(
-            "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50",
-            className
-        )}
-        {...props}
-    />
-))
-ToastAction.displayName = "ToastAction"
-
-export { Toast, ToastTitle, ToastDescription, ToastAction, toastVariants }
-
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const toastVariants = cva(
+    "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all",
+    {
+        variants: {
+            variant: {
+                default: "border bg-background text-foreground",
+                destructive:
+                    "destructive group border-destructive bg-destructive text-destructive-foreground",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    }
+)
+
+interface ToastProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof toastVariants> {
+    onClose?: () => void
+}
+
+/**
+ * Toast notification component
+ * 
+ * For a complete toast system, use with a ToastProvider context.
+ * This is the individual toast component.
+ * 
+ * @example
+ * <Toast variant="default">
+ *   <ToastTitle>Success</ToastTitle>
+ *   <ToastDescription>Your action was completed.</ToastDescription>
+ * </Toast>
+ */
+const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
+    ({ className, variant, onClose, children, ...props }, ref) => {
+        return (
+            <div
+                ref={ref}
+                role={variant === "destructive" ? "alert" : "status"}
+                aria-live={variant === "destructive" ? "assertive" : "polite"}
+                className={cn(toastVariants({ variant }), className)}
+                {...props}
+            >
+                <div className="grid gap-1">{children}</div>
+                {onClose && (
+                    <button
+                        className="absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100"
+                        onClick={onClose}
+                    >
+                        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                )}
+            </div>
+        )
+    }
+)
+Toast.displayName = "Toast"
+
+const ToastTitle = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm font-semibold [&+div]:text-xs", className)} {...props} />
+))
+ToastTitle.displayName = "ToastTitle"
+
+const ToastDescription = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
+))
+ToastDescription.displayName = "ToastDescription"
+
+const ToastAction = React.forwardRef<
+    HTMLButtonElement,
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, ...props }, ref) => (
+    <button
+        ref={ref}
+        className={cn(
+            "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50",
+            className
+        )}
+        {...props}
+    />
+))
+ToastAction.displayName = "ToastAction"
+
+export { Toast, ToastTitle, ToastDescription, ToastAction, toastVariants }