@melony/ui-shadcn 0.1.3 → 0.1.5

package/dist/index.js

@@ -6,6 +6,7 @@ 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 * as LucideIcons from 'lucide-react';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
 import { cva } from 'class-variance-authority';
@@ -15,6 +16,9 @@ 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';
 
 // src/lib/utils.ts
 function cn(...inputs) {
@@ -31,7 +35,7 @@ function Card({
       "data-slot": "card",
       "data-size": size,
       className: cn(
-        "ring-foreground/10 bg-card text-card-foreground gap-6 overflow-hidden rounded-2xl py-6 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",
+        "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
@@ -44,7 +48,7 @@ function CardHeader({ className, ...props }) {
     {
       "data-slot": "card-header",
       className: cn(
-        "gap-2 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 [.border-b]:pb-6 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]",
+        "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
@@ -261,6 +265,22 @@ var fontWeightMap = {
   semibold: "font-semibold",
   bold: "font-bold"
 };
+var resolveUIStyle = (property, value) => {
+  if (!value) return {};
+  const [colorName, opacityStr] = value.split("/");
+  if (!opacityStr && (colorBgMap[value] || colorTextMap[value] || colorBorderMap[value])) {
+    return {};
+  }
+  const opacity = opacityStr ? parseInt(opacityStr, 10) / 100 : 1;
+  const kebabName = colorName.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+  const variable = `var(--color-${kebabName}, var(--${kebabName}))`;
+  if (opacity === 1) {
+    return { [property]: variable };
+  }
+  return {
+    [property]: `color-mix(in oklch, ${variable}, transparent ${100 - opacity * 100}%)`
+  };
+};
 var Card2 = ({
   children,
   title,
@@ -274,31 +294,35 @@ var Card2 = ({
     Card,
     {
       className: cn(
-        "min-w-96 relative",
+        "w-full max-w-full relative overflow-hidden transition-all duration-200",
         background && colorBgMap[background],
         radius && radiusMap[radius],
-        shadow && shadowMap[shadow]
+        shadow && shadowMap[shadow],
+        !shadow && "shadow-sm border border-border/40"
       ),
       children: [
-        (title || subtitle) && /* @__PURE__ */ jsxs(CardHeader, { className: "pb-3", children: [
-          title && /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: title }),
-          subtitle && /* @__PURE__ */ jsx(CardDescription, { children: subtitle })
+        (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-4", paddingMap[padding]), children })
+        /* @__PURE__ */ jsx(CardContent, { className: cn("flex flex-col gap-2", paddingMap[padding]), children })
       ]
     }
   );
 };
-var Row = ({
-  children,
-  align = "start",
-  justify = "start",
-  wrap = "nowrap",
-  gap = "none",
-  padding = "none",
-  width = "full",
-  height = "auto"
-}) => {
+var Row = (props) => {
+  const {
+    children,
+    align = "start",
+    justify = "start",
+    wrap = "nowrap",
+    gap = "none",
+    padding = "none",
+    width = "full",
+    height = "auto",
+    flex = void 0,
+    overflow = "hidden"
+  } = props;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -312,22 +336,25 @@ var Row = ({
         widthMap[width],
         height === "full" && "h-full"
       ),
-      style: { width: width && typeof width === "number" ? `${width}px` : void 0 },
+      style: { flex, width: width && typeof width === "number" ? `${width}px` : void 0, overflow },
       children
     }
   );
 };
-var Col = ({
-  children,
-  align = "start",
-  justify = "start",
-  gap = "none",
-  width = "auto",
-  height = "auto",
-  padding = "none",
-  background,
-  radius
-}) => {
+var Col = (props) => {
+  const {
+    children,
+    align = "start",
+    justify = "start",
+    gap = "none",
+    width = "auto",
+    height = "auto",
+    padding = "none",
+    background,
+    radius,
+    flex = void 0,
+    overflow = "hidden"
+  } = props;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -342,28 +369,37 @@ var Col = ({
         background && colorBgMap[background],
         radius && radiusMap[radius]
       ),
-      style: { width: width && typeof width === "number" ? `${width}px` : void 0 },
+      style: { flex, width: width && typeof width === "number" ? `${width}px` : void 0, overflow },
       children
     }
   );
 };
-var Box = ({
-  children,
-  padding,
-  paddingVertical,
-  paddingHorizontal,
-  margin,
-  marginVertical,
-  marginHorizontal,
-  background,
-  border = false,
-  borderColor = "border",
-  radius = "none",
-  width = "auto",
-  height = "auto",
-  shadow = "none",
-  group = false
-}) => {
+var Box = (props) => {
+  const {
+    children,
+    padding,
+    paddingVertical,
+    paddingHorizontal,
+    margin,
+    marginVertical,
+    marginHorizontal,
+    background,
+    border = false,
+    borderColor = "border",
+    radius = "none",
+    width = "auto",
+    height = "auto",
+    shadow = "none",
+    group = false,
+    flex = void 0,
+    overflow = "hidden"
+  } = props;
+  const [baseBgColor] = (background || "").split("/");
+  const [baseBorderColor] = (borderColor || "").split("/");
+  const dynamicStyles = {
+    ...resolveUIStyle("backgroundColor", background),
+    ...resolveUIStyle("borderColor", borderColor)
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -375,16 +411,21 @@ var Box = ({
         marginVertical && marginVerticalMap[marginVertical],
         marginHorizontal && marginHorizontalMap[marginHorizontal],
         margin && marginMap[margin],
-        background && colorBgMap[background],
+        baseBgColor && colorBgMap[baseBgColor],
         border && "border",
-        border && colorBorderMap[borderColor],
+        baseBorderColor && colorBorderMap[baseBorderColor],
         radiusMap[radius],
         widthMap[width],
         height === "full" && "h-full",
         shadowMap[shadow],
         group && "group"
       ),
-      style: { width: width && typeof width === "number" ? `${width}px` : void 0 },
+      style: {
+        ...dynamicStyles,
+        flex,
+        width: width && typeof width === "number" ? `${width}px` : void 0,
+        overflow
+      },
       children
     }
   );
@@ -468,16 +509,17 @@ var Divider = ({
     }
   );
 };
-var List = ({ children, padding = "none", gap = "none", flex, overflow }) => {
+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]
+        gapMap[gap],
+        widthMap[width]
       ),
-      style: { flex, overflow },
+      style: { flex, overflow, width: width && typeof width === "number" ? `${width}px` : void 0 },
       children
     }
   );
@@ -567,18 +609,20 @@ function DialogClose({ className, ...props }) {
     }
   );
 }
-var Icon = ({
-  name,
-  size = "md",
-  color,
-  className
-}) => {
+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",
     {
@@ -595,7 +639,7 @@ var Icon = ({
         alignItems: "center",
         justifyContent: "center"
       },
-      children: name
+      children: LucideIcon ? /* @__PURE__ */ jsx(LucideIcon, { size: resolvedSize }) : name
     }
   );
 };
@@ -1066,13 +1110,15 @@ var Chart = ({
     renderChart()
   ] });
 };
-var Text = ({
-  value,
-  size = "md",
-  weight = "normal",
-  align = "start",
-  color = "foreground"
-}) => {
+var Text = (props) => {
+  const {
+    value,
+    size = "md",
+    weight = "normal",
+    align = "start",
+    color = "foreground",
+    className
+  } = props;
   return /* @__PURE__ */ jsx(
     "span",
     {
@@ -1080,7 +1126,8 @@ var Text = ({
         textSizeMap[size],
         fontWeightMap[weight],
         textAlignMap[align],
-        colorTextMap[color]
+        colorTextMap[color],
+        className
       ),
       children: value
     }
@@ -1094,12 +1141,12 @@ var Heading = ({
 }) => {
   const Tag = `h${level}`;
   const levelClasses = {
-    h1: "text-3xl font-bold tracking-tight",
-    h2: "text-2xl font-semibold tracking-tight",
-    h3: "text-xl font-semibold tracking-tight",
-    h4: "text-lg font-semibold tracking-tight",
-    h5: "text-base font-semibold",
-    h6: "text-sm font-semibold"
+    h1: "text-2xl font-bold tracking-tight",
+    h2: "text-xl font-semibold tracking-tight",
+    h3: "text-lg font-semibold tracking-tight",
+    h4: "text-base font-semibold tracking-tight",
+    h5: "text-sm font-semibold",
+    h6: "text-xs font-semibold"
   };
   return /* @__PURE__ */ jsx(
     Tag,
@@ -1946,27 +1993,17 @@ function Button({
     }
   );
 }
-
-// src/elements/helpers.ts
-var widthMap2 = {
-  full: "w-full",
-  auto: "w-auto",
-  "1/2": "w-1/2",
-  "1/3": "w-1/3",
-  "2/3": "w-2/3",
-  "1/4": "w-1/4",
-  "3/4": "w-3/4"
-};
-var Button2 = ({
-  type = "button",
-  label,
-  variant = "primary",
-  size = "md",
-  disabled = false,
-  width,
-  onClickAction,
-  justify = "center"
-}) => {
+var Button2 = (props) => {
+  const {
+    type = "button",
+    label,
+    variant = "primary",
+    size = "md",
+    disabled = false,
+    width,
+    onClickAction,
+    justify = "center"
+  } = props;
   const { send } = useMelony();
   const variantMap = {
     primary: "default",
@@ -1985,7 +2022,7 @@ var Button2 = ({
       variant: variantMap[variant] || "default",
       size: size === "md" ? "default" : size,
       disabled,
-      className: cn(width && widthMap2[width], justifyMap[justify]),
+      className: cn(width && widthMap[width], justifyMap[justify]),
       onClick: () => {
         if (onClickAction) {
           send(onClickAction);
@@ -2265,7 +2302,7 @@ function Composer({
       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-input border-[1.5px] rounded-3xl bg-background shadow-sm focus-within:border-ring transition-all p-2", children: [
+  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,
       {
@@ -2273,32 +2310,34 @@ function Composer({
         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",
+        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 px-1", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1" }),
+    /* @__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: "outline",
-          size: "default",
+          variant: "ghost",
+          size: "icon",
+          className: "h-8 w-8 rounded-full border border-border/40 hover:bg-muted",
           onClick: () => onStop?.(),
-          children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "w-2.5 h-2.5 bg-foreground rounded-[2px]" }),
-            "Stop"
-          ] })
+          children: /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 bg-foreground rounded-[1px]" })
         }
       ) : /* @__PURE__ */ jsx(
         Button,
         {
           type: "submit",
           disabled: !value.trim(),
-          size: "default",
+          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("span", { children: "Send" })
+          children: /* @__PURE__ */ jsx(Icon, { name: "ArrowUp", size: 18 })
         }
       )
     ] })
@@ -2310,7 +2349,7 @@ function MessageContent({ content }) {
   const flushText = (key) => {
     if (currentTextBlock.length > 0) {
       elements.push(
-        /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap", children: currentTextBlock.join("") }, `text-${key}`)
+        /* @__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 = [];
     }
@@ -2330,16 +2369,16 @@ function MessageContent({ content }) {
     }
   });
   flushText(content.length);
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-4", children: elements });
+  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", isUser ? "items-end" : "items-start"), children: /* @__PURE__ */ jsx(
+  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%] rounded-2xl px-4 py-2 space-y-4 whitespace-pre-wrap",
-        isUser ? "bg-primary text-primary-foreground" : "px-0 py-0 text-foreground"
+        "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 })
     }
@@ -2364,9 +2403,7 @@ function Thread({
   placeholder = "Type a message...",
   messages: propMessages,
   autoFocus = false,
-  welcomeTitle,
-  welcomeMessage,
-  suggestions
+  children
 }) {
   const {
     streaming,
@@ -2395,30 +2432,15 @@ function Thread({
       data: { content: text || "" }
     });
   };
-  return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col h-full bg-background flex-1 overflow-hidden", children: [
+  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-8"
+            "max-w-3xl mx-auto w-full p-4"
           ),
-          children: messages.length === 0 && !streaming && (welcomeTitle || welcomeMessage || suggestions) ? /* @__PURE__ */ jsxs("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: [
-            welcomeTitle && /* @__PURE__ */ jsx("h1", { className: "text-4xl md:text-5xl font-bold pb-2", children: welcomeTitle }),
-            welcomeMessage && /* @__PURE__ */ jsx("p", { className: "text-xl text-muted-foreground max-w-lg", children: welcomeMessage }),
-            suggestions && suggestions.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3 w-full max-w-2xl mt-8", children: suggestions.map((suggestion, i) => /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => handleSubmit({}, suggestion),
-                className: "flex items-center justify-between p-4 rounded-2xl border bg-card hover:bg-accent hover:border-accent-foreground/20 transition-all text-left group",
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: suggestion }),
-                  /* @__PURE__ */ jsx(Icon, { name: "\u2728", size: "sm", className: "text-muted-foreground group-hover:text-primary transition-colors" })
-                ]
-              },
-              i
-            )) })
-          ] }) : /* @__PURE__ */ jsx(
+          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,
@@ -2433,18 +2455,21 @@ function Thread({
       ),
       /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 p-4 w-full", children: /* @__PURE__ */ jsx("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: "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);
@@ -2499,6 +2524,31 @@ 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 = {
@@ -2530,7 +2580,8 @@ var shadcnElements = {
   label: Label2,
   upload: Upload,
   dropdown: Dropdown,
-  thread: Thread
+  thread: Thread,
+  themeToggle: ThemeToggle
 };
 var ThemeProvider2 = ThemeProvider;
 var useTheme2 = useTheme;