vaderjs-daisyui 0.0.1

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

@@ -0,0 +1,93 @@
+// List.ts
+import { component, createElement } from "vaderjs";
+
+/* -------------------------------------------------------
+ * List (container)
+ * ----------------------------------------------------- */
+
+export interface ListProps {
+  children: any;
+  className?: string;
+  as?: "ul" | "ol" | "div";
+}
+
+export const List = component(
+  ({ children, className = "", as = "ul" }: ListProps) => {
+    const Tag = as;
+
+    return createElement(
+      Tag,
+      {
+        class: `list ${className}`.trim(),
+      },
+      children
+    );
+  }
+);
+
+/* -------------------------------------------------------
+ * ListRow
+ * ----------------------------------------------------- */
+
+export interface ListRowProps {
+  children: any;
+  className?: string;
+}
+
+export const ListRow = component(
+  ({ children, className = "" }: ListRowProps) =>
+    createElement(
+      "li",
+      {
+        class: `list-row ${className}`.trim(),
+      },
+      children
+    )
+);
+
+/* -------------------------------------------------------
+ * ListCol (optional helper)
+ * ----------------------------------------------------- */
+
+export interface ListColProps {
+  children: any;
+  grow?: boolean;
+  wrap?: boolean;
+  className?: string;
+  as?: string;
+}
+
+/**
+ * ListCol
+ * Helper wrapper for list-row children
+ *
+ * grow → fills remaining space (list-col-grow)
+ * wrap → moves to next row (list-col-wrap)
+ */
+export const ListCol = component(
+  ({
+    children,
+    grow = false,
+    wrap = false,
+    className = "",
+    as = "div",
+  }: ListColProps) => {
+    const Tag = as;
+
+    return createElement(
+      Tag,
+      {
+        class: [
+          grow && "list-col-grow",
+          wrap && "list-col-wrap",
+          className,
+        ]
+          .filter(Boolean)
+          .join(" "),
+      },
+      children
+    );
+  }
+);
+
+export default List;

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

@@ -0,0 +1,114 @@
+import { component, createElement } from "vaderjs";
+
+/* ================================
+   TYPES
+================================ */
+
+export interface StatsProps {
+  children: any;
+  className?: string;
+  direction?: "horizontal" | "vertical";
+  responsive?: boolean; // vertical on small, horizontal on lg
+}
+
+export interface StatProps {
+  children: any;
+  className?: string;
+  centered?: boolean;
+}
+
+export interface StatPartProps {
+  children: any;
+  className?: string;
+}
+
+/* ================================
+   ROOT: <Stats>
+================================ */
+
+export const Stats = component(
+  ({
+    children,
+    className = "",
+    direction = "horizontal",
+    responsive = false,
+  }: StatsProps) => {
+    const dirClass =
+      responsive
+        ? "stats-vertical lg:stats-horizontal"
+        : direction === "vertical"
+          ? "stats-vertical"
+          : "stats-horizontal";
+
+    return createElement(
+      "div",
+      {
+        class: `stats ${dirClass} ${className}`.trim(),
+      },
+      children
+    );
+  }
+);
+
+/* ================================
+   <Stat>
+================================ */
+
+export const Stat = component(
+  ({
+    children,
+    className = "",
+    centered = false,
+  }: StatProps) => {
+    return createElement(
+      "div",
+      {
+        class: `stat ${centered ? "place-items-center" : ""} ${className}`.trim(),
+      },
+      children
+    );
+  }
+);
+
+/* ================================
+   PARTS
+================================ */
+
+export const StatTitle = component(
+  ({ children, className = "" }: StatPartProps) =>
+    createElement("div", { class: `stat-title ${className}`.trim() }, children)
+);
+
+export const StatValue = component(
+  ({ children, className = "" }: StatPartProps) =>
+    createElement("div", { class: `stat-value ${className}`.trim() }, children)
+);
+
+export const StatDesc = component(
+  ({ children, className = "" }: StatPartProps) =>
+    createElement("div", { class: `stat-desc ${className}`.trim() }, children)
+);
+
+export const StatFigure = component(
+  ({ children, className = "" }: StatPartProps) =>
+    createElement("div", { class: `stat-figure ${className}`.trim() }, children)
+);
+
+export const StatActions = component(
+  ({ children, className = "" }: StatPartProps) =>
+    createElement("div", { class: `stat-actions ${className}`.trim() }, children)
+);
+
+/* ================================
+   DEFAULT EXPORT (OPTIONAL)
+================================ */
+
+export default {
+  Stats,
+  Stat,
+  StatTitle,
+  StatValue,
+  StatDesc,
+  StatFigure,
+  StatActions,
+};

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

@@ -0,0 +1,33 @@
+import { createElement } from "vaderjs";
+
+export interface TableProps {
+  zebra?: boolean;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  pinRows?: boolean;
+  pinCols?: boolean;
+  class?: string;
+}
+
+ const Table = ({
+  zebra,
+  size = "md",
+  pinRows,
+  pinCols,
+  class: className,
+  children,
+}: TableProps & { children?: any }) => {
+  const classes = [
+    "table",
+    zebra && "table-zebra",
+    pinRows && "table-pin-rows",
+    pinCols && "table-pin-cols",
+    size && `table-${size}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return createElement("table", { class: classes }, children);
+};
+
+export default Table

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

@@ -0,0 +1,118 @@
+import { component, createElement, VNode } from "vaderjs";
+
+export type TextRotateProps = {
+  words: string[] | VNode[];
+  duration?: number; // in milliseconds
+  className?: string;
+  wordClassName?: string;
+  containerClassName?: string;
+  pauseOnHover?: boolean;
+  lineHeight?: string; // e.g., "leading-[2]"
+  colorVariant?: "single" | "gradient" | "individual";
+};
+
+export const TextRotate = component((props: TextRotateProps) => {
+  const {
+    words,
+    duration = 10000, // 10 seconds default
+    className = "",
+    wordClassName = "",
+    containerClassName = "",
+    pauseOnHover = true,
+    lineHeight = "",
+    colorVariant = "single",
+  } = props;
+
+  // Calculate animation delay for each word
+  const wordDuration = duration / words.length;
+
+  const containerClasses = [
+    "text-rotate",
+    pauseOnHover ? "hover:pause" : "",
+    className,
+    lineHeight,
+  ].filter(Boolean).join(" ");
+
+  const innerContainerClasses = [
+    "grid justify-items-start", // DaisyUI text-rotate uses grid
+    containerClassName,
+  ].filter(Boolean).join(" ");
+
+  // Generate individual word styles
+  const generateWordStyles = (index: number) => {
+    const baseDelay = index * wordDuration;
+    
+    // Individual colors if specified
+    const colorClasses = colorVariant === "individual" 
+      ? [
+          "bg-teal-400 text-teal-800 px-2",
+          "bg-red-400 text-red-800 px-2",
+          "bg-blue-400 text-blue-800 px-2",
+          "bg-purple-400 text-purple-800 px-2",
+          "bg-yellow-400 text-yellow-800 px-2",
+          "bg-pink-400 text-pink-800 px-2",
+        ][index % 6]
+      : colorVariant === "gradient"
+      ? "bg-gradient-to-r from-primary to-secondary text-primary-content px-2"
+      : wordClassName;
+
+    return `${colorClasses} animate-fade-in-out`;
+  };
+
+  return createElement(
+    "span",
+    {
+      className: containerClasses,
+      style: `--duration: ${duration}ms;`,
+    },
+    createElement(
+      "span",
+      { className: innerContainerClasses },
+      words.map((word, index) => {
+        const isVNode = typeof word !== 'string';
+        
+        return createElement(
+          "span",
+          {
+            key: index,
+            className: generateWordStyles(index),
+            style: `animation-delay: ${index * wordDuration}ms;`,
+          },
+          isVNode ? word : word
+        );
+      })
+    )
+  );
+});
+
+// Helper component for text rotate in sentences
+export type TextRotateInlineProps = {
+  prefix?: string;
+  words: string[];
+  suffix?: string;
+  duration?: number;
+  className?: string;
+  wordClassName?: string;
+};
+
+export const TextRotateInline = component((props: TextRotateInlineProps) => {
+  const { prefix, words, suffix, duration, className, wordClassName } = props;
+
+  return createElement(
+    "span",
+    { className: `inline-flex items-center ${className || ""}` },
+    [
+      prefix ? createElement("span", { key: "prefix" }, `${prefix} `) : null,
+      createElement(TextRotate, {
+        key: "rotate",
+        words,
+        duration,
+        wordClassName,
+        containerClassName: "inline-block",
+      }),
+      suffix ? createElement("span", { key: "suffix" }, ` ${suffix}`) : null,
+    ].filter(Boolean)
+  );
+});
+
+export default TextRotate;

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

@@ -0,0 +1,209 @@
+import { component, createElement, VNode } from "vaderjs";
+
+export type TimelineItem = {
+  id?: string | number;
+  start?: VNode | string;
+  middle?: VNode | string;
+  end?: VNode | string;
+  showLine?: boolean;
+  lineColor?: string; // e.g., "bg-primary", "bg-secondary"
+  box?: boolean; // whether to apply timeline-box class
+  className?: string;
+};
+
+export type TimelineProps = {
+  items: TimelineItem[];
+  vertical?: boolean;
+  snapIcon?: boolean;
+  compact?: boolean;
+  responsive?: boolean; // vertical on mobile, horizontal on desktop
+  className?: string;
+  direction?: "vertical" | "horizontal";
+  reverse?: boolean;
+};
+
+export const Timeline = component((props: TimelineProps) => {
+  const {
+    items,
+    vertical = false,
+    snapIcon = false,
+    compact = false,
+    responsive = false,
+    className = "",
+    direction,
+    reverse = false,
+  } = props;
+
+  // Determine direction
+  const actualDirection = direction || (vertical ? "vertical" : "horizontal");
+
+  const timelineClasses = [
+    "timeline",
+    actualDirection === "vertical" ? "timeline-vertical" : "",
+    snapIcon ? "timeline-snap-icon" : "",
+    compact ? "timeline-compact" : "",
+    responsive ? "timeline-vertical lg:timeline-horizontal" : "",
+    className,
+  ].filter(Boolean).join(" ");
+
+  const renderItem = (item: TimelineItem, index: number) => {
+    const {
+      start,
+      middle,
+      end,
+      showLine = true,
+      lineColor = "",
+      box = false,
+      className: itemClassName = "",
+    } = item;
+
+    const itemClasses = [
+      box && start ? "timeline-box" : "",
+      box && end ? "timeline-box" : "",
+      itemClassName,
+    ].filter(Boolean).join(" ");
+
+    const lineClass = lineColor ? `${lineColor}` : "";
+
+    return createElement(
+      "li",
+      { key: item.id || index, className: itemClasses },
+      [
+        // First line before the item (except first item)
+        index > 0 && showLine 
+          ? createElement("hr", { className: lineClass })
+          : null,
+        
+        // Start content
+        start 
+          ? createElement(
+              "div",
+              { className: "timeline-start" },
+              typeof start === "string" ? start : start
+            )
+          : null,
+        
+        // Middle content (icon)
+        middle
+          ? createElement(
+              "div",
+              { className: "timeline-middle" },
+              typeof middle === "string" ? middle : middle
+            )
+          : null,
+        
+        // End content
+        end
+          ? createElement(
+              "div",
+              { className: "timeline-end" },
+              typeof end === "string" ? end : end
+            )
+          : null,
+        
+        // Line after the item (except last item)
+        index < items.length - 1 && showLine 
+          ? createElement("hr", { className: lineClass })
+          : null,
+      ].filter(Boolean)
+    );
+  };
+
+  // Reverse items if needed
+  const displayItems = reverse ? [...items].reverse() : items;
+
+  return createElement(
+    "ul",
+    { className: timelineClasses },
+    displayItems.map(renderItem)
+  );
+});
+
+// Helper for common timeline use cases
+export const TimelineExample = {
+  AppleHistory: () => {
+    const checkIcon = createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        className: "w-5 h-5",
+      },
+      createElement("path", {
+        fillRule: "evenodd",
+        d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",
+        clipRule: "evenodd",
+      })
+    );
+
+    const items: TimelineItem[] = [
+      {
+        start: "1984",
+        middle: checkIcon,
+        end: "First Macintosh computer",
+        box: true,
+        lineColor: "bg-primary",
+      },
+      {
+        start: "1998",
+        middle: checkIcon,
+        end: "iMac",
+        box: true,
+        lineColor: "bg-primary",
+      },
+      {
+        start: "2001",
+        middle: checkIcon,
+        end: "iPod",
+        box: true,
+        lineColor: "bg-primary",
+      },
+      {
+        start: "2007",
+        middle: checkIcon,
+        end: "iPhone",
+        box: true,
+      },
+      {
+        start: "2015",
+        middle: checkIcon,
+        end: "Apple Watch",
+        box: true,
+        showLine: false,
+      },
+    ];
+
+    return createElement(Timeline, { items });
+  },
+
+  DevelopmentProcess: () => {
+    const items: TimelineItem[] = [
+      {
+        middle: "📐",
+        end: "Design Phase - Wireframing and prototyping",
+        box: true,
+      },
+      {
+        middle: "⌨️",
+        end: "Development - Writing code and implementing features",
+        box: true,
+      },
+      {
+        middle: "🧪",
+        end: "Testing - Quality assurance and bug fixing",
+        box: true,
+      },
+      {
+        middle: "🚀",
+        end: "Deployment - Launching to production",
+        box: true,
+        showLine: false,
+      },
+    ];
+
+    return createElement(Timeline, { items, vertical: true });
+  },
+};
+
+export default Timeline;