@vuer-ai/vuer-uikit 0.0.19 → 0.0.21

package/dist/chunk-QEY7BWIR.js

@@ -0,0 +1,208 @@
+'use strict';
+
+var chunkXXWQ4RVP_js = require('./chunk-XXWQ4RVP.js');
+var chunkCLTLT5XW_js = require('./chunk-CLTLT5XW.js');
+var react = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+var CursorProvider = ({
+  children,
+  maxOffsetX = 5,
+  maxOffsetY = 20,
+  cursorSize = 20,
+  transitionDuration = 100,
+  cursorClassName,
+  className,
+  as: Component = "div",
+  ...props
+}) => {
+  const [isClient, setIsClient] = react.useState(false);
+  const [isMouseInside, setIsMouseInside] = react.useState(false);
+  const [mousePosition, setMousePosition] = react.useState({ x: 0, y: 0 });
+  const [hoveredElementId, setHoveredElementId] = react.useState(null);
+  const [elementDimensions, setElementDimensions] = react.useState({
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+    right: 0,
+    bottom: 0
+  });
+  const hoveredElementRef = react.useRef(null);
+  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]);
+  const handleMouseEnter = react.useCallback(() => {
+    setIsMouseInside(true);
+  }, []);
+  const handleMouseLeave = react.useCallback(() => {
+    setIsMouseInside(false);
+    setHoveredElementId(null);
+    hoveredElementRef.current = null;
+  }, []);
+  const checkMouseInElement = react.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]);
+  react.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 = react.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 = react.useCallback(() => {
+    setHoveredElementId(null);
+    hoveredElementRef.current = null;
+  }, []);
+  const updateElementDimensions = react.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 = react.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 = react.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `pointer-events-none fixed ${styleClass} ${hoveredElementId ? "" : cursorClassName || ""}`,
+      style: {
+        ...cursorStyleObject,
+        backgroundColor: "var(--shadow-tertiary)"
+      }
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isClient && typeof document !== "undefined" && document.body && cursorElement && reactDom.createPortal(cursorElement, document.body),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkCLTLT5XW_js.CursorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ...props,
+        className: chunkXXWQ4RVP_js.cn(className),
+        style: {
+          cursor: isMouseInside && !hoveredElementId ? "none" : "auto",
+          ...props.style
+        },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children
+      }
+    ) })
+  ] });
+};
+
+exports.CursorProvider = CursorProvider;

package/dist/chunk-QJR6MCTR.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var react = require('react');
+var sonner = require('sonner');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/ui/toast.tsx
+var Toaster = ({ ...props }) => {
+  const [isClient, setIsClient] = react.useState(false);
+  react.useEffect(() => {
+    setIsClient(true);
+  }, []);
+  if (!isClient) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    sonner.Toaster,
+    {
+      toastOptions: {
+        className: "vk-toast liquid:liquid-bg",
+        descriptionClassName: "vk-toast-description"
+      },
+      ...props
+    }
+  );
+};
+
+Object.defineProperty(exports, "toast", {
+  enumerable: true,
+  get: function () { return sonner.toast; }
+});
+exports.Toaster = Toaster;

package/dist/chunk-QVUX6LLD.mjs

@@ -0,0 +1,270 @@
+import { cn } from './chunk-KTNZSZ5Y.mjs';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cva } from 'class-variance-authority';
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Select({ ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Group,
+    {
+      "data-slot": "select-group",
+      className: cn("space-y-xs", className),
+      ...props
+    }
+  );
+}
+function SelectValue({ ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+var selectTriggerVariants = cva(
+  [
+    "flex",
+    "items-center",
+    "justify-between",
+    "gap-2",
+    "rounded-uk-sm",
+    "bg-bg-secondary",
+    "whitespace-nowrap",
+    "shadow-xs",
+    "transition-[color,box-shadow]",
+    "outline-none",
+    "*:data-[slot=select-value]:line-clamp-1",
+    "*:data-[slot=select-value]:flex",
+    "*:data-[slot=select-value]:items-center",
+    "*:data-[slot=select-value]:gap-2",
+    "[&_svg]:shrink-0",
+    "[&_svg]:pointer-events-none",
+    "[&_svg:not([class*='text-'])]:text-muted-foreground"
+  ],
+  {
+    variants: {
+      state: {
+        default: ["hover:bg-bg-tertiary", "has-[input:focus]:bg-bg-quaternary"],
+        disabled: ["disabled:cursor-not-allowed", "bg-bg-tertiary", "text-text-tertiary"],
+        error: ["hover:bg-danger-primary/10", "bg-danger-primary/20"]
+      },
+      size: {
+        sm: "px-sm py-xs text-uk-sm h-5.5 [&_svg:not([class*='size-'])]:size-lg",
+        base: "px-md py-sm text-uk-md h-7 [&_svg:not([class*='size-'])]:size-[14px]",
+        lg: "px-lg py-sm text-uk-lg h-8 [&_svg:not([class*='size-'])]:size-xl"
+      }
+    },
+    defaultVariants: {
+      state: "default",
+      size: "base"
+    }
+  }
+);
+function SelectTrigger({
+  className,
+  size,
+  children,
+  disabled,
+  state,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        selectTriggerVariants({ size, className, state: disabled ? "disabled" : state })
+      ),
+      disabled,
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        [
+          "bg-bg-primary",
+          "data-[state=open]:animate-in",
+          "data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0",
+          "data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95",
+          "data-[state=open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-2",
+          "data-[side=left]:slide-in-from-right-2",
+          "data-[side=right]:slide-in-from-left-2",
+          "data-[side=top]:slide-in-from-bottom-2",
+          "relative",
+          "z-50",
+          "max-h-(--radix-select-content-available-height)",
+          "min-w-[8rem]",
+          "origin-(--radix-select-content-transform-origin)",
+          "overflow-x-hidden",
+          "overflow-y-auto",
+          "rounded-uk-md",
+          "shadow-md",
+          "shadow-[0_8px_20px_0_rgba(0,0,0,.80)]",
+          "liquid:liquid-bg"
+        ],
+        {
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1": position === "popper"
+        },
+        className
+      ),
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          SelectPrimitive.Viewport,
+          {
+            className: cn("p-md", {
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1": position === "popper"
+            }),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Label,
+    {
+      "data-slot": "select-label",
+      className: cn("text-text-secondary text-uk-xs px-2 py-1.5", className),
+      ...props
+    }
+  );
+}
+function SelectItem({ className, children, prefix, suffix, disabled, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      disabled,
+      className: cn(
+        [
+          "group/select-item",
+          "w-full",
+          "flex",
+          "gap-md",
+          "items-center",
+          "px-md",
+          "py-xs",
+          "relative",
+          "cursor-default",
+          "rounded-uk-xs",
+          "text-uk-xs",
+          "outline-hidden",
+          "select-none",
+          "focus:bg-bg-secondary",
+          "data-[state=checked]:bg-brand-primary",
+          "data-[disabled]:pointer-events-none",
+          "data-[disabled]:text-bg-quaternary",
+          "[&_svg]:pointer-events-none",
+          "[&_svg]:shrink-0",
+          "[&_svg:not([class*='size-'])]:size-4",
+          "[&_svg:not([class*='text-'])]:text-muted-foreground",
+          "*:[span]:last:flex",
+          "*:[span]:last:items-center",
+          "*:[span]:last:gap-2"
+        ],
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            "data-disabled": disabled,
+            className: cn([
+              "text-text-tertiary",
+              "flex",
+              "shrink-0",
+              "gap-0.5",
+              "data-[disabled=true]:text-bg-quaternary",
+              "group-data-[state=checked]/select-item:text-text-withbg"
+            ]),
+            children: prefix
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            "data-disabled": disabled,
+            className: cn(
+              "text-text-tertiary",
+              "ml-auto",
+              "flex",
+              "shrink-0",
+              "gap-0.5",
+              "data-[disabled=true]:text-bg-quaternary",
+              "group-data-[state=checked]/select-item:text-text-withbg"
+            ),
+            children: suffix
+          }
+        )
+      ]
+    }
+  );
+}
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Separator,
+    {
+      "data-slot": "select-separator",
+      className: cn("bg-line-primary my-lg pointer-events-none -mx-1 h-px", className),
+      ...props
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+    }
+  );
+}
+
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/chunk-QYRRQ65X.mjs

@@ -0,0 +1,115 @@
+import { cn } from './chunk-KTNZSZ5Y.mjs';
+import { composeRefs } from '@radix-ui/react-compose-refs';
+import { cva } from 'class-variance-authority';
+import { forwardRef, useRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var inputRootVariants = cva(
+  [
+    "px-1.5",
+    "flex",
+    "gap-md",
+    "items-center",
+    "rounded-uk-sm",
+    "overflow-hidden",
+    "bg-bg-secondary"
+  ],
+  {
+    variants: {
+      state: {
+        default: ["hover:bg-bg-tertiary", "has-[input:focus]:bg-bg-quaternary"],
+        disabled: ["disabled:cursor-not-allowed", "bg-bg-tertiary", "text-text-tertiary"],
+        error: ["hover:bg-danger-primary/10", "bg-danger-primary/20"]
+      },
+      size: {
+        sm: ["h-5.5", "text-uk-sm", "[&_.input-slot>svg:not([class*='size-'])]:size-lg"],
+        base: ["h-7", "text-uk-md", "[&_.input-slot>svg:not([class*='size-'])]:size-[14px]"],
+        lg: ["h-8", "text-uk-lg", "[&_.input-slot>svg:not([class*='size-'])]:size-xl"]
+      }
+    },
+    defaultVariants: {
+      state: "default",
+      size: "base"
+    }
+  }
+);
+var InputRoot = forwardRef(function InputRoot2({ style, className, side, children, disabled, state, size, type, inputClassName, ...props }, ref) {
+  const inputRef = useRef(null);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style,
+      "data-input": true,
+      className: cn(inputRootVariants({ size, state: disabled ? "disabled" : state }), className),
+      onClick: (event) => {
+        const target = event.target;
+        if (target.closest("input, button, a")) return;
+        const input = inputRef.current;
+        if (!input) return;
+        const isRightSlot = target.closest(`
+            .input-slot[data-side='right'],
+            .input-slot:not([data-side='right']) ~ .input-slot:not([data-side='left'])
+          `);
+        const cursorPosition = isRightSlot ? input.value.length : 0;
+        requestAnimationFrame(() => {
+          try {
+            input.setSelectionRange(cursorPosition, cursorPosition);
+          } catch {
+          }
+          input.focus();
+        });
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            spellCheck: "false",
+            ...props,
+            type,
+            "data-side": side,
+            disabled,
+            name: type ?? "text",
+            ref: composeRefs(inputRef, ref),
+            className: cn(
+              [
+                "w-full",
+                "h-full",
+                "outline-none",
+                "data-[side=right]:text-right",
+                "[input[type=number]]:font-number-input",
+                "[&::-webkit-inner-spin-button]:appearance-none",
+                "[&::-webkit-outer-spin-button]:appearance-none"
+              ],
+              inputClassName
+            )
+          }
+        ),
+        children
+      ]
+    }
+  );
+});
+var InputSlot = forwardRef(function({ className, children, side = "left", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-side": side,
+      ...props,
+      ref,
+      className: cn(
+        [
+          "input-slot",
+          "cursor-text",
+          "shrink-0",
+          "order-[0]",
+          "text-text-tertiary",
+          "data-[side=left]:-order-1"
+        ],
+        className
+      ),
+      children
+    }
+  );
+});
+
+export { InputRoot, InputSlot };