@vuer-ai/vuer-uikit 0.0.119 → 0.0.121

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

package/src/ui/inputs/number-inputs/EulerRadInput.tsx

@@ -8,48 +8,49 @@ interface EulerRadInputProps extends Omit<VectorInputProps, "value" | "labels" |
   display?: "deg" | "pi" | "rad";
 }
 
-const EulerRadInput = forwardRef<HTMLDivElement, EulerRadInputProps>(
-  function EulerRadInput({ value, onValuesChange, display = "rad", ...props }, ref) {
-    const displayValues = useMemo(() => {
-      if (display === "deg") {
-        return value.map((v) => (v * 180) / Math.PI) as [number, number, number];
-      } else if (display === "pi") {
-        return value.map((v) => v / Math.PI) as [number, number, number];
-      }
-      return value;
-    }, [value, display]);
-
-    const handleChange = (displayVals: number[]) => {
-      let radValues: [number, number, number];
-      if (display === "deg") {
-        radValues = displayVals.map((v) => (v * Math.PI) / 180) as [number, number, number];
-      } else if (display === "pi") {
-        radValues = displayVals.map((v) => v * Math.PI) as [number, number, number];
-      } else {
-        radValues = displayVals as [number, number, number];
-      }
-      onValuesChange?.(radValues);
-    };
-
-    const unitSymbol = useMemo(() => {
-      if (display === "deg") return "°";
-      if (display === "pi") return "π";
-      return "rad";
-    }, [display]);
-
-    const labels = [`x${unitSymbol}`, `y${unitSymbol}`, `z${unitSymbol}`];
-
-    return (
-      <VectorInput
-        ref={ref}
-        value={displayValues}
-        onValuesChange={handleChange}
-        labels={labels}
-        {...props}
-      />
-    );
-  },
-);
+const EulerRadInput = forwardRef<HTMLDivElement, EulerRadInputProps>(function EulerRadInput(
+  { value, onValuesChange, display = "rad", ...props },
+  ref,
+) {
+  const displayValues = useMemo(() => {
+    if (display === "deg") {
+      return value.map((v) => (v * 180) / Math.PI) as [number, number, number];
+    } else if (display === "pi") {
+      return value.map((v) => v / Math.PI) as [number, number, number];
+    }
+    return value;
+  }, [value, display]);
+
+  const handleChange = (displayVals: number[]) => {
+    let radValues: [number, number, number];
+    if (display === "deg") {
+      radValues = displayVals.map((v) => (v * Math.PI) / 180) as [number, number, number];
+    } else if (display === "pi") {
+      radValues = displayVals.map((v) => v * Math.PI) as [number, number, number];
+    } else {
+      radValues = displayVals as [number, number, number];
+    }
+    onValuesChange?.(radValues);
+  };
+
+  const unitSymbol = useMemo(() => {
+    if (display === "deg") return "°";
+    if (display === "pi") return "π";
+    return "rad";
+  }, [display]);
+
+  const labels = [`x${unitSymbol}`, `y${unitSymbol}`, `z${unitSymbol}`];
+
+  return (
+    <VectorInput
+      ref={ref}
+      value={displayValues}
+      onValuesChange={handleChange}
+      labels={labels}
+      {...props}
+    />
+  );
+});
 
 export { EulerRadInput };
 export type { EulerRadInputProps };

package/src/ui/inputs/number-inputs/VectorInput.tsx

@@ -2,7 +2,6 @@ import React, { forwardRef, ReactNode } from "react";
 
 import { InputNumbers, InputNumbersProps } from "../input-numbers";
 
-
 interface VectorInputProps
   extends Omit<InputNumbersProps, "value" | "onValuesChange" | "onChange"> {
   value: number[];

package/src/ui/inputs/presets-rad-input.tsx

@@ -13,7 +13,10 @@ interface PresetsRadInputProps extends Omit<RadInputProps, "value" | "onChange">
 }
 
 export const PresetsRadInput = forwardRef<HTMLDivElement, PresetsRadInputProps>(
-  function PresetsRadInput({ presets, value = 0, onChange, display = "rad", size, className, ...props }, ref) {
+  function PresetsRadInput(
+    { presets, value = 0, onChange, display = "rad", size, className, ...props },
+    ref,
+  ) {
     const [preset, setPreset] = useState(value);
 
     const handleValueChange = (newValue: number) => {
@@ -74,4 +77,4 @@ export const PresetsRadInput = forwardRef<HTMLDivElement, PresetsRadInputProps>(
       </div>
     );
   },
-);
+);

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

@@ -40,4 +40,4 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
       {suffix && <InputSlot side="right">{suffix}</InputSlot>}
     </InputRoot>
   );
-});
+});

package/src/ui/layouts/dock-layout/DockLayoutView.tsx

@@ -21,6 +21,7 @@ interface DockLayoutViewProps {
   topClassName?: string;
   bottomClassName?: string;
   contentClassName?: string;
+  hideUI?: boolean;
 }
 
 export const DockLayoutView = ({
@@ -35,18 +36,28 @@ export const DockLayoutView = ({
   topClassName,
   bottomClassName,
   contentClassName,
+  hideUI = false,
 }: DockLayoutViewProps) => {
+  const uiVisibilityClass = hideUI ? "invisible pointer-events-none" : "";
+
   return (
     <DockLayout className={className}>
-      {top && <DockLayoutTop className={topClassName}>{top}</DockLayoutTop>}
+      <DockLayoutContent className={contentClassName}>{children}</DockLayoutContent>
+
+      {top && (
+        <DockLayoutTop className={`${topClassName} ${uiVisibilityClass}`}>{top}</DockLayoutTop>
+      )}
 
-      <div className="flex flex-1 overflow-hidden">
+      <div className={`flex h-full flex-row justify-between overflow-hidden ${uiVisibilityClass}`}>
         {left && <DockLayoutLeft className={leftClassName}>{left}</DockLayoutLeft>}
-        <DockLayoutContent className={contentClassName}>{children}</DockLayoutContent>
         {right && <DockLayoutRight className={rightClassName}>{right}</DockLayoutRight>}
       </div>
 
-      {bottom && <DockLayoutBottom className={bottomClassName}>{bottom}</DockLayoutBottom>}
+      {bottom && (
+        <DockLayoutBottom className={`${bottomClassName} ${uiVisibilityClass}`}>
+          {bottom}
+        </DockLayoutBottom>
+      )}
     </DockLayout>
   );
 };

package/src/ui/layouts/dock-layout/LayoutSlots.tsx

@@ -10,7 +10,10 @@ export const DockLayout = forwardRef<HTMLDivElement, ComponentProps<"div">>(
       <div
         ref={ref}
         {...props}
-        className={cn("relative flex h-full w-full flex-col overflow-hidden", className)}
+        className={cn(
+          "relative flex h-full w-full flex-col justify-between overflow-hidden",
+          className,
+        )}
       />
     );
   },
@@ -27,7 +30,7 @@ export function DockLayoutContent({ className, ...props }: Readonly<ComponentPro
     <div
       {...props}
       className={cn(
-        "relative flex flex-1 flex-col items-center justify-center overflow-auto",
+        "absolute inset-0 z-0 flex flex-1 flex-col items-center justify-center overflow-auto",
         className,
       )}
     />
@@ -40,7 +43,7 @@ export function DockLayoutLeft({ className, asChild, ...props }: Readonly<DockLa
     <Comp
       {...props}
       className={cn(
-        "bg-bg-primary flex h-full flex-shrink-0 flex-col items-start gap-4",
+        "bg-bg-primary z-20 flex h-full flex-shrink-0 flex-col items-start gap-4",
         className,
       )}
     />
@@ -64,7 +67,10 @@ export function DockLayoutRight({ className, asChild, ...props }: Readonly<DockL
   return (
     <Comp
       {...props}
-      className={cn("bg-bg-primary flex h-full flex-shrink-0 flex-col items-end gap-4", className)}
+      className={cn(
+        "bg-bg-primary z-20 flex h-full flex-shrink-0 flex-col items-end gap-4",
+        className,
+      )}
     />
   );
 }
@@ -76,7 +82,10 @@ export const DockLayoutBottom = forwardRef<HTMLDivElement, DockLayoutChildProps>
       <Comp
         ref={ref}
         {...props}
-        className={cn("bg-bg-primary inline-flex w-full flex-shrink-0 justify-center", className)}
+        className={cn(
+          "bg-bg-primary z-20 inline-flex w-full flex-shrink-0 justify-center",
+          className,
+        )}
       />
     );
   },

package/src/ui/layouts/liquid-layout/LiquidLayoutView.tsx

@@ -25,6 +25,18 @@ interface LiquidLayoutViewProps {
   children?: ReactNode;
   /** Additional CSS classes to apply to the root element */
   className?: string;
+  /** Additional CSS classes to apply to the left slot */
+  leftClassName?: string;
+  /** Additional CSS classes to apply to the right slot */
+  rightClassName?: string;
+  /** Additional CSS classes to apply to the top slot */
+  topClassName?: string;
+  /** Additional CSS classes to apply to the bottom slot */
+  bottomClassName?: string;
+  /** Additional CSS classes to apply to the content slot */
+  contentClassName?: string;
+  /** Hide all UI panels */
+  hideUI?: boolean;
 }
 
 /**
@@ -41,16 +53,43 @@ export const LiquidLayoutView = ({
   bottom,
   children,
   className,
+  leftClassName,
+  rightClassName,
+  topClassName,
+  bottomClassName,
+  contentClassName,
+  hideUI = false,
 }: LiquidLayoutViewProps) => {
+  const uiVisibilityClass = hideUI ? "invisible pointer-events-none" : "";
+
   return (
     <LiquidLayout className={className}>
-      <LiquidLayoutContent className="absolute flex flex-col items-center justify-center">
+      <LiquidLayoutContent
+        className={`absolute inset-0 z-0 flex flex-col items-center justify-center ${contentClassName || ""}`}
+      >
         {children}
       </LiquidLayoutContent>
-      {bottom && <LiquidLayoutBottom className="mt-4">{bottom}</LiquidLayoutBottom>}
-      {right && <LiquidLayoutRight className="max-w-75">{right}</LiquidLayoutRight>}
-      {top && <LiquidLayoutTop>{top}</LiquidLayoutTop>}
-      {left && <LiquidLayoutLeft className="max-w-75">{left}</LiquidLayoutLeft>}
+
+      {bottom && (
+        <LiquidLayoutBottom className={`z-20 mt-4 ${bottomClassName || ""} ${uiVisibilityClass}`}>
+          {bottom}
+        </LiquidLayoutBottom>
+      )}
+      {right && (
+        <LiquidLayoutRight className={`z-20 max-w-75 ${rightClassName || ""} ${uiVisibilityClass}`}>
+          {right}
+        </LiquidLayoutRight>
+      )}
+      {top && (
+        <LiquidLayoutTop className={`z-20 ${topClassName || ""} ${uiVisibilityClass}`}>
+          {top}
+        </LiquidLayoutTop>
+      )}
+      {left && (
+        <LiquidLayoutLeft className={`z-20 max-w-75 ${leftClassName || ""} ${uiVisibilityClass}`}>
+          {left}
+        </LiquidLayoutLeft>
+      )}
     </LiquidLayout>
   );
 };