@moontra/moonui-pro 2.20.2 → 2.20.3

package/src/styles/tokens.css

@@ -1,455 +0,0 @@
-/* MoonUI Design Tokens */
-
-/* Scoped to moonui-pro components only */
-.moonui-pro {
-  /* === COLOR SYSTEM === */
-  
-  /* Primary Colors */
-  --primary-50: 240 249 255;
-  --primary-100: 224 242 254;
-  --primary-200: 186 230 253;
-  --primary-300: 125 211 252;
-  --primary-400: 56 189 248;
-  --primary-500: 14 165 233;
-  --primary-600: 2 132 199;
-  --primary-700: 3 105 161;
-  --primary-800: 7 89 133;
-  --primary-900: 12 74 110;
-  --primary-950: 8 47 73;
-  
-  /* Secondary Colors */
-  --secondary-50: 248 250 252;
-  --secondary-100: 241 245 249;
-  --secondary-200: 226 232 240;
-  --secondary-300: 203 213 225;
-  --secondary-400: 148 163 184;
-  --secondary-500: 100 116 139;
-  --secondary-600: 71 85 105;
-  --secondary-700: 51 65 85;
-  --secondary-800: 30 41 59;
-  --secondary-900: 15 23 42;
-  --secondary-950: 2 6 23;
-  
-  /* Semantic Colors */
-  --success-50: 240 253 244;
-  --success-100: 220 252 231;
-  --success-200: 187 247 208;
-  --success-300: 134 239 172;
-  --success-400: 74 222 128;
-  --success-500: 34 197 94;
-  --success-600: 22 163 74;
-  --success-700: 21 128 61;
-  --success-800: 22 101 52;
-  --success-900: 20 83 45;
-  --success-950: 5 46 22;
-  
-  --warning-50: 254 252 232;
-  --warning-100: 254 249 195;
-  --warning-200: 254 240 138;
-  --warning-300: 253 224 71;
-  --warning-400: 250 204 21;
-  --warning-500: 234 179 8;
-  --warning-600: 202 138 4;
-  --warning-700: 161 98 7;
-  --warning-800: 133 77 14;
-  --warning-900: 113 63 18;
-  --warning-950: 66 32 6;
-  
-  --error-50: 254 242 242;
-  --error-100: 254 226 226;
-  --error-200: 254 202 202;
-  --error-300: 252 165 165;
-  --error-400: 248 113 113;
-  --error-500: 239 68 68;
-  --error-600: 220 38 38;
-  --error-700: 185 28 28;
-  --error-800: 153 27 27;
-  --error-900: 127 29 29;
-  --error-950: 69 10 10;
-  
-  /* Theme Colors */
-  --background: 0 0% 100%;
-  --foreground: 222.2 47.4% 11.2%;
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 47.4% 11.2%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 47.4% 11.2%;
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 100% 50%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 215 20.2% 65.1%;
-  --chart-1: 12 76% 61%;
-  --chart-2: 173 58% 39%;
-  --chart-3: 197 37% 24%;
-  --chart-4: 43 74% 66%;
-  --chart-5: 27 87% 67%;
-  
-  /* === TYPOGRAPHY === */
-  
-  /* Font Families */
-  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --font-serif: 'Crimson Text', Georgia, 'Times New Roman', serif;
-  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
-  
-  /* Font Sizes */
-  --text-xs: 0.75rem;      /* 12px */
-  --text-sm: 0.875rem;     /* 14px */
-  --text-base: 1rem;       /* 16px */
-  --text-lg: 1.125rem;     /* 18px */
-  --text-xl: 1.25rem;      /* 20px */
-  --text-2xl: 1.5rem;      /* 24px */
-  --text-3xl: 1.875rem;    /* 30px */
-  --text-4xl: 2.25rem;     /* 36px */
-  --text-5xl: 3rem;        /* 48px */
-  --text-6xl: 3.75rem;     /* 60px */
-  --text-7xl: 4.5rem;      /* 72px */
-  --text-8xl: 6rem;        /* 96px */
-  --text-9xl: 8rem;        /* 128px */
-  
-  /* Line Heights */
-  --leading-none: 1;
-  --leading-tight: 1.25;
-  --leading-snug: 1.375;
-  --leading-normal: 1.5;
-  --leading-relaxed: 1.625;
-  --leading-loose: 2;
-  
-  /* Font Weights */
-  --font-thin: 100;
-  --font-extralight: 200;
-  --font-light: 300;
-  --font-normal: 400;
-  --font-medium: 500;
-  --font-semibold: 600;
-  --font-bold: 700;
-  --font-extrabold: 800;
-  --font-black: 900;
-  
-  /* === SPACING SYSTEM === */
-  
-  --spacing-0: 0;
-  --spacing-px: 1px;
-  --spacing-0-5: 0.125rem;   /* 2px */
-  --spacing-1: 0.25rem;      /* 4px */
-  --spacing-1-5: 0.375rem;   /* 6px */
-  --spacing-2: 0.5rem;       /* 8px */
-  --spacing-2-5: 0.625rem;   /* 10px */
-  --spacing-3: 0.75rem;      /* 12px */
-  --spacing-3-5: 0.875rem;   /* 14px */
-  --spacing-4: 1rem;         /* 16px */
-  --spacing-5: 1.25rem;      /* 20px */
-  --spacing-6: 1.5rem;       /* 24px */
-  --spacing-7: 1.75rem;      /* 28px */
-  --spacing-8: 2rem;         /* 32px */
-  --spacing-9: 2.25rem;      /* 36px */
-  --spacing-10: 2.5rem;      /* 40px */
-  --spacing-11: 2.75rem;     /* 44px */
-  --spacing-12: 3rem;        /* 48px */
-  --spacing-14: 3.5rem;      /* 56px */
-  --spacing-16: 4rem;        /* 64px */
-  --spacing-20: 5rem;        /* 80px */
-  --spacing-24: 6rem;        /* 96px */
-  --spacing-28: 7rem;        /* 112px */
-  --spacing-32: 8rem;        /* 128px */
-  --spacing-36: 9rem;        /* 144px */
-  --spacing-40: 10rem;       /* 160px */
-  --spacing-44: 11rem;       /* 176px */
-  --spacing-48: 12rem;       /* 192px */
-  --spacing-52: 13rem;       /* 208px */
-  --spacing-56: 14rem;       /* 224px */
-  --spacing-60: 15rem;       /* 240px */
-  --spacing-64: 16rem;       /* 256px */
-  --spacing-72: 18rem;       /* 288px */
-  --spacing-80: 20rem;       /* 320px */
-  --spacing-96: 24rem;       /* 384px */
-  
-  /* === BORDER RADIUS === */
-  
-  --radius-none: 0;
-  --radius-sm: 0.125rem;     /* 2px */
-  --radius-base: 0.25rem;    /* 4px */
-  --radius-md: 0.375rem;     /* 6px */
-  --radius-lg: 0.5rem;       /* 8px */
-  --radius-xl: 0.75rem;      /* 12px */
-  --radius-2xl: 1rem;        /* 16px */
-  --radius-3xl: 1.5rem;      /* 24px */
-  --radius-full: 9999px;
-  
-  /* === SHADOWS & ELEVATION === */
-  
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  --shadow-none: 0 0 #0000;
-  
-  /* Elevation System */
-  --elevation-0: var(--shadow-none);
-  --elevation-1: var(--shadow-sm);
-  --elevation-2: var(--shadow-base);
-  --elevation-3: var(--shadow-md);
-  --elevation-4: var(--shadow-lg);
-  --elevation-5: var(--shadow-xl);
-  --elevation-6: var(--shadow-2xl);
-  
-  /* === ANIMATION SYSTEM === */
-  
-  /* Duration Scale */
-  --duration-75: 75ms;
-  --duration-100: 100ms;
-  --duration-150: 150ms;
-  --duration-200: 200ms;
-  --duration-300: 300ms;
-  --duration-500: 500ms;
-  --duration-700: 700ms;
-  --duration-1000: 1000ms;
-  
-  /* Easing Functions */
-  --ease-linear: linear;
-  --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  
-  /* Animation Presets */
-  --animate-fade-in: fadeIn var(--duration-300) var(--ease-out);
-  --animate-fade-out: fadeOut var(--duration-300) var(--ease-in);
-  --animate-slide-in-up: slideInUp var(--duration-300) var(--ease-out);
-  --animate-slide-in-down: slideInDown var(--duration-300) var(--ease-out);
-  --animate-slide-in-left: slideInLeft var(--duration-300) var(--ease-out);
-  --animate-slide-in-right: slideInRight var(--duration-300) var(--ease-out);
-  --animate-scale-in: scaleIn var(--duration-200) var(--ease-out);
-  --animate-scale-out: scaleOut var(--duration-200) var(--ease-in);
-  --animate-bounce: bounce var(--duration-500) var(--ease-bounce);
-  --animate-pulse: pulse var(--duration-1000) var(--ease-in-out) infinite;
-  --animate-spin: spin var(--duration-1000) var(--ease-linear) infinite;
-  
-  /* === BREAKPOINTS === */
-  
-  --breakpoint-sm: 640px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 1024px;
-  --breakpoint-xl: 1280px;
-  --breakpoint-2xl: 1536px;
-  
-  /* Container Sizes */
-  --container-sm: 640px;
-  --container-md: 768px;
-  --container-lg: 1024px;
-  --container-xl: 1280px;
-  --container-2xl: 1536px;
-  
-  /* === Z-INDEX SCALE === */
-  
-  --z-0: 0;
-  --z-10: 10;
-  --z-20: 20;
-  --z-30: 30;
-  --z-40: 40;
-  --z-50: 50;
-  --z-auto: auto;
-  
-  /* Semantic Z-Index */
-  --z-dropdown: 1000;
-  --z-sticky: 1020;
-  --z-fixed: 1030;
-  --z-modal-backdrop: 1040;
-  --z-modal: 1050;
-  --z-popover: 1060;
-  --z-tooltip: 1070;
-  --z-toast: 1080;
-  
-  /* === COMPONENT-SPECIFIC TOKENS === */
-  
-  /* Button Tokens */
-  --button-height-sm: 2rem;      /* 32px */
-  --button-height-md: 2.5rem;    /* 40px */
-  --button-height-lg: 3rem;      /* 48px */
-  --button-height-xl: 3.5rem;    /* 56px */
-  
-  --button-padding-sm: 0.5rem 0.75rem;
-  --button-padding-md: 0.625rem 1rem;
-  --button-padding-lg: 0.75rem 1.25rem;
-  --button-padding-xl: 1rem 1.5rem;
-  
-  --button-font-size-sm: var(--text-sm);
-  --button-font-size-md: var(--text-base);
-  --button-font-size-lg: var(--text-lg);
-  --button-font-size-xl: var(--text-xl);
-  
-  /* Input Tokens */
-  --input-height-sm: 2rem;       /* 32px */
-  --input-height-md: 2.5rem;     /* 40px */
-  --input-height-lg: 3rem;       /* 48px */
-  --input-height-xl: 3.5rem;     /* 56px */
-  
-  --input-padding-sm: 0.5rem 0.75rem;
-  --input-padding-md: 0.625rem 1rem;
-  --input-padding-lg: 0.75rem 1.25rem;
-  --input-padding-xl: 1rem 1.5rem;
-  
-  --input-border-width: 1px;
-  --input-border-radius: var(--radius-md);
-  --input-focus-ring-width: 2px;
-  --input-focus-ring-offset: 2px;
-  
-  /* Card Tokens */
-  --card-padding-sm: 1rem;
-  --card-padding-md: 1.5rem;
-  --card-padding-lg: 2rem;
-  --card-padding-xl: 2.5rem;
-  
-  --card-border-radius: var(--radius-lg);
-  --card-border-width: 1px;
-  --card-shadow: var(--elevation-1);
-  --card-hover-shadow: var(--elevation-2);
-}
-
-/* === DARK MODE === */
-
-.moonui-pro.dark,
-.dark .moonui-pro {
-  --background: 224 71% 4%;
-  --foreground: 213 31% 91%;
-  --card: 224 71% 4%;
-  --card-foreground: 213 31% 91%;
-  --popover: 224 71% 4%;
-  --popover-foreground: 213 31% 91%;
-  --primary: 210 40% 98%;
-  --primary-foreground: 222.2 47.4% 1.2%;
-  --secondary: 222.2 84% 4.9%;
-  --secondary-foreground: 210 40% 98%;
-  --muted: 223 47% 11%;
-  --muted-foreground: 215.4 16.3% 56.9%;
-  --accent: 216 34% 17%;
-  --accent-foreground: 210 40% 98%;
-  --destructive: 0 63% 31%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 216 34% 17%;
-  --input: 216 34% 17%;
-  --ring: 216 34% 17%;
-  --chart-1: 220 70% 50%;
-  --chart-2: 160 60% 45%;
-  --chart-3: 30 80% 55%;
-  --chart-4: 280 65% 60%;
-  --chart-5: 340 75% 55%;
-}
-
-/* === KEYFRAMES === */
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes fadeOut {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}
-
-@keyframes slideInUp {
-  from { transform: translateY(100%); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-
-@keyframes slideInDown {
-  from { transform: translateY(-100%); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-
-@keyframes slideInLeft {
-  from { transform: translateX(-100%); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
-}
-
-@keyframes slideInRight {
-  from { transform: translateX(100%); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
-}
-
-@keyframes scaleIn {
-  from { transform: scale(0.95); opacity: 0; }
-  to { transform: scale(1); opacity: 1; }
-}
-
-@keyframes scaleOut {
-  from { transform: scale(1); opacity: 1; }
-  to { transform: scale(0.95); opacity: 0; }
-}
-
-@keyframes bounce {
-  0%, 20%, 53%, 80%, 100% {
-    transform: translate3d(0, 0, 0);
-  }
-  40%, 43% {
-    transform: translate3d(0, -30px, 0);
-  }
-  70% {
-    transform: translate3d(0, -15px, 0);
-  }
-  90% {
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/* === UTILITY CLASSES === */
-
-.animate-fade-in { animation: var(--animate-fade-in); }
-.animate-fade-out { animation: var(--animate-fade-out); }
-.animate-slide-in-up { animation: var(--animate-slide-in-up); }
-.animate-slide-in-down { animation: var(--animate-slide-in-down); }
-.animate-slide-in-left { animation: var(--animate-slide-in-left); }
-.animate-slide-in-right { animation: var(--animate-slide-in-right); }
-.animate-scale-in { animation: var(--animate-scale-in); }
-.animate-scale-out { animation: var(--animate-scale-out); }
-.animate-bounce { animation: var(--animate-bounce); }
-.animate-pulse { animation: var(--animate-pulse); }
-.animate-spin { animation: var(--animate-spin); }
-
-/* === RESPONSIVE UTILITIES === */
-
-@media (max-width: 639px) {
-  .container { max-width: 100%; }
-}
-
-@media (min-width: 640px) {
-  .container { max-width: var(--container-sm); }
-}
-
-@media (min-width: 768px) {
-  .container { max-width: var(--container-md); }
-}
-
-@media (min-width: 1024px) {
-  .container { max-width: var(--container-lg); }
-}
-
-@media (min-width: 1280px) {
-  .container { max-width: var(--container-xl); }
-}
-
-@media (min-width: 1536px) {
-  .container { max-width: var(--container-2xl); }
-}

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

@@ -1,21 +0,0 @@
-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-intersection-observer.tsx

@@ -1,154 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-interface UseIntersectionObserverOptions extends IntersectionObserverInit {
-  freezeOnceVisible?: boolean;
-  initialIsIntersecting?: boolean;
-  onChange?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
-}
-
-export function useIntersectionObserver({
-  threshold = 0,
-  root = null,
-  rootMargin = "0%",
-  freezeOnceVisible = false,
-  initialIsIntersecting = false,
-  onChange,
-}: UseIntersectionObserverOptions = {}) {
-  const [ref, setRef] = React.useState<Element | null>(null);
-  const [isIntersecting, setIsIntersecting] = React.useState(initialIsIntersecting);
-  const frozen = React.useRef(false);
-
-  React.useEffect(() => {
-    if (!ref || !window.IntersectionObserver || (frozen.current && freezeOnceVisible)) {
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        const isElementIntersecting = entry.isIntersecting;
-        setIsIntersecting(isElementIntersecting);
-        onChange?.(isElementIntersecting, entry);
-
-        if (isElementIntersecting && freezeOnceVisible) {
-          frozen.current = true;
-        }
-      },
-      { threshold, root, rootMargin }
-    );
-
-    observer.observe(ref);
-
-    return () => observer.disconnect();
-  }, [ref, threshold, root, rootMargin, freezeOnceVisible, onChange]);
-
-  return { ref: setRef, isIntersecting };
-}
-
-// Lazy load component wrapper
-interface LazyLoadProps {
-  children: React.ReactNode;
-  placeholder?: React.ReactNode;
-  threshold?: number;
-  rootMargin?: string;
-  className?: string;
-}
-
-export function LazyLoad({
-  children,
-  placeholder = <div className="h-20 bg-muted animate-pulse rounded" />,
-  threshold = 0.1,
-  rootMargin = "50px",
-  className,
-}: LazyLoadProps) {
-  const { ref, isIntersecting } = useIntersectionObserver({
-    threshold,
-    rootMargin,
-    freezeOnceVisible: true,
-  });
-
-  return (
-    <div ref={ref} className={className}>
-      {isIntersecting ? children : placeholder}
-    </div>
-  );
-}
-
-// Image lazy loading hook
-export function useLazyImageLoading(
-  imageSrc: string,
-  options?: UseIntersectionObserverOptions
-) {
-  const [src, setSrc] = React.useState<string | undefined>(undefined);
-  const { ref, isIntersecting } = useIntersectionObserver({
-    threshold: 0.01,
-    rootMargin: "50px",
-    ...options,
-  });
-
-  React.useEffect(() => {
-    if (isIntersecting && imageSrc) {
-      const img = new Image();
-      img.src = imageSrc;
-      img.onload = () => setSrc(imageSrc);
-    }
-  }, [isIntersecting, imageSrc]);
-
-  return { ref, src, isLoaded: !!src };
-}
-
-// Viewport visibility hook
-export function useIsInViewport(options?: UseIntersectionObserverOptions) {
-  return useIntersectionObserver(options);
-}
-
-// Multiple elements observer
-export function useMultipleIntersectionObserver(
-  options: UseIntersectionObserverOptions = {}
-) {
-  const [elements, setElements] = React.useState<Map<Element, boolean>>(new Map());
-  const observer = React.useRef<IntersectionObserver | null>(null);
-
-  React.useEffect(() => {
-    if (!window.IntersectionObserver) return;
-
-    observer.current = new IntersectionObserver(
-      (entries) => {
-        setElements((prev) => {
-          const next = new Map(prev);
-          entries.forEach((entry) => {
-            next.set(entry.target, entry.isIntersecting);
-          });
-          return next;
-        });
-      },
-      {
-        threshold: options.threshold || 0,
-        root: options.root || null,
-        rootMargin: options.rootMargin || "0%",
-      }
-    );
-
-    return () => observer.current?.disconnect();
-  }, [options.threshold, options.root, options.rootMargin]);
-
-  const observe = React.useCallback((element: Element | null) => {
-    if (element && observer.current) {
-      observer.current.observe(element);
-    }
-  }, []);
-
-  const unobserve = React.useCallback((element: Element | null) => {
-    if (element && observer.current) {
-      observer.current.unobserve(element);
-      setElements((prev) => {
-        const next = new Map(prev);
-        next.delete(element);
-        return next;
-      });
-    }
-  }, []);
-
-  return { observe, unobserve, elements };
-}

package/src/use-local-storage.tsx

@@ -1,71 +0,0 @@
-import { useState, useEffect } from 'react'
-
-// Local storage hook with error handling and SSR support
-export function useLocalStorage<T>(
-  key: string,
-  initialValue: T
-): [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 | undefined>(() => {
-    if (typeof window === 'undefined') {
-      return initialValue
-    }
-    
-    try {
-      // Get from local storage by key
-      const item = window.localStorage.getItem(key)
-      // Parse stored json or if none return initialValue
-      return item ? JSON.parse(item) : initialValue
-    } catch (error) {
-      // If error also return initialValue
-      console.error(`Error reading localStorage key "${key}":`, error)
-      return initialValue
-    }
-  })
-
-  // Return a wrapped version of useState's setter function that persists the new value to localStorage
-  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
-      
-      // Save state
-      setStoredValue(valueToStore)
-      
-      // Save to local storage
-      if (typeof window !== 'undefined') {
-        if (valueToStore === undefined) {
-          window.localStorage.removeItem(key)
-        } else {
-          window.localStorage.setItem(key, JSON.stringify(valueToStore))
-        }
-      }
-    } catch (error) {
-      // A more advanced implementation would handle the error case
-      console.error(`Error setting localStorage key "${key}":`, error)
-    }
-  }
-
-  // Listen for changes to localStorage from other tabs/windows
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return
-    }
-
-    const handleStorageChange = (e: StorageEvent) => {
-      if (e.key === key && e.newValue !== null) {
-        try {
-          setStoredValue(JSON.parse(e.newValue))
-        } catch (error) {
-          console.error(`Error parsing localStorage value for key "${key}":`, error)
-        }
-      }
-    }
-
-    window.addEventListener('storage', handleStorageChange)
-    return () => window.removeEventListener('storage', handleStorageChange)
-  }, [key])
-
-  return [storedValue, setValue]
-}