npm - @minidev.fun/ui - Versions diffs - 1.0.4 → 1.0.5 - Mend

@minidev.fun/ui 1.0.4 → 1.0.5

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 (318) hide show

package/dist/components/minidev.fun/color-mode/color-mode-initializer.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/{src/components → components}/minidev.fun/color-mode/color-mode-toggle.js RENAMED Viewed

@@ -1,13 +1,13 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { Button } from "../../../../components/ui/src/components/ui/button.js";
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "../../../../components/ui/src/components/ui/dropdown-menu.js";
+import { Button } from "../../ui/button.js";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "../../ui/dropdown-menu.js";
 import { useColorMode } from "./use-color-mode.js";
-import { cn } from "../../../../lib/utils.js";
-import Monitor from "../../../../node_modules/lucide-react/dist/esm/icons/monitor.js";
-import Sun from "../../../../node_modules/lucide-react/dist/esm/icons/sun.js";
-import Moon from "../../../../node_modules/lucide-react/dist/esm/icons/moon.js";
+import { cn } from "../../../lib/utils.js";
+import Monitor from "../../../node_modules/lucide-react/dist/esm/icons/monitor.js";
+import Sun from "../../../node_modules/lucide-react/dist/esm/icons/sun.js";
+import Moon from "../../../node_modules/lucide-react/dist/esm/icons/moon.js";
 const iconSizeMap = {
   xs: "icon-xs",
   sm: "icon-sm",

package/dist/components/minidev.fun/color-mode/color-mode-toggle.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"color-mode-toggle.js","sources":["../../../../src/components/minidev.fun/color-mode/color-mode-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Monitor, Moon, Sun } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { useColorMode } from \"./use-color-mode\";\nimport { cn } from \"@/lib/utils\";\n\n// Map regular sizes to icon sizes for when showLabel is false\nconst iconSizeMap = {\n xs: \"icon-xs\",\n sm: \"icon-sm\",\n default: \"icon\",\n lg: \"icon-lg\",\n} as const;\n\n// Icon sizes that scale with button size\nconst iconClassMap = {\n xs: \"size-3\",\n sm: \"size-3.5\",\n default: \"size-4\",\n lg: \"size-5\",\n} as const;\n\n// Text sizes that scale with button size\nconst textClassMap = {\n xs: \"text-xs\",\n sm: \"text-sm\",\n default: \"text-base\",\n lg: \"text-lg\",\n} as const;\n\ntype ColorModeToggleSize = \"xs\" | \"sm\" | \"default\" | \"lg\";\n\ntype ColorModeToggleProps = {\n /**\n * Button size - when showLabel is false, renders as a square icon button\n * @default \"default\"\n */\n size?: ColorModeToggleSize;\n /**\n * Whether to show the current color mode name as text next to the icon\n * @default false\n */\n showLabel?: boolean;\n /**\n * Alignment of the dropdown menu relative to the trigger button\n * @default \"end\"\n */\n align?: \"start\" | \"center\" | \"end\";\n} & Omit<React.ComponentProps<typeof Button>, \"size\">;\n\n/**\n * ColorModeToggle - A zero-configuration color mode switcher with system, light, and dark modes\n *\n * A completely self-contained color mode toggle component that provides an intuitive dropdown\n * interface for switching between system preference, light mode, and dark mode. Works\n * immediately without any provider setup, context configuration, or additional dependencies.\n *\n * Built on top of Base UI components (Button + DropdownMenu) with the Minidev useColorMode\n * hook for state management. Handles color mode persistence via cookies, system preference\n * detection, real-time system changes, and synchronization across multiple instances.\n *\n * **Zero Configuration Design:**\n * Just import and use - no providers, no setup, no configuration required. The component\n * handles all color mode management internally and provides a complete solution out of the box.\n *\n * @example Basic usage (most common - icon button)\n * ```tsx\n * import { ColorModeToggle } from \"@minidev.fun/ui/color-mode\";\n *\n * // Just drop it in! Works immediately with zero setup\n * function Header() {\n * return (\n * <header className=\"flex items-center justify-between p-4\">\n * <Logo />\n * <ColorModeToggle />\n * </header>\n * );\n * }\n * ```\n *\n * @example With text labels for better UX\n * ```tsx\n * // Show current color mode name next to icon\n * <ColorModeToggle size=\"default\" showLabel />\n *\n * // In a settings panel\n * <div className=\"space-y-4\">\n * <h3>Appearance</h3>\n * <div className=\"flex items-center justify-between\">\n * <span>Color Mode</span>\n * <ColorModeToggle size=\"sm\" showLabel />\n * </div>\n * </div>\n * ```\n *\n * @example Different visual variants\n * ```tsx\n * // Ghost button for minimalist toolbars\n * <ColorModeToggle variant=\"ghost\" />\n *\n * // Secondary style for subtle integration\n * <ColorModeToggle variant=\"secondary\" size=\"sm\" />\n *\n * // Outline style (default) for clear boundaries\n * <ColorModeToggle variant=\"outline\" size=\"lg\" />\n * ```\n *\n * @param variant - Visual style variant inherited from Button component (default: \"outline\")\n * @param size - Button size: xs, sm, default, lg. Renders as icon button when showLabel is false (default: \"default\")\n * @param className - Additional CSS classes for custom styling\n * @param showLabel - Whether to show color mode name text. When false, renders as square icon button (default: false)\n * @param align - Dropdown menu alignment relative to trigger button (default: \"end\")\n *\n * @features\n * - **Zero Configuration**: Import and use immediately - no setup required\n * - **System Detection**: Automatically follows OS dark/light preference changes\n * - **Perfect Persistence**: Color mode choice saved via cookies for SSR compatibility\n * - **Multi-Instance Sync**: Multiple toggles stay perfectly synchronized\n * - **Real-Time Updates**: Responds to system color mode changes while app is running\n * - **Smooth Transitions**: CSS-based mode switching with no flash of wrong content\n * - **Accessibility First**: Full keyboard navigation and screen reader support\n * - **Touch Optimized**: Works perfectly on mobile and tablet devices\n * - **Framework Agnostic**: Works with Next.js, Vite, Create React App, etc.\n *\n * @accessibility\n * - **Keyboard Navigation**: Full support for Enter, Space, and Arrow keys\n * - **Screen Reader Support**: Proper ARIA labels and role announcements\n * - **Focus Management**: Visible focus indicators meeting WCAG 2.1 AA standards\n * - **State Communication**: Current selection clearly indicated with checkmarks\n *\n * @see {@link useColorMode} - The underlying color mode management hook with event-driven architecture\n * @see {@link ColorModeScript} - Component for FOUC prevention (required in root layout)\n * @since 1.0.0\n */\nfunction ColorModeToggle({\n variant = \"outline\",\n size = \"default\",\n className,\n showLabel = false,\n align = \"end\",\n ...props\n}: ColorModeToggleProps) {\n // Use icon size when no label, regular size when label is shown\n const buttonSize = showLabel ? size : iconSizeMap[size];\n const iconClass = iconClassMap[size];\n const textClass = textClassMap[size];\n\n const { preference, setPreference } = useColorMode();\n\n // Track hydration to prevent mismatch between server/client rendering.\n // This runs once after hydration to signal we can show client-specific values.\n const [mounted, setMounted] = useState(false);\n // eslint-disable-next-line react-hooks/set-state-in-effect -- Intentional: standard hydration detection pattern\n useEffect(() => setMounted(true), []);\n\n // Simple icons and labels - no configuration needed\n const items = [\n { mode: \"system\" as const, Icon: Monitor, label: \"System\" },\n { mode: \"light\" as const, Icon: Sun, label: \"Light\" },\n { mode: \"dark\" as const, Icon: Moon, label: \"Dark\" },\n ];\n\n // Get current item based on preference, not resolved mode\n // Before hydration, always show \"system\" to match server render\n const currentItem = mounted\n ? items.find((item) => item.mode === preference) || items[0]\n : items[0]; // Always \"system\" on server\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <Button\n variant={variant}\n size={buttonSize}\n className={cn(className)}\n suppressHydrationWarning\n {...props}\n >\n {currentItem && <currentItem.Icon className={iconClass} />}\n {showLabel && (\n <span className={textClass}>{currentItem?.label}</span>\n )}\n <span className=\"sr-only\">Toggle color mode</span>\n </Button>\n }\n />\n <DropdownMenuContent align={align}>\n {items.map((item) => (\n <DropdownMenuItem\n key={item.mode}\n onClick={() => setPreference(item.mode)}\n className=\"flex items-center gap-2\"\n >\n <item.Icon className=\"size-4\" />\n <span>{item.label}</span>\n {preference === item.mode && (\n <span className=\"ml-auto text-xs opacity-60\">✓</span>\n )}\n </DropdownMenuItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n\nexport { ColorModeToggle, type ColorModeToggleProps, type ColorModeToggleSize };\n"],"names":[],"mappings":";;;;;;;;;;AAeA;AAAoB;AACd;AACA;AACK;AAEX;AAGA;AAAqB;AACf;AACA;AACK;AAEX;AAGA;AAAqB;AACf;AACA;AACK;AAEX;AA0GA;AAAyB;AACb;AACH;AACP;AACY;AACJ;AAEV;AAEE;AACA;AACA;AAEA;AAIA;AAEA;AAGA;AAAc;AACqC;AACL;AACA;AAK9C;AAIA;AAEI;AAAA;AAAC;AAAA;AAEG;AAAC;AAAA;AACC;AACM;AACiB;AACC;AACpB;AAEH;AAAuD;AAEN;AAEP;AAAA;AAAA;AAAA;AAC7C;AAAA;AAKA;AAAC;AAAA;AAEuC;AAC5B;AAEV;AAA8B;AACZ;AAE8B;AAAA;AAAA;AAPtC;AAWhB;AAGN;;;;"}

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

@@ -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.js ADDED Viewed

@@ -0,0 +1,9 @@
+import { ColorModeInitializer } from "./color-mode-initializer.js";
+import { ColorModeToggle } from "./color-mode-toggle.js";
+import { useColorMode } from "./use-color-mode.js";
+export {
+  ColorModeInitializer,
+  ColorModeToggle,
+  useColorMode
+};
+//# sourceMappingURL=index.js.map

package/dist/components/minidev.fun/color-mode/use-color-mode.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"use-color-mode.js","sources":["../../../../src/components/minidev.fun/color-mode/use-color-mode.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/**\n * Module-level flag to ensure the system color mode listener is set up only once.\n *\n * This is a pragmatic tradeoff: module-level mutable state is generally a code smell\n * in React (SSR issues, test leakage, not idiomatic), but the alternative would be\n * requiring users to wrap their app in a <ColorModeProvider>. Since we want zero-config\n * \"just works\" behavior, we accept this pattern here.\n *\n * It's safe because:\n * - Only runs client-side (window check in setupSystemListener)\n * - The listener is truly global (system color scheme is one per browser)\n * - It's idempotent and stateless (reads from cookie each time)\n */\nlet systemListenerInitialized = false;\n\n/**\n * Color mode preference options for the color mode system\n *\n * Controls how the application determines the active color mode:\n * - `\"system\"` - Automatically follows the user's OS preference\n * - `\"light\"` - Forces light mode regardless of system preference\n * - `\"dark\"` - Forces dark mode regardless of system preference\n *\n * @example\n * ```tsx\n * const { preference, setPreference } = useColorMode();\n *\n * // Switch to dark mode\n * setPreference(\"dark\");\n *\n * // Follow system preference\n * setPreference(\"system\");\n * ```\n *\n * @since 1.0.0\n */\nexport type ColorModePreference = \"system\" | \"light\" | \"dark\";\n\n/**\n * Internal color mode state structure stored in cookies\n *\n * Maintains both the user's preference and the actual mode value\n * to handle system color mode changes efficiently.\n *\n * @internal\n */\ntype ColorModeState = {\n /** User's selected color mode preference */\n preference: ColorModePreference;\n /** Actual mode applied to the DOM */\n mode: \"light\" | \"dark\";\n};\n\n/**\n * Cookie configuration for color mode persistence\n *\n * Uses secure defaults for cross-site compatibility and long-term storage.\n *\n * @internal\n */\nconst COOKIE_NAME = \"color-mode\";\nconst COOKIE_OPTIONS = {\n path: \"/\",\n maxAge: 60 * 60 * 24 * 365, // 1 year\n sameSite: \"lax\" as const,\n};\n\n/**\n * Retrieves the stored color mode preference from browser cookies\n *\n * Safely parses the cookie value and handles malformed data gracefully.\n * Returns null if no valid color mode data is found or if running server-side.\n *\n * @returns The stored color mode state or null if unavailable\n * @internal\n */\nfunction getColorModeFromCookie(): ColorModeState | null {\n if (typeof document === \"undefined\") return null;\n\n // Try new cookie name first, then fall back to legacy \"theme\" cookie\n let match = document.cookie.match(\n new RegExp(`(?:^|; )${COOKIE_NAME}=([^;]*)`),\n );\n if (!match) {\n match = document.cookie.match(/(?:^|; )theme=([^;]*)/);\n }\n if (!match) return null;\n\n try {\n const decoded = decodeURIComponent(match[1] || \"\");\n return JSON.parse(decoded);\n } catch {\n return null;\n }\n}\n\n/**\n * Persists the current color mode state to browser cookies\n *\n * Stores the complete color mode state as a JSON string with appropriate\n * cookie settings for security and longevity. Safe for server-side rendering.\n *\n * @param state - The color mode state to persist\n * @internal\n */\nfunction setColorModeCookie(state: ColorModeState) {\n if (typeof document === \"undefined\") return;\n\n const value = JSON.stringify(state);\n let cookieString = `${COOKIE_NAME}=${encodeURIComponent(value)}`;\n\n cookieString += `; path=${COOKIE_OPTIONS.path}`;\n cookieString += `; max-age=${COOKIE_OPTIONS.maxAge}`;\n cookieString += `; samesite=${COOKIE_OPTIONS.sameSite}`;\n\n document.cookie = cookieString;\n}\n\n/**\n * Detects the user's system color mode preference\n *\n * Uses the CSS media query `prefers-color-scheme` to determine if the user\n * has configured their OS to prefer dark or light modes. Falls back to\n * light mode for server-side rendering or unsupported browsers.\n *\n * @returns The system's preferred color mode\n * @internal\n */\nfunction getSystemColorMode(): \"light\" | \"dark\" {\n if (typeof window === \"undefined\") return \"light\";\n return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n ? \"dark\"\n : \"light\";\n}\n\n/**\n * Applies the specified color mode to the document\n *\n * Updates the document's class list and color-scheme CSS property to reflect\n * the chosen mode. This triggers CSS-based mode switching throughout the\n * application and ensures native elements respect the mode choice.\n *\n * @param mode - The color mode to apply (\"light\" or \"dark\")\n * @internal\n */\nfunction applyColorMode(mode: \"light\" | \"dark\") {\n if (typeof document === \"undefined\") return;\n\n // For light mode, remove dark class (light is default)\n // For dark mode, add dark class\n if (mode === \"dark\") {\n document.documentElement.classList.add(\"dark\");\n } else {\n document.documentElement.classList.remove(\"dark\");\n }\n\n // Set color-scheme for native elements\n document.documentElement.style.colorScheme = mode;\n}\n\n/**\n * Sets up a global listener for system color mode changes.\n * Only runs once per module load, regardless of how many hook instances exist.\n *\n * @internal\n */\nfunction setupSystemListener() {\n if (systemListenerInitialized || typeof window === \"undefined\") return;\n systemListenerInitialized = true;\n\n const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n mediaQuery.addEventListener(\"change\", () => {\n // Only respond if current preference is \"system\"\n const stored = getColorModeFromCookie();\n if (stored?.preference !== \"system\") return;\n\n const mode: \"light\" | \"dark\" = mediaQuery.matches ? \"dark\" : \"light\";\n const newState: ColorModeState = { preference: \"system\", mode };\n\n setColorModeCookie(newState);\n applyColorMode(mode);\n window.dispatchEvent(\n new CustomEvent(\"color-mode-change\", { detail: newState }),\n );\n });\n}\n\n/**\n * Hook for managing application color mode with automatic system preference detection\n *\n * A complete color mode management solution that handles persistence, system preference\n * detection, and DOM manipulation without requiring any context providers. Designed\n * for applications that need simple light/dark mode switching with optional system\n * preference following.\n *\n * This hook works in conjunction with the {@link ColorModeScript} component to provide\n * a complete color mode solution with FOUC prevention and perfect synchronization\n * across multiple instances.\n *\n * Features:\n * - **Perfect synchronization**: Multiple hook instances stay in sync via custom events\n * - **Automatic persistence**: Color mode preference saved to cookies across sessions\n * - **System preference detection**: Automatically follows OS dark/light mode when set to \"system\"\n * - **Live system updates**: Responds to system color mode changes in real-time\n * - **SSR compatible**: Works safely during server-side rendering\n * - **Type safe**: Full TypeScript support with proper type definitions\n * - **No provider required**: Self-contained hook that works out of the box\n *\n * @example Basic color mode switching\n * ```tsx\n * function ColorModeToggle() {\n * const { preference, mode, setPreference } = useColorMode();\n *\n * const toggleMode = () => {\n * setPreference(mode === \"dark\" ? \"light\" : \"dark\");\n * };\n *\n * return (\n * <button onClick={toggleMode}>\n * Switch to {mode === \"dark\" ? \"light\" : \"dark\"} mode\n * </button>\n * );\n * }\n * ```\n *\n * @example Color mode selector dropdown\n * ```tsx\n * function ColorModeSelector() {\n * const { preference, setPreference } = useColorMode();\n *\n * return (\n * <select value={preference} onChange={(e) => setPreference(e.target.value as ColorModePreference)}>\n * <option value=\"system\">Follow system</option>\n * <option value=\"light\">Light mode</option>\n * <option value=\"dark\">Dark mode</option>\n * </select>\n * );\n * }\n * ```\n *\n * @returns Object containing current color mode state and setter function\n * @returns returns.preference - The user's selected color mode preference\n * @returns returns.mode - The actual color mode currently applied (always \"light\" or \"dark\")\n * @returns returns.setPreference - Function to change the color mode preference\n *\n * @see {@link ColorModePreference} - Available color mode preference options\n * @see {@link ColorModeScript} - Component for FOUC prevention\n * @see {@link ColorModeToggle} - UI component for color mode switching\n * @since 1.0.0\n */\nexport function useColorMode() {\n // Initialize state from cookie or default to system\n const [state, setState] = useState<ColorModeState>(() => {\n const saved = getColorModeFromCookie();\n if (saved) return saved;\n\n const mode = getSystemColorMode();\n return { preference: \"system\", mode };\n });\n\n // Set color mode preference - dispatch event, let event handler update state\n function setPreference(newPreference: ColorModePreference) {\n const mode =\n newPreference === \"system\" ? getSystemColorMode() : newPreference;\n const newState = { preference: newPreference, mode };\n\n // Update cookie and DOM immediately\n setColorModeCookie(newState);\n applyColorMode(mode);\n\n // Broadcast change - ALL instances (including this one) will update state from this event\n window.dispatchEvent(\n new CustomEvent(\"color-mode-change\", {\n detail: newState,\n }),\n );\n }\n\n // Set up global system listener once (idempotent) and listen for color mode changes\n useEffect(() => {\n setupSystemListener();\n\n const handleColorModeChange = (event: CustomEvent) => {\n setState(event.detail);\n };\n\n window.addEventListener(\n \"color-mode-change\",\n handleColorModeChange as EventListener,\n );\n return () =>\n window.removeEventListener(\n \"color-mode-change\",\n handleColorModeChange as EventListener,\n );\n }, []);\n\n return {\n preference: state.preference,\n mode: state.mode,\n setPreference,\n };\n}\n"],"names":[],"mappings":";;AAiBA;AA+CA;AACA;AAAuB;AACf;AACiB;AAAA;AAEzB;AAWA;AACE;AAGA;AAA4B;AACiB;AAE7C;AACE;AAAqD;AAEvD;AAEA;AACE;AACA;AAAyB;AAEzB;AAAO;AAEX;AAWA;AACE;AAEA;AACA;AAEA;AACA;AACA;AAEA;AACF;AAYA;AACE;AACA;AAGF;AAYA;AACE;AAIA;AACE;AAA6C;AAE7C;AAAgD;AAIlD;AACF;AAQA;AACE;AACA;AAEA;AACA;AAEE;AACA;AAEA;AACA;AAEA;AACA;AACA;AAAO;AACoD;AAAA;AAG/D;AAiEO;AAEL;AACE;AACA;AAEA;AACA;AAA+B;AAIjC;AACE;AAEA;AAGA;AACA;AAGA;AAAO;AACgC;AAC3B;AACT;AAAA;AAKL;AACE;AAEA;AACE;AAAqB;AAGvB;AAAO;AACL;AACA;AAEF;AACS;AACL;AACA;AAAA;AAIN;AAAO;AACa;AACN;AACZ;AAEJ;;;;"}

package/dist/components/minidev.fun/first-light/first-light-filters.js ADDED Viewed

@@ -0,0 +1,114 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FirstLightFilters() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "absolute h-0 w-0",
+      "aria-hidden": "true",
+      style: { position: "absolute", width: 0, height: 0 },
+      children: /* @__PURE__ */ jsxs("defs", { children: [
+        /* @__PURE__ */ jsxs(
+          "filter",
+          {
+            id: "first-light-filter",
+            x: "-3%",
+            y: "-3%",
+            width: "106%",
+            height: "106%",
+            children: [
+              /* @__PURE__ */ jsx(
+                "feTurbulence",
+                {
+                  type: "fractalNoise",
+                  baseFrequency: "0.015",
+                  numOctaves: "2",
+                  seed: "1",
+                  result: "noise"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "feDisplacementMap",
+                {
+                  in: "SourceGraphic",
+                  in2: "noise",
+                  scale: "1.5",
+                  xChannelSelector: "R",
+                  yChannelSelector: "G"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "filter",
+          {
+            id: "first-light-filter-light",
+            x: "-2%",
+            y: "-2%",
+            width: "104%",
+            height: "104%",
+            children: [
+              /* @__PURE__ */ jsx(
+                "feTurbulence",
+                {
+                  type: "fractalNoise",
+                  baseFrequency: "0.006",
+                  numOctaves: "1",
+                  seed: "2",
+                  result: "noise"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "feDisplacementMap",
+                {
+                  in: "SourceGraphic",
+                  in2: "noise",
+                  scale: "0.4",
+                  xChannelSelector: "R",
+                  yChannelSelector: "G"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "filter",
+          {
+            id: "first-light-filter-heavy",
+            x: "-3%",
+            y: "-3%",
+            width: "106%",
+            height: "106%",
+            children: [
+              /* @__PURE__ */ jsx(
+                "feTurbulence",
+                {
+                  type: "fractalNoise",
+                  baseFrequency: "0.012",
+                  numOctaves: "3",
+                  seed: "3",
+                  result: "noise"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "feDisplacementMap",
+                {
+                  in: "SourceGraphic",
+                  in2: "noise",
+                  scale: "1.5",
+                  xChannelSelector: "R",
+                  yChannelSelector: "G"
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  FirstLightFilters
+};
+//# sourceMappingURL=first-light-filters.js.map

package/dist/components/minidev.fun/first-light/first-light-filters.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"first-light-filters.js","sources":["../../../../src/components/minidev.fun/first-light/first-light-filters.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * FirstLightFilters - SVG filter definitions for hand-drawn/sketch effects\n *\n * This component must be rendered once in your app (typically in your root layout)\n * when using the First Light theme. It provides the SVG filters that create the\n * hand-drawn wobble effect on components.\n *\n * @example\n * ```tsx\n * // app/layout.tsx\n * import \"@minidev.fun/ui/themes/first-light\";\n * import { FirstLightFilters } from \"@minidev.fun/ui/first-light\";\n *\n * export default function Layout({ children }) {\n * return (\n * <html>\n * <body>\n * <FirstLightFilters />\n * {children}\n * </body>\n * </html>\n * );\n * }\n * ```\n */\nexport function FirstLightFilters() {\n return (\n <svg\n className=\"absolute h-0 w-0\"\n aria-hidden=\"true\"\n style={{ position: \"absolute\", width: 0, height: 0 }}\n >\n <defs>\n {/* Standard first-light filter - hand-drawn wobble */}\n <filter\n id=\"first-light-filter\"\n x=\"-3%\"\n y=\"-3%\"\n width=\"106%\"\n height=\"106%\"\n >\n <feTurbulence\n type=\"fractalNoise\"\n baseFrequency=\"0.015\"\n numOctaves=\"2\"\n seed=\"1\"\n result=\"noise\"\n />\n <feDisplacementMap\n in=\"SourceGraphic\"\n in2=\"noise\"\n scale=\"1.5\"\n xChannelSelector=\"R\"\n yChannelSelector=\"G\"\n />\n </filter>\n\n {/* Light first-light filter - barely noticeable */}\n <filter\n id=\"first-light-filter-light\"\n x=\"-2%\"\n y=\"-2%\"\n width=\"104%\"\n height=\"104%\"\n >\n <feTurbulence\n type=\"fractalNoise\"\n baseFrequency=\"0.006\"\n numOctaves=\"1\"\n seed=\"2\"\n result=\"noise\"\n />\n <feDisplacementMap\n in=\"SourceGraphic\"\n in2=\"noise\"\n scale=\"0.4\"\n xChannelSelector=\"R\"\n yChannelSelector=\"G\"\n />\n </filter>\n\n {/* Heavy first-light filter - more pronounced wobble */}\n <filter\n id=\"first-light-filter-heavy\"\n x=\"-3%\"\n y=\"-3%\"\n width=\"106%\"\n height=\"106%\"\n >\n <feTurbulence\n type=\"fractalNoise\"\n baseFrequency=\"0.012\"\n numOctaves=\"3\"\n seed=\"3\"\n result=\"noise\"\n />\n <feDisplacementMap\n in=\"SourceGraphic\"\n in2=\"noise\"\n scale=\"1.5\"\n xChannelSelector=\"R\"\n yChannelSelector=\"G\"\n />\n </filter>\n </defs>\n </svg>\n );\n}\n"],"names":[],"mappings":";;AA2BO;AACL;AACE;AAAC;AAAA;AACW;AACE;AACqC;AAI/C;AAAA;AAAC;AAAA;AACI;AACD;AACA;AACI;AACC;AAEP;AAAA;AAAC;AAAA;AACM;AACS;AACH;AACN;AACE;AAAA;AAAA;AAET;AAAC;AAAA;AACI;AACC;AACE;AACW;AACA;AAAA;AAAA;AACnB;AAAA;AAAA;AAIF;AAAC;AAAA;AACI;AACD;AACA;AACI;AACC;AAEP;AAAA;AAAC;AAAA;AACM;AACS;AACH;AACN;AACE;AAAA;AAAA;AAET;AAAC;AAAA;AACI;AACC;AACE;AACW;AACA;AAAA;AAAA;AACnB;AAAA;AAAA;AAIF;AAAC;AAAA;AACI;AACD;AACA;AACI;AACC;AAEP;AAAA;AAAC;AAAA;AACM;AACS;AACH;AACN;AACE;AAAA;AAAA;AAET;AAAC;AAAA;AACI;AACC;AACE;AACW;AACA;AAAA;AAAA;AACnB;AAAA;AAAA;AAEJ;AAAA;AAGN;;;;"}

package/dist/components/minidev.fun/first-light/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { FirstLightFilters } from './first-light-filters';
2	+ //# sourceMappingURL=index.d.ts.map

package/dist/components/minidev.fun/first-light/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { FirstLightFilters } from "./first-light-filters.js";
+export {
+  FirstLightFilters
+};
+//# sourceMappingURL=index.js.map

package/dist/components/minidev.fun/first-light/index.js.map ADDED Viewed

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

package/dist/components/minidev.fun/typography/blockquote.js ADDED Viewed

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../../lib/utils.js";
+import { typographyColorVariants } from "../../../lib/variants.js";
+function Blockquote({ color, className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "blockquote",
+    {
+      "data-slot": "blockquote",
+      className: cn(
+        "border-l-4 border-border pl-4 italic",
+        typographyColorVariants({ color }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  Blockquote
+};
+//# sourceMappingURL=blockquote.js.map

package/dist/components/minidev.fun/typography/blockquote.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"blockquote.js","sources":["../../../../src/components/minidev.fun/typography/blockquote.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { typographyColorVariants, type TypographyColor } from \"@/lib/variants\";\n\ntype BlockquoteColor = Extract<TypographyColor, \"default\" | \"muted\" | \"subtle\">;\n\ninterface BlockquoteProps extends React.HTMLAttributes<HTMLQuoteElement> {\n /** Text color (limited to neutral colors for semantic appropriateness) */\n color?: BlockquoteColor;\n}\n\n/**\n * Blockquote component for quoted content with a left border accent.\n */\nfunction Blockquote({ color, className, children, ...props }: BlockquoteProps) {\n return (\n <blockquote\n data-slot=\"blockquote\"\n className={cn(\n \"border-l-4 border-border pl-4 italic\",\n typographyColorVariants({ color }),\n className,\n )}\n {...props}\n >\n {children}\n </blockquote>\n );\n}\n\nexport { Blockquote, type BlockquoteProps, type BlockquoteColor };\n"],"names":[],"mappings":";;;;AAeA,SAAS,WAAW,EAAE,OAAO,WAAW,UAAU,GAAG,SAA0B;AAC7E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,wBAAwB,EAAE,OAAO;AAAA,QACjC;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/minidev.fun/typography/code.js ADDED Viewed

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../../lib/utils.js";
+import { typographyColorVariants } from "../../../lib/variants.js";
+function Code({ color, className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "code",
+    {
+      "data-slot": "code",
+      className: cn(
+        "font-mono text-sm bg-muted px-1.5 py-0.5 rounded",
+        typographyColorVariants({ color }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  Code
+};
+//# sourceMappingURL=code.js.map

package/dist/components/minidev.fun/typography/code.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"code.js","sources":["../../../../src/components/minidev.fun/typography/code.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { typographyColorVariants, type TypographyColor } from \"@/lib/variants\";\n\ninterface CodeProps extends React.HTMLAttributes<HTMLElement> {\n /** Text color */\n color?: TypographyColor;\n}\n\n/**\n * Inline code component with monospace font and subtle background.\n * For code blocks, use a dedicated syntax highlighting solution.\n */\nfunction Code({ color, className, children, ...props }: CodeProps) {\n return (\n <code\n data-slot=\"code\"\n className={cn(\n \"font-mono text-sm bg-muted px-1.5 py-0.5 rounded\",\n typographyColorVariants({ color }),\n className,\n )}\n {...props}\n >\n {children}\n </code>\n );\n}\n\nexport { Code, type CodeProps };\n"],"names":[],"mappings":";;;;AAcA,SAAS,KAAK,EAAE,OAAO,WAAW,UAAU,GAAG,SAAoB;AACjE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,wBAAwB,EAAE,OAAO;AAAA,QACjC;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/minidev.fun/typography/index.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export { Title, type TitleProps } from './title';
+export { Text, Caption, Overline, type TextProps, type TextSize, type TextWeight, type TextAlign, type TextTransform, type TextWrap, type LineClamp, } from './text';
+export { Code, type CodeProps } from './code';
+export { Blockquote, type BlockquoteProps, type BlockquoteColor, } from './blockquote';
+export { ListItem, type ListItemProps, type ListItemColor, } from './list-item';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/minidev.fun/typography/index.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { Title } from "./title.js";
+import { Caption, Overline, Text } from "./text.js";
+import { Code } from "./code.js";
+import { Blockquote } from "./blockquote.js";
+import { ListItem } from "./list-item.js";
+export {
+  Blockquote,
+  Caption,
+  Code,
+  ListItem,
+  Overline,
+  Text,
+  Title
+};
+//# sourceMappingURL=index.js.map

package/dist/components/minidev.fun/typography/index.js.map ADDED Viewed

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

package/dist/components/minidev.fun/typography/list-item.js ADDED Viewed

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../../lib/utils.js";
+import { typographyColorVariants } from "../../../lib/variants.js";
+function ListItem({ color, className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "list-item",
+      className: cn(typographyColorVariants({ color }), className),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  ListItem
+};
+//# sourceMappingURL=list-item.js.map

package/dist/components/minidev.fun/typography/list-item.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"list-item.js","sources":["../../../../src/components/minidev.fun/typography/list-item.tsx"],"sourcesContent":["import * as React from \"react\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { typographyColorVariants, type TypographyColor } from \"@/lib/variants\";\r\n\r\ntype ListVariant = \"unordered\" | \"ordered\";\r\n\r\ntype UnorderedMarker = \"disc\" | \"circle\" | \"square\" | \"none\";\r\ntype OrderedMarker =\r\n | \"decimal\"\r\n | \"lower-alpha\"\r\n | \"upper-alpha\"\r\n | \"lower-roman\"\r\n | \"upper-roman\";\r\n\r\ntype ListMarker = UnorderedMarker | OrderedMarker;\r\n\r\ninterface ListProps extends React.HTMLAttributes<\r\n HTMLUListElement | HTMLOListElement\r\n> {\r\n /** Ordered or unordered list */\r\n variant?: ListVariant;\r\n /** Marker style (bullets / numbering) */\r\n marker?: ListMarker;\r\n}\r\n\r\n/**\r\n * List component supporting ordered and unordered lists with marker variants.\r\n */\r\nfunction List({\r\n variant = \"unordered\",\r\n marker,\r\n className,\r\n ...props\r\n}: ListProps) {\r\n const Comp = variant === \"ordered\" ? \"ol\" : \"ul\";\r\n\r\n return (\r\n <Comp\r\n data-slot=\"list\"\r\n className={cn(\r\n \"space-y-2 pl-6\",\r\n\r\n // unordered markers\r\n variant === \"unordered\" && (marker ?? \"disc\") === \"disc\" && \"list-disc\",\r\n variant === \"unordered\" && marker === \"circle\" && \"list-[circle]\",\r\n variant === \"unordered\" && marker === \"square\" && \"list-[square]\",\r\n variant === \"unordered\" && marker === \"none\" && \"list-none\",\r\n\r\n // ordered markers\r\n variant === \"ordered\" &&\r\n (marker ?? \"decimal\") === \"decimal\" &&\r\n \"list-decimal\",\r\n variant === \"ordered\" &&\r\n marker === \"lower-alpha\" &&\r\n \"list-[lower-alpha]\",\r\n variant === \"ordered\" &&\r\n marker === \"upper-alpha\" &&\r\n \"list-[upper-alpha]\",\r\n variant === \"ordered\" &&\r\n marker === \"lower-roman\" &&\r\n \"list-[lower-roman]\",\r\n variant === \"ordered\" &&\r\n marker === \"upper-roman\" &&\r\n \"list-[upper-roman]\",\r\n\r\n className,\r\n )}\r\n {...props}\r\n />\r\n );\r\n}\r\n\r\ntype ListItemColor = Extract<TypographyColor, \"default\" | \"muted\" | \"subtle\">;\r\n\r\ninterface ListItemProps extends React.LiHTMLAttributes<HTMLLIElement> {\r\n /** Text color (limited to neutral colors for semantic appropriateness) */\r\n color?: ListItemColor;\r\n}\r\n\r\n/**\r\n * ListItem component for styled list content.\r\n */\r\nfunction ListItem({ color, className, children, ...props }: ListItemProps) {\r\n return (\r\n <li\r\n data-slot=\"list-item\"\r\n className={cn(typographyColorVariants({ color }), className)}\r\n {...props}\r\n >\r\n {children}\r\n </li>\r\n );\r\n}\r\n\r\nexport {\r\n List,\r\n ListItem,\r\n type ListProps,\r\n type ListVariant,\r\n type ListMarker,\r\n type ListItemProps,\r\n type ListItemColor,\r\n};\r\n"],"names":[],"mappings":";;;;AAmFA,SAAS,SAAS,EAAE,OAAO,WAAW,UAAU,GAAG,SAAwB;AACzE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,wBAAwB,EAAE,MAAA,CAAO,GAAG,SAAS;AAAA,MAC1D,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/minidev.fun/typography/text.js ADDED Viewed

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+import { typographyColorVariants, textVariants } from "../../../lib/variants.js";
+const lineClampClasses = {
+  1: "line-clamp-1",
+  2: "line-clamp-2",
+  3: "line-clamp-3",
+  4: "line-clamp-4",
+  5: "line-clamp-5",
+  6: "line-clamp-6"
+};
+const wrapClasses = {
+  pretty: "text-pretty",
+  balance: "text-balance"
+};
+function Text({
+  size,
+  weight,
+  color,
+  align,
+  transform,
+  wrap,
+  lineClamp,
+  as,
+  render,
+  className,
+  children,
+  ...props
+}) {
+  const classes = cn(
+    textVariants({ size, weight, align, transform }),
+    typographyColorVariants({ color }),
+    wrap && wrapClasses[wrap],
+    lineClamp && lineClampClasses[lineClamp],
+    className
+  );
+  if (render) {
+    return React.cloneElement(render, {
+      className: cn(classes, render.props.className),
+      children,
+      ...props
+    });
+  }
+  const Component = as ?? "p";
+  return /* @__PURE__ */ jsx(Component, { "data-slot": "text", className: classes, ...props, children });
+}
+function Caption(props) {
+  return /* @__PURE__ */ jsx(Text, { size: "xs", color: "muted", ...props });
+}
+function Overline(props) {
+  return /* @__PURE__ */ jsx(Text, { size: "xs", transform: "uppercase", ...props });
+}
+export {
+  Caption,
+  Overline,
+  Text
+};
+//# sourceMappingURL=text.js.map

package/dist/components/minidev.fun/typography/text.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"text.js","sources":["../../../../src/components/minidev.fun/typography/text.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n textVariants,\n typographyColorVariants,\n type TypographyColor,\n} from \"@/lib/variants\";\n\ntype TextSize = \"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\" | \"2xl\";\ntype TextWeight = \"normal\" | \"medium\" | \"semibold\" | \"bold\";\ntype TextAlign = \"left\" | \"center\" | \"right\";\ntype TextTransform = \"uppercase\" | \"lowercase\" | \"capitalize\";\ntype TextWrap = \"pretty\" | \"balance\";\ntype LineClamp = 1 | 2 | 3 | 4 | 5 | 6;\n\ntype TextProps = React.HTMLAttributes<HTMLParagraphElement> & {\n /** Text size - uses Tailwind scale. Default: \"base\" */\n size?: TextSize;\n /** Font weight */\n weight?: TextWeight;\n /** Text color */\n color?: TypographyColor;\n /** Text alignment */\n align?: TextAlign;\n /** Text transform */\n transform?: TextTransform;\n /** Text wrapping: \"pretty\" avoids orphans, \"balance\" equalizes line lengths */\n wrap?: TextWrap;\n /** Truncate text after N lines with ellipsis (uses Tailwind line-clamp-*) */\n lineClamp?: LineClamp;\n /** Change rendered element (simple polymorphism) */\n as?: React.ElementType;\n /** Change rendered element (advanced - takes precedence over `as`) */\n render?: React.ReactElement<{\n className?: string;\n children?: React.ReactNode;\n }>;\n};\n\nconst lineClampClasses: Record<LineClamp, string> = {\n 1: \"line-clamp-1\",\n 2: \"line-clamp-2\",\n 3: \"line-clamp-3\",\n 4: \"line-clamp-4\",\n 5: \"line-clamp-5\",\n 6: \"line-clamp-6\",\n};\n\nconst wrapClasses: Record<TextWrap, string> = {\n pretty: \"text-pretty\",\n balance: \"text-balance\",\n};\n\nfunction Text({\n size,\n weight,\n color,\n align,\n transform,\n wrap,\n lineClamp,\n as,\n render,\n className,\n children,\n ...props\n}: TextProps) {\n const classes = cn(\n textVariants({ size, weight, align, transform }),\n typographyColorVariants({ color }),\n wrap && wrapClasses[wrap],\n lineClamp && lineClampClasses[lineClamp],\n className,\n );\n\n // render prop takes precedence\n if (render) {\n return React.cloneElement(render, {\n className: cn(classes, render.props.className),\n children,\n ...props,\n });\n }\n\n // as prop for simple element swap\n const Component = as ?? \"p\";\n\n return (\n <Component data-slot=\"text\" className={classes} {...props}>\n {children}\n </Component>\n );\n}\n\n/**\n * Caption - convenience alias for small, muted text.\n * Ideal for metadata, timestamps, and secondary information.\n */\nfunction Caption(props: TextProps) {\n return <Text size=\"xs\" color=\"muted\" {...props} />;\n}\n\n/**\n * Overline - convenience alias for uppercase label text.\n * Ideal for category labels and section headers.\n */\nfunction Overline(props: TextProps) {\n return <Text size=\"xs\" transform=\"uppercase\" {...props} />;\n}\n\nexport {\n Text,\n Caption,\n Overline,\n type TextProps,\n type TextSize,\n type TextWeight,\n type TextAlign,\n type TextTransform,\n type TextWrap,\n type LineClamp,\n};\n"],"names":[],"mappings":";;;;AAwCA,MAAM,mBAA8C;AAAA,EAClD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,cAAwC;AAAA,EAC5C,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,UAAU;AAAA,IACd,aAAa,EAAE,MAAM,QAAQ,OAAO,WAAW;AAAA,IAC/C,wBAAwB,EAAE,OAAO;AAAA,IACjC,QAAQ,YAAY,IAAI;AAAA,IACxB,aAAa,iBAAiB,SAAS;AAAA,IACvC;AAAA,EAAA;AAIF,MAAI,QAAQ;AACV,WAAO,MAAM,aAAa,QAAQ;AAAA,MAChC,WAAW,GAAG,SAAS,OAAO,MAAM,SAAS;AAAA,MAC7C;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AAGA,QAAM,YAAY,MAAM;AAExB,SACE,oBAAC,aAAU,aAAU,QAAO,WAAW,SAAU,GAAG,OACjD,UACH;AAEJ;AAMA,SAAS,QAAQ,OAAkB;AACjC,6BAAQ,MAAA,EAAK,MAAK,MAAK,OAAM,SAAS,GAAG,OAAO;AAClD;AAMA,SAAS,SAAS,OAAkB;AAClC,6BAAQ,MAAA,EAAK,MAAK,MAAK,WAAU,aAAa,GAAG,OAAO;AAC1D;"}

package/dist/components/minidev.fun/typography/title.js ADDED Viewed

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+import { typographyColorVariants, titleVariants, titleOrderSizeVariants, titleOrderStyleVariants } from "../../../lib/variants.js";
+const orderToElement = {
+  1: "h1",
+  2: "h2",
+  3: "h3",
+  4: "h4",
+  5: "h5",
+  6: "h6"
+};
+function Title({
+  order = 2,
+  size,
+  weight,
+  color,
+  as,
+  render,
+  className,
+  children,
+  ...props
+}) {
+  const classes = cn(
+    // Order-based style defaults (weight, tracking, leading) - always applied
+    titleOrderStyleVariants({ order }),
+    // Size: use explicit size if provided, otherwise use order-based default
+    size ? titleVariants({ size }) : titleOrderSizeVariants({ order }),
+    // Weight override if provided (overrides order-based weight)
+    weight && titleVariants({ weight }),
+    typographyColorVariants({ color }),
+    className
+  );
+  if (render) {
+    return React.cloneElement(render, {
+      className: cn(classes, render.props.className),
+      children,
+      ...props
+    });
+  }
+  const Component = as ?? orderToElement[order];
+  return /* @__PURE__ */ jsx(Component, { "data-slot": "title", className: classes, ...props, children });
+}
+export {
+  Title
+};
+//# sourceMappingURL=title.js.map

package/dist/components/minidev.fun/typography/title.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"title.js","sources":["../../../../src/components/minidev.fun/typography/title.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n titleVariants,\n titleOrderSizeVariants,\n titleOrderStyleVariants,\n typographyColorVariants,\n type TitleOrder,\n type TitleSize,\n type TitleWeight,\n type TypographyColor,\n} from \"@/lib/variants\";\n\ntype TitleProps = React.HTMLAttributes<HTMLHeadingElement> & {\n /** Semantic heading level - renders h1-h6. Default: 2 */\n order?: TitleOrder;\n /** Visual size override - independent of order. If not set, uses order's default sizing. */\n size?: TitleSize;\n /** Font weight override */\n weight?: TitleWeight;\n /** Text color */\n color?: TypographyColor;\n /** Change rendered element (simple polymorphism) */\n as?: React.ElementType;\n /** Change rendered element (advanced - takes precedence over `as`) */\n render?: React.ReactElement<{\n className?: string;\n children?: React.ReactNode;\n }>;\n};\n\nconst orderToElement: Record<\n TitleOrder,\n \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"\n> = {\n 1: \"h1\",\n 2: \"h2\",\n 3: \"h3\",\n 4: \"h4\",\n 5: \"h5\",\n 6: \"h6\",\n};\n\nfunction Title({\n order = 2,\n size,\n weight,\n color,\n as,\n render,\n className,\n children,\n ...props\n}: TitleProps) {\n const classes = cn(\n // Order-based style defaults (weight, tracking, leading) - always applied\n titleOrderStyleVariants({ order }),\n // Size: use explicit size if provided, otherwise use order-based default\n size ? titleVariants({ size }) : titleOrderSizeVariants({ order }),\n // Weight override if provided (overrides order-based weight)\n weight && titleVariants({ weight }),\n typographyColorVariants({ color }),\n className,\n );\n\n // render prop takes precedence\n if (render) {\n return React.cloneElement(render, {\n className: cn(classes, render.props.className),\n children,\n ...props,\n });\n }\n\n // as prop for simple element swap\n const Component = as ?? orderToElement[order];\n\n return (\n <Component data-slot=\"title\" className={classes} {...props}>\n {children}\n </Component>\n );\n}\n\nexport { Title, type TitleProps };\n"],"names":[],"mappings":";;;;AAgCA,MAAM,iBAGF;AAAA,EACF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,SAAS,MAAM;AAAA,EACb,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,UAAU;AAAA;AAAA,IAEd,wBAAwB,EAAE,OAAO;AAAA;AAAA,IAEjC,OAAO,cAAc,EAAE,KAAA,CAAM,IAAI,uBAAuB,EAAE,OAAO;AAAA;AAAA,IAEjE,UAAU,cAAc,EAAE,QAAQ;AAAA,IAClC,wBAAwB,EAAE,OAAO;AAAA,IACjC;AAAA,EAAA;AAIF,MAAI,QAAQ;AACV,WAAO,MAAM,aAAa,QAAQ;AAAA,MAChC,WAAW,GAAG,SAAS,OAAO,MAAM,SAAS;AAAA,MAC7C;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AAGA,QAAM,YAAY,MAAM,eAAe,KAAK;AAE5C,SACE,oBAAC,aAAU,aAAU,SAAQ,WAAW,SAAU,GAAG,OAClD,UACH;AAEJ;"}

package/dist/components/ui/accordion.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
+/**
+ * Root container for accordion items. Manages expand/collapse state and keyboard navigation.
+ * Supports single or multiple open items simultaneously.
+ */
+declare function Accordion({ className, ...props }: AccordionPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * Container for a single accordion item. Groups trigger and content panel.
+ * Each item must have a unique `value` prop.
+ */
+declare function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * Button that toggles the accordion item open/closed.
+ * Automatically includes chevron icons that flip based on open state.
+ */
+declare function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * Collapsible panel containing the accordion item's content.
+ * Automatically animates height on open/close with slide animation.
+ */
+declare function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props): import("react/jsx-runtime").JSX.Element;
+type AccordionProps = AccordionPrimitive.Root.Props;
+type AccordionItemProps = AccordionPrimitive.Item.Props;
+type AccordionTriggerProps = AccordionPrimitive.Trigger.Props;
+type AccordionContentProps = AccordionPrimitive.Panel.Props;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, type AccordionProps, type AccordionItemProps, type AccordionTriggerProps, type AccordionContentProps, };
+//# sourceMappingURL=accordion.d.ts.map

package/dist/components/ui/{src/components/ui/accordion.js → accordion.js} RENAMED Viewed

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../../../../lib/utils.js";
-import ChevronDown from "../../../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
-import ChevronUp from "../../../../../node_modules/lucide-react/dist/esm/icons/chevron-up.js";
-import { AccordionRoot } from "../../../../../node_modules/@base-ui/react/esm/accordion/root/AccordionRoot.js";
-import { AccordionPanel } from "../../../../../node_modules/@base-ui/react/esm/accordion/panel/AccordionPanel.js";
-import { AccordionItem as AccordionItem$1 } from "../../../../../node_modules/@base-ui/react/esm/accordion/item/AccordionItem.js";
-import { AccordionHeader } from "../../../../../node_modules/@base-ui/react/esm/accordion/header/AccordionHeader.js";
-import { AccordionTrigger as AccordionTrigger$1 } from "../../../../../node_modules/@base-ui/react/esm/accordion/trigger/AccordionTrigger.js";
+import { cn } from "../../lib/utils.js";
+import ChevronDown from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+import ChevronUp from "../../node_modules/lucide-react/dist/esm/icons/chevron-up.js";
+import { AccordionRoot } from "../../node_modules/@base-ui/react/esm/accordion/root/AccordionRoot.js";
+import { AccordionPanel } from "../../node_modules/@base-ui/react/esm/accordion/panel/AccordionPanel.js";
+import { AccordionItem as AccordionItem$1 } from "../../node_modules/@base-ui/react/esm/accordion/item/AccordionItem.js";
+import { AccordionHeader } from "../../node_modules/@base-ui/react/esm/accordion/header/AccordionHeader.js";
+import { AccordionTrigger as AccordionTrigger$1 } from "../../node_modules/@base-ui/react/esm/accordion/trigger/AccordionTrigger.js";
 function Accordion({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     AccordionRoot,

package/dist/components/ui/accordion.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"accordion.js","sources":["../../../src/components/ui/accordion.tsx"],"sourcesContent":["import { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\";\n\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\n\n/**\n * Root container for accordion items. Manages expand/collapse state and keyboard navigation.\n * Supports single or multiple open items simultaneously.\n */\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n return (\n <AccordionPrimitive.Root\n data-slot=\"accordion\"\n className={cn(\"flex w-full flex-col\", className)}\n {...props}\n />\n );\n}\n\n/**\n * Container for a single accordion item. Groups trigger and content panel.\n * Each item must have a unique `value` prop.\n */\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n return (\n <AccordionPrimitive.Item\n data-slot=\"accordion-item\"\n className={cn(\"not-last:border-b\", className)}\n {...props}\n />\n );\n}\n\n/**\n * Button that toggles the accordion item open/closed.\n * Automatically includes chevron icons that flip based on open state.\n */\nfunction AccordionTrigger({\n className,\n children,\n ...props\n}: AccordionPrimitive.Trigger.Props) {\n return (\n <AccordionPrimitive.Header className=\"flex\">\n <AccordionPrimitive.Trigger\n data-slot=\"accordion-trigger\"\n className={cn(\n \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n className,\n )}\n {...props}\n >\n {children}\n <ChevronDownIcon\n data-slot=\"accordion-trigger-icon\"\n className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n />\n <ChevronUpIcon\n data-slot=\"accordion-trigger-icon\"\n className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n />\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n );\n}\n\n/**\n * Collapsible panel containing the accordion item's content.\n * Automatically animates height on open/close with slide animation.\n */\nfunction AccordionContent({\n className,\n children,\n ...props\n}: AccordionPrimitive.Panel.Props) {\n return (\n <AccordionPrimitive.Panel\n data-slot=\"accordion-content\"\n className=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n {...props}\n >\n <div\n className={cn(\n \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n className,\n )}\n >\n {children}\n </div>\n </AccordionPrimitive.Panel>\n );\n}\n\ntype AccordionProps = AccordionPrimitive.Root.Props;\ntype AccordionItemProps = AccordionPrimitive.Item.Props;\ntype AccordionTriggerProps = AccordionPrimitive.Trigger.Props;\ntype AccordionContentProps = AccordionPrimitive.Panel.Props;\n\nexport {\n Accordion,\n AccordionItem,\n AccordionTrigger,\n AccordionContent,\n type AccordionProps,\n type AccordionItemProps,\n type AccordionTriggerProps,\n type AccordionContentProps,\n};\n"],"names":["AccordionPrimitive.Root","AccordionPrimitive.Item","AccordionPrimitive.Header","AccordionPrimitive.Trigger","ChevronDownIcon","ChevronUpIcon","AccordionPrimitive.Panel"],"mappings":";;;;;;;;;AASA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAwC;AACzE,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,wBAAwB,SAAS;AAAA,MAC9C,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAMA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAwC;AAC7E,SACE;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,qBAAqB,SAAS;AAAA,MAC3C,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAMA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqC;AACnC,SACE,oBAACC,iBAAA,EAA0B,WAAU,QACnC,UAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACD;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAMA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,SACE;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAU;AAAA,MACT,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAGD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}

package/dist/components/ui/alert-dialog.d.ts ADDED Viewed

@@ -0,0 +1,47 @@
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import { Button } from './button';
+import * as React from "react";
+type AlertDialogProps = AlertDialogPrimitive.Root.Props;
+/** Root container for alert dialog. Manages open state and accessibility. */
+declare function AlertDialog({ ...props }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+type AlertDialogTriggerProps = AlertDialogPrimitive.Trigger.Props;
+/** Button that opens the alert dialog. Use `render` prop to customize. */
+declare function AlertDialogTrigger({ ...props }: AlertDialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+type AlertDialogPortalProps = AlertDialogPrimitive.Portal.Props;
+/** Portal container for alert dialog content and overlay. */
+declare function AlertDialogPortal({ ...props }: AlertDialogPortalProps): import("react/jsx-runtime").JSX.Element;
+type AlertDialogOverlayProps = AlertDialogPrimitive.Backdrop.Props;
+/** Semi-transparent backdrop overlay with frosted glass effect. */
+declare function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps): import("react/jsx-runtime").JSX.Element;
+type AlertDialogContentProps = AlertDialogPrimitive.Popup.Props & {
+    /** Dialog size variant. @default "default" */
+    size?: "default" | "sm";
+};
+/**
+ * Alert dialog content with automatic portal and backdrop.
+ * Centered, animated popup with two size variants.
+ */
+declare function AlertDialogContent({ className, size, ...props }: AlertDialogContentProps): import("react/jsx-runtime").JSX.Element;
+type AlertDialogHeaderProps = React.ComponentProps<"div">;
+/** Header section for title, description, and optional media icon. */
+declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+type AlertDialogFooterProps = React.ComponentProps<"div">;
+/** Footer section for action and cancel buttons. */
+declare function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): import("react/jsx-runtime").JSX.Element;
+type AlertDialogMediaProps = React.ComponentProps<"div">;
+/** Optional visual indicator icon container. Commonly used for warnings or errors. */
+declare function AlertDialogMedia({ className, ...props }: AlertDialogMediaProps): import("react/jsx-runtime").JSX.Element;
+type AlertDialogTitleProps = React.ComponentProps<typeof AlertDialogPrimitive.Title>;
+/** Alert dialog title. Automatically announced by screen readers. */
+declare function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps): import("react/jsx-runtime").JSX.Element;
+type AlertDialogDescriptionProps = React.ComponentProps<typeof AlertDialogPrimitive.Description>;
+/** Alert dialog description text. Supports links with automatic styling. */
+declare function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+type AlertDialogActionProps = React.ComponentProps<typeof Button>;
+/** Primary action button. Inherits all Button variants. */
+declare function AlertDialogAction({ className, ...props }: AlertDialogActionProps): import("react/jsx-runtime").JSX.Element;
+type AlertDialogCancelProps = AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">;
+/** Cancel button that closes the alert dialog. Defaults to outline variant. */
+declare function AlertDialogCancel({ className, variant, size, ...props }: AlertDialogCancelProps): import("react/jsx-runtime").JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertDialogProps, type AlertDialogTriggerProps, type AlertDialogPortalProps, type AlertDialogOverlayProps, type AlertDialogContentProps, type AlertDialogHeaderProps, type AlertDialogFooterProps, type AlertDialogMediaProps, type AlertDialogTitleProps, type AlertDialogDescriptionProps, type AlertDialogActionProps, type AlertDialogCancelProps, };
+//# sourceMappingURL=alert-dialog.d.ts.map