npm - @minidev.fun/ui - Versions diffs - 1.0.1 - Mend

@minidev.fun/ui 1.0.1

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

package/llms.txt ADDED Viewed

@@ -0,0 +1,182 @@
+# @minidev.fun/ui
+> React component library built on Base UI primitives + Tailwind CSS v4. 53 production-ready components with per-component imports, SSR-safe dark mode, and two visual themes. Powers Minidev Studio.
+## Prerequisites
+**Tailwind CSS v4 is required.** The package exports CSS that uses `@import "tailwindcss"`.
+### Vite Setup
+```bash
+npm install tailwindcss @tailwindcss/vite
+```
+```ts
+// vite.config.ts
+import tailwindcss from "@tailwindcss/vite";
+export default defineConfig({ plugins: [react(), tailwindcss()] });
+```
+```css
+/* src/index.css - MUST use CSS @import, not JS import */
+@import "@minidev.fun/ui/styles";
+@import "@minidev.fun/ui/themes/minidev-sunset";
+```
+```tsx
+// src/main.tsx
+import "./index.css";
+```
+### Next.js Setup
+```bash
+npm install tailwindcss @tailwindcss/postcss
+```
+```js
+// postcss.config.js
+export default { plugins: { "@tailwindcss/postcss": {} } };
+```
+```css
+/* app/globals.css */
+@import "@minidev.fun/ui/styles";
+@import "@minidev.fun/ui/themes/minidev-sunset";
+```
+## Quick Start
+Once Tailwind is configured, use components:
+```tsx
+import { Button } from "@minidev.fun/ui/button";
+import { Card, CardHeader, CardContent } from "@minidev.fun/ui/card";
+export function App() {
+  return (
+    <Card>
+      <CardHeader>Welcome</CardHeader>
+      <CardContent>
+        <Button>Get Started</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+## Key Patterns
+- **Import**: `import { Component } from "@minidev.fun/ui/component"` (lowercase, kebab-case)
+- **Theme**: `import "@minidev.fun/ui/themes/minidev-sunset"` or `first-light`
+- **Color mode**: `<ColorModeInitializer />` in `<head>` for SSR-safe dark mode
+- **Utility**: `cn()` from `@minidev.fun/ui/utils` for class merging
+- **Polymorphism**: Use `render` prop (not `asChild`) for custom elements
+- **CSS targeting**: All components have `data-slot` attributes
+## Full Documentation
+- [llms-full.txt](./llms-full.txt): Complete documentation (~16k lines, all 53 components)
+## Documentation Index
+- [Package Overview](llm/index.llm.md): Quick start, import patterns, component categories
+- [Theming Guide](llm/theming.llm.md): Themes, color mode, CSS variables, customization
+- [Hooks](llm/hooks.llm.md): useIsMobile responsive hook
+- [Utilities](llm/utilities.llm.md): cn() class merging
+- [Contributing](llm/contributing.llm.md): Component patterns, data-slot convention, templates
+## Core Inputs
+- [Button](llm/components/button.llm.md): 9 variants, 8 sizes, icon support
+- [Input](llm/components/input.llm.md): Text input with validation states
+- [Textarea](llm/components/textarea.llm.md): Multi-line text input
+- [Checkbox](llm/components/checkbox.llm.md): Boolean toggle with indeterminate
+- [Switch](llm/components/switch.llm.md): Toggle switch control
+- [Select](llm/components/select.llm.md): Dropdown selection
+- [Combobox](llm/components/combobox.llm.md): Searchable select with autocomplete
+- [Slider](llm/components/slider.llm.md): Range input
+- [RadioGroup](llm/components/radio-group.llm.md): Single selection from options
+- [Toggle](llm/components/toggle.llm.md): Pressable toggle button
+- [ToggleGroup](llm/components/toggle-group.llm.md): Multiple toggle buttons
+## Form & Field
+- [Field](llm/components/field.llm.md): Form field wrapper with label/description/error
+- [Label](llm/components/label.llm.md): Accessible form labels
+- [InputGroup](llm/components/input-group.llm.md): Input with prefix/suffix addons
+- [InputOTP](llm/components/input-otp.llm.md): One-time password input
+- [Calendar](llm/components/calendar.llm.md): Date picker calendar
+- [ButtonGroup](llm/components/button-group.llm.md): Connected button group
+## Layout & Structure
+- [Card](llm/components/card.llm.md): Content container with header/footer
+- [Accordion](llm/components/accordion.llm.md): Expandable content sections
+- [Collapsible](llm/components/collapsible.llm.md): Show/hide content
+- [Separator](llm/components/separator.llm.md): Visual divider
+- [AspectRatio](llm/components/aspect-ratio.llm.md): Maintain aspect ratio
+- [ScrollArea](llm/components/scroll-area.llm.md): Custom scrollbars
+- [Resizable](llm/components/resizable.llm.md): Resizable panels
+- [Table](llm/components/table.llm.md): Data tables
+## Navigation & Menus
+- [Tabs](llm/components/tabs.llm.md): Tab-based navigation
+- [DropdownMenu](llm/components/dropdown-menu.llm.md): Trigger-based dropdown
+- [ContextMenu](llm/components/context-menu.llm.md): Right-click menu
+- [Menubar](llm/components/menubar.llm.md): Horizontal menu bar
+- [NavigationMenu](llm/components/navigation-menu.llm.md): Site navigation
+- [Breadcrumb](llm/components/breadcrumb.llm.md): Path indicator
+- [Pagination](llm/components/pagination.llm.md): Page navigation
+- [Sidebar](llm/components/sidebar.llm.md): Collapsible navigation
+## Overlays & Dialogs
+- [Dialog](llm/components/dialog.llm.md): Modal dialog
+- [AlertDialog](llm/components/alert-dialog.llm.md): Confirmation dialog
+- [Sheet](llm/components/sheet.llm.md): Side panel overlay
+- [Drawer](llm/components/drawer.llm.md): Bottom drawer (mobile)
+- [Popover](llm/components/popover.llm.md): Floating content
+- [Tooltip](llm/components/tooltip.llm.md): Hover information
+- [HoverCard](llm/components/hover-card.llm.md): Rich hover preview
+## Feedback & Status
+- [Alert](llm/components/alert.llm.md): Contextual messages with variants
+- [Badge](llm/components/badge.llm.md): Status indicators
+- [Progress](llm/components/progress.llm.md): Progress bars
+- [Skeleton](llm/components/skeleton.llm.md): Loading placeholders
+- [Spinner](llm/components/spinner.llm.md): Loading spinner
+- [Sonner](llm/components/sonner.llm.md): Toast notifications
+- [Empty](llm/components/empty.llm.md): Empty state placeholder
+## Theme Utilities
+- [ColorMode](llm/components/color-mode.llm.md): SSR-safe color mode with system detection
+- [FirstLight](llm/components/first-light.llm.md): SVG filters for First Light theme
+## Advanced
+- [Avatar](llm/components/avatar.llm.md): User avatars with fallback
+- [Carousel](llm/components/carousel.llm.md): Content slider
+- [Chart](llm/components/chart.llm.md): Recharts integration
+- [Command](llm/components/command.llm.md): Command palette (cmdk)
+- [Kbd](llm/components/kbd.llm.md): Keyboard shortcut display
+- [Item](llm/components/item.llm.md): List items with icons
+## Typography
+- [Title](llm/components/title.llm.md): Heading component (h1-h6)
+- [Text](llm/components/text.llm.md): Paragraph text with variants
+- [Code](llm/components/code.llm.md): Inline code styling
+- [Blockquote](llm/components/blockquote.llm.md): Quote blocks
+## Optional
+These contain secondary/supplementary information:
+- [CHANGELOG](./CHANGELOG.md): Release history
+- [README](./README.md): Full package documentation
+- [Human Docs](./docs/): Integration guides and troubleshooting

package/package.json ADDED Viewed

@@ -0,0 +1,354 @@
+{
+  "name": "@minidev.fun/ui",
+  "version": "1.0.1",
+  "license": "MIT",
+  "author": "Tokenfi Inc.",
+  "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.",
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "tailwind",
+    "base-ui",
+    "minidev"
+  ],
+  "public": true,
+  "type": "module",
+  "exports": {
+    "./styles": "./src/styles/styles.css",
+    "./themes/minidev-sunset": "./src/styles/themes/minidev-sunset.css",
+    "./themes/first-light": "./src/styles/themes/first-light.css",
+    "./tooltip": {
+      "types": "./dist/components/ui/tooltip.d.ts",
+      "import": "./dist/components/ui/tooltip.js"
+    },
+    "./toggle": {
+      "types": "./dist/components/ui/toggle.d.ts",
+      "import": "./dist/components/ui/toggle.js"
+    },
+    "./toggle-group": {
+      "types": "./dist/components/ui/toggle-group.d.ts",
+      "import": "./dist/components/ui/toggle-group.js"
+    },
+    "./toast": {
+      "types": "./dist/components/ui/toast.d.ts",
+      "import": "./dist/components/ui/toast.js"
+    },
+    "./textarea": {
+      "types": "./dist/components/ui/textarea.d.ts",
+      "import": "./dist/components/ui/textarea.js"
+    },
+    "./tabs": {
+      "types": "./dist/components/ui/tabs.d.ts",
+      "import": "./dist/components/ui/tabs.js"
+    },
+    "./table": {
+      "types": "./dist/components/ui/table.d.ts",
+      "import": "./dist/components/ui/table.js"
+    },
+    "./switch": {
+      "types": "./dist/components/ui/switch.d.ts",
+      "import": "./dist/components/ui/switch.js"
+    },
+    "./spinner": {
+      "types": "./dist/components/ui/spinner.d.ts",
+      "import": "./dist/components/ui/spinner.js"
+    },
+    "./sonner": {
+      "types": "./dist/components/ui/sonner.d.ts",
+      "import": "./dist/components/ui/sonner.js"
+    },
+    "./slider": {
+      "types": "./dist/components/ui/slider.d.ts",
+      "import": "./dist/components/ui/slider.js"
+    },
+    "./skeleton": {
+      "types": "./dist/components/ui/skeleton.d.ts",
+      "import": "./dist/components/ui/skeleton.js"
+    },
+    "./sidebar": {
+      "types": "./dist/components/ui/sidebar.d.ts",
+      "import": "./dist/components/ui/sidebar.js"
+    },
+    "./sheet": {
+      "types": "./dist/components/ui/sheet.d.ts",
+      "import": "./dist/components/ui/sheet.js"
+    },
+    "./separator": {
+      "types": "./dist/components/ui/separator.d.ts",
+      "import": "./dist/components/ui/separator.js"
+    },
+    "./select": {
+      "types": "./dist/components/ui/select.d.ts",
+      "import": "./dist/components/ui/select.js"
+    },
+    "./scroll-area": {
+      "types": "./dist/components/ui/scroll-area.d.ts",
+      "import": "./dist/components/ui/scroll-area.js"
+    },
+    "./resizable": {
+      "types": "./dist/components/ui/resizable.d.ts",
+      "import": "./dist/components/ui/resizable.js"
+    },
+    "./radio-group": {
+      "types": "./dist/components/ui/radio-group.d.ts",
+      "import": "./dist/components/ui/radio-group.js"
+    },
+    "./progress": {
+      "types": "./dist/components/ui/progress.d.ts",
+      "import": "./dist/components/ui/progress.js"
+    },
+    "./popover": {
+      "types": "./dist/components/ui/popover.d.ts",
+      "import": "./dist/components/ui/popover.js"
+    },
+    "./pagination": {
+      "types": "./dist/components/ui/pagination.d.ts",
+      "import": "./dist/components/ui/pagination.js"
+    },
+    "./navigation-menu": {
+      "types": "./dist/components/ui/navigation-menu.d.ts",
+      "import": "./dist/components/ui/navigation-menu.js"
+    },
+    "./modal": {
+      "types": "./dist/components/ui/modal.d.ts",
+      "import": "./dist/components/ui/modal.js"
+    },
+    "./menubar": {
+      "types": "./dist/components/ui/menubar.d.ts",
+      "import": "./dist/components/ui/menubar.js"
+    },
+    "./label": {
+      "types": "./dist/components/ui/label.d.ts",
+      "import": "./dist/components/ui/label.js"
+    },
+    "./kbd": {
+      "types": "./dist/components/ui/kbd.d.ts",
+      "import": "./dist/components/ui/kbd.js"
+    },
+    "./item": {
+      "types": "./dist/components/ui/item.d.ts",
+      "import": "./dist/components/ui/item.js"
+    },
+    "./input": {
+      "types": "./dist/components/ui/input.d.ts",
+      "import": "./dist/components/ui/input.js"
+    },
+    "./input-otp": {
+      "types": "./dist/components/ui/input-otp.d.ts",
+      "import": "./dist/components/ui/input-otp.js"
+    },
+    "./input-group": {
+      "types": "./dist/components/ui/input-group.d.ts",
+      "import": "./dist/components/ui/input-group.js"
+    },
+    "./hover-card": {
+      "types": "./dist/components/ui/hover-card.d.ts",
+      "import": "./dist/components/ui/hover-card.js"
+    },
+    "./field": {
+      "types": "./dist/components/ui/field.d.ts",
+      "import": "./dist/components/ui/field.js"
+    },
+    "./empty": {
+      "types": "./dist/components/ui/empty.d.ts",
+      "import": "./dist/components/ui/empty.js"
+    },
+    "./dropdown-menu": {
+      "types": "./dist/components/ui/dropdown-menu.d.ts",
+      "import": "./dist/components/ui/dropdown-menu.js"
+    },
+    "./drawer": {
+      "types": "./dist/components/ui/drawer.d.ts",
+      "import": "./dist/components/ui/drawer.js"
+    },
+    "./dialog": {
+      "types": "./dist/components/ui/dialog.d.ts",
+      "import": "./dist/components/ui/dialog.js"
+    },
+    "./context-menu": {
+      "types": "./dist/components/ui/context-menu.d.ts",
+      "import": "./dist/components/ui/context-menu.js"
+    },
+    "./command": {
+      "types": "./dist/components/ui/command.d.ts",
+      "import": "./dist/components/ui/command.js"
+    },
+    "./combobox": {
+      "types": "./dist/components/ui/combobox.d.ts",
+      "import": "./dist/components/ui/combobox.js"
+    },
+    "./collapsible": {
+      "types": "./dist/components/ui/collapsible.d.ts",
+      "import": "./dist/components/ui/collapsible.js"
+    },
+    "./checkbox": {
+      "types": "./dist/components/ui/checkbox.d.ts",
+      "import": "./dist/components/ui/checkbox.js"
+    },
+    "./chart": {
+      "types": "./dist/components/ui/chart.d.ts",
+      "import": "./dist/components/ui/chart.js"
+    },
+    "./carousel": {
+      "types": "./dist/components/ui/carousel.d.ts",
+      "import": "./dist/components/ui/carousel.js"
+    },
+    "./card": {
+      "types": "./dist/components/ui/card.d.ts",
+      "import": "./dist/components/ui/card.js"
+    },
+    "./calendar": {
+      "types": "./dist/components/ui/calendar.d.ts",
+      "import": "./dist/components/ui/calendar.js"
+    },
+    "./button": {
+      "types": "./dist/components/ui/button.d.ts",
+      "import": "./dist/components/ui/button.js"
+    },
+    "./button-group": {
+      "types": "./dist/components/ui/button-group.d.ts",
+      "import": "./dist/components/ui/button-group.js"
+    },
+    "./breadcrumb": {
+      "types": "./dist/components/ui/breadcrumb.d.ts",
+      "import": "./dist/components/ui/breadcrumb.js"
+    },
+    "./badge": {
+      "types": "./dist/components/ui/badge.d.ts",
+      "import": "./dist/components/ui/badge.js"
+    },
+    "./avatar": {
+      "types": "./dist/components/ui/avatar.d.ts",
+      "import": "./dist/components/ui/avatar.js"
+    },
+    "./aspect-ratio": {
+      "types": "./dist/components/ui/aspect-ratio.d.ts",
+      "import": "./dist/components/ui/aspect-ratio.js"
+    },
+    "./alert": {
+      "types": "./dist/components/ui/alert.d.ts",
+      "import": "./dist/components/ui/alert.js"
+    },
+    "./alert-dialog": {
+      "types": "./dist/components/ui/alert-dialog.d.ts",
+      "import": "./dist/components/ui/alert-dialog.js"
+    },
+    "./accordion": {
+      "types": "./dist/components/ui/accordion.d.ts",
+      "import": "./dist/components/ui/accordion.js"
+    },
+    "./utils": {
+      "types": "./dist/lib/utils.d.ts",
+      "import": "./dist/lib/utils.js"
+    },
+    "./use-mobile": {
+      "types": "./dist/hooks/use-mobile.d.ts",
+      "import": "./dist/hooks/use-mobile.js"
+    }
+  },
+  "files": [
+    "dist/**",
+    "src/**",
+    "llm/**",
+    "llms.txt",
+    "llms-full.txt",
+    "context7.json",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build": "tsx scripts/generate-exports.ts && vite build",
+    "dev": "vite build --watch",
+    "lint": "eslint src/",
+    "format": "prettier --write src/",
+    "format:check": "prettier --check src/",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "docs:generate": "tsx scripts/llm-tsdoc-generator/index.ts llm-tsdoc-generator.config.json",
+    "storybook": "storybook dev --no-open -p 6006",
+    "build-storybook": "STORYBOOK_BASE_PATH=/ui/ storybook build"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@storybook/addon-docs": "10.1.11",
+    "@storybook/addon-themes": "10.1.11",
+    "@storybook/react-vite": "10.1.11",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "^25.2.2",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.18.0",
+    "@typescript-eslint/parser": "^8.18.0",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "eslint": "9.39.2",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-storybook": "10.1.11",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "glob": "^13.0.0",
+    "input-otp": "^1.4.2",
+    "postcss": "8.5.6",
+    "prettier": "3.7.4",
+    "react": "19.2.3",
+    "react-day-picker": "^9.13.0",
+    "react-dom": "19.2.3",
+    "recharts": "2.15.4",
+    "rimraf": "^6.1.2",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "storybook": "10.1.11",
+    "tailwindcss": "^4.1.18",
+    "ts-morph": "27.0.2",
+    "tsx": "4.21.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "5.9.3",
+    "vite": "7.3.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-tsconfig-paths": "^6.0.3"
+  },
+  "peerDependencies": {
+    "date-fns": "^4.0.0",
+    "embla-carousel-react": "^8.0.0",
+    "input-otp": "^1.0.0",
+    "react": "^19.0.0",
+    "react-day-picker": "^9.0.0",
+    "react-dom": "^19.0.0",
+    "recharts": "^2.15.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "date-fns": {
+      "optional": true
+    },
+    "embla-carousel-react": {
+      "optional": true
+    },
+    "input-otp": {
+      "optional": true
+    },
+    "react-day-picker": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@base-ui/react": "1.0.0",
+    "@fontsource-variable/figtree": "5.2.10",
+    "@fontsource-variable/funnel-display": "^5.2.8",
+    "@fontsource/architects-daughter": "5.2.7",
+    "@tailwindcss/postcss": "^4.1.18",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cmdk": "1.1.1",
+    "lucide-react": "0.562.0",
+    "react-resizable-panels": "4.1.0",
+    "sonner": "2.0.7",
+    "tailwind-merge": "3.4.0",
+    "vaul": "1.1.2"
+  }
+}

package/src/components/minidev.fun/color-mode/color-mode-initializer.tsx ADDED Viewed

@@ -0,0 +1,78 @@
+"use client";
+import { useColorMode } from "./use-color-mode";
+/**
+ * Color mode initialization script (internal).
+ *
+ * For Vite/static HTML apps, copy this script into your index.html <head>.
+ * See docs/integrations/vite.md for the full script to copy.
+ */
+const colorModeScript = `(function() {
+  try {
+    var cookie = document.cookie.match(/color-mode=([^;]*)/) || document.cookie.match(/theme=([^;]*)/);
+    var stored = cookie ? JSON.parse(decodeURIComponent(cookie[1])) : null;
+    var preference = stored ? stored.preference : 'system';
+    var mode = preference === 'system'
+      ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+      : preference;
+    if (mode === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+    document.documentElement.style.colorScheme = mode;
+  } catch (e) {
+    document.documentElement.classList.remove('dark');
+    document.documentElement.style.colorScheme = 'light';
+  }
+})();`;
+/**
+ * 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 function ColorModeInitializer() {
+  useColorMode();
+  return <script dangerouslySetInnerHTML={{ __html: colorModeScript }} />;
+}