@vuer-ai/vuer-uikit 0.0.19 → 0.0.21

package/dist/chunk-OOI3SJDU.mjs

@@ -0,0 +1,206 @@
+import { cn } from './chunk-KTNZSZ5Y.mjs';
+import { CursorContext } from './chunk-3FR3WKI4.mjs';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var CursorProvider = ({
+  children,
+  maxOffsetX = 5,
+  maxOffsetY = 20,
+  cursorSize = 20,
+  transitionDuration = 100,
+  cursorClassName,
+  className,
+  as: Component = "div",
+  ...props
+}) => {
+  const [isClient, setIsClient] = useState(false);
+  const [isMouseInside, setIsMouseInside] = useState(false);
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const [hoveredElementId, setHoveredElementId] = useState(null);
+  const [elementDimensions, setElementDimensions] = useState({
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+    right: 0,
+    bottom: 0
+  });
+  const hoveredElementRef = useRef(null);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  useEffect(() => {
+    if (!isClient) return;
+    const handleMouseMove = (e) => {
+      setMousePosition({ x: e.clientX, y: e.clientY });
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    return () => document.removeEventListener("mousemove", handleMouseMove);
+  }, [isClient]);
+  const handleMouseEnter = useCallback(() => {
+    setIsMouseInside(true);
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    setIsMouseInside(false);
+    setHoveredElementId(null);
+    hoveredElementRef.current = null;
+  }, []);
+  const checkMouseInElement = useCallback(() => {
+    if (!hoveredElementRef.current || !hoveredElementId) {
+      return;
+    }
+    const rect = hoveredElementRef.current.getBoundingClientRect();
+    setElementDimensions({
+      width: rect.width,
+      height: rect.height,
+      x: rect.left,
+      y: rect.top,
+      right: rect.right,
+      bottom: rect.bottom
+    });
+    const isInside = mousePosition.x >= rect.left && mousePosition.x <= rect.right && mousePosition.y >= rect.top && mousePosition.y <= rect.bottom;
+    if (!isInside) {
+      setHoveredElementId(null);
+      hoveredElementRef.current = null;
+    }
+  }, [mousePosition, hoveredElementId]);
+  useEffect(() => {
+    if (!isClient) return;
+    const handleScroll = () => {
+      checkMouseInElement();
+    };
+    document.addEventListener("scroll", handleScroll, { passive: true, capture: true });
+    return () => {
+      document.removeEventListener("scroll", handleScroll, { capture: true });
+    };
+  }, [checkMouseInElement, isClient]);
+  const registerHoveredElement = useCallback(
+    (id, dimensions, element) => {
+      setHoveredElementId(id);
+      setElementDimensions({
+        width: dimensions.width,
+        height: dimensions.height,
+        x: dimensions.left,
+        y: dimensions.top,
+        right: dimensions.right,
+        bottom: dimensions.bottom
+      });
+      if (element) {
+        hoveredElementRef.current = element;
+      }
+    },
+    []
+  );
+  const unregisterHoveredElement = useCallback(() => {
+    setHoveredElementId(null);
+    hoveredElementRef.current = null;
+  }, []);
+  const updateElementDimensions = useCallback(
+    (dimensions) => {
+      if (hoveredElementId) {
+        setElementDimensions({
+          width: dimensions.width,
+          height: dimensions.height,
+          x: dimensions.left,
+          y: dimensions.top,
+          right: dimensions.right,
+          bottom: dimensions.bottom
+        });
+      }
+    },
+    [hoveredElementId]
+  );
+  const getCursorPosition = () => {
+    if (!hoveredElementId) {
+      return {
+        x: mousePosition.x - cursorSize / 2,
+        y: mousePosition.y - cursorSize / 2
+      };
+    }
+    const elementCenterX = elementDimensions.x + elementDimensions.width / 2;
+    const elementCenterY = elementDimensions.y + elementDimensions.height / 2;
+    const offsetX = (mousePosition.x - elementCenterX) * 0.1;
+    const offsetY = (mousePosition.y - elementCenterY) * 0.1;
+    const boundedOffsetX = Math.max(-maxOffsetX, Math.min(maxOffsetX, offsetX));
+    const boundedOffsetY = Math.max(-maxOffsetY, Math.min(maxOffsetY, offsetY));
+    return {
+      x: elementDimensions.x + boundedOffsetX,
+      y: elementDimensions.y + boundedOffsetY
+    };
+  };
+  const contextValue = useMemo(
+    () => ({
+      // State values that change during component lifecycle
+      mousePosition,
+      hoveredElementId,
+      elementDimensions,
+      // Callbacks that should be stable references
+      registerHoveredElement,
+      unregisterHoveredElement,
+      updateElementDimensions
+    }),
+    [
+      mousePosition,
+      hoveredElementId,
+      elementDimensions,
+      registerHoveredElement,
+      unregisterHoveredElement,
+      updateElementDimensions
+    ]
+  );
+  const cursorPosition = getCursorPosition();
+  const cursorStyleObject = useMemo(
+    () => ({
+      left: cursorPosition.x,
+      top: cursorPosition.y,
+      width: hoveredElementId ? elementDimensions.width > 0 ? elementDimensions.width : cursorSize : cursorSize,
+      height: hoveredElementId ? elementDimensions.height > 0 ? elementDimensions.height : cursorSize : cursorSize,
+      willChange: "transform, width, height"
+    }),
+    [
+      cursorPosition.x,
+      cursorPosition.y,
+      hoveredElementId,
+      elementDimensions.width,
+      elementDimensions.height,
+      cursorSize
+    ]
+  );
+  let styleClass;
+  if (hoveredElementId) {
+    styleClass = `opacity-[0.05] rounded-md transition-[width,height,left,top] duration-${transitionDuration} ease-out`;
+  } else {
+    styleClass = `opacity-90 rounded-xl z-10 transition-[width,height,left,top] duration-${transitionDuration} ease-out transition-opacity duration-${transitionDuration}`;
+  }
+  const cursorElement = isClient && isMouseInside && /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `pointer-events-none fixed ${styleClass} ${hoveredElementId ? "" : cursorClassName || ""}`,
+      style: {
+        ...cursorStyleObject,
+        backgroundColor: "var(--shadow-tertiary)"
+      }
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isClient && typeof document !== "undefined" && document.body && cursorElement && createPortal(cursorElement, document.body),
+    /* @__PURE__ */ jsx(CursorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      Component,
+      {
+        ...props,
+        className: cn(className),
+        style: {
+          cursor: isMouseInside && !hoveredElementId ? "none" : "auto",
+          ...props.style
+        },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children
+      }
+    ) })
+  ] });
+};
+
+export { CursorProvider };

package/dist/chunk-OQ237S4Z.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var chunkXXWQ4RVP_js = require('./chunk-XXWQ4RVP.js');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var buttonVariants = classVarianceAuthority.cva(
+  [
+    "inline-flex",
+    "cursor-pointer",
+    "items-center",
+    "justify-center",
+    "shrink-0",
+    "whitespace-nowrap",
+    "rounded-uk-sm",
+    "font-medium",
+    "transition-all",
+    "[&_svg]:shrink-0 ",
+    "[&_svg]:pointer-events-none",
+    "outline-none",
+    "disabled:pointer-events-none",
+    "disabled:bg-bg-tertiary",
+    "disabled:text-text-tertiary",
+    "focus-visible:border-ring",
+    "focus-visible:ring-ring/50",
+    "focus-visible:ring-[3px]",
+    "focus-visible:bg-brand-tertiary",
+    "aria-invalid:ring-destructive/20",
+    "aria-invalid:border-destructive"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-brand-primary",
+          "text-text-withbg",
+          "hover:bg-brand-secondary",
+          "active:bg-brand-tertiary"
+        ],
+        secondary: [
+          "bg-bg-secondary",
+          "text-text-highlight",
+          "hover:bg-bg-quaternary",
+          "active:bg-bg-tertiary"
+        ],
+        destructive: [
+          "bg-danger-primary",
+          "text-text-withbg",
+          "hover:bg-danger-secondary",
+          "active:bg-danger-tertiary"
+        ],
+        ghost: [
+          "text-text-primary",
+          "hover:bg-bg-tertiary",
+          "hover:text-text-secondary",
+          "active:bg-bg-secondary"
+        ],
+        link: ["text-text-primary", "underline-offset-4", "hover:underline"]
+      },
+      size: {
+        sm: ["text-uk-sm", "h-5.5", "gap-xxs", "px-md", "[&_svg:not([class*='size-'])]:size-3"],
+        base: ["text-uk-md", "h-7 ", "gap-xs", " px-lg", "[&_svg:not([class*='size-'])]:size-3.5"],
+        lg: ["text-uk-lg", "h-8", " gap-xs", "px-xl", "[&_svg:not([class*='size-'])]:size-4"]
+      },
+      icon: { false: null, true: null }
+    },
+    compoundVariants: [
+      { size: "sm", icon: true, class: ["px-xs", "py-xs", " size-5.5"] },
+      { size: "base", icon: true, class: ["px-sm", "py-sm", "size-7"] },
+      { size: "lg", icon: true, class: ["px-md", "py-md", " size-8"] }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "base",
+      icon: false
+    }
+  }
+);
+var Button = react.forwardRef(function Button2({ className, variant, size, icon, asChild = false, ...props }, ref) {
+  const Comp = asChild ? reactSlot.Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "button",
+      className: chunkXXWQ4RVP_js.cn(buttonVariants({ variant, size, icon, className })),
+      ...props
+    }
+  );
+});
+
+exports.Button = Button;

package/dist/chunk-OTPUWWEB.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var framerMotion = require('framer-motion');
+var react = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/highlight-cursor/tabs-cursor-context.tsx
+var TabsCursorContext = react.createContext(null);
+var TabsCursorProvider = ({
+  children,
+  className,
+  ...props
+}) => {
+  const [isClient, setIsClient] = react.useState(false);
+  const [cursorTarget, setCursorTarget] = react.useState(null);
+  const [targetRect, setTargetRect] = react.useState(null);
+  const [mousePosition, setMousePosition] = react.useState({ x: 0, y: 0 });
+  const [isMouseInside, setIsMouseInside] = react.useState(false);
+  react.useEffect(() => {
+    setIsClient(true);
+  }, []);
+  react.useEffect(() => {
+    if (!isClient) return;
+    const handleMouseMove = (e) => {
+      setMousePosition({ x: e.clientX, y: e.clientY });
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    return () => document.removeEventListener("mousemove", handleMouseMove);
+  }, [isClient]);
+  react.useEffect(() => {
+    if (cursorTarget) {
+      setTargetRect(cursorTarget.getBoundingClientRect());
+    } else {
+      setTargetRect(null);
+    }
+  }, [cursorTarget]);
+  const handleMouseEnter = react.useCallback(() => {
+    setIsMouseInside(true);
+  }, []);
+  const handleMouseLeave = react.useCallback(() => {
+    setIsMouseInside(false);
+    setCursorTarget(null);
+  }, []);
+  const contextValue = { setCursorTarget };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className,
+      style: {
+        cursor: isMouseInside && !cursorTarget ? "none" : "auto",
+        ...props.style
+      },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(TabsCursorContext.Provider, { value: contextValue, children: [
+        children,
+        isClient && isMouseInside && typeof document !== "undefined" && document.body && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              className: "pointer-events-none",
+              initial: false,
+              animate: {
+                x: targetRect ? targetRect.left : mousePosition.x - 8,
+                y: targetRect ? targetRect.top : mousePosition.y - 8,
+                width: targetRect ? targetRect.width : 16,
+                height: targetRect ? targetRect.height : 16,
+                borderRadius: targetRect && cursorTarget && typeof window !== "undefined" ? getComputedStyle(cursorTarget).borderRadius : "50%"
+              },
+              transition: { type: "spring", stiffness: 1e3, damping: 60, mass: 1 },
+              style: {
+                position: "fixed",
+                top: 0,
+                left: 0,
+                backgroundColor: "var(--shadow-tertiary)",
+                zIndex: 9999
+              }
+            }
+          ),
+          document.body
+        )
+      ] })
+    }
+  );
+};
+var useTabsCursor = () => {
+  const context = react.useContext(TabsCursorContext);
+  if (!context) {
+    return { setCursorTarget: () => {
+    } };
+  }
+  return context;
+};
+
+exports.TabsCursorProvider = TabsCursorProvider;
+exports.useTabsCursor = useTabsCursor;

package/dist/chunk-PIR7EZC6.js

@@ -0,0 +1,187 @@
+'use strict';
+
+var chunkXXWQ4RVP_js = require('./chunk-XXWQ4RVP.js');
+var SliderPrimitive = require('@radix-ui/react-slider');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
+
+var Slider = react.forwardRef(function Slider2({
+  className,
+  defaultValue,
+  value,
+  onValueChange,
+  showStep = false,
+  step = 1,
+  min = 0,
+  max = 100,
+  ...props
+}, ref) {
+  const [currentValue, setCurrentValue] = react.useState(value ?? defaultValue ?? [0]);
+  const _values = react.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
+    [value, defaultValue, min, max]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SliderPrimitive__namespace.Root,
+    {
+      "data-slot": "slider",
+      value,
+      defaultValue,
+      onValueChange: (v) => {
+        onValueChange == null ? void 0 : onValueChange(v);
+        setCurrentValue(v);
+      },
+      ref,
+      min,
+      max,
+      step,
+      className: chunkXXWQ4RVP_js.cn(
+        "relative",
+        "flex",
+        "w-full",
+        "touch-none",
+        "select-none",
+        "items-center",
+        "data-[orientation=vertical]:h-full",
+        "data-[orientation=vertical]:min-h-44",
+        "data-[orientation=vertical]:w-auto",
+        "data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SliderPrimitive__namespace.Track,
+          {
+            "data-slot": "slider-track",
+            className: chunkXXWQ4RVP_js.cn(
+              "peer/slider-track",
+              "bg-line-primary",
+              "relative",
+              "grow",
+              "overflow-hidden",
+              "rounded-full",
+              "data-[disabled]:bg-bg-secondary",
+              "data-[orientation=vertical]:w-0.5",
+              "data-[orientation=vertical]:h-full",
+              "data-[orientation=horizontal]:h-0.5",
+              "data-[orientation=horizontal]:w-full"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              SliderPrimitive__namespace.Range,
+              {
+                "data-slot": "slider-range",
+                className: chunkXXWQ4RVP_js.cn(
+                  "bg-brand-primary",
+                  "absolute",
+                  "data-[disabled]:bg-bg-secondary",
+                  "data-[orientation=vertical]:w-full",
+                  "data-[orientation=horizontal]:h-full"
+                )
+              }
+            )
+          }
+        ),
+        showStep && /* @__PURE__ */ jsxRuntime.jsx(SliderSteps, { currentValue, max, min, step }),
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          SliderPrimitive__namespace.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: chunkXXWQ4RVP_js.cn(
+              "ring-brand-primary/50",
+              "bg-brand-primary",
+              "block",
+              "h-4",
+              "w-[0.6rem]",
+              "shrink-0",
+              "rounded-[3px]",
+              "transition-[color,box-shadow]",
+              "hover:ring-4",
+              "hover:cursor-ew-resize",
+              "focus-visible:ring-4",
+              "focus-visible:outline-hidden",
+              "data-[disabled]:bg-bg-tertiary",
+              "data-[disabled]:pointer-events-none"
+            )
+          },
+          index
+        ))
+      ]
+    }
+  );
+});
+function SliderSteps({ step, min, max, currentValue }) {
+  const steps = react.useMemo(() => {
+    const value = max - min;
+    const stepCount = Math.ceil(value / step);
+    return Array.from({ length: stepCount + 1 }, (_, i) => {
+      return { position: Math.min(100 / value * (i * step), 100), v: i * step + min };
+    });
+  }, [max, min, step]);
+  const [minRange, maxRange] = react.useMemo(() => {
+    if (currentValue.length > 1) {
+      return [Math.min(...currentValue), Math.max(...currentValue)];
+    } else {
+      return [0, ...currentValue];
+    }
+  }, [currentValue]);
+  return steps.map((step2, i) => {
+    const thumbInBoundsOffset = getThumbInBoundsOffset(9.6, step2.position, 1);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "data-slot": "slider-step",
+        style: { left: `calc(${step2.position}% + ${thumbInBoundsOffset}px)` },
+        className: chunkXXWQ4RVP_js.cn(
+          "absolute",
+          "top-1/2",
+          "translate-y-[-50%]",
+          "translate-x-[-50%]",
+          "bg-brand-primary",
+          "block",
+          "h-[5pt]",
+          "w-[1pt]",
+          "shrink-0",
+          "rounded-[1px]",
+          "peer-has-data-[disabled]/slider-track:bg-bg-tertiary",
+          { "bg-bg-tertiary": step2.v < minRange || step2.v > maxRange }
+        )
+      },
+      i
+    );
+  });
+}
+function getThumbInBoundsOffset(width, left, direction) {
+  const halfWidth = width / 2;
+  const halfPercent = 50;
+  const offset = linearScale([0, halfPercent], [0, halfWidth]);
+  return (halfWidth - offset(left) * direction) * direction;
+}
+function linearScale(input, output) {
+  return (value) => {
+    const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+    return output[0] + ratio * (value - input[0]);
+  };
+}
+
+exports.Slider = Slider;

package/dist/chunk-PVRQNCSJ.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var chunkEOFYA6CS_js = require('./chunk-EOFYA6CS.js');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var initialState = {
+  theme: "system",
+  setTheme: () => null
+};
+var ThemeProviderContext = react.createContext(initialState);
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vuer-theme",
+  ...props
+}) {
+  const [theme, setTheme] = chunkEOFYA6CS_js.useLocalStorage(storageKey, defaultTheme);
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const root = window.document.documentElement;
+    root.classList.remove("light", "dark", "liquidlight", "liquiddark", "system");
+    root.removeAttribute("data-theme");
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      root.classList.add(systemTheme);
+      root.setAttribute("data-theme", "auto");
+      return;
+    }
+    root.classList.add(theme);
+    root.setAttribute("data-theme", theme);
+  }, [theme]);
+  const value = react.useMemo(
+    () => ({
+      theme,
+      setTheme
+    }),
+    [theme, setTheme]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeProviderContext.Provider, { ...props, value, children });
+}
+var useTheme = () => {
+  const context = react.useContext(ThemeProviderContext);
+  if (context === void 0) throw new Error("useTheme must be used within a ThemeProvider");
+  return context;
+};
+
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;

package/dist/chunk-Q5KEB4UK.mjs

@@ -0,0 +1,51 @@
+import { useState, useCallback } from 'react';
+
+// src/utils/use-local-storage.ts
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = useState(() => {
+    if (typeof window === "undefined") {
+      return initialValue;
+    }
+    try {
+      const item = window.localStorage.getItem(key);
+      if (item === null) return initialValue;
+      if (typeof initialValue === "string") {
+        return item;
+      } else if (typeof initialValue === "number") {
+        return parseFloat(item) || initialValue;
+      } else if (typeof initialValue === "boolean") {
+        return item === "true";
+      } else {
+        return JSON.parse(item);
+      }
+    } catch (error) {
+      console.warn(`Error reading localStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+  const setValue = useCallback(
+    (value) => {
+      try {
+        const valueToStore = value instanceof Function ? value(storedValue) : value;
+        setStoredValue(valueToStore);
+        if (typeof window !== "undefined") {
+          let stringValue;
+          if (typeof valueToStore === "string") {
+            stringValue = valueToStore;
+          } else if (typeof valueToStore === "number" || typeof valueToStore === "boolean") {
+            stringValue = valueToStore.toString();
+          } else {
+            stringValue = JSON.stringify(valueToStore);
+          }
+          window.localStorage.setItem(key, stringValue);
+        }
+      } catch (error) {
+        console.warn(`Error setting localStorage key "${key}":`, error);
+      }
+    },
+    [key, storedValue]
+  );
+  return [storedValue, setValue];
+}
+
+export { useLocalStorage };