@neynar/ui 0.3.1 → 0.5.0

package/src/hooks/use-theme.ts

@@ -1,319 +0,0 @@
-"use client"
-
-import { useEffect, useState } from "react"
-
-/**
- * Theme preference options for the theme system
- * 
- * Controls how the application determines the active theme:
- * - `"system"` - Automatically follows the user's OS preference
- * - `"light"` - Forces light theme regardless of system preference
- * - `"dark"` - Forces dark theme regardless of system preference
- * 
- * @example
- * ```tsx
- * const { preference, setPreference } = useTheme();
- * 
- * // Switch to dark mode
- * setPreference("dark");
- * 
- * // Follow system preference
- * setPreference("system");
- * ```
- * 
- * @since 1.0.0
- */
-export type ThemePreference = "system" | "light" | "dark"
-
-/**
- * Internal theme state structure stored in cookies
- * 
- * Maintains both the user's preference and the actual mode value
- * to handle system theme changes efficiently.
- * 
- * @internal
- */
-type ThemeState = {
-  /** User's selected theme preference */
-  preference: ThemePreference
-  /** Actual mode applied to the DOM */
-  mode: "light" | "dark"
-}
-
-/**
- * Cookie configuration for theme persistence
- * 
- * Uses secure defaults for cross-site compatibility and long-term storage.
- * 
- * @internal
- */
-const COOKIE_NAME = "theme"
-const COOKIE_OPTIONS = {
-  path: "/",
-  maxAge: 60 * 60 * 24 * 365, // 1 year
-  sameSite: "lax" as const,
-}
-
-/**
- * Retrieves the stored theme preference from browser cookies
- * 
- * Safely parses the cookie value and handles malformed data gracefully.
- * Returns null if no valid theme data is found or if running server-side.
- * 
- * @returns The stored theme state or null if unavailable
- * @internal
- */
-function getThemeFromCookie(): ThemeState | null {
-  if (typeof document === "undefined") return null
-  const match = document.cookie.match(new RegExp(`(?:^|; )${COOKIE_NAME}=([^;]*)`))
-  if (!match) return null
-
-  try {
-    const decoded = decodeURIComponent(match[1] || "")
-    return JSON.parse(decoded)
-  } catch {
-    return null
-  }
-}
-
-/**
- * Persists the current theme state to browser cookies
- * 
- * Stores the complete theme state as a JSON string with appropriate
- * cookie settings for security and longevity. Safe for server-side rendering.
- * 
- * @param state - The theme state to persist
- * @internal
- */
-function setThemeCookie(state: ThemeState) {
-  if (typeof document === "undefined") return
-
-  const value = JSON.stringify(state)
-  let cookieString = `${COOKIE_NAME}=${encodeURIComponent(value)}`
-
-  cookieString += `; path=${COOKIE_OPTIONS.path}`
-  cookieString += `; max-age=${COOKIE_OPTIONS.maxAge}`
-  cookieString += `; samesite=${COOKIE_OPTIONS.sameSite}`
-
-  document.cookie = cookieString
-}
-
-/**
- * Detects the user's system theme preference
- * 
- * Uses the CSS media query `prefers-color-scheme` to determine if the user
- * has configured their OS to prefer dark or light themes. Falls back to
- * light theme for server-side rendering or unsupported browsers.
- * 
- * @returns The system's preferred theme
- * @internal
- */
-function getSystemTheme(): "light" | "dark" {
-  if (typeof window === "undefined") return "light"
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
-}
-
-/**
- * Applies the specified theme to the document
- * 
- * Updates the document's class list and color-scheme CSS property to reflect
- * the chosen theme. This triggers CSS-based theme switching throughout the
- * application and ensures native elements respect the theme choice.
- * 
- * @param theme - The theme to apply ("light" or "dark")
- * @internal
- */
-function applyTheme(theme: "light" | "dark") {
-  if (typeof document === "undefined") return
-  
-  // For light theme, remove dark class (light is default)
-  // For dark theme, add dark class
-  if (theme === "dark") {
-    document.documentElement.classList.add("dark")
-  } else {
-    document.documentElement.classList.remove("dark")
-  }
-  
-  // Set color-scheme for native elements
-  document.documentElement.style.colorScheme = theme
-}
-
-/**
- * Hook for managing application theme with automatic system preference detection
- * 
- * A complete theme management solution that handles persistence, system preference
- * detection, and DOM manipulation without requiring any context providers. Designed
- * for applications that need simple light/dark mode switching with optional system
- * preference following.
- * 
- * This hook works in conjunction with the {@link Theme} component to provide a complete
- * theming solution with FOUC prevention and perfect synchronization across multiple
- * instances.
- * 
- * Features:
- * - **Perfect synchronization**: Multiple hook instances stay in sync via custom events
- * - **Automatic persistence**: Theme preference saved to cookies across sessions
- * - **System preference detection**: Automatically follows OS dark/light mode when set to "system"
- * - **Live system updates**: Responds to system theme changes in real-time
- * - **SSR compatible**: Works safely during server-side rendering
- * - **Type safe**: Full TypeScript support with proper type definitions
- * - **No provider required**: Self-contained hook that works out of the box
- * 
- * @example Basic theme switching
- * ```tsx
- * function ThemeToggle() {
- *   const { preference, mode, setPreference } = useTheme();
- *   
- *   const toggleTheme = () => {
- *     setPreference(mode === "dark" ? "light" : "dark");
- *   };
- *   
- *   return (
- *     <button onClick={toggleTheme}>
- *       Switch to {mode === "dark" ? "light" : "dark"} mode
- *     </button>
- *   );
- * }
- * ```
- * 
- * @example Theme selector dropdown
- * ```tsx
- * function ThemeSelector() {
- *   const { preference, setPreference } = useTheme();
- *   
- *   return (
- *     <select value={preference} onChange={(e) => setPreference(e.target.value as ThemePreference)}>
- *       <option value="system">Follow system</option>
- *       <option value="light">Light mode</option>
- *       <option value="dark">Dark mode</option>
- *     </select>
- *   );
- * }
- * ```
- * 
- * @example Multiple synchronized toggles
- * ```tsx
- * function App() {
- *   return (
- *     <>
- *       <Header>
- *         <ThemeToggle />
- *       </Header>
- *       <Sidebar>
- *         <ThemeToggle />
- *       </Sidebar>
- *     </>
- *   );
- * }
- * ```
- * 
- * @example Conditional rendering based on theme
- * ```tsx
- * function ThemedIcon() {
- *   const { mode } = useTheme();
- *   
- *   return mode === "dark" ? <MoonIcon /> : <SunIcon />;
- * }
- * ```
- * 
- * @returns Object containing current theme state and setter function
- * @returns returns.preference - The user's selected theme preference
- * @returns returns.mode - The actual theme currently applied (always "light" or "dark")
- * @returns returns.setPreference - Function to change the theme preference
- * 
- * @remarks
- * **Synchronization Architecture:**
- * - All theme changes are broadcasted via custom 'theme-change' events
- * - Single setState per change across ALL hook instances (no duplicates)
- * - Event-driven updates ensure perfect synchronization
- * - Cookie serves as the single source of truth for persistence
- * 
- * **Implementation Details:**
- * - Theme state is automatically persisted to cookies with 1-year expiration
- * - System preference changes are detected via `matchMedia` API
- * - DOM updates are applied immediately when theme changes
- * - Hook is safe to use during SSR (falls back to light theme)
- * - Custom events handle cross-instance synchronization
- * 
- * **Performance:**
- * - Single setState per theme change (no duplicate updates)
- * - Efficient event-driven architecture
- * - No context overhead: direct hook usage without providers
- * - Automatic cleanup: removes event listeners on component unmount
- * 
- * **Browser Support:**
- * - Modern browsers with `matchMedia` support for system detection
- * - CustomEvent support for synchronization (IE11+ with polyfill)
- * - Graceful degradation for older browsers (defaults to light theme)
- * - Cookie support required for persistence across sessions
- * 
- * @see {@link ThemePreference} - Available theme preference options
- * @see {@link Theme} - Component for FOUC prevention
- * @see {@link ThemeToggle} - UI component for theme switching
- * @since 1.0.0
- */
-export function useTheme() {
-  // Initialize state from cookie or default to system
-  const [state, setState] = useState<ThemeState>(() => {
-    const saved = getThemeFromCookie()
-    if (saved) return saved
-    
-    const mode = getSystemTheme()
-    return { preference: "system", mode }
-  })
-
-  // Set theme preference - dispatch event, let event handler update state
-  const setPreference = (newPreference: ThemePreference) => {
-    const mode = newPreference === "system" ? getSystemTheme() : newPreference
-    const newState = { preference: newPreference, mode }
-    
-    // Update cookie and DOM immediately
-    setThemeCookie(newState)
-    applyTheme(mode)
-    
-    // Broadcast change - ALL instances (including this one) will update state from this event
-    window.dispatchEvent(new CustomEvent('theme-change', { 
-      detail: newState 
-    }))
-  }
-
-  // Single event handler for ALL state updates (including from this instance)
-  useEffect(() => {
-    const handleThemeChange = (event: CustomEvent) => {
-      setState(event.detail)  // Single setState for all instances
-    }
-    
-    window.addEventListener('theme-change', handleThemeChange as EventListener)
-    return () => window.removeEventListener('theme-change', handleThemeChange as EventListener)
-  }, [])
-
-  // Listen for system theme changes when in system mode
-  useEffect(() => {
-    if (state.preference !== "system") return
-
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
-    const handleChange = () => {
-      const mode = getSystemTheme()
-      const newState = { preference: state.preference, mode }
-      
-      // Same pattern: update cookie/DOM, then broadcast
-      setThemeCookie(newState)
-      applyTheme(mode)
-      window.dispatchEvent(new CustomEvent('theme-change', { detail: newState }))
-    }
-
-    mediaQuery.addEventListener("change", handleChange)
-    return () => mediaQuery.removeEventListener("change", handleChange)
-  }, [state.preference])
-
-  // Apply theme on mount (only for initial hydration)
-  useEffect(() => {
-    applyTheme(state.mode)
-  }, [state.mode])
-
-  return {
-    preference: state.preference,
-    mode: state.mode,
-    setPreference,
-  }
-}

package/src/index.ts

@@ -1,84 +0,0 @@
-// Form & Input Components
-export * from "./components/ui/button";
-export * from "./components/ui/button-group";
-export * from "./components/ui/text-field";
-export * from "./components/ui/field";
-export * from "./components/ui/select";
-export * from "./components/ui/combobox";
-export * from "./components/ui/input";
-export * from "./components/ui/input-group";
-export * from "./components/ui/textarea";
-export * from "./components/ui/checkbox";
-export * from "./components/ui/switch";
-export * from "./components/ui/radio-group";
-export * from "./components/ui/date-picker";
-export * from "./components/ui/calendar";
-export * from "./components/ui/label";
-
-// Layout & Structure
-export * from "./components/ui/container";
-export * from "./components/ui/stack";
-export * from "./components/ui/card";
-export * from "./components/ui/separator";
-export * from "./components/ui/aspect-ratio";
-export * from "./components/ui/accordion";
-export * from "./components/ui/collapsible";
-export * from "./components/ui/resizable";
-export * from "./components/ui/scroll-area";
-
-// Navigation & Menus
-export * from "./components/ui/navigation-menu";
-export * from "./components/ui/tabs";
-export * from "./components/ui/breadcrumb";
-export * from "./components/ui/pagination";
-export * from "./components/ui/sidebar";
-export * from "./components/ui/dropdown-menu";
-export * from "./components/ui/context-menu";
-export * from "./components/ui/menubar";
-
-// Overlays & Dialogs
-export * from "./components/ui/dialog";
-export * from "./components/ui/alert-dialog";
-export * from "./components/ui/popover";
-export * from "./components/ui/tooltip";
-export * from "./components/ui/sheet";
-export * from "./components/ui/hover-card";
-export * from "./components/ui/drawer";
-
-// Typography
-export * from "./components/ui/typography";
-export * from "./components/ui/kbd";
-
-// Data Display
-export * from "./components/ui/table";
-export * from "./components/ui/badge";
-export * from "./components/ui/avatar";
-export * from "./components/ui/alert";
-export * from "./components/ui/progress";
-export * from "./components/ui/skeleton";
-export * from "./components/ui/empty-state";
-export * from "./components/ui/empty";
-export * from "./components/ui/item";
-export * from "./components/ui/spinner";
-export * from "./components/ui/sonner";
-
-// Interactive Controls
-export * from "./components/ui/toggle";
-export * from "./components/ui/toggle-group";
-export * from "./components/ui/slider";
-export * from "./components/ui/command";
-
-// Charts & Visualization
-export * from "./components/ui/chart";
-export * from "./components/ui/carousel";
-
-// Theme & Utilities
-export * from "./components/ui/theme";
-export * from "./components/ui/theme-toggle";
-
-// Utilities
-export * from "./lib/utils";
-
-// Hooks
-export * from "./hooks/use-mobile";
-export * from "./hooks/use-theme";

package/src/styles/globals.css

@@ -1,175 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@source "../**/*.{js,jsx,ts,tsx}";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  --radius: 0.5rem;
-
-  /* Neynar Colors */
-  --neynar-surface-base-background: #eeeeee;
-  --neynar-faint-foreground: rgb(0, 0, 0, 0.45);
-
-  /* Map Figma colors to shadcn semantic tokens */
-  --background: #ffffff; /* Surface/Body */
-  --foreground: #000000; /* Text/Content/Headers */
-  --card: rgb(0, 0, 0, 0.05);
-  --card-foreground: #000000; /* Text/Content/Headers */
-  --popover: #ffffff; /* Surface/Body */
-  --popover-foreground: #000000; /* Text/Content/Headers */
-  --primary: #7f62c6; /* Farcaster Purple */
-  --primary-foreground: #ffffff; /* Text/UI/White (fixed) */
-  --secondary: rgb(0, 0, 0, 0.1);
-  --secondary-foreground: #000000; /* Text/Content/Headers */
-  --muted: #eeeeee; /* Surface/Base */
-  --muted-foreground: rgb(0, 0, 0, 0.6);
-  --accent: #f0ebfa; /* Elevation/Info/Neutral */
-  --accent-foreground: #7360a1; /* Text/UI/Muted Info */
-  --destructive: #ad1b20; /* Tables/Method/DEL (text) */
-  --destructive-foreground: #ffffff; /* Text/UI/White (fixed) */
-  --success: #16a34a; /* Success/Green */
-  --success-foreground: #ffffff; /* White text on success */
-  --warning: #f59e0b; /* Warning/Orange */
-  --warning-foreground: #ffffff; /* White text on warning */
-  --info: #1976d2; /* Info/Blue */
-  --info-foreground: #ffffff; /* White text on info */
-  --border: rgb(0, 0, 0, 0.1);
-  --input: rgb(0, 0, 0, 0.1);
-  --chart-1: #829ae0; /* Charts/Blue 1 */
-  --chart-2: #1a75ff; /* Charts/Blue 2 */
-  --chart-3: #c6acde; /* Charts/Purple 1 */
-  --chart-4: #9c27b0; /* Charts/Purple 2 */
-  --chart-5: #7dc6da; /* Charts/Violet */
-  --sidebar: #ffffff; /* Surface/Body */
-  --sidebar-foreground: #000000; /* Text/Content/Headers */
-  --sidebar-primary: #7f62c6; /* Farcaster Purple */
-  --sidebar-primary-foreground: #ffffff; /* Text/UI/White (fixed) */
-  --sidebar-accent: #eeeeee; /* Surface/Base */
-  --sidebar-accent-foreground: #000000; /* Text/Content/Headers */
-  --sidebar-border: #dddddd; /* Borders/Muted */
-  --sidebar-ring: #7f62c6; /* Farcaster Purple */
-}
-
-.dark {
-  /* Neynar Colors */
-  --neynar-surface-base-background: #161517;
-  --neynar-faint-foreground: rgb(255, 255, 255, 0.45);
-
-  /* Dark mode using actual Figma-defined dark mode colors */
-  --background: #222222; /* Surface/Body Dark */
-  --foreground: rgb(255, 255, 255, 0.86); /* Text/UI/Active Dark */
-  --card: rgb(255, 255, 255, 0.05);
-  --card-foreground: #dddddd; /* Text/UI/Active Dark */
-  --popover: #222222; /* Surface/Body Dark */
-  --popover-foreground: #ffffff; /* Text/UI/Active Dark */
-  --primary: #7f62c6; /* Farcaster Purple */
-  --primary-foreground: #ffffff; /* Text/UI/White (fixed) */
-  --secondary: rgb(0, 0, 0, 0.25);
-  --secondary-foreground: #ffffff; /* Text/UI/Black > White Dark */
-  --muted: #333333; /* Surface/Feature/Neutral Dark */
-  --muted-foreground: rgb(255, 255, 255, 0.6);
-  --accent: #25212b; /* Elevation/Info/Neutral Dark */
-  --accent-foreground: #7f62c6; /* Text/UI/Muted Info */
-  --destructive: #ad1b20; /* Tables/Method/DEL (text) */
-  --destructive-foreground: #ffffff; /* Text/UI/White (fixed) */
-  --success: #22c55e; /* Success/Green Dark */
-  --success-foreground: #272d26; /* White text on success */
-  --warning: #fbbf24; /* Warning/Orange Dark */
-  --warning-foreground: #000000; /* Black text on warning */
-  --info: #1976d2; /* Info/Blue Dark */
-  --info-foreground: #ffffff; /* White text on info */
-  --border: rgb(255, 255, 255, 0.1);
-  --input: rgb(255, 255, 255, 0.1);
-  --ring: #7f62c6; /* Farcaster Purple */
-  --chart-1: #829ae0; /* Charts/Blue 1 */
-  --chart-2: #1a75ff; /* Charts/Blue 2 */
-  --chart-3: #c6acde; /* Charts/Purple 1 */
-  --chart-4: #9c27b0; /* Charts/Purple 2 */
-  --chart-5: #7dc6da; /* Charts/Violet */
-  --sidebar: #222222; /* Surface/Body Dark */
-  --sidebar-foreground: #ffffff; /* Text/UI/White (fixed) */
-  --sidebar-primary: #7f62c6; /* Farcaster Purple */
-  --sidebar-primary-foreground: #ffffff; /* Text/UI/White (fixed) */
-  --sidebar-accent: #161517; /* Surface/Base Dark */
-  --sidebar-accent-foreground: #ffffff; /* Text/UI/Black > White Dark */
-  --sidebar-border: #444444; /* Borders/Muted Dark */
-  --sidebar-ring: #7f62c6; /* Farcaster Purple */
-}
-
-@theme inline {
-  --color-neynar-surface-base-background: var(--neynar-surface-base-background);
-  --color-neynar-faint-foreground: var(--neynar-faint-foreground);
-
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  /* Override Tailwind's default fontSize scale to match design system */
-  --text-xs: 0.625rem; /* 10px - Microcopy */
-  --text-sm: 0.8125rem; /* 13px - Details */
-  --text-base: 0.9375rem; /* 15px - Body */
-  --text-lg: 1.0625rem; /* 17px - Paragraph Lead, Blog Body */
-  --text-xl: 1.25rem; /* 20px - Headings */
-  --text-2xl: 1.375rem; /* 22px - Paragraph Lead, Blog Body */
-  --text-3xl: 2.25rem; /* 36px - Headline */
-  --text-4xl: 2.8125rem; /* 45px - Section Title */
-  --text-5xl: 3.5rem; /* 56px - Page Title */
-  --text-6xl: 4.5rem; /* 72px - Display Title */
-  --text-7xl: 5.625rem; /* 90px - Hero Title */
-  /* --text-8xl: 6.75rem; */
-  /* --text-9xl: 8.25rem; */
-
-  /* --leading-tight: 1.1; */
-  --leading-snug: 1.1;
-  --leading-normal: 1.2;
-  --leading-relaxed: 1.4;
-  --leading-loose: 1.5;
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}