@vuer-ai/vuer-uikit 0.0.116 → 0.0.118

package/src/dial/DialProvider.tsx

@@ -8,7 +8,15 @@ function isEmptyObject(obj: unknown): boolean {
 export type LabelPositionT = "left" | "top" | "inline" | undefined;
 
 // Define specific value types for dial values
-export type DialValue = string | number | boolean | number[] | string[] | null | undefined;
+export type DialValue =
+  | string
+  | number
+  | boolean
+  | number[]
+  | string[]
+  | (boolean | number | string)[]
+  | null
+  | undefined;
 
 // Types for the dial schema
 export interface DialSchema {
@@ -141,9 +149,14 @@ export const DialProvider = ({
         return formatNumber(value);
       }
 
-      // Format number arrays (vectors, etc.)
-      if (Array.isArray(value) && value.every((v) => typeof v === "number")) {
-        return value.map((v) => formatNumber(v as number));
+      // Format arrays - format individual number elements while preserving non-numbers
+      if (Array.isArray(value)) {
+        return value.map((v) => {
+          if (typeof v === "number") {
+            return formatNumber(v);
+          }
+          return v; // Keep non-number values as-is
+        });
       }
 
       // Return non-numeric values as-is

package/src/dial/IconRenderer.tsx

@@ -0,0 +1,32 @@
+import * as LucideIcons from "lucide-react";
+import React from "react";
+
+interface IconRendererProps {
+  iconName?: string;
+  size?: number;
+  className?: string;
+}
+
+export const IconRenderer: React.FC<IconRendererProps> = ({
+  iconName,
+  size = 16,
+  className = "",
+}) => {
+  if (!iconName) {
+    return null;
+  }
+
+  const pascalCaseName = iconName
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join("");
+
+  const IconComponent = (LucideIcons as any)[pascalCaseName];
+
+  if (!IconComponent) {
+    console.warn(`Icon "${iconName}" not found in Lucide React`);
+    return null;
+  }
+
+  return <IconComponent size={size} className={className} />;
+};

package/src/dial/index.ts

@@ -2,6 +2,7 @@
 export { DialProvider, useDialSchema } from './DialProvider';
 export type { DialSchema, DialSchemaGroup, DialGroupConfig, DialValue, LabelPositionT } from './DialProvider';
 export { DialPanel } from './DialPanel';
+export { IconRenderer } from './IconRenderer';
 
 // All wrapped input components
 export {

package/src/dial/wrapped-inputs/ControlledInputs.tsx

@@ -15,20 +15,25 @@ import {
   Switch,
 } from "../../index"; // Base input component that connects to the dial store
 import { LabelPositionT, useDialSchema } from "../DialProvider";
+import { IconRenderer } from "../IconRenderer";
 
 // Helper component for wrapping inputs with labels
 const DialInputWrapper: React.FC<{
   label?: string;
   labelPosition?: LabelPositionT;
+  icon?: string;
   children: ReactNode;
-}> = ({ label, labelPosition = "top", children }) => {
+}> = ({ label, labelPosition = "top", icon, children }) => {
   if (!label) {
     return <>{children}</>;
   }
 
   return (
     <FormLayout orientation={`label-${labelPosition}` as LayoutType}>
-      <Label size="sm">{label}</Label>
+      <Label size="sm" className="flex items-center gap-1">
+        <IconRenderer iconName={icon} size={14} className="text-text-secondary" />
+        {label}
+      </Label>
       {children as ReactElement}
     </FormLayout>
   );
@@ -44,6 +49,7 @@ export interface DialNumInputProps extends PropsWithChildren {
   label?: string;
   labelPosition?: LabelPositionT;
   size?: "sm" | "md" | "lg";
+  icon?: string;
 }
 
 // Base input component that connects to the dial store using InputNumbers for drag support
@@ -55,6 +61,7 @@ export const DialNumberInput: React.FC<DialNumInputProps> = ({
   label,
   labelPosition = "top",
   size = "sm",
+  icon,
   ...props
 }) => {
   const { getValue, setValue } = useDialSchema();
@@ -84,7 +91,7 @@ export const DialNumberInput: React.FC<DialNumInputProps> = ({
     return <InputNumbers {...inputNumbersProps} />;
   } else {
     return (
-      <DialInputWrapper label={label} labelPosition={labelPosition} {...props}>
+      <DialInputWrapper label={label} labelPosition={labelPosition} icon={icon} {...props}>
         <InputNumbers {...inputNumbersProps} />
       </DialInputWrapper>
     );
@@ -95,6 +102,7 @@ export const DialBooleanInput: React.FC<DialNumInputProps> = ({
   name,
   label,
   labelPosition,
+  icon,
   ...props
 }) => {
   const { getValue, setValue } = useDialSchema();
@@ -112,14 +120,14 @@ export const DialBooleanInput: React.FC<DialNumInputProps> = ({
   }
 
   return (
-    <DialInputWrapper label={label} labelPosition={labelPosition} {...props}>
+    <DialInputWrapper label={label} labelPosition={labelPosition} icon={icon} {...props}>
       <Switch {...switchProps} />
     </DialInputWrapper>
   );
 };
 
 // Dial-wrapped ColorInput
-export const DialColorInput: React.FC<DialNumInputProps> = ({ name, label, ...props }) => {
+export const DialColorInput: React.FC<DialNumInputProps> = ({ name, label, icon, ...props }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? "") as string;
 
@@ -131,7 +139,7 @@ export const DialColorInput: React.FC<DialNumInputProps> = ({ name, label, ...pr
   const inputComp = <ColorInput value={value} onChange={handleChange} prefix={label} />;
 
   return (
-    <DialInputWrapper label={label} {...props}>
+    <DialInputWrapper label={label} icon={icon} {...props}>
       {inputComp}
     </DialInputWrapper>
   );
@@ -142,6 +150,7 @@ export const DialSelectInput: React.FC<DialNumInputProps> = ({
   options = [],
   label,
   size = "sm",
+  icon,
   ...props
 }) => {
   const { getValue, setValue } = useDialSchema();
@@ -172,7 +181,7 @@ export const DialSelectInput: React.FC<DialNumInputProps> = ({
   );
 
   return (
-    <DialInputWrapper label={label} {...props}>
+    <DialInputWrapper label={label} icon={icon} {...props}>
       {selectComponent}
     </DialInputWrapper>
   );
@@ -184,6 +193,7 @@ export const DialSliderInput: React.FC<DialNumInputProps> = ({
   max = 100,
   step = 1,
   label,
+  icon,
   ...props
 }) => {
   const { getValue, setValue } = useDialSchema();
@@ -201,7 +211,7 @@ export const DialSliderInput: React.FC<DialNumInputProps> = ({
   };
 
   return (
-    <DialInputWrapper label={label} {...props}>
+    <DialInputWrapper label={label} icon={icon} {...props}>
       <Slider {...sliderProps} />
       <span className="text-text-secondary w-12 text-right text-sm">{value}</span>
     </DialInputWrapper>

package/src/dial/wrapped-inputs/DialInputs.tsx

@@ -19,6 +19,7 @@ import {
   VectorInput,
 } from "../../index";
 import { LabelPositionT, useDialSchema } from "../DialProvider";
+import { IconRenderer } from "../IconRenderer";
 
 // Base props for all dial-wrapped inputs
 interface DialWrapperProps {
@@ -26,13 +27,17 @@ interface DialWrapperProps {
   label?: string;
   size?: "sm" | "md" | "lg";
   step?: number;
+  min?: number;
+  max?: number;
   labelPosition?: LabelPositionT;
+  icon?: string;
 }
 
 // Helper component for wrapping inputs with labels
 const DialInputWrapper: React.FC<PropsWithChildren<DialWrapperProps>> = ({
   label,
   labelPosition = "top",
+  icon,
   children,
 }) => {
   if (!label) {
@@ -41,7 +46,10 @@ const DialInputWrapper: React.FC<PropsWithChildren<DialWrapperProps>> = ({
 
   return (
     <FormLayout orientation={`label-${labelPosition}` as LayoutType}>
-      <Label size="sm">{label}</Label>
+      <Label size="sm" className="flex items-center gap-1">
+        <IconRenderer iconName={icon} size={14} className="text-text-secondary" />
+        {label}
+      </Label>
       <>{children}</>
     </FormLayout>
   );
@@ -53,11 +61,17 @@ export const DialVec3Input: React.FC<DialWrapperProps> = ({
   label,
   size = "sm",
   step,
+  min,
+  max,
   labelPosition,
+  icon,
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? [0, 0, 0]) as [number, number, number];
 
+  const minArray = min !== undefined ? [min, min, min] : undefined;
+  const maxArray = max !== undefined ? [max, max, max] : undefined;
+
   if (labelPosition === "inline") {
     return (
       <Vec3Input
@@ -65,17 +79,21 @@ export const DialVec3Input: React.FC<DialWrapperProps> = ({
         onValuesChange={(val) => setValue(name, val)}
         size={size}
         step={step}
+        min={minArray}
+        max={maxArray}
         prefix={label ? [label, "", ""] : undefined}
       />
     );
   } else {
     return (
-      <DialInputWrapper name={name} label={label}>
+      <DialInputWrapper name={name} label={label} icon={icon}>
         <Vec3Input
           value={value}
           onValuesChange={(val) => setValue(name, val)}
           size={size}
           step={step}
+          min={minArray}
+          max={maxArray}
         />
       </DialInputWrapper>
     );
@@ -89,6 +107,7 @@ export const DialEulerInput: React.FC<DialWrapperProps> = ({
   size = "sm",
   step,
   labelPosition,
+  icon,
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? [0, 0, 0]) as [number, number, number];
@@ -105,7 +124,7 @@ export const DialEulerInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper name={name} label={label}>
+      <DialInputWrapper name={name} label={label} icon={icon}>
         <EulerInput
           value={value}
           onValuesChange={(val) => setValue(name, val)}
@@ -124,6 +143,7 @@ export const DialEulerDegInput: React.FC<DialWrapperProps> = ({
   size = "sm",
   step,
   labelPosition,
+  icon,
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? [0, 0, 0]) as [number, number, number];
@@ -140,7 +160,7 @@ export const DialEulerDegInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper name={name} label={label}>
+      <DialInputWrapper name={name} label={label} icon={icon}>
         <EulerDegInput
           value={value}
           onValuesChange={(val) => setValue(name, val)}
@@ -159,6 +179,7 @@ export const DialQuaternionInput: React.FC<DialWrapperProps> = ({
   size = "sm",
   step,
   labelPosition,
+  icon,
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? [1, 0, 0, 0]) as [number, number, number, number];
@@ -175,7 +196,7 @@ export const DialQuaternionInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper name={name} label={label}>
+      <DialInputWrapper name={name} label={label} icon={icon}>
         <QuaternionInput
           value={value}
           onValuesChange={(val) => setValue(name, val)}
@@ -195,6 +216,7 @@ export const DialVectorInput: React.FC<DialWrapperProps & { dimensions?: number
   step,
   dimensions = 3,
   labelPosition,
+  icon,
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? new Array(dimensions).fill(0)) as number[];
@@ -211,7 +233,7 @@ export const DialVectorInput: React.FC<DialWrapperProps & { dimensions?: number
     );
   } else {
     return (
-      <DialInputWrapper name={name} label={label}>
+      <DialInputWrapper name={name} label={label} icon={icon}>
         <VectorInput
           value={value}
           onValuesChange={(val) => setValue(name, val)}
@@ -229,7 +251,10 @@ export const DialIntInput: React.FC<DialWrapperProps> = ({
   label,
   size = "sm",
   step = 1,
+  min,
+  max,
   labelPosition,
+  icon,
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? 0) as number;
@@ -242,12 +267,21 @@ export const DialIntInput: React.FC<DialWrapperProps> = ({
         onChange={(val) => setValue(name, val)}
         size={size}
         step={step}
+        min={min}
+        max={max}
       />
     );
   } else {
     return (
-      <DialInputWrapper name={name} label={label}>
-        <IntInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
+      <DialInputWrapper name={name} label={label} icon={icon}>
+        <IntInput
+          value={value}
+          onChange={(val) => setValue(name, val)}
+          size={size}
+          step={step}
+          min={min}
+          max={max}
+        />
       </DialInputWrapper>
     );
   }
@@ -260,6 +294,7 @@ export const DialDegInput: React.FC<DialWrapperProps> = ({
   size = "sm",
   step,
   labelPosition,
+  icon,
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? 0) as number;
@@ -276,7 +311,7 @@ export const DialDegInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper name={name} label={label}>
+      <DialInputWrapper name={name} label={label} icon={icon}>
         <DegInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
       </DialInputWrapper>
     );
@@ -290,6 +325,7 @@ export const DialRadInput: React.FC<DialWrapperProps> = ({
   size = "sm",
   step,
   labelPosition,
+  icon,
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? 0) as number;
@@ -306,7 +342,7 @@ export const DialRadInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper name={name} label={label}>
+      <DialInputWrapper name={name} label={label} icon={icon}>
         <RadInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
       </DialInputWrapper>
     );
@@ -320,6 +356,7 @@ export const DialCmInput: React.FC<DialWrapperProps> = ({
   size = "sm",
   step,
   labelPosition,
+  icon,
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? 0) as number;
@@ -336,7 +373,7 @@ export const DialCmInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper name={name} label={label}>
+      <DialInputWrapper name={name} label={label} icon={icon}>
         <CmInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
       </DialInputWrapper>
     );
@@ -350,6 +387,7 @@ export const DialInchInput: React.FC<DialWrapperProps> = ({
   size = "sm",
   step,
   labelPosition,
+  icon,
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? 0) as number;
@@ -366,7 +404,7 @@ export const DialInchInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper name={name} label={label}>
+      <DialInputWrapper name={name} label={label} icon={icon}>
         <InchInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
       </DialInputWrapper>
     );
@@ -380,6 +418,7 @@ export const DialTimeInput: React.FC<DialWrapperProps> = ({
   size = "sm",
   step,
   labelPosition,
+  icon,
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? 0) as number;
@@ -396,7 +435,7 @@ export const DialTimeInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper name={name} label={label}>
+      <DialInputWrapper name={name} label={label} icon={icon}>
         <TimeInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
       </DialInputWrapper>
     );
@@ -410,6 +449,7 @@ export const DialTextInput: React.FC<DialWrapperProps & { placeholder?: string }
   size = "sm",
   labelPosition,
   placeholder,
+  icon,
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? "") as string;
@@ -426,7 +466,7 @@ export const DialTextInput: React.FC<DialWrapperProps & { placeholder?: string }
     );
   } else {
     return (
-      <DialInputWrapper name={name} label={label}>
+      <DialInputWrapper name={name} label={label} icon={icon}>
         <TextInput
           value={value}
           onChange={(val) => setValue(name, val)}
@@ -445,6 +485,7 @@ export const DialEulerRadInput: React.FC<DialWrapperProps> = ({
   size = "sm",
   step,
   labelPosition,
+  icon,
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? [0, 0, 0]) as [number, number, number];
@@ -462,7 +503,7 @@ export const DialEulerRadInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper name={name} label={label}>
+      <DialInputWrapper name={name} label={label} icon={icon}>
         <EulerRadInput
           value={value}
           onValuesChange={(val) => setValue(name, val)}
@@ -482,6 +523,7 @@ export const DialNumberRadInput: React.FC<DialWrapperProps> = ({
   size = "sm",
   step,
   labelPosition,
+  icon,
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? 0) as number;
@@ -507,7 +549,7 @@ export const DialNumberRadInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper name={name} label={label}>
+      <DialInputWrapper name={name} label={label} icon={icon}>
         <DegInput value={degValue} onChange={handleChange} size={size} step={step} />
       </DialInputWrapper>
     );

package/src/dial/wrapped-inputs/DialPresetsInput.tsx

@@ -3,19 +3,24 @@ import React from "react";
 import { FormLayout, Label, type LayoutType } from "../../ui";
 import { PresetsInput } from "../../ui/inputs/presets-input";
 import { LabelPositionT, useDialSchema } from "../DialProvider";
+import { IconRenderer } from "../IconRenderer";
 
 const DialInputWrapper: React.FC<{
   label?: string;
   labelPosition?: LabelPositionT;
+  icon?: string;
   children: React.ReactElement;
-}> = ({ label, labelPosition = "top", children }) => {
+}> = ({ label, labelPosition = "top", icon, children }) => {
   if (!label) {
     return <>{children}</>;
   }
 
   return (
     <FormLayout orientation={`label-${labelPosition}` as LayoutType}>
-      <Label size="sm">{label}</Label>
+      <Label size="sm" className="flex items-center gap-1">
+        <IconRenderer iconName={icon} size={14} className="text-text-secondary" />
+        {label}
+      </Label>
       {children}
     </FormLayout>
   );
@@ -26,8 +31,9 @@ export const DialPresetsInput: React.FC<{
   label?: string;
   size?: "sm" | "md" | "lg";
   labelPosition?: LabelPositionT;
+  icon?: string;
   options: Array<string | number | { label: string; value: string | number }>;
-}> = ({ name, label, size = "sm", labelPosition = "top", options }) => {
+}> = ({ name, label, size = "sm", labelPosition = "top", icon, options }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? 0) as number;
 
@@ -58,7 +64,7 @@ export const DialPresetsInput: React.FC<{
     );
   } else {
     return (
-      <DialInputWrapper label={label} labelPosition={labelPosition}>
+      <DialInputWrapper label={label} labelPosition={labelPosition} icon={icon}>
         <PresetsInput
           value={value}
           onChange={(val) => setValue(name, val)}