@neynar/ui 0.3.1 → 0.5.0

package/dist/components/ui/text-field.d.ts

@@ -1,243 +0,0 @@
-import * as React from "react";
-import { Input } from "./input";
-type TextFieldProps = {
-    label?: string;
-    helperText?: string;
-    error?: string;
-    required?: boolean;
-    className?: string;
-} & Omit<React.ComponentProps<typeof Input>, "className">;
-/**
- * TextField - Complete form field with label, input, and descriptive text
- *
- * A comprehensive form field component that combines Input and Label components with
- * additional helper text and error handling capabilities. Automatically manages
- * accessibility attributes, ID generation, and ARIA relationships to ensure forms
- * are usable by all users including those using assistive technologies.
- *
- * Built on top of the Input and Label primitives, TextField provides a complete
- * form field solution with consistent styling, proper semantic markup, and enhanced
- * UX features. Supports all HTML input types while adding form validation states,
- * descriptive text, and automatic accessibility compliance.
- *
- * @example
- * ```tsx
- * // Basic text input with label
- * <TextField
- *   label="Email Address"
- *   type="email"
- *   placeholder="Enter your email"
- *   name="email"
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Required field with helper text
- * <TextField
- *   label="Username"
- *   placeholder="@username"
- *   helperText="Choose a unique username (3-20 characters, letters and numbers only)"
- *   required
- *   minLength={3}
- *   maxLength={20}
- *   pattern="[a-zA-Z0-9]+"
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Password field with validation error
- * <TextField
- *   label="Password"
- *   type="password"
- *   required
- *   error="Password must be at least 8 characters long"
- *   value={password}
- *   onChange={(e) => setPassword(e.target.value)}
- *   minLength={8}
- *   autoComplete="new-password"
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Controlled component with real-time validation
- * const [email, setEmail] = useState("");
- * const [error, setError] = useState("");
- *
- * const validateEmail = (value: string) => {
- *   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
- *   if (!emailRegex.test(value)) {
- *     setError("Please enter a valid email address");
- *   } else {
- *     setError("");
- *   }
- * };
- *
- * <TextField
- *   label="Email"
- *   type="email"
- *   value={email}
- *   onChange={(e) => {
- *     setEmail(e.target.value);
- *     validateEmail(e.target.value);
- *   }}
- *   onBlur={(e) => validateEmail(e.target.value)}
- *   error={error}
- *   required
- *   autoComplete="email"
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Number input with constraints
- * <TextField
- *   label="Age"
- *   type="number"
- *   min={0}
- *   max={120}
- *   step={1}
- *   helperText="Enter your age in years"
- *   placeholder="25"
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Search input with custom styling
- * <TextField
- *   label="Search"
- *   type="search"
- *   placeholder="Search products..."
- *   className="max-w-md"
- *   onKeyDown={(e) => {
- *     if (e.key === 'Enter') {
- *       handleSearch(e.currentTarget.value);
- *     }
- *   }}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Form integration with React Hook Form
- * const { register, formState: { errors } } = useForm();
- *
- * <form onSubmit={handleSubmit(onSubmit)}>
- *   <TextField
- *     label="Full Name"
- *     {...register("fullName", { required: "Full name is required" })}
- *     error={errors.fullName?.message}
- *     helperText="Enter your first and last name"
- *   />
- *
- *   <TextField
- *     label="Phone Number"
- *     type="tel"
- *     {...register("phone", {
- *       pattern: {
- *         value: /^[\+]?[1-9][\d]{0,15}$/,
- *         message: "Please enter a valid phone number"
- *       }
- *     })}
- *     error={errors.phone?.message}
- *     autoComplete="tel"
- *   />
- * </form>
- * ```
- *
- * @example
- * ```tsx
- * // File input with custom validation
- * <TextField
- *   label="Profile Picture"
- *   type="file"
- *   accept="image/*"
- *   helperText="Upload a PNG, JPG or GIF (max 5MB)"
- *   onChange={(e) => {
- *     const file = e.target.files?.[0];
- *     if (file && file.size > 5 * 1024 * 1024) {
- *       setError("File size must be less than 5MB");
- *     } else {
- *       setError("");
- *       handleFileUpload(file);
- *     }
- *   }}
- *   error={fileError}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Date input with range constraints
- * <TextField
- *   label="Birth Date"
- *   type="date"
- *   min="1900-01-01"
- *   max={new Date().toISOString().split('T')[0]}
- *   helperText="You must be 18 or older to register"
- *   required
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Disabled field with explanation
- * <TextField
- *   label="Account ID"
- *   value="ACC-12345"
- *   disabled
- *   helperText="This value is automatically generated and cannot be changed"
- * />
- * ```
- *
- * @accessibility
- * - **Semantic Association**: Proper label-input relationship via `htmlFor` and `id` attributes
- * - **ARIA Support**: Implements `aria-invalid`, `aria-describedby`, and `aria-required` attributes
- * - **Focus Management**: Keyboard navigation with visible focus indicators and proper tab order
- * - **Screen Reader Support**: Helper text and error messages are properly announced via `aria-describedby`
- * - **Required Fields**: Visual asterisk indicator and semantic `aria-required` for screen readers
- * - **Error States**: Clear visual styling and programmatic error indication with `aria-invalid`
- * - **Automatic ID Generation**: Uses `React.useId()` to prevent conflicts and ensure accessibility
- * - **Click-to-Focus**: Clicking the label automatically focuses the input field
- * - **Disabled State**: Proper disabled styling and screen reader announcements
- * - **Validation Support**: Works with native HTML5 validation and custom validation libraries
- *
- * @remarks
- * The TextField component automatically handles:
- * - ID generation and label-input association for accessibility compliance
- * - ARIA attribute management based on component state (error, required, helper text)
- * - Error state precedence over helper text display
- * - Focus management and keyboard navigation patterns
- * - Consistent styling inheritance from Input and Label components
- * - Screen reader compatibility with proper announcements
- *
- * ## Component Composition
- *
- * TextField is composed of:
- * - **Root Container**: `div` with `space-y-2` for consistent spacing
- * - **Label**: Radix UI Label primitive with proper association and styling
- * - **Input**: Enhanced HTML input with design system styling and validation states
- * - **Helper/Error Text**: Conditional paragraph elements with proper ARIA linking
- *
- * ## Input Type Support
- *
- * Supports all HTML input types including:
- * - **Text Types**: `text`, `email`, `password`, `tel`, `url`, `search`
- * - **Numeric Types**: `number`, `range` (with min/max/step support)
- * - **Date/Time Types**: `date`, `datetime-local`, `month`, `time`, `week`
- * - **Other Types**: `file`, `hidden`, `color`, `checkbox`, `radio`
- *
- * @see {@link Input} The underlying input component with styling and validation
- * @see {@link Label} The label component used for accessible field labels
- * @see {@link https://ui.shadcn.com/docs/components/input} shadcn/ui Input documentation
- * @see {@link https://www.radix-ui.com/primitives/docs/components/label} Radix UI Label primitive
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input} MDN Input element reference
- * @see {@link https://www.w3.org/WAI/tutorials/forms/} W3C Forms accessibility tutorial
- * @since 1.0.0
- */
-declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export { TextField };
-//# sourceMappingURL=text-field.d.ts.map

package/dist/components/ui/text-field.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../src/components/ui/text-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AA+DhC,KAAK,cAAc,GAAG;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsOG;AACH,QAAA,MAAM,SAAS,sGA0Cd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/ui/theme-toggle.d.ts

@@ -1,227 +0,0 @@
-import { Button, buttonVariants } from "@/components/ui/button";
-import { type VariantProps } from "class-variance-authority";
-type ThemeToggleProps = {
-    /**
-     * Whether to show the current theme name as text next to the icon
-     * @default `size !== "icon"`
-     */
-    showLabel?: boolean;
-    /**
-     * Alignment of the dropdown menu relative to the trigger button
-     * @default "end"
-     */
-    align?: "start" | "center" | "end";
-} & React.ComponentProps<typeof Button> & VariantProps<typeof buttonVariants>;
-/**
- * ThemeToggle - A zero-configuration theme switcher with system, light, and dark modes
- *
- * A completely self-contained theme toggle component that provides an intuitive dropdown
- * interface for switching between system preference, light mode, and dark mode. Works
- * immediately without any provider setup, context configuration, or additional dependencies.
- *
- * Built on top of shadcn/ui components (Button + DropdownMenu) with the Neynar useTheme
- * hook for state management. Handles theme persistence via cookies, system preference
- * detection, real-time system changes, and synchronization across multiple instances.
- *
- * **Zero Configuration Design:**
- * Just import and use - no providers, no setup, no configuration required. The component
- * handles all theme management internally and provides a complete solution out of the box.
- *
- * **Perfect for:**
- * - Application headers and navigation bars
- * - Settings panels and preference screens
- * - Toolbars and floating action areas
- * - Any location where users need quick theme access
- *
- * @example Basic usage (most common - icon button)
- * ```tsx
- * // Just drop it in! Works immediately with zero setup
- * function Header() {
- *   return (
- *     <header className="flex items-center justify-between p-4">
- *       <Logo />
- *       <ThemeToggle /> // That's it!
- *     </header>
- *   );
- * }
- * ```
- *
- * @example With text labels for better UX
- * ```tsx
- * // Show current theme name next to icon
- * <ThemeToggle size="default" showLabel />
- *
- * // In a settings panel
- * <div className="space-y-4">
- *   <h3>Appearance</h3>
- *   <div className="flex items-center justify-between">
- *     <span>Theme</span>
- *     <ThemeToggle size="sm" showLabel />
- *   </div>
- * </div>
- * ```
- *
- * @example Different visual variants
- * ```tsx
- * // Ghost button for minimalist toolbars
- * <ThemeToggle variant="ghost" />
- *
- * // Secondary style for subtle integration
- * <ThemeToggle variant="secondary" size="sm" />
- *
- * // Outline style (default) for clear boundaries
- * <ThemeToggle variant="outline" size="lg" />
- * ```
- *
- * @example Custom positioning and styling
- * ```tsx
- * // Custom alignment and styling
- * <ThemeToggle
- *   align="start"
- *   className="border-2 border-primary shadow-lg"
- * />
- *
- * // Multiple synchronized instances
- * function App() {
- *   return (
- *     <>
- *       <Header>
- *         <ThemeToggle /> // Changes sync automatically
- *       </Header>
- *       <Sidebar>
- *         <ThemeToggle variant="ghost" size="sm" /> // Stays in sync
- *       </Sidebar>
- *     </>
- *   );
- * }
- * ```
- *
- * @example Integration with navigation patterns
- * ```tsx
- * // Header navigation with multiple controls
- * <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
- *   <div className="container flex h-14 items-center">
- *     <div className="flex items-center space-x-2">
- *       <Logo />
- *       <nav className="hidden md:flex items-center space-x-6">
- *         <Link href="/docs">Documentation</Link>
- *         <Link href="/examples">Examples</Link>
- *       </nav>
- *     </div>
- *     <div className="flex items-center space-x-2 ml-auto">
- *       <Button variant="ghost" size="sm">Settings</Button>
- *       <ThemeToggle />
- *       <UserMenu />
- *     </div>
- *   </div>
- * </header>
- *
- * // Sidebar with theme control in footer
- * <aside className="w-64 border-r bg-muted/40">
- *   <nav className="flex-1 p-4">
- *     // Navigation items
- *   </nav>
- *   <footer className="p-4 border-t">
- *     <div className="flex items-center justify-between">
- *       <UserProfile compact />
- *       <ThemeToggle variant="ghost" size="sm" />
- *     </div>
- *   </footer>
- * </aside>
- * ```
- *
- * @example Advanced usage patterns
- * ```tsx
- * // Responsive behavior with different sizes
- * <div className="flex items-center gap-2">
- *   <span className="hidden sm:inline-block text-sm">Theme:</span>
- *   <ThemeToggle
- *     size={{ base: "sm", md: "default" }}
- *     showLabel={{ base: false, sm: true }}
- *   />
- * </div>
- *
- * // Conditional rendering based on user preferences
- * function CustomThemeControl({ userPrefersAdvanced }: { userPrefersAdvanced: boolean }) {
- *   if (userPrefersAdvanced) {
- *     return <AdvancedThemePanel />;
- *   }
- *   return <ThemeToggle showLabel />;
- * }
- * ```
- *
- * @param variant - Visual style variant inherited from Button component (default: "outline")
- * @param size - Size variant inherited from Button component (default: "icon")
- * @param className - Additional CSS classes for custom styling
- * @param showLabel - Whether to show theme name text (auto-enabled for non-icon sizes)
- * @param align - Dropdown menu alignment relative to trigger button (default: "end")
- *
- * @features
- * - **Zero Configuration**: Import and use immediately - no setup required
- * - **System Detection**: Automatically follows OS dark/light preference changes
- * - **Perfect Persistence**: Theme choice saved via cookies for SSR compatibility
- * - **Multi-Instance Sync**: Multiple toggles stay perfectly synchronized
- * - **Real-Time Updates**: Responds to system theme changes while app is running
- * - **Smooth Transitions**: CSS-based theme switching with no flash of wrong content
- * - **Accessibility First**: Full keyboard navigation and screen reader support
- * - **Touch Optimized**: Works perfectly on mobile and tablet devices
- * - **Framework Agnostic**: Works with Next.js, Vite, Create React App, etc.
- *
- * @accessibility
- * - **Keyboard Navigation**: Full support for Enter, Space, and Arrow keys
- * - **Screen Reader Support**: Proper ARIA labels and role announcements
- * - **Focus Management**: Visible focus indicators meeting WCAG 2.1 AA standards
- * - **State Communication**: Current selection clearly indicated with checkmarks
- * - **High Contrast**: Works with system high contrast modes
- * - **Reduced Motion**: Respects user's motion preferences
- * - **Semantic HTML**: Uses proper button and menu semantics
- * - **Live Regions**: Theme changes announced to assistive technology
- *
- * @technical
- * **Component Architecture:**
- * - Built with Radix UI primitives for robust accessibility
- * - Uses Tailwind CSS with CSS custom properties for theming
- * - State managed by custom `useTheme` hook with event-driven synchronization
- * - Cookie-based persistence with 1-year expiration
- * - Client-side hydration safe with SSR support
- *
- * **Performance Characteristics:**
- * - Minimal bundle size impact (only imports what's needed)
- * - No context overhead (direct hook usage)
- * - Efficient event-driven updates (single state change per theme switch)
- * - Lazy loading compatible (works in code-split components)
- * - No memory leaks (automatic cleanup of event listeners)
- *
- * **Browser Support:**
- * - Modern browsers with CSS custom properties support
- * - IE11+ with polyfills for CustomEvent and matchMedia
- * - Graceful degradation for older browsers
- * - Progressive enhancement for advanced features
- *
- * @remarks
- * **State Management:**
- * This component uses the {@link useTheme} hook internally to manage theme state.
- * Theme changes are persisted automatically via cookies and synchronized across
- * all browser tabs and multiple component instances using custom events.
- *
- * **Styling Integration:**
- * The component integrates with your existing design system through Tailwind CSS
- * and shadcn/ui patterns. Themes are applied via CSS custom properties and dark
- * mode class toggles, ensuring compatibility with most styling approaches.
- *
- * **Server-Side Rendering:**
- * Fully compatible with SSR frameworks like Next.js. Theme preference is stored
- * in cookies to prevent hydration mismatches, and the component gracefully handles
- * server/client differences.
- *
- * @see {@link useTheme} - The underlying theme management hook with event-driven architecture
- * @see {@link Button} - Base button component providing variant and size styling
- * @see {@link DropdownMenu} - Menu component providing accessible dropdown interaction
- * @see {@link DropdownMenuContent} - Content container with positioning and collision detection
- * @see {@link DropdownMenuItem} - Individual menu items with proper focus management
- * @see {@link ThemePreference} - Type definition for available theme options
- * @since 1.0.0
- */
-declare function ThemeToggle({ variant, size, className, showLabel, align, ...props }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;
-export { ThemeToggle };
-//# sourceMappingURL=theme-toggle.d.ts.map

package/dist/components/ui/theme-toggle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/ui/theme-toggle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAShE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AA4H7D,KAAK,gBAAgB,GAAG;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GACrC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiNG;AACH,iBAAS,WAAW,CAAC,EACnB,OAAmB,EACnB,IAAa,EACb,SAAS,EACT,SAAS,EACT,KAAa,EACb,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA6DlB;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -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

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