@moontra/moonui-pro 2.18.6 → 2.20.0

package/src/components/ui/select.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp, Loader2 } from "lucide-react"
+import { Check, ChevronDown, ChevronUp, Loader2, Search, X } from "lucide-react"
 
 import { cn } from "../../lib/utils"
 
@@ -39,6 +39,12 @@ interface MoonUISelectTriggerProProps extends React.ComponentPropsWithoutRef<typ
   leftIcon?: React.ReactNode;
   /** Icon displayed on the right (instead of default chevron) */
   rightIcon?: React.ReactNode;
+  /** Enable clear button */
+  clearable?: boolean;
+  /** On clear callback */
+  onClear?: () => void;
+  /** Custom placeholder when value is selected */
+  selectedPlaceholder?: string;
 }
 
 const MoonUISelectTriggerPro = React.forwardRef<
@@ -140,43 +146,124 @@ const MoonUISelectScrollDownButtonPro = React.forwardRef<
 MoonUISelectScrollDownButtonPro.displayName =
   SelectPrimitive.ScrollDownButton.displayName
 
+interface MoonUISelectContentProProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
+  /** Enable search functionality */
+  enableSearch?: boolean;
+  /** Search placeholder */
+  searchPlaceholder?: string;
+  /** No results text */
+  noResultsText?: string;
+  /** Loading search results */
+  searchLoading?: boolean;
+  /** Custom search icon */
+  searchIcon?: React.ReactNode;
+}
+
 const MoonUISelectContentPro = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "item-aligned", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        ["relative z-50 max-h-96 min-w-[8rem] overflow-hidden", 
-        "rounded-md border border-gray-200 dark:border-gray-700",
-        "bg-white dark:bg-gray-900 text-foreground", 
-        "shadow-lg dark:shadow-gray-900/20",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", 
-        "data-[state=open]:duration-150"],
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <MoonUISelectScrollUpButtonPro />
-      <SelectPrimitive.Viewport
+  MoonUISelectContentProProps
+>(({ className, children, position = "popper", enableSearch, searchPlaceholder = "Search...", noResultsText = "No results found", searchLoading, searchIcon, ...props }, ref) => {
+  const [searchValue, setSearchValue] = React.useState("");
+  
+  // Filter children based on search
+  const filteredChildren = React.useMemo(() => {
+    if (!enableSearch || !searchValue) return children;
+    
+    const searchLower = searchValue.toLowerCase();
+    return React.Children.toArray(children).filter((child) => {
+      if (!React.isValidElement(child)) return true;
+      
+      // Keep groups and labels
+      if (child.type === MoonUISelectGroupPro || child.type === MoonUISelectLabelPro || child.type === MoonUISelectSeparatorPro) {
+        return true;
+      }
+      
+      // Filter items
+      if (child.type === MoonUISelectItemPro) {
+        const reactChild = child as React.ReactElement<any>;
+        const text = reactChild.props.children?.toString().toLowerCase() || "";
+        return text.includes(searchLower);
+      }
+      
+      return true;
+    });
+  }, [children, searchValue, enableSearch]);
+  
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
         className={cn(
-          "p-1",
+          ["relative z-50 max-h-96 min-w-[8rem] overflow-hidden", 
+          "rounded-md border border-gray-200 dark:border-gray-700",
+          "bg-white dark:bg-gray-900 text-foreground", 
+          "shadow-lg dark:shadow-gray-900/20",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", 
+          "data-[state=open]:duration-150"],
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
         )}
+        position={position}
+        sideOffset={5}
+        {...props}
       >
-        {children}
-      </SelectPrimitive.Viewport>
-      <MoonUISelectScrollDownButtonPro />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
+        {enableSearch && (
+          <div className="p-2 border-b border-gray-200 dark:border-gray-700">
+            <div className="flex items-center gap-2 px-2 py-1.5 rounded-md bg-gray-100 dark:bg-gray-800">
+              {searchIcon || <Search className="h-4 w-4 text-gray-500 dark:text-gray-400" />}
+              <input
+                type="text"
+                placeholder={searchPlaceholder}
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                className="flex-1 bg-transparent outline-none text-sm placeholder:text-gray-500 dark:placeholder:text-gray-400"
+                onClick={(e) => e.stopPropagation()}
+                onKeyDown={(e) => e.stopPropagation()}
+              />
+              {searchValue && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setSearchValue("");
+                  }}
+                  className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+        <MoonUISelectScrollUpButtonPro />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          )}
+        >
+          {searchLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
+            </div>
+          ) : filteredChildren && React.Children.count(filteredChildren) > 0 ? (
+            filteredChildren
+          ) : enableSearch ? (
+            <div className="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
+              {noResultsText}
+            </div>
+          ) : (
+            children
+          )}
+        </SelectPrimitive.Viewport>
+        <MoonUISelectScrollDownButtonPro />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+})
 MoonUISelectContentPro.displayName = SelectPrimitive.Content.displayName
 
 const MoonUISelectLabelPro = React.forwardRef<
@@ -203,16 +290,20 @@ interface MoonUISelectItemProProps extends React.ComponentPropsWithoutRef<typeof
   rightIcon?: React.ReactNode;
   /** Custom indicator icon (instead of default check) */
   customIndicator?: React.ReactNode;
+  /** Enable hover scale animation */
+  enableHoverScale?: boolean;
+  /** Description text shown below the main text */
+  description?: string;
 }
 
 const MoonUISelectItemPro = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
   MoonUISelectItemProProps
->(({ className, children, variant = "default", size = "md", rightIcon, customIndicator, ...props }, ref) => (
+>(({ className, children, variant = "default", size = "md", rightIcon, customIndicator, enableHoverScale, description, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all duration-150",
       
       /* Size variants */
       size === "sm" && "py-1 pl-7 pr-2 text-xs",
@@ -226,6 +317,9 @@ const MoonUISelectItemPro = React.forwardRef<
       variant === "success" && "text-success dark:text-green-400 focus:bg-success/10 dark:focus:bg-green-900/20 focus:text-success dark:focus:text-green-300",
       variant === "warning" && "text-warning dark:text-yellow-400 focus:bg-warning/10 dark:focus:bg-yellow-900/20 focus:text-warning dark:focus:text-yellow-300",
       
+      /* Hover scale animation */
+      enableHoverScale && "hover:scale-[1.02] hover:pl-9",
+      
       className
     )}
     {...props}
@@ -236,7 +330,12 @@ const MoonUISelectItemPro = React.forwardRef<
       </SelectPrimitive.ItemIndicator>
     </span>
 
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    <div className="flex-1">
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      {description && (
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{description}</p>
+      )}
+    </div>
     
     {rightIcon && (
       <span className="ml-auto pl-2 opacity-70">

package/src/components/ui/toggle.tsx

@@ -7,39 +7,102 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../lib/utils"
 
 const MoonUItoggleVariantsPro = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+        default: "bg-transparent hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:hover:bg-muted dark:hover:text-muted-foreground dark:data-[state=on]:bg-accent dark:data-[state=on]:text-accent-foreground",
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:border-input dark:hover:bg-accent dark:hover:text-accent-foreground dark:data-[state=on]:bg-accent dark:data-[state=on]:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground data-[state=on]:bg-transparent data-[state=on]:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground dark:data-[state=on]:text-accent-foreground",
+        primary: "bg-transparent hover:bg-primary/10 hover:text-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground dark:hover:bg-primary/20 dark:hover:text-primary dark:data-[state=on]:bg-primary dark:data-[state=on]:text-primary-foreground",
+        secondary: "bg-transparent hover:bg-secondary/10 hover:text-secondary data-[state=on]:bg-secondary data-[state=on]:text-secondary-foreground dark:hover:bg-secondary/20 dark:hover:text-secondary dark:data-[state=on]:bg-secondary dark:data-[state=on]:text-secondary-foreground",
+        success: "bg-transparent hover:bg-success/10 hover:text-success data-[state=on]:bg-success data-[state=on]:text-success-foreground dark:hover:bg-success/20 dark:hover:text-success dark:data-[state=on]:bg-success dark:data-[state=on]:text-success-foreground",
+        warning: "bg-transparent hover:bg-warning/10 hover:text-warning data-[state=on]:bg-warning data-[state=on]:text-warning-foreground dark:hover:bg-warning/20 dark:hover:text-warning dark:data-[state=on]:bg-warning dark:data-[state=on]:text-warning-foreground",
+        danger: "bg-transparent hover:bg-destructive/10 hover:text-destructive data-[state=on]:bg-destructive data-[state=on]:text-destructive-foreground dark:hover:bg-destructive/20 dark:hover:text-destructive dark:data-[state=on]:bg-destructive dark:data-[state=on]:text-destructive-foreground",
+        gradient: "bg-transparent hover:bg-gradient-to-r hover:from-purple-500/10 hover:to-pink-500/10 hover:text-purple-600 data-[state=on]:bg-gradient-to-r data-[state=on]:from-purple-600 data-[state=on]:to-pink-600 data-[state=on]:text-white dark:hover:from-purple-500/20 dark:hover:to-pink-500/20 dark:hover:text-purple-400 dark:data-[state=on]:from-purple-600 dark:data-[state=on]:to-pink-600 dark:data-[state=on]:text-white",
       },
       size: {
-        default: "h-10 px-3",
-        sm: "h-9 px-2.5",
-        lg: "h-11 px-5",
+        xs: "h-7 px-2 text-xs",
+        sm: "h-8 px-2.5 text-xs",
+        default: "h-9 px-3",
+        md: "h-10 px-4",
+        lg: "h-11 px-6",
+        xl: "h-12 px-8 text-base",
+      },
+      shape: {
+        default: "rounded-md",
+        square: "rounded-none",
+        rounded: "rounded-lg",
+        pill: "rounded-full",
       },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
+      shape: "default",
     },
   }
 )
 
-export interface MoonUIToggleProProps extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, VariantProps<typeof MoonUItoggleVariantsPro> {}
+export interface MoonUIToggleProProps extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, VariantProps<typeof MoonUItoggleVariantsPro> {
+  /** Loading state */
+  loading?: boolean;
+  /** Show a badge with a count */
+  badge?: string | number;
+  /** Badge variant */
+  badgeVariant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
+  /** Icon to show when toggled on */
+  iconOn?: React.ReactNode;
+  /** Icon to show when toggled off */
+  iconOff?: React.ReactNode;
+  /** Position of icon relative to text */
+  iconPosition?: "left" | "right";
+}
 
 const MoonUITogglePro = React.forwardRef<
   React.ElementRef<typeof TogglePrimitive.Root>,
   MoonUIToggleProProps
->(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    className={cn(MoonUItoggleVariantsPro({ variant, size, className }))}
-    {...props}
-  />
-))
+>(({ className, variant, size, shape, loading, badge, badgeVariant = "default", iconOn, iconOff, iconPosition = "left", children, pressed, onPressedChange, defaultPressed, ...props }, ref) => {
+  const icon = pressed ? iconOn : iconOff;
+  
+  return (
+    <TogglePrimitive.Root
+      ref={ref}
+      className={cn(MoonUItoggleVariantsPro({ variant, size, shape }), className)}
+      pressed={pressed}
+      onPressedChange={onPressedChange}
+      defaultPressed={defaultPressed}
+      disabled={loading || props.disabled}
+      {...props}
+    >
+      {loading ? (
+        <div className="flex items-center gap-2">
+          <div className="h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent" />
+          {children && <span>{children}</span>}
+        </div>
+      ) : (
+        <div className="flex items-center gap-2">
+          {icon && iconPosition === "left" && <span className="flex-shrink-0">{icon}</span>}
+          {children && <span>{children}</span>}
+          {icon && iconPosition === "right" && <span className="flex-shrink-0">{icon}</span>}
+          {badge !== undefined && (
+            <span className={cn(
+              "ml-1 inline-flex items-center justify-center rounded-full px-1.5 text-xs font-semibold",
+              badgeVariant === "default" && "bg-muted text-muted-foreground",
+              badgeVariant === "primary" && "bg-primary text-primary-foreground",
+              badgeVariant === "secondary" && "bg-secondary text-secondary-foreground",
+              badgeVariant === "success" && "bg-success text-success-foreground",
+              badgeVariant === "warning" && "bg-warning text-warning-foreground",
+              badgeVariant === "danger" && "bg-destructive text-destructive-foreground",
+            )}>
+              {badge}
+            </span>
+          )}
+        </div>
+      )}
+    </TogglePrimitive.Root>
+  )
+})
 
 MoonUITogglePro.displayName = TogglePrimitive.Root.displayName
 

package/src/components/virtual-list/index.tsx

@@ -25,15 +25,15 @@ export interface VirtualListProps<T = any> {
   // Animation props
   enableAnimations?: boolean
   itemEnterAnimation?: {
-    initial?: object
-    animate?: object
-    exit?: object
-    transition?: object
+    initial?: any
+    animate?: any
+    exit?: any
+    transition?: any
   }
   listAnimation?: {
-    initial?: object
-    animate?: object
-    transition?: object
+    initial?: any
+    animate?: any 
+    transition?: any
   }
   staggerDelay?: number
 }

package/src/index.ts

@@ -2,13 +2,13 @@
 // Development environment imports from local packages
 
 // Import CSS for auto-loading
-import "./styles/index.css"
+import "./styles/index.css";
 
 // Utilities
-export { cn } from "./lib/utils"
+export { cn } from "./lib/utils";
 
 // Pro Components (Commercial License) - from packages/moonui-pro
-export * from "./components"
+export * from "./components";
 
 // Enhanced Components - Premium animations and effects
-export * as Enhanced from "./components/enhanced"
+// export * from "./components/enhanced"

package/src/lib/component-metadata.ts

@@ -0,0 +1,18 @@
+export interface ComponentMetadata {
+  name: string
+  category: string
+  isPro: boolean
+  path: string
+}
+
+export const componentsMetadata: Record<string, ComponentMetadata> = {
+  'button': { name: 'Button', category: 'ui', isPro: false, path: 'button' },
+  'enhanced-button': { name: 'Enhanced Button', category: 'enhanced', isPro: true, path: 'enhanced/button' },
+  'data-table': { name: 'Data Table', category: 'data', isPro: true, path: 'data-table' },
+  'calendar-pro': { name: 'Calendar Pro', category: 'data', isPro: true, path: 'calendar-pro' },
+  // Add more components as needed
+}
+
+export function getComponentMetadata(componentName: string): ComponentMetadata | undefined {
+  return componentsMetadata[componentName]
+}

package/src/lib/paddle.ts

@@ -0,0 +1,17 @@
+export interface PaddleEnvironment {
+  vendor: number
+  environment: 'production' | 'sandbox'
+}
+
+export interface PaddleCheckout {
+  Items: Array<{
+    price_id: string
+    quantity: number
+  }>
+  custom_data?: Record<string, any>
+}
+
+export const paddleConfig: PaddleEnvironment = {
+  vendor: parseInt(process.env.NEXT_PUBLIC_PADDLE_VENDOR_ID || '0'),
+  environment: (process.env.NEXT_PUBLIC_PADDLE_ENVIRONMENT || 'sandbox') as 'production' | 'sandbox'
+}

package/src/patterns/login-form/index.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { cn } from '../../utils/cn'
 import { useLicenseCheck } from '../../hooks/use-license-check'
 import { LicenseError } from '../../components/license-error'
-import { Skeleton } from '../../components/skeleton'
+import { Skeleton } from '../../components/ui/skeleton'
 import type { LoginFormProps, LoginData } from './types'
 
 export function LoginFormCore({

package/src/patterns/login-form/types.ts

@@ -1,4 +1,4 @@
-interface LoginFormTheme {
+export interface LoginFormTheme {
   primary?: string
   secondary?: string
   background?: string
@@ -7,7 +7,7 @@ interface LoginFormTheme {
   spacing?: 'compact' | 'normal' | 'relaxed'
 }
 
-interface LoginFormFeatures {
+export interface LoginFormFeatures {
   socialLogin?: boolean | string[]
   rememberMe?: boolean
   forgotPassword?: boolean
@@ -15,7 +15,7 @@ interface LoginFormFeatures {
   passwordStrength?: boolean
 }
 
-interface LoginFormTexts {
+export interface LoginFormTexts {
   title?: string
   subtitle?: string
   emailLabel?: string
@@ -27,18 +27,18 @@ interface LoginFormTexts {
   orContinueWith?: string
 }
 
-interface LoginData {
+export interface LoginData {
   email: string
   password: string
   rememberMe?: boolean
 }
 
-interface ValidationRules {
+export interface ValidationRules {
   email?: (value: string) => string | null
   password?: (value: string) => string | null
 }
 
-interface LoginFormProps {
+export interface LoginFormProps {
   // Stil özelleştirme
   theme?: LoginFormTheme
   className?: string

package/src/styles/index.css

@@ -1,8 +1,8 @@
 /* MoonUI Pro - Complete CSS System */
-@import "./tailwind.css";
-/* Tokens and design-system CSS removed to prevent global scope pollution */
-/* @import "./tokens.css"; */
-/* @import "./design-system.css"; */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @import "./advanced-chart.css";
 @import "./calendar.css";
 
@@ -10,6 +10,16 @@
 @import "react-grid-layout/css/styles.css";
 @import "react-resizable/css/styles.css";
 
+/* Global Keyframes */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 /* Dashboard Grid Layout Overrides */
 .react-grid-layout {
   position: relative !important;

package/src/types/next-auth.d.ts

@@ -0,0 +1,21 @@
+import { DefaultSession } from "next-auth";
+
+declare module "next-auth" {
+  interface User {
+    id: string;
+    email?: string | null;
+    name?: string | null;
+    image?: string | null;
+    role?: string;
+    subscription?: {
+      status: string;
+      plan?: string;
+      currentPeriodEnd?: string;
+      expiresAt?: string;
+    };
+  }
+
+  interface Session extends DefaultSession {
+    user: User;
+  }
+}

package/src/use-local-storage.tsx

@@ -4,10 +4,10 @@ import { useState, useEffect } from 'react'
 export function useLocalStorage<T>(
   key: string,
   initialValue: T
-): [T, (value: T | ((val: T) => T)) => void] {
+): [T | undefined, (value: T | undefined | ((val: T | undefined) => T | undefined)) => void] {
   // State to store our value
   // Pass initial state function to useState so logic is only executed once
-  const [storedValue, setStoredValue] = useState<T>(() => {
+  const [storedValue, setStoredValue] = useState<T | undefined>(() => {
     if (typeof window === 'undefined') {
       return initialValue
     }
@@ -25,7 +25,7 @@ export function useLocalStorage<T>(
   })
 
   // Return a wrapped version of useState's setter function that persists the new value to localStorage
-  const setValue = (value: T | ((val: T) => T)) => {
+  const setValue = (value: T | undefined | ((val: T | undefined) => T | undefined)) => {
     try {
       // Allow value to be a function so we have the same API as useState
       const valueToStore = value instanceof Function ? value(storedValue) : value

package/src/use-scroll-animation.ts

@@ -12,9 +12,8 @@ interface UseScrollAnimationOptions {
 export function useScrollAnimation(options: UseScrollAnimationOptions = {}) {
   const ref = useRef<HTMLElement>(null)
   const isInView = useInView(ref, {
-    threshold: options.threshold || 0.1,
+    amount: options.threshold || 0.1,
     once: options.triggerOnce ?? true,
-    margin: options.rootMargin || '-100px',
   })
 
   return { ref, isInView }
@@ -106,8 +105,7 @@ export function useInfiniteScroll(
 ) {
   const ref = useRef<HTMLElement>(null)
   const isInView = useInView(ref, {
-    threshold: options.threshold || 0.1,
-    margin: options.rootMargin || '100px',
+    amount: options.threshold || 0.1,
   })
 
   useEffect(() => {
@@ -153,7 +151,7 @@ export function useScrollTriggeredCounter(
   const ref = useRef<HTMLElement>(null)
   
   const isInView = useInView(ref, {
-    threshold: 0.5,
+    amount: 0.5,
     once: true
   })