@vuer-ai/vuer-uikit 0.0.73 → 0.0.75

package/dist/chunk-CO6EASQO.mjs

@@ -0,0 +1,169 @@
+import { colorClasses, borderColorClasses, formatDuration } from './chunk-4U232QAX.mjs';
+import { cn } from './chunk-HMN4IKTG.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TimelineProcessBar({
+  item,
+  isHovered,
+  onMouseEnter,
+  onMouseLeave,
+  onClick,
+  viewStart,
+  viewWindow,
+  timeToPercent
+}) {
+  const viewEnd = viewStart + viewWindow;
+  const isHaltedStep = item.isHaltedStep;
+  const barStart = item.startTime;
+  const barEnd = item.startTime !== void 0 && item.duration !== void 0 ? item.startTime + item.duration : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative h-[32px] w-full", isHovered && "bg-bg-secondary"),
+      onMouseEnter,
+      onMouseLeave,
+      children: [
+        item.createTime !== void 0 && item.startTime !== void 0 && item.createTime < item.startTime && item.color && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "absolute top-1/2 h-2 -translate-y-1/2",
+            style: {
+              left: `${timeToPercent(item.createTime)}%`,
+              width: `${(item.startTime - item.createTime) / viewWindow * 100}%`
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute top-1/2 left-0 h-2 w-px -translate-y-1/2",
+                    colorClasses[item.color]
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute top-1/2 w-full -translate-y-1/2 border-t",
+                    borderColorClasses[item.color]
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute top-1/2 right-0 h-2 w-px -translate-y-1/2",
+                    colorClasses[item.color]
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        item.startTime !== void 0 && item.duration !== void 0 && !isHaltedStep && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "rounded-uk-xs absolute top-1/2 flex h-5 -translate-y-1/2 items-center justify-center overflow-hidden",
+              item.color && colorClasses[item.color],
+              item.hasStripes && "bg-[repeating-linear-gradient(-45deg,transparent,transparent_4px,rgba(0,0,0,0.1)_4px,rgba(0,0,0,0.1)_8px)]",
+              onClick && "cursor-pointer"
+            ),
+            style: {
+              left: `${timeToPercent(item.startTime)}%`,
+              width: `${item.duration / viewWindow * 100}%`
+            },
+            onClick: (e) => {
+              if (onClick && item.startTime !== void 0) {
+                e.stopPropagation();
+                const rect = e.currentTarget.getBoundingClientRect();
+                const clickX = e.clientX - rect.left;
+                const clickPercent = clickX / rect.width;
+                const clickTime = item.startTime + item.duration * clickPercent;
+                onClick(clickTime);
+              }
+            }
+          }
+        ),
+        item.startTime !== void 0 && item.duration !== void 0 && !isHaltedStep && (() => {
+          const visibleStart = Math.max(barStart, viewStart);
+          const visibleEnd = Math.min(barEnd, viewEnd);
+          if (visibleEnd <= visibleStart) return null;
+          const visibleDuration = visibleEnd - visibleStart;
+          const visibleWidthPercent = visibleDuration / viewWindow * 100;
+          if (visibleWidthPercent < 4) return null;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "pointer-events-none absolute top-1/2 flex h-5 -translate-y-1/2 items-center justify-center",
+              style: {
+                left: `${timeToPercent(visibleStart)}%`,
+                width: `${visibleWidthPercent}%`
+              },
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-uk-sm font-medium whitespace-nowrap",
+                    item.color === "gray-light" || item.color === "gray-medium" ? "text-slate-600 dark:text-slate-300" : "text-text-withbg"
+                  ),
+                  children: formatDuration(item.duration)
+                }
+              )
+            }
+          );
+        })(),
+        item.startTime !== void 0 && item.duration !== void 0 && !isHaltedStep && item.color && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "bg-bg-primary absolute top-1/2 z-10 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2",
+              borderColorClasses[item.color]
+            ),
+            style: {
+              left: `${timeToPercent(item.startTime)}%`
+            }
+          }
+        ),
+        isHaltedStep && item.startTime !== void 0 && item.duration !== void 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-1/2 flex h-full -translate-y-1/2 items-center",
+            style: {
+              left: `${timeToPercent(item.startTime)}%`,
+              width: `${item.duration / viewWindow * 100}%`
+            },
+            children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full w-full items-center justify-center", children: [
+              /* @__PURE__ */ jsx("div", { className: "bg-line-secondary absolute top-1/2 left-0 h-2 w-px -translate-y-1/2" }),
+              /* @__PURE__ */ jsx("div", { className: "bg-line-secondary w-full border-t border-dashed" }),
+              /* @__PURE__ */ jsx("div", { className: "bg-line-secondary absolute top-1/2 right-0 h-2 w-px -translate-y-1/2" })
+            ] })
+          }
+        ),
+        isHaltedStep && item.startTime !== void 0 && item.duration !== void 0 && (() => {
+          const visibleStart = Math.max(barStart, viewStart);
+          const visibleEnd = Math.min(barEnd, viewEnd);
+          if (visibleEnd <= visibleStart) return null;
+          const visibleDuration = visibleEnd - visibleStart;
+          const visibleWidthPercent = visibleDuration / viewWindow * 100;
+          if (visibleWidthPercent < 8) return null;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center",
+              style: {
+                left: `${timeToPercent(visibleStart)}%`,
+                width: `${visibleWidthPercent}%`
+              },
+              children: /* @__PURE__ */ jsx("span", { className: "text-text-secondary text-xs italic", children: "Halted" })
+            }
+          );
+        })()
+      ]
+    }
+  );
+}
+
+export { TimelineProcessBar };

package/dist/chunk-COVQAQYO.mjs

@@ -0,0 +1,63 @@
+import { useTheme } from './chunk-7LLDKYND.mjs';
+import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-PCSY5IJ2.mjs';
+import { Button } from './chunk-INHZ5D7P.mjs';
+import { cn } from './chunk-HMN4IKTG.mjs';
+import { Droplet, SunMoon, Moon, Sun } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var LiquidToggle = ({ className, ...props }) => {
+  const { isLiquid, toggleLiquid } = useTheme();
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: true,
+        variant: "ghost",
+        value: isLiquid,
+        "aria-label": `Toggle liquid theme: ${isLiquid ? "on" : "off"}`,
+        ...props,
+        onClick: toggleLiquid,
+        className,
+        children: /* @__PURE__ */ jsx(Droplet, { size: 20 })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: "Toggle liquid theme" })
+  ] });
+};
+var ThemeColorToggle = (props) => {
+  const { baseTheme, setBaseTheme, resolvedTheme } = useTheme();
+  const handleThemeChange = () => {
+    if (baseTheme === "light") {
+      setBaseTheme("dark");
+    } else if (baseTheme === "dark") {
+      setBaseTheme("system");
+    } else if (baseTheme === "system") {
+      setBaseTheme("light");
+    }
+  };
+  const isDark = resolvedTheme.includes("dark");
+  const isSystem = baseTheme === "system";
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      icon: true,
+      variant: "ghost",
+      "aria-label": `Current theme: ${isSystem ? "system" : isDark ? "dark" : "light"}`,
+      ...props,
+      onClick: handleThemeChange,
+      children: isSystem ? /* @__PURE__ */ jsx(SunMoon, { size: 20 }) : isDark ? /* @__PURE__ */ jsx(Moon, { size: 20 }) : /* @__PURE__ */ jsx(Sun, { size: 20 })
+    }
+  );
+};
+var ThemeToggles = ({
+  className,
+  liquidToggleProps = {},
+  colorToggleProps = {}
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-1", className), children: [
+    /* @__PURE__ */ jsx(LiquidToggle, { ...liquidToggleProps }),
+    /* @__PURE__ */ jsx(ThemeColorToggle, { ...colorToggleProps })
+  ] });
+};
+
+export { LiquidToggle, ThemeColorToggle, ThemeToggles };

package/dist/chunk-D2DMH5WY.mjs

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+
+// src/ui/icons/MouseCursorIcons.tsx
+var MouseCursorIcon = ({ strokeWidth = 2.25 }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": strokeWidth,
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className: "lucide lucide-mouse-pointer2-icon lucide-mouse-pointer-2",
+      children: /* @__PURE__ */ jsx("path", { d: "M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" })
+    }
+  );
+};
+var MouseCursorAltIcon = ({ strokeWidth = 2.25 }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      stroke: "currentColor",
+      "stroke-width": strokeWidth / 2,
+      className: "lucide lucide-mouse-pointer2-icon lucide-mouse-pointer-2",
+      children: /* @__PURE__ */ jsx("path", { d: "M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" })
+    }
+  );
+};
+
+export { MouseCursorAltIcon, MouseCursorIcon };

package/dist/{chunk-R2DTBJJV.mjs → chunk-D3IW2NW6.mjs}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-KVFUDYD3.mjs';
+import { cn } from './chunk-HMN4IKTG.mjs';
 import { cva } from 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-G73SWE4J.mjs → chunk-DWWM2TV3.mjs}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-KVFUDYD3.mjs';
+import { cn } from './chunk-HMN4IKTG.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 function Skeleton({ className, ...props }) {

package/dist/{chunk-V25THXL6.mjs → chunk-DYFJAD2K.mjs}

@@ -1,4 +1,4 @@
-import { VectorInput } from './chunk-SIU54HGH.mjs';
+import { VectorInput } from './chunk-U4OZ35J3.mjs';
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-PJJ7CR5M.mjs → chunk-EBBHJLUX.mjs}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-KVFUDYD3.mjs';
+import { cn } from './chunk-HMN4IKTG.mjs';
 import { cva } from 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-VBIBT2KD.cjs → chunk-EKPJUR3U.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkDWD754BX_cjs = require('./chunk-DWD754BX.cjs');
+var chunkOHIB3TEN_cjs = require('./chunk-OHIB3TEN.cjs');
 var SliderPrimitive = require('@radix-ui/react-slider');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -61,7 +61,7 @@ var Slider = react.forwardRef(
         min,
         max,
         step,
-        className: chunkDWD754BX_cjs.cn(
+        className: chunkOHIB3TEN_cjs.cn(
           "relative",
           "flex",
           "w-full",
@@ -80,7 +80,7 @@ var Slider = react.forwardRef(
             SliderPrimitive__namespace.Track,
             {
               "data-slot": "slider-track",
-              className: chunkDWD754BX_cjs.cn(
+              className: chunkOHIB3TEN_cjs.cn(
                 "peer/slider-track",
                 "bg-line-primary",
                 "relative",
@@ -97,7 +97,7 @@ var Slider = react.forwardRef(
                 SliderPrimitive__namespace.Range,
                 {
                   "data-slot": "slider-range",
-                  className: chunkDWD754BX_cjs.cn(
+                  className: chunkOHIB3TEN_cjs.cn(
                     "bg-brand-primary",
                     "absolute",
                     "data-[disabled]:bg-bg-secondary",
@@ -113,7 +113,7 @@ var Slider = react.forwardRef(
             SliderPrimitive__namespace.Thumb,
             {
               "data-slot": "slider-thumb",
-              className: chunkDWD754BX_cjs.cn(
+              className: chunkOHIB3TEN_cjs.cn(
                 "ring-brand-primary/50",
                 "bg-brand-primary",
                 "block",
@@ -159,7 +159,7 @@ function SliderSteps({ step, min, max, currentValue }) {
       {
         "data-slot": "slider-step",
         style: { left: `calc(${step2.position}% + ${thumbInBoundsOffset}px)` },
-        className: chunkDWD754BX_cjs.cn(
+        className: chunkOHIB3TEN_cjs.cn(
           "absolute",
           "top-1/2",
           "translate-y-[-50%]",

package/dist/{chunk-CEV3ZNNG.mjs → chunk-ER54LTUC.mjs}

@@ -1,4 +1,4 @@
-import { VectorInput } from './chunk-SIU54HGH.mjs';
+import { VectorInput } from './chunk-U4OZ35J3.mjs';
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';