@vuer-ai/vuer-uikit 0.0.101 → 0.0.103

package/src/ui/dropdown.tsx

@@ -2,34 +2,17 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import { ComponentProps } from "react";
 
-import { cn, createClientOnlyComponent } from "../hooks";
+import { cn } from "../hooks";
 
-function DropdownMenuRoot({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+function DropdownMenu({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Root>) {
   return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
-function DropdownMenuFallback({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <div data-slot="dropdown-menu" {...props} />;
-}
-
-const DropdownMenu = createClientOnlyComponent(DropdownMenuRoot, DropdownMenuFallback);
-
-function DropdownMenuPortalRoot({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+function DropdownMenuPortal({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
   return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
 }
 
-function DropdownMenuPortalFallback({ children }: { children?: React.ReactNode }) {
-  return <div data-slot="dropdown-menu-portal">{children}</div>;
-}
-
-const DropdownMenuPortal = createClientOnlyComponent(
-  DropdownMenuPortalRoot,
-  DropdownMenuPortalFallback,
-);
-
-function DropdownMenuTriggerRoot({
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+function DropdownMenuTrigger({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
   return (
     <DropdownMenuPrimitive.Trigger
       data-slot="dropdown-menu-trigger"
@@ -39,32 +22,7 @@ function DropdownMenuTriggerRoot({
   );
 }
 
-function DropdownMenuTriggerFallback({
-  asChild,
-  children,
-  ...props
-}: ComponentProps<"button"> & { asChild?: boolean }) {
-  if (asChild) {
-    return <>{children}</>;
-  }
-
-  return (
-    <button
-      data-slot="dropdown-menu-trigger"
-      className="text-text-primary hover:text-text-highlight disabled:text-text-tertiary active:text-text-secondary"
-      {...props}
-    >
-      {children}
-    </button>
-  );
-}
-
-const DropdownMenuTrigger = createClientOnlyComponent(
-  DropdownMenuTriggerRoot,
-  DropdownMenuTriggerFallback,
-);
-
-function DropdownMenuContentRoot({
+function DropdownMenuContent({
   className,
   sideOffset = 4,
   ...props
@@ -96,7 +54,8 @@ function DropdownMenuContentRoot({
             "overflow-y-auto",
             "rounded-uk-md",
             "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-            "liquid:liquid-bg",
+            "liquid-dark:liquid-dark-bg",
+            "liquid-light:liquid-light-bg",
           ],
           className,
         )}
@@ -106,35 +65,7 @@ function DropdownMenuContentRoot({
   );
 }
 
-function DropdownMenuContentFallback({ className, ...props }: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dropdown-menu-content"
-      className={cn(
-        [
-          "bg-bg-primary",
-          "p-md",
-          "relative",
-          "z-50",
-          "overflow-x-hidden",
-          "overflow-y-auto",
-          "rounded-uk-md",
-          "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-          "liquid:liquid-bg",
-        ],
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-const DropdownMenuContent = createClientOnlyComponent(
-  DropdownMenuContentRoot,
-  DropdownMenuContentFallback,
-);
-
-function DropdownMenuGroupRoot({
+function DropdownMenuGroup({
   className,
   ...props
 }: ComponentProps<typeof DropdownMenuPrimitive.Group>) {
@@ -147,16 +78,7 @@ function DropdownMenuGroupRoot({
   );
 }
 
-function DropdownMenuGroupFallback({ className, ...props }: ComponentProps<"div">) {
-  return <div data-slot="dropdown-menu-group" className={cn("space-y-xs", className)} {...props} />;
-}
-
-const DropdownMenuGroup = createClientOnlyComponent(
-  DropdownMenuGroupRoot,
-  DropdownMenuGroupFallback,
-);
-
-function DropdownMenuItemRoot({
+function DropdownMenuItem({
   className,
   inset,
   variant = "default",
@@ -182,7 +104,7 @@ function DropdownMenuItemRoot({
           "cursor-default",
           "rounded-uk-xs",
           "text-uk-sm",
-          "leading-uk-xs",
+          "leading-uk-sm",
           "outline-hidden",
           "select-none",
           "hover:bg-bg-tertiary",
@@ -200,55 +122,7 @@ function DropdownMenuItemRoot({
   );
 }
 
-function DropdownMenuItemFallback({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: ComponentProps<"div"> & {
-  inset?: boolean;
-  variant?: "default" | "destructive";
-  asChild?: boolean;
-}) {
-  return (
-    <div
-      data-slot="dropdown-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-xs",
-          "outline-hidden",
-          "select-none",
-          "hover:bg-bg-tertiary",
-          "[&_svg]:pointer-events-none",
-          "[&_svg]:shrink-0",
-          "[&_svg:not([class*='size-'])]:size-4",
-          "[&_svg:not([class*='text-'])]:text-muted-foreground",
-        ],
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-const DropdownMenuItem = createClientOnlyComponent(
-  DropdownMenuItemRoot as never,
-  DropdownMenuItemFallback,
-);
-
-function DropdownMenuCheckboxItemRoot({
+function DropdownMenuCheckboxItem({
   className,
   children,
   checked,
@@ -270,7 +144,7 @@ function DropdownMenuCheckboxItemRoot({
           "cursor-default",
           "rounded-uk-xs",
           "text-uk-sm",
-          "leading-uk-xs",
+          "leading-uk-sm",
           "outline-hidden",
           "select-none",
           "hover:bg-bg-tertiary",
@@ -295,69 +169,13 @@ function DropdownMenuCheckboxItemRoot({
   );
 }
 
-function DropdownMenuCheckboxItemFallback({
-  className,
-  children,
-  checked,
-  ...props
-}: ComponentProps<"div"> & { checked?: boolean; asChild?: boolean }) {
-  return (
-    <div
-      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",
-          "relative",
-          "cursor-default",
-          "rounded-uk-xs",
-          "text-uk-sm",
-          "leading-uk-xs",
-          "outline-hidden",
-          "select-none",
-          "hover:bg-bg-tertiary",
-          "[&_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">
-        {checked && <CheckIcon className="size-4" />}
-      </span>
-      {children}
-    </div>
-  );
-}
-
-const DropdownMenuCheckboxItem = createClientOnlyComponent(
-  DropdownMenuCheckboxItemRoot as never,
-  DropdownMenuCheckboxItemFallback,
-);
-
-function DropdownMenuRadioGroupRoot({
+function DropdownMenuRadioGroup({
   ...props
 }: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
   return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
 }
 
-function DropdownMenuRadioGroupFallback({ ...props }: ComponentProps<"div">) {
-  return <div data-slot="dropdown-menu-radio-group" {...props} />;
-}
-
-const DropdownMenuRadioGroup = createClientOnlyComponent(
-  DropdownMenuRadioGroupRoot,
-  DropdownMenuRadioGroupFallback,
-);
-
-function DropdownMenuRadioItemRoot({
+function DropdownMenuRadioItem({
   className,
   children,
   ...props
@@ -381,7 +199,7 @@ function DropdownMenuRadioItemRoot({
           "pl-[calc(var(--spacing-xl)*1.8)]",
           "pr-md",
           "text-uk-sm",
-          "leading-uk-xs",
+          "leading-uk-sm",
           "data-[disabled]:pointer-events-none",
           "data-[disabled]:text-bg-quaternary",
           "[&_svg:not([class*='size-'])]:size-4",
@@ -402,53 +220,7 @@ function DropdownMenuRadioItemRoot({
   );
 }
 
-function DropdownMenuRadioItemFallback({
-  className,
-  children,
-  ...props
-}: ComponentProps<"div"> & { asChild?: boolean }) {
-  return (
-    <div
-      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",
-          "text-uk-sm",
-          "leading-uk-xs",
-          "[&_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">
-        <CircleIcon className="size-2 fill-current" />
-      </span>
-      {children}
-    </div>
-  );
-}
-
-const DropdownMenuRadioItem = createClientOnlyComponent(
-  DropdownMenuRadioItemRoot as never,
-  DropdownMenuRadioItemFallback,
-);
-
-function DropdownMenuLabelRoot({
+function DropdownMenuLabel({
   className,
   inset,
   ...props
@@ -459,35 +231,13 @@ function DropdownMenuLabelRoot({
     <DropdownMenuPrimitive.Label
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn("text-text-secondary text-uk-sm leading-uk-xs pb-lg pt-xs px-sm", className)}
+      className={cn("text-text-secondary text-uk-sm leading-uk-sm pb-lg pt-xs px-sm", className)}
       {...props}
     />
   );
 }
 
-function DropdownMenuLabelFallback({
-  className,
-  inset,
-  ...props
-}: ComponentProps<"div"> & {
-  inset?: boolean;
-}) {
-  return (
-    <div
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn("text-text-secondary text-uk-sm leading-uk-xs px-2 py-1.5", className)}
-      {...props}
-    />
-  );
-}
-
-const DropdownMenuLabel = createClientOnlyComponent(
-  DropdownMenuLabelRoot,
-  DropdownMenuLabelFallback,
-);
-
-function DropdownMenuSeparatorRoot({
+function DropdownMenuSeparator({
   className,
   ...props
 }: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
@@ -500,42 +250,21 @@ function DropdownMenuSeparatorRoot({
   );
 }
 
-function DropdownMenuSeparatorFallback({ className, ...props }: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dropdown-menu-separator"
-      className={cn("bg-line-primary my-lg pointer-events-none h-px", className)}
-      {...props}
-    />
-  );
-}
-
-const DropdownMenuSeparator = createClientOnlyComponent(
-  DropdownMenuSeparatorRoot,
-  DropdownMenuSeparatorFallback,
-);
-
 function DropdownMenuShortcut({ className, ...props }: ComponentProps<"span">) {
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn("text-text-tertiary text-uk-sm leading-uk-xs ml-auto", className)}
+      className={cn("text-text-tertiary text-uk-sm leading-uk-sm ml-auto", className)}
       {...props}
     />
   );
 }
 
-function DropdownMenuSubRoot({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+function DropdownMenuSub({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
   return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
-function DropdownMenuSubFallback({ ...props }: ComponentProps<"div">) {
-  return <div data-slot="dropdown-menu-sub" {...props} />;
-}
-
-const DropdownMenuSub = createClientOnlyComponent(DropdownMenuSubRoot, DropdownMenuSubFallback);
-
-function DropdownMenuSubTriggerRoot({
+function DropdownMenuSubTrigger({
   className,
   inset,
   children,
@@ -558,7 +287,7 @@ function DropdownMenuSubTriggerRoot({
         "cursor-default",
         "rounded-uk-xs",
         "text-uk-sm",
-        "leading-uk-xs",
+        "leading-uk-sm",
         "outline-hidden",
         "select-none",
         "hover:bg-bg-tertiary",
@@ -579,54 +308,7 @@ function DropdownMenuSubTriggerRoot({
   );
 }
 
-function DropdownMenuSubTriggerFallback({
-  className,
-  inset,
-  children,
-  ...props
-}: ComponentProps<"div"> & {
-  inset?: boolean;
-  asChild?: boolean;
-}) {
-  return (
-    <div
-      data-slot="dropdown-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-xs",
-        "outline-hidden",
-        "select-none",
-        "hover:bg-bg-tertiary",
-        "[&_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" />
-    </div>
-  );
-}
-
-const DropdownMenuSubTrigger = createClientOnlyComponent(
-  DropdownMenuSubTriggerRoot,
-  DropdownMenuSubTriggerFallback,
-);
-
-function DropdownMenuSubContentRoot({
+function DropdownMenuSubContent({
   className,
   ...props
 }: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
@@ -654,7 +336,8 @@ function DropdownMenuSubContentRoot({
         "overflow-y-auto",
         "rounded-uk-md",
         "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-        "liquid:liquid-bg",
+        "liquid-dark:liquid-dark-bg",
+        "liquid-light:liquid-light-bg",
         className,
       )}
       {...props}
@@ -662,32 +345,6 @@ function DropdownMenuSubContentRoot({
   );
 }
 
-function DropdownMenuSubContentFallback({ className, ...props }: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "bg-bg-primary",
-        "p-md",
-        "relative",
-        "z-50",
-        "overflow-x-hidden",
-        "overflow-y-auto",
-        "rounded-uk-md",
-        "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-        "liquid:liquid-bg",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-const DropdownMenuSubContent = createClientOnlyComponent(
-  DropdownMenuSubContentRoot,
-  DropdownMenuSubContentFallback,
-);
-
 export {
   DropdownMenu,
   DropdownMenuPortal,

package/src/ui/inputs/index.tsx

@@ -2,5 +2,6 @@ export * from "./input";
 export * from "./input-numbers";
 export * from "./color-input";
 export * from "./presets-input";
+export * from "./presets-rad-input";
 export * from "./number-inputs";
 export * from "./text-input";

package/src/ui/inputs/input.tsx

@@ -9,11 +9,8 @@ const inputRootVariants = cva(
   {
     variants: {
       state: {
-        default: [
-          "hover:bg-bg-secondary/80",
-          "has-[input:focus]:bg-bg-secondary",
-        ],
-        disabled: ["disabled:cursor-not-allowed", "bg-bg-secondary", "text-text-secondary"],
+        default: ["hover:bg-bg-secondary/80", "has-[input:focus]:bg-bg-secondary"],
+        disabled: ["disabled:cursor-not-allowed", "bg-bg-quaternary", "text-text-secondary"],
         error: ["hover:bg-danger-primary/10", "bg-danger-primary/20"],
       },
       size: {
@@ -103,6 +100,7 @@ export const InputRoot = forwardRef<HTMLInputElement, InputRootProps>(function I
             "[input[type=number]]:font-number-input",
             "[&::-webkit-inner-spin-button]:appearance-none",
             "[&::-webkit-outer-spin-button]:appearance-none",
+            "disabled:cursor-not-allowed",
           ],
           inputClassName,
         )}

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

@@ -1,12 +1,53 @@
-import { forwardRef } from "react";
+import { forwardRef, useMemo } from "react";
 
-import { EulerInput, EulerInputProps } from "./EulerInput";
+import { VectorInput, VectorInputProps } from "./VectorInput";
 
-type EulerRadInputProps = Omit<EulerInputProps, "unit">;
+interface EulerRadInputProps extends Omit<VectorInputProps, "value" | "labels" | "onValuesChange"> {
+  value: [number, number, number];
+  onValuesChange?: (value: [number, number, number]) => void;
+  display?: "deg" | "pi" | "rad";
+}
 
 const EulerRadInput = forwardRef<HTMLDivElement, EulerRadInputProps>(
-  function EulerRadInput(props, ref) {
-    return <EulerInput ref={ref} unit="rad" {...props} />;
+  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}
+      />
+    );
   },
 );
 

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

@@ -1,22 +1,48 @@
-import { forwardRef } from "react";
+import { forwardRef, useMemo } from "react";
 
 import { InputNumbers, InputNumbersProps } from "../input-numbers";
 
 interface RadInputProps extends Omit<InputNumbersProps, "value" | "onValuesChange" | "onChange"> {
   value?: number;
   onChange?: (value: number) => void;
+  display?: "deg" | "pi" | "rad";
 }
 
 const RadInput = forwardRef<HTMLDivElement, RadInputProps>(function RadInput(
-  { value = 0, onChange, ...props },
+  { value = 0, onChange, display = "rad", ...props },
   ref,
 ) {
+  const displayValue = useMemo(() => {
+    if (display === "deg") {
+      return (value * 180) / Math.PI;
+    } else if (display === "pi") {
+      return value / Math.PI;
+    }
+    return value;
+  }, [value, display]);
+
+  const handleChange = (displayVal: number) => {
+    let radValue = displayVal;
+    if (display === "deg") {
+      radValue = (displayVal * Math.PI) / 180;
+    } else if (display === "pi") {
+      radValue = displayVal * Math.PI;
+    }
+    onChange?.(radValue);
+  };
+
+  const suffix = useMemo(() => {
+    if (display === "deg") return "°";
+    if (display === "pi") return "π";
+    return "rad";
+  }, [display]);
+
   return (
     <InputNumbers
       ref={ref}
-      value={[value]}
-      onValuesChange={(values) => onChange?.(values[0])}
-      suffix={["rad"]}
+      value={[displayValue]}
+      onValuesChange={(values) => handleChange(values[0])}
+      suffix={[suffix]}
       {...props}
     />
   );