@vuer-ai/vuer-uikit 0.0.2 → 0.0.4

package/dist/chunk-66JQXJEV.mjs

@@ -0,0 +1,272 @@
+import { cn } from './chunk-HW6SLBO3.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(
+  [
+    // "data-[placeholder]:text-muted-foreground",
+    "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]:pointer-events-none",
+    "[&_svg]:shrink-0",
+    "[&_svg:not([class*='size-'])]:size-4",
+    "[&_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: "p-sm text-sm h-6.5",
+        base: "",
+        lg: ""
+      }
+    },
+    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: "size-4 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 px-2 py-1.5 text-xs", 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-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-6ILSFDR5.mjs

@@ -0,0 +1,161 @@
+import { InputRoot, InputSlot } from './chunk-25GQKTNF.mjs';
+import { cn } from './chunk-HW6SLBO3.mjs';
+import { useGesture } from '@use-gesture/react';
+import { forwardRef, useRef, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var getHoverElementAndIndex = (element, inputs) => {
+  if (!element) return null;
+  const container = element == null ? void 0 : element.closest("[data-input]");
+  const currentInput = container == null ? void 0 : container.querySelector("input");
+  if (!currentInput) return null;
+  return Array.from(inputs.values()).indexOf(currentInput);
+};
+var changeElementsHoverState = (inputs, range, changed) => {
+  const [first, last] = range;
+  Array.from(inputs.values()).forEach((input, i) => {
+    const container = input == null ? void 0 : input.closest("[data-input]");
+    if (first === null || last === null) {
+      container == null ? void 0 : container.setAttribute("data-hover", "none");
+    } else if (i >= Math.min(first, last) && i <= Math.max(first, last)) {
+      container == null ? void 0 : container.setAttribute("data-hover", changed !== "none" ? changed : "down");
+    } else {
+      container == null ? void 0 : container.setAttribute("data-hover", "none");
+    }
+  });
+};
+var InputNumbers = forwardRef(function InputNumbers2({ size, value, onValuesChange, prefix, step = 0.1 }, ref) {
+  const inputs = useRef(/* @__PURE__ */ new Map());
+  const selectRange = useRef([null, null]);
+  const inputChange = useRef(false);
+  const stopClick = useCallback(() => {
+    const stopClick2 = (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      document.removeEventListener("click", stopClick2, true);
+    };
+    document.addEventListener("click", stopClick2, true);
+  }, []);
+  const bind = useGesture({
+    onDrag: ({ delta: [dx], event, initial, distance: [, oy], xy, memo = 0 }) => {
+      event.stopPropagation();
+      event.preventDefault();
+      if (selectRange.current[0] === null) {
+        selectRange.current[0] = getHoverElementAndIndex(
+          document.elementFromPoint(...initial),
+          inputs.current
+        );
+      }
+      let newMX = memo + dx / 2;
+      if (Math.abs(newMX) >= (inputChange.current ? 1 : 5)) {
+        const multiplyStep = event.shiftKey ? 5 : event.altKey ? 1 / 5 : 1;
+        const newValue = value.map((v, i) => {
+          const [first, last] = selectRange.current;
+          if (first === null || last === null) {
+            return v;
+          } else if (i <= Math.max(first, last) && i >= Math.min(first, last)) {
+            return Number(((v || 0) + Math.floor(newMX) * step * multiplyStep).toPrecision(6));
+          } else {
+            return v;
+          }
+        });
+        onValuesChange == null ? void 0 : onValuesChange(newValue);
+        newMX = 0;
+        inputChange.current = true;
+        changeElementsHoverState(inputs.current, selectRange.current, "x");
+        stopClick();
+      }
+      if (!inputChange.current) {
+        const currentElement = document.elementFromPoint(...xy);
+        const currentIndex = getHoverElementAndIndex(currentElement, inputs.current);
+        selectRange.current[1] = currentIndex ?? selectRange.current[1];
+        changeElementsHoverState(inputs.current, selectRange.current, oy !== 0 ? "y" : "none");
+        stopClick();
+      }
+      return newMX;
+    },
+    onDragEnd: () => {
+      selectRange.current = [null, null];
+      inputChange.current = false;
+      changeElementsHoverState(inputs.current, selectRange.current, "none");
+    }
+  });
+  const valueChangeHandler = useCallback(
+    (index) => {
+      return (e) => {
+        const inputValue = e.target.value;
+        if (inputValue === "" || !isNaN(Number(inputValue))) {
+          const newValue = value.map((v, i) => {
+            if (inputValue === "") {
+              return "";
+            }
+            return i === index ? Number(inputValue) : v;
+          });
+          onValuesChange == null ? void 0 : onValuesChange(newValue);
+        }
+      };
+    },
+    [onValuesChange, value]
+  );
+  if ((value == null ? void 0 : value.length) === 0) {
+    throw new Error("`value` cannot be an empty array");
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...bind(),
+      className: cn("gap-xs flex cursor-crosshair touch-none select-none flex-col"),
+      children: value.map((item, index) => /* @__PURE__ */ jsx(
+        InputRoot,
+        {
+          ref: (r) => {
+            inputs.current.set(index.toString(), r);
+            return () => {
+              inputs.current.delete(index.toString());
+            };
+          },
+          size,
+          value: item,
+          onClick: () => {
+            var _a;
+            (_a = inputs.current.get(index.toString())) == null ? void 0 : _a.focus();
+          },
+          onChange: valueChangeHandler(index),
+          "data-hover": "none",
+          className: cn([
+            "group/number-input",
+            "cursor-crosshair",
+            "data-[hover=down]:bg-bg-tertiary",
+            "data-[hover=x]:bg-bg-tertiary",
+            "data-[hover=y]:bg-bg-tertiary",
+            "data-[hover=down]:cursor-move",
+            "data-[hover=x]:cursor-col-resize",
+            "data-[hover=y]:cursor-row-resize"
+          ]),
+          inputClassName: cn([
+            "cursor-crosshair",
+            "group-data-[hover=down]/number-input:cursor-move",
+            "group-data-[hover=x]/number-input:cursor-col-resize",
+            "group-data-[hover=y]/number-input:cursor-row-resize"
+          ]),
+          children: /* @__PURE__ */ jsx(
+            InputSlot,
+            {
+              className: cn(
+                "cursor-crosshair",
+                "group-data-[hover=down]/number-input:cursor-move",
+                "group-data-[hover=x]/number-input:cursor-col-resize",
+                "group-data-[hover=y]/number-input:cursor-row-resize"
+              ),
+              children: prefix == null ? void 0 : prefix[index]
+            }
+          )
+        },
+        index
+      ))
+    }
+  );
+});
+
+export { InputNumbers };

package/dist/chunk-6L4KPPOD.mjs

@@ -0,0 +1,90 @@
+import { motion } from 'framer-motion';
+import { createContext, useState, useEffect, useCallback, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/highlight-cursor/tabs-cursor-context.tsx
+var TabsCursorContext = createContext(null);
+var TabsCursorProvider = ({
+  children,
+  className,
+  ...props
+}) => {
+  const [cursorTarget, setCursorTarget] = useState(null);
+  const [targetRect, setTargetRect] = useState(null);
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const [isMouseInside, setIsMouseInside] = useState(false);
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      setMousePosition({ x: e.clientX, y: e.clientY });
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    return () => document.removeEventListener("mousemove", handleMouseMove);
+  }, []);
+  useEffect(() => {
+    if (cursorTarget) {
+      setTargetRect(cursorTarget.getBoundingClientRect());
+    } else {
+      setTargetRect(null);
+    }
+  }, [cursorTarget]);
+  const handleMouseEnter = useCallback(() => {
+    setIsMouseInside(true);
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    setIsMouseInside(false);
+    setCursorTarget(null);
+  }, []);
+  const contextValue = { setCursorTarget };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className,
+      style: {
+        cursor: isMouseInside && !cursorTarget ? "none" : "auto",
+        ...props.style
+      },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: /* @__PURE__ */ jsxs(TabsCursorContext.Provider, { value: contextValue, children: [
+        children,
+        isMouseInside && createPortal(
+          /* @__PURE__ */ jsx(
+            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 ? 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 = useContext(TabsCursorContext);
+  if (!context) {
+    return { setCursorTarget: () => {
+    } };
+  }
+  return context;
+};
+
+export { TabsCursorProvider, useTabsCursor };

package/dist/chunk-75QDQ67T.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/ui/theme-context.tsx
+var initialState = {
+  theme: "system",
+  setTheme: () => null
+};
+var ThemeProviderContext = react.createContext(initialState);
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vuer-theme",
+  ...props
+}) {
+  const [theme, setTheme] = react.useState(() => {
+    return localStorage.getItem(storageKey) || defaultTheme;
+  });
+  react.useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove("light", "dark", "liquidlight", "liquiddark", "system");
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      root.classList.add(systemTheme);
+      return;
+    }
+    root.classList.add(theme);
+  }, [theme]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ThemeProviderContext.Provider,
+    {
+      ...props,
+      value: react.useMemo(
+        () => ({
+          theme,
+          setTheme: (theme2) => {
+            localStorage.setItem(storageKey, theme2);
+            setTheme(theme2);
+          }
+        }),
+        [storageKey, theme]
+      ),
+      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-7A7VNE3J.mjs

@@ -0,0 +1,31 @@
+import { cn } from './chunk-HW6SLBO3.mjs';
+import { Slot } from '@radix-ui/react-slot';
+import { jsx } from 'react/jsx-runtime';
+
+function Layout({
+  asChild,
+  className,
+  children,
+  align = "start",
+  orientation = "horizontal"
+}) {
+  const Com = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Com,
+    {
+      className: cn(
+        {
+          "gap-xs flex flex-col": orientation === "horizontal",
+          "gap-xs grid grid-cols-[1fr_2fr] text-center": orientation === "vertical",
+          "items-baseline": align === "start",
+          "items-center": align === "center",
+          "items-end": align === "end"
+        },
+        className
+      ),
+      children
+    }
+  );
+}
+
+export { Layout };