vaderjs-daisyui 0.0.1

package/Components/Actions/Button/index.tsx

@@ -0,0 +1,63 @@
+import { component, createElement, VNode } from "vaderjs";
+
+export type ButtonProps = {
+  color?: "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";
+  style?: "outline" | "dash" | "soft" | "ghost" | "link";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  modifier?: "wide" | "block" | "square" | "circle";
+  active?: boolean;
+  disabled?: boolean;
+  className?: string;
+  onClick?: (e: MouseEvent) => void;
+  children?: VNode | VNode[] | string;
+  ariaLabel?: string;
+};
+
+const Button = component<ButtonProps>((props): VNode => {
+  const {
+    color,
+    style,
+    size = "md",
+    modifier,
+    active,
+    disabled,
+    className,
+    onClick,
+    children,
+    ariaLabel,
+    ...rest
+  } = props;
+
+  // Build class string
+  const classes = ["btn"];
+  if (color) classes.push(`btn-${color}`);
+  if (style) classes.push(`btn-${style}`);
+  if (size) classes.push(`btn-${size}`);
+  if (modifier) classes.push(`btn-${modifier}`);
+  if (active) classes.push("btn-active");
+  if (disabled) classes.push("btn-disabled");
+  if (className) classes.push(className);
+
+  // Convert camelCase props to proper DOM attributes
+  const domProps: Record<string, any> = {
+    class: classes.join(" "),
+    onClick: disabled ? undefined : onClick,
+    disabled,
+    ...rest,
+  };
+
+  // Add accessibility attributes with proper names
+  if (disabled) domProps["aria-disabled"] = "true";
+  if (active) domProps["aria-pressed"] = "true";
+  if (ariaLabel) domProps["aria-label"] = ariaLabel;
+  
+
+  // Always return a VNode
+  return createElement(
+    "button",
+    domProps,
+    children
+  );
+});
+
+export default Button;

package/Components/Actions/Dropdown/index.tsx

@@ -0,0 +1,104 @@
+import { component, createElement, useState, useRef, useOnClickOutside, useEffect } from "vaderjs";
+
+export type DropdownProps = {
+    method?: "details" | "popover" | "focus";
+    placement?: "start" | "center" | "end" | "top" | "bottom" | "left" | "right";
+    hover?: boolean;
+    open?: boolean;
+    close?: boolean;
+    buttonClass?: string;
+    contentClass?: string;
+    buttonContent: any;
+    children: any;
+};
+
+const Dropdown = component<DropdownProps>((props) => {
+    const {
+        method = "details",
+        placement = "bottom",
+        hover = false,
+        open,
+        close,
+        buttonClass = "btn",
+        contentClass = "menu dropdown-content bg-base-100 rounded-box shadow-md p-2",
+        buttonContent,
+        children,
+    } = props;
+
+    const [isOpen, setIsOpen] = useState(false);
+
+    // Create ref objects
+    const buttonRef = useRef<HTMLButtonElement | null>(null);
+    const contentRef = useRef<HTMLDivElement | null>(null);
+
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+        if (!isOpen) return;
+        if (e.key === "Escape") {
+            setIsOpen(false);
+            buttonRef.current?.focus();
+        }
+    };
+
+    useEffect(() => {
+        console.log(contentRef)
+        if (!contentRef.current) return; // Only attach if element exists
+
+        const listener = (event: MouseEvent) => {
+            console.log(event)
+            if (!contentRef.current?.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+
+        document.addEventListener("mousedown", listener, true);
+        return () => document.removeEventListener("mousedown", listener, true);
+    }, [isOpen]); // re-run when isOpen changes
+
+    if (method === "details") {
+        return createElement(
+            "details",
+            {
+                class: `dropdown ${placement ? `dropdown-${placement}` : ""} ${hover ? "dropdown-hover" : ""} ${open ? "dropdown-open" : ""} ${close ? "dropdown-close" : ""}`,
+            },
+            createElement("summary", { class: buttonClass }, buttonContent),
+            createElement(
+                "div",
+                { class: contentClass, role: "menu", tabIndex: -1 },
+                children
+            )
+        );
+    }
+
+    // Popover or focus methods
+    return createElement(
+        "fragment",
+        null,
+        createElement(
+            "button",
+            {
+                // Pass ref as a property, not an attribute
+                ref: buttonRef,
+                class: buttonClass,
+                "aria-haspopup": "menu",
+                "aria-expanded": isOpen,
+                onClick: () => setIsOpen(!isOpen),
+            },
+            buttonContent
+        ),
+        isOpen &&
+        createElement(
+            "div",
+            {
+                // Pass ref as a property
+                ref: contentRef,
+                class: contentClass,
+                role: "menu",
+                tabIndex: -1
+            },
+            children
+        )
+    );
+});
+
+export default Dropdown;

package/Components/Actions/Fab/index.tsx

@@ -0,0 +1,76 @@
+// Fab.tsx
+import { component, createElement, useState, useRef, useEffect } from "vaderjs";
+
+interface FabProps {
+  mainIcon: any;
+  children?: any;
+  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center";
+  direction?: "up" | "down" | "left" | "right";
+}
+
+interface FabItemProps {
+  icon?: any;
+  label?: string;
+  onClick?: () => void;
+}
+
+export const FabItem = component((props: FabItemProps) => {
+  const { icon, label, onClick } = props;
+
+  return createElement(
+    "div",
+    { className: "flex items-center gap-2" }, // wrapper div for DaisyUI
+    label && createElement("span", { className: "fab-item-label" }, label), // label outside button
+    createElement(
+      "button",
+      {
+        type: "button",
+        className: "btn btn-lg btn-circle fab-item",
+        onClick,
+        "aria-label": label,
+      },
+      icon // icon inside button
+    )
+  );
+});
+
+
+
+export const Fab = component((props: FabProps) => {
+  const { mainIcon, children, position = "bottom-right", direction = "up" } = props;
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const toggleOpen = () => setOpen(!open);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return createElement(
+    "div",
+    { ref: containerRef, className: `fab ${position} ${direction}` },
+    // Main button
+    createElement(
+      "div",
+      {
+        tabIndex: 0,
+        role: "button",
+        className: "btn btn-lg btn-circle fab-main-btn",
+        onClick: toggleOpen,
+      },
+      mainIcon
+    ),
+    // Children (DaisyUI handles visibility/animation)
+    children
+  );
+});
+
+
+export default Fab;

package/Components/Actions/Modal/index.tsx

@@ -0,0 +1,147 @@
+import { useState, useEffect, component, createElement, VNode } from "vaderjs";
+import Button from "../Button";
+
+export function useModal(initialOpen = false) {
+  const [isOpen, setIsOpen] = useState(initialOpen);
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  const toggle = () => setIsOpen(!isOpen);
+  return { isOpen, open, close, toggle };
+}
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose?: () => void;
+  title?: 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
+  backdrop?: boolean; // show backdrop or not
+  openClass?: string; // extra classes when modal is open
+}
+
+interface ModalActionProps {
+  children: VNode | VNode[] | string;
+  onClick?: () => void;
+  closeModal?: boolean;
+  close?: () => void;
+}
+
+// Utility to get focusable elements inside the modal
+function getFocusableElements(container: HTMLElement): HTMLElement[] {
+  return Array.from(
+    container.querySelectorAll(
+      'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+    )
+  ) as HTMLElement[];
+}
+
+export const Modal = component((props: ModalProps) => {
+  const {
+    isOpen,
+    onClose,
+    title,
+    children,
+    size = "w-11/12 max-w-md",
+    placement = "middle",
+    horizontal = "center",
+    backdrop = true,
+    openClass = "",
+  } = props;
+
+  let modalRef: HTMLDivElement | null = null;
+
+  const handleClose = () => {
+    if (onClose) onClose();
+  };
+
+  // ESC key & focus trap
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") handleClose();
+      if (e.key === "Tab" && modalRef) {
+        const focusables = getFocusableElements(modalRef);
+        if (focusables.length === 0) return;
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+
+        if (e.shiftKey) {
+          if (document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          }
+        } else {
+          if (document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
+      }
+    };
+
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [isOpen]);
+
+  // Autofocus first element
+  useEffect(() => {
+    if (isOpen && modalRef) {
+      const focusables = getFocusableElements(modalRef);
+      if (focusables.length > 0) focusables[0].focus();
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  // DaisyUI placement classes
+  const placementClass =
+    placement === "top"
+      ? "modal-top"
+      : placement === "bottom"
+      ? "modal-bottom"
+      : "modal-middle"; // default
+
+  const horizontalClass =
+    horizontal === "start"
+      ? "modal-start"
+      : horizontal === "end"
+      ? "modal-end"
+      : "modal-center"; // center default
+
+  return createElement(
+    "div",
+    {
+      className: `modal modal-open ${placementClass} ${openClass}`,
+      "aria-modal": "true",
+      role: "dialog",
+    },
+    backdrop &&
+      createElement("div", {
+        className: "modal-backdrop",
+        onClick: handleClose,
+      }),
+    createElement(
+      "div",
+      {
+        className: `modal-box ${size} relative`,
+        ref: (el: HTMLDivElement) => (modalRef = el),
+      },
+      title && createElement("h3", { className: "font-bold text-lg" }, title),
+      children
+    )
+  );
+});
+
+export const ModalAction = component((props: ModalActionProps) => {
+  const { children, onClick, closeModal, close } = props;
+
+  const handleClick = () => {
+    if (onClick) onClick();
+    if (closeModal && close) close();
+  };
+
+  return createElement(Button, { onClick: handleClick }, children);
+});

package/Components/Actions/Swap/index.tsx

@@ -0,0 +1,52 @@
+import { useState, component, createElement, VNode } from "vaderjs";
+
+export type SwapProps = {
+  on?: VNode | VNode[] | string;
+  off?: VNode | VNode[] | string;
+  indeterminate?: VNode | VNode[] | string;
+  active?: boolean; // Controlled toggle
+  rotate?: boolean;
+  flip?: boolean;
+  className?: string;
+  onChange?: (active: boolean) => void;
+  clickable?: boolean; // If true, label click toggles state
+};
+
+export const Swap = component((props: SwapProps) => {
+  const { on, off, indeterminate, active, rotate, flip, className, onChange, clickable } = props;
+
+  const [internalActive, setInternalActive] = useState(active ?? false);
+  const isControlled = active !== undefined;
+  const currentActive = isControlled ? active : internalActive;
+
+  const handleClick = () => {
+    if (!clickable) return;
+    const newState = !currentActive;
+    if (!isControlled) setInternalActive(newState);
+    if (onChange) onChange(newState);
+  };
+
+  const swapClasses = ["swap"];
+  if (rotate) swapClasses.push("swap-rotate");
+  if (flip) swapClasses.push("swap-flip");
+  if (currentActive) swapClasses.push("swap-active");
+  if (className) swapClasses.push(className);
+
+  return createElement(
+    "label",
+    { className: swapClasses.join(" "), onClick: handleClick },
+    // Only render checkbox if not clickable or for accessibility
+    !clickable && createElement("input", {
+      type: "checkbox",
+      checked: currentActive,
+      onChange: (e: Event) => {
+        const checked = (e.target as HTMLInputElement).checked;
+        if (!isControlled) setInternalActive(checked);
+        if (onChange) onChange(checked);
+      }
+    }),
+    on && createElement("div", { className: "swap-on" }, on),
+    off && createElement("div", { className: "swap-off" }, off),
+    indeterminate && createElement("div", { className: "swap-indeterminate" }, indeterminate)
+  );
+});

package/Components/Actions/ThemeController/index.tsx

@@ -0,0 +1,133 @@
+import { component, createElement, useState, VNode } from "vaderjs";
+
+export type ThemeOption = {
+  value: string;
+  label?: string;
+  icon?: VNode; // optional icon
+  ariaLabel?: string;
+};
+
+export type ThemeControllerProps = {
+  type?: "checkbox" | "radio" | "toggle" | "swap" | "buttons" | "dropdown"; // type of input
+  value?: string | boolean; // initial value
+  options?: ThemeOption[]; // for radios, buttons, dropdown
+  className?: string;
+  direction?: "vertical" | "horizontal"; // for buttons/radios
+  onChange?: (value: string | boolean) => void;
+  swapRotate?: boolean;
+  swapFlip?: boolean;
+};
+
+export const ThemeController = component((props: ThemeControllerProps) => {
+  const {
+    type = "checkbox",
+    value,
+    options = [],
+    className,
+    direction = "horizontal",
+    onChange,
+    swapRotate,
+    swapFlip,
+  } = props;
+
+  const [state, setState] = useState(value ?? (type === "checkbox" || type === "toggle" || type === "swap" ? false : ""));
+
+  const handleChange = (val: string | boolean) => {
+    setState(val);
+    if (onChange) onChange(val);
+  };
+
+  // Checkbox / Toggle / Swap
+  if (type === "checkbox" || type === "toggle") {
+    return createElement("input", {
+      type: "checkbox",
+      className: `theme-controller ${type} ${className || ""}`,
+      checked: state as boolean,
+      onChange: (e: Event) => handleChange((e.target as HTMLInputElement).checked),
+    });
+  }
+
+  if (type === "swap") {
+    // swap-on / swap-off
+    const [checked, setChecked] = useState(state as boolean);
+    return createElement(
+      "label",
+      {
+        className: `swap ${swapRotate ? "swap-rotate" : ""} ${swapFlip ? "swap-flip" : ""} ${checked ? "swap-active" : ""} ${className || ""}`,
+        onClick: () => handleChange(!checked),
+      },
+      createElement("input", {
+        type: "checkbox",
+        className: "theme-controller hidden",
+        checked,
+        onChange: (e: Event) => handleChange((e.target as HTMLInputElement).checked),
+      }),
+      options[0]?.icon && createElement("div", { className: "swap-off" }, options[0].icon),
+      options[1]?.icon && createElement("div", { className: "swap-on" }, options[1].icon)
+    );
+  }
+
+  // Radio / Buttons / Dropdown
+  if (type === "radio" || type === "buttons") {
+    const containerClass = type === "buttons" ? `join ${direction === "vertical" ? "join-vertical" : ""}` : "";
+    return createElement(
+      "div",
+      { className: `${containerClass} ${className || ""}` },
+      options.map(opt =>
+        createElement("input", {
+          type: "radio",
+          name: type === "radio" ? "theme-radios" : "theme-buttons",
+          className: `theme-controller ${type === "buttons" ? "btn join-item" : "radio"} ${opt?.ariaLabel ? "" : ""}`,
+          value: opt.value,
+          checked: state === opt.value,
+          "aria-label": opt.ariaLabel ?? opt.label ?? opt.value,
+          onChange: () => handleChange(opt.value),
+        })
+      )
+    );
+  }
+
+  if (type === "dropdown") {
+    return createElement(
+      "div",
+      { className: `dropdown ${className || ""}` },
+      createElement(
+        "div",
+        { tabIndex: 0, role: "button", className: "btn m-1" },
+        "Theme",
+        createElement(
+          "svg",
+          {
+            width: "12px",
+            height: "12px",
+            className: "inline-block h-2 w-2 fill-current opacity-60",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 2048 2048",
+          },
+          createElement("path", { d: "M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z" })
+        )
+      ),
+      createElement(
+        "ul",
+        { tabIndex: -1, className: "dropdown-content bg-base-300 rounded-box z-1 w-52 p-2 shadow-2xl" },
+        options.map(opt =>
+          createElement(
+            "li",
+            {},
+            createElement("input", {
+              type: "radio",
+              name: "theme-dropdown",
+              className: "theme-controller w-full btn btn-sm btn-block btn-ghost justify-start",
+              value: opt.value,
+              checked: state === opt.value,
+              "aria-label": opt.ariaLabel ?? opt.label ?? opt.value,
+              onChange: () => handleChange(opt.value),
+            })
+          )
+        )
+      )
+    );
+  }
+
+  return null;
+});

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

@@ -0,0 +1,82 @@
+import { component, createElement, VNode } from "vaderjs";
+
+export type AccordionItem = {
+  title: string | VNode;
+  content: string | VNode;
+  value?: string;       // for radio inputs
+  open?: boolean;       // for details
+};
+
+export type AccordionProps = {
+  items: AccordionItem[];
+  type?: "radio" | "details";        // radio inputs or details elements
+  name?: string;                     // radio group name
+  arrow?: boolean;                   // add arrow icon
+  plus?: boolean;                    // add plus/minus icon
+  join?: boolean;                    // join items for seamless borders
+  direction?: "vertical" | "horizontal"; // join direction
+  className?: string;                // additional container class
+  border?: boolean;                  // add border to items
+  onChange?: (value: string) => void;
+};
+
+export const Accordion = component((props: AccordionProps) => {
+  const {
+    items,
+    type = "radio",
+    name = "accordion",
+    arrow,
+    plus,
+    join,
+    direction = "vertical",
+    className,
+    border = true,
+    onChange,
+  } = props;
+
+  const containerClass = join ? `join ${direction === "vertical" ? "join-vertical" : ""}` : "";
+
+  return createElement(
+    "div",
+    { className: `${containerClass} ${className || ""}` },
+    items.map((item, index) => {
+      const itemClasses = ["collapse"];
+      if (arrow) itemClasses.push("collapse-arrow");
+      if (plus) itemClasses.push("collapse-plus");
+      if (border) itemClasses.push("border border-base-300");
+      if (join) itemClasses.push("join-item");
+      
+      if (type === "details" && item.open) itemClasses.push("collapse-open");
+
+      const handleRadioChange = () => {
+        if (onChange && item.value) onChange(item.value);
+      };
+
+      if (type === "details") {
+        return createElement(
+          "details",
+          {
+            className: itemClasses.join(" "),
+            open: !!item.open,
+          },
+          createElement("summary", { className: "collapse-title font-semibold" }, item.title),
+          createElement("div", { className: "collapse-content text-sm" }, item.content)
+        );
+      }
+
+      // radio type
+      return createElement(
+        "div",
+        { className: itemClasses.join(" ") },
+        createElement("input", {
+          type: "radio",
+          name,
+          checked: index === 0,
+          onChange: handleRadioChange,
+        }),
+        createElement("div", { className: "collapse-title font-semibold" }, item.title),
+        createElement("div", { className: "collapse-content text-sm" }, item.content)
+      );
+    })
+  );
+});