vaderjs-daisyui 0.0.2 → 0.0.4

package/Components/Actions/Button/index.tsx

@@ -1,4 +1,4 @@
-import { component, createElement, VNode } from "vaderjs";
+const { createElement, component, VNode } = window.Vader;
 
 export type ButtonProps = {
   color?: "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";
@@ -9,11 +9,11 @@ export type ButtonProps = {
   disabled?: boolean;
   className?: string;
   onClick?: (e: MouseEvent) => void;
-  children?: VNode | VNode[] | string;
+  children?:VNode |VNode[] | string;
   ariaLabel?: string;
 };
-
-const Button = component<ButtonProps>((props): VNode => {
+ 
+const Button = component<ButtonProps>((props):VNode => {
   const {
     color,
     style,

package/Components/Actions/Dropdown/index.tsx

@@ -1,4 +1,4 @@
-import { component, createElement, useState, useRef, useOnClickOutside, useEffect } from "vaderjs";
+const  { component, createElement, useState, useRef, useOnClickOutside, useEffect }  = window.Vader
 
 export type DropdownProps = {
     method?: "details" | "popover" | "focus";

package/Components/Actions/Fab/index.tsx

@@ -1,5 +1,5 @@
 // Fab.tsx
-import { component, createElement, useState, useRef, useEffect } from "vaderjs";
+const { component, createElement, useState, useRef, useEffect } = window.Vader
 
 interface FabProps {
   mainIcon: any;

package/Components/Actions/Modal/index.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect, component, createElement, VNode } from "vaderjs";
-import Button from "../Button";
+const { useState, useEffect, component, createElement  } = window.Vader
+import Button from "../Button/index";
 
 export function useModal(initialOpen = false) {
   const [isOpen, setIsOpen] = useState(initialOpen);
@@ -13,7 +13,7 @@ interface ModalProps {
   isOpen: boolean;
   onClose?: () => void;
   title?: string;
-  children?: VNode | VNode[] | string;
+  children?:VNode |VNode[] | string;
   size?: string; // DaisyUI sizes: w-11/12 max-w-md etc.
   placement?: "top" | "middle" | "bottom";
   horizontal?: "start" | "center" | "end"; // horizontal alignment
@@ -22,7 +22,7 @@ interface ModalProps {
 }
 
 interface ModalActionProps {
-  children: VNode | VNode[] | string;
+  children:VNode |VNode[] | string;
   onClick?: () => void;
   closeModal?: boolean;
   close?: () => void;
@@ -30,6 +30,7 @@ interface ModalActionProps {
 
 // Utility to get focusable elements inside the modal
 function getFocusableElements(container: HTMLElement): HTMLElement[] {
+  //@ts-ignore
   return Array.from(
     container.querySelectorAll(
       'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'

package/Components/Actions/Swap/index.tsx

@@ -1,9 +1,9 @@
-import { useState, component, createElement, VNode } from "vaderjs";
+const { useState, component, createElement  } = window.Vader
 
 export type SwapProps = {
-  on?: VNode | VNode[] | string;
-  off?: VNode | VNode[] | string;
-  indeterminate?: VNode | VNode[] | string;
+  on?:VNode |VNode[] | string;
+  off?:VNode |VNode[] | string;
+  indeterminate?:VNode |VNode[] | string;
   active?: boolean; // Controlled toggle
   rotate?: boolean;
   flip?: boolean;

package/Components/Actions/ThemeController/index.tsx

@@ -1,4 +1,4 @@
-import { component, createElement, useState, VNode } from "vaderjs";
+const { component, createElement, useState } = window.Vader
 
 export type ThemeOption = {
   value: string;

package/Components/Data/Display/Accordion/index.tsx

@@ -1,7 +1,7 @@
-import { component, createElement, VNode } from "vaderjs";
+const { component, createElement  } = window.Vader
 
 export type AccordionItem = {
-  title: string | VNode;
+  title: string |   VNode;
   content: string | VNode;
   value?: string;       // for radio inputs
   open?: boolean;       // for details

package/Components/Data/Display/Avatar/index.tsx

@@ -1,4 +1,4 @@
-import { component, createElement, VNode } from "vaderjs";
+const { component, createElement, VNode } = window.Vader
 
 export type AvatarProps = {
   src?: string;

package/Components/Data/Display/Badge/index.tsx

@@ -1,4 +1,4 @@
-import { component, createElement, VNode } from "vaderjs";
+const { component, createElement, VNode } = window.Vader
 
 export type BadgeProps = {
   children?: string | VNode;

package/Components/Data/Display/Card/index.tsx

@@ -1,5 +1,5 @@
-import { component, createElement, VNode } from "vaderjs";
-import { Badge, BadgeProps } from "../Badge";
+const { component, createElement } = window.Vader
+import { Badge, BadgeProps } from "../Badge/index";
 
 export type CardProps = {
   title?: string | VNode;
@@ -8,10 +8,11 @@ export type CardProps = {
   figure?: VNode;
   size?: "xs" | "sm" | "md" | "lg" | "xl";
   style?: "border" | "dash";
-  side?: boolean; // card-side
-  imageFull?: boolean; // image-full
-  center?: boolean; // center content
+  side?: boolean;
+  imageFull?: boolean;
+  center?: boolean;
   className?: string;
+  children?: VNode | VNode[];   // ✅ ADD THIS
 };
 
 export const Card = component((props: CardProps) => {
@@ -26,6 +27,7 @@ export const Card = component((props: CardProps) => {
     imageFull,
     center,
     className,
+    children
   } = props;
 
   const classes = ["card"];
@@ -48,6 +50,7 @@ export const Card = component((props: CardProps) => {
       { className: bodyClasses.join(" ") },
       title ? (typeof title === "string" ? createElement("h2", { className: "card-title" }, title) : title) : null,
       body ? (typeof body === "string" ? createElement("p", {}, body) : body) : null,
+      children ? (Array.isArray(children) ? children : [children]) : null,  // ✅
       actions ? (Array.isArray(actions) ? actions.map(a => a) : actions) : null
     )
   );

package/Components/Data/Display/Carousel/index.tsx

@@ -1,5 +1,5 @@
 // Carousel.tsx
-import { component, createElement } from "vaderjs";
+const  { component, createElement } = window.Vader
 
 interface CarouselProps {
   images: string[];

package/Components/Data/Display/ChatBubble/index.tsx

@@ -1,5 +1,5 @@
 // ChatBubbles.ts
-import { component, createElement } from "vaderjs";
+const { component, createElement } = window.Vader
 
 export type ChatColor =
   | "neutral"

package/Components/Data/Display/Collapse/index.tsx

@@ -1,5 +1,5 @@
 // Collapse.ts
-import { component, createElement } from "vaderjs";
+const { component, createElement } = window.Vader
 
 export interface CollapseItem {
   id: string | number;

package/Components/Data/Display/Countdown/index.tsx

@@ -1,5 +1,5 @@
 // Countdown.ts
-import { component, createElement, useState, useEffect, useRef } from "vaderjs";
+const { component, createElement, useState, useEffect, useRef }  = window.Vader
 
 export interface CountdownUnit {
   label?: string;

package/Components/Data/Display/Diff/index.tsx

@@ -1,4 +1,4 @@
-import { component, createElement, useRef, useEffect } from "vaderjs";
+const { component, createElement, useRef, useEffect}  = window.Vader
 
 export interface DiffProps {
   item1: any;

package/Components/Data/Display/Hover/Card/index.tsx

@@ -1,4 +1,4 @@
-import { component, createElement } from "vaderjs";
+const { component, createElement }  = window.Vader
 
 export interface Hover3DProps {
   children: any;
@@ -16,9 +16,7 @@ const Hover3D = component(
       {
         class: `hover-3d ${className}`.trim(),
         ...(Tag === "a" && href ? { href } : {}),
-      },
-
-      // ✅ IMPORTANT: spread children
+      }, 
       children,
 
       // required 8 hover zones

package/Components/Data/Display/Hover/Gallery/index.tsx

@@ -1,5 +1,5 @@
 // HoverGallery.ts
-import { component, createElement } from "vaderjs";
+const { component, createElement } = window.Vader
 
 export interface HoverGalleryProps {
   images: (string | JSX.Element)[];

package/Components/Data/Display/Keyboard/index.tsx

@@ -1,5 +1,5 @@
 // Kbd.ts
-import { component, createElement } from "vaderjs";
+const { component, createElement } = window.Vader
 
 export type KbdSize = "xs" | "sm" | "md" | "lg" | "xl";
 

package/Components/Data/Display/List/index.tsx

@@ -1,5 +1,5 @@
 // List.ts
-import { component, createElement } from "vaderjs";
+const { component, createElement } = window.Vader
 
 /* -------------------------------------------------------
  * List (container)

package/Components/Data/Display/Stat/index.tsx

@@ -1,4 +1,4 @@
-import { component, createElement } from "vaderjs";
+const { component, createElement } = window.Vader
 
 /* ================================
    TYPES

package/Components/Data/Display/Table/index.tsx

@@ -1,4 +1,4 @@
-import { createElement } from "vaderjs";
+const { createElement } = window.Vader
 
 export interface TableProps {
   zebra?: boolean;

package/Components/Data/Display/TextRotate/index.tsx

@@ -1,4 +1,4 @@
-import { component, createElement, VNode } from "vaderjs";
+const { component, createElement } = window.Vader
 
 export type TextRotateProps = {
   words: string[] | VNode[];

package/Components/Data/Display/Timeline/index.tsx

@@ -1,4 +1,4 @@
-import { component, createElement, VNode } from "vaderjs";
+const { component, createElement } = window.Vader
 
 export type TimelineItem = {
   id?: string | number;

package/Components/Navigation/BreadCrumbs/index.tsx

@@ -1,4 +1,4 @@
-import { component, createElement, VNode } from "vaderjs";
+const { component, createElement } = window.Vader
 
 export type BreadcrumbItem = {
   label: string | VNode;

package/Components/Navigation/Doc/index.tsx

@@ -1,4 +1,4 @@
-import { component, createElement, VNode } from "vaderjs";
+const { component, createElement } = window.Vader
 
 export type DockItem = {
   label?: string;

package/Components/Navigation/Link/index.tsx

@@ -1,4 +1,4 @@
-import { component, createElement, VNode } from "vaderjs";
+const { component, createElement } = window.Vader
 
 export type LinkProps = {
   href?: string;

package/index.ts

@@ -1,10 +1,80 @@
-import { VaderPlugin } from "vaderjs/plugins";
+//@ts-nocheck
 import path from "path";
 import fs from "fs";
 import { spawn } from "child_process";
-
 const PROJECT_ROOT = process.cwd();
 
+/* --------------------------- Platform Detection --------------------------- */
+
+interface ProjectInfo {
+  isVaderJS: boolean;
+  isVaderNative: boolean;
+  platform: "vaderjs" | "vaderjs-native" | "unknown";
+  packageJson: any;
+}
+
+function detectPlatform(): ProjectInfo {
+  const packageJsonPath = path.join(PROJECT_ROOT, "package.json");
+  
+  if (!fs.existsSync(packageJsonPath)) {
+    return {
+      isVaderJS: false,
+      isVaderNative: false,
+      platform: "unknown",
+      packageJson: {}
+    };
+  }
+  
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+  const deps = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies
+  };
+  
+  const isVaderJS = "vaderjs" in deps;
+  const isVaderNative = "vaderjs-native" in deps;
+  
+  let platform: "vaderjs" | "vaderjs-native" | "unknown" = "unknown";
+  if (isVaderJS && !isVaderNative) {
+    platform = "vaderjs";
+  } else if (isVaderNative && !isVaderJS) {
+    platform = "vaderjs-native";
+  } else if (isVaderJS && isVaderNative) {
+    // Both installed, prioritize native for native projects
+    platform = "vaderjs-native";
+  }
+  
+  return {
+    isVaderJS,
+    isVaderNative,
+    platform,
+    packageJson
+  };
+}
+
+/* --------------------------- Dynamic Import --------------------------- */
+
+async function getVaderPlugin(): Promise<any> {
+  const { platform } = detectPlatform();
+  
+  if (platform === "vaderjs-native") {
+    try {
+      //@ts-ignore
+      return await import("vaderjs-native/plugins");
+    } catch (e) {
+      console.warn("Failed to import from vaderjs-native/plugins, falling back to vaderjs/plugins");
+    }
+  }
+  
+  // Default to vaderjs
+  try {
+     //@ts-ignore
+    return await import("vaderjs/plugins");
+  } catch (e) {
+    throw new Error(`Cannot find Vader.js plugins module. Install either vaderjs or vaderjs-native.`);
+  }
+}
+
 /* --------------------------- utils --------------------------- */
 
 function spawnSync(cmd: string, args: string[], opts: any = {}) {
@@ -64,7 +134,7 @@ function ensureTailwindConfig() {
 async function runTailwind(input: string, output: string) {
   return new Promise<void>((resolve, reject) => {
     const proc = spawn("bunx", ["tailwindcss", "-i", input, "-o", output], { stdio: "inherit" });
-    proc.on("close", (code) => {
+    proc.on("close", (code: number) => {
       if (code !== 0) reject(new Error(`Tailwind exited with ${code}`));
       else resolve();
     });
@@ -91,40 +161,48 @@ async function autoInstallDeps() {
   console.log("✅ Dependencies installed.");
 }
 
-/* --------------------------- plugin --------------------------- */
+/* --------------------------- Plugin Factory --------------------------- */
 
-const plugin: VaderPlugin = {
-  name: "Vader Aria",
-  version: "0.1.0",
-  description: "Tailwind + DaisyUI integration for VaderJS",
+async function createPlugin() {
+  const { platform } = detectPlatform();
+  const { VaderPlugin } = await getVaderPlugin();
+  
+  const plugin: InstanceType<typeof VaderPlugin> = {
+    name: "Vader Aria",
+    version: "0.1.0",
+    description: `Tailwind + DaisyUI integration for ${platform}`,
 
-  async onBuildStart(api) {
-    const rootCss = path.join(PROJECT_ROOT, "root.css");
+    async onBuildStart(api: any) {
+      const rootCss = path.join(PROJECT_ROOT, "root.css");
 
-    // Ensure root CSS exists
-    ensureStyles(rootCss);
+      // Ensure root CSS exists
+      ensureStyles(rootCss);
 
-    // Auto-install deps if Tailwind is not available
-    if (!tailwindInstalled()) {
-      await autoInstallDeps();
-    }
+      // Auto-install deps if Tailwind is not available
+      if (!tailwindInstalled()) {
+        await autoInstallDeps();
+      }
 
-    // Ensure tailwind.config.js exists
-    ensureTailwindConfig();
+      // Ensure tailwind.config.js exists
+      ensureTailwindConfig();
 
-    // Run Tailwind build
-    console.log("🚀 Running TailwindCSS build...");
-    const output = path.join(PROJECT_ROOT, "public/styles.css");
-    await runTailwind(rootCss, output);
+      // Run Tailwind build
+      console.log(`🚀 Running TailwindCSS build for ${platform}...`);
+      const output = path.join(PROJECT_ROOT, "public/styles.css");
+      await runTailwind(rootCss, output);
 
-    // Inject link into HTML
-    api.injectHTML(`<link rel="stylesheet" href="/styles.css" />`);
-    console.log("✅ TailwindCSS + DaisyUI loaded");
-  },
+      // Inject link into HTML
+      api.injectHTML(`<link rel="stylesheet" href="/styles.css" />`);
+      console.log(`✅ TailwindCSS + DaisyUI loaded for ${platform}`);
+    },
 
-  onBuildFinish(api) {
-    // Optional cleanup
-  },
-};
+    onBuildFinish(api: any) {
+      // Optional cleanup
+    },
+  };
+
+  return plugin;
+}
 
-export default plugin;
+// Export as default function that creates the plugin
+export default createPlugin;

package/jsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "jsxFactory": "Vader.createElement",
+    "baseUrl": ".",
+    "target": "es2024",
+    "paths": {
+      "vader": ["./global.d.ts"],
+      "vader/*": ["./global.d.ts"]
+    }
+  },
+  "include": [
+    "Components/**/*",
+    "*.d.ts"
+  ]
+}

package/package.json

@@ -2,8 +2,9 @@
     "name": "vaderjs-daisyui",
     "description": "Lightweight React-like components wrapping DaisyUI classes. Zero dependencies, fully typed, and ready to ship.",
     "dependencies": {
-        "vaderjs": "latest"
+        "vaderjs-types": "^1.0.0"
     },
+    "types": "./vader.d.ts",
     "devDependencies": {
         "@tailwindcss/cli": "^4.1.18",
         "autoprefixer": "^10.4.23",
@@ -11,5 +12,5 @@
         "postcss": "^8.5.6",
         "tailwindcss": "^4.1.18"
     },
-    "version": "0.0.2"
+    "version": "0.0.4"
 }