@melony/ui-shadcn 0.1.6 → 0.1.8

package/dist/index.js

@@ -1,90 +1,28 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Separator as Separator$1 } from '@base-ui/react/separator';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMelony } from '@melony/react';
-import * as React3 from 'react';
-import { createContext, useState, useRef, useEffect, useMemo, useContext } from 'react';
-import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
 import * as LucideIcons from 'lucide-react';
-import { mergeProps } from '@base-ui/react/merge-props';
-import { useRender } from '@base-ui/react/use-render';
+import '@base-ui/react/merge-props';
+import '@base-ui/react/use-render';
 import { cva } from 'class-variance-authority';
+import * as React2 from 'react';
+import { createContext, useState, useRef, useEffect, useContext } from 'react';
 import { Input as Input$1 } from '@base-ui/react/input';
 import { Select as Select$1 } from '@base-ui/react/select';
 import { createPortal } from 'react-dom';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { MelonyRenderer } from '@melony/ui-kit';
-import { Menu } from '@base-ui/react/menu';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import remarkBreaks from 'remark-breaks';
+import '@base-ui/react/menu';
+import 'react-markdown';
+import 'remark-gfm';
+import 'remark-breaks';
 
 // src/lib/utils.ts
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function Card({
-  className,
-  size = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card",
-      "data-size": size,
-      className: cn(
-        "ring-foreground/10 bg-card text-card-foreground gap-2 overflow-hidden rounded-2xl py-2 text-sm ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-header",
-      className: cn(
-        "gap-2 rounded-t-xl px-4 group-data-[size=sm]/card:px-4 [.border-b]:pb-2 group-data-[size=sm]/card:[.border-b]:pb-4 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-title",
-      className: cn("text-base font-medium", className),
-      ...props
-    }
-  );
-}
-function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-description",
-      className: cn("text-muted-foreground text-sm", className),
-      ...props
-    }
-  );
-}
-function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-content",
-      className: cn("px-6 group-data-[size=sm]/card:px-4", className),
-      ...props
-    }
-  );
-}
 
 // src/lib/theme-utils.ts
 var paddingMap = {
@@ -114,15 +52,6 @@ var paddingHorizontalMap = {
   xl: "px-8",
   xxl: "px-12"
 };
-var interactivePaddingMap = {
-  none: "p-0",
-  xs: "py-1 px-2",
-  sm: "py-1.5 px-3",
-  md: "py-2 px-4",
-  lg: "py-3 px-6",
-  xl: "py-4 px-8",
-  xxl: "py-6 px-10"
-};
 var marginMap = {
   none: "m-0",
   xs: "m-1",
@@ -281,35 +210,6 @@ var resolveUIStyle = (property, value) => {
     [property]: `color-mix(in oklch, ${variable}, transparent ${100 - opacity * 100}%)`
   };
 };
-var Card2 = ({
-  children,
-  title,
-  subtitle,
-  background,
-  padding = "md",
-  radius = "md",
-  shadow = "md"
-}) => {
-  return /* @__PURE__ */ jsxs(
-    Card,
-    {
-      className: cn(
-        "w-full max-w-full relative overflow-hidden transition-all duration-200",
-        background && colorBgMap[background],
-        radius && radiusMap[radius],
-        shadow && shadowMap[shadow],
-        !shadow && "shadow-sm border border-border/40"
-      ),
-      children: [
-        (title || subtitle) && /* @__PURE__ */ jsxs(CardHeader, { className: "py-2.5 px-3 space-y-0.5 border-b border-border/40 bg-muted/5", children: [
-          title && /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-semibold tracking-tight leading-none", children: title }),
-          subtitle && /* @__PURE__ */ jsx(CardDescription, { className: "text-xs leading-tight text-muted-foreground/80", children: subtitle })
-        ] }),
-        /* @__PURE__ */ jsx(CardContent, { className: cn("flex flex-col gap-2", paddingMap[padding]), children })
-      ]
-    }
-  );
-};
 var Row = (props) => {
   const {
     children,
@@ -392,14 +292,22 @@ var Box = (props) => {
     shadow = "none",
     group = false,
     flex = void 0,
-    overflow = "hidden"
+    overflow = "hidden",
+    onClickAction
   } = props;
+  const { send } = useMelony();
   const [baseBgColor] = (background || "").split("/");
   const [baseBorderColor] = (borderColor || "").split("/");
   const dynamicStyles = {
     ...resolveUIStyle("backgroundColor", background),
     ...resolveUIStyle("borderColor", borderColor)
   };
+  const isInteractive = !!onClickAction;
+  const handleClick = () => {
+    if (onClickAction) {
+      send(onClickAction);
+    }
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -418,7 +326,8 @@ var Box = (props) => {
         widthMap[width],
         height === "full" && "h-full",
         shadowMap[shadow],
-        group && "group"
+        group && "group",
+        isInteractive && "cursor-pointer"
       ),
       style: {
         ...dynamicStyles,
@@ -426,6 +335,7 @@ var Box = (props) => {
         width: width && typeof width === "number" ? `${width}px` : void 0,
         overflow
       },
+      onClick: isInteractive ? handleClick : void 0,
       children
     }
   );
@@ -509,278 +419,41 @@ var Divider = ({
     }
   );
 };
-var List = ({ children, padding = "none", gap = "none", flex, overflow, width }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "flex flex-col list-none m-0",
-        paddingMap[padding],
-        gapMap[gap],
-        widthMap[width]
-      ),
-      style: { flex, overflow, width: width && typeof width === "number" ? `${width}px` : void 0 },
-      children
-    }
-  );
-};
-var ListItem = ({
-  children,
-  onClickAction,
-  gap = "sm",
-  padding = "sm",
-  background,
-  radius = "md",
-  align = "center"
+var Image = ({
+  src,
+  alt,
+  width = "auto",
+  height,
+  radius = "none",
+  objectFit = "cover"
 }) => {
-  const { send } = useMelony();
-  const isInteractive = !!onClickAction;
-  const handleClick = () => {
-    if (onClickAction) {
-      send(onClickAction);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      onClick: isInteractive ? handleClick : void 0,
-      className: cn(
-        "flex flex-row transition-colors text-sm",
-        interactivePaddingMap[padding],
-        background ? colorBgMap[background] : isInteractive && "hover:bg-muted",
-        radiusMap[radius],
-        isInteractive ? "cursor-pointer" : "cursor-default"
-      ),
-      children: /* @__PURE__ */ jsx(Row, { align, gap, children })
-    }
-  );
-};
-function Dialog({ ...props }) {
-  return /* @__PURE__ */ jsx(Dialog$1.Root, { "data-slot": "dialog", ...props });
-}
-function DialogTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(Dialog$1.Trigger, { "data-slot": "dialog-trigger", ...props });
-}
-function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "dialog-portal", ...props });
-}
-function DialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Dialog$1.Backdrop,
-    {
-      "data-slot": "dialog-overlay",
-      className: cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-200 supports-backdrop-filter:backdrop-blur-sm fixed inset-0 isolate z-50",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsx(
-      Dialog$1.Popup,
-      {
-        "data-slot": "dialog-content",
-        className: cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg outline-none",
-          className
-        ),
-        ...props
-      }
-    )
-  ] });
-}
-function DialogClose({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Dialog$1.Close,
-    {
-      "data-slot": "dialog-close",
-      className: cn(
-        "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var Icon = (props) => {
-  const {
-    name,
-    size = "md",
-    color,
-    className
-  } = props;
-  const sizeMap = {
-    sm: "14px",
-    md: "18px",
-    lg: "24px"
-  };
-  const resolvedSize = typeof size === "number" ? `${size}px` : sizeMap[size] || "18px";
-  const LucideIcon = LucideIcons[name];
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "inline-flex items-center justify-center leading-none",
-        color && colorTextMap[color],
-        className
+        "overflow-hidden",
+        typeof width === "string" && widthMap[width],
+        radiusMap[radius]
       ),
       style: {
-        fontSize: resolvedSize,
-        width: resolvedSize,
-        height: resolvedSize,
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center"
+        width: typeof width === "number" ? `${width}px` : void 0,
+        height: typeof height === "number" ? `${height}px` : height
       },
-      children: LucideIcon ? /* @__PURE__ */ jsx(LucideIcon, { size: resolvedSize }) : name
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt,
+          className: cn(
+            "block w-full",
+            height ? "h-full" : "h-auto",
+            objectFit === "cover" ? "object-cover" : objectFit === "contain" ? "object-contain" : "object-fill"
+          )
+        }
+      )
     }
   );
 };
-var Image = ({
-  src,
-  alt,
-  width = "auto",
-  height,
-  radius = "md",
-  objectFit = "cover"
-}) => {
-  const [hasError, setHasError] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-  const [open, setOpen] = useState(false);
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [gallery, setGallery] = useState([]);
-  const triggerRef = useRef(null);
-  useEffect(() => {
-    if (open && triggerRef.current) {
-      let parent = triggerRef.current.parentElement;
-      while (parent && parent.parentElement && parent.parentElement.children.length === 1) {
-        parent = parent.parentElement;
-      }
-      const container = parent?.parentElement;
-      if (container) {
-        const foundImgs = Array.from(container.querySelectorAll("img")).map((img) => ({
-          src: img.getAttribute("src") || "",
-          alt: img.getAttribute("alt") || ""
-        })).filter((v, i, a) => a.findIndex((t) => t.src === v.src) === i);
-        setGallery(foundImgs);
-        const idx = foundImgs.findIndex((img) => img.src === src);
-        setCurrentIndex(idx >= 0 ? idx : 0);
-      }
-    }
-  }, [open, src]);
-  const navigate = (dir) => {
-    setCurrentIndex((prev) => (prev + dir + gallery.length) % gallery.length);
-  };
-  const currentImage = gallery[currentIndex] || { src, alt };
-  const hasMultiple = gallery.length > 1;
-  const handleError = () => {
-    setHasError(true);
-    setIsLoading(false);
-  };
-  const handleLoad = () => {
-    setIsLoading(false);
-  };
-  if (hasError) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "flex items-center justify-center bg-muted text-muted-foreground",
-          widthMap[width],
-          radiusMap[radius]
-        ),
-        style: { height: height || "100px" },
-        children: /* @__PURE__ */ jsx("span", { className: "text-[10px]", children: "Error" })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(DialogTrigger, { children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: triggerRef,
-        className: cn(
-          "relative overflow-hidden cursor-pointer",
-          widthMap[width],
-          radiusMap[radius]
-        ),
-        style: { height },
-        children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src,
-              alt,
-              onError: handleError,
-              onLoad: handleLoad,
-              className: cn(
-                "block w-full transition-opacity duration-200 hover:opacity-90",
-                isLoading ? "opacity-0" : "opacity-100",
-                objectFit === "cover" ? "object-cover" : objectFit === "contain" ? "object-contain" : "object-fill",
-                height ? "h-full" : "h-auto"
-              )
-            }
-          ),
-          isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted animate-pulse" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      DialogContent,
-      {
-        className: "max-w-[90vw] max-h-[90vh] p-0 bg-transparent border-none shadow-none outline-none",
-        onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center group/lightbox", children: [
-          /* @__PURE__ */ jsx(DialogClose, { className: "absolute -top-12 right-0 text-white hover:text-gray-300 transition-colors z-50 bg-black/50 rounded-full p-2", children: /* @__PURE__ */ jsx(Icon, { name: "\u274C", size: 20 }) }),
-          hasMultiple && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  navigate(-1);
-                },
-                className: "absolute left-4 z-50 p-3 bg-black/40 hover:bg-black/60 text-white rounded-full transition-all opacity-0 group-hover/lightbox:opacity-100",
-                children: /* @__PURE__ */ jsx(Icon, { name: "\u25C0\uFE0F", size: 28 })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  navigate(1);
-                },
-                className: "absolute right-4 z-50 p-3 bg-black/40 hover:bg-black/60 text-white rounded-full transition-all opacity-0 group-hover/lightbox:opacity-100",
-                children: /* @__PURE__ */ jsx(Icon, { name: "\u25B6\uFE0F", size: 28 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: currentImage.src,
-              alt: currentImage.alt || alt || "Enlarged image",
-              className: "max-w-full max-h-[85vh] object-contain rounded-lg shadow-2xl"
-            }
-          ),
-          hasMultiple && /* @__PURE__ */ jsxs("div", { className: "absolute -bottom-10 left-1/2 -translate-x-1/2 text-white bg-black/50 px-3 py-1 rounded-full text-sm font-medium", children: [
-            currentIndex + 1,
-            " / ",
-            gallery.length
-          ] })
-        ] })
-      }
-    )
-  ] });
-};
 var Video = ({
   src,
   poster,
@@ -825,7 +498,41 @@ var Video = ({
     }
   );
 };
-var badgeVariants = cva(
+var Icon = (props) => {
+  const {
+    name,
+    size = "md",
+    color,
+    className
+  } = props;
+  const sizeMap = {
+    sm: "14px",
+    md: "18px",
+    lg: "24px"
+  };
+  const resolvedSize = typeof size === "number" ? `${size}px` : sizeMap[size] || "18px";
+  const LucideIcon = LucideIcons[name];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center justify-center leading-none",
+        color && colorTextMap[color],
+        className
+      ),
+      style: {
+        fontSize: resolvedSize,
+        width: resolvedSize,
+        height: resolvedSize,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: LucideIcon ? /* @__PURE__ */ jsx(LucideIcon, { size: resolvedSize }) : name
+    }
+  );
+};
+cva(
   "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
   {
     variants: {
@@ -843,273 +550,6 @@ var badgeVariants = cva(
     }
   }
 );
-function Badge({
-  className,
-  variant = "default",
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "span",
-    props: mergeProps(
-      {
-        className: cn(badgeVariants({ className, variant }))
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "badge",
-      variant
-    }
-  });
-}
-var Badge2 = ({
-  label,
-  variant = "primary",
-  size = "md"
-}) => {
-  const variantMap = {
-    primary: "default",
-    secondary: "secondary",
-    danger: "destructive",
-    success: "default",
-    warning: "secondary",
-    outline: "outline"
-  };
-  const sizeClasses = {
-    sm: "text-[10px] px-1.5 py-0",
-    md: "text-xs px-2.5 py-0.5",
-    lg: "text-sm px-3 py-1"
-  };
-  return /* @__PURE__ */ jsx(
-    Badge,
-    {
-      variant: variantMap[variant] || "default",
-      className: sizeClasses[size],
-      children: label
-    }
-  );
-};
-var Chart = ({
-  data,
-  chartType = "bar",
-  title,
-  height = 250,
-  showValues = false,
-  showGrid = false,
-  showTooltips = true
-}) => {
-  const [tooltip, setTooltip] = useState(null);
-  if (!Array.isArray(data)) {
-    return /* @__PURE__ */ jsx("div", { className: "p-4 text-destructive border border-destructive/20 rounded-md bg-destructive/5 text-sm", children: "Error: Chart data must be an array" });
-  }
-  const maxValue = Math.max(...data.map((d) => d.value), 1);
-  const padding = { top: 40, right: 20, bottom: 40, left: 20 };
-  const chartHeight = height;
-  const chartWidth = 600;
-  const defaultColors = [
-    "hsl(var(--primary))",
-    "hsl(var(--chart-1, 217 91% 60%))",
-    "hsl(var(--chart-2, 142 71% 45%))",
-    "hsl(var(--chart-3, 31 92% 55%))",
-    "hsl(var(--chart-4, 346 84% 61%))",
-    "hsl(var(--chart-5, 271 81% 56%))"
-  ];
-  const getColor = (index, color) => {
-    if (color) return color;
-    return defaultColors[index % defaultColors.length];
-  };
-  const renderGrid = () => {
-    if (!showGrid) return null;
-    return [0, 0.25, 0.5, 0.75, 1].map((fraction, i) => /* @__PURE__ */ jsx(
-      "line",
-      {
-        x1: padding.left,
-        y1: padding.top + chartHeight * (1 - fraction),
-        x2: chartWidth - padding.right,
-        y2: padding.top + chartHeight * (1 - fraction),
-        stroke: "currentColor",
-        className: "text-border",
-        strokeDasharray: "4,4",
-        strokeOpacity: 0.5
-      },
-      i
-    ));
-  };
-  const renderTooltip = () => {
-    if (!tooltip || !tooltip.visible) return null;
-    return /* @__PURE__ */ jsxs("g", { className: "pointer-events-none", children: [
-      /* @__PURE__ */ jsx(
-        "rect",
-        {
-          x: tooltip.x - 40,
-          y: tooltip.y - 45,
-          width: 80,
-          height: 40,
-          fill: "hsl(var(--popover))",
-          stroke: "hsl(var(--border))",
-          strokeWidth: 1,
-          rx: 6,
-          className: "shadow-md"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "text",
-        {
-          x: tooltip.x,
-          y: tooltip.y - 28,
-          textAnchor: "middle",
-          className: "fill-popover-foreground text-[10px] font-semibold",
-          children: tooltip.value
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "text",
-        {
-          x: tooltip.x,
-          y: tooltip.y - 14,
-          textAnchor: "middle",
-          className: "fill-muted-foreground text-[9px]",
-          children: tooltip.label
-        }
-      )
-    ] });
-  };
-  const renderBarChart = () => {
-    const totalBarSpace = chartWidth - padding.left - padding.right;
-    const barSpacing = data.length > 1 ? totalBarSpace * 0.1 / data.length : 0;
-    const actualBarWidth = (totalBarSpace - barSpacing * (data.length + 1)) / data.length;
-    return /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        viewBox: `0 0 ${chartWidth} ${chartHeight + padding.bottom}`,
-        className: "w-full h-auto overflow-visible",
-        children: [
-          renderGrid(),
-          data.map((item, index) => {
-            const barHeight = item.value / maxValue * chartHeight;
-            const x = padding.left + barSpacing + index * (actualBarWidth + barSpacing);
-            const y = padding.top + chartHeight - barHeight;
-            return /* @__PURE__ */ jsxs("g", { children: [
-              /* @__PURE__ */ jsx(
-                "rect",
-                {
-                  x,
-                  y,
-                  width: actualBarWidth,
-                  height: barHeight,
-                  fill: getColor(index, item.color),
-                  rx: 4,
-                  onMouseEnter: () => showTooltips && setTooltip({
-                    visible: true,
-                    x: x + actualBarWidth / 2,
-                    y: y - 5,
-                    label: item.label,
-                    value: item.value
-                  }),
-                  onMouseLeave: () => setTooltip({
-                    visible: false,
-                    x: 0,
-                    y: 0,
-                    label: "",
-                    value: 0
-                  }),
-                  className: "transition-all hover:opacity-80 cursor-pointer"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "text",
-                {
-                  x: x + actualBarWidth / 2,
-                  y: padding.top + chartHeight + 20,
-                  textAnchor: "middle",
-                  className: "fill-muted-foreground text-[10px]",
-                  children: item.label
-                }
-              )
-            ] }, index);
-          }),
-          showTooltips && renderTooltip()
-        ]
-      }
-    );
-  };
-  const renderLineChart = () => {
-    const points = data.map((item, index) => ({
-      x: padding.left + index / Math.max(data.length - 1, 1) * (chartWidth - padding.left - padding.right),
-      y: padding.top + chartHeight - item.value / maxValue * chartHeight,
-      ...item
-    }));
-    const pathData = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
-    return /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        viewBox: `0 0 ${chartWidth} ${chartHeight + padding.bottom}`,
-        className: "w-full h-auto overflow-visible",
-        children: [
-          renderGrid(),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: pathData,
-              fill: "none",
-              stroke: getColor(0),
-              strokeWidth: 3,
-              className: "transition-all"
-            }
-          ),
-          points.map((point, index) => /* @__PURE__ */ jsxs("g", { children: [
-            /* @__PURE__ */ jsx(
-              "circle",
-              {
-                cx: point.x,
-                cy: point.y,
-                r: 5,
-                fill: getColor(index, point.color),
-                stroke: "hsl(var(--background))",
-                strokeWidth: 2,
-                onMouseEnter: () => showTooltips && setTooltip({
-                  visible: true,
-                  x: point.x,
-                  y: point.y - 5,
-                  label: point.label,
-                  value: point.value
-                }),
-                onMouseLeave: () => setTooltip({ visible: false, x: 0, y: 0, label: "", value: 0 }),
-                className: "hover:r-6 transition-all cursor-pointer"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "text",
-              {
-                x: point.x,
-                y: padding.top + chartHeight + 20,
-                textAnchor: "middle",
-                className: "fill-muted-foreground text-[10px]",
-                children: point.label
-              }
-            )
-          ] }, index)),
-          showTooltips && renderTooltip()
-        ]
-      }
-    );
-  };
-  const renderChart = () => {
-    switch (chartType) {
-      case "line":
-        return renderLineChart();
-      case "bar":
-      default:
-        return renderBarChart();
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "py-4 w-full", children: [
-    title && /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold mb-4 text-center", children: title }),
-    renderChart()
-  ] });
-};
 var Text = (props) => {
   const {
     value,
@@ -1580,11 +1020,11 @@ var Checkbox = ({
 var Hidden = ({ name, value }) => {
   return /* @__PURE__ */ jsx("input", { type: "hidden", name, value });
 };
-var PopoverContext = React3.createContext(
+var PopoverContext = React2.createContext(
   void 0
 );
 function usePopoverContext() {
-  const context = React3.useContext(PopoverContext);
+  const context = React2.useContext(PopoverContext);
   if (!context) {
     throw new Error("Popover components must be used within a Popover");
   }
@@ -1596,10 +1036,10 @@ function Popover({
   open: controlledOpen,
   onOpenChange
 }) {
-  const [internalOpen, setInternalOpen] = React3.useState(defaultOpen);
-  const triggerRef = React3.useRef(null);
+  const [internalOpen, setInternalOpen] = React2.useState(defaultOpen);
+  const triggerRef = React2.useRef(null);
   const open = controlledOpen ?? internalOpen;
-  const setOpen = React3.useCallback(
+  const setOpen = React2.useCallback(
     (newOpen) => {
       if (controlledOpen === void 0) {
         setInternalOpen(newOpen);
@@ -1608,7 +1048,7 @@ function Popover({
     },
     [controlledOpen, onOpenChange]
   );
-  const value = React3.useMemo(
+  const value = React2.useMemo(
     () => ({
       open,
       setOpen,
@@ -1618,15 +1058,15 @@ function Popover({
   );
   return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children });
 }
-var PopoverTrigger = React3.forwardRef(
+var PopoverTrigger = React2.forwardRef(
   ({ asChild, className, children, ...props }, ref) => {
     const { setOpen, triggerRef } = usePopoverContext();
     const handleClick = (e) => {
       setOpen(true);
       props.onClick?.(e);
     };
-    if (asChild && React3.isValidElement(children)) {
-      return React3.cloneElement(children, {
+    if (asChild && React2.isValidElement(children)) {
+      return React2.cloneElement(children, {
         ref: (node) => {
           triggerRef.current = node;
           if (typeof children.ref === "function") {
@@ -1658,7 +1098,7 @@ var PopoverTrigger = React3.forwardRef(
   }
 );
 PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React3.forwardRef(
+var PopoverContent = React2.forwardRef(
   ({
     className,
     side = "bottom",
@@ -1669,9 +1109,9 @@ var PopoverContent = React3.forwardRef(
     ...props
   }, ref) => {
     const { open, setOpen, triggerRef } = usePopoverContext();
-    const [position, setPosition] = React3.useState({ top: 0, left: 0 });
-    const contentRef = React3.useRef(null);
-    React3.useEffect(() => {
+    const [position, setPosition] = React2.useState({ top: 0, left: 0 });
+    const contentRef = React2.useRef(null);
+    React2.useEffect(() => {
       if (!open || !triggerRef.current) return;
       const updatePosition = () => {
         if (!triggerRef.current || !contentRef.current) return;
@@ -1732,7 +1172,7 @@ var PopoverContent = React3.forwardRef(
         window.removeEventListener("scroll", updatePosition, true);
       };
     }, [open, side, align, sideOffset, alignOffset, triggerRef]);
-    React3.useEffect(() => {
+    React2.useEffect(() => {
       if (!open) return;
       const handleClickOutside = (event) => {
         if (contentRef.current && !contentRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
@@ -2191,287 +1631,6 @@ var Form = ({ children, onSubmitAction, gap = "md" }) => {
     }
   ) }) });
 };
-function DropdownMenu({ ...props }) {
-  return /* @__PURE__ */ jsx(Menu.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
-}
-function DropdownMenuContent({
-  align = "start",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 4,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
-    Menu.Positioner,
-    {
-      className: "isolate z-50 outline-none",
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      children: /* @__PURE__ */ jsx(
-        Menu.Popup,
-        {
-          "data-slot": "dropdown-menu-content",
-          className: cn(
-            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
-            className
-          ),
-          ...props
-        }
-      )
-    }
-  ) });
-}
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Menu.Item,
-    {
-      "data-slot": "dropdown-menu-item",
-      "data-inset": inset,
-      "data-variant": variant,
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var Dropdown = ({ items = [], children }) => {
-  const { send } = useMelony();
-  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(
-      DropdownMenuTrigger,
-      {
-        render: (props) => /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "outline",
-            size: "icon-sm",
-            ...props,
-            onClick: (e) => {
-              e.stopPropagation();
-              props.onClick?.(e);
-            },
-            children: children || /* @__PURE__ */ jsx(Icon, { name: "\u22EE", size: "sm" })
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: cn("w-32"), children: items.map((item, i) => /* @__PURE__ */ jsxs(
-      DropdownMenuItem,
-      {
-        onClick: (e) => {
-          e.stopPropagation();
-          if (item.onClickAction) {
-            send(item.onClickAction);
-          }
-        },
-        children: [
-          item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm" }),
-          /* @__PURE__ */ jsx("span", { className: item.icon ? "ml-2" : "", children: item.label })
-        ]
-      },
-      `${item.label}-${i}`
-    )) })
-  ] });
-};
-function Composer({
-  value,
-  onChange,
-  onSubmit,
-  onStop,
-  placeholder = "Type a message...",
-  streaming,
-  className,
-  autoFocus = false
-}) {
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      onSubmit();
-    }
-  };
-  return /* @__PURE__ */ jsx("div", { className: cn("relative flex flex-col w-full", className), children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col w-full border-border/60 border rounded-[26px] bg-muted/30 focus-within:bg-background focus-within:border-border focus-within:ring-[3px] focus-within:ring-primary/5 transition-all p-1.5 px-2", children: [
-    /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        value,
-        onChange: (e) => onChange(e.target.value),
-        onKeyDown: handleKeyDown,
-        placeholder,
-        className: "min-h-[44px] max-h-[200px] border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 px-3 py-2 text-[15px] resize-none leading-relaxed",
-        autoFocus
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center pb-1", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 px-2" }),
-      streaming ? /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon",
-          className: "h-8 w-8 rounded-full border border-border/40 hover:bg-muted",
-          onClick: () => onStop?.(),
-          children: /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 bg-foreground rounded-[1px]" })
-        }
-      ) : /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "submit",
-          disabled: !value.trim(),
-          size: "icon",
-          className: cn(
-            "h-8 w-8 rounded-full transition-all duration-300",
-            value.trim() ? "bg-foreground text-background hover:opacity-90" : "bg-muted text-muted-foreground opacity-50"
-          ),
-          onClick: () => onSubmit(),
-          children: /* @__PURE__ */ jsx(Icon, { name: "ArrowUp", size: 18 })
-        }
-      )
-    ] })
-  ] }) });
-}
-function MessageContent({ content }) {
-  const elements = [];
-  let currentTextBlock = [];
-  const flushText = (key) => {
-    if (currentTextBlock.length > 0) {
-      elements.push(
-        /* @__PURE__ */ jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none break-words [&>p]:mb-2 [&>p:last-child]:mb-0 [&>ul]:list-disc [&>ul]:pl-4 [&>ol]:list-decimal [&>ol]:pl-4 [&>li]:mb-1 [&>h1]:text-xl [&>h1]:font-bold [&>h1]:mb-2 [&>h2]:text-lg [&>h2]:font-bold [&>h2]:mb-2 [&>h3]:text-base [&>h3]:font-bold [&>h3]:mb-2 [&>pre]:bg-muted [&>pre]:p-2 [&>pre]:rounded [&>pre]:overflow-x-auto [&>pre]:mb-2 [&>code]:bg-muted [&>code]:px-1 [&>code]:py-0.5 [&>code]:rounded [&>code]:font-mono [&>code]:text-sm", children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, remarkBreaks], children: currentTextBlock.join("") }) }, `text-${key}`)
-      );
-      currentTextBlock = [];
-    }
-  };
-  content.forEach((event, index) => {
-    const key = event.id || index;
-    if (event.type === "ui") {
-      flushText(index);
-      elements.push(/* @__PURE__ */ jsx(MelonyRenderer, { node: event.data }, key));
-    } else if (event.type === "assistant:text-delta") {
-      currentTextBlock.push(event.data.delta || "");
-    } else if (event.type === "assistant:text" || event.type === "user:text") {
-      const text = event.data.content || event.data.text || "";
-      if (text) {
-        currentTextBlock.push(text);
-      }
-    }
-  });
-  flushText(content.length);
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-2.5", children: elements });
-}
-function MessageBubble({ message }) {
-  const isUser = message.role === "user";
-  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col w-full", isUser ? "items-end" : "items-start"), children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "flex flex-col items-start max-w-[85%] transition-all duration-200",
-        isUser ? "bg-muted/80 text-foreground px-3 py-1.5 rounded-lg" : "px-0 py-0 text-foreground w-full"
-      ),
-      children: /* @__PURE__ */ jsx(MessageContent, { content: message.content })
-    }
-  ) });
-}
-function MessageList({
-  messages,
-  streaming,
-  error,
-  loadingStatus
-}) {
-  if (messages.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-    messages.map((message, index) => /* @__PURE__ */ jsx(MessageBubble, { message }, index)),
-    streaming && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: loadingStatus?.message || "Processing..." }),
-    error && /* @__PURE__ */ jsx("div", { className: "text-sm text-destructive", children: error.message })
-  ] });
-}
-function Thread({
-  placeholder = "Type a message...",
-  messages: propMessages,
-  autoFocus = false,
-  children
-}) {
-  const {
-    streaming,
-    error,
-    send,
-    stop,
-    messages: melonyMessages
-  } = useMelony();
-  const messages = useMemo(() => {
-    return (propMessages || melonyMessages || []).filter(
-      (msg) => ["user", "assistant"].includes(msg.role)
-    );
-  }, [propMessages, melonyMessages]);
-  const [input, setInput] = useState("");
-  const messagesEndRef = useRef(null);
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
-  const handleSubmit = async (state, overrideInput) => {
-    const text = (overrideInput ?? input).trim();
-    const hasFiles = state?.files && Array.isArray(state.files) && state.files.length > 0;
-    if (!text && !hasFiles || streaming) return;
-    if (!overrideInput) setInput("");
-    await send({
-      type: "user:text",
-      data: { content: text || "" }
-    });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col h-full flex-1 overflow-hidden", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 pb-36", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "max-w-3xl mx-auto w-full p-4"
-          ),
-          children: messages.length === 0 && !streaming && children ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start justify-center min-h-[50vh] space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-1000", children }) : /* @__PURE__ */ jsx(
-            MessageList,
-            {
-              messages,
-              streaming,
-              error,
-              loadingStatus: {
-                message: "Processing..."
-              }
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 p-4 w-full bg-gradient-to-t from-background via-background/90 to-transparent", children: /* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto", children: [
-      /* @__PURE__ */ jsx(
-        Composer,
-        {
-          value: input,
-          onChange: setInput,
-          onSubmit: handleSubmit,
-          onStop: stop,
-          placeholder,
-          streaming,
-          autoFocus
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "mt-2 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground/60", children: "Melony can make mistakes. Check important info." }) })
-    ] }) })
-  ] });
-}
 var ThemeContext = createContext(void 0);
 function ThemeProvider({ children }) {
   const [theme, setThemeState] = useState("system");
@@ -2524,41 +1683,14 @@ function useTheme() {
   }
   return context;
 }
-function ThemeToggle() {
-  const { theme, setTheme } = useTheme();
-  const themes = [
-    { name: "light", icon: "Sun", label: "Light" },
-    { name: "dark", icon: "Moon", label: "Dark" },
-    { name: "system", icon: "Monitor", label: "System" }
-  ];
-  return /* @__PURE__ */ jsx("div", { className: "inline-flex items-center gap-1 rounded-full border bg-muted/50 p-1", children: themes.map((t) => /* @__PURE__ */ jsxs(
-    Button,
-    {
-      variant: theme === t.name ? "secondary" : "ghost",
-      size: "icon-xs",
-      onClick: () => setTheme(t.name),
-      className: cn(
-        "rounded-full transition-all",
-        theme === t.name && "shadow-xs bg-background hover:bg-background"
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Icon, { name: t.icon, size: "sm" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: t.label })
-      ]
-    },
-    t.name
-  )) });
-}
 
 // src/index.ts
 var shadcnElements = {
-  card: Card2,
   button: Button2,
   row: Row,
   col: Col,
   text: Text,
   heading: Heading,
-  badge: Badge2,
   input: Input2,
   hidden: Hidden,
   textarea: Textarea2,
@@ -2573,15 +1705,9 @@ var shadcnElements = {
   image: Image,
   video: Video,
   icon: Icon,
-  list: List,
-  listItem: ListItem,
   form: Form,
-  chart: Chart,
   label: Label2,
-  upload: Upload,
-  dropdown: Dropdown,
-  thread: Thread,
-  themeToggle: ThemeToggle
+  upload: Upload
 };
 var ThemeProvider2 = ThemeProvider;
 var useTheme2 = useTheme;