@vllnt/ui 0.1.3 → 0.1.6

package/dist/components/chart/index.js

@@ -0,0 +1,3 @@
+export * from "./area-chart";
+export * from "./bar-chart";
+export * from "./line-chart";

package/dist/components/chart/line-chart.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_WIDTH = 320;
+const DEFAULT_HEIGHT = 140;
+const DEFAULT_STROKE_WIDTH = 2;
+function buildCoordinates(data, dimensions) {
+  if (data.length === 0) return [];
+  const { height, strokeWidth, width } = dimensions;
+  const values = data.map((point) => point.value);
+  const minValue = Math.min(...values);
+  const maxValue = Math.max(...values);
+  const range = maxValue - minValue || 1;
+  const safeWidth = Math.max(width - strokeWidth * 2, 0);
+  const safeHeight = Math.max(height - strokeWidth * 2, 0);
+  return data.map((point, index) => {
+    const x = data.length === 1 ? strokeWidth + safeWidth / 2 : strokeWidth + index / (data.length - 1) * safeWidth;
+    const ratio = (point.value - minValue) / range;
+    const y = safeHeight - ratio * safeHeight + strokeWidth;
+    return { x, y };
+  });
+}
+const LineChart = React.forwardRef(
+  ({
+    className,
+    color = "currentColor",
+    data,
+    gradientId = "line-chart-gradient",
+    height = DEFAULT_HEIGHT,
+    strokeWidth = DEFAULT_STROKE_WIDTH,
+    width = DEFAULT_WIDTH,
+    ...props
+  }, reference) => {
+    const canvasData = React.useMemo(
+      () => buildCoordinates(data, { height, strokeWidth, width }),
+      [data, width, height, strokeWidth]
+    );
+    if (canvasData.length === 0) {
+      return null;
+    }
+    const linePath = canvasData.map((point, index) => `${index === 0 ? "M" : "L"}${point.x},${point.y}`).join(" ");
+    const areaPath = canvasData.length === 0 ? "" : `M${canvasData[0]?.x ?? 0},${height} ${linePath} L${canvasData.at(-1)?.x ?? 0},${height}Z`;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "rounded-lg border border-border bg-background/40 p-3",
+          className
+        ),
+        ref: reference,
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            "aria-label": "Line chart",
+            className: "h-full w-full",
+            height,
+            role: "img",
+            viewBox: `0 0 ${width} ${height}`,
+            width,
+            children: [
+              /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.45" }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+              ] }) }),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: areaPath,
+                  fill: `url(#${gradientId})`,
+                  stroke: "none",
+                  vectorEffect: "non-scaling-stroke"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: linePath,
+                  fill: "none",
+                  stroke: color,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth,
+                  vectorEffect: "non-scaling-stroke"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+LineChart.displayName = "LineChart";
+export {
+  LineChart
+};

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import { cn } from "../../lib/utils";
+const Checkbox = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
+  {
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
+      className
+    ),
+    ref: reference,
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      CheckboxPrimitive.Indicator,
+      {
+        className: cn("flex items-center justify-center text-current"),
+        children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+      }
+    )
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+export {
+  Checkbox
+};

package/dist/components/checkbox/index.js

@@ -0,0 +1,4 @@
+import { Checkbox } from "./checkbox";
+export {
+  Checkbox
+};

package/dist/components/checklist/checklist.js

@@ -0,0 +1,181 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../lib/utils";
+function ChecklistItemRow({
+  isChecked,
+  item,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(
+        "w-full flex items-start gap-3 p-2 rounded-md text-left transition-colors hover:bg-muted/50",
+        isChecked && "opacity-60"
+      ),
+      onClick: onToggle,
+      type: "button",
+      children: [
+        isChecked ? /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "h-5 w-5 text-green-500 flex-shrink-0 mt-0.5",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "h-5 w-5 text-muted-foreground flex-shrink-0 mt-0.5",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "rect",
+              {
+                height: "18",
+                rx: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                width: "18",
+                x: "3",
+                y: "3"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: cn("text-sm", isChecked && "line-through"), children: item.label }),
+          item.description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: item.description }) : null
+        ] })
+      ]
+    }
+  ) });
+}
+function ChecklistHeader({
+  checked,
+  progress,
+  title,
+  total
+}) {
+  if (!title) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+    /* @__PURE__ */ jsxs("h4", { className: "font-semibold flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "h-5 w-5 text-primary",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2
+            }
+          )
+        }
+      ),
+      title
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+      checked,
+      "/",
+      total,
+      " (",
+      progress,
+      "%)"
+    ] })
+  ] });
+}
+function Checklist({
+  className,
+  items,
+  onComplete,
+  persistKey,
+  title
+}) {
+  const [checked, setChecked] = useState(() => {
+    if (typeof window !== "undefined" && persistKey) {
+      const saved = localStorage.getItem(`checklist:${persistKey}`);
+      if (saved) {
+        try {
+          return new Set(JSON.parse(saved));
+        } catch {
+        }
+      }
+    }
+    return /* @__PURE__ */ new Set();
+  });
+  const toggleItem = (id) => {
+    const newChecked = new Set(checked);
+    if (newChecked.has(id)) newChecked.delete(id);
+    else newChecked.add(id);
+    setChecked(newChecked);
+    if (persistKey) {
+      try {
+        localStorage.setItem(
+          `checklist:${persistKey}`,
+          JSON.stringify([...newChecked])
+        );
+      } catch {
+      }
+    }
+    if (newChecked.size === items.length) {
+      onComplete?.();
+    }
+  };
+  const allChecked = checked.size === items.length;
+  const progress = items.length > 0 ? Math.round(checked.size / items.length * 100) : 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("my-6 rounded-lg border bg-card p-4", className), children: [
+    /* @__PURE__ */ jsx(
+      ChecklistHeader,
+      {
+        checked: checked.size,
+        progress,
+        title,
+        total: items.length
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "h-1 bg-muted rounded-full mb-4 overflow-hidden", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "h-full transition-all duration-300",
+          allChecked ? "bg-green-500" : "bg-primary"
+        ),
+        style: { width: `${progress}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: items.map((item) => /* @__PURE__ */ jsx(
+      ChecklistItemRow,
+      {
+        isChecked: checked.has(item.id),
+        item,
+        onToggle: () => {
+          toggleItem(item.id);
+        }
+      },
+      item.id
+    )) }),
+    allChecked ? /* @__PURE__ */ jsx("div", { className: "mt-4 p-2 rounded bg-green-500/10 text-green-700 dark:text-green-300 text-sm text-center", children: "All items completed!" }) : null
+  ] });
+}
+export {
+  Checklist
+};

package/dist/components/checklist/index.js

@@ -0,0 +1,6 @@
+import {
+  Checklist
+} from "./checklist";
+export {
+  Checklist
+};

package/dist/components/code-block/code-block.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import {
+  oneDark,
+  oneLight
+} from "react-syntax-highlighter/dist/esm/styles/prism";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+function extractTextFromChildren(children) {
+  if (typeof children === "string") {
+    return children;
+  }
+  if (typeof children === "number") {
+    return String(children);
+  }
+  if (Array.isArray(children)) {
+    return children.map(extractTextFromChildren).join("");
+  }
+  if (children && typeof children === "object" && "props" in children && children.props && typeof children.props === "object" && "children" in children.props) {
+    return extractTextFromChildren(children.props.children);
+  }
+  return String(children ?? "");
+}
+function CodeBlock({
+  children,
+  className,
+  language = "typescript",
+  showLanguage = false
+}) {
+  const [copied, setCopied] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const { systemTheme, theme } = useTheme();
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const resolvedTheme = theme === "system" ? systemTheme : theme;
+  const isDark = resolvedTheme === "dark";
+  const codeStyle = isDark ? oneDark : oneLight;
+  const code = extractTextFromChildren(children);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2e3);
+  };
+  if (!mounted) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative w-full overflow-hidden rounded-md border bg-background",
+          className
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-x-auto", children: [
+          /* @__PURE__ */ jsx("pre", { className: "p-4 text-sm font-mono bg-background", children: /* @__PURE__ */ jsx("code", { children: code }) }),
+          /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-2 flex items-center gap-2", children: [
+            showLanguage ? /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-muted-foreground uppercase tracking-wider", children: language }) : null,
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: "h-8 w-8",
+                onClick: handleCopy,
+                size: "icon",
+                variant: "ghost",
+                children: /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative w-full overflow-hidden rounded-md border bg-background",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-x-auto", children: [
+        /* @__PURE__ */ jsx(
+          SyntaxHighlighter,
+          {
+            codeTagProps: {
+              className: "font-mono text-sm"
+            },
+            customStyle: {
+              background: "hsl(var(--background))",
+              fontSize: "0.875rem",
+              margin: 0,
+              minWidth: "fit-content",
+              padding: "1rem"
+            },
+            language,
+            style: codeStyle,
+            children: code
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-2 flex items-center gap-2", children: [
+          showLanguage ? /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-muted-foreground uppercase tracking-wider", children: language }) : null,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "h-8 w-8",
+              onClick: handleCopy,
+              size: "icon",
+              variant: "ghost",
+              children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  CodeBlock
+};

package/dist/components/code-block/index.js

@@ -0,0 +1,4 @@
+import { CodeBlock } from "./code-block";
+export {
+  CodeBlock
+};

package/dist/components/code-playground/code-playground.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Check, Code, Copy, FileCode } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+function CodeLine({ highlightLines, line, lineNumber }) {
+  const isHighlighted = highlightLines.includes(lineNumber);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex", isHighlighted && "bg-primary/10 -mx-4 px-4"), children: [
+    /* @__PURE__ */ jsx("span", { className: "select-none w-8 text-right pr-4 text-muted-foreground/50", children: lineNumber }),
+    /* @__PURE__ */ jsx("span", { children: line })
+  ] });
+}
+function CodePlayground({
+  children,
+  description,
+  filename,
+  highlightLines = [],
+  language = "typescript",
+  showLineNumbers = false,
+  title
+}) {
+  const [copied, setCopied] = useState(false);
+  const code = typeof children === "string" ? children : "";
+  const lines = code.split("\n");
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2e3);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-card overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b bg-muted/30", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded bg-primary/10", children: /* @__PURE__ */ jsx(Code, { className: "h-4 w-4 text-primary" }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-semibold text-sm", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        filename ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(FileCode, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono", children: filename })
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "h-8 w-8",
+            onClick: handleCopy,
+            size: "icon",
+            variant: "ghost",
+            children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "relative overflow-x-auto", children: /* @__PURE__ */ jsx("pre", { className: "p-4 text-sm font-mono", children: showLineNumbers ? /* @__PURE__ */ jsx("code", { children: lines.map((line, index) => /* @__PURE__ */ jsx(
+      CodeLine,
+      {
+        highlightLines,
+        line,
+        lineNumber: index + 1
+      },
+      index
+    )) }) : /* @__PURE__ */ jsx("code", { children: code }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-t bg-muted/30", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-muted-foreground uppercase tracking-wider", children: language }) })
+  ] });
+}
+function FileTree({
+  children,
+  title = "File Structure"
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-card overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-b bg-muted/30", children: /* @__PURE__ */ jsxs("h4", { className: "font-semibold text-sm flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(FileCode, { className: "h-4 w-4" }),
+      title
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm [&>ul]:m-0 [&>ul]:list-none [&_ul]:ml-4 [&_ul]:list-none [&_li]:text-muted-foreground", children })
+  ] });
+}
+export {
+  CodePlayground,
+  FileTree
+};

package/dist/components/code-playground/index.js

@@ -0,0 +1,8 @@
+import {
+  CodePlayground,
+  FileTree
+} from "./code-playground";
+export {
+  CodePlayground,
+  FileTree
+};

package/dist/components/collapsible/collapsible.js

@@ -0,0 +1,10 @@
+"use client";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+};

package/dist/components/collapsible/index.js

@@ -0,0 +1,10 @@
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "./collapsible";
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+};