@vuer-ai/vuer-uikit 0.0.120 → 0.1.0

package/src/ui/context-menu.tsx

@@ -0,0 +1,358 @@
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { ComponentProps } from "react";
+
+import { cn } from "../hooks";
+
+function ContextMenu({ ...props }: ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({ ...props }: ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />;
+}
+
+function ContextMenuPortal({ ...props }: ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-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-context-menu-content-available-height)",
+            "origin-(--radix-context-menu-content-transform-origin)",
+            "overflow-x-hidden",
+            "overflow-y-auto",
+            "rounded-uk-md",
+            "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+            "liquid-dark:liquid-dark-bg",
+            "liquid-light:liquid-light-bg",
+          ],
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuGroup({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group
+      data-slot="context-menu-group"
+      className={cn("space-y-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        [
+          "w-full",
+          "flex",
+          "gap-md",
+          "items-center",
+          "px-sm",
+          "py-xs",
+          "relative",
+          "cursor-default",
+          "rounded-uk-xs",
+          "text-uk-sm",
+          "leading-uk-sm",
+          "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",
+          variant === "destructive" && "text-text-danger",
+        ],
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        [
+          "w-full",
+          "flex",
+          "gap-md",
+          "items-center",
+          "pr-md",
+          "pl-[calc(var(--spacing-xl)*1.8)]",
+          "py-xs",
+          "relative",
+          "cursor-default",
+          "rounded-uk-xs",
+          "text-uk-sm",
+          "leading-uk-sm",
+          "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={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-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",
+          "text-uk-sm",
+          "leading-uk-sm",
+          "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}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn("text-text-secondary text-uk-sm leading-uk-sm pb-lg pt-xs px-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-line-primary my-lg pointer-events-none h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn("text-text-tertiary text-uk-sm leading-uk-sm ml-auto", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSub({ ...props }: ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "w-full",
+        "flex",
+        "gap-md",
+        "items-center",
+        "px-sm",
+        "py-xs",
+        "relative",
+        "cursor-default",
+        "rounded-uk-xs",
+        "text-uk-sm",
+        "leading-uk-sm",
+        "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}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-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-context-menu-content-available-height)",
+        "origin-(--radix-context-menu-content-transform-origin)",
+        "overflow-x-hidden",
+        "overflow-y-auto",
+        "rounded-uk-md",
+        "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+        "liquid-dark:liquid-dark-bg",
+        "liquid-light:liquid-light-bg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuPortal,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuLabel,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+};
+

package/src/ui/index.ts

@@ -11,9 +11,11 @@ export * from "./sheet";
 export * from "./popover";
 export * from "./avatar";
 export * from "./tooltip";
+export * from "./separator";
 export * from "./toast";
 export * from "./textarea";
 export * from "./dropdown";
+export * from "./context-menu";
 export * from "./toggle";
 export * from "./toggle-buttons";
 export * from "./toggle-group";
@@ -38,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";
@@ -45,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);
         }}
       >