vaderjs-daisyui 0.0.1

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

@@ -0,0 +1,96 @@
+import { component, createElement, VNode } from "vaderjs";
+
+export type AvatarProps = {
+  src?: string;
+  size?: string; // w-8, w-12, w-16, w-24, etc.
+  rounded?: "none" | "sm" | "md" | "xl" | "full";
+  mask?: string; // mask-heart, mask-squircle, mask-hexagon-2
+  ring?: string; // ring-primary, ring-secondary, etc.
+  ringOffset?: string; // ring-offset-base-100, etc.
+  online?: boolean;
+  offline?: boolean;
+  placeholder?: string;
+  className?: string;
+};
+
+export type AvatarGroupProps = {
+  children: VNode[];
+  counter?: number; // show "+N" on last avatar
+  space?: string; // spacing e.g. -space-x-6
+  className?: string;
+};
+
+export const Avatar = component((props: AvatarProps) => {
+  const {
+    src,
+    size = "w-12",
+    rounded = "full",
+    mask,
+    ring,
+    ringOffset,
+    online,
+    offline,
+    placeholder,
+    className,
+  } = props;
+
+  const containerClasses = ["avatar"];
+  if (online) containerClasses.push("avatar-online");
+  if (offline) containerClasses.push("avatar-offline");
+  if (placeholder) containerClasses.push("avatar-placeholder");
+  if (className) containerClasses.push(className);
+
+  const avatarClasses = [
+    size,
+    rounded === "none" ? "" : `rounded-${rounded}`,
+    mask ? `mask ${mask}` : "",
+    ring ? `ring-2 ${ring}` : "",
+    ringOffset ? `ring-offset-2 ${ringOffset}` : "",
+  ].filter(Boolean).join(" ");
+
+  const fontSize = size.includes("w-24")
+    ? "text-3xl"
+    : size.includes("w-16")
+    ? "text-xl"
+    : size.includes("w-12")
+    ? "text-base"
+    : "text-xs";
+
+  return createElement(
+    "div",
+    { className: containerClasses.join(" ") },
+    createElement(
+      "div",
+      { className: avatarClasses },
+      placeholder
+        ? createElement("span", { className: fontSize }, placeholder)
+        : src
+        ? createElement("img", { src })
+        : null
+    )
+  );
+});
+
+export const AvatarGroup = component((props: AvatarGroupProps) => {
+  const { children, counter, space = "-space-x-6", className } = props;
+  const groupClasses = ["avatar-group", space];
+  if (className) groupClasses.push(className);
+
+  const renderedChildren = [...children];
+  if (counter) {
+    // Add last avatar as counter
+    renderedChildren.push(
+      createElement(
+        "div",
+        { className: "avatar avatar-placeholder" },
+        createElement(
+          "div",
+          { className: `bg-neutral text-neutral-content ${children[0]?.props?.size || "w-12"} rounded-full` },
+          `+${counter}`
+        )
+      )
+    );
+  }
+
+  return createElement("div", { className: groupClasses.join(" ") }, ...renderedChildren);
+});

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

@@ -0,0 +1,46 @@
+import { component, createElement, VNode } from "vaderjs";
+
+export type BadgeProps = {
+  children?: string | VNode;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  color?: "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";
+  style?: "soft" | "outline" | "dash" | "ghost";
+  icon?: VNode; // optional SVG icon
+  className?: string;
+};
+
+export const Badge = component((props: BadgeProps) => {
+  const { children, size = "md", color = "neutral", style, icon, className } = props;
+
+  const classes = ["badge"];
+  if (size) classes.push(`badge-${size}`);
+  if (color) classes.push(`badge-${color}`);
+  if (style) classes.push(`badge-${style}`);
+  if (className) classes.push(className);
+
+  return createElement(
+    "span",
+    { className: classes.join(" ") },
+    icon ? createElement("span", { className: "badge-icon mr-1" }, icon) : null,
+    children
+  );
+});
+
+export type BadgeButtonProps = {
+  label: string | VNode;
+  badge?: BadgeProps;
+  className?: string;
+};
+
+export const BadgeButton = component((props: BadgeButtonProps) => {
+  const { label, badge, className } = props;
+  const btnClasses = ["btn"];
+  if (className) btnClasses.push(className);
+
+  return createElement(
+    "button",
+    { className: btnClasses.join(" ") },
+    label,
+    badge ? createElement(Badge, badge) : null
+  );
+});

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

@@ -0,0 +1,72 @@
+import { component, createElement, VNode } from "vaderjs";
+import { Badge, BadgeProps } from "../Badge";
+
+export type CardProps = {
+  title?: string | VNode;
+  body?: string | VNode;
+  actions?: VNode | VNode[];
+  figure?: VNode;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  style?: "border" | "dash";
+  side?: boolean; // card-side
+  imageFull?: boolean; // image-full
+  center?: boolean; // center content
+  className?: string;
+};
+
+export const Card = component((props: CardProps) => {
+  const {
+    title,
+    body,
+    actions,
+    figure,
+    size = "md",
+    style,
+    side,
+    imageFull,
+    center,
+    className,
+  } = props;
+
+  const classes = ["card"];
+  if (size) classes.push(`card-${size}`);
+  if (style === "border") classes.push("card-border");
+  if (style === "dash") classes.push("card-dash");
+  if (side) classes.push("card-side");
+  if (imageFull) classes.push("image-full");
+  if (className) classes.push(className);
+
+  const bodyClasses = ["card-body"];
+  if (center) bodyClasses.push("items-center", "text-center");
+
+  return createElement(
+    "div",
+    { className: classes.join(" ") },
+    figure ? figure : null,
+    createElement(
+      "div",
+      { className: bodyClasses.join(" ") },
+      title ? (typeof title === "string" ? createElement("h2", { className: "card-title" }, title) : title) : null,
+      body ? (typeof body === "string" ? createElement("p", {}, body) : body) : null,
+      actions ? (Array.isArray(actions) ? actions.map(a => a) : actions) : null
+    )
+  );
+});
+
+// Optional helper for card with badge on title
+export type CardWithBadgeProps = CardProps & {
+  badges?: BadgeProps[];
+};
+
+export const CardWithBadge = component((props: CardWithBadgeProps) => {
+  const { badges, title, ...cardProps } = props;
+
+  const titleVNode = createElement(
+    "h2",
+    { className: "card-title flex items-center gap-2" },
+    title,
+    badges ? badges.map(b => createElement(Badge, b)) : null
+  );
+
+  return createElement(Card, { ...cardProps, title: titleVNode });
+});

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

@@ -0,0 +1,72 @@
+// Carousel.tsx
+import { component, createElement } from "vaderjs";
+
+interface CarouselProps {
+  images: string[];
+  snap?: "start" | "center" | "end"; // snap position
+  width?: "full" | "half";           // width of items
+  vertical?: boolean;                // vertical layout
+  containerWidth?: string;           // optional width of carousel container, e.g., "w-96"
+  fullBleed?: boolean;               // full-bleed layout
+  indicators?: boolean;              // show indicator buttons
+  controls?: boolean;                // show next/prev buttons
+}
+
+const Carousel = component(({
+  images,
+  snap = "start",
+  width = "full",
+  vertical = false,
+  containerWidth = "w-64",
+  fullBleed = false,
+  indicators = false,
+  controls = false,
+}: CarouselProps) => {
+  const snapClass = snap === "center" ? "carousel-center" : snap === "end" ? "carousel-end" : "carousel-start";
+  const orientationClass = vertical ? "carousel-vertical" : "";
+  const itemClass = width === "full" ? "w-full" : "w-1/2";
+  const containerClass = fullBleed
+    ? "carousel carousel-center bg-neutral rounded-box max-w-md space-x-4 p-4"
+    : `carousel ${snapClass} ${orientationClass} ${containerWidth} rounded-box`;
+
+  const len = images.length;
+
+  // VaderJS requires returning VNode or VNode[], no fragments <>
+  const carouselItems = images.map((src, i) => {
+    const prev = (i - 1 + len) % len;
+    const next = (i + 1) % len;
+
+    return createElement("div", {
+      key: i,
+      id: controls ? `slide${i + 1}` : indicators ? `item${i + 1}` : undefined,
+      class: `carousel-item ${itemClass} ${vertical ? "h-full" : ""} relative`
+    },
+      createElement("img", {
+        src,
+        class: fullBleed ? "rounded-box" : "w-full",
+        alt: `Carousel ${i + 1}`
+      }),
+      controls ? createElement("div", {
+        class: "absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between"
+      },
+        createElement("a", { href: `#slide${prev + 1}`, class: "btn btn-circle" }, "❮"),
+        createElement("a", { href: `#slide${next + 1}`, class: "btn btn-circle" }, "❯")
+      ) : null
+    );
+  });
+
+  const indicatorButtons = indicators && !controls
+    ? createElement("div", { class: "flex justify-center w-full py-2 gap-2" },
+      images.map((_, i) =>
+        createElement("a", { href: `#item${i + 1}`, class: "btn btn-xs", key: i }, `${i + 1}`)
+      )
+    )
+    : null;
+
+  return [
+    createElement("div", { class: containerClass }, ...carouselItems),
+    indicatorButtons
+  ];
+});
+
+export default Carousel;

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

@@ -0,0 +1,57 @@
+// ChatBubbles.ts
+import { component, createElement } from "vaderjs";
+
+export type ChatColor =
+  | "neutral"
+  | "primary"
+  | "secondary"
+  | "accent"
+  | "info"
+  | "success"
+  | "warning"
+  | "error";
+
+export interface ChatMessage {
+  id: string | number;
+  author?: string;
+  avatar?: string;
+  time?: string;
+  content: string;
+  placement?: "start" | "end";
+  header?: string;
+  footer?: string;
+  color?: ChatColor;
+}
+
+export interface ChatProps {
+  messages: ChatMessage[];
+}
+
+const ChatBubbles = component(({ messages }: ChatProps) => {
+  const renderMessage = (msg: ChatMessage) => {
+    const placementClass = msg.placement === "end" ? "chat-end" : "chat-start";
+    const bubbleColor = msg.color ? `chat-bubble-${msg.color}` : "";
+
+    return createElement("div", { class: `chat ${placementClass}`, key: msg.id }, [
+      msg.avatar
+        ? createElement("div", { class: "chat-image avatar" },
+            createElement("div", { class: "w-10 rounded-full" },
+              createElement("img", { src: msg.avatar, alt: msg.author ?? "User" })
+            )
+          )
+        : null,
+      msg.header
+        ? createElement("div", { class: "chat-header" }, [
+            msg.header,
+            msg.time ? createElement("time", { class: "text-xs opacity-50" }, msg.time) : null
+          ])
+        : null,
+      createElement("div", { class: `chat-bubble ${bubbleColor}` }, msg.content),
+      msg.footer ? createElement("div", { class: "chat-footer opacity-50" }, msg.footer) : null
+    ]);
+  };
+
+  return messages.map(renderMessage);
+});
+
+export default ChatBubbles;

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

@@ -0,0 +1,60 @@
+// Collapse.ts
+import { component, createElement } from "vaderjs";
+
+export interface CollapseItem {
+  id: string | number;
+  title: string;
+  content: string;
+  focus?: boolean; // true = focus-based collapse
+  checkbox?: boolean; // true = checkbox-controlled
+  details?: boolean; // true = use <details>/<summary>
+  open?: boolean; // force open
+  close?: boolean; // force close
+  arrow?: boolean; // arrow icon
+  plus?: boolean; // plus/minus icon
+  placementStart?: boolean; // move icon to start
+  customClasses?: string; // any additional Tailwind classes
+}
+
+export interface CollapseProps {
+  items: CollapseItem[];
+}
+
+const Collapse = component(({ items }: CollapseProps) => {
+  const renderItem = (item: CollapseItem) => {
+    let baseClasses = "collapse";
+    if (item.focus) baseClasses += " focus:outline-none";
+    if (item.arrow) baseClasses += " collapse-arrow";
+    if (item.plus) baseClasses += " collapse-plus";
+    if (item.open) baseClasses += " collapse-open";
+    if (item.close) baseClasses += " collapse-close";
+    if (item.customClasses) baseClasses += ` ${item.customClasses}`;
+
+    const titleClasses = `collapse-title font-semibold${
+      item.placementStart ? " after:start-5 after:end-auto pe-4 ps-12" : ""
+    }`;
+    const contentClasses = "collapse-content text-sm";
+
+    if (item.details) {
+      // Using details/summary
+      return createElement(
+        "details",
+        { class: baseClasses, key: item.id },
+        [
+          createElement("summary", { class: titleClasses }, item.title),
+          createElement("div", { class: contentClasses }, item.content)
+        ]
+      );
+    }
+
+    return createElement("div", { class: baseClasses, key: item.id, tabindex: item.focus ? 0 : undefined }, [
+      item.checkbox ? createElement("input", { type: "checkbox" }) : null,
+      createElement("div", { class: titleClasses }, item.title),
+      createElement("div", { class: contentClasses }, item.content)
+    ]);
+  };
+
+  return items.map(renderItem);
+});
+
+export default Collapse;

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

@@ -0,0 +1,97 @@
+// Countdown.ts
+import { component, createElement, useState, useEffect, useRef } from "vaderjs";
+
+export interface CountdownUnit {
+  label?: string;
+  value: number;
+  max?: number; // e.g., 59 for seconds
+  digits?: number;
+  animation?: string;
+  containerClass?: string;
+  numberClass?: string;
+}
+
+export interface CountdownProps {
+  units: CountdownUnit[];
+  interval?: number; // ms per tick
+  loop?: boolean;
+}
+
+const Countdown = component(({ units, interval = 1000, loop = true }: CountdownProps) => {
+  const [counts, setCounts] = useState(() => units.map(u => u.value));
+
+  // Refs to avoid stale closures in setInterval
+  const unitsRef = useRef(units);
+  const loopRef = useRef(loop);
+
+  useEffect(() => {
+    unitsRef.current = units;
+    loopRef.current = loop;
+  }, [units, loop]);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCounts(prev => {
+        const newCounts = [...prev];
+        const currentUnits = unitsRef.current;
+        const shouldLoop = loopRef.current;
+
+        let i = newCounts.length - 1;
+        let carry = true;
+
+        while (i >= 0 && carry) {
+          const max = currentUnits[i]?.max ?? (i === newCounts.length - 1 ? 59 : 99);
+          if (newCounts[i] > 0) {
+            newCounts[i]--;
+            carry = false;
+          } else {
+            newCounts[i] = max;
+            i--;
+          }
+        }
+
+        if (carry && shouldLoop) {
+          // Reset all to initial values if looping
+          return currentUnits.map(u => u.value);
+        }
+
+        if (carry && !shouldLoop) {
+          // Stop at zero
+          clearInterval(timer);
+          return newCounts.map(() => 0);
+        }
+
+        return newCounts;
+      });
+    }, interval);
+
+    return () => clearInterval(timer);
+  }, [interval]);
+
+  const renderUnit = (val: number, unit: CountdownUnit, idx: number) => {
+    const digits = unit.digits ?? 2;
+    const padded = String(val).padStart(digits, "0");
+
+    return createElement(
+      "div",
+      { key: idx, class: `flex flex-col items-center ${unit.containerClass || ""}` },
+      [
+        createElement("span", {
+          class: `countdown font-mono ${unit.numberClass || ""} ${unit.animation || ""}`,
+          style: `--value:${val}; --digits:${digits};`,
+          "aria-live": "polite",
+          "aria-label": String(val)
+        }, padded),
+        unit.label ? createElement("span", { class: "text-sm mt-1" }, unit.label) : null
+      ]
+    );
+  };
+
+  return createElement(
+    "div",
+    { class: "grid auto-cols-max grid-flow-col gap-5 text-center" },
+    counts.map((val, idx) => renderUnit(val, units[idx], idx))
+  );
+});
+
+export default Countdown;

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

@@ -0,0 +1,60 @@
+import { component, createElement, useRef, useEffect } from "vaderjs";
+
+export interface DiffProps {
+  item1: any;
+  item2: any;
+  className?: string;
+  initial?: number; // 0–100
+}
+
+const Diff = component(
+  ({ item1, item2, className = "diff rounded-field aspect-16/9", initial = 50 }: DiffProps) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      el.style.setProperty("--pos", `${initial}%`);
+    }, [initial]);
+
+    return createElement(
+      "figure",
+      {
+        ref: containerRef,
+        class: className,
+        tabindex: 0,
+      },
+      [
+        createElement(
+          "div",
+          { class: "diff-item-1", role: "img", tabindex: 0 },
+          item1
+        ),
+
+        createElement(
+          "div",
+          { class: "diff-item-2", role: "img" },
+          item2
+        ),
+
+        // 🔑 THIS is the key
+        createElement("input", {
+          type: "range",
+          min: 0,
+          max: 100,
+          value: initial,
+          class: "diff-resizer",
+          "aria-label": "Resize comparison",
+          onInput: (e: any) => {
+            containerRef.current?.style.setProperty(
+              "--pos",
+              `${e.target.value}%`
+            );
+          },
+        }),
+      ]
+    );
+  }
+);
+
+export default Diff;

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

@@ -0,0 +1,37 @@
+import { component, createElement } from "vaderjs";
+
+export interface Hover3DProps {
+  children: any;
+  className?: string;
+  as?: "div" | "a";
+  href?: string;
+}
+
+const Hover3D = component(
+  ({ children, className = "", as = "div", href }: Hover3DProps) => {
+    const Tag = as;
+
+    return createElement(
+      Tag,
+      {
+        class: `hover-3d ${className}`.trim(),
+        ...(Tag === "a" && href ? { href } : {}),
+      },
+
+      // ✅ IMPORTANT: spread children
+      children,
+
+      // required 8 hover zones
+      createElement("div", {}),
+      createElement("div", {}),
+      createElement("div", {}),
+      createElement("div", {}),
+      createElement("div", {}),
+      createElement("div", {}),
+      createElement("div", {}),
+      createElement("div", {})
+    );
+  }
+);
+
+export default Hover3D;

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

@@ -0,0 +1,57 @@
+// HoverGallery.ts
+import { component, createElement } from "vaderjs";
+
+export interface HoverGalleryProps {
+  images: (string | JSX.Element)[];
+  className?: string;
+  as?: "figure" | "div";
+  altPrefix?: string;
+}
+
+/**
+ * HoverGallery
+ * DaisyUI hover-gallery component
+ *
+ * Rules:
+ * - Max 10 images (CSS limitation)
+ * - First image is default
+ * - Remaining images activate on horizontal hover zones
+ * - NO JS REQUIRED (CSS-driven)
+ */
+const HoverGallery = component(
+  ({
+    images,
+    className = "",
+    as = "figure",
+    altPrefix = "Gallery image",
+  }: HoverGalleryProps) => {
+    const Tag = as;
+
+    const safeImages = images.slice(0, 10); // hard cap per DaisyUI
+
+    return createElement(
+      Tag,
+      {
+        class: `hover-gallery ${className}`.trim(),
+        role: "group",
+        "aria-label": "Hover image gallery",
+      },
+      safeImages.map((img, idx) => {
+        // string → <img src="..." />
+        if (typeof img === "string") {
+          return createElement("img", {
+            src: img,
+            alt: `${altPrefix} ${idx + 1}`,
+            loading: idx === 0 ? "eager" : "lazy",
+            draggable: false,
+          });
+        }
+
+        // JSX passed directly
+        return img;
+      })
+    );
+  }
+);
+
+export default HoverGallery;

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

@@ -0,0 +1,31 @@
+// Kbd.ts
+import { component, createElement } from "vaderjs";
+
+export type KbdSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+export interface KbdProps {
+  children: any;
+  size?: KbdSize;
+  className?: string;
+}
+
+/**
+ * Kbd
+ * DaisyUI keyboard key / shortcut component
+ */
+const Kbd = component(
+  ({ children, size = "md", className = "" }: KbdProps) => {
+    const sizeClass =
+      size === "md" ? "" : `kbd-${size}`;
+
+    return createElement(
+      "kbd",
+      {
+        class: `kbd ${sizeClass} ${className}`.trim(),
+      },
+      children
+    );
+  }
+);
+
+export default Kbd;