@vuer-ai/vuer-uikit 0.0.117 → 0.0.119

package/src/dial/DialPanel.tsx

@@ -69,7 +69,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
 
   // Render a single schema item as an input component
   const renderSchemaInput = (schema: DialSchema) => {
-    const { name, dtype, min, max, step, options, tags } = schema;
+    const { name, dtype, icon, min, max, step, options, tags } = schema;
     // Use schema's label position if specified, otherwise fall back to panel's labelLayout prop
     const effectiveLabelPosition = (tags?.labelPosition as LabelPositionT) || labelLayout;
     const label = schema.label || name.charAt(0).toUpperCase() + name.slice(1);
@@ -82,8 +82,11 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
             key={name}
             name={name}
             label={label}
-            step={step}
+            min={min}
+            max={max}
+            step={step || 0.001}
             labelPosition={effectiveLabelPosition}
+            icon={icon}
           />
         );
 
@@ -93,8 +96,9 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
             key={name}
             name={name}
             label={label}
-            step={step}
+            step={step || 0.001}
             labelPosition={effectiveLabelPosition}
+            icon={icon}
           />
         );
 
@@ -104,8 +108,9 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
             key={name}
             name={name}
             label={label}
-            step={step}
+            step={step || 0.001}
             labelPosition={effectiveLabelPosition}
+            icon={icon}
           />
         );
 
@@ -113,7 +118,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
       case "vector-6":
       case "number-group":
         // For generic vector or number-group, use VectorN input
-        return <DialVectorInput key={name} name={name} label={label} />;
+        return <DialVectorInput key={name} name={name} label={label} icon={icon} />;
 
       case "boolean":
         return (
@@ -122,6 +127,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
             name={name}
             label={label}
             labelPosition={effectiveLabelPosition}
+            icon={icon}
           />
         );
 
@@ -134,8 +140,9 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
             label={label}
             min={min}
             max={max}
-            step={step}
+            step={step || 0.001}
             labelPosition={effectiveLabelPosition}
+            icon={icon}
           />
         );
 
@@ -145,9 +152,12 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
           <DialIntInput
             key={name}
             name={name}
+            min={min}
+            max={max}
             label={label}
             step={step || 1}
             labelPosition={effectiveLabelPosition}
+            icon={icon}
           />
         );
 
@@ -158,8 +168,9 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
             key={name}
             name={name}
             label={label}
-            step={step}
+            step={step || 0.001}
             labelPosition={effectiveLabelPosition}
+            icon={icon}
           />
         );
 
@@ -173,8 +184,9 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
               label={label}
               min={min}
               max={max}
-              step={step}
+              step={step || 0.001}
               labelPosition={effectiveLabelPosition}
+              icon={icon}
             />
           );
         }
@@ -188,6 +200,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
               label={label}
               options={options}
               labelPosition={effectiveLabelPosition}
+              icon={icon}
             />
           );
         }
@@ -202,11 +215,12 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
             max={max}
             step={step}
             labelPosition={effectiveLabelPosition}
+            icon={icon}
           />
         );
 
       case "color":
-        return <DialColorInput key={name} name={name} label={label} />;
+        return <DialColorInput key={name} name={name} label={label} icon={icon} />;
 
       case "string":
       case "text":
@@ -219,6 +233,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
               label={label}
               options={options}
               labelPosition={effectiveLabelPosition}
+              icon={icon}
             />
           );
         }
@@ -230,6 +245,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
             label={label}
             placeholder={`Enter ${label.toLowerCase()}`}
             labelPosition={effectiveLabelPosition}
+            icon={icon}
           />
         );
 
@@ -245,27 +261,26 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
         // Use group configuration
         const groupConfig = groupConfigMap[name];
         const hasNoWrap = groupConfig?.noWrap;
-        const wrapClass = hasNoWrap ? "" : "flex-wrap";
+
+        // Determine grid columns - default to 3 columns
+        // If noWrap is true, use single row flex layout for backward compatibility
+        const layoutClass = hasNoWrap ? "grid grid-cols-2 gap-2" : "flex flex-row gap-2";
 
         return (
           <div key={name} className="dial-group">
             <div className="text-text-primary mb-2 font-medium">{name}</div>
-            <div className={`dial-row flex flex-row ${wrapClass} gap-4`}>
-              {schemaList.map(renderSchemaInput)}
-            </div>
+            <div className={`dial-row ${layoutClass}`}>{schemaList.map(renderSchemaInput)}</div>
           </div>
         );
       })}
 
-      {/* Render ungrouped schemas - always wrap */}
+      {/* Render ungrouped schemas - use grid with 3 columns */}
       {ungrouped.length > 0 && (
         <div className="dial-group">
           {/*<h3 className="text-sm font-semibold text-text-primary mb-2">*/}
           {/*  General*/}
           {/*</h3>*/}
-          <div className="dial-row flex flex-row flex-wrap gap-4">
-            {ungrouped.map(renderSchemaInput)}
-          </div>
+          <div className="dial-row grid grid-cols-3 gap-2">{ungrouped.map(renderSchemaInput)}</div>
         </div>
       )}
     </div>

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>
+    <FormLayout orientation={`label-${labelPosition}` as LayoutType} className="overflow-x-hidden">
+      <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) {
@@ -40,8 +45,11 @@ const DialInputWrapper: React.FC<PropsWithChildren<DialWrapperProps>> = ({
   }
 
   return (
-    <FormLayout orientation={`label-${labelPosition}` as LayoutType}>
-      <Label size="sm">{label}</Label>
+    <FormLayout orientation={`label-${labelPosition}` as LayoutType} className="overflow-x-hidden">
+      <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>
     );