@vuer-ai/vuer-uikit 0.0.121 → 0.1.0

package/src/ui/alert-dialog.tsx

@@ -0,0 +1,168 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { cva } from "class-variance-authority";
+import { ComponentProps } from "react";
+
+import { cn } from "../hooks";
+
+function AlertDialog({ ...props }: ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+const alertDialogOverlayVariants = cva([
+  "fixed",
+  "inset-0",
+  "z-10",
+  "bg-bg-mask",
+  "transition-all",
+  "duration-200",
+]);
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(alertDialogOverlayVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+const alertDialogContentVariants = cva([
+  "p-xl",
+  "bg-bg-primary",
+  "rounded-uk-xl",
+  "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+  "duration-200",
+  "transition-all",
+  "fixed",
+  "translate-x-[-50%]",
+  "translate-y-[-50%]",
+  "z-11",
+  "left-1/2",
+  "top-1/2",
+  "flex",
+  "flex-col",
+  "w-full",
+  "max-w-[calc(100%-2rem)]",
+  "gap-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",
+  "liquid-dark:liquid-dark-bg",
+  "liquid-light:liquid-light-bg",
+]);
+
+function AlertDialogContent({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(alertDialogContentVariants(), className)}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex", "flex-col", "gap-sm", "text-center", "sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "w-full",
+        "flex",
+        "flex-col-reverse",
+        "gap-sm",
+        "sm:flex-row",
+        "sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-text-highlight",
+        "text-uk-lg",
+        "leading-uk-lg",
+        "font-medium",
+        "py-lg",
+        "px-xl",
+        "text-center",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-text-primary", "text-uk-md", "leading-uk-md", "text-start", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({ ...props }: ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return <AlertDialogPrimitive.Action data-slot="alert-dialog-action" {...props} />;
+}
+
+function AlertDialogCancel({ ...props }: ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return <AlertDialogPrimitive.Cancel data-slot="alert-dialog-cancel" {...props} />;
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/ui/badge.tsx

@@ -28,6 +28,7 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default: "bg-brand-primary",
+        outline: "text-text-primary bg-transparent border border-bg-tertiary",
         secondary: "bg-bg-secondary text-text-primary",
         destructive: "bg-danger-primary",
         success: "bg-accent-success",

package/src/ui/card.tsx

@@ -16,11 +16,7 @@ const cardVariants = cva(
     "rounded-uk-xl",
     "bg-bg-primary",
     "liquid-dark:liquid-dark-bg",
-    "liquid-dark:border-[0.9px]",
-    "liquid-dark:border-[rgba(85,85,85,100)]",
     "liquid-light:liquid-light-bg",
-    "liquid-light:border-[0.8px]",
-    "liquid-light:border-[white]",
   ],
   {
     variants: {
@@ -75,7 +71,7 @@ function Card({
           {...props}
         >
           {collapsedContent}
-          <div className="right-lg absolute top-1/2 -translate-y-1/2">
+          <div className="right-lg absolute top-1/2 h-6 -translate-y-1/2">
             <Button
               variant="ghost"
               size="sm"

package/src/ui/index.ts

@@ -40,6 +40,7 @@ export * from "./DialBadge";
 export * from "./resizable";
 export * from "./inputs";
 export * from "./progress";
+export * from "./alert-dialog";
 export * from "./spinner";
 
 export * from "./layouts";
@@ -47,3 +48,6 @@ export * from "./theme";
 export * from "./drag-selectable";
 
 export * from "./icons";
+
+export * from "./virtual-list";
+export * from "./virtual-grid";

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

@@ -3,20 +3,100 @@ import { ChangeEvent, forwardRef, useState, useEffect } from "react";
 import { InputRoot, InputRootProps, InputSlot } from "./input";
 import { cn } from "../../hooks";
 
-interface ColorInputProps extends Omit<InputRootProps, "type"> {
+interface ColorInputProps extends Omit<InputRootProps, "type" | "value"> {
   className?: string;
+  /** Color value - supports hex strings, 0x-prefixed strings, numeric hex values, and CSS color names */
+  value?: string | number;
+  /** Called with normalized hex string (without #) when color changes */
+  onValueChange?: (hexColor: string) => void;
 }
 
 const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(function ColorInput(
-  { className, value, defaultValue, onChange, ...props },
+  { className, value, defaultValue, onChange, onValueChange, ...props },
   ref,
 ) {
-  // Normalize the initial value by removing any leading # if present
-  const normalizeColor = (colorValue: string | number | readonly string[] | undefined) => {
+  // Normalize color value from various formats to a hex string (without #)
+  // Supports: "#aabbcc", "aabbcc", "0xaabbcc", 0xaabbcc (number), "rgb(...)", etc.
+  const normalizeColor = (colorValue: string | number | readonly string[] | undefined): string => {
+    if (colorValue === undefined || colorValue === null) {
+      return "ffffff";
+    }
+
+    // Handle numeric values (e.g., 0xaabbcc or 0xaabbccdd)
+    if (typeof colorValue === "number") {
+      // Check if it's a 32-bit value (with alpha) or 24-bit (RGB only)
+      if (colorValue > 0xffffff) {
+        // 0xaabbccdd format - extract RGB, ignore alpha for HTML color input
+        const hex = colorValue.toString(16).padStart(8, "0");
+        return hex.slice(0, 6); // Take first 6 chars (RGB)
+      }
+      return colorValue.toString(16).padStart(6, "0");
+    }
+
     if (typeof colorValue === "string") {
-      return colorValue.replace(/^#/, "");
+      const trimmed = colorValue.trim().toLowerCase();
+
+      // Handle 0x prefix (e.g., "0xaabbcc" or "0xaabbccdd")
+      if (trimmed.startsWith("0x")) {
+        const hex = trimmed.slice(2);
+        if (hex.length > 6) {
+          return hex.slice(0, 6); // Take first 6 chars for RGBA format
+        }
+        return hex.padStart(6, "0");
+      }
+
+      // Handle # prefix
+      if (trimmed.startsWith("#")) {
+        const hex = trimmed.slice(1);
+        // Handle shorthand (#abc -> aabbcc)
+        if (hex.length === 3) {
+          return hex
+            .split("")
+            .map((c) => c + c)
+            .join("");
+        }
+        if (hex.length === 4) {
+          // #rgba shorthand - ignore alpha
+          return hex
+            .slice(0, 3)
+            .split("")
+            .map((c) => c + c)
+            .join("");
+        }
+        if (hex.length > 6) {
+          return hex.slice(0, 6); // Handle #rrggbbaa
+        }
+        return hex;
+      }
+
+      // Handle rgb/rgba functional notation
+      const rgbMatch = trimmed.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+      if (rgbMatch) {
+        const r = Math.min(255, parseInt(rgbMatch[1], 10)).toString(16).padStart(2, "0");
+        const g = Math.min(255, parseInt(rgbMatch[2], 10)).toString(16).padStart(2, "0");
+        const b = Math.min(255, parseInt(rgbMatch[3], 10)).toString(16).padStart(2, "0");
+        return r + g + b;
+      }
+
+      // Plain hex string (e.g., "aabbcc" or "aabbccdd")
+      if (/^[0-9a-f]+$/i.test(trimmed)) {
+        if (trimmed.length === 3) {
+          return trimmed
+            .split("")
+            .map((c) => c + c)
+            .join("");
+        }
+        if (trimmed.length > 6) {
+          return trimmed.slice(0, 6);
+        }
+        return trimmed.padStart(6, "0");
+      }
+
+      // Return as-is for CSS color names (e.g., "red", "blue")
+      return trimmed;
     }
-    return colorValue || "ffffff";
+
+    return "ffffff";
   };
 
   const [color, setColor] = useState(normalizeColor(value || defaultValue));
@@ -35,7 +115,9 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(function ColorI
         type="color"
         value={`#${color}`}
         onChange={(e) => {
-          setColor(e.currentTarget.value.replace(/^#/, ""));
+          const newColor = e.currentTarget.value.replace(/^#/, "");
+          setColor(newColor);
+          onValueChange?.(newColor);
           onChange?.(e);
         }}
         className={cn(
@@ -63,7 +145,9 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(function ColorI
         className="flex-1"
         value={color}
         onChange={(e: ChangeEvent<HTMLInputElement>) => {
-          setColor(e.currentTarget.value);
+          const newColor = e.currentTarget.value;
+          setColor(newColor);
+          onValueChange?.(newColor);
           onChange?.(e);
         }}
       >

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

@@ -47,13 +47,17 @@ const changeElementsHoverState = (
 export interface InputNumbersProps
   extends Omit<
     InputRootProps,
-    "prefix" | "suffix" | "value" | "onValueChange" | "step" | "min" | "max"
+    "prefix" | "suffix" | "value" | "onValueChange" | "step" | "min" | "max" | "disabled"
   > {
   step?: number | number[];
   value: number[];
   prefix?: ReactNode[];
   suffix?: ReactNode[];
+  /** Array of disabled states for each input field */
+  disabledItems?: boolean[];
   onValuesChange?: (value: Array<number>) => void;
+  /** Called when suffix area is clicked/dragged, receives array of affected indices */
+  onSuffixBatchAction?: (indices: number[]) => void;
   min?: number | number[];
   max?: number | number[];
   gridAutoFlow?: "column" | "row";
@@ -72,6 +76,8 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
     onValuesChange,
     prefix,
     suffix,
+    disabledItems,
+    onSuffixBatchAction,
     step = 0.1,
     min,
     max,
@@ -94,6 +100,9 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
   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 isSuffixDrag = useRef(false);
+  const lastMouseMoveTime = useRef<number>(0);
+  const accumulatedValues = useRef<number[]>(value);
 
   const applyConstraints = useCallback(
     (numValue: number, index: number): number => {
@@ -121,25 +130,35 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
     document.addEventListener("click", stopClick, true);
   }, []);
 
-  const handleMouseDown = useCallback((e: ReactMouseEvent) => {
-    if (e.button !== 0) return; // Only left mouse button
+  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";
+      e.preventDefault();
+      e.stopPropagation();
 
-    selectRange.current[0] = getHoverElementAndIndex(
-      document.elementFromPoint(e.clientX, e.clientY),
-      inputs.current,
-    );
-  }, []);
+      // Check if clicking on suffix area (InputSlot with data-side="right")
+      const target = e.target as HTMLElement;
+      const suffixElement = target.closest('[data-side="right"]');
+      isSuffixDrag.current = !!suffixElement;
+
+      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";
+      lastMouseMoveTime.current = Date.now();
+      accumulatedValues.current = [...value];
+
+      selectRange.current[0] = getHoverElementAndIndex(
+        document.elementFromPoint(e.clientX, e.clientY),
+        inputs.current,
+      );
+    },
+    [value],
+  );
 
   const handleMouseMove = useCallback(
     (e: MouseEvent) => {
@@ -149,6 +168,14 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
       e.stopPropagation();
 
       const deltaX = e.clientX - dragStart.current.x;
+      const now = Date.now();
+      const timeDelta = Math.max(1, now - lastMouseMoveTime.current); // Avoid division by zero
+      lastMouseMoveTime.current = now;
+
+      // Calculate mouse velocity (pixels per millisecond)
+      const velocity = Math.abs(deltaX) / timeDelta;
+      // Scale velocity to a reasonable multiplier (base 1.0 at ~1px/ms)
+      const velocityMultiplier = Math.max(0.5, Math.min(3, velocity * 2));
 
       // Determine drag direction - allow switching from Y to X when moving horizontally
       const totalDeltaX = e.clientX - initialDragStart.current.x;
@@ -164,15 +191,20 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
             input?.blur();
           });
         }
-      } else if (dragDirection.current === "y" && Math.abs(totalDeltaX) > 5) {
-        // Allow switching from Y to X when significant horizontal movement
+      } else if (
+        dragDirection.current === "y" &&
+        Math.abs(totalDeltaX) > 5 &&
+        !isSuffixDrag.current
+      ) {
+        // Allow switching from Y to X when significant horizontal movement (but not for suffix drag)
         dragDirection.current = "x";
         setCursorState("dragging-x");
       }
 
-      // Handle horizontal dragging (value change)
-      if (dragDirection.current === "x") {
-        accumulatedDelta.current += deltaX / 2;
+      // Handle horizontal dragging (value change) - skip if suffix drag
+      if (dragDirection.current === "x" && !isSuffixDrag.current) {
+        // Apply velocity-dependent scaling to the delta
+        accumulatedDelta.current += (deltaX / 2) * velocityMultiplier;
         dragStart.current = { x: e.clientX, y: e.clientY };
 
         // For horizontal dragging, ensure we have a valid range
@@ -183,7 +215,7 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
         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 newValues = accumulatedValues.current.map((v, i) => {
             const [first, last] = selectRange.current;
             if (first === null || last === null) {
               return v;
@@ -203,7 +235,8 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
               return v;
             }
           });
-          onValuesChange?.(newValue);
+          accumulatedValues.current = newValues;
+          onValuesChange?.(newValues);
           accumulatedDelta.current = 0;
           inputChange.current = true;
         }
@@ -227,19 +260,33 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
         stopClick();
       }
     },
-    [isDragging, value, onValuesChange, step, min, max, stopClick, applyConstraints],
+    [isDragging, onValuesChange, step, min, max, stopClick, applyConstraints],
   );
 
   const handleMouseUp = useCallback(() => {
     if (!isDragging) return;
 
+    // If suffix drag/click, call the batch action callback
+    if (isSuffixDrag.current && onSuffixBatchAction) {
+      const [first, last] = selectRange.current;
+      if (first !== null) {
+        // If last is null or equals first, treat as single click
+        const actualLast = last === null || last === first ? first : last;
+        const minIndex = Math.min(first, actualLast);
+        const maxIndex = Math.max(first, actualLast);
+        const indices = Array.from({ length: maxIndex - minIndex + 1 }, (_, i) => minIndex + i);
+        onSuffixBatchAction(indices);
+      }
+    }
+
     setIsDragging(false);
     setCursorState("default");
     selectRange.current = [null, null];
     inputChange.current = false;
     dragDirection.current = "none";
+    isSuffixDrag.current = false;
     changeElementsHoverState(inputs.current, selectRange.current, "none");
-  }, [isDragging]);
+  }, [isDragging, onSuffixBatchAction]);
 
   // Add global mouse event listeners
   React.useEffect(() => {
@@ -359,71 +406,80 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
       ])}
       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>
-      ))}
+      {(Array.isArray(value) ? value : []).map((item, index) => {
+        const isDisabled = disabledItems?.[index] ?? false;
+        return (
+          <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}
+            disabled={isDisabled}
+            onClick={() => {
+              if (!isDisabled) {
+                inputs.current.get(index.toString())?.focus();
+              }
+            }}
+            onChange={valueChangeHandler(index)}
+            onKeyDown={handleKeyDown(index)}
+            data-hover="none"
+            data-input-index={index}
+            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",
+              isDisabled && "cursor-not-allowed opacity-50",
+            ])}
+            inputClassName={cn([
+              "cursor-text",
+              "group-data-[hover=x]/number-input:cursor-col-resize",
+              "group-data-[hover=y]/number-input:cursor-ns-resize",
+              isDisabled && "cursor-not-allowed",
+            ])}
+          >
+            {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-none",
+                  "group-data-[hover=x]/number-input:cursor-col-resize",
+                  "group-data-[hover=y]/number-input:cursor-ns-resize",
+                )}
+              >
+                {suffix[index]}
+              </InputSlot>
+            )}
+          </InputRoot>
+        );
+      })}
     </div>
   );
 });