vaderjs-daisyui 0.0.4 → 0.0.6

package/Components/Actions/Button/index.tsx

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

package/Components/Actions/Fab/index.tsx

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

package/Components/Actions/Modal/index.tsx

@@ -14,6 +14,7 @@ interface ModalProps {
   onClose?: () => void;
   title?: string;
   children?:VNode |VNode[] | string;
+  modalid?: string; // for accessibility and testing
   size?: string; // DaisyUI sizes: w-11/12 max-w-md etc.
   placement?: "top" | "middle" | "bottom";
   horizontal?: "start" | "center" | "end"; // horizontal alignment
@@ -49,6 +50,7 @@ export const Modal = component((props: ModalProps) => {
     horizontal = "center",
     backdrop = true,
     openClass = "",
+    modalid = "vader-modal",
   } = props;
 
   let modalRef: HTMLDivElement | null = null;
@@ -117,6 +119,7 @@ export const Modal = component((props: ModalProps) => {
     {
       className: `modal modal-open ${placementClass} ${openClass}`,
       "aria-modal": "true",
+      id: modalid,
       role: "dialog",
     },
     backdrop &&

package/Components/Actions/Swap/index.tsx

@@ -1,9 +1,9 @@
-const { useState, component, createElement  } = window.Vader
+import { useState, component, createElement, VNode } from "vaderjs";
 
 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 @@
-const { component, createElement, useState } = window.Vader
+import { component, createElement, useState, VNode } from "vaderjs";
 
 export type ThemeOption = {
   value: string;

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

@@ -1,7 +1,7 @@
-const { component, createElement  } = window.Vader
+import { component, createElement, VNode } from "vaderjs";
 
 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 @@
-const { component, createElement, VNode } = window.Vader
+import { component, createElement, VNode } from "vaderjs";
 
 export type AvatarProps = {
   src?: string;

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

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

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

@@ -1,5 +1,5 @@
-const { component, createElement } = window.Vader
-import { Badge, BadgeProps } from "../Badge/index";
+import { component, createElement, VNode } from "vaderjs";
+import { Badge, BadgeProps } from "../Badge";
 
 export type CardProps = {
   title?: string | VNode;
@@ -8,11 +8,10 @@ export type CardProps = {
   figure?: VNode;
   size?: "xs" | "sm" | "md" | "lg" | "xl";
   style?: "border" | "dash";
-  side?: boolean;
-  imageFull?: boolean;
-  center?: boolean;
+  side?: boolean; // card-side
+  imageFull?: boolean; // image-full
+  center?: boolean; // center content
   className?: string;
-  children?: VNode | VNode[];   // ✅ ADD THIS
 };
 
 export const Card = component((props: CardProps) => {
@@ -27,7 +26,6 @@ export const Card = component((props: CardProps) => {
     imageFull,
     center,
     className,
-    children
   } = props;
 
   const classes = ["card"];
@@ -50,7 +48,6 @@ 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
-const  { component, createElement } = window.Vader
+import { component, createElement } from "vaderjs";
 
 interface CarouselProps {
   images: string[];

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-const { component, createElement }  = window.Vader
+import { component, createElement } from "vaderjs";
 
 export interface Hover3DProps {
   children: any;
@@ -16,7 +16,9 @@ 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
-const { component, createElement } = window.Vader
+import { component, createElement } from "vaderjs";
 
 export interface HoverGalleryProps {
   images: (string | JSX.Element)[];

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

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

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

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

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

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

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

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

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

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

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

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

package/Components/Navigation/BreadCrumbs/index.tsx

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

package/Components/Navigation/Doc/index.tsx

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

package/Components/Navigation/Link/index.tsx

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

package/LICENSE

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

package/README.md

@@ -31,6 +31,15 @@ export default {
 ```
 ---
 
+## Required CSS File
+Ensure you have a `root.css` in the root of your project directory so tailwind knows how to build
+
+```css
+/*root.css*/
+@import "tailwindcss";
+@plugin "daisyui";
+```
+
 ## 🔌 **Quick Setup**
 
  

package/index.ts

@@ -97,17 +97,18 @@ function tailwindInstalled(): boolean {
  */
 function ensureStyles(inputPath: string) {
   const outputPath = path.join(PROJECT_ROOT, "public/styles.css");
-
+  console.log(`Ensuring styles: input=${inputPath}, output=${outputPath}`);
   if (!fs.existsSync(outputPath)) {
-    if (!fs.existsSync(inputPath)) {
+    
+    fs.copyFileSync(inputPath, outputPath);
+  }
+   if (!fs.existsSync(inputPath)) {
       fs.writeFileSync(
         inputPath,
-        `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@import "daisyui";`
+        `@import "tailwindcss"; \n @plugin "daisyui";`
       );
       console.log(`Created default root.css at ${inputPath}`);
     }
-    fs.copyFileSync(inputPath, outputPath);
-  }
 }
 
 /**
@@ -188,7 +189,7 @@ async function createPlugin() {
 
       // Run Tailwind build
       console.log(`🚀 Running TailwindCSS build for ${platform}...`);
-      const output = path.join(PROJECT_ROOT, "public/styles.css");
+      const output = path.join(PROJECT_ROOT, "public/styles.css"); 
       await runTailwind(rootCss, output);
 
       // Inject link into HTML
@@ -205,4 +206,4 @@ async function createPlugin() {
 }
 
 // Export as default function that creates the plugin
-export default createPlugin;
+export default await createPlugin();

package/package.json

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

package/jsconfig.json

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