@melony/ui-shadcn 0.1.1 → 0.1.2

package/dist/index.d.ts

@@ -1,5 +1,19 @@
 import { MelonyComponents } from '@melony/ui-kit';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Theme = "light" | "dark" | "system";
+interface ThemeContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    resolvedTheme: "light" | "dark";
+}
+declare function ThemeProvider$1({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useTheme$1(): ThemeContextType;
 
 declare const shadcnElements: Partial<MelonyComponents>;
+declare const ThemeProvider: typeof ThemeProvider$1;
+declare const useTheme: typeof useTheme$1;
 
-export { shadcnElements };
+export { ThemeProvider, shadcnElements, useTheme };

package/dist/index.js

@@ -4,10 +4,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { useMelony } from '@melony/react';
 import * as React3 from 'react';
-import { useState, useRef, useEffect, useMemo } from 'react';
+import { createContext, useState, useRef, useEffect, useMemo, useContext } from 'react';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
-import * as ICONS from '@tabler/icons-react';
-import { IconX, IconChevronLeft, IconChevronRight, IconLoader2, IconCheck, IconUpload, IconDotsVertical, IconSparkles, IconSelector, IconArrowUp, IconChevronUp, IconChevronDown } from '@tabler/icons-react';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
 import { cva } from 'class-variance-authority';
@@ -511,6 +509,38 @@ function DialogClose({ className, ...props }) {
     }
   );
 }
+var Icon = ({
+  name,
+  size = "md",
+  color,
+  className
+}) => {
+  const sizeMap = {
+    sm: "14px",
+    md: "18px",
+    lg: "24px"
+  };
+  const resolvedSize = typeof size === "number" ? `${size}px` : sizeMap[size] || "18px";
+  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: name
+    }
+  );
+};
 var Image = ({
   src,
   alt,
@@ -606,7 +636,7 @@ var Image = ({
         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(IconX, { size: 20 }) }),
+          /* @__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",
@@ -616,7 +646,7 @@ var Image = ({
                   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(IconChevronLeft, { size: 28 })
+                children: /* @__PURE__ */ jsx(Icon, { name: "\u25C0\uFE0F", size: 28 })
               }
             ),
             /* @__PURE__ */ jsx(
@@ -627,7 +657,7 @@ var Image = ({
                   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(IconChevronRight, { size: 28 })
+                children: /* @__PURE__ */ jsx(Icon, { name: "\u25B6\uFE0F", size: 28 })
               }
             )
           ] }),
@@ -693,32 +723,6 @@ var Video = ({
     }
   );
 };
-var Icon = ({
-  name,
-  size = "md",
-  color,
-  className
-}) => {
-  const IconComponent = ICONS[name];
-  if (!IconComponent) return null;
-  const sizeMap = {
-    sm: 16,
-    md: 20,
-    lg: 24
-  };
-  const resolvedSize = typeof size === "number" ? size : sizeMap[size] || 20;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "inline-flex items-center justify-center",
-        color && colorTextMap[color],
-        className
-      ),
-      children: /* @__PURE__ */ jsx(IconComponent, { size: resolvedSize, strokeWidth: 1.5 })
-    }
-  );
-};
 var badgeVariants = 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",
   {
@@ -1253,7 +1257,7 @@ function SelectTrigger({
         /* @__PURE__ */ jsx(
           Select$1.Icon,
           {
-            render: /* @__PURE__ */ jsx(IconSelector, { className: "text-muted-foreground size-4 pointer-events-none" })
+            render: /* @__PURE__ */ jsx(Icon, { name: "\u2195\uFE0F", className: "text-muted-foreground pointer-events-none" })
           }
         )
       ]
@@ -1318,7 +1322,7 @@ function SelectItem({
           Select$1.ItemIndicator,
           {
             render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
-            children: /* @__PURE__ */ jsx(IconCheck, { className: "pointer-events-none" })
+            children: /* @__PURE__ */ jsx(Icon, { name: "\u2705", className: "pointer-events-none" })
           }
         )
       ]
@@ -1338,7 +1342,7 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(IconChevronUp, {})
+      children: /* @__PURE__ */ jsx(Icon, { name: "\u{1F53C}" })
     }
   );
 }
@@ -1355,7 +1359,7 @@ function SelectScrollDownButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(IconChevronDown, {})
+      children: /* @__PURE__ */ jsx(Icon, { name: "\u{1F53D}" })
     }
   );
 }
@@ -2043,7 +2047,7 @@ var Upload = ({
           onClick: () => fileInputRef.current?.click(),
           variant: "default",
           children: [
-            isUploading ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-4 w-4 animate-spin mr-2" }) : status === "success" ? /* @__PURE__ */ jsx(IconCheck, { className: "h-4 w-4 text-green-500 mr-2" }) : status === "error" ? /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4 mr-2" }) : /* @__PURE__ */ jsx(IconUpload, { className: "h-4 w-4 mr-2" }),
+            isUploading ? /* @__PURE__ */ jsx(Icon, { name: "\u23F3", size: "sm", className: "animate-spin mr-2" }) : status === "success" ? /* @__PURE__ */ jsx(Icon, { name: "\u2705", size: "sm", className: "mr-2" }) : status === "error" ? /* @__PURE__ */ jsx(Icon, { name: "\u274C", size: "sm", className: "mr-2" }) : /* @__PURE__ */ jsx(Icon, { name: "\u{1F4E4}", size: "sm", className: "mr-2" }),
             status === "success" ? "Uploaded" : status === "error" ? "Failed" : label
           ]
         }
@@ -2161,7 +2165,7 @@ var Dropdown = ({ items = [], children }) => {
               e.stopPropagation();
               props.onClick?.(e);
             },
-            children: children || /* @__PURE__ */ jsx(IconDotsVertical, { className: "size-3.5" })
+            children: children || /* @__PURE__ */ jsx(Icon, { name: "\u22EE", size: "sm" })
           }
         )
       }
@@ -2188,6 +2192,7 @@ function Composer({
   value,
   onChange,
   onSubmit,
+  onStop,
   placeholder = "Type a message...",
   streaming,
   className,
@@ -2213,14 +2218,26 @@ function Composer({
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center px-1", children: [
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1" }),
-      /* @__PURE__ */ jsx(
+      streaming ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "default",
+          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"
+          ] })
+        }
+      ) : /* @__PURE__ */ jsx(
         Button,
         {
           type: "submit",
-          disabled: !value.trim() || streaming,
-          size: "icon-lg",
+          disabled: !value.trim(),
+          size: "default",
           onClick: () => onSubmit(),
-          children: streaming ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ jsx(IconArrowUp, { className: "h-5 w-5" })
+          children: /* @__PURE__ */ jsx("span", { children: "Send" })
         }
       )
     ] })
@@ -2294,6 +2311,7 @@ function Thread({
     streaming,
     error,
     send,
+    stop,
     messages: melonyMessages
   } = useMelony();
   const messages = useMemo(() => {
@@ -2334,7 +2352,7 @@ function Thread({
                 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(IconSparkles, { className: "h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" })
+                  /* @__PURE__ */ jsx(Icon, { name: "\u2728", size: "sm", className: "text-muted-foreground group-hover:text-primary transition-colors" })
                 ]
               },
               i
@@ -2360,6 +2378,7 @@ function Thread({
         value: input,
         onChange: setInput,
         onSubmit: handleSubmit,
+        onStop: stop,
         placeholder,
         streaming,
         autoFocus
@@ -2367,6 +2386,58 @@ function Thread({
     ) }) })
   ] });
 }
+var ThemeContext = createContext(void 0);
+function ThemeProvider({ children }) {
+  const [theme, setThemeState] = useState("system");
+  const [resolvedTheme, setResolvedTheme] = useState("light");
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const stored = localStorage.getItem("theme");
+      if (stored) {
+        setThemeState(stored);
+      }
+    }
+  }, []);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      if (theme === "system") {
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        const updateResolvedTheme = () => {
+          setResolvedTheme(mediaQuery.matches ? "dark" : "light");
+        };
+        updateResolvedTheme();
+        mediaQuery.addEventListener("change", updateResolvedTheme);
+        return () => mediaQuery.removeEventListener("change", updateResolvedTheme);
+      } else {
+        setResolvedTheme(theme);
+      }
+    }
+  }, [theme]);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const root = document.documentElement;
+      if (resolvedTheme === "dark") {
+        root.classList.add("dark");
+      } else {
+        root.classList.remove("dark");
+      }
+    }
+  }, [resolvedTheme]);
+  const setTheme = (newTheme) => {
+    setThemeState(newTheme);
+    if (typeof window !== "undefined") {
+      localStorage.setItem("theme", newTheme);
+    }
+  };
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, setTheme, resolvedTheme }, children });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
 
 // src/index.ts
 var shadcnElements = {
@@ -2400,7 +2471,9 @@ var shadcnElements = {
   dropdown: Dropdown,
   thread: Thread
 };
+var ThemeProvider2 = ThemeProvider;
+var useTheme2 = useTheme;
 
-export { shadcnElements };
+export { ThemeProvider2 as ThemeProvider, shadcnElements, useTheme2 as useTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map