npm - @neynar/ui - Versions diffs - 0.4.0 → 1.0.0 - Mend

@neynar/ui 0.4.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1854) hide show

package/dist/components/ui/theme.d.ts DELETED Viewed

@@ -1,194 +0,0 @@
-/**
- * Theme - Prevents flash of unstyled content (FOUC) during theme initialization
- *
- * A critical component that prevents the flash of incorrect theme styling by applying
- * the user's preferred theme before the page renders. This component should be placed
- * once at the root of your application, ideally in the document head or at the very
- * beginning of the body.
- *
- * The component works by injecting a small inline script that:
- * 1. Reads the stored theme preference from cookies
- * 2. Detects system theme preference if set to "system"
- * 3. Applies the appropriate theme class and color scheme immediately
- * 4. Executes synchronously before first paint to prevent FOUC
- *
- * Built as a zero-configuration component that requires no props or setup. Simply
- * drop it into your application's root layout and it will handle theme initialization
- * automatically.
- *
- * @component
- * @example Basic usage in Next.js App Router
- * ```tsx
- * import { Theme } from "@neynar/ui";
- *
- * export default function RootLayout({ children }) {
- *   return (
- *     <html lang="en" suppressHydrationWarning>
- *       <head>
- *         <Theme />
- *       </head>
- *       <body>{children}</body>
- *     </html>
- *   );
- * }
- * ```
- *
- * @example Usage in Vite/React
- * ```tsx
- * import { Theme } from "@neynar/ui";
- *
- * function App() {
- *   return (
- *     <>
- *       <Theme />
- *       <div className="app">
- *         App content here
- *       </div>
- *     </>
- *   );
- * }
- * ```
- *
- * @example Usage with Remix
- * ```tsx
- * import { Theme } from "@neynar/ui";
- *
- * export default function Root() {
- *   return (
- *     <html lang="en">
- *       <head>
- *         <Theme />
- *         <Meta />
- *         <Links />
- *       </head>
- *       <body>
- *         <Outlet />
- *         <ScrollRestoration />
- *         <Scripts />
- *       </body>
- *     </html>
- *   );
- * }
- * ```
- *
- * @example Usage with Gatsby
- * ```tsx
- * import { Theme } from "@neynar/ui";
- *
- * export function wrapRootElement({ element }) {
- *   return (
- *     <>
- *       <Theme />
- *       {element}
- *     </>
- *   );
- * }
- * ```
- *
- * @example Usage in plain React
- * ```tsx
- * import { Theme } from "@neynar/ui";
- * import { createRoot } from "react-dom/client";
- *
- * const root = createRoot(document.getElementById('root'));
- * root.render(
- *   <>
- *     <Theme />
- *     <App />
- *   </>
- * );
- * ```
- *
- * @features
- * - **FOUC Prevention**: Applies theme before first paint to eliminate flash
- * - **Framework Agnostic**: Works with Next.js, Vite, Remix, Gatsby, and other React frameworks
- * - **SSR Compatible**: Handles server-side rendering correctly without hydration issues
- * - **System Detection**: Automatically follows OS dark/light preference when set to "system"
- * - **Cookie Persistence**: Maintains theme preference across browser sessions and tabs
- * - **Minimal Overhead**: Tiny inline script (~0.5KB minified) with no external dependencies
- * - **Zero Configuration**: Works immediately without any setup or props
- * - **Error Resilient**: Graceful fallback to light theme on any execution errors
- *
- * @accessibility
- * - Respects `prefers-color-scheme` media query for system theme preference
- * - Maintains proper color contrast ratios in both light and dark themes
- * - Compatible with screen readers and assistive technology
- * - Follows WCAG 2.1 guidelines for color and contrast accessibility
- * - Supports high contrast mode when available in the operating system
- * - No accessibility barriers introduced by the theme switching mechanism
- *
- * @performance
- * - **Critical Path Optimization**: Executes before React hydration to prevent FOUC
- * - **Zero Dependencies**: No external libraries or network requests required
- * - **Inline Execution**: Script runs immediately without additional round trips
- * - **Minimal Size**: Compressed script adds negligible overhead to page load
- * - **No Runtime Cost**: Zero ongoing performance impact after initial execution
- * - **Memory Efficient**: No persistent JavaScript objects or event listeners
- *
- * @security
- * - **Safe HTML Injection**: Uses `dangerouslySetInnerHTML` with verified safe content
- * - **No External Sources**: All code is inline with no external script references
- * - **No Dynamic Evaluation**: No use of `eval()`, `Function()`, or similar dynamic execution
- * - **Error Boundaries**: Comprehensive try-catch blocks prevent script failures
- * - **Cookie Safety**: Proper parsing and validation of cookie data
- * - **XSS Protection**: No user input or dynamic content injection
- *
- * @browser-support
- * - **Modern Browsers**: Full support in all modern browsers (Chrome 60+, Firefox 55+, Safari 12+)
- * - **Legacy Browsers**: Graceful degradation in older browsers (defaults to light theme)
- * - **Mobile Browsers**: Full support on iOS Safari, Chrome Mobile, Samsung Internet
- * - **Media Query Support**: Requires `matchMedia` API for system theme detection
- * - **Cookie Support**: Requires cookies for theme persistence (standard in all browsers)
- * - **JavaScript Required**: Non-functional with JavaScript disabled (graceful degradation)
- *
- * @implementation-details
- * **Script Execution Flow:**
- * 1. Parse theme cookie using safe JSON parsing with error handling
- * 2. Extract user preference (system/light/dark) from stored data
- * 3. If "system", query `prefers-color-scheme` media query for OS preference
- * 4. Apply corresponding CSS class ('dark') and color-scheme property
- * 5. Handle any errors by defaulting to light theme
- *
- * **Cookie Structure:**
- * ```json
- * {
- *   "preference": "system" | "light" | "dark",
- *   "mode": "light" | "dark"
- * }
- * ```
- *
- * **DOM Modifications:**
- * - Adds or removes 'dark' class on `document.documentElement`
- * - Sets `color-scheme` CSS property for native element theming
- * - Changes are applied synchronously before first paint
- *
- * @remarks
- * This component must be used alongside the {@link useTheme} hook and
- * {@link ThemeToggle} component for a complete theming solution. The Theme
- * component handles initial theme application (FOUC prevention), while the
- * hook manages runtime theme changes and the toggle provides user interface.
- *
- * **Architecture Overview:**
- * - **Theme Component**: Prevents FOUC by applying initial theme
- * - **useTheme Hook**: Manages theme state and preference changes at runtime
- * - **ThemeToggle Component**: Provides user interface for theme selection
- * - **Cookie Persistence**: Shared storage mechanism between all components
- *
- * The component is designed to work with Tailwind CSS's dark mode strategy,
- * specifically the 'dark' class approach. It applies the 'dark' class to the
- * document root and sets the appropriate color-scheme CSS property for native
- * element theming.
- *
- * **Integration Requirements:**
- * - Tailwind CSS configured with `darkMode: 'class'` strategy
- * - CSS custom properties for theme-aware color definitions
- * - Proper color contrast ratios defined for both light and dark themes
- * - Optional: CSS transitions for smooth theme switching
- *
- * @see {@link useTheme} - Hook for managing theme state and preferences at runtime
- * @see {@link ThemeToggle} - UI component for user-initiated theme switching
- * @see {@link https://tailwindcss.com/docs/dark-mode} - Tailwind CSS dark mode documentation
- * @since 1.0.0
- */
-export declare function Theme(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=theme.d.ts.map

package/dist/components/ui/theme.d.ts.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/components/ui/theme.tsx"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+LG;AACH,wBAAgB,KAAK,4CAwCpB"}

package/dist/components/ui/typography.d.ts DELETED Viewed

@@ -1,344 +0,0 @@
-import * as React from "react";
-/**
- * Typography Components - Purpose-named, Tailwind-first text components
- *
- * This module provides semantic typography components for web applications.
- * Each component has a clear purpose and sensible Tailwind CSS defaults that
- * can be fully overridden via the className prop.
- *
- * Design Philosophy:
- * - Purpose-obvious naming (PageTitle, BodyText, Caption)
- * - Semantic HTML defaults (h1, h2, p, etc.)
- * - Tailwind-first with zero abstraction
- * - Full className override control
- * - Appropriate sizing for web apps (not marketing sites)
- *
- * @see {@link https://tailwindcss.com} Tailwind CSS documentation
- * @since 2.0.0
- */
-/**
- * Base typography component props
- *
- * All typography components accept these props:
- * - `as` - The HTML element to render (each component has a sensible default)
- * - `className` - Additional Tailwind classes to merge with defaults
- * - `children` - Content to render
- * - All standard HTML attributes for the underlying element
- */
-type TypographyBaseProps<T extends React.ElementType> = {
-    /** The HTML element or component to render as */
-    as?: T;
-    /** Additional CSS classes for custom styling */
-    className?: string;
-    /** Content to render within the typography element */
-    children?: React.ReactNode;
-};
-type TypographyProps<T extends React.ElementType> = TypographyBaseProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof TypographyBaseProps<T>>;
-/**
- * PageTitle - Primary page heading component
- *
- * The main heading for a page, typically used once per page. Uses text-3xl (30px)
- * which is appropriate for web application page titles. Defaults to h1 element.
- *
- * @param as - HTML element to render @default "h1"
- * @param className - Additional Tailwind classes (e.g., "text-4xl text-accent")
- * @param children - Content to render
- * @param ...props - All standard HTMLHeadingElement attributes
- *
- * @example
- * ```tsx
- * // Default usage
- * <PageTitle>User Dashboard</PageTitle>
- *
- * // With custom styling
- * <PageTitle className="text-4xl text-accent">
- *   Custom Styled Title
- * </PageTitle>
- *
- * // As different element
- * <PageTitle as="h2">Section Title as H2</PageTitle>
- *
- * // Responsive sizing
- * <PageTitle className="text-2xl md:text-3xl lg:text-4xl">
- *   Responsive Title
- * </PageTitle>
- * ```
- *
- * @accessibility
- * - Should be used once per page for proper document outline
- * - Provides main page topic for screen readers
- * - Helps with keyboard navigation landmarks
- */
-export declare function PageTitle<T extends React.ElementType = "h1">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
-/**
- * SectionTitle - Secondary section heading component
- *
- * Section headings that divide page content into logical groups. Uses text-2xl (24px)
- * for clear hierarchy below PageTitle. Defaults to h2 element.
- *
- * @param as - HTML element to render @default "h2"
- * @param className - Additional Tailwind classes
- * @param children - Content to render
- * @param ...props - All standard HTMLHeadingElement attributes
- *
- * @example
- * ```tsx
- * // Default usage
- * <SectionTitle>Recent Activity</SectionTitle>
- *
- * // With custom color
- * <SectionTitle className="text-accent">
- *   Featured Section
- * </SectionTitle>
- *
- * // As h3 element
- * <SectionTitle as="h3">Subsection Title</SectionTitle>
- * ```
- *
- * @accessibility
- * - Maintains document outline hierarchy
- * - Should follow PageTitle (h1) in document flow
- * - Provides section navigation for screen readers
- */
-export declare function SectionTitle<T extends React.ElementType = "h2">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
-/**
- * SubsectionTitle - Tertiary subsection heading component
- *
- * Subsection headings for further content division. Uses text-xl (20px) for
- * subtle distinction from SectionTitle. Defaults to h3 element.
- *
- * @param as - HTML element to render @default "h3"
- * @param className - Additional Tailwind classes
- * @param children - Content to render
- * @param ...props - All standard HTMLHeadingElement attributes
- *
- * @example
- * ```tsx
- * // Default usage
- * <SubsectionTitle>Configuration Options</SubsectionTitle>
- *
- * // With custom styling
- * <SubsectionTitle className="text-muted-foreground">
- *   Optional Settings
- * </SubsectionTitle>
- * ```
- *
- * @accessibility
- * - Should follow SectionTitle (h2) in document flow
- * - Helps create detailed content structure
- * - Supports screen reader document navigation
- */
-export declare function SubsectionTitle<T extends React.ElementType = "h3">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
-/**
- * BodyText - Primary paragraph text component
- *
- * Standard paragraph element for readable body text. Uses text-base (16px) with
- * relaxed line height for optimal readability. Defaults to p element.
- *
- * @param as - HTML element to render @default "p"
- * @param className - Additional Tailwind classes
- * @param children - Content to render
- * @param ...props - All standard HTMLParagraphElement attributes
- *
- * @example
- * ```tsx
- * // Default usage
- * <BodyText>
- *   This is standard body text that provides information to the user.
- * </BodyText>
- *
- * // With custom styling
- * <BodyText className="text-muted-foreground">
- *   Secondary information with reduced visual prominence.
- * </BodyText>
- *
- * // As different element
- * <BodyText as="div">
- *   Body text in a div container.
- * </BodyText>
- * ```
- *
- * @accessibility
- * - Provides proper semantic structure for body content
- * - Maintains readable line height for accessibility
- * - Supports screen reader text flow and navigation
- */
-export declare function BodyText<T extends React.ElementType = "p">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
-/**
- * BodyTextLarge - Emphasized body text component
- *
- * Larger body text for lead paragraphs and emphasized content. Uses text-lg (18px)
- * with relaxed line height. Defaults to p element.
- *
- * @param as - HTML element to render @default "p"
- * @param className - Additional Tailwind classes
- * @param children - Content to render
- * @param ...props - All standard HTMLParagraphElement attributes
- *
- * @example
- * ```tsx
- * // Lead paragraph
- * <BodyTextLarge>
- *   This is a lead paragraph that introduces the main content.
- * </BodyTextLarge>
- *
- * // Emphasized content
- * <BodyTextLarge className="font-medium text-accent">
- *   Important announcement text.
- * </BodyTextLarge>
- * ```
- */
-export declare function BodyTextLarge<T extends React.ElementType = "p">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
-/**
- * BodyTextSmall - De-emphasized body text component
- *
- * Smaller body text for less prominent content. Uses text-sm (14px) with
- * normal line height. Defaults to p element.
- *
- * @param as - HTML element to render @default "p"
- * @param className - Additional Tailwind classes
- * @param children - Content to render
- * @param ...props - All standard HTMLParagraphElement attributes
- *
- * @example
- * ```tsx
- * // Small body text
- * <BodyTextSmall>
- *   This is smaller, less prominent body text.
- * </BodyTextSmall>
- *
- * // Helper text
- * <BodyTextSmall className="text-muted-foreground">
- *   Additional context or helper information.
- * </BodyTextSmall>
- * ```
- */
-export declare function BodyTextSmall<T extends React.ElementType = "p">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
-/**
- * Caption - Small supplementary text component
- *
- * Small text for metadata, timestamps, and supplementary information. Uses text-sm (14px)
- * with muted color. Defaults to span element for inline usage.
- *
- * @param as - HTML element to render @default "span"
- * @param className - Additional Tailwind classes
- * @param children - Content to render
- * @param ...props - All standard HTMLSpanElement attributes
- *
- * @example
- * ```tsx
- * // Timestamp
- * <Caption>Last updated 2 minutes ago</Caption>
- *
- * // Image caption
- * <Caption>Figure 1: System architecture diagram</Caption>
- *
- * // Metadata
- * <Caption className="block mt-2">
- *   Created by John Doe on Jan 15, 2025
- * </Caption>
- * ```
- *
- * @accessibility
- * - Maintains inline text flow for screen readers
- * - Sufficient contrast with muted color
- * - Works well for supplementary information
- */
-export declare function Caption<T extends React.ElementType = "span">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
-/**
- * Overline - Small uppercase label component
- *
- * Small uppercase text for category tags and eyebrow labels. Uses text-xs (12px)
- * with uppercase transformation and wide tracking. Defaults to span element.
- *
- * @param as - HTML element to render @default "span"
- * @param className - Additional Tailwind classes
- * @param children - Content to render
- * @param ...props - All standard HTMLSpanElement attributes
- *
- * @example
- * ```tsx
- * // Category label
- * <Overline>Featured</Overline>
- *
- * // Section eyebrow
- * <Overline className="text-accent-foreground">
- *   New Feature
- * </Overline>
- *
- * // Tag
- * <Overline className="bg-accent px-2 py-1 rounded">
- *   Beta
- * </Overline>
- * ```
- */
-export declare function Overline<T extends React.ElementType = "span">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
-/**
- * Code - Inline code component
- *
- * Monospace text for inline code snippets and technical references. Uses text-sm
- * with monospace font and subtle background. Defaults to code element.
- *
- * @param as - HTML element to render @default "code"
- * @param className - Additional Tailwind classes
- * @param children - Content to render
- * @param ...props - All standard HTMLElement attributes
- *
- * @example
- * ```tsx
- * // Inline code
- * <Code>const message = "Hello, world!";</Code>
- *
- * // Variable reference
- * <p>Set the <Code>API_KEY</Code> environment variable.</p>
- *
- * // Terminal command
- * <Code className="bg-accent">npm install @neynar/ui</Code>
- * ```
- *
- * @accessibility
- * - Uses semantic code element for proper meaning
- * - Monospace font aids in code readability
- * - Screen readers understand this as technical content
- */
-export declare function Code<T extends React.ElementType = "code">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
-/**
- * Blockquote - Quoted text component
- *
- * Semantic blockquote element for extended quotations and excerpts. Features
- * italic styling and left border for visual distinction. Defaults to blockquote element.
- *
- * @param as - HTML element to render @default "blockquote"
- * @param className - Additional Tailwind classes
- * @param children - Content to render
- * @param ...props - All standard HTMLQuoteElement attributes
- *
- * @example
- * ```tsx
- * // Simple quote
- * <Blockquote>
- *   "The best way to predict the future is to invent it."
- * </Blockquote>
- *
- * // With attribution
- * <div>
- *   <Blockquote>
- *     "Building great products requires deep understanding of user needs."
- *   </Blockquote>
- *   <Caption className="mt-2">— Product Team</Caption>
- * </div>
- *
- * // Custom styling
- * <Blockquote className="bg-muted/50 p-4 rounded-lg">
- *   Customer testimonial or feedback.
- * </Blockquote>
- * ```
- *
- * @accessibility
- * - Uses semantic blockquote element for proper quotation meaning
- * - Screen readers understand this as quoted content
- * - Maintains proper text flow and readability
- */
-export declare function Blockquote<T extends React.ElementType = "blockquote">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=typography.d.ts.map

package/dist/components/ui/typography.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/components/ui/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;;GAQG;AACH,KAAK,mBAAmB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI;IACtD,iDAAiD;IACjD,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,mBAAmB,CAAC,CAAC,CAAC,GACxE,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;AAoIxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,IAAI,EAAE,EAC5D,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,CAAC,CAAC,2CAQpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,IAAI,EAAE,EAC/D,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,CAAC,CAAC,2CAQpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,IAAI,EAAE,EAClE,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,CAAC,CAAC,2CAQpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,EAAE,EAC1D,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,CAAC,CAAC,2CAQpB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,EAAE,EAC/D,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,CAAC,CAAC,2CAQpB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,EAAE,EAC/D,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,CAAC,CAAC,2CAQpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,EAC5D,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,CAAC,CAAC,2CAQpB;AAGD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,EAC7D,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,CAAC,CAAC,2CAQpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,EACzD,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,CAAC,CAAC,2CAQpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,YAAY,EAAE,EACrE,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,CAAC,CAAC,2CAQpB"}

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

@@ -1,142 +0,0 @@
-/**
- * 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 DELETED Viewed

	@@ -1 +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"}