@vuer-ai/vuer-uikit 0.0.2 → 0.0.3

package/dist/chunk-CZSRIDXN.mjs

@@ -0,0 +1,165 @@
+import { cn } from './chunk-HW6SLBO3.mjs';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { forwardRef, useState, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Slider = forwardRef(function Slider2({
+  className,
+  defaultValue,
+  value,
+  onValueChange,
+  showStep = false,
+  step = 1,
+  min = 0,
+  max = 100,
+  ...props
+}, ref) {
+  const [currentValue, setCurrentValue] = useState(value ?? defaultValue ?? [0]);
+  const _values = useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
+    [value, defaultValue, min, max]
+  );
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      "data-slot": "slider",
+      value,
+      defaultValue,
+      onValueChange: (v) => {
+        onValueChange == null ? void 0 : onValueChange(v);
+        setCurrentValue(v);
+      },
+      ref,
+      min,
+      max,
+      step,
+      className: 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__ */ jsx(
+          SliderPrimitive.Track,
+          {
+            "data-slot": "slider-track",
+            className: 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__ */ jsx(
+              SliderPrimitive.Range,
+              {
+                "data-slot": "slider-range",
+                className: cn(
+                  "bg-brand-primary",
+                  "absolute",
+                  "data-[disabled]:bg-bg-secondary",
+                  "data-[orientation=vertical]:w-full",
+                  "data-[orientation=horizontal]:h-full"
+                )
+              }
+            )
+          }
+        ),
+        showStep && /* @__PURE__ */ jsx(SliderSteps, { currentValue, max, min, step }),
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(
+          SliderPrimitive.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: 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 = 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] = 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__ */ jsx(
+      "span",
+      {
+        "data-slot": "slider-step",
+        style: { left: `calc(${step2.position}% + ${thumbInBoundsOffset}px)` },
+        className: 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]);
+  };
+}
+
+export { Slider };

package/dist/chunk-D4C5V4EN.mjs

@@ -0,0 +1,53 @@
+import { createContext, useState, useEffect, useMemo, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/ui/theme-context.tsx
+var initialState = {
+  theme: "system",
+  setTheme: () => null
+};
+var ThemeProviderContext = createContext(initialState);
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vuer-theme",
+  ...props
+}) {
+  const [theme, setTheme] = useState(() => {
+    return localStorage.getItem(storageKey) || defaultTheme;
+  });
+  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__ */ jsx(
+    ThemeProviderContext.Provider,
+    {
+      ...props,
+      value: useMemo(
+        () => ({
+          theme,
+          setTheme: (theme2) => {
+            localStorage.setItem(storageKey, theme2);
+            setTheme(theme2);
+          }
+        }),
+        [storageKey, theme]
+      ),
+      children
+    }
+  );
+}
+var useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+  if (context === void 0) throw new Error("useTheme must be used within a ThemeProvider");
+  return context;
+};
+
+export { ThemeProvider, useTheme };

package/dist/chunk-DQGTWUID.js

@@ -0,0 +1,186 @@
+'use strict';
+
+var chunkUWO6RBCE_js = require('./chunk-UWO6RBCE.js');
+var DialogPrimitive = require('@radix-ui/react-dialog');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-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 DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+
+function Modal({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "modal", ...props });
+}
+function ModalTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { "data-slot": "modal-trigger", ...props });
+}
+function ModalPortal({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "modal-portal", ...props });
+}
+function ModalClose({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { "data-slot": "modal-close", ...props });
+}
+var modalOverlayVariants = classVarianceAuthority.cva([
+  "fixed",
+  "inset-0",
+  "z-100",
+  "bg-bg-mask",
+  "transition-all",
+  "duration-200"
+]);
+function ModalOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Overlay,
+    {
+      "data-slot": "modal-overlay",
+      className: chunkUWO6RBCE_js.cn(modalOverlayVariants(), className),
+      ...props
+    }
+  );
+}
+var modalContentVariants = classVarianceAuthority.cva([
+  "px-xl",
+  "pb-xl",
+  "bg-bg-primary",
+  "rounded-xl",
+  "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+  "w-[320px]",
+  "min-w-[280px]",
+  "duration-200",
+  "transition-all",
+  "fixed",
+  "translate-x-[-50%]",
+  "translate-y-[-50%]",
+  "z-101",
+  "left-1/2",
+  "top-1/2",
+  "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"
+]);
+function ModalContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ModalPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogPrimitive__namespace.Content,
+      {
+        "data-slot": "modal-content",
+        className: chunkUWO6RBCE_js.cn(modalContentVariants(), className),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
+            DialogPrimitive__namespace.Close,
+            {
+              "data-slot": "modal-close",
+              className: chunkUWO6RBCE_js.cn(
+                "absolute",
+                "right-[16px]",
+                "top-[16px]",
+                "w-[16px]",
+                "h-[16px]",
+                "rounded-sm",
+                "cursor-pointer",
+                "hover:bg-bg-tertiary",
+                "text-text-primary",
+                "flex",
+                "items-center",
+                "justify-center"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function ModalHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "modal-header", className: chunkUWO6RBCE_js.cn("flex flex-col", className), ...props });
+}
+function ModalTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Title,
+    {
+      "data-slot": "modal-title",
+      className: chunkUWO6RBCE_js.cn(
+        "text-text-highlight",
+        "text-[14px]",
+        "leading-[20px]",
+        "font-medium",
+        "py-lg",
+        "text-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ModalDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Description,
+    {
+      "data-slot": "modal-description",
+      className: chunkUWO6RBCE_js.cn(
+        "text-text-primary",
+        "text-[14px]",
+        "leading-[20px]",
+        "font-normal",
+        "pb-lg",
+        "text-start",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ModalFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "modal-footer",
+      className: chunkUWO6RBCE_js.cn("w-full", "flex", "justify-end", "gap-[8px]", className),
+      ...props
+    }
+  );
+}
+
+exports.Modal = Modal;
+exports.ModalClose = ModalClose;
+exports.ModalContent = ModalContent;
+exports.ModalDescription = ModalDescription;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
+exports.ModalOverlay = ModalOverlay;
+exports.ModalPortal = ModalPortal;
+exports.ModalTitle = ModalTitle;
+exports.ModalTrigger = ModalTrigger;

package/dist/chunk-DWIK2CUV.mjs

@@ -0,0 +1,45 @@
+import { cn } from './chunk-HW6SLBO3.mjs';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { jsx } from 'react/jsx-runtime';
+
+function Switch({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      "data-slot": "switch",
+      className: cn(
+        "group",
+        "w-[32px]",
+        "h-[16px]",
+        "rounded-[24px]",
+        "bg-bg-tertiary",
+        "data-[state=checked]:bg-brand-primary",
+        "disabled:bg-bg-secondary",
+        "disabled:cursor-not-allowed",
+        "disabled:data-[state=checked]:bg-bg-secondary",
+        "disabled:data-[state=unchecked]:bg-bg-secondary",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        SwitchPrimitive.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: cn(
+            "block",
+            "size-[12px]",
+            "rounded-full",
+            "bg-icon-withbg",
+            "group-disabled:bg-bg-primary",
+            "transition-transform",
+            "duration-200",
+            "translate-x-[2px]",
+            "data-[state=checked]:translate-x-[18px]"
+          )
+        }
+      )
+    }
+  );
+}
+
+export { Switch };

package/dist/chunk-FXIL4NQZ.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var chunkUWO6RBCE_js = require('./chunk-UWO6RBCE.js');
+var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
+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 CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
+
+function Collapsible({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.CollapsibleTrigger, { "data-slot": "collapsible-trigger", ...props });
+}
+function CollapsibleContent2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CollapsiblePrimitive__namespace.CollapsibleContent,
+    {
+      "data-slot": "collapsible-content",
+      className: chunkUWO6RBCE_js.cn(
+        [
+          "overflow-hidden",
+          "data-[state=open]:animate-collapsible-down",
+          "data-[state=closed]:animate-collapsible-up"
+        ],
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+exports.Collapsible = Collapsible;
+exports.CollapsibleContent = CollapsibleContent2;
+exports.CollapsibleTrigger = CollapsibleTrigger2;

package/dist/chunk-FYEZTS4S.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(--bg-secondary)",
+                zIndex: 9999
+              }
+            }
+          ),
+          document.body
+        )
+      ] })
+    }
+  );
+};
+var useTabsCursor = () => {
+  const context = useContext(TabsCursorContext);
+  if (!context) {
+    return { setCursorTarget: () => {
+    } };
+  }
+  return context;
+};
+
+export { TabsCursorProvider, useTabsCursor };