@vuer-ai/vuer-uikit 0.0.49 → 0.0.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuer-ai/vuer-uikit",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "description": "React UI Kit components",
   "keywords": [
     "react",

package/src/hooks/clientOnly.tsx

@@ -18,9 +18,9 @@ export function clientOnly<T>(fn: () => T): T | undefined {
  * @param fallback - Optional fallback to render server-side
  * @returns A component that avoids hydration mismatches
  */
-export function createClientOnlyComponent<P = any>(
+export function createClientOnlyComponent<P extends object = Record<string, unknown>>(
   Component: React.ComponentType<P>,
-  fallback?: React.ComponentType<any>,
+  fallback?: React.ComponentType<P>,
 ): React.ComponentType<P> {
   return function ClientOnlyWrapper(props: P) {
     const [isClient, setIsClient] = React.useState(false);
@@ -30,10 +30,10 @@ export function createClientOnlyComponent<P = any>(
     }, []);
 
     if (!isClient) {
-      return fallback ? React.createElement(fallback as any, props as any) : null;
+      return fallback ? React.createElement(fallback, props) : null;
     }
 
-    return React.createElement(Component as any, props as any);
+    return React.createElement(Component, props);
   } as React.ComponentType<P>;
 }
 

package/src/hooks/useDragSelect.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect } from "react";
 
 export interface UseDragSelectOptions {
   onSelectionChange?: (selectedItems: Set<string>) => void;
@@ -7,7 +7,7 @@ export interface UseDragSelectOptions {
 export function useDragSelect(options: UseDragSelectOptions = {}) {
   const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
   const [isDragging, setIsDragging] = useState(false);
-  const [dragMode, setDragMode] = useState<'toggle' | 'replace'>('toggle');
+  const [dragMode, setDragMode] = useState<"toggle" | "replace">("toggle");
   const [dragStartItem, setDragStartItem] = useState<string | null>(null);
 
   // Notify when selection changes
@@ -21,10 +21,10 @@ export function useDragSelect(options: UseDragSelectOptions = {}) {
     setDragStartItem(id);
 
     // Determine drag mode based on modifier keys
-    const mode = e.ctrlKey || e.metaKey ? 'replace' : 'toggle';
+    const mode = e.ctrlKey || e.metaKey ? "replace" : "toggle";
     setDragMode(mode);
 
-    if (mode === 'replace') {
+    if (mode === "replace") {
       // In replace mode, start fresh selection
       setSelectedItems(new Set([id]));
     } else {
@@ -46,7 +46,7 @@ export function useDragSelect(options: UseDragSelectOptions = {}) {
       if (!isDragging) return;
       if (id === dragStartItem) return; // Don't re-process the starting item
 
-      if (dragMode === 'replace') {
+      if (dragMode === "replace") {
         setSelectedItems((prev) => new Set([...prev, id]));
       } else {
         // In toggle mode, each item toggles its own state
@@ -61,7 +61,7 @@ export function useDragSelect(options: UseDragSelectOptions = {}) {
         });
       }
     },
-    [isDragging, dragMode, dragStartItem]
+    [isDragging, dragMode, dragStartItem],
   );
 
   const handleMouseUp = useCallback(() => {
@@ -73,18 +73,15 @@ export function useDragSelect(options: UseDragSelectOptions = {}) {
     setSelectedItems(new Set());
   }, []);
 
-  const isSelected = useCallback(
-    (id: string) => selectedItems.has(id),
-    [selectedItems]
-  );
+  const isSelected = useCallback((id: string) => selectedItems.has(id), [selectedItems]);
 
   const getItemProps = useCallback(
     (id: string) => ({
-      'data-selected': selectedItems.has(id),
+      "data-selected": selectedItems.has(id),
       onMouseDown: (e: React.MouseEvent) => handleMouseDown(id, e),
       onMouseEnter: () => handleMouseEnter(id),
     }),
-    [selectedItems, handleMouseDown, handleMouseEnter]
+    [selectedItems, handleMouseDown, handleMouseEnter],
   );
 
   // Handle global mouse up and escape key
@@ -94,17 +91,17 @@ export function useDragSelect(options: UseDragSelectOptions = {}) {
       setDragStartItem(null);
     };
     const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
+      if (e.key === "Escape") {
         clearSelection();
       }
     };
 
-    document.addEventListener('mouseup', handleGlobalMouseUp);
-    document.addEventListener('keydown', handleEscape);
+    document.addEventListener("mouseup", handleGlobalMouseUp);
+    document.addEventListener("keydown", handleEscape);
 
     return () => {
-      document.removeEventListener('mouseup', handleGlobalMouseUp);
-      document.removeEventListener('keydown', handleEscape);
+      document.removeEventListener("mouseup", handleGlobalMouseUp);
+      document.removeEventListener("keydown", handleEscape);
     };
   }, [clearSelection]);
 
@@ -114,4 +111,4 @@ export function useDragSelect(options: UseDragSelectOptions = {}) {
     clearSelection,
     getItemProps,
   };
-}
+}

package/src/ui/avatar.tsx

@@ -6,7 +6,7 @@ import { cn, createClientOnlyComponent } from "../hooks";
 /**
  * Avatar root component that displays a user's profile image with fallback support.
  * Based on Radix UI Avatar primitive with default styling for a circular avatar.
- * 
+ *
  * @param className - Additional CSS classes to apply
  * @param props - All standard Radix Avatar.Root props are supported
  */
@@ -35,7 +35,7 @@ export const AvatarSSRFallback = ({ className }: { className?: string }) => (
 /**
  * Main Avatar component with client-side rendering support and SSR fallback.
  * Use this as the container for AvatarImage and AvatarFallback components.
- * 
+ *
  * @example
  * ```tsx
  * <Avatar>
@@ -49,7 +49,7 @@ export const Avatar = createClientOnlyComponent(AvatarRoot, AvatarSSRFallback);
 /**
  * Avatar image component for displaying the actual user image.
  * If the image fails to load, it will automatically fall back to AvatarFallback.
- * 
+ *
  * @param src - Image source URL
  * @param alt - Alternative text for the image
  * @param className - Additional CSS classes to apply
@@ -77,7 +77,7 @@ export const AvatarImageFallback = ({ className }: { className?: string }) => (
 /**
  * Avatar image component with client-side rendering support and SSR fallback.
  * Displays the user's profile image with automatic fallback support.
- * 
+ *
  * @example
  * ```tsx
  * <AvatarImage src="/user-avatar.jpg" alt="John Doe" />
@@ -88,7 +88,7 @@ export const AvatarImage = createClientOnlyComponent(AvatarImageRoot, AvatarImag
 /**
  * Avatar fallback component that displays when the image fails to load.
  * Typically contains user initials or a default icon.
- * 
+ *
  * @param className - Additional CSS classes to apply
  * @param children - Content to display (usually initials)
  * @param props - All standard Radix Avatar.Fallback props are supported
@@ -132,7 +132,7 @@ export const AvatarFallbackSSR = ({
 /**
  * Avatar fallback component with client-side rendering support and SSR fallback.
  * Displays fallback content when the avatar image fails to load.
- * 
+ *
  * @example
  * ```tsx
  * <AvatarFallback>JD</AvatarFallback>
@@ -157,12 +157,12 @@ export interface AvatarGroupProps {
 /**
  * Avatar group component for displaying multiple avatars in a stacked layout.
  * Supports configurable spacing and a maximum count with overflow indicator.
- * 
+ *
  * @param children - Avatar components to display
  * @param className - Additional CSS classes to apply
  * @param spacing - Spacing between avatars ("tight" | "normal" | "loose"), defaults to "normal"
  * @param max - Maximum number of avatars to show, remaining count will be shown as "+N"
- * 
+ *
  * @example
  * ```tsx
  * <AvatarGroup spacing="tight" max={3}>

package/src/ui/button.tsx

@@ -62,6 +62,10 @@ export const buttonVariants = cva(
         lg: ["text-uk-lg", "h-9", " gap-xs", "px-xl", "[&_svg:not([class*='size-'])]:size-5"],
       },
       icon: { false: null, true: null },
+      value: { 
+        false: null, 
+        true: ["text-brand-primary", "[&_svg]:text-brand-primary"] 
+      },
     },
     compoundVariants: [
       { size: "sm", icon: true, class: ["px-xs", "py-xs", " size-6"] },
@@ -72,12 +76,14 @@ export const buttonVariants = cva(
       variant: "primary",
       size: "base",
       icon: false,
+      value: false,
     },
   },
 );
 
-interface ButtonProps extends ComponentProps<"button">, VariantProps<typeof buttonVariants> {
+interface ButtonProps extends Omit<ComponentProps<"button">, "value">, VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  value?: boolean;
 }
 
 /**
@@ -90,7 +96,7 @@ interface ButtonProps extends ComponentProps<"button">, VariantProps<typeof butt
  * @param asChild - When true, renders the child element instead of a button using Slot
  */
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { className, variant, size, icon, asChild = false, ...props },
+  { className, variant, size, icon, value, asChild = false, ...props },
   ref,
 ) {
   const Comp = asChild ? Slot : "button";
@@ -99,7 +105,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     <Comp
       ref={ref}
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, icon, className }))}
+      className={cn(buttonVariants({ variant, size, icon, value, className }))}
       {...props}
     />
   );

package/src/ui/drag-selectable/createSelectable.tsx

@@ -1,4 +1,5 @@
 import React, { ComponentType, useEffect } from "react";
+
 import { useDragSelectContext } from "./DragSelectProvider";
 
 interface SelectableProps {

package/src/ui/dropdown.tsx

@@ -47,7 +47,7 @@ function DropdownMenuTriggerFallback({
   if (asChild) {
     return <>{children}</>;
   }
-  
+
   return (
     <button
       data-slot="dropdown-menu-trigger"
@@ -252,7 +252,7 @@ function DropdownMenuItemFallback({
   );
 }
 
-const DropdownMenuItem = createClientOnlyComponent(DropdownMenuItemRoot, DropdownMenuItemFallback);
+const DropdownMenuItem = createClientOnlyComponent(DropdownMenuItemRoot as any, DropdownMenuItemFallback);
 
 function DropdownMenuCheckboxItemRoot({
   className,
@@ -349,7 +349,7 @@ function DropdownMenuCheckboxItemFallback({
 }
 
 const DropdownMenuCheckboxItem = createClientOnlyComponent(
-  DropdownMenuCheckboxItemRoot,
+  DropdownMenuCheckboxItemRoot as any,
   DropdownMenuCheckboxItemFallback,
 );
 
@@ -460,7 +460,7 @@ function DropdownMenuRadioItemFallback({
 }
 
 const DropdownMenuRadioItem = createClientOnlyComponent(
-  DropdownMenuRadioItemRoot,
+  DropdownMenuRadioItemRoot as any,
   DropdownMenuRadioItemFallback,
 );
 

package/src/ui/form/CmInput.tsx

@@ -1,19 +1,12 @@
 import { forwardRef } from "react";
+
 import { NumberInput, NumberInputProps } from "./NumberInput";
 
 interface CmInputProps extends Omit<NumberInputProps, "unit"> {}
 
-const CmInput = forwardRef<HTMLInputElement, CmInputProps>(
-  function CmInput(props, ref) {
-    return (
-      <NumberInput 
-        ref={ref} 
-        unit="cm"
-        {...props}
-      />
-    );
-  }
-);
+const CmInput = forwardRef<HTMLInputElement, CmInputProps>(function CmInput(props, ref) {
+  return <NumberInput ref={ref} unit="cm" {...props} />;
+});
 
 export { CmInput };
-export type { CmInputProps };
+export type { CmInputProps };

package/src/ui/form/DegInput.tsx

@@ -1,19 +1,12 @@
 import { forwardRef } from "react";
+
 import { NumberInput, NumberInputProps } from "./NumberInput";
 
 interface DegInputProps extends Omit<NumberInputProps, "unit"> {}
 
-const DegInput = forwardRef<HTMLInputElement, DegInputProps>(
-  function DegInput(props, ref) {
-    return (
-      <NumberInput 
-        ref={ref} 
-        unit="°"
-        {...props}
-      />
-    );
-  }
-);
+const DegInput = forwardRef<HTMLInputElement, DegInputProps>(function DegInput(props, ref) {
+  return <NumberInput ref={ref} unit="°" {...props} />;
+});
 
 export { DegInput };
-export type { DegInputProps };
+export type { DegInputProps };

package/src/ui/form/EulerDegInput.tsx

@@ -1,19 +1,14 @@
 import { forwardRef } from "react";
+
 import { EulerInput, EulerInputProps } from "./EulerInput";
 
 interface EulerDegInputProps extends Omit<EulerInputProps, "unit"> {}
 
 const EulerDegInput = forwardRef<HTMLDivElement, EulerDegInputProps>(
   function EulerDegInput(props, ref) {
-    return (
-      <EulerInput 
-        ref={ref} 
-        unit="deg"
-        {...props}
-      />
-    );
-  }
+    return <EulerInput ref={ref} unit="deg" {...props} />;
+  },
 );
 
 export { EulerDegInput };
-export type { EulerDegInputProps };
+export type { EulerDegInputProps };

package/src/ui/form/EulerInput.tsx

@@ -1,4 +1,5 @@
 import { forwardRef } from "react";
+
 import { VectorInput, VectorInputProps } from "./VectorInput";
 
 interface EulerInputProps extends Omit<VectorInputProps, "value" | "labels" | "onValuesChange"> {
@@ -7,22 +8,23 @@ interface EulerInputProps extends Omit<VectorInputProps, "value" | "labels" | "o
   unit?: "deg" | "rad";
 }
 
-const EulerInput = forwardRef<HTMLDivElement, EulerInputProps>(
-  function EulerInput({ value, onValuesChange, unit = "deg", ...props }, ref) {
-    const unitSymbol = unit === "deg" ? "°" : "rad";
-    const labels = [`x${unitSymbol}`, `y${unitSymbol}`, `z${unitSymbol}`];
-    
-    return (
-      <VectorInput 
-        ref={ref} 
-        value={value}
-        onValuesChange={onValuesChange as (value: number[]) => void}
-        labels={labels}
-        {...props}
-      />
-    );
-  }
-);
+const EulerInput = forwardRef<HTMLDivElement, EulerInputProps>(function EulerInput(
+  { value, onValuesChange, unit = "deg", ...props },
+  ref,
+) {
+  const unitSymbol = unit === "deg" ? "°" : "rad";
+  const labels = [`x${unitSymbol}`, `y${unitSymbol}`, `z${unitSymbol}`];
+
+  return (
+    <VectorInput
+      ref={ref}
+      value={value}
+      onValuesChange={onValuesChange as (value: number[]) => void}
+      labels={labels}
+      {...props}
+    />
+  );
+});
 
 export { EulerInput };
-export type { EulerInputProps };
+export type { EulerInputProps };

package/src/ui/form/EulerRadInput.tsx

@@ -1,19 +1,14 @@
 import { forwardRef } from "react";
+
 import { EulerInput, EulerInputProps } from "./EulerInput";
 
 interface EulerRadInputProps extends Omit<EulerInputProps, "unit"> {}
 
 const EulerRadInput = forwardRef<HTMLDivElement, EulerRadInputProps>(
   function EulerRadInput(props, ref) {
-    return (
-      <EulerInput 
-        ref={ref} 
-        unit="rad"
-        {...props}
-      />
-    );
-  }
+    return <EulerInput ref={ref} unit="rad" {...props} />;
+  },
 );
 
 export { EulerRadInput };
-export type { EulerRadInputProps };
+export type { EulerRadInputProps };

package/src/ui/form/InchInput.tsx

@@ -1,19 +1,12 @@
 import { forwardRef } from "react";
+
 import { NumberInput, NumberInputProps } from "./NumberInput";
 
 interface InchInputProps extends Omit<NumberInputProps, "unit"> {}
 
-const InchInput = forwardRef<HTMLInputElement, InchInputProps>(
-  function InchInput(props, ref) {
-    return (
-      <NumberInput 
-        ref={ref} 
-        unit="in"
-        {...props}
-      />
-    );
-  }
-);
+const InchInput = forwardRef<HTMLInputElement, InchInputProps>(function InchInput(props, ref) {
+  return <NumberInput ref={ref} unit="in" {...props} />;
+});
 
 export { InchInput };
-export type { InchInputProps };
+export type { InchInputProps };

package/src/ui/form/IntInput.tsx

@@ -1,19 +1,12 @@
 import { forwardRef } from "react";
+
 import { NumberInput, NumberInputProps } from "./NumberInput";
 
 interface IntInputProps extends Omit<NumberInputProps, "step"> {}
 
-const IntInput = forwardRef<HTMLInputElement, IntInputProps>(
-  function IntInput(props, ref) {
-    return (
-      <NumberInput 
-        ref={ref} 
-        step={1}
-        {...props}
-      />
-    );
-  }
-);
+const IntInput = forwardRef<HTMLInputElement, IntInputProps>(function IntInput(props, ref) {
+  return <NumberInput ref={ref} step={1} {...props} />;
+});
 
 export { IntInput };
-export type { IntInputProps };
+export type { IntInputProps };

package/src/ui/form/KVectorInput.tsx

@@ -1,25 +1,20 @@
 import { forwardRef } from "react";
+
 import { VectorInput, VectorInputProps } from "./VectorInput";
 
 interface KVectorInputProps extends Omit<VectorInputProps, "labels"> {
   dimensions?: number;
 }
 
-const KVectorInput = forwardRef<HTMLDivElement, KVectorInputProps>(
-  function KVectorInput({ value, dimensions, ...props }, ref) {
-    const k = dimensions || value.length;
-    const labels = Array.from({ length: k }, (_, i) => `${i}`);
-    
-    return (
-      <VectorInput 
-        ref={ref} 
-        value={value}
-        labels={labels}
-        {...props}
-      />
-    );
-  }
-);
+const KVectorInput = forwardRef<HTMLDivElement, KVectorInputProps>(function KVectorInput(
+  { value, dimensions, ...props },
+  ref,
+) {
+  const k = dimensions || value.length;
+  const labels = Array.from({ length: k }, (_, i) => `${i}`);
+
+  return <VectorInput ref={ref} value={value} labels={labels} {...props} />;
+});
 
 export { KVectorInput };
-export type { KVectorInputProps };
+export type { KVectorInputProps };

package/src/ui/form/NumberInput.tsx

@@ -1,24 +1,22 @@
 import { forwardRef } from "react";
+
 import { InputRoot, InputRootProps, InputSlot } from "../input";
 
 interface NumberInputProps extends Omit<InputRootProps, "type"> {
   unit?: string;
 }
 
-const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
-  function NumberInput({ unit, children, ...props }, ref) {
-    return (
-      <InputRoot ref={ref} type="number" {...props}>
-        {children}
-        {unit && (
-          <InputSlot side="right">
-            {unit}
-          </InputSlot>
-        )}
-      </InputRoot>
-    );
-  }
-);
+const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(function NumberInput(
+  { unit, children, ...props },
+  ref,
+) {
+  return (
+    <InputRoot ref={ref} type="number" {...props}>
+      {children}
+      {unit && <InputSlot side="right">{unit}</InputSlot>}
+    </InputRoot>
+  );
+});
 
 export { NumberInput };
-export type { NumberInputProps };
+export type { NumberInputProps };

package/src/ui/form/QuaternionInput.tsx

@@ -1,24 +1,27 @@
 import { forwardRef } from "react";
+
 import { VectorInput, VectorInputProps } from "./VectorInput";
 
-interface QuaternionInputProps extends Omit<VectorInputProps, "value" | "labels" | "onValuesChange"> {
+interface QuaternionInputProps
+  extends Omit<VectorInputProps, "value" | "labels" | "onValuesChange"> {
   value: [number, number, number, number];
   onValuesChange?: (value: [number, number, number, number]) => void;
 }
 
-const QuaternionInput = forwardRef<HTMLDivElement, QuaternionInputProps>(
-  function QuaternionInput({ value, onValuesChange, ...props }, ref) {
-    return (
-      <VectorInput 
-        ref={ref} 
-        value={value}
-        onValuesChange={onValuesChange as (value: number[]) => void}
-        labels={["w", "x", "y", "z"]}
-        {...props}
-      />
-    );
-  }
-);
+const QuaternionInput = forwardRef<HTMLDivElement, QuaternionInputProps>(function QuaternionInput(
+  { value, onValuesChange, ...props },
+  ref,
+) {
+  return (
+    <VectorInput
+      ref={ref}
+      value={value}
+      onValuesChange={onValuesChange as (value: number[]) => void}
+      labels={["w", "x", "y", "z"]}
+      {...props}
+    />
+  );
+});
 
 export { QuaternionInput };
-export type { QuaternionInputProps };
+export type { QuaternionInputProps };

package/src/ui/form/RadInput.tsx

@@ -1,19 +1,12 @@
 import { forwardRef } from "react";
+
 import { NumberInput, NumberInputProps } from "./NumberInput";
 
 interface RadInputProps extends Omit<NumberInputProps, "unit"> {}
 
-const RadInput = forwardRef<HTMLInputElement, RadInputProps>(
-  function RadInput(props, ref) {
-    return (
-      <NumberInput 
-        ref={ref} 
-        unit="rad"
-        {...props}
-      />
-    );
-  }
-);
+const RadInput = forwardRef<HTMLInputElement, RadInputProps>(function RadInput(props, ref) {
+  return <NumberInput ref={ref} unit="rad" {...props} />;
+});
 
 export { RadInput };
-export type { RadInputProps };
+export type { RadInputProps };

package/src/ui/form/TimeInput.tsx

@@ -1,19 +1,12 @@
 import { forwardRef } from "react";
+
 import { NumberInput, NumberInputProps } from "./NumberInput";
 
 interface TimeInputProps extends Omit<NumberInputProps, "unit"> {}
 
-const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(
-  function TimeInput(props, ref) {
-    return (
-      <NumberInput 
-        ref={ref} 
-        unit="s"
-        {...props}
-      />
-    );
-  }
-);
+const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(function TimeInput(props, ref) {
+  return <NumberInput ref={ref} unit="s" {...props} />;
+});
 
 export { TimeInput };
-export type { TimeInputProps };
+export type { TimeInputProps };