langgraph-ui-components 0.0.3 → 0.0.4

package/dist/index.es238.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es238.js","sources":["../node_modules/.pnpm/semver@7.7.3/node_modules/semver/functions/inc.js"],"sourcesContent":["'use strict'\n\nconst SemVer = require('../classes/semver')\n\nconst inc = (version, release, options, identifier, identifierBase) => {\n  if (typeof (options) === 'string') {\n    identifierBase = identifier\n    identifier = options\n    options = undefined\n  }\n\n  try {\n    return new SemVer(\n      version instanceof SemVer ? version.version : version,\n      options\n    ).inc(release, identifier, identifierBase).version\n  } catch (er) {\n    return null\n  }\n}\nmodule.exports = inc\n"],"names":["require$$0"],"mappings":";;;;;;AAEA,QAAM,SAASA,cAAA;AAEf,QAAM,MAAM,CAAC,SAAS,SAAS,SAAS,YAAY,mBAAmB;AACrE,QAAI,OAAQ,YAAa,UAAU;AACjC,uBAAiB;AACjB,mBAAa;AACb,gBAAU;AAAA,IACd;AAEE,QAAI;AACF,aAAO,IAAI;AAAA,QACT,mBAAmB,SAAS,QAAQ,UAAU;AAAA,QAC9C;AAAA,QACA,IAAI,SAAS,YAAY,cAAc,EAAE;AAAA,IAC/C,SAAW,IAAI;AACX,aAAO;AAAA,IACX;AAAA,EACA;AACA,UAAiB;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"index.es238.js","sources":["../node_modules/.pnpm/semver@7.7.3/node_modules/semver/functions/valid.js"],"sourcesContent":["'use strict'\n\nconst parse = require('./parse')\nconst valid = (version, options) => {\n  const v = parse(version, options)\n  return v ? v.version : null\n}\nmodule.exports = valid\n"],"names":["require$$0"],"mappings":";;;;;;AAEA,QAAM,QAAQA,aAAA;AACd,QAAM,QAAQ,CAAC,SAAS,YAAY;AAClC,UAAM,IAAI,MAAM,SAAS,OAAO;AAChC,WAAO,IAAI,EAAE,UAAU;AAAA,EACzB;AACA,YAAiB;;;","x_google_ignoreList":[0]}

package/dist/index.es239.js

@@ -1,49 +1,18 @@
-import { __require as requireParse } from "./index.es235.js";
-var diff_1;
-var hasRequiredDiff;
-function requireDiff() {
-  if (hasRequiredDiff) return diff_1;
-  hasRequiredDiff = 1;
+import { __require as requireParse } from "./index.es237.js";
+var clean_1;
+var hasRequiredClean;
+function requireClean() {
+  if (hasRequiredClean) return clean_1;
+  hasRequiredClean = 1;
   const parse = requireParse();
-  const diff = (version1, version2) => {
-    const v1 = parse(version1, null, true);
-    const v2 = parse(version2, null, true);
-    const comparison = v1.compare(v2);
-    if (comparison === 0) {
-      return null;
-    }
-    const v1Higher = comparison > 0;
-    const highVersion = v1Higher ? v1 : v2;
-    const lowVersion = v1Higher ? v2 : v1;
-    const highHasPre = !!highVersion.prerelease.length;
-    const lowHasPre = !!lowVersion.prerelease.length;
-    if (lowHasPre && !highHasPre) {
-      if (!lowVersion.patch && !lowVersion.minor) {
-        return "major";
-      }
-      if (lowVersion.compareMain(highVersion) === 0) {
-        if (lowVersion.minor && !lowVersion.patch) {
-          return "minor";
-        }
-        return "patch";
-      }
-    }
-    const prefix = highHasPre ? "pre" : "";
-    if (v1.major !== v2.major) {
-      return prefix + "major";
-    }
-    if (v1.minor !== v2.minor) {
-      return prefix + "minor";
-    }
-    if (v1.patch !== v2.patch) {
-      return prefix + "patch";
-    }
-    return "prerelease";
+  const clean = (version, options) => {
+    const s = parse(version.trim().replace(/^[=v]+/, ""), options);
+    return s ? s.version : null;
   };
-  diff_1 = diff;
-  return diff_1;
+  clean_1 = clean;
+  return clean_1;
 }
 export {
-  requireDiff as __require
+  requireClean as __require
 };
 //# sourceMappingURL=index.es239.js.map

package/dist/index.es239.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es239.js","sources":["../node_modules/.pnpm/semver@7.7.3/node_modules/semver/functions/diff.js"],"sourcesContent":["'use strict'\n\nconst parse = require('./parse.js')\n\nconst diff = (version1, version2) => {\n  const v1 = parse(version1, null, true)\n  const v2 = parse(version2, null, true)\n  const comparison = v1.compare(v2)\n\n  if (comparison === 0) {\n    return null\n  }\n\n  const v1Higher = comparison > 0\n  const highVersion = v1Higher ? v1 : v2\n  const lowVersion = v1Higher ? v2 : v1\n  const highHasPre = !!highVersion.prerelease.length\n  const lowHasPre = !!lowVersion.prerelease.length\n\n  if (lowHasPre && !highHasPre) {\n    // Going from prerelease -> no prerelease requires some special casing\n\n    // If the low version has only a major, then it will always be a major\n    // Some examples:\n    // 1.0.0-1 -> 1.0.0\n    // 1.0.0-1 -> 1.1.1\n    // 1.0.0-1 -> 2.0.0\n    if (!lowVersion.patch && !lowVersion.minor) {\n      return 'major'\n    }\n\n    // If the main part has no difference\n    if (lowVersion.compareMain(highVersion) === 0) {\n      if (lowVersion.minor && !lowVersion.patch) {\n        return 'minor'\n      }\n      return 'patch'\n    }\n  }\n\n  // add the `pre` prefix if we are going to a prerelease version\n  const prefix = highHasPre ? 'pre' : ''\n\n  if (v1.major !== v2.major) {\n    return prefix + 'major'\n  }\n\n  if (v1.minor !== v2.minor) {\n    return prefix + 'minor'\n  }\n\n  if (v1.patch !== v2.patch) {\n    return prefix + 'patch'\n  }\n\n  // high and low are preleases\n  return 'prerelease'\n}\n\nmodule.exports = diff\n"],"names":["require$$0"],"mappings":";;;;;;AAEA,QAAM,QAAQA,aAAA;AAEd,QAAM,OAAO,CAAC,UAAU,aAAa;AACnC,UAAM,KAAK,MAAM,UAAU,MAAM,IAAI;AACrC,UAAM,KAAK,MAAM,UAAU,MAAM,IAAI;AACrC,UAAM,aAAa,GAAG,QAAQ,EAAE;AAEhC,QAAI,eAAe,GAAG;AACpB,aAAO;AAAA,IACX;AAEE,UAAM,WAAW,aAAa;AAC9B,UAAM,cAAc,WAAW,KAAK;AACpC,UAAM,aAAa,WAAW,KAAK;AACnC,UAAM,aAAa,CAAC,CAAC,YAAY,WAAW;AAC5C,UAAM,YAAY,CAAC,CAAC,WAAW,WAAW;AAE1C,QAAI,aAAa,CAAC,YAAY;AAQ5B,UAAI,CAAC,WAAW,SAAS,CAAC,WAAW,OAAO;AAC1C,eAAO;AAAA,MACb;AAGI,UAAI,WAAW,YAAY,WAAW,MAAM,GAAG;AAC7C,YAAI,WAAW,SAAS,CAAC,WAAW,OAAO;AACzC,iBAAO;AAAA,QACf;AACM,eAAO;AAAA,MACb;AAAA,IACA;AAGE,UAAM,SAAS,aAAa,QAAQ;AAEpC,QAAI,GAAG,UAAU,GAAG,OAAO;AACzB,aAAO,SAAS;AAAA,IACpB;AAEE,QAAI,GAAG,UAAU,GAAG,OAAO;AACzB,aAAO,SAAS;AAAA,IACpB;AAEE,QAAI,GAAG,UAAU,GAAG,OAAO;AACzB,aAAO,SAAS;AAAA,IACpB;AAGE,WAAO;AAAA,EACT;AAEA,WAAiB;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"index.es239.js","sources":["../node_modules/.pnpm/semver@7.7.3/node_modules/semver/functions/clean.js"],"sourcesContent":["'use strict'\n\nconst parse = require('./parse')\nconst clean = (version, options) => {\n  const s = parse(version.trim().replace(/^[=v]+/, ''), options)\n  return s ? s.version : null\n}\nmodule.exports = clean\n"],"names":["require$$0"],"mappings":";;;;;;AAEA,QAAM,QAAQA,aAAA;AACd,QAAM,QAAQ,CAAC,SAAS,YAAY;AAClC,UAAM,IAAI,MAAM,QAAQ,KAAI,EAAG,QAAQ,UAAU,EAAE,GAAG,OAAO;AAC7D,WAAO,IAAI,EAAE,UAAU;AAAA,EACzB;AACA,YAAiB;;;","x_google_ignoreList":[0]}

package/dist/index.es24.js

@@ -1,151 +1,309 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useStreamContext } from "./index.es6.js";
-import { X, Send, Pencil, Copy, FileIcon, CircleUser } from "lucide-react";
-import React__default, { useState } from "react";
-function HumanMessage({ message }) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [editedText, setEditedText] = useState("");
-  const thread = useStreamContext();
-  const meta = thread.getMessagesMetadata(message);
-  const parentCheckpoint = meta?.firstSeenState?.parent_checkpoint;
-  const content = message.content;
-  let textContent = "";
-  let documents = [];
-  if (typeof content === "string") {
-    textContent = content;
-  } else if (Array.isArray(content)) {
-    textContent = content.filter((c) => c.type === "text").map((c) => c.type === "text" ? c.text : "").join("");
-    documents = content.filter((c) => c.type === "document") ?? [];
-  }
-  const handleSubmitEdit = () => {
-    if (!editedText.trim()) {
-      return;
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "./index.es26.js";
+const buttonVariants = cva(
+  "inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-primary-foreground hover:bg-destructive/90",
+        cool: "dark:inset-shadow-2xs dark:inset-shadow-white/10 bg-linear-to-t border border-b-2 border-zinc-950/40 from-primary to-primary/85 shadow-md shadow-primary/20 ring-1 ring-inset ring-white/25 transition-[filter] duration-200 hover:brightness-110 active:brightness-90 dark:border-x-0 text-primary-foreground dark:text-primary-foreground dark:border-t-0 dark:border-primary/50 dark:ring-white/5",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
     }
-    setIsEditing(false);
-    const newMessage = { type: "human", content: editedText };
-    thread.submit(
-      { messages: [newMessage] },
+  }
+);
+const Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
       {
-        checkpoint: parentCheckpoint,
-        streamMode: ["values"],
-        streamSubgraphs: true,
-        streamResumable: true,
-        optimisticValues: (prev) => {
-          const values = meta?.firstSeenState?.values;
-          if (!values) return prev;
-          return {
-            ...values,
-            messages: [...values.messages ?? [], newMessage]
-          };
-        }
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
       }
     );
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-3 justify-end w-full group my-1", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-2 items-end min-w-0", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-zinc-400 text-xs font-medium mr-1 opacity-80", children: "You" }),
-      textContent && /* @__PURE__ */ jsx("div", { className: "relative", children: isEditing ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 w-full", children: [
+  }
+);
+Button.displayName = "Button";
+const liquidbuttonVariants = cva(
+  "inline-flex items-center transition-colors justify-center cursor-pointer gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-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",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent hover:scale-105 duration-300 transition text-primary",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 text-xs gap-1.5 px-4 has-[>svg]:px-4",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        xl: "h-12 rounded-md px-8 has-[>svg]:px-6",
+        xxl: "h-14 rounded-md px-10 has-[>svg]:px-8",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "xxl"
+    }
+  }
+);
+function LiquidButton({
+  className,
+  variant,
+  size,
+  asChild = false,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(
+        "relative",
+        liquidbuttonVariants({ variant, size, className })
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 z-0 h-full w-full rounded-full \n            shadow-[0_0_6px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3px_rgba(0,0,0,0.9),inset_-3px_-3px_0.5px_-3px_rgba(0,0,0,0.85),inset_1px_1px_1px_-0.5px_rgba(0,0,0,0.6),inset_-1px_-1px_1px_-0.5px_rgba(0,0,0,0.6),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(0,0,0,0.06),0_0_12px_rgba(255,255,255,0.15)] \n        transition-all \n        dark:shadow-[0_0_8px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3.5px_rgba(255,255,255,0.09),inset_-3px_-3px_0.5px_-3.5px_rgba(255,255,255,0.85),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.6),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.6),inset_0_0_6px_6px_rgba(255,255,255,0.12),inset_0_0_2px_2px_rgba(255,255,255,0.06),0_0_12px_rgba(0,0,0,0.15)]" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-0 left-0 w-full h-full overflow-hidden rounded-md isolate -z-10",
+            style: { backdropFilter: 'url("#container-glass")' }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "z-10 pointer-events-none ", children }),
+        /* @__PURE__ */ jsx(GlassFilter, {})
+      ]
+    }
+  ) });
+}
+function GlassFilter() {
+  return /* @__PURE__ */ jsx("svg", { className: "hidden", children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+    "filter",
+    {
+      id: "container-glass",
+      x: "0%",
+      y: "0%",
+      width: "100%",
+      height: "100%",
+      colorInterpolationFilters: "sRGB",
+      children: [
         /* @__PURE__ */ jsx(
-          "textarea",
+          "feTurbulence",
           {
-            value: editedText,
-            onChange: (e) => setEditedText(e.target.value),
-            onKeyDown: (e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                handleSubmitEdit();
-              }
-            },
-            className: "text-[15px] font-normal leading-relaxed rounded-2xl rounded-tr-sm px-5 py-3.5 bg-zinc-900 border border-zinc-800 text-white shadow-lg break-words overflow-wrap-anywhere resize-none focus:outline-none min-h-[60px]",
-            autoFocus: true
+            type: "fractalNoise",
+            baseFrequency: "0.05 0.05",
+            numOctaves: "1",
+            seed: "1",
+            result: "turbulence"
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => {
-                setIsEditing(false);
-                setEditedText("");
-              },
-              className: "flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-sm transition-colors",
-              children: [
-                /* @__PURE__ */ jsx(X, { size: 14 }),
-                "Cancel"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: handleSubmitEdit,
-              disabled: !editedText.trim(),
-              className: "flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white text-black text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-              children: [
-                /* @__PURE__ */ jsx(Send, { size: 14 }),
-                "Send"
-              ]
-            }
-          )
-        ] })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "text-[15px] font-normal leading-relaxed rounded-2xl rounded-tr-sm px-5 py-3.5 bg-zinc-900 border border-zinc-900 text-white shadow-lg max-w-full break-words overflow-wrap-anywhere ", children: textContent }),
-        /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsx("feGaussianBlur", { in: "turbulence", stdDeviation: "2", result: "blurredNoise" }),
+        /* @__PURE__ */ jsx(
+          "feDisplacementMap",
           {
-            className: "\n                    absolute right-1 my-2 flex items-center gap-2\n                    opacity-0 group-hover:opacity-100\n                    transition-opacity duration-300\n                    z-10\n                  ",
-            children: [
-              /* @__PURE__ */ jsx(
-                Pencil,
-                {
-                  size: 16,
-                  className: "text-zinc-500 cursor-pointer hover:text-white",
-                  onClick: () => {
-                    setIsEditing(true);
-                    setEditedText(textContent);
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Copy,
-                {
-                  size: 16,
-                  className: "text-zinc-500 cursor-pointer hover:text-white",
-                  onClick: () => {
-                    navigator.clipboard.writeText(textContent);
-                  }
-                }
-              )
-            ]
+            in: "SourceGraphic",
+            in2: "blurredNoise",
+            scale: "70",
+            xChannelSelector: "R",
+            yChannelSelector: "B",
+            result: "displaced"
           }
-        )
-      ] }) }),
-      documents.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 max-w-[90%]", children: documents.map((doc, idx) => /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex items-center gap-3 bg-gradient-to-br from-zinc-800/90 to-zinc-900/90 backdrop-blur-sm px-4 py-2.5 rounded-xl border border-zinc-700/50 shadow-md hover:border-blue-500/40 hover:shadow-lg hover:shadow-blue-500/10 transition-all duration-200 cursor-pointer group/file",
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "p-1.5 bg-blue-500/10 rounded-lg border border-blue-500/20 group-hover/file:bg-blue-500/20 transition-colors", children: /* @__PURE__ */ jsx(FileIcon, { size: 16, className: "text-blue-400 shrink-0" }) }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm text-zinc-200 truncate font-medium", children: doc.source?.filename || `Document ${idx + 1}` })
-          ]
-        },
-        `${message.id}-doc-${idx}`
-      )) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      "div",
+        ),
+        /* @__PURE__ */ jsx("feGaussianBlur", { in: "displaced", stdDeviation: "4", result: "finalBlur" }),
+        /* @__PURE__ */ jsx("feComposite", { in: "finalBlur", in2: "finalBlur", operator: "over" })
+      ]
+    }
+  ) }) });
+}
+const colorVariants = {
+  default: {
+    outer: "bg-gradient-to-b from-[#000] to-[#A0A0A0]",
+    inner: "bg-gradient-to-b from-[#FAFAFA] via-[#3E3E3E] to-[#E5E5E5]",
+    button: "bg-gradient-to-b from-[#B9B9B9] to-[#969696]",
+    textColor: "text-white",
+    textShadow: "[text-shadow:0-1px_0_rgb(80_80_80_/_100%)]"
+  },
+  primary: {
+    outer: "bg-gradient-to-b from-[#000] to-[#A0A0A0]",
+    inner: "bg-gradient-to-b from-primary via-secondary to-muted",
+    button: "bg-gradient-to-b from-primary to-primary/40",
+    textColor: "text-white",
+    textShadow: "[text-shadow:0-1px_0_rgb(30_58_138_/_100%)]"
+  },
+  success: {
+    outer: "bg-gradient-to-b from-[#005A43] to-[#7CCB9B]",
+    inner: "bg-gradient-to-b from-[#E5F8F0] via-[#00352F] to-[#D1F0E6]",
+    button: "bg-gradient-to-b from-[#9ADBC8] to-[#3E8F7C]",
+    textColor: "text-[#FFF7F0]",
+    textShadow: "[text-shadow:0-1px_0_rgb(6_78_59_/_100%)]"
+  },
+  error: {
+    outer: "bg-gradient-to-b from-[#5A0000] to-[#FFAEB0]",
+    inner: "bg-gradient-to-b from-[#FFDEDE] via-[#680002] to-[#FFE9E9]",
+    button: "bg-gradient-to-b from-[#F08D8F] to-[#A45253]",
+    textColor: "text-[#FFF7F0]",
+    textShadow: "[text-shadow:0-1px_0_rgb(146_64_14_/_100%)]"
+  },
+  gold: {
+    outer: "bg-gradient-to-b from-[#917100] to-[#EAD98F]",
+    inner: "bg-gradient-to-b from-[#FFFDDD] via-[#856807] to-[#FFF1B3]",
+    button: "bg-gradient-to-b from-[#FFEBA1] to-[#9B873F]",
+    textColor: "text-[#FFFDE5]",
+    textShadow: "[text-shadow:0-1px_0_rgb(178_140_2_/_100%)]"
+  },
+  bronze: {
+    outer: "bg-gradient-to-b from-[#864813] to-[#E9B486]",
+    inner: "bg-gradient-to-b from-[#EDC5A1] via-[#5F2D01] to-[#FFDEC1]",
+    button: "bg-gradient-to-b from-[#FFE3C9] to-[#A36F3D]",
+    textColor: "text-[#FFF7F0]",
+    textShadow: "[text-shadow:0-1px_0_rgb(124_45_18_/_100%)]"
+  }
+};
+const metalButtonVariants = (variant = "default", isPressed, isHovered, isTouchDevice) => {
+  const colors = colorVariants[variant];
+  const transitionStyle = "all 250ms cubic-bezier(0.1, 0.4, 0.2, 1)";
+  return {
+    wrapper: cn(
+      "relative inline-flex transform-gpu rounded-md p-[1.25px] will-change-transform",
+      colors.outer
+    ),
+    wrapperStyle: {
+      transform: isPressed ? "translateY(2.5px) scale(0.99)" : "translateY(0) scale(1)",
+      boxShadow: isPressed ? "0 1px 2px rgba(0, 0, 0, 0.15)" : isHovered && !isTouchDevice ? "0 4px 12px rgba(0, 0, 0, 0.12)" : "0 3px 8px rgba(0, 0, 0, 0.08)",
+      transition: transitionStyle,
+      transformOrigin: "center center"
+    },
+    inner: cn(
+      "absolute inset-[1px] transform-gpu rounded-lg will-change-transform",
+      colors.inner
+    ),
+    innerStyle: {
+      transition: transitionStyle,
+      transformOrigin: "center center",
+      filter: isHovered && !isPressed && !isTouchDevice ? "brightness(1.05)" : "none"
+    },
+    button: cn(
+      "relative z-10 m-[1px] rounded-md inline-flex h-11 transform-gpu cursor-pointer items-center justify-center overflow-hidden rounded-md px-6 py-2 text-sm leading-none font-semibold will-change-transform outline-none",
+      colors.button,
+      colors.textColor,
+      colors.textShadow
+    ),
+    buttonStyle: {
+      transform: isPressed ? "scale(0.97)" : "scale(1)",
+      transition: transitionStyle,
+      transformOrigin: "center center",
+      filter: isHovered && !isPressed && !isTouchDevice ? "brightness(1.02)" : "none"
+    }
+  };
+};
+const ShineEffect = ({ isPressed }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "pointer-events-none absolute inset-0 z-20 overflow-hidden transition-opacity duration-300",
+        isPressed ? "opacity-20" : "opacity-0"
+      ),
+      children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-md bg-gradient-to-r from-transparent via-neutral-100 to-transparent" })
+    }
+  );
+};
+const MetalButton = React.forwardRef(({ children, className, variant = "default", ...props }, ref) => {
+  const [isPressed, setIsPressed] = React.useState(false);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isTouchDevice, setIsTouchDevice] = React.useState(false);
+  React.useEffect(() => {
+    setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
+  }, []);
+  const buttonText = children || "Button";
+  const variants = metalButtonVariants(
+    variant,
+    isPressed,
+    isHovered,
+    isTouchDevice
+  );
+  const handleInternalMouseDown = () => {
+    setIsPressed(true);
+  };
+  const handleInternalMouseUp = () => {
+    setIsPressed(false);
+  };
+  const handleInternalMouseLeave = () => {
+    setIsPressed(false);
+    setIsHovered(false);
+  };
+  const handleInternalMouseEnter = () => {
+    if (!isTouchDevice) {
+      setIsHovered(true);
+    }
+  };
+  const handleInternalTouchStart = () => {
+    setIsPressed(true);
+  };
+  const handleInternalTouchEnd = () => {
+    setIsPressed(false);
+  };
+  const handleInternalTouchCancel = () => {
+    setIsPressed(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: variants.wrapper, style: variants.wrapperStyle, children: [
+    /* @__PURE__ */ jsx("div", { className: variants.inner, style: variants.innerStyle }),
+    /* @__PURE__ */ jsxs(
+      "button",
       {
-        className: "size-9 shrink-0 flex items-center justify-center",
-        "data-alt": "User Avatar",
-        children: /* @__PURE__ */ jsx(CircleUser, { className: "text-white", size: 22 })
+        ref,
+        className: cn(variants.button, className),
+        style: variants.buttonStyle,
+        ...props,
+        onMouseDown: handleInternalMouseDown,
+        onMouseUp: handleInternalMouseUp,
+        onMouseLeave: handleInternalMouseLeave,
+        onMouseEnter: handleInternalMouseEnter,
+        onTouchStart: handleInternalTouchStart,
+        onTouchEnd: handleInternalTouchEnd,
+        onTouchCancel: handleInternalTouchCancel,
+        children: [
+          /* @__PURE__ */ jsx(ShineEffect, { isPressed }),
+          buttonText,
+          isHovered && !isPressed && !isTouchDevice && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-lg pointer-events-none bg-gradient-to-t from-transparent to-white/5" })
+        ]
       }
     )
   ] });
-}
-const HumanMessage$1 = React__default.memo(HumanMessage, (prevProps, nextProps) => {
-  return prevProps.message.id === nextProps.message.id;
 });
+MetalButton.displayName = "MetalButton";
 export {
-  HumanMessage$1 as default
+  Button,
+  LiquidButton,
+  MetalButton,
+  buttonVariants,
+  liquidbuttonVariants
 };
 //# sourceMappingURL=index.es24.js.map

package/dist/index.es24.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es24.js","sources":["../src/components/messages/HumanMessage.tsx"],"sourcesContent":["import { useStreamContext } from \"@/providers/Stream\";\nimport type { Message } from \"@langchain/langgraph-sdk\";\nimport { CircleUser, Copy, FileIcon, Pencil, Send, X } from \"lucide-react\";\nimport React, { useState } from \"react\";\n\nfunction HumanMessage({ message }: { message: Message }) {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editedText, setEditedText] = useState(\"\");\n  const thread = useStreamContext();\n  const meta = thread.getMessagesMetadata(message);\n  const parentCheckpoint = meta?.firstSeenState?.parent_checkpoint;\n\n  // Extract text and documents from content\n  const content = message.content;\n  let textContent = \"\";\n  let documents: any[] = [];\n\n  if (typeof content === \"string\") {\n    textContent = content;\n  } else if (Array.isArray(content)) {\n    textContent = content\n      .filter((c: any) => c.type === \"text\")\n      .map((c: any) => (c.type === \"text\" ? c.text : \"\"))\n      .join(\"\");\n    documents = content.filter((c: any) => c.type === \"document\") ?? [];\n  }\n\n  const handleSubmitEdit = () => {\n    // Validate that edited text is not empty\n    if (!editedText.trim()) {\n      return;\n    }\n\n    setIsEditing(false);\n    // console.log(\"Send edited message:\", editedText);\n\n    const newMessage: Message = { type: \"human\", content: editedText };\n    thread.submit(\n      { messages: [newMessage] },\n      {\n        checkpoint: parentCheckpoint,\n        streamMode: [\"values\"],\n        streamSubgraphs: true,\n        streamResumable: true,\n        optimisticValues: (prev) => {\n          const values = meta?.firstSeenState?.values;\n          if (!values) return prev;\n\n          return {\n            ...values,\n            messages: [...(values.messages ?? []), newMessage],\n          };\n        },\n      },\n    );\n  };\n\n  return (\n    <div className=\"flex items-end gap-3 justify-end w-full group my-1\">\n      <div className=\"flex flex-1 flex-col gap-2 items-end min-w-0\">\n        <span className=\"text-zinc-400 text-xs font-medium mr-1 opacity-80\">\n          You\n        </span>\n\n        {textContent && (\n          <div className=\"relative\">\n            {isEditing ? (\n              <div className=\"flex flex-col gap-2 w-full\">\n                <textarea\n                  value={editedText}\n                  onChange={(e) => setEditedText(e.target.value)}\n                  onKeyDown={(e)=>{\n                    if(e.key === \"Enter\"){\n                      e.preventDefault();\n                      handleSubmitEdit();\n                    }\n                  }}\n                  className=\"text-[15px] font-normal leading-relaxed rounded-2xl rounded-tr-sm px-5 py-3.5 bg-zinc-900 border border-zinc-800 text-white shadow-lg break-words overflow-wrap-anywhere resize-none focus:outline-none min-h-[60px]\"\n                  autoFocus\n                />\n                <div className=\"flex items-center justify-end gap-2\">\n                  <button\n                    onClick={() => {\n                      setIsEditing(false);\n                      setEditedText(\"\");\n                    }}\n                    className=\"flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-sm transition-colors\"\n                  >\n                    <X size={14} />\n                    Cancel\n                  </button>\n                  <button\n                    onClick={handleSubmitEdit}\n                    disabled={!editedText.trim()}\n                    className=\"flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white text-black text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n                  >\n                    <Send size={14} />\n                    Send\n                  </button>\n                </div>\n              </div>\n            ) : (\n              <>\n                <div className=\"text-[15px] font-normal leading-relaxed rounded-2xl rounded-tr-sm px-5 py-3.5 bg-zinc-900 border border-zinc-900 text-white shadow-lg max-w-full break-words overflow-wrap-anywhere \">\n                  {textContent}\n                </div>\n                <div\n                  className=\"\n                    absolute right-1 my-2 flex items-center gap-2\n                    opacity-0 group-hover:opacity-100\n                    transition-opacity duration-300\n                    z-10\n                  \"\n                >\n                  <Pencil\n                    size={16}\n                    className=\"text-zinc-500 cursor-pointer hover:text-white\"\n                    onClick={() => {\n                      setIsEditing(true);\n                      setEditedText(textContent);\n                    }}\n                  />\n\n                  <Copy\n                    size={16}\n                    className=\"text-zinc-500 cursor-pointer hover:text-white\"\n                    onClick={() => {\n                      navigator.clipboard.writeText(textContent);\n                    }}\n                  />\n                </div>\n              </>\n            )}\n          </div>\n        )}\n\n        {documents.length > 0 && (\n          <div className=\"flex flex-col gap-2 max-w-[90%]\">\n            {documents.map((doc, idx) => (\n              <div\n                key={`${message.id}-doc-${idx}`}\n                className=\"flex items-center gap-3 bg-gradient-to-br from-zinc-800/90 to-zinc-900/90 backdrop-blur-sm px-4 py-2.5 rounded-xl border border-zinc-700/50 shadow-md hover:border-blue-500/40 hover:shadow-lg hover:shadow-blue-500/10 transition-all duration-200 cursor-pointer group/file\"\n              >\n                <div className=\"p-1.5 bg-blue-500/10 rounded-lg border border-blue-500/20 group-hover/file:bg-blue-500/20 transition-colors\">\n                  <FileIcon size={16} className=\"text-blue-400 shrink-0\" />\n                </div>\n                <span className=\"text-sm text-zinc-200 truncate font-medium\">\n                  {doc.source?.filename || `Document ${idx + 1}`}\n                </span>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div\n        className=\"size-9 shrink-0 flex items-center justify-center\"\n        data-alt=\"User Avatar\"\n      >\n        <CircleUser className=\"text-white\" size={22} />\n      </div>\n    </div>\n  );\n}\n\n// Memoize with deep comparison on message ID\nexport default React.memo(HumanMessage, (prevProps, nextProps) => {\n  return prevProps.message.id === nextProps.message.id;\n});\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"index.es24.js","sources":["../src/components/ui/button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils/tailwindUtil\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-primary-foreground hover:bg-destructive/90\",\n        cool: \"dark:inset-shadow-2xs dark:inset-shadow-white/10 bg-linear-to-t border border-b-2 border-zinc-950/40 from-primary to-primary/85 shadow-md shadow-primary/20 ring-1 ring-inset ring-white/25 transition-[filter] duration-200 hover:brightness-110 active:brightness-90 dark:border-x-0 text-primary-foreground dark:text-primary-foreground dark:border-t-0 dark:border-primary/50 dark:ring-white/5\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nconst liquidbuttonVariants = cva(\n  \"inline-flex items-center transition-colors justify-center cursor-pointer gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-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\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent hover:scale-105 duration-300 transition text-primary\",\n        destructive:\n          \"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 text-xs gap-1.5 px-4 has-[>svg]:px-4\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        xl: \"h-12 rounded-md px-8 has-[>svg]:px-6\",\n        xxl: \"h-14 rounded-md px-10 has-[>svg]:px-8\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"xxl\",\n    },\n  }\n)\n\nfunction LiquidButton({\n  className,\n  variant,\n  size,\n  asChild = false,\n  children,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof liquidbuttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <>\n      <Comp\n        data-slot=\"button\"\n        className={cn(\n          \"relative\",\n          liquidbuttonVariants({ variant, size, className })\n        )}\n        {...props}\n      >\n        <div className=\"absolute top-0 left-0 z-0 h-full w-full rounded-full \n            shadow-[0_0_6px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3px_rgba(0,0,0,0.9),inset_-3px_-3px_0.5px_-3px_rgba(0,0,0,0.85),inset_1px_1px_1px_-0.5px_rgba(0,0,0,0.6),inset_-1px_-1px_1px_-0.5px_rgba(0,0,0,0.6),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(0,0,0,0.06),0_0_12px_rgba(255,255,255,0.15)] \n        transition-all \n        dark:shadow-[0_0_8px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3.5px_rgba(255,255,255,0.09),inset_-3px_-3px_0.5px_-3.5px_rgba(255,255,255,0.85),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.6),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.6),inset_0_0_6px_6px_rgba(255,255,255,0.12),inset_0_0_2px_2px_rgba(255,255,255,0.06),0_0_12px_rgba(0,0,0,0.15)]\" />\n        <div\n          className=\"absolute top-0 left-0 w-full h-full overflow-hidden rounded-md isolate -z-10\"\n          style={{ backdropFilter: 'url(\"#container-glass\")' }}\n        />\n\n        <div className=\"z-10 pointer-events-none \">\n          {children}\n        </div>\n        <GlassFilter />\n      </Comp>\n    </>\n  )\n}\n\n\nfunction GlassFilter() {\n  return (\n    <svg className=\"hidden\">\n      <defs>\n        <filter\n          id=\"container-glass\"\n          x=\"0%\"\n          y=\"0%\"\n          width=\"100%\"\n          height=\"100%\"\n          colorInterpolationFilters=\"sRGB\"\n        >\n          {/* Generate turbulent noise for distortion */}\n          <feTurbulence\n            type=\"fractalNoise\"\n            baseFrequency=\"0.05 0.05\"\n            numOctaves=\"1\"\n            seed=\"1\"\n            result=\"turbulence\"\n          />\n\n          {/* Blur the turbulence pattern slightly */}\n          <feGaussianBlur in=\"turbulence\" stdDeviation=\"2\" result=\"blurredNoise\" />\n\n          {/* Displace the source graphic with the noise */}\n          <feDisplacementMap\n            in=\"SourceGraphic\"\n            in2=\"blurredNoise\"\n            scale=\"70\"\n            xChannelSelector=\"R\"\n            yChannelSelector=\"B\"\n            result=\"displaced\"\n          />\n\n          {/* Apply overall blur on the final result */}\n          <feGaussianBlur in=\"displaced\" stdDeviation=\"4\" result=\"finalBlur\" />\n\n          {/* Output the result */}\n          <feComposite in=\"finalBlur\" in2=\"finalBlur\" operator=\"over\" />\n        </filter>\n      </defs>\n    </svg>\n  );\n}\n\ntype ColorVariant =\n  | \"default\"\n  | \"primary\"\n  | \"success\"\n  | \"error\"\n  | \"gold\"\n  | \"bronze\";\n \ninterface MetalButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ColorVariant;\n}\n \nconst colorVariants: Record<\n  ColorVariant,\n  {\n    outer: string;\n    inner: string;\n    button: string;\n    textColor: string;\n    textShadow: string;\n  }\n> = {\n  default: {\n    outer: \"bg-gradient-to-b from-[#000] to-[#A0A0A0]\",\n    inner: \"bg-gradient-to-b from-[#FAFAFA] via-[#3E3E3E] to-[#E5E5E5]\",\n    button: \"bg-gradient-to-b from-[#B9B9B9] to-[#969696]\",\n    textColor: \"text-white\",\n    textShadow: \"[text-shadow:0-1px_0_rgb(80_80_80_/_100%)]\",\n  },\n  primary: {\n    outer: \"bg-gradient-to-b from-[#000] to-[#A0A0A0]\",\n    inner: \"bg-gradient-to-b from-primary via-secondary to-muted\",\n    button: \"bg-gradient-to-b from-primary to-primary/40\",\n    textColor: \"text-white\",\n    textShadow: \"[text-shadow:0-1px_0_rgb(30_58_138_/_100%)]\",\n  },\n  success: {\n    outer: \"bg-gradient-to-b from-[#005A43] to-[#7CCB9B]\",\n    inner: \"bg-gradient-to-b from-[#E5F8F0] via-[#00352F] to-[#D1F0E6]\",\n    button: \"bg-gradient-to-b from-[#9ADBC8] to-[#3E8F7C]\",\n    textColor: \"text-[#FFF7F0]\",\n    textShadow: \"[text-shadow:0-1px_0_rgb(6_78_59_/_100%)]\",\n  },\n  error: {\n    outer: \"bg-gradient-to-b from-[#5A0000] to-[#FFAEB0]\",\n    inner: \"bg-gradient-to-b from-[#FFDEDE] via-[#680002] to-[#FFE9E9]\",\n    button: \"bg-gradient-to-b from-[#F08D8F] to-[#A45253]\",\n    textColor: \"text-[#FFF7F0]\",\n    textShadow: \"[text-shadow:0-1px_0_rgb(146_64_14_/_100%)]\",\n  },\n  gold: {\n    outer: \"bg-gradient-to-b from-[#917100] to-[#EAD98F]\",\n    inner: \"bg-gradient-to-b from-[#FFFDDD] via-[#856807] to-[#FFF1B3]\",\n    button: \"bg-gradient-to-b from-[#FFEBA1] to-[#9B873F]\",\n    textColor: \"text-[#FFFDE5]\",\n    textShadow: \"[text-shadow:0-1px_0_rgb(178_140_2_/_100%)]\",\n  },\n  bronze: {\n    outer: \"bg-gradient-to-b from-[#864813] to-[#E9B486]\",\n    inner: \"bg-gradient-to-b from-[#EDC5A1] via-[#5F2D01] to-[#FFDEC1]\",\n    button: \"bg-gradient-to-b from-[#FFE3C9] to-[#A36F3D]\",\n    textColor: \"text-[#FFF7F0]\",\n    textShadow: \"[text-shadow:0-1px_0_rgb(124_45_18_/_100%)]\",\n  },\n};\n \nconst metalButtonVariants = (\n  variant: ColorVariant = \"default\",\n  isPressed: boolean,\n  isHovered: boolean,\n  isTouchDevice: boolean,\n) => {\n  const colors = colorVariants[variant];\n  const transitionStyle = \"all 250ms cubic-bezier(0.1, 0.4, 0.2, 1)\";\n \n  return {\n    wrapper: cn(\n      \"relative inline-flex transform-gpu rounded-md p-[1.25px] will-change-transform\",\n      colors.outer,\n    ),\n    wrapperStyle: {\n      transform: isPressed\n        ? \"translateY(2.5px) scale(0.99)\"\n        : \"translateY(0) scale(1)\",\n      boxShadow: isPressed\n        ? \"0 1px 2px rgba(0, 0, 0, 0.15)\"\n        : isHovered && !isTouchDevice\n          ? \"0 4px 12px rgba(0, 0, 0, 0.12)\"\n          : \"0 3px 8px rgba(0, 0, 0, 0.08)\",\n      transition: transitionStyle,\n      transformOrigin: \"center center\",\n    },\n    inner: cn(\n      \"absolute inset-[1px] transform-gpu rounded-lg will-change-transform\",\n      colors.inner,\n    ),\n    innerStyle: {\n      transition: transitionStyle,\n      transformOrigin: \"center center\",\n      filter:\n        isHovered && !isPressed && !isTouchDevice ? \"brightness(1.05)\" : \"none\",\n    },\n    button: cn(\n      \"relative z-10 m-[1px] rounded-md inline-flex h-11 transform-gpu cursor-pointer items-center justify-center overflow-hidden rounded-md px-6 py-2 text-sm leading-none font-semibold will-change-transform outline-none\",\n      colors.button,\n      colors.textColor,\n      colors.textShadow,\n    ),\n    buttonStyle: {\n      transform: isPressed ? \"scale(0.97)\" : \"scale(1)\",\n      transition: transitionStyle,\n      transformOrigin: \"center center\",\n      filter:\n        isHovered && !isPressed && !isTouchDevice ? \"brightness(1.02)\" : \"none\",\n    },\n  };\n};\n \nconst ShineEffect = ({ isPressed }: { isPressed: boolean }) => {\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute inset-0 z-20 overflow-hidden transition-opacity duration-300\",\n        isPressed ? \"opacity-20\" : \"opacity-0\",\n      )}\n    >\n      <div className=\"absolute inset-0 rounded-md bg-gradient-to-r from-transparent via-neutral-100 to-transparent\" />\n    </div>\n  );\n};\n \nexport const MetalButton = React.forwardRef<\n  HTMLButtonElement,\n  MetalButtonProps\n>(({ children, className, variant = \"default\", ...props }, ref) => {\n  const [isPressed, setIsPressed] = React.useState(false);\n  const [isHovered, setIsHovered] = React.useState(false);\n  const [isTouchDevice, setIsTouchDevice] = React.useState(false);\n \n  React.useEffect(() => {\n    setIsTouchDevice(\"ontouchstart\" in window || navigator.maxTouchPoints > 0);\n  }, []);\n \n  const buttonText = children || \"Button\";\n  const variants = metalButtonVariants(\n    variant,\n    isPressed,\n    isHovered,\n    isTouchDevice,\n  );\n \n  const handleInternalMouseDown = () => {\n    setIsPressed(true);\n  };\n  const handleInternalMouseUp = () => {\n    setIsPressed(false);\n  };\n  const handleInternalMouseLeave = () => {\n    setIsPressed(false);\n    setIsHovered(false);\n  };\n  const handleInternalMouseEnter = () => {\n    if (!isTouchDevice) {\n      setIsHovered(true);\n    }\n  };\n  const handleInternalTouchStart = () => {\n    setIsPressed(true);\n  };\n  const handleInternalTouchEnd = () => {\n    setIsPressed(false);\n  };\n  const handleInternalTouchCancel = () => {\n    setIsPressed(false);\n  };\n \n  return (\n    <div className={variants.wrapper} style={variants.wrapperStyle}>\n      <div className={variants.inner} style={variants.innerStyle}></div>\n      <button\n        ref={ref}\n        className={cn(variants.button, className)}\n        style={variants.buttonStyle}\n        {...props}\n        onMouseDown={handleInternalMouseDown}\n        onMouseUp={handleInternalMouseUp}\n        onMouseLeave={handleInternalMouseLeave}\n        onMouseEnter={handleInternalMouseEnter}\n        onTouchStart={handleInternalTouchStart}\n        onTouchEnd={handleInternalTouchEnd}\n        onTouchCancel={handleInternalTouchCancel}\n      >\n        <ShineEffect isPressed={isPressed} />\n        {buttonText}\n        {isHovered && !isPressed && !isTouchDevice && (\n          <div className=\"absolute inset-0 rounded-lg pointer-events-none bg-gradient-to-t from-transparent to-white/5\" />\n        )}\n      </button>\n    </div>\n  );\n});\n \nMetalButton.displayName = \"MetalButton\";\n\nexport { Button, buttonVariants, liquidbuttonVariants, LiquidButton }\n"],"names":[],"mappings":"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"}

package/dist/index.es240.js

@@ -1,15 +1,29 @@
-import { __require as requireSemver } from "./index.es233.js";
-var major_1;
-var hasRequiredMajor;
-function requireMajor() {
-  if (hasRequiredMajor) return major_1;
-  hasRequiredMajor = 1;
+import { __require as requireSemver } from "./index.es235.js";
+var inc_1;
+var hasRequiredInc;
+function requireInc() {
+  if (hasRequiredInc) return inc_1;
+  hasRequiredInc = 1;
   const SemVer = requireSemver();
-  const major = (a, loose) => new SemVer(a, loose).major;
-  major_1 = major;
-  return major_1;
+  const inc = (version, release, options, identifier, identifierBase) => {
+    if (typeof options === "string") {
+      identifierBase = identifier;
+      identifier = options;
+      options = void 0;
+    }
+    try {
+      return new SemVer(
+        version instanceof SemVer ? version.version : version,
+        options
+      ).inc(release, identifier, identifierBase).version;
+    } catch (er) {
+      return null;
+    }
+  };
+  inc_1 = inc;
+  return inc_1;
 }
 export {
-  requireMajor as __require
+  requireInc as __require
 };
 //# sourceMappingURL=index.es240.js.map