@vuer-ai/vuer-uikit 0.0.100 → 0.0.102

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}
     />
   );

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

@@ -0,0 +1,77 @@
+import { forwardRef, useState } from "react";
+
+import { Button } from "../button";
+import { RadInput, RadInputProps } from "./number-inputs/RadInput";
+import { cn } from "../../hooks";
+
+interface PresetsRadInputProps extends Omit<RadInputProps, "value" | "onChange"> {
+  presets: [number, number, number];
+  value?: number;
+  onChange?: (value: number) => void;
+  display?: "deg" | "pi" | "rad";
+  className?: string;
+}
+
+export const PresetsRadInput = forwardRef<HTMLDivElement, PresetsRadInputProps>(
+  function PresetsRadInput({ presets, value = 0, onChange, display = "rad", size, className, ...props }, ref) {
+    const [preset, setPreset] = useState(value);
+
+    const handleValueChange = (newValue: number) => {
+      setPreset(newValue);
+      onChange?.(newValue);
+    };
+
+    const handlePresetClick = (presetValue: number) => {
+      setPreset(presetValue);
+      onChange?.(presetValue);
+    };
+
+    const getDisplayValue = (radValue: number) => {
+      if (display === "deg") {
+        return (radValue * 180) / Math.PI;
+      } else if (display === "pi") {
+        return radValue / Math.PI;
+      }
+      return radValue;
+    };
+
+    const formatDisplayValue = (radValue: number) => {
+      const displayValue = getDisplayValue(radValue);
+      if (display === "pi") {
+        return `${displayValue.toFixed(2)}π`;
+      } else if (display === "deg") {
+        return `${displayValue.toFixed(0)}°`;
+      }
+      return displayValue.toFixed(2);
+    };
+
+    return (
+      <div className={cn("gap-xs grid grid-cols-5", className)}>
+        <div className="col-span-full">
+          <RadInput
+            {...props}
+            ref={ref}
+            size={size}
+            value={preset}
+            onChange={handleValueChange}
+            display={display}
+          />
+        </div>
+
+        {presets.map((p: number, i: number) => {
+          return (
+            <Button
+              key={i}
+              size={size}
+              variant="secondary"
+              className="h-6"
+              onClick={() => handlePresetClick(p)}
+            >
+              {formatDisplayValue(p)}
+            </Button>
+          );
+        })}
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,43 @@
+import { forwardRef } from "react";
+
+import { InputRoot, InputRootProps, InputSlot } from "./input";
+
+export interface TextInputProps extends Omit<InputRootProps, "type" | "value" | "onChange"> {
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  prefix?: string;
+  suffix?: string;
+  maxLength?: number;
+}
+
+/**
+ * Text input component for string values.
+ * Provides a simple text input with optional prefix/suffix.
+ *
+ * @param value - The current text value
+ * @param onChange - Callback when text changes
+ * @param placeholder - Placeholder text
+ * @param prefix - Optional prefix text/icon
+ * @param suffix - Optional suffix text/icon
+ * @param maxLength - Maximum character length
+ */
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput(
+  { value = "", onChange, prefix, suffix, placeholder, maxLength, ...props },
+  ref,
+) {
+  return (
+    <InputRoot
+      ref={ref}
+      type="text"
+      value={value}
+      onChange={(e) => onChange?.(e.target.value)}
+      placeholder={placeholder}
+      maxLength={maxLength}
+      {...props}
+    >
+      {prefix && <InputSlot side="left">{prefix}</InputSlot>}
+      {suffix && <InputSlot side="right">{suffix}</InputSlot>}
+    </InputRoot>
+  );
+});

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

@@ -28,7 +28,7 @@ export function LiquidLayoutLeft({ className, ...props }: Readonly<ComponentProp
     <div
       {...props}
       className={cn(
-        "order-2 col-start-1 flex flex-col items-start gap-4 [&>*]:pointer-events-auto",
+        "order-2 col-start-1 flex flex-col items-start gap-4 overflow-y-auto [&>*]:pointer-events-auto",
         className,
       )}
     />
@@ -57,7 +57,7 @@ export function LiquidLayoutRight({
     <Comp
       {...props}
       className={cn(
-        "order-4 col-start-3 flex flex-col items-end gap-4 [&>*]:pointer-events-auto",
+        "order-4 col-start-3 flex flex-col items-end gap-4 overflow-y-auto [&>*]:pointer-events-auto",
         className,
       )}
     />

package/src/ui/sidebar.tsx

@@ -316,7 +316,7 @@ function SidebarHeader({ className, ...props }: ComponentProps<"div">) {
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
-      className={cn("text-uk-lg leading-uk-lg px-md flex flex-col", className)}
+      className={cn("text-uk-lg leading-uk-lg px-md py-lg flex flex-col", className)}
       {...props}
     />
   );
@@ -327,7 +327,7 @@ function SidebarFooter({ className, ...props }: ComponentProps<"div">) {
     <div
       data-slot="sidebar-footer"
       data-sidebar="footer"
-      className={cn("px-lg flex flex-col", className)}
+      className={cn("px-md py-lg flex flex-col", className)}
       {...props}
     />
   );
@@ -338,10 +338,7 @@ function SidebarSeparator({ className, ...props }: ComponentProps<typeof Separat
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn("bg-line-primary -ml-lg", className)}
-      style={{
-        width: "calc(100% + var(--spacing-lg) * 2)",
-      }}
+      className={cn("bg-line-primary", className)}
       {...props}
     />
   );
@@ -431,7 +428,7 @@ function SidebarMenu({ className, ...props }: ComponentProps<"ul">) {
     <ul
       data-slot="sidebar-menu"
       data-sidebar="menu"
-      className={cn("gap-lg flex w-full min-w-0 flex-col", className)}
+      className={cn("py-md gap-sm flex w-full min-w-0 flex-col", className)}
       style={{
         paddingLeft: "0px",
         marginBottom: "0px",
@@ -656,10 +653,12 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        "text-text-primary ring-sidebar-ring hover:bg-bg-secondary hover:text-text-primary active:bg-bg-tertiary active:text-text-highlight [&>svg]:text-icon-primary gap-md rounded-uk-md px-lg flex h-[32px] min-w-0 -translate-x-px items-center overflow-hidden outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0",
+        "text-text-primary ring-sidebar-ring hover:bg-bg-secondary hover:text-text-primary active:bg-bg-tertiary active:text-text-highlight [&>svg]:text-icon-primary gap-md rounded-uk-md px-lg flex h-[32px] min-w-0 -translate-x-px cursor-pointer items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0",
         size === "sm" && "text-uk-sm leading-uk-sm",
         size === "md" && "text-uk-md leading-uk-md",
         "group-data-[collapsible=icon]:hidden",
+        isActive &&
+          "bg-bg-tertiary text-text-highlight [&>svg]:text-icon-highlight hover:bg-bg-tertiary hover:text-text-highlight",
         className,
       )}
       {...props}

package/src/ui/theme/ThemeProvider.tsx

@@ -9,7 +9,13 @@ import {
 } from "react";
 
 import { ThemeScript } from "./themeScript";
-import type { Attribute, ThemeProviderProps, UseThemeProps, BaseTheme, ComputedTheme } from "./types";
+import type {
+  Attribute,
+  BaseTheme,
+  ComputedTheme,
+  ThemeProviderProps,
+  UseThemeProps,
+} from "./types";
 
 export const colorSchemes = ["light", "dark"] as const;
 export const MEDIA = "(prefers-color-scheme: dark)";
@@ -37,47 +43,47 @@ export const getFromLS = (key: string, fallback: string): string => {
 /**
  * Calculate the actual theme name
  */
-export const computeTheme = (baseTheme: BaseTheme, isLiquid: boolean, systemIsDark: boolean): ComputedTheme => {
+export const computeTheme = (
+  baseTheme: BaseTheme,
+  isLiquid: boolean,
+  systemIsDark: boolean,
+): ComputedTheme => {
   let resolvedBase: "light" | "dark";
-  
+
   if (baseTheme === "system") {
     resolvedBase = systemIsDark ? "dark" : "light";
   } else {
     resolvedBase = baseTheme;
   }
-  
-  return isLiquid ? `liquid-${resolvedBase}` as ComputedTheme : resolvedBase;
-};
 
-/**
- * Parse old theme string to new state structure
- */
-export const parseOldTheme = (oldTheme: string): { baseTheme: BaseTheme; isLiquid: boolean } => {
-  if (oldTheme === "system") {
-    return { baseTheme: "system", isLiquid: false };
-  }
-  
-  if (oldTheme.startsWith("liquid-")) {
-    const base = oldTheme.replace("liquid-", "") as "light" | "dark";
-    return { baseTheme: base, isLiquid: true };
-  }
-  
-  return { baseTheme: oldTheme as BaseTheme, isLiquid: false };
+  return isLiquid ? (`liquid-${resolvedBase}` as ComputedTheme) : resolvedBase;
 };
 
-
-
 /**
- * Hook to read and update theme state from `ThemeProvider`.
+ * Hook to read and update the theme state from `ThemeProvider`.
  * Throws if used outside a provider.
  */
-export const useTheme = () => {
+export function useTheme<T = UseThemeProps>(
+  selector?: (v: UseThemeProps) => T,
+): T extends void ? UseThemeProps : T {
   const context = useContext(ThemeContext);
 
   if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
 
-  return context;
-};
+  return useMemo(
+    () => {
+      if (!selector) {
+        return context as any;
+      } else if (typeof selector === "function") {
+        return selector(context);
+      } else {
+        return context[selector] as any;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [context],
+  ) as T extends void ? UseThemeProps : T;
+}
 
 /**
  * Provides theme context and DOM attribute synchronization for theming.
@@ -112,7 +118,7 @@ export const Theme = ({
   scriptProps,
 }: PropsWithChildren<ThemeProviderProps>) => {
   const themes = defaultThemes;
-  
+
   const initialState = useMemo(() => {
     return { baseTheme: defaultBaseTheme!, isLiquid: defaultIsLiquid! };
   }, [defaultBaseTheme, defaultIsLiquid]);
@@ -122,9 +128,11 @@ export const Theme = ({
     if (!stored) {
       return initialState.baseTheme;
     }
-    return (["light", "dark", "system"].includes(stored) ? stored : initialState.baseTheme) as BaseTheme;
+    return (
+      ["light", "dark", "system"].includes(stored) ? stored : initialState.baseTheme
+    ) as BaseTheme;
   });
-  
+
   const [isLiquid, setIsLiquidState] = useState<boolean>(() => {
     const stored = getFromLS(`${storageKey}-liquid`, "");
     if (!stored) {
@@ -142,15 +150,14 @@ export const Theme = ({
 
   const attrs = !value ? themes : Object.values(value);
 
-  const computedTheme = useMemo(() => 
-    computeTheme(baseTheme, isLiquid, systemIsDark), 
-    [baseTheme, isLiquid, systemIsDark]
+  const computedTheme = useMemo(
+    () => computeTheme(baseTheme, isLiquid, systemIsDark),
+    [baseTheme, isLiquid, systemIsDark],
   );
 
   const resolvedTheme = useMemo((): ComputedTheme => {
     if (forcedTheme) {
-      const parsed = parseOldTheme(forcedTheme);
-      return computeTheme(parsed.baseTheme, parsed.isLiquid, systemIsDark);
+      return forcedTheme as ComputedTheme;
     }
     return computedTheme;
   }, [forcedTheme, computedTheme, systemIsDark]);
@@ -190,26 +197,26 @@ export const Theme = ({
     [attribute, attrs, disableTransitionOnChange, enableColorScheme, nonce, value],
   );
 
-  const setBaseTheme = useCallback((newBaseTheme: BaseTheme) => {
-    setBaseThemeState(newBaseTheme);
-    saveToLS(`${storageKey}-base`, newBaseTheme);
-  }, [storageKey]);
+  const setBaseTheme = useCallback(
+    (newBaseTheme: BaseTheme) => {
+      setBaseThemeState(newBaseTheme);
+      saveToLS(`${storageKey}-base`, newBaseTheme);
+    },
+    [storageKey],
+  );
 
   const toggleLiquid = useCallback(() => {
-    setIsLiquidState(prev => {
+    setIsLiquidState((prev) => {
       const newValue = !prev;
       saveToLS(`${storageKey}-liquid`, String(newValue));
       return newValue;
     });
   }, [storageKey]);
 
-  const handleMediaQuery = useCallback(
-    (e: MediaQueryListEvent | MediaQueryList) => {
-      const isDark = e.matches;
-      setSystemIsDark(isDark);
-    },
-    [],
-  );
+  const handleMediaQuery = useCallback((e: MediaQueryListEvent | MediaQueryList) => {
+    const isDark = e.matches;
+    setSystemIsDark(isDark);
+  }, []);
 
   // Always listen to System preference
   useEffect(() => {
@@ -249,13 +256,24 @@ export const Theme = ({
       toggleLiquid,
       computedTheme,
       resolvedTheme,
-      systemTheme: (enableSystem ? (systemIsDark ? "dark" : "light") : undefined) as "light" | "dark" | undefined,
+      systemTheme: (enableSystem ? (systemIsDark ? "dark" : "light") : undefined) as
+        | "light"
+        | "dark"
+        | undefined,
       forcedTheme,
       storageKey,
     }),
     [
-      baseTheme, setBaseTheme, isLiquid, toggleLiquid, computedTheme, resolvedTheme,
-      systemIsDark, enableSystem, forcedTheme, storageKey
+      baseTheme,
+      setBaseTheme,
+      isLiquid,
+      toggleLiquid,
+      computedTheme,
+      resolvedTheme,
+      systemIsDark,
+      enableSystem,
+      forcedTheme,
+      storageKey,
     ],
   );
 
@@ -268,9 +286,8 @@ export const Theme = ({
           attribute,
           enableSystem,
           enableColorScheme,
-          defaultTheme: initialState.baseTheme === "system" 
-            ? "system" 
-            : (initialState.isLiquid ? `liquid-${initialState.baseTheme}` : initialState.baseTheme),
+          defaultBaseTheme: initialState.baseTheme,
+          defaultIsLiquid: initialState.isLiquid,
           value,
           themes,
           nonce,

package/src/ui/theme/ThemeToggles.tsx

@@ -1,11 +1,11 @@
 // Liquid toggle component
-import { Droplet, Moon, Sun, SunMoon } from "lucide-react";
+import { LayoutTemplate, Moon, PanelsTopLeft, Sun, SunMoon } from "lucide-react";
 import React, { type ComponentProps } from "react";
 
 import { Button } from "../button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
 import { useTheme } from "./ThemeProvider";
-import { cn, createClientOnlyComponent, useDocument } from "../../hooks";
+import { cn } from "../../hooks";
 
 type LiquidToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
 
@@ -18,16 +18,16 @@ export const LiquidToggle: React.FC<LiquidToggleProps> = ({ className, ...props
         <Button
           icon
           variant="ghost"
-          value={isLiquid}
+          // value={isLiquid}
           aria-label={`Toggle liquid theme: ${isLiquid ? "on" : "off"}`}
           {...props}
           onClick={toggleLiquid}
           className={className}
         >
-          <Droplet size={20} />
+          {isLiquid ? <PanelsTopLeft size={20} /> : <LayoutTemplate size={20} />}
         </Button>
       </TooltipTrigger>
-      <TooltipContent>Toggle liquid theme</TooltipContent>
+      <TooltipContent>{isLiquid ? "Dock Menu Panels" : "Floating Menu Panels"}</TooltipContent>
     </Tooltip>
   );
 };
@@ -48,7 +48,7 @@ export const ThemeColorToggle: React.FC<ThemeColorToggleProps> = (props) => {
     }
   };
 
-  const isDark = resolvedTheme.includes("dark");
+  const isDark = resolvedTheme?.includes("dark");
   const isSystem = baseTheme === "system";
 
   return (
@@ -70,15 +70,15 @@ type ThemeTogglesProps = {
   colorToggleProps?: Omit<ThemeColorToggleProps, "className">;
 };
 
-export const ThemeToggles: React.FC<ThemeTogglesProps> = ({ 
-  className, 
-  liquidToggleProps = {}, 
-  colorToggleProps = {} 
+export const ThemeToggles: React.FC<ThemeTogglesProps> = ({
+  className,
+  liquidToggleProps = {},
+  colorToggleProps = {},
 }) => {
   return (
-    <div className={cn("flex gap-1", className)}>
+    <div className={cn("flex", className)}>
       <LiquidToggle {...liquidToggleProps} />
       <ThemeColorToggle {...colorToggleProps} />
     </div>
   );
-};
+};

package/src/ui/theme/index.ts

@@ -1,21 +1,11 @@
-export { 
-  useTheme, 
-  ThemeProvider, 
-  defaultThemes,
-  computeTheme,
-  parseOldTheme
-} from "./ThemeProvider";
-export { 
-  LiquidToggle, 
-  ThemeColorToggle,
-  ThemeToggles,
-} from "./ThemeToggles";
+export { useTheme, ThemeProvider, defaultThemes, computeTheme } from "./ThemeProvider";
+export { LiquidToggle, ThemeColorToggle, ThemeToggles } from "./ThemeToggles";
 export { ThemeScript } from "./themeScript";
 
-export type { 
-  Attribute, 
-  ThemeProviderProps, 
+export type {
+  Attribute,
+  ThemeProviderProps,
   UseThemeProps,
   BaseTheme,
-  ComputedTheme 
+  ComputedTheme,
 } from "./types";