@srcroot/ui 0.0.52 → 0.0.54

package/dist/index.js

@@ -437,7 +437,7 @@ var REGISTRY = {
     description: "Text input field",
     category: "Forms",
     dependencies: [],
-    registryDependencies: ["react-icons^5.5.0"]
+    registryDependencies: ["react-icons"]
   },
   textarea: {
     file: "ui/textarea.tsx",
@@ -684,7 +684,7 @@ var REGISTRY = {
     description: "Date picker with calendar",
     category: "Forms",
     dependencies: ["calendar", "popover", "button"],
-    registryDependencies: ["date-fns^4.1.0"]
+    registryDependencies: ["date-fns"]
   },
   drawer: {
     file: "ui/drawer.tsx",
@@ -787,13 +787,19 @@ var REGISTRY = {
     description: "Charts using Recharts",
     category: "Data Display",
     dependencies: [],
-    registryDependencies: ["recharts^2.15.4"]
+    registryDependencies: ["recharts"]
   },
   slot: {
     file: "ui/slot.tsx",
     description: "Slot utility for polymorphic components",
     category: "Core",
     dependencies: []
+  },
+  "table-of-contents": {
+    file: "ui/table-of-contents.tsx",
+    description: "Table of contents navigation",
+    category: "Navigation",
+    dependencies: []
   }
 };
 

package/package.json

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

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

@@ -1,3 +1,5 @@
+"use client"
+
 import Script from 'next/script';
 import type { FC } from 'react';
 
@@ -34,3 +36,4 @@ const GoogleAnalytics: FC<GoogleAnalyticsProps> = ({ gaIds }) => {
 };
 
 export default GoogleAnalytics;
+

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

@@ -1,3 +1,5 @@
+"use client"
+
 import Script from 'next/script';
 import type { FC, ReactNode } from 'react';
 
@@ -60,3 +62,4 @@ const GoogleTagManager: FC<GoogleTagManagerProps> = ({ containers }) => {
 };
 
 export default GoogleTagManager;
+

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

@@ -1,8 +1,10 @@
+"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 }) => {
@@ -42,3 +44,4 @@ const MetaPixel: FC<MetaPixelProps> = ({ pixelIds }) => {
 };
 
 export default MetaPixel;
+

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

@@ -1,3 +1,5 @@
+"use client"
+
 import Script from 'next/script';
 import type { FC } from 'react';
 
@@ -29,3 +31,4 @@ const MicrosoftClarity: FC<MicrosoftClarityProps> = ({ clarityIds }) => {
 };
 
 export default MicrosoftClarity;
+

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

@@ -1,8 +1,10 @@
+"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 }) => {
@@ -32,3 +34,4 @@ const TikTokPixel: FC<TikTokPixelProps> = ({ pixelIds }) => {
 };
 
 export default TikTokPixel;
+

package/src/registry/ui/accordion.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -160,3 +162,4 @@ const AccordionContent = React.forwardRef<
 AccordionContent.displayName = "AccordionContent"
 
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+

package/src/registry/ui/alert-dialog.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { createPortal } from "react-dom"
 import { cn } from "@/lib/utils"
@@ -209,3 +211,4 @@ export {
     AlertDialogAction,
     AlertDialogCancel,
 }
+

package/src/registry/ui/alert.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
@@ -71,3 +73,4 @@ const AlertDescription = React.forwardRef<
 AlertDescription.displayName = "AlertDescription"
 
 export { Alert, AlertTitle, AlertDescription }
+

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

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -42,3 +44,4 @@ const AspectRatio = React.forwardRef<HTMLDivElement, AspectRatioProps>(
 AspectRatio.displayName = "AspectRatio"
 
 export { AspectRatio }
+

package/src/registry/ui/avatar.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
@@ -92,3 +94,4 @@ const AvatarFallback = React.forwardRef<
 AvatarFallback.displayName = "AvatarFallback"
 
 export { Avatar, AvatarImage, AvatarFallback, avatarVariants }
+

package/src/registry/ui/badge.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
@@ -50,3 +52,4 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
 Badge.displayName = "Badge"
 
 export { Badge, badgeVariants }
+

package/src/registry/ui/breadcrumb.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 import { Slot } from "@/components/ui/slot"
@@ -145,3 +147,4 @@ export {
     BreadcrumbSeparator,
     BreadcrumbEllipsis,
 }
+

package/src/registry/ui/button-group.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
@@ -62,3 +64,4 @@ const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
 ButtonGroup.displayName = "ButtonGroup"
 
 export { ButtonGroup, buttonGroupVariants }
+

package/src/registry/ui/button.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
@@ -67,3 +69,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 Button.displayName = "Button"
 
 export { Button, buttonVariants }
+

package/src/registry/ui/calendar.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -510,3 +512,4 @@ const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
 Calendar.displayName = "Calendar"
 
 export { Calendar }
+

package/src/registry/ui/card.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -86,3 +88,4 @@ const CardFooter = React.forwardRef<
 CardFooter.displayName = "CardFooter"
 
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+

package/src/registry/ui/chatbot.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
@@ -94,3 +96,4 @@ export {
     ChatbotMessage,
     ChatbotFooter,
 }
+

package/src/registry/ui/checkbox.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -89,3 +91,4 @@ const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
 Checkbox.displayName = "Checkbox"
 
 export { Checkbox }
+

package/src/registry/ui/collapsible.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 import { Slot } from "@/components/ui/slot"
@@ -103,3 +105,4 @@ const CollapsibleContent = React.forwardRef<
 CollapsibleContent.displayName = "CollapsibleContent"
 
 export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+

package/src/registry/ui/container.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
@@ -42,3 +44,4 @@ const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
 Container.displayName = "Container"
 
 export { Container, containerVariants }
+

package/src/registry/ui/dialog.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { createPortal } from "react-dom"
 import { cn } from "@/lib/utils"
@@ -265,3 +267,4 @@ export {
     DialogTitle,
     DialogDescription,
 }
+

package/src/registry/ui/dropdown-menu.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { createPortal } from "react-dom"
 import { cn } from "@/lib/utils"
@@ -525,3 +527,4 @@ export {
     DropdownMenuGroup,
     DropdownMenuPortal,
 }
+

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

@@ -0,0 +1,40 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+
+interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon?: React.ElementType
+    title: string
+    description: string
+    action?: React.ReactNode
+}
+
+export function EmptyState({
+    icon: Icon,
+    title,
+    description,
+    action,
+    className,
+    ...props
+}: EmptyStateProps) {
+    return (
+        <div
+            className={cn(
+                "flex flex-col items-center justify-center py-12 text-center border-2 border-dashed rounded-lg bg-muted/5",
+                className
+            )}
+            {...props}
+        >
+            {Icon && (
+                <div className="flex h-20 w-20 items-center justify-center rounded-full bg-muted/50 mb-4">
+                    <Icon className="h-10 w-10 text-muted-foreground" />
+                </div>
+            )}
+            <h3 className="text-lg font-semibold tracking-tight">{title}</h3>
+            <p className="text-muted-foreground text-sm max-w-sm mt-2 mb-6">
+                {description}
+            </p>
+            {action && <div>{action}</div>}
+        </div>
+    )
+}

package/src/registry/ui/file-upload.tsx

@@ -13,6 +13,7 @@ interface FileUploadProps {
     maxFiles?: number
     className?: string
     disabled?: boolean
+    variant?: 'default' | 'compact'
 }
 
 interface UploadedFile {
@@ -44,6 +45,7 @@ export function FileUpload({
     maxFiles = 5,
     className,
     disabled = false,
+    variant = 'default',
 }: FileUploadProps) {
     const [files, setFiles] = React.useState<UploadedFile[]>([])
     const [isDragging, setIsDragging] = React.useState(false)
@@ -141,7 +143,9 @@ export function FileUpload({
                 onDragLeave={handleDragLeave}
                 onDrop={handleDrop}
                 className={cn(
-                    "relative flex flex-col items-center justify-center gap-4 rounded-lg border-2 border-dashed p-8 transition-colors cursor-pointer",
+                    "relative flex cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors",
+                    variant === 'default' && "flex-col gap-4 p-8",
+                    variant === 'compact' && "flex-row gap-3 p-4",
                     isDragging
                         ? "border-primary bg-primary/5"
                         : "border-muted-foreground/25 hover:border-primary/50 hover:bg-muted/50",
@@ -159,28 +163,55 @@ export function FileUpload({
                     disabled={disabled}
                 />
 
-                <div className={cn(
-                    "flex h-14 w-14 items-center justify-center rounded-full bg-muted transition-colors",
-                    isDragging && "bg-primary/10"
-                )}>
-                    <LuUpload className={cn(
-                        "h-6 w-6 text-muted-foreground",
-                        isDragging && "text-primary"
-                    )} />
-                </div>
+                {variant === 'default' && (
+                    <>
+                        <div className={cn(
+                            "flex h-14 w-14 items-center justify-center rounded-full bg-muted transition-colors",
+                            isDragging && "bg-primary/10"
+                        )}>
+                            <LuUpload className={cn(
+                                "h-6 w-6 text-muted-foreground",
+                                isDragging && "text-primary"
+                            )} />
+                        </div>
 
-                <div className="text-center">
-                    <p className="text-sm font-medium">
-                        {isDragging ? "Drop files here" : "Drag & drop files here"}
-                    </p>
-                    <p className="text-xs text-muted-foreground mt-1">
-                        or click to browse
-                    </p>
-                </div>
+                        <div className="text-center">
+                            <p className="text-sm font-medium">
+                                {isDragging ? "Drop files here" : "Drag & drop files here"}
+                            </p>
+                            <p className="text-xs text-muted-foreground mt-1">
+                                or click to browse
+                            </p>
+                        </div>
+
+                        <p className="text-xs text-muted-foreground">
+                            {accept ? `Accepted: ${accept}` : "All file types accepted"} • Max {formatFileSize(maxSize)}
+                        </p>
+                    </>
+                )}
+
+                {variant === 'compact' && (
+                    <>
+                        <div className={cn(
+                            "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-muted transition-colors",
+                            isDragging && "bg-primary/10"
+                        )}>
+                            <LuUpload className={cn(
+                                "h-5 w-5 text-muted-foreground",
+                                isDragging && "text-primary"
+                            )} />
+                        </div>
 
-                <p className="text-xs text-muted-foreground">
-                    {accept ? `Accepted: ${accept}` : "All file types accepted"} • Max {formatFileSize(maxSize)}
-                </p>
+                        <div className="flex flex-col text-left">
+                            <p className="text-sm font-medium">
+                                {isDragging ? "Drop files" : "Upload files"}
+                            </p>
+                            <p className="text-xs text-muted-foreground">
+                                {accept ? accept : `Max ${formatFileSize(maxSize)}`}
+                            </p>
+                        </div>
+                    </>
+                )}
             </div>
 
             {/* Error Message */}
@@ -193,6 +224,11 @@ export function FileUpload({
                 <div className="space-y-2">
                     {files.map((uploadedFile, index) => {
                         const FileIcon = getFileIcon(uploadedFile.file.type)
+                        const dotIndex = uploadedFile.file.name.lastIndexOf('.')
+                        const hasExtension = dotIndex !== -1
+                        const name = hasExtension ? uploadedFile.file.name.slice(0, dotIndex) : uploadedFile.file.name
+                        const extension = hasExtension ? uploadedFile.file.name.slice(dotIndex) : ''
+
                         return (
                             <div
                                 key={index}
@@ -211,9 +247,14 @@ export function FileUpload({
                                 )}
 
                                 <div className="flex-1 min-w-0">
-                                    <p className="text-sm font-medium truncate">
-                                        {uploadedFile.file.name}
-                                    </p>
+                                    <div className="flex items-center min-w-0">
+                                        <span className="truncate text-sm font-medium">
+                                            {name}
+                                        </span>
+                                        <span className="text-sm font-medium whitespace-nowrap">
+                                            {extension}
+                                        </span>
+                                    </div>
                                     <p className="text-xs text-muted-foreground">
                                         {formatFileSize(uploadedFile.file.size)}
                                     </p>

package/src/registry/ui/floating-dock.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import React from "react"
+import { cn } from "@/lib/utils"
+
+interface FloatingDockProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode
+}
+
+export function FloatingDock({ className, children, ...props }: FloatingDockProps) {
+    return (
+        <div
+            className={cn(
+                "fixed bottom-4 right-4 md:bottom-6 md:right-6 z-50 flex flex-col items-center gap-2 md:gap-3",
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </div>
+    )
+}

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

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { Label } from "@/components/ui/label"
 import { cn } from "@/lib/utils"
@@ -89,3 +91,4 @@ const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(
 FormField.displayName = "FormField"
 
 export { FormField }
+

package/src/registry/ui/image.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
@@ -142,3 +144,4 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
 Image.displayName = "Image"
 
 export { Image, imageVariants }
+

package/src/registry/ui/input-group.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -80,3 +82,4 @@ const InputAddon = React.forwardRef<
 InputAddon.displayName = "InputAddon"
 
 export { InputGroup, InputAddon }
+

package/src/registry/ui/kbd.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -10,7 +12,7 @@ interface KbdProps extends React.HTMLAttributes<HTMLElement> {
  * Kbd - Keyboard key display component
  * 
  * Usage:
- * <Kbd>⌘</Kbd>
+ * <Kbd>⌘</Kbd>
  * <Kbd keys={["Ctrl", "Shift", "P"]} />
  */
 const Kbd = React.forwardRef<HTMLElement, KbdProps>(
@@ -58,3 +60,4 @@ const Kbd = React.forwardRef<HTMLElement, KbdProps>(
 Kbd.displayName = "Kbd"
 
 export { Kbd }
+

package/src/registry/ui/label.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -32,3 +34,4 @@ const Label = React.forwardRef<
 Label.displayName = "Label"
 
 export { Label }
+

package/src/registry/ui/loading-spinner.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
@@ -106,3 +108,4 @@ const LoadingOverlay = React.forwardRef<HTMLDivElement, LoadingOverlayProps>(
 LoadingOverlay.displayName = "LoadingOverlay"
 
 export { LoadingSpinner, LoadingOverlay, spinnerVariants }
+

package/src/registry/ui/map.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { cn } from "@/lib/utils"
+// import dynamic from "next/dynamic"
+
+// Dynamically import Leaflet components only on client side
+import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet"
+import "leaflet/dist/leaflet.css"
+import L from "leaflet"
+
+// Fix for default marker icon in Next.js
+const fixLeafletIcon = () => {
+    delete (L.Icon.Default.prototype as any)._getIconUrl
+    L.Icon.Default.mergeOptions({
+        iconRetinaUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png",
+        iconUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png",
+        shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
+    })
+}
+
+interface MapProps {
+    lat: number
+    lng: number
+    zoom?: number
+    provider?: "osm" | "google"
+    className?: string
+    googleApiKey?: string
+}
+
+function ChangeView({ center, zoom }: { center: [number, number]; zoom: number }) {
+    const map = useMap()
+    map.setView(center, zoom)
+    return null
+}
+
+function OSMMap({ lat, lng, zoom = 13, className }: MapProps) {
+    useEffect(() => {
+        fixLeafletIcon()
+    }, [])
+
+    return (
+        <MapContainer center={[lat, lng]} zoom={zoom} scrollWheelZoom={false} className={cn("h-full w-full", className)}>
+            <ChangeView center={[lat, lng]} zoom={zoom} />
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            <Marker position={[lat, lng]}>
+                <Popup>
+                    We are here! <br /> Come visit us.
+                </Popup>
+            </Marker>
+        </MapContainer>
+    )
+}
+
+function GoogleMapEmbed({ lat, lng, zoom = 13, className, googleApiKey }: MapProps) {
+    // Falls back to simple no-key embed if no key provided (limited functionality)
+    // Or uses a proper specific place search if a key is provided.
+    // For agency demo without a key, generic iframe might be safer or just a placeholder message.
+
+    // Using unauthenticated iframe for location
+    const src = `https://maps.google.com/maps?q=${lat},${lng}&t=&z=${zoom}&ie=UTF8&iwloc=&output=embed`
+
+    return (
+        <iframe
+            width="100%"
+            height="100%"
+            className={cn("border-0", className)}
+            src={src}
+            allowFullScreen
+            loading="lazy"
+            referrerPolicy="no-referrer-when-downgrade"
+        />
+    )
+}
+
+export default function Map(props: MapProps) {
+    const [isMounted, setIsMounted] = useState(false)
+
+    useEffect(() => {
+        setIsMounted(true)
+    }, [])
+
+    if (!isMounted) {
+        return (
+            <div className={cn("flex items-center justify-center bg-muted animate-pulse", props.className)}>
+                <span className="text-muted-foreground">Loading Map...</span>
+            </div>
+        )
+    }
+
+    if (props.provider === "google") {
+        return <GoogleMapEmbed {...props} />
+    }
+
+    return <OSMMap {...props} />
+}

package/src/registry/ui/marquee.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+interface MarqueeProps {
+    className?: string;
+    reverse?: boolean;
+    pauseOnHover?: boolean;
+    children?: React.ReactNode;
+    vertical?: boolean;
+    repeat?: number;
+    [key: string]: any;
+}
+
+export default function Marquee({
+    className,
+    reverse,
+    pauseOnHover = false,
+    children,
+    vertical = false,
+    repeat = 4,
+    ...props
+}: MarqueeProps) {
+    return (
+        <div
+            {...props}
+            className={cn(
+                "group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
+                {
+                    "flex-row": !vertical,
+                    "flex-col": vertical,
+                },
+                className,
+            )}
+        >
+            {Array(repeat)
+                .fill(0)
+                .map((_, i) => (
+                    <div
+                        key={i}
+                        className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
+                            "animate-marquee flex-row": !vertical,
+                            "animate-marquee-vertical flex-col": vertical,
+                            "group-hover:[animation-play-state:paused]": pauseOnHover,
+                            "[animation-direction:reverse]": reverse,
+                        })}
+                    >
+                        {children}
+                    </div>
+                ))}
+        </div>
+    );
+}

package/src/registry/ui/native-select.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -47,3 +49,4 @@ const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
 NativeSelect.displayName = "NativeSelect"
 
 export { NativeSelect }
+

package/src/registry/ui/otp-input.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -150,3 +152,4 @@ const OtpInput = React.forwardRef<HTMLDivElement, OtpInputProps>(
 OtpInput.displayName = "OtpInput"
 
 export { OtpInput }
+

package/src/registry/ui/pagination.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "./button"
@@ -147,3 +149,4 @@ export {
     PaginationNext,
     PaginationEllipsis,
 }
+

package/src/registry/ui/popover.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { createPortal } from "react-dom"
 import { cn } from "@/lib/utils"
@@ -222,3 +224,4 @@ const PopoverContent = React.forwardRef<
 PopoverContent.displayName = "PopoverContent"
 
 export { Popover, PopoverTrigger, PopoverContent }
+

package/src/registry/ui/progress.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -47,3 +49,4 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
 Progress.displayName = "Progress"
 
 export { Progress }
+

package/src/registry/ui/radio.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -97,3 +99,4 @@ const RadioGroupItem = React.forwardRef<HTMLButtonElement, RadioGroupItemProps>(
 RadioGroupItem.displayName = "RadioGroupItem"
 
 export { RadioGroup, RadioGroupItem }
+

package/src/registry/ui/scroll-area.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -117,3 +119,4 @@ const ScrollBar = React.forwardRef<HTMLDivElement, ScrollBarProps>(
 ScrollBar.displayName = "ScrollBar"
 
 export { ScrollArea, ScrollBar }
+

package/src/registry/ui/scroll-to-top.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import * as React from "react"
+import { LuArrowUp } from "react-icons/lu"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { FaArrowUp } from "react-icons/fa"
+
+export function ScrollToTop() {
+    const [isVisible, setIsVisible] = React.useState(false)
+    const [scrollProgress, setScrollProgress] = React.useState(0)
+
+    React.useEffect(() => {
+        const handleScroll = () => {
+            // Visibility toggle
+            if (window.scrollY > 300) {
+                setIsVisible(true)
+            } else {
+                setIsVisible(false)
+            }
+
+            // Progress calculation
+            const winScroll = document.body.scrollTop || document.documentElement.scrollTop
+            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight
+            const scrolled = (winScroll / height) * 100
+            setScrollProgress(scrolled)
+        }
+
+        window.addEventListener("scroll", handleScroll)
+        return () => window.removeEventListener("scroll", handleScroll)
+    }, [])
+
+    const scrollToTop = () => {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth",
+        })
+    }
+
+    if (!isVisible) {
+        return null
+    }
+
+    // Circumference of the circle (r=28) -> 2 * pi * 28 ≈ 175.929
+    const circumference = 175.929
+    const strokeDashoffset = circumference - (scrollProgress / 100) * circumference
+
+    return (
+        <Button
+            variant="default"
+            size="icon"
+            onClick={scrollToTop}
+            aria-label="Scroll to top"
+            className={cn(
+                "relative group flex items-center justify-center cursor-pointer",
+                "h-10 w-10 md:h-16 md:w-16 rounded-full",
+                "bg-primary",
+                "shadow-lg transition-all duration-300 hover:scale-110 z-50",
+                "text-white"
+            )}
+        >
+            {/* Progress Ring SVG */}
+            <svg
+                className="absolute inset-0 -rotate-90 pointer-events-none !w-full !h-full"
+                width="100%"
+                height="100%"
+                viewBox="0 0 64 64"
+            >
+                {/* Background Circle Track */}
+                <circle
+                    cx="32"
+                    cy="32"
+                    r="28"
+                    stroke="rgba(255,255,255,0.2)"
+                    strokeWidth="4"
+                    fill="none"
+                />
+                {/* Progress Circle */}
+                <circle
+                    cx="32"
+                    cy="32"
+                    r="28"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                    fill="none"
+                    strokeDasharray={circumference}
+                    strokeDashoffset={strokeDashoffset}
+                    strokeLinecap="round"
+                    className="transition-all duration-150 ease-out text-white"
+                />
+            </svg>
+
+            {/* Icon */}
+            <div className="relative z-10">
+                <LuArrowUp className="!h-5 !w-5 md:!h-8 md:!w-8 drop-shadow-md" />
+            </div>
+        </Button>
+    )
+}

package/src/registry/ui/search.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -145,3 +147,4 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
 Search.displayName = "Search"
 
 export { Search }
+

package/src/registry/ui/select.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { createPortal } from "react-dom"
 import { cn } from "@/lib/utils"
@@ -288,3 +290,4 @@ const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
 SelectItem.displayName = "SelectItem"
 
 export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem }
+

package/src/registry/ui/separator.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -42,3 +44,4 @@ const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
 Separator.displayName = "Separator"
 
 export { Separator }
+

package/src/registry/ui/skeleton.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -24,3 +26,4 @@ const Skeleton = React.forwardRef<
 Skeleton.displayName = "Skeleton"
 
 export { Skeleton }
+

package/src/registry/ui/slider.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -192,3 +194,4 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
 Slider.displayName = "Slider"
 
 export { Slider }
+

package/src/registry/ui/slot.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -67,3 +69,4 @@ const Slot = React.forwardRef<HTMLElement, SlotProps>(
 Slot.displayName = "Slot"
 
 export { Slot }
+

package/src/registry/ui/star-rating.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -129,3 +131,4 @@ const StarRating = React.forwardRef<HTMLDivElement, StarRatingProps>(
 StarRating.displayName = "StarRating"
 
 export { StarRating }
+

package/src/registry/ui/switch.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -68,3 +70,4 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
 Switch.displayName = "Switch"
 
 export { Switch }
+

package/src/registry/ui/table-of-contents.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface HeadingInfo {
+    id: string
+    text: string
+    level: number
+    children?: HeadingInfo[]
+}
+
+interface TableOfContentsProps {
+    headings?: HeadingInfo[]
+    activeSection?: string | null
+    className?: string
+    onSectionClick?: (id: string) => void
+}
+
+export function TableOfContents({
+    headings = [],
+    activeSection,
+    className,
+    onSectionClick,
+}: TableOfContentsProps) {
+
+    const scrollToHeading = React.useCallback((headingId: string) => {
+        if (onSectionClick) {
+            onSectionClick(headingId)
+            return
+        }
+
+        const element = document.getElementById(headingId)
+        if (element) {
+            const offset = 80
+            const elementPosition =
+                element.getBoundingClientRect().top + window.pageYOffset
+            window.scrollTo({
+                top: elementPosition - offset,
+                behavior: "smooth",
+            })
+        }
+    }, [onSectionClick])
+
+    // Flatten all headings without hierarchy for simplicity
+    const flattenedHeadings = React.useMemo(() => {
+        const flatten = (headings: HeadingInfo[]): HeadingInfo[] => {
+            return headings.flatMap((heading) => [
+                heading,
+                ...(heading.children ? flatten(heading.children) : []),
+            ])
+        }
+        return flatten(headings)
+    }, [headings])
+
+    if (flattenedHeadings.length === 0) return null
+
+    return (
+        <div
+            className={cn(
+                "hidden lg:block sticky top-16 right-0 h-[calc(100vh-4rem)] w-full bg-background justify-self-end lg:max-w-64",
+                className
+            )}
+        >
+            <div className="flex flex-col h-full">
+                <div className="flex items-center justify-between p-4">
+                    <span className="font-medium text-foreground text-sm">
+                        On this page
+                    </span>
+                </div>
+
+                <nav className="flex-1 overflow-y-auto p-4 scrollbar-thin">
+                    <div className="space-y-1">
+                        {flattenedHeadings.map((heading) => (
+                            <button
+                                key={heading.id}
+                                onClick={() => scrollToHeading(heading.id)}
+                                className={cn(
+                                    "w-full text-left px-2 py-1.5 rounded text-xs transition-colors duration-200",
+                                    activeSection === heading.id
+                                        ? "text-primary bg-accent font-medium"
+                                        : "text-muted-foreground hover:text-foreground",
+                                )}
+                                style={{
+                                    paddingLeft: `${(heading.level - 1) * 12 + 8}px`,
+                                }}
+                            >
+                                {heading.text}
+                            </button>
+                        ))}
+                    </div>
+                </nav>
+            </div>
+        </div>
+    )
+}

package/src/registry/ui/table.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -134,3 +136,4 @@ export {
     TableCell,
     TableCaption,
 }
+

package/src/registry/ui/tabs.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -120,3 +122,4 @@ const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(
 TabsContent.displayName = "TabsContent"
 
 export { Tabs, TabsList, TabsTrigger, TabsContent }
+

package/src/registry/ui/text.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
@@ -59,3 +61,4 @@ const Text = React.forwardRef<HTMLElement, TextProps>(
 Text.displayName = "Text"
 
 export { Text, textVariants }
+

package/src/registry/ui/textarea.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -37,3 +39,4 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 Textarea.displayName = "Textarea"
 
 export { Textarea }
+

package/src/registry/ui/toast.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
@@ -93,3 +95,4 @@ const ToastAction = React.forwardRef<
 ToastAction.displayName = "ToastAction"
 
 export { Toast, ToastTitle, ToastDescription, ToastAction, toastVariants }
+

package/src/registry/ui/tooltip.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { createPortal } from "react-dom"
 import { cn } from "@/lib/utils"
@@ -139,3 +141,4 @@ const TooltipContent = React.forwardRef<
 TooltipContent.displayName = "TooltipContent"
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+

package/src/registry/ui/whatsapp.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import * as React from "react"
+import { FaWhatsapp } from "react-icons/fa"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+interface WhatsAppProps {
+    phoneNumber?: string
+    message?: string
+}
+
+export function WhatsApp({
+    phoneNumber = "1234567890", // Default placeholder
+    message = "Hello! I would like to know more about your services."
+}: WhatsAppProps) {
+    const handleClick = () => {
+        const url = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`
+        window.open(url, "_blank")
+    }
+
+    return (
+        <Button
+            variant="default"
+            size="icon"
+            onClick={handleClick}
+            className={cn(
+                "rounded-full h-10 w-10 md:h-16 md:w-16 shadow-lg transition-all duration-300 hover:scale-110",
+                "bg-[#25D366] hover:bg-[#20bd5a] text-white"
+            )}
+            aria-label="Contact us on WhatsApp"
+        >
+            <FaWhatsapp className="!h-5 !w-5 md:!h-8 md:!w-8" />
+        </Button>
+    )
+}