@vuer-ai/vuer-uikit 0.0.2 → 0.0.4

package/dist/chunk-COFRS37Z.mjs

@@ -0,0 +1,337 @@
+import { cn } from './chunk-HW6SLBO3.mjs';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, CircleIcon, ChevronRightIcon } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      className: "text-text-primary hover:text-text-highlight disabled:text-text-tertiary active:text-text-secondary",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        [
+          "bg-bg-primary",
+          "p-md",
+          "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-dropdown-menu-content-available-height)",
+          "min-w-[8rem]",
+          "origin-(--radix-dropdown-menu-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"
+        ],
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Group,
+    {
+      "data-slot": "dropdown-menu-group",
+      className: cn("space-y-xs", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        [
+          "w-full",
+          "flex",
+          "gap-md",
+          "items-center",
+          "pr-md",
+          "pl-[calc(var(--spacing-md)*2)]",
+          "py-xs",
+          "mb-xs",
+          "last:mb-0",
+          "relative",
+          "cursor-default",
+          "rounded-uk-xs",
+          "text-xs",
+          "outline-hidden",
+          "select-none",
+          "hover:bg-bg-tertiary",
+          "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"
+        ],
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.CheckboxItem,
+    {
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cn(
+        [
+          "w-full",
+          "flex",
+          "gap-md",
+          "items-center",
+          "pr-md",
+          "pl-[calc(var(--spacing-xl)*1.8)]",
+          "py-xs",
+          "mb-xs",
+          "last:mb-0",
+          "relative",
+          "cursor-default",
+          "rounded-uk-xs",
+          "text-xs",
+          "outline-hidden",
+          "select-none",
+          "hover:bg-bg-tertiary",
+          "data-[disabled]:pointer-events-none",
+          "data-[disabled]:text-bg-quaternary",
+          "[&_svg:not([class*='size-'])]:size-4",
+          "[&_svg]:pointer-events-none",
+          "[&_svg]:shrink-0"
+        ],
+        className
+      ),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuRadioGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.RadioItem,
+    {
+      "data-slot": "dropdown-menu-radio-item",
+      className: cn(
+        [
+          "w-full",
+          "hover:bg-bg-tertiary",
+          "outline-hidden",
+          "relative",
+          "flex",
+          "cursor-default",
+          "select-none",
+          "items-center",
+          "gap-md",
+          "rounded-uk-xs",
+          "py-xs",
+          "pl-[calc(var(--spacing-xl)*1.8)]",
+          "pr-md",
+          "mb-xs",
+          "last:mb-0",
+          "text-xs",
+          "data-[disabled]:pointer-events-none",
+          "data-[disabled]:text-bg-quaternary",
+          "[&_svg:not([class*='size-'])]:size-4",
+          "[&_svg]:pointer-events-none",
+          "[&_svg]:shrink-0"
+        ],
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn("text-text-secondary px-2 py-1.5 text-xs", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-line-primary my-lg pointer-events-none -mx-1 h-px", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "dropdown-menu-shortcut",
+      className: cn("text-text-tertiary ml-auto text-xs", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuSub({ ...props }) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.SubTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        "w-full",
+        "flex",
+        "gap-md",
+        "items-center",
+        "pr-md",
+        "pl-[calc(var(--spacing-md)*2)]",
+        "py-xs",
+        "mb-xs",
+        "relative",
+        "cursor-default",
+        "rounded-uk-xs",
+        "text-xs",
+        "outline-hidden",
+        "select-none",
+        "hover:bg-bg-tertiary",
+        "data-[state=open]:bg-bg-tertiary",
+        "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",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.SubContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn(
+        "bg-bg-primary",
+        "p-md",
+        "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-dropdown-menu-content-available-height)",
+        "min-w-[8rem]",
+        "origin-(--radix-dropdown-menu-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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/chunk-CP7QYV4N.mjs

@@ -0,0 +1,110 @@
+import { useCursor } from './chunk-3FR3WKI4.mjs';
+import { forwardRef, useId, useRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var getVisibleRect = (element, elementRect) => {
+  let parent = element.parentElement;
+  let visibleRect = {
+    ...elementRect,
+    left: elementRect.left,
+    right: elementRect.right,
+    top: elementRect.top,
+    bottom: elementRect.bottom,
+    width: elementRect.width,
+    height: elementRect.height,
+    x: elementRect.x,
+    y: elementRect.y
+  };
+  while (parent) {
+    const style = window.getComputedStyle(parent);
+    const hasOverflow = [style.overflowY, style.overflowX].some(
+      (overflow) => ["auto", "scroll", "hidden"].includes(overflow)
+    );
+    if (hasOverflow) {
+      const parentRect = parent.getBoundingClientRect();
+      const newLeft = Math.max(visibleRect.left, parentRect.left);
+      const newTop = Math.max(visibleRect.top, parentRect.top);
+      const newRight = Math.min(visibleRect.right, parentRect.right);
+      const newBottom = Math.min(visibleRect.bottom, parentRect.bottom);
+      visibleRect = {
+        ...visibleRect,
+        left: newLeft,
+        top: newTop,
+        right: newRight,
+        bottom: newBottom,
+        width: Math.max(0, newRight - newLeft),
+        height: Math.max(0, newBottom - newTop),
+        x: newLeft,
+        y: newTop
+      };
+      if (visibleRect.width <= 0 || visibleRect.height <= 0) {
+        return new DOMRect(0, 0, 0, 0);
+      }
+    }
+    parent = parent.parentElement;
+  }
+  return DOMRect.fromRect(visibleRect);
+};
+function withCursor(Component) {
+  const displayName = Component.displayName || Component.name || "Component";
+  const EnhancedComponent = forwardRef(
+    ({ id: propId, onMouseEnter, onMouseMove, onMouseLeave, ...props }, ref) => {
+      const { registerHoveredElement, unregisterHoveredElement, updateElementDimensions } = useCursor();
+      const generatedId = useId();
+      const id = propId || `cursor-element-${generatedId}`;
+      const elementRef = useRef(null);
+      const handleMouseEnter = (event) => {
+        if (elementRef.current) {
+          const elementRect = elementRef.current.getBoundingClientRect();
+          const visibleRect = getVisibleRect(elementRef.current, elementRect);
+          registerHoveredElement(id, visibleRect, elementRef.current);
+        }
+        onMouseEnter == null ? void 0 : onMouseEnter(event);
+      };
+      const handleMouseMove = (event) => {
+        if (elementRef.current) {
+          const elementRect = elementRef.current.getBoundingClientRect();
+          const visibleRect = getVisibleRect(elementRef.current, elementRect);
+          updateElementDimensions(visibleRect);
+        }
+        onMouseMove == null ? void 0 : onMouseMove(event);
+      };
+      const handleMouseOut = (event) => {
+        var _a;
+        const rect = (_a = elementRef.current) == null ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+          const { clientX, clientY } = event;
+          const isOutside = clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom;
+          if (isOutside) {
+            unregisterHoveredElement();
+          }
+        } else {
+          unregisterHoveredElement();
+        }
+        onMouseLeave == null ? void 0 : onMouseLeave(event);
+      };
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ...props,
+          id,
+          ref: (node) => {
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+            elementRef.current = node;
+          },
+          onMouseEnter: handleMouseEnter,
+          onMouseMove: handleMouseMove,
+          onMouseOut: handleMouseOut
+        }
+      );
+    }
+  );
+  EnhancedComponent.displayName = `withCursor(${displayName})`;
+  return EnhancedComponent;
+}
+
+export { withCursor };

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 };