@neynar/ui 0.4.0 → 1.0.0

package/README.md

@@ -1,195 +1,307 @@
-# @neynar/ui
+<h1 align="center">@neynar/ui</h1>
 
-A comprehensive, production-ready React component library built on **Radix UI** primitives and **Tailwind CSS v4**. Features 52 accessible components plus advanced hooks for building modern web applications with confidence.
+<p align="center">
+  <strong>Beautiful React components built on Base UI + Tailwind CSS v4</strong>
+</p>
 
-## 🎯 Key Highlights
+<p align="center">
+  <a href="https://neynar-ui.vercel.app">📚 Storybook</a> ·
+  <a href="https://neynar.com">🚀 Neynar</a> ·
+  <a href="https://docs.neynar.com">📖 Docs</a>
+</p>
 
-- **Over 50 Components, Hooks and Utilities** - Complete UI ecosystem for any application type
-- **Accessibility-First** - WCAG 2.1 AA compliant with comprehensive keyboard navigation
-- **TypeScript Native** - Full type safety with intelligent IntelliSense support
-- **Advanced Theming** - OKLCH color space with system-aware custom themes
-- **Framework Agnostic** - Seamless integration with Next.js, Vite, Remix, and more
-- **Zero-Config Dark Mode** - Intelligent theme system with SSR-safe persistence
-- **shadcn/ui Enhanced** - Extends shadcn/ui patterns with advanced features
-- **Tree Shakeable** - Optimized bundle sizes with granular imports
+---
 
-## 🚀 Quick Installation
+## What is this? 🤔
 
-```bash
-npm install @neynar/ui
-# or
-yarn add @neynar/ui
-# or
-pnpm add @neynar/ui
-```
+@neynar/ui is a full-featured React component library—the same components that power Neynar Studio and our suite of developer tools.
 
-## ⚡ Get Started in 30 Seconds
+**One package. 50+ components. Tailwind CSS v4 powered.**
+
+```css
+/* src/index.css */
+@import "@neynar/ui/styles";
+@import "@neynar/ui/themes/purple-dawn";
+```
 
 ```tsx
-import { Button, Card, CardHeader, CardTitle, CardContent } from "@neynar/ui";
-import "@neynar/ui/styles";
+import "./index.css";
+import { Button } from "@neynar/ui/button";
+import { Card } from "@neynar/ui/card";
+import { Alert } from "@neynar/ui/alert";
 
-function App() {
+export default function App() {
   return (
-    <Card className="max-w-md">
-      <CardHeader>
-        <CardTitle>@neynar/ui is Ready</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <Button>Primary Action</Button>
-        <Button variant="outline">Secondary Action</Button>
-      </CardContent>
+    <Card>
+      <Alert variant="success">Ready to ship 🚀</Alert>
+      <Button>Get Started</Button>
     </Card>
   );
 }
 ```
 
-## 🎨 Component Categories
+## Why @neynar/ui? ✨
+
+| Feature | Description |
+|---|---|
+| **Built for AI** | Designed for AI coding assistants—sensible defaults, clear APIs, zero config. LLMs love it. |
+| **Modern Stack** | shadcn/ui patterns on Base UI primitives, Tailwind CSS v4, OKLCH colors, TypeScript-first. |
+| **Production-Ready** | Battle-tested in Neynar Studio and used by developers building on Farcaster. |
+| **RSC-Ready** | `"use client"` directives baked in. Use interactive components from Server Components—no wrapping needed. |
+| **Fully Accessible** | WCAG 2.1 AA compliant with keyboard navigation and screen reader support. |
+| **Themes** | Ships with Purple Dawn and First Light themes. Easy to customize or create your own with CSS variables. |
+
+---
+
+## Installation 📦
+
+```bash
+# npm
+npm install @neynar/ui
+
+# pnpm
+pnpm add @neynar/ui
+
+# yarn
+yarn add @neynar/ui
+```
+
+### Tailwind CSS v4 Setup (Required)
+
+This package requires Tailwind CSS v4. The exported styles use `@import "tailwindcss"`.
+
+**Vite:**
+
+```bash
+npm install tailwindcss @tailwindcss/vite
+```
+
+```ts
+// vite.config.ts
+import tailwindcss from "@tailwindcss/vite";
+export default defineConfig({ plugins: [react(), tailwindcss()] });
+```
+
+**Next.js:**
+
+```bash
+npm install tailwindcss @tailwindcss/postcss
+```
+
+```js
+// postcss.config.js
+export default { plugins: { "@tailwindcss/postcss": {} } };
+```
+
+---
+
+## What's Included 🎁
+
+### Full shadcn/ui Collection
+
+This package includes the **complete set of shadcn/ui components**, rebuilt on [Base UI](https://base-ui.com) primitives with Tailwind CSS v4. Every component you'd expect, ready to use.
+
+### Neynar Extras
+
+New components we've added beyond the base collection:
+
+- **Typography** — Semantic text components: `Title`, `Text`, `Code`, `Blockquote`, `Caption`, `Overline`
+- **Color Mode** — SSR-safe dark mode with automatic system detection, cookie persistence, `<ColorModeInitializer />` and `<ColorModeToggle />` components
+
+### Neynar Enhancements
 
-| Category | Components | Description |
-|----------|------------|-------------|
-| 📝 **Forms & Input** | Button, Input, Textarea, TextField, Select, Combobox, Checkbox, Switch, RadioGroup, DatePicker, Calendar, Label, Slider | Essential form building blocks with validation support |
-| 📱 **Layout & Structure** | Container, Stack, Card, Separator, AspectRatio, Accordion, Collapsible, Resizable, ScrollArea | Flexible components for responsive layouts |
-| 🧭 **Navigation & Menus** | NavigationMenu, Tabs, Breadcrumb, Pagination, Sidebar, DropdownMenu, ContextMenu, Menubar, Command | Comprehensive navigation solutions |
-| 💬 **Overlays & Dialogs** | Dialog, AlertDialog, Popover, Tooltip, Sheet, HoverCard, Drawer | Modal interactions with advanced positioning |
-| ✍️ **Typography** | Typography (with H1-H6, P, A, Code, Label variants) | Consistent text styling with semantic HTML |
-| 📊 **Data Display** | Table, Badge, Avatar, Alert, Progress, Skeleton, EmptyState, Chart, Carousel, Sonner | Rich components for presenting information |
-| 🔧 **Interactive Controls** | Toggle, ToggleGroup, ThemeToggle | Advanced interaction components |
-| 🪝 **Hooks** | useTheme, useIsMobile | React hooks for common functionality |
-| 🛠️ **Utilities** | cn, Theme | Helper utilities and setup components |
+Improvements we've made to existing components:
 
-## 🌙 Theming
+- **Toast (Sonner)** — Pre-configured with colored variants, custom icons, and `richColors` enabled by default
+- **Extended Variants** — Semantic `success`, `warning`, and `info` variants added to Button, Badge, Alert, and Menu Items
 
-Zero-config light/dark mode with FOUC prevention:
+### Components
+
+| Category | Components |
+|----------|------------|
+| **Core Inputs** | Button, Checkbox, Combobox, Input, RadioGroup, Select, Slider, Switch, Textarea, Toggle, ToggleGroup |
+| **Form & Field** | ButtonGroup, Calendar, Field, InputGroup, InputOTP, Label |
+| **Layout & Structure** | Accordion, AspectRatio, Card, Collapsible, Resizable, Separator, Table |
+| **Navigation & Menus** | Breadcrumb, ContextMenu, DropdownMenu, Menubar, NavigationMenu, Pagination, Tabs |
+| **Overlays & Dialogs** | AlertDialog, Dialog, Drawer, HoverCard, Popover, Sheet, Tooltip |
+| **Feedback & Status** | Alert, Badge, Empty, Progress, Skeleton, Sonner, Spinner |
+| **Advanced & Specialized** | Avatar, Carousel, Chart, Command, Kbd, ScrollArea, Sidebar |
+| **Neynar Custom** | ColorModeInitializer, ColorModeToggle, Title, Text, Code, Blockquote, Caption, Overline |
+
+### Hooks & Utilities
+
+| Export | Description |
+|--------|-------------|
+| `@neynar/ui/use-mobile` | `useMobile()` hook for responsive breakpoint detection |
+| `@neynar/ui/utils` | `cn()` utility for merging Tailwind classes |
+
+---
+
+## Import Examples 📝
+
+Each component has its own export path:
 
 ```tsx
-// 1. Add Theme component early in your app (required for FOUC prevention)
-import { Theme } from "@neynar/ui";
+// Core components
+import { Button } from "@neynar/ui/button";
+import { Input } from "@neynar/ui/input";
+import { Card, CardHeader, CardContent } from "@neynar/ui/card";
 
-// Next.js App Router
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <head>
-        <Theme /> {/* Prevents flash of wrong theme */}
-      </head>
-      <body>{children}</body>
-    </html>
-  );
-}
+// Color Mode
+import { ColorModeInitializer, ColorModeToggle, useColorMode } from "@neynar/ui/color-mode";
 
-// Vite/React
-function App() {
-  return (
-    <>
-      <Theme /> {/* Place at the top */}
-      <div className="app">
-        {/* Your app content */}
-      </div>
-    </>
-  );
-}
+// Typography
+import { Title, Text, Caption } from "@neynar/ui/typography";
 
-// 2. Add ThemeToggle anywhere for user control (optional)
-import { ThemeToggle } from "@neynar/ui";
+// Toast
+import { Toaster, toast } from "@neynar/ui/sonner";
 
-function Header() {
-  return (
-    <header>
-      <h1>My App</h1>
-      <ThemeToggle />
-    </header>
-  );
-}
+// Utilities
+import { cn } from "@neynar/ui/utils";
+import { useMobile } from "@neynar/ui/use-mobile";
 ```
 
-**How it works:**
+---
 
-- **Theme component** - Injects a tiny script that runs before first paint
-- **No FOUC** - Theme applied instantly on page load
-- **Auto-detects** system preference (light/dark)
-- **Persists** selection in cookies (SSR-safe)
-- **Synchronized** - Multiple ThemeToggle instances stay in sync via events
-- **Framework agnostic** - Works with Next.js, Vite, Remix, etc.
+## Setup & Customization 🎨
 
-**[→ Complete Theming Guide](./docs/theming.md)** - Learn how to customize colors, create brand themes, and advanced theming patterns.
+Create a CSS file with your styles and theme:
 
-## 🔧 Framework Integration
+```css
+/* app/globals.css or src/index.css */
+@import "@neynar/ui/styles";
+@import "@neynar/ui/themes/purple-dawn";
 
-@neynar/ui works seamlessly with all modern React frameworks:
+/* Optional: override any design token */
+:root {
+  --radius: 0.5rem;
+  --primary: oklch(0.6 0.2 260); /* purple */
+}
+.dark {
+  --primary: oklch(0.75 0.15 260); /* lighter purple */
+}
+```
 
-- **[Next.js Integration →](./docs/integrations/nextjs.md)** - App Router, Pages Router, SSR, SSG, and custom Link components
-- **[Vite + React Integration →](./docs/integrations/vite.md)** - SPA, React Router, and development setup
+Then import the CSS file in your app entry:
 
-## 📈 Performance & Bundle Optimization
+```tsx
+// main.tsx (Vite) or layout.tsx (Next.js)
+import "./globals.css";
+```
 
-### Tree Shaking
+**Note:** Styles must be imported via CSS `@import`, not JS imports. The CSS files use `@import "tailwindcss"` which requires Tailwind processing.
 
-Import only what you need for optimal bundle sizes:
+See the [Theming Guide](./docs/theming/index.md) for the full list of customizable tokens.
+
+### Color Mode
+
+Zero-configuration dark mode:
 
 ```tsx
-// ✅ Good - Import specific components
-import { Button, Card, CardHeader, CardTitle, CardContent } from "@neynar/ui";
+// Add to your root layout
+<ColorModeInitializer />
+
+// Drop in anywhere for user control
+<ColorModeToggle />
 
-// ❌ Avoid - Imports entire library
-import * as UI from "@neynar/ui";
+// Programmatic access
+const { mode, preference, setPreference } = useColorMode();
 ```
 
-## 📚 Documentation
+### Data Slots
 
-### 📖 Available Documentation
+All components include `data-slot` attributes for targeted CSS and testing:
 
-- **[Component Reference](./docs/components.md)** - Complete component catalog with usage examples
-- **[Troubleshooting Guide](./docs/troubleshooting.md)** - Common issues and solutions
+```css
+/* Style specific component parts */
+[data-slot="dialog-content"] { backdrop-filter: blur(20px); }
+[data-slot="button"] { font-weight: 600; }
+```
 
-### 🤖 AI & Development Resources
+```ts
+// Stable E2E test selectors
+page.locator('[data-slot="dialog-trigger"]').click()
+```
 
-- **[LLM Documentation](./docs/llm/)** - LLM-optimized component usage and templates
+---
+
+## Framework Support 🛠️
+
+Works with any React framework:
+
+- **Next.js**
+- **Vite**
+- **Remix**
+- **Astro**
+- **TanStack Start**
+
+---
 
-## 🛡️ Quality Assurance
+## Documentation 📖
 
-### Accessibility Standards
+### Storybook
 
-- **WCAG 2.1 AA Compliance** - All components meet accessibility standards
-- **Keyboard Navigation** - Full keyboard support across all interactive elements
-- **Screen Reader Support** - Comprehensive ARIA implementation
-- **Focus Management** - Intelligent focus trapping and restoration
-- **Color Contrast** - Meets contrast requirements in all themes
+Interactive component explorer with live examples:
 
-## 🤝 Contributing & Support
+- **[View Storybook](https://neynar-ui.vercel.app)**
 
-### Community Resources
+### Integration Guides
 
-- **[Storybook Documentation](https://neynar-ui.vercel.app)** - Interactive component explorer
+Framework-specific setup guides:
 
-### Contributing Guidelines
+- [Next.js Integration](./docs/integrations/nextjs.md)
+- [Vite Integration](./docs/integrations/vite.md) — React + Vite setup
 
-- **[Contributing Guide](./CONTRIBUTING.md)** - Complete guide for adding new components
-- **[LLM Prompts](./docs/llm-prompts/)** - Copy-paste prompts for creating shadcn-based and custom components
+### Reference
 
-This library extends shadcn/ui patterns with Neynar-specific enhancements. When contributing:
+- [Component Reference](./docs/components.md) — Complete component catalog
+- [Theming Guide](./docs/theming/index.md) — Themes, color mode, CSS variables
+  - [ColorModeInitializer](./docs/theming/color-mode-initializer.md) — SSR-safe color mode setup
+  - [useColorMode Hook](./docs/theming/use-color-mode.md) — Programmatic control
+  - [Purple Dawn Theme](./docs/theming/purple-dawn.md) — Default theme reference
+  - [First Light Theme](./docs/theming/first-light.md) — Hand-drawn aesthetic
+- [Troubleshooting](./docs/troubleshooting.md) — Common issues and solutions
 
-- Follow our component categorization system (Buttons, Forms, Display, etc.)
-- Include comprehensive TypeScript definitions and TSDoc documentation
-- Create Storybook stories with proper category organization
-- Update all documentation files (AI docs, component docs, exports)
-- Ensure accessibility-first implementations with full keyboard support
-- Pass all automated tests including accessibility compliance checks
+### For AI Assistants
 
-## 📄 License
+LLM-optimized documentation for AI coding assistants:
 
-MIT License - see the [LICENSE](./LICENSE) file for complete details.
+- [LLM Documentation Guide](./docs/llm-documentation.md) — How to use our AI-optimized docs
+- [llms.txt](./llms.txt) — Compact overview for quick context
+- [llms-full.txt](./llms-full.txt) — Complete documentation (~16k lines)
+- [.llm/](./.llm/) — Per-component markdown docs
+
+---
+
+## About Neynar
+
+**🚀 The Farcaster Platform**
+
+[Neynar](https://neynar.com) powers the best apps in the Farcaster ecosystem. We provide the infrastructure, APIs, and tools so you can build without managing your own nodes. See [About Neynar](./docs/about-neynar.md) for more details.
+
+| Category | Description |
+|----------|-------------|
+| **APIs** | Hubs, feeds, users, casts, reactions, channels |
+| **Infrastructure** | Managed hubs, webhooks, analytics |
+| **Tools** | SDKs, debugging, monitoring |
+
+**Thousands of developers** trust Neynar to power their social applications.
+
+**[✨ Start building at neynar.com ✨](https://neynar.com)**
+
+---
 
-### Acknowledgments
+## Credits
 
-This library is built on top of excellent open-source projects:
+Made by the Neynar team.
 
-- **[shadcn/ui](https://ui.shadcn.com)** - Component patterns and design system foundation (MIT)
-- **[Radix UI](https://www.radix-ui.com)** - Accessible component primitives (MIT)
-- **[Tailwind CSS](https://tailwindcss.com)** - Utility-first CSS framework (MIT)
-- **[Lucide Icons](https://lucide.dev)** - Beautiful open-source icons (ISC)
-- **[class-variance-authority](https://cva.style)** - Component variant management (Apache-2.0)
+Built on the shoulders of giants:
+- [shadcn/ui](https://ui.shadcn.com) for the component patterns
+- [Base UI](https://base-ui.com) for accessible primitives
+- [Tailwind CSS](https://tailwindcss.com) for styling
 
 ---
 
-**Built with ❤️ by the Neynar team**
+<p align="center">
+  MIT License · Made with 💜 by <a href="https://neynar.com">Neynar</a>
+</p>

package/dist/_virtual/index.js

@@ -0,0 +1,6 @@
+import { __require as requireShim } from "../node_modules/use-sync-external-store/shim/index.js";
+var shimExports = requireShim();
+export {
+  shimExports as s
+};
+//# sourceMappingURL=index.js.map

package/dist/_virtual/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/index2.js

@@ -0,0 +1,5 @@
+var shim = { exports: {} };
+export {
+  shim as __module
+};
+//# sourceMappingURL=index2.js.map

package/dist/_virtual/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/use-sync-external-store-shim.development.js

@@ -0,0 +1,5 @@
+var useSyncExternalStoreShim_development = {};
+export {
+  useSyncExternalStoreShim_development as __exports
+};
+//# sourceMappingURL=use-sync-external-store-shim.development.js.map

package/dist/_virtual/use-sync-external-store-shim.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-external-store-shim.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/use-sync-external-store-shim.production.js

@@ -0,0 +1,5 @@
+var useSyncExternalStoreShim_production = {};
+export {
+  useSyncExternalStoreShim_production as __exports
+};
+//# sourceMappingURL=use-sync-external-store-shim.production.js.map

package/dist/_virtual/use-sync-external-store-shim.production.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-external-store-shim.production.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/with-selector.development.js

@@ -0,0 +1,5 @@
+var withSelector_development = {};
+export {
+  withSelector_development as __exports
+};
+//# sourceMappingURL=with-selector.development.js.map

package/dist/_virtual/with-selector.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-selector.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/with-selector.js

@@ -0,0 +1,6 @@
+import { __require as requireWithSelector } from "../node_modules/use-sync-external-store/shim/with-selector.js";
+var withSelectorExports = requireWithSelector();
+export {
+  withSelectorExports as w
+};
+//# sourceMappingURL=with-selector.js.map

package/dist/_virtual/with-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-selector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/with-selector.production.js

@@ -0,0 +1,5 @@
+var withSelector_production = {};
+export {
+  withSelector_production as __exports
+};
+//# sourceMappingURL=with-selector.production.js.map

package/dist/_virtual/with-selector.production.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-selector.production.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/with-selector2.js

@@ -0,0 +1,5 @@
+var withSelector = { exports: {} };
+export {
+  withSelector as __module
+};
+//# sourceMappingURL=with-selector2.js.map

package/dist/_virtual/with-selector2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-selector2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/neynar/color-mode/color-mode-initializer.d.ts

@@ -0,0 +1,46 @@
+/**
+ * ColorModeInitializer - Prevents flash of unstyled content (FOUC) during color mode initialization
+ *
+ * A React component that injects the color mode initialization script into the page.
+ * Use this in SSR frameworks like Next.js where React controls the document.
+ *
+ * **For Vite/static HTML apps:** This component won't prevent FOUC because React
+ * renders after first paint. Instead, copy the initialization script directly into
+ * your `index.html` `<head>`. See the Vite integration guide for the full script.
+ *
+ * @component
+ * @example Next.js App Router
+ * ```tsx
+ * // app/layout.tsx
+ * import { ColorModeInitializer } from "@neynar/ui/color-mode";
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html lang="en" suppressHydrationWarning>
+ *       <head>
+ *         <ColorModeInitializer />
+ *       </head>
+ *       <body>{children}</body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ *
+ * @example Vite - copy script to index.html instead
+ * ```html
+ * <!-- See docs/integrations/vite.md for the full script to copy -->
+ * <head>
+ *   <script>
+ *     (function() {
+ *       // ... color mode initialization script
+ *     })();
+ *   </script>
+ * </head>
+ * ```
+ *
+ * @see {@link useColorMode} - Hook for runtime color mode management
+ * @see {@link ColorModeToggle} - UI component for user color mode switching
+ * @since 1.0.0
+ */
+export declare function ColorModeInitializer(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=color-mode-initializer.d.ts.map

package/dist/components/neynar/color-mode/color-mode-initializer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-mode-initializer.d.ts","sourceRoot":"","sources":["../../../../src/components/neynar/color-mode/color-mode-initializer.tsx"],"names":[],"mappings":"AA8BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,wBAAgB,oBAAoB,4CAGnC"}

package/dist/components/neynar/color-mode/color-mode-initializer.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useColorMode } from "./use-color-mode.js";
+const colorModeScript = `(function() {
+  try {
+    var cookie = document.cookie.match(/color-mode=([^;]*)/) || document.cookie.match(/theme=([^;]*)/);
+    var stored = cookie ? JSON.parse(decodeURIComponent(cookie[1])) : null;
+    var preference = stored ? stored.preference : 'system';
+    var mode = preference === 'system'
+      ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+      : preference;
+    if (mode === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+    document.documentElement.style.colorScheme = mode;
+  } catch (e) {
+    document.documentElement.classList.remove('dark');
+    document.documentElement.style.colorScheme = 'light';
+  }
+})();`;
+function ColorModeInitializer() {
+  useColorMode();
+  return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: colorModeScript } });
+}
+export {
+  ColorModeInitializer
+};
+//# sourceMappingURL=color-mode-initializer.js.map

package/dist/components/neynar/color-mode/color-mode-initializer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-mode-initializer.js","sources":["../../../../src/components/neynar/color-mode/color-mode-initializer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useColorMode } from \"./use-color-mode\";\n\n/**\n * Color mode initialization script (internal).\n *\n * For Vite/static HTML apps, copy this script into your index.html <head>.\n * See docs/integrations/vite.md for the full script to copy.\n */\nconst colorModeScript = `(function() {\n  try {\n    var cookie = document.cookie.match(/color-mode=([^;]*)/) || document.cookie.match(/theme=([^;]*)/);\n    var stored = cookie ? JSON.parse(decodeURIComponent(cookie[1])) : null;\n    var preference = stored ? stored.preference : 'system';\n    var mode = preference === 'system'\n      ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')\n      : preference;\n    if (mode === 'dark') {\n      document.documentElement.classList.add('dark');\n    } else {\n      document.documentElement.classList.remove('dark');\n    }\n    document.documentElement.style.colorScheme = mode;\n  } catch (e) {\n    document.documentElement.classList.remove('dark');\n    document.documentElement.style.colorScheme = 'light';\n  }\n})();`;\n\n/**\n * ColorModeInitializer - Prevents flash of unstyled content (FOUC) during color mode initialization\n *\n * A React component that injects the color mode initialization script into the page.\n * Use this in SSR frameworks like Next.js where React controls the document.\n *\n * **For Vite/static HTML apps:** This component won't prevent FOUC because React\n * renders after first paint. Instead, copy the initialization script directly into\n * your `index.html` `<head>`. See the Vite integration guide for the full script.\n *\n * @component\n * @example Next.js App Router\n * ```tsx\n * // app/layout.tsx\n * import { ColorModeInitializer } from \"@neynar/ui/color-mode\";\n *\n * export default function RootLayout({ children }) {\n *   return (\n *     <html lang=\"en\" suppressHydrationWarning>\n *       <head>\n *         <ColorModeInitializer />\n *       </head>\n *       <body>{children}</body>\n *     </html>\n *   );\n * }\n * ```\n *\n * @example Vite - copy script to index.html instead\n * ```html\n * <!-- See docs/integrations/vite.md for the full script to copy -->\n * <head>\n *   <script>\n *     (function() {\n *       // ... color mode initialization script\n *     })();\n *   </script>\n * </head>\n * ```\n *\n * @see {@link useColorMode} - Hook for runtime color mode management\n * @see {@link ColorModeToggle} - UI component for user color mode switching\n * @since 1.0.0\n */\nexport function ColorModeInitializer() {\n  useColorMode();\n  return <script dangerouslySetInnerHTML={{ __html: colorModeScript }} />;\n}\n"],"names":[],"mappings":";;;AAUA;AAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgEjB;AACL;AACA;AACF;;;;"}