@minidev.fun/ui 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Tokenfi Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,274 @@
+<h1 align="center">@minidev.fun/ui</h1>
+
+<p align="center">
+  <strong>Beautiful React components built on Base UI + Tailwind CSS v4</strong>
+</p>
+
+<p align="center">
+  <a href="https://minidev.fun">🚀 Minidev</a>
+</p>
+
+---
+
+## What is this? 🤔
+
+@minidev.fun/ui is a full-featured React component library—the same components that power Minidev Studio and our suite of developer tools.
+
+**One package. 50+ components. Tailwind CSS v4 powered.**
+
+```css
+/* src/index.css */
+@import "@minidev.fun/ui/styles";
+@import "@minidev.fun/ui/themes/minidev-sunset";
+```
+
+```tsx
+import "./index.css";
+import { Button } from "@minidev.fun/ui/button";
+import { Card } from "@minidev.fun/ui/card";
+import { Alert } from "@minidev.fun/ui/alert";
+
+export default function App() {
+  return (
+    <Card>
+      <Alert variant="success">Ready to ship 🚀</Alert>
+      <Button>Get Started</Button>
+    </Card>
+  );
+}
+```
+
+## Why @minidev.fun/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 Minidev Studio and used by developers building on Web3 & 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 Minidev Sunset and First Light themes. Easy to customize or create your own with CSS variables. |
+
+---
+
+## Installation 📦
+
+```bash
+# npm
+npm install @minidev.fun/ui
+
+# pnpm
+pnpm add @minidev.fun/ui
+
+# yarn
+yarn add @minidev.fun/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.
+
+### Minidev Enhancements
+
+Improvements we've made to existing components:
+
+- **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
+
+### 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                                                      |
+| **Minidev Custom**         | ColorModeInitializer, ColorModeToggle, Title, Text, Code, Blockquote, Caption, Overline, Modal, ListItem, Toast |
+
+### Hooks & Utilities
+
+| Export                       | Description                                            |
+| ---------------------------- | ------------------------------------------------------ |
+| `@minidev.fun/ui/use-mobile` | `useMobile()` hook for responsive breakpoint detection |
+| `@minidev.fun/ui/utils`      | `cn()` utility for merging Tailwind classes            |
+
+---
+
+## Import Examples 📝
+
+Each component has its own export path:
+
+```tsx
+// Core components
+import { Button } from "@minidev.fun/ui/button";
+import { Input } from "@minidev.fun/ui/input";
+import { Card, CardHeader, CardContent } from "@minidev.fun/ui/card";
+
+// Color Mode
+import {
+  ColorModeInitializer,
+  ColorModeToggle,
+  useColorMode,
+} from "@minidev.fun/ui/color-mode";
+
+// Typography
+import { Title, Text, Caption } from "@minidev.fun/ui/typography";
+
+// Toast
+import { Toaster, toast } from "@minidev.fun/ui/sonner";
+
+// Utilities
+import { cn } from "@minidev.fun/ui/utils";
+import { useMobile } from "@minidev.fun/ui/use-mobile";
+```
+
+---
+
+## Setup & Customization 🎨
+
+Create a CSS file with your styles and theme:
+
+```css
+/* app/globals.css or src/index.css */
+@import "@minidev.fun/ui/styles";
+@import "@minidev.fun/ui/themes/minidev-sunset";
+```
+
+Then import the CSS file in your app entry:
+
+```tsx
+// main.tsx (Vite) or layout.tsx (Next.js)
+import "./globals.css";
+```
+
+**Note:** Styles must be imported via CSS `@import`, not JS imports. The CSS files use `@import "tailwindcss"` which requires Tailwind processing.
+
+See the [Theming Guide](./docs/theming/index.md) for the full list of customizable tokens.
+
+### Color Mode
+
+Zero-configuration dark mode:
+
+```tsx
+// Add to your root layout
+<ColorModeInitializer />
+
+// Drop in anywhere for user control
+<ColorModeToggle />
+
+// Programmatic access
+const { mode, preference, setPreference } = useColorMode();
+```
+
+### Data Slots
+
+All components include `data-slot` attributes for targeted CSS and testing:
+
+```css
+/* Style specific component parts */
+[data-slot="dialog-content"] {
+  backdrop-filter: blur(20px);
+}
+[data-slot="button"] {
+  font-weight: 600;
+}
+```
+
+```ts
+// Stable E2E test selectors
+page.locator('[data-slot="dialog-trigger"]').click();
+```
+
+---
+
+## Framework Support 🛠️
+
+Works with any React framework:
+
+- **Next.js**
+- **Vite**
+- **Remix**
+- **Astro**
+- **TanStack Start**
+
+---
+
+## Documentation 📖
+
+### Integration Guides
+
+Framework-specific setup guides:
+
+- [Next.js Integration](./docs/integrations/nextjs.md)
+- [Vite Integration](./docs/integrations/vite.md) — React + Vite setup
+
+### Reference
+
+- [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
+  - [Minidev Sunset Theme](./docs/theming/minidev-sunset.md) — Default theme reference
+  - [First Light Theme](./docs/theming/first-light.md) — Hand-drawn aesthetic
+- [Troubleshooting](./docs/troubleshooting.md) — Common issues and solutions
+
+### For AI Assistants
+
+LLM-optimized documentation for AI coding assistants:
+
+- [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
+
+---
+
+## Credits
+
+Made by the Minidev team.
+
+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
+
+---
+
+<p align="center">
+  MIT License · Made with 🧡 by <a href="https://minidev.fun">Minidev</a>
+</p>

package/context7.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://context7.com/schema/context7.json",
+  "projectTitle": "@minidev.fun/ui",
+  "description": "AI-first React component library for coding agents. LLM-optimized docs, sensible defaults, zero config. Built on shadcn patterns, Base UI, and Tailwind CSS v4.",
+  "folders": ["llm", "src/**"],
+  "excludeFolders": ["**/stories/**"],
+  "rules": [
+    "Import components from their dedicated paths: import { Button } from '@minidev.fun/ui/button'",
+    "Import themes as CSS: import '@minidev.fun/ui/themes/minidev-sunset'",
+    "Base styles required: @import '@minidev.fun/ui/styles' in your CSS file",
+    "Use ColorModeInitializer in <head> for SSR-safe dark mode",
+    "All components have data-slot attributes for CSS targeting",
+    "Use the render prop (not asChild) for component polymorphism",
+    "Compound components export multiple parts from the same path",
+    "Use cn() utility from '@minidev.fun/ui/utils' for class merging"
+  ]
+}

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/minidev.fun/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 "@minidev.fun/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/minidev.fun/color-mode/color-mode-initializer.d.ts.map

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

package/dist/components/minidev.fun/color-mode/color-mode-toggle.d.ts

@@ -0,0 +1,106 @@
+import { Button } from '../../ui/button';
+type ColorModeToggleSize = "xs" | "sm" | "default" | "lg";
+type ColorModeToggleProps = {
+    /**
+     * Button size - when showLabel is false, renders as a square icon button
+     * @default "default"
+     */
+    size?: ColorModeToggleSize;
+    /**
+     * Whether to show the current color mode name as text next to the icon
+     * @default false
+     */
+    showLabel?: boolean;
+    /**
+     * Alignment of the dropdown menu relative to the trigger button
+     * @default "end"
+     */
+    align?: "start" | "center" | "end";
+} & Omit<React.ComponentProps<typeof Button>, "size">;
+/**
+ * ColorModeToggle - A zero-configuration color mode switcher with system, light, and dark modes
+ *
+ * A completely self-contained color mode 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 Base UI components (Button + DropdownMenu) with the Minidev useColorMode
+ * hook for state management. Handles color mode 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 color mode management internally and provides a complete solution out of the box.
+ *
+ * @example Basic usage (most common - icon button)
+ * ```tsx
+ * import { ColorModeToggle } from "@minidev.fun/ui/color-mode";
+ *
+ * // Just drop it in! Works immediately with zero setup
+ * function Header() {
+ *   return (
+ *     <header className="flex items-center justify-between p-4">
+ *       <Logo />
+ *       <ColorModeToggle />
+ *     </header>
+ *   );
+ * }
+ * ```
+ *
+ * @example With text labels for better UX
+ * ```tsx
+ * // Show current color mode name next to icon
+ * <ColorModeToggle size="default" showLabel />
+ *
+ * // In a settings panel
+ * <div className="space-y-4">
+ *   <h3>Appearance</h3>
+ *   <div className="flex items-center justify-between">
+ *     <span>Color Mode</span>
+ *     <ColorModeToggle size="sm" showLabel />
+ *   </div>
+ * </div>
+ * ```
+ *
+ * @example Different visual variants
+ * ```tsx
+ * // Ghost button for minimalist toolbars
+ * <ColorModeToggle variant="ghost" />
+ *
+ * // Secondary style for subtle integration
+ * <ColorModeToggle variant="secondary" size="sm" />
+ *
+ * // Outline style (default) for clear boundaries
+ * <ColorModeToggle variant="outline" size="lg" />
+ * ```
+ *
+ * @param variant - Visual style variant inherited from Button component (default: "outline")
+ * @param size - Button size: xs, sm, default, lg. Renders as icon button when showLabel is false (default: "default")
+ * @param className - Additional CSS classes for custom styling
+ * @param showLabel - Whether to show color mode name text. When false, renders as square icon button (default: false)
+ * @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**: Color mode choice saved via cookies for SSR compatibility
+ * - **Multi-Instance Sync**: Multiple toggles stay perfectly synchronized
+ * - **Real-Time Updates**: Responds to system color mode changes while app is running
+ * - **Smooth Transitions**: CSS-based mode 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
+ *
+ * @see {@link useColorMode} - The underlying color mode management hook with event-driven architecture
+ * @see {@link ColorModeScript} - Component for FOUC prevention (required in root layout)
+ * @since 1.0.0
+ */
+declare function ColorModeToggle({ variant, size, className, showLabel, align, ...props }: ColorModeToggleProps): import("react/jsx-runtime").JSX.Element;
+export { ColorModeToggle, type ColorModeToggleProps, type ColorModeToggleSize };
+//# sourceMappingURL=color-mode-toggle.d.ts.map

package/dist/components/minidev.fun/color-mode/color-mode-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-mode-toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/minidev.fun/color-mode/color-mode-toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAkChD,KAAK,mBAAmB,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;AAE1D,KAAK,oBAAoB,GAAG;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AACH,iBAAS,eAAe,CAAC,EACvB,OAAmB,EACnB,IAAgB,EAChB,SAAS,EACT,SAAiB,EACjB,KAAa,EACb,GAAG,KAAK,EACT,EAAE,oBAAoB,2CA+DtB;AAED,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,KAAK,mBAAmB,EAAE,CAAC"}

package/dist/components/minidev.fun/color-mode/index.d.ts

@@ -0,0 +1,4 @@
+export { ColorModeInitializer } from './color-mode-initializer';
+export { ColorModeToggle } from './color-mode-toggle';
+export { useColorMode, type ColorModePreference } from './use-color-mode';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/minidev.fun/color-mode/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/minidev.fun/color-mode/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/minidev.fun/color-mode/use-color-mode.d.ts

@@ -0,0 +1,91 @@
+/**
+ * Color mode preference options for the color mode system
+ *
+ * Controls how the application determines the active color mode:
+ * - `"system"` - Automatically follows the user's OS preference
+ * - `"light"` - Forces light mode regardless of system preference
+ * - `"dark"` - Forces dark mode regardless of system preference
+ *
+ * @example
+ * ```tsx
+ * const { preference, setPreference } = useColorMode();
+ *
+ * // Switch to dark mode
+ * setPreference("dark");
+ *
+ * // Follow system preference
+ * setPreference("system");
+ * ```
+ *
+ * @since 1.0.0
+ */
+export type ColorModePreference = "system" | "light" | "dark";
+/**
+ * Hook for managing application color mode with automatic system preference detection
+ *
+ * A complete color mode 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 ColorModeScript} component to provide
+ * a complete color mode solution with FOUC prevention and perfect synchronization
+ * across multiple instances.
+ *
+ * Features:
+ * - **Perfect synchronization**: Multiple hook instances stay in sync via custom events
+ * - **Automatic persistence**: Color mode 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 color mode 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 color mode switching
+ * ```tsx
+ * function ColorModeToggle() {
+ *   const { preference, mode, setPreference } = useColorMode();
+ *
+ *   const toggleMode = () => {
+ *     setPreference(mode === "dark" ? "light" : "dark");
+ *   };
+ *
+ *   return (
+ *     <button onClick={toggleMode}>
+ *       Switch to {mode === "dark" ? "light" : "dark"} mode
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
+ * @example Color mode selector dropdown
+ * ```tsx
+ * function ColorModeSelector() {
+ *   const { preference, setPreference } = useColorMode();
+ *
+ *   return (
+ *     <select value={preference} onChange={(e) => setPreference(e.target.value as ColorModePreference)}>
+ *       <option value="system">Follow system</option>
+ *       <option value="light">Light mode</option>
+ *       <option value="dark">Dark mode</option>
+ *     </select>
+ *   );
+ * }
+ * ```
+ *
+ * @returns Object containing current color mode state and setter function
+ * @returns returns.preference - The user's selected color mode preference
+ * @returns returns.mode - The actual color mode currently applied (always "light" or "dark")
+ * @returns returns.setPreference - Function to change the color mode preference
+ *
+ * @see {@link ColorModePreference} - Available color mode preference options
+ * @see {@link ColorModeScript} - Component for FOUC prevention
+ * @see {@link ColorModeToggle} - UI component for color mode switching
+ * @since 1.0.0
+ */
+export declare function useColorMode(): {
+    preference: ColorModePreference;
+    mode: "dark" | "light";
+    setPreference: (newPreference: ColorModePreference) => void;
+};
+//# sourceMappingURL=use-color-mode.d.ts.map

package/dist/components/minidev.fun/color-mode/use-color-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-color-mode.d.ts","sourceRoot":"","sources":["../../../../src/components/minidev.fun/color-mode/use-color-mode.ts"],"names":[],"mappings":"AAmBA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAuJ9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,wBAAgB,YAAY;;;mCAWY,mBAAmB;EAyC1D"}