@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/ui/icons/MouseCursorIcons.tsx

@@ -0,0 +1,39 @@
+interface IconProps {
+  strokeWidth?: number;
+}
+
+export const MouseCursorIcon = ({ strokeWidth = 2.25 }: IconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="lucide lucide-mouse-pointer2-icon lucide-mouse-pointer-2"
+    >
+      <path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" />
+    </svg>
+  );
+};
+
+export const MouseCursorAltIcon = ({ strokeWidth = 2.25 }: IconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth={strokeWidth / 2}
+      className="lucide lucide-mouse-pointer2-icon lucide-mouse-pointer-2"
+    >
+      <path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" />
+    </svg>
+  );
+};

package/src/ui/icons/cursor.tsx

@@ -0,0 +1,38 @@
+interface IconProps {
+  strokeWidth?: number;
+}
+export const CursorFilledIcon = ({ strokeWidth = 2.25 }: IconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth={strokeWidth / 2}
+      className="lucide lucide-mouse-pointer2-icon lucide-mouse-pointer-2"
+    >
+      <path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" />
+    </svg>
+  );
+};
+
+export const CursorIcon = ({ strokeWidth = 2.25 }: IconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="lucide lucide-mouse-pointer2-icon lucide-mouse-pointer-2"
+    >
+      <path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" />
+    </svg>
+  );
+};

package/src/ui/icons/index.ts

@@ -0,0 +1,2 @@
+export * from "./cursor";
+export * from "./MouseCursorIcons";

package/src/ui/index.ts

@@ -0,0 +1,45 @@
+export * from "./waterfall";
+export * from "./navigation";
+export * from "./table";
+export * from "./pagination";
+export * from "./sidebar";
+export * from "./drawer";
+export * from "./tree-view";
+export { TreeView as TreeViewLegacy } from "./tree-view-legacy";
+export * from "./simple-tree-view";
+export * from "./sheet";
+export * from "./popover";
+export * from "./avatar";
+export * from "./tooltip";
+export * from "./toast";
+export * from "./textarea";
+export * from "./dropdown";
+export * from "./toggle";
+export * from "./toggle-buttons";
+export * from "./toggle-group";
+export * from "./badge";
+export * from "./radio-group";
+export * from "./card";
+export * from "./panel";
+export * from "./toolbar";
+export * from "./checkbox";
+export * from "./switch";
+export * from "./tabs";
+export * from "./modal";
+export * from "./button";
+export * from "./collapsible";
+export * from "./select";
+export * from "./modal";
+export * from "./tabs";
+export * from "./slider";
+export * from "./layout";
+export * from "./label";
+export * from "./UIKitBadge";
+export * from "./resizable";
+export * from "./inputs";
+
+export * from "./layouts";
+export * from "./theme";
+export * from "./drag-selectable";
+
+export * from "./icons";

package/src/ui/inputs/color-input.tsx

@@ -0,0 +1,61 @@
+import { ChangeEvent, forwardRef, useState } from "react";
+
+import { InputRoot, InputRootProps, InputSlot } from "./input";
+import { cn } from "../../hooks";
+
+interface ColorInputProps extends Omit<InputRootProps, "type"> {
+  className?: string;
+}
+
+const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(function ColorInput(
+  { className, value, defaultValue, onChange, ...props },
+  ref,
+) {
+  const [color, setColor] = useState(value || defaultValue || "ffffff");
+  return (
+    <div className="gap-sm flex">
+      <input
+        ref={ref}
+        type="color"
+        value={`#${color}`}
+        onChange={(e) => {
+          setColor(e.currentTarget.value.replace(/^#/, ""));
+          onChange?.(e);
+        }}
+        className={cn(
+          [
+            "h-6",
+            "w-6",
+            "flex-none",
+            "cursor-pointer",
+            "rounded-1",
+            "[appearance:none]",
+            "[&::-webkit-color-swatch-wrapper]:p-0",
+            "[&::-webkit-color-swatch]:border-line-primary",
+            "[&::-webkit-color-swatch]:rounded-lg",
+            "[&::-moz-color-swatch]:border-line-primary",
+            "[&::-moz-color-swatch]:rounded-lg",
+          ],
+          className,
+        )}
+      />
+
+      <InputRoot
+        {...props}
+        size="sm"
+        type="text"
+        className="flex-1"
+        value={color}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+          setColor(e.currentTarget.value);
+          onChange?.(e);
+        }}
+      >
+        <InputSlot>#</InputSlot>
+      </InputRoot>
+    </div>
+  );
+});
+
+export { ColorInput };
+export type { ColorInputProps };

package/src/ui/inputs/index.tsx

@@ -0,0 +1,5 @@
+export * from "./input";
+export * from "./input-numbers";
+export * from "./color-input";
+export * from "./presets-input";
+export * from "./number-inputs";

package/src/ui/inputs/input-numbers.tsx

@@ -0,0 +1,394 @@
+import React, {
+  ChangeEvent,
+  forwardRef,
+  MouseEvent as ReactMouseEvent,
+  ReactNode,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
+
+import { InputRoot, InputRootProps, InputSlot } from "./input";
+import { cn } from "../../hooks";
+
+const getHoverElementAndIndex = (
+  element: Element | null,
+  inputs: Map<string, HTMLInputElement | null>,
+) => {
+  if (!element) return null;
+  const container = element?.closest("[data-input]");
+
+  const currentInput = container?.querySelector("input");
+
+  if (!currentInput) return null;
+
+  return Array.from(inputs.values()).indexOf(currentInput);
+};
+
+// down y x none
+const changeElementsHoverState = (
+  inputs: Map<string, HTMLInputElement | null>,
+  range: [number | null, number | null],
+  changed: "x" | "y" | "none",
+) => {
+  const [first, last] = range;
+  Array.from(inputs.values()).forEach((input, i) => {
+    const container = input?.closest("[data-input]");
+    if (first === null || last === null) {
+      container?.setAttribute("data-hover", "none");
+    } else if (i >= Math.min(first, last) && i <= Math.max(first, last)) {
+      container?.setAttribute("data-hover", changed !== "none" ? changed : "down");
+    } else {
+      container?.setAttribute("data-hover", "none");
+    }
+  });
+};
+
+export interface InputNumbersProps
+  extends Omit<InputRootProps, "prefix" | "suffix" | "value" | "onValueChange" | "step"> {
+  step?: number | number[];
+  value: number[];
+  prefix?: ReactNode[];
+  suffix?: ReactNode[];
+  onValuesChange?: (value: Array<number>) => void;
+  gridAutoFlow?: "column" | "row";
+  columns?: number;
+  rows?: number;
+  // Legacy props (deprecated)
+  layout?: "column" | "row";
+  columnMajor?: boolean;
+}
+
+export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(function InputNumbers(
+  {
+    size,
+    side,
+    value,
+    onValuesChange,
+    prefix,
+    suffix,
+    step = 0.1,
+    gridAutoFlow,
+    columns,
+    rows,
+    layout = "column",
+    columnMajor = false,
+  },
+  ref,
+) {
+  const inputs = useRef<Map<string, HTMLInputElement | null>>(new Map());
+  const selectRange = useRef<[number | null, number | null]>([null, null]);
+  const inputChange = useRef(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [cursorState, setCursorState] = useState<"default" | "dragging-y" | "dragging-x">(
+    "default",
+  );
+  const dragDirection = useRef<"x" | "y" | "none">("none");
+  const dragStart = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const initialDragStart = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const accumulatedDelta = useRef(0);
+
+  const stopClick = useCallback(() => {
+    const stopClick = (e: Event) => {
+      e.stopPropagation();
+      e.preventDefault();
+      document.removeEventListener("click", stopClick, true);
+    };
+    document.addEventListener("click", stopClick, true);
+  }, []);
+
+  const handleMouseDown = useCallback((e: ReactMouseEvent) => {
+    if (e.button !== 0) return; // Only left mouse button
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    setIsDragging(true);
+    setCursorState("dragging-y"); // Start with ns-resize cursor
+    dragStart.current = { x: e.clientX, y: e.clientY };
+    initialDragStart.current = { x: e.clientX, y: e.clientY };
+    accumulatedDelta.current = 0;
+    inputChange.current = false;
+    dragDirection.current = "none";
+
+    selectRange.current[0] = getHoverElementAndIndex(
+      document.elementFromPoint(e.clientX, e.clientY),
+      inputs.current,
+    );
+  }, []);
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      const deltaX = e.clientX - dragStart.current.x;
+
+      // Determine drag direction - allow switching from Y to X when moving horizontally
+      const totalDeltaX = e.clientX - initialDragStart.current.x;
+      const totalDeltaY = e.clientY - initialDragStart.current.y;
+
+      if (dragDirection.current === "none") {
+        // Initial direction detection - prefer vertical first
+        if (Math.abs(totalDeltaY) > 2 || Math.abs(totalDeltaX) > 2) {
+          dragDirection.current = "y"; // Start with vertical
+          setCursorState("dragging-y");
+
+          Array.from(inputs.current.values()).forEach((input) => {
+            input?.blur();
+          });
+        }
+      } else if (dragDirection.current === "y" && Math.abs(totalDeltaX) > 5) {
+        // Allow switching from Y to X when significant horizontal movement
+        dragDirection.current = "x";
+        setCursorState("dragging-x");
+      }
+
+      // Handle horizontal dragging (value change)
+      if (dragDirection.current === "x") {
+        accumulatedDelta.current += deltaX / 2;
+        dragStart.current = { x: e.clientX, y: e.clientY };
+
+        // For horizontal dragging, ensure we have a valid range
+        if (selectRange.current[1] === null) {
+          selectRange.current[1] = selectRange.current[0];
+        }
+
+        if (Math.abs(accumulatedDelta.current) >= (inputChange.current ? 1 : 5)) {
+          const multiplyStep = e.shiftKey ? 5 : e.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)) {
+              const currentStep = Array.isArray(step) ? (step[i] ?? 0.1) : step;
+              return Number(
+                (
+                  (v || 0) +
+                  Math.floor(accumulatedDelta.current) * currentStep * multiplyStep
+                ).toPrecision(6),
+              );
+            } else {
+              return v;
+            }
+          });
+          onValuesChange?.(newValue);
+          accumulatedDelta.current = 0;
+          inputChange.current = true;
+        }
+
+        changeElementsHoverState(inputs.current, selectRange.current, "x");
+        stopClick();
+      }
+      // Handle vertical dragging (selection)
+      else if (dragDirection.current === "y") {
+        const currentElement = document.elementFromPoint(e.clientX, e.clientY);
+        const currentIndex = getHoverElementAndIndex(currentElement, inputs.current);
+        selectRange.current[1] = currentIndex ?? selectRange.current[1];
+
+        changeElementsHoverState(inputs.current, selectRange.current, "y");
+        stopClick();
+      }
+      // Initial state - show ns-resize cursor
+      else {
+        dragStart.current = { x: e.clientX, y: e.clientY };
+        changeElementsHoverState(inputs.current, selectRange.current, "y");
+        stopClick();
+      }
+    },
+    [isDragging, value, onValuesChange, step, stopClick],
+  );
+
+  const handleMouseUp = useCallback(() => {
+    if (!isDragging) return;
+
+    setIsDragging(false);
+    setCursorState("default");
+    selectRange.current = [null, null];
+    inputChange.current = false;
+    dragDirection.current = "none";
+    changeElementsHoverState(inputs.current, selectRange.current, "none");
+  }, [isDragging]);
+
+  // Add global mouse event listeners
+  React.useEffect(() => {
+    if (isDragging) {
+      const handleGlobalMouseMove = (e: MouseEvent) => {
+        handleMouseMove(e);
+      };
+      const handleGlobalMouseUp = () => {
+        handleMouseUp();
+      };
+
+      document.addEventListener("mousemove", handleGlobalMouseMove);
+      document.addEventListener("mouseup", handleGlobalMouseUp);
+
+      return () => {
+        document.removeEventListener("mousemove", handleGlobalMouseMove);
+        document.removeEventListener("mouseup", handleGlobalMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+
+  const valueChangeHandler = useCallback(
+    (index: number) => {
+      return (e: ChangeEvent<HTMLInputElement>) => {
+        const inputValue = e.target.value;
+        if (inputValue === "" || !isNaN(Number(inputValue))) {
+          const newValue = value.map((v, i) => {
+            if (i === index) {
+              return inputValue === "" ? ("" as unknown as number) : Number(inputValue);
+            }
+            return v;
+          });
+          onValuesChange?.(newValue);
+        }
+      };
+    },
+    [onValuesChange, value],
+  );
+
+  const handleKeyDown = useCallback(
+    (index: number) => {
+      return (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+          e.preventDefault();
+          const direction = e.key === "ArrowUp" ? 1 : -1;
+          const currentValue = value[index] || 0;
+          const currentStep = Array.isArray(step) ? (step[index] ?? 0.1) : step;
+          const newValue = Number((currentValue + direction * currentStep).toPrecision(6));
+
+          const updatedValues = value.map((v, i) => {
+            if (i === index) {
+              return newValue;
+            }
+            return v;
+          });
+          onValuesChange?.(updatedValues);
+        }
+      };
+    },
+    [value, onValuesChange, step],
+  );
+
+  if (value?.length === 0) {
+    throw new Error("`value` cannot be an empty array");
+  }
+
+  // Determine the actual grid flow mode
+  const actualGridAutoFlow = gridAutoFlow || layout || "row";
+
+  // Use grid layout if we have columns or rows specified, or if layout is 'row'
+  const useGrid = columns || rows || actualGridAutoFlow === "row" || layout === "row";
+
+  // Create inline styles for grid
+  const gridStyles: React.CSSProperties = {};
+  if (useGrid) {
+    gridStyles.display = "grid";
+    gridStyles.gridAutoFlow = actualGridAutoFlow;
+
+    if (columns) {
+      gridStyles.gridTemplateColumns = `repeat(${columns}, minmax(0, 1fr))`;
+    }
+    if (rows) {
+      gridStyles.gridTemplateRows = `repeat(${rows}, minmax(0, 1fr))`;
+    }
+
+    // Legacy column-major support
+    if (columnMajor && layout === "row") {
+      gridStyles.gridAutoFlow = "column";
+      if (!rows && columns) {
+        gridStyles.gridTemplateRows = `repeat(${Math.ceil(value.length / columns)}, minmax(0, 1fr))`;
+      }
+    }
+  }
+
+  return (
+    <div
+      ref={ref}
+      onMouseDown={handleMouseDown}
+      className={cn([
+        "gap-xs touch-none select-none",
+        !useGrid && "flex flex-col",
+        cursorState === "default" && "cursor-crosshair",
+        cursorState === "dragging-y" && "cursor-ns-resize",
+        cursorState === "dragging-x" && "cursor-col-resize",
+        "data-[hover=down]:bg-bg-tertiary",
+        "data-[hover=x]:bg-bg-tertiary",
+        "data-[hover=y]:bg-bg-tertiary",
+        "data-[hover=x]:cursor-col-resize",
+        "data-[hover=y]:cursor-ns-resize",
+      ])}
+      style={useGrid ? gridStyles : undefined}
+    >
+      {value.map((item, index) => (
+        <InputRoot
+          key={index}
+          ref={(r) => {
+            inputs.current.set(index.toString(), r);
+            return () => {
+              inputs.current.delete(index.toString());
+            };
+          }}
+          size={size}
+          side={side}
+          type="number"
+          step={Array.isArray(step) ? (step[index] ?? 0.1) : step}
+          value={item}
+          onClick={() => {
+            inputs.current.get(index.toString())?.focus();
+          }}
+          onChange={valueChangeHandler(index)}
+          onKeyDown={handleKeyDown(index)}
+          data-hover="none"
+          className={cn([
+            "group/number-input",
+            "cursor-text",
+            cursorState === "dragging-x" && [
+              "hover:!bg-bg-secondary",
+              "data-[hover=x]:hover:!bg-bg-tertiary",
+            ],
+            "data-[hover=down]:bg-bg-tertiary",
+            "data-[hover=x]:bg-bg-tertiary",
+            "data-[hover=y]:bg-bg-tertiary",
+            "data-[hover=x]:cursor-col-resize",
+            "data-[hover=y]:cursor-ns-resize",
+          ])}
+          inputClassName={cn([
+            "cursor-text",
+            "group-data-[hover=x]/number-input:cursor-col-resize",
+            "group-data-[hover=y]/number-input:cursor-ns-resize",
+          ])}
+        >
+          {prefix?.[index] && (
+            <InputSlot
+              side="left"
+              className={cn(
+                "cursor-text",
+                "group-data-[hover=x]/number-input:cursor-col-resize",
+                "group-data-[hover=y]/number-input:cursor-ns-resize",
+              )}
+            >
+              {prefix[index]}
+            </InputSlot>
+          )}
+          {suffix?.[index] && (
+            <InputSlot
+              side="right"
+              className={cn(
+                "cursor-text",
+                "group-data-[hover=x]/number-input:cursor-col-resize",
+                "group-data-[hover=y]/number-input:cursor-ns-resize",
+              )}
+            >
+              {suffix[index]}
+            </InputSlot>
+          )}
+        </InputRoot>
+      ))}
+    </div>
+  );
+});