@neynar/ui 0.1.1

package/dist/hooks/use-theme.d.ts

@@ -0,0 +1,142 @@
+/**
+ * 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";
+/**
+ * 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 declare function useTheme(): {
+    preference: ThemePreference;
+    mode: "dark" | "light";
+    setPreference: (newPreference: ThemePreference) => void;
+};
+//# sourceMappingURL=use-theme.d.ts.map

package/dist/hooks/use-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme.d.ts","sourceRoot":"","sources":["../../src/hooks/use-theme.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;AAmHzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiHG;AACH,wBAAgB,QAAQ;;;mCAWgB,eAAe;EAqDtD"}

package/dist/index.d.ts

@@ -0,0 +1,57 @@
+export * from "./components/ui/button";
+export * from "./components/ui/text-field";
+export * from "./components/ui/select";
+export * from "./components/ui/combobox";
+export * from "./components/ui/input";
+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";
+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";
+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";
+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";
+export * from "./components/ui/typography";
+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/sonner";
+export * from "./components/ui/toggle";
+export * from "./components/ui/toggle-group";
+export * from "./components/ui/slider";
+export * from "./components/ui/command";
+export * from "./components/ui/chart";
+export * from "./components/ui/carousel";
+export * from "./components/ui/theme";
+export * from "./components/ui/theme-toggle";
+export * from "./lib/utils";
+export * from "./hooks/use-mobile";
+export * from "./hooks/use-theme";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAG5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AAGxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AAGvC,cAAc,4BAA4B,CAAC;AAG3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AAGvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAG7C,cAAc,aAAa,CAAC;AAG5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC"}