@vuer-ai/vuer-uikit 0.0.117 → 0.0.118

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

@@ -1,7 +1,8 @@
 import React, { useCallback } from "react";
 
-import { FormLayout, Label, type LayoutType, VectorInput } from "../../index";
+import { FormLayout, Label, type LayoutType, VectorInput, Switch } from "../../index";
 import { useDialSchema } from "../DialProvider";
+import { IconRenderer } from "../IconRenderer";
 
 interface DialVectorInputProps {
   name: string;
@@ -9,25 +10,41 @@ interface DialVectorInputProps {
   column?: boolean;
   size?: "sm" | "md" | "lg";
   labelPosition?: "left" | "top";
+  icon?: string;
 }
 
 /**
  * Variable-dimension vector input component that supports any number of dimensions
- * Used for vector-6, number-group, or any multi-dimensional numeric input
+ * and mixed types (number, boolean, etc.)
+ * Used for vector-6, number-group, or any multi-dimensional input
  */
 export const DialVectorInput: React.FC<DialVectorInputProps> = ({
   name,
   label,
   size = "sm",
   labelPosition = "top",
+  icon,
 }) => {
   const { getValue, setValue, schemas } = useDialSchema();
 
-  const handleValuesChange = useCallback(
-    (newValues: number[]) => {
+  const handleValueChange = useCallback(
+    (index: number, newValue: number | boolean, currentValues: (number | boolean)[]) => {
+      const newValues = [...currentValues];
+      newValues[index] = newValue;
       setValue(name, newValues);
     },
-    [name],
+    [name, setValue],
+  );
+
+  const handleNumberValuesChange = useCallback(
+    (newNumberValues: number[], currentValues: (number | boolean)[], numberIndices: number[]) => {
+      const newValues = [...currentValues];
+      numberIndices.forEach((originalIndex, i) => {
+        newValues[originalIndex] = newNumberValues[i];
+      });
+      setValue(name, newValues);
+    },
+    [name, setValue],
   );
 
   const schema = schemas.find((s) => s.name === name);
@@ -46,49 +63,154 @@ export const DialVectorInput: React.FC<DialVectorInputProps> = ({
   const placeholders = schema.placeholders || [];
   const dtypes = schema.dtypes || [];
   const steps = schema.steps || [];
+  const mins = schema.mins || [];
+  const maxs = schema.maxs || [];
   const tags = schema.tags || {};
 
+  // Ensure value is an array with correct dimensions
+  const vectorValue = Array.isArray(value)
+    ? value.concat(Array(Math.max(0, dimensions - value.length)).fill(0))
+    : Array(dimensions).fill(0);
+
+  // Check if we have mixed types (contains boolean)
+  const hasMixedTypes = dtypes.some((dtype) => dtype === "boolean");
+
   // Determine layout from tags
-  // col-N means grid-auto-flow: column with N rows (fills columns first)
-  // row-N means grid-auto-flow: row with N columns (fills rows first)
   let gridAutoFlow: "column" | "row";
   let gridColumns: number | undefined;
   let gridRows: number | undefined;
 
   if (typeof tags.col === "number") {
-    // col-N: flow by columns, with N rows defined
     gridAutoFlow = "column";
     gridRows = tags.col;
-    gridColumns = undefined; // Columns auto-calculated based on content
+    gridColumns = undefined;
   } else if (typeof tags.row === "number") {
-    // row-N: flow by rows, with N columns defined
     gridAutoFlow = "row";
     gridColumns = tags.row;
-    gridRows = undefined; // Rows auto-calculated based on content
+    gridRows = undefined;
   } else {
-    // Default: no explicit grid, let it flow naturally
     gridAutoFlow = "row";
     gridColumns = undefined;
     gridRows = undefined;
   }
 
-  // Ensure value is an array with correct dimensions
-  const vectorValue = Array.isArray(value)
-    ? value.concat(Array(Math.max(0, dimensions - value.length)).fill(0))
-    : Array(dimensions).fill(0);
+  if (hasMixedTypes) {
+    // Separate number and boolean indices and values
+    const numberIndices: number[] = [];
+    const booleanIndices: number[] = [];
+    const numberValues: number[] = [];
+    const numberSteps: number[] = [];
+    const numberMins: number[] = [];
+    const numberMaxs: number[] = [];
+    const numberLabels: (React.ReactNode | undefined)[] = [];
+
+    dtypes.forEach((dtype, i) => {
+      if (dtype === "boolean") {
+        booleanIndices.push(i);
+      } else {
+        numberIndices.push(i);
+        numberValues.push((vectorValue[i] as number) || 0);
+
+        const step = steps[i] !== undefined ? steps[i] : dtype === "number-int" ? 1 : 0.001;
+        numberSteps.push(step);
+
+        if (mins[i] !== undefined) {
+          numberMins.push(mins[i]);
+        }
+        if (maxs[i] !== undefined) {
+          numberMaxs.push(maxs[i]);
+        }
+
+        if (placeholders[i]) {
+          numberLabels.push(<span className="text-xs">{placeholders[i]}</span>);
+        } else {
+          numberLabels.push(undefined);
+        }
+      }
+    });
+
+    const mixedInputComponent = (
+      <div className="flex flex-col gap-2">
+        {/* Render VectorInput for all number types */}
+        {numberIndices.length > 0 && (
+          <div>
+            <VectorInput
+              value={numberValues}
+              onValuesChange={(newValues) =>
+                handleNumberValuesChange(newValues, vectorValue, numberIndices)
+              }
+              size={size}
+              step={numberSteps}
+              min={numberMins.length > 0 ? numberMins : undefined}
+              max={numberMaxs.length > 0 ? numberMaxs : undefined}
+              labels={numberLabels}
+              gridAutoFlow={gridAutoFlow}
+              columns={gridColumns}
+              rows={gridRows}
+            />
+          </div>
+        )}
+
+        {/* Render Switch components for boolean types */}
+        {booleanIndices.length > 0 && (
+          <div className="gap-xs flex flex-wrap">
+            {booleanIndices.map((originalIndex) => {
+              const placeholder = placeholders[originalIndex];
+              const currentValue = vectorValue[originalIndex];
+
+              return (
+                <div key={originalIndex} className="flex items-center gap-2">
+                  {placeholder && (
+                    <span className="text-text-primary text-uk-sm">{placeholder}</span>
+                  )}
+                  <Switch
+                    checked={Boolean(currentValue)}
+                    onCheckedChange={(checked) =>
+                      handleValueChange(originalIndex, checked, vectorValue)
+                    }
+                  />
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+
+    if (!label) {
+      return mixedInputComponent;
+    }
+
+    return (
+      <FormLayout orientation={`label-${labelPosition}` as LayoutType}>
+        <Label size="sm" className="flex items-center gap-1">
+          <IconRenderer iconName={icon} size={14} className="text-text-secondary" />
+          {label}
+        </Label>
+        <div className="flex flex-row items-start gap-2">
+          {schema.helpText && (
+            <span
+              className="text-text-secondary mt-1 cursor-help text-xs"
+              title={schema.helpText as string}
+            >
+              ⓘ
+            </span>
+          )}
+          {mixedInputComponent}
+        </div>
+      </FormLayout>
+    );
+  }
 
-  // Calculate steps for each input based on dtypes or provided steps
+  // If all types are numbers, use the original VectorInput
   const inputSteps = Array.from({ length: dimensions }, (_, i) => {
-    // First check if a specific step is provided for this index
     if (steps[i] !== undefined) {
       return steps[i];
     }
-    // Otherwise, determine step based on dtype
     const dtype = dtypes[i];
     return dtype === "number-int" ? 1 : 0.001;
   });
 
-  // Create labels from placeholders
   const labels =
     placeholders.length > 0
       ? placeholders.map((p) => <span className="text-xs">{p}</span>)
@@ -96,10 +218,12 @@ export const DialVectorInput: React.FC<DialVectorInputProps> = ({
 
   const inputComponent = (
     <VectorInput
-      value={vectorValue}
-      onValuesChange={handleValuesChange}
+      value={vectorValue as number[]}
+      onValuesChange={(newValues) => setValue(name, newValues)}
       size={size}
       step={inputSteps}
+      min={mins.length > 0 ? mins : undefined}
+      max={maxs.length > 0 ? maxs : undefined}
       labels={labels}
       gridAutoFlow={gridAutoFlow}
       columns={gridColumns}
@@ -113,7 +237,10 @@ export const DialVectorInput: React.FC<DialVectorInputProps> = ({
 
   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>
       <div className="flex flex-row items-center gap-2">
         {schema.helpText && (
           <span

package/src/hooks/cn.ts

@@ -12,10 +12,8 @@ const twMerge = extendTailwindMerge({
         "rounded-uk-xl",
       ],
       p: ["p-xxs", "p-xs", "p-sm", "p-md", "p-lg", "p-xl"],
-    },
-  },
-  override: {
-    classGroups: {
+      py: ["py-xxs", "py-xs", "py-sm", "py-md", "py-lg", "py-xl"],
+      px: ["px-xxs", "px-xs", "px-sm", "px-md", "px-lg", "px-xl"],
       "font-size": [
         "text-uk-xs",
         "text-uk-sm",

package/src/ui/badge.tsx

@@ -9,7 +9,7 @@ const badgeVariants = cva(
     "inline-flex",
     "items-center",
     "justify-center",
-    "rounded-uk-xs",
+    "rounded-uk-sm",
     "px-md",
     "py-xxs",
     "align-middle",

package/src/ui/card.tsx

@@ -10,7 +10,7 @@ const cardVariants = cva(
   [
     "flex",
     "flex-col",
-    "rounded-uk-lg",
+    "rounded-uk-xl",
     "bg-bg-primary",
     "liquid-dark:liquid-dark-bg",
     "liquid-dark:border-[0.9px]",

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

@@ -45,12 +45,17 @@ const changeElementsHoverState = (
 };
 
 export interface InputNumbersProps
-  extends Omit<InputRootProps, "prefix" | "suffix" | "value" | "onValueChange" | "step"> {
+  extends Omit<
+    InputRootProps,
+    "prefix" | "suffix" | "value" | "onValueChange" | "step" | "min" | "max"
+  > {
   step?: number | number[];
   value: number[];
   prefix?: ReactNode[];
   suffix?: ReactNode[];
   onValuesChange?: (value: Array<number>) => void;
+  min?: number | number[];
+  max?: number | number[];
   gridAutoFlow?: "column" | "row";
   columns?: number;
   rows?: number;
@@ -68,6 +73,8 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
     prefix,
     suffix,
     step = 0.1,
+    min,
+    max,
     gridAutoFlow,
     columns,
     rows,
@@ -88,6 +95,23 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
   const initialDragStart = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
   const accumulatedDelta = useRef(0);
 
+  const applyConstraints = useCallback(
+    (numValue: number, index: number): number => {
+      const currentMin = Array.isArray(min) ? min[index] : min;
+      const currentMax = Array.isArray(max) ? max[index] : max;
+
+      if (currentMin !== undefined && numValue < currentMin) {
+        return currentMin;
+      }
+      if (currentMax !== undefined && numValue > currentMax) {
+        return currentMax;
+      }
+
+      return numValue;
+    },
+    [min, max],
+  );
+
   const stopClick = useCallback(() => {
     const stopClick = (e: Event) => {
       e.stopPropagation();
@@ -165,12 +189,16 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
               return v;
             } else if (i <= Math.max(first, last) && i >= Math.min(first, last)) {
               const currentStep = Array.isArray(step) ? (step[i] ?? 0.1) : step;
-              return Number(
+              let newVal = Number(
                 (
                   (v || 0) +
                   Math.floor(accumulatedDelta.current) * currentStep * multiplyStep
                 ).toPrecision(6),
               );
+
+              newVal = applyConstraints(newVal, i);
+
+              return newVal;
             } else {
               return v;
             }
@@ -199,7 +227,7 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
         stopClick();
       }
     },
-    [isDragging, value, onValuesChange, step, stopClick],
+    [isDragging, value, onValuesChange, step, min, max, stopClick, applyConstraints],
   );
 
   const handleMouseUp = useCallback(() => {
@@ -240,7 +268,13 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
         if (inputValue === "" || !isNaN(Number(inputValue))) {
           const newValue = value.map((v, i) => {
             if (i === index) {
-              return inputValue === "" ? ("" as unknown as number) : Number(inputValue);
+              if (inputValue === "") {
+                return "" as unknown as number;
+              }
+              let numValue = Number(inputValue);
+              numValue = applyConstraints(numValue, index);
+
+              return numValue;
             }
             return v;
           });
@@ -248,7 +282,7 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
         }
       };
     },
-    [onValuesChange, value],
+    [onValuesChange, value, applyConstraints],
   );
 
   const handleKeyDown = useCallback(
@@ -259,7 +293,8 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
           const direction = e.key === "ArrowUp" ? 1 : -1;
           const currentValue = value[index] || 0;
           const currentStep = Array.isArray(step) ? (step[index] ?? 0.1) : step;
-          const newValue = Number((currentValue + direction * currentStep).toPrecision(6));
+          let newValue = Number((currentValue + direction * currentStep).toPrecision(6));
+          newValue = applyConstraints(newValue, index);
 
           const updatedValues = value.map((v, i) => {
             if (i === index) {
@@ -271,7 +306,7 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
         }
       };
     },
-    [value, onValuesChange, step],
+    [onValuesChange, value, step, applyConstraints],
   );
 
   if (value?.length === 0) {

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

@@ -36,10 +36,7 @@ export function LiquidLayoutContent({ className, ...props }: Readonly<ComponentP
   return (
     <div
       {...props}
-      className={cn(
-        ["pointer-events-auto", "absolute", "inset-0", "-z-1"],
-        className,
-      )}
+      className={cn(["pointer-events-auto", "absolute", "inset-0", "-z-1"], className)}
     />
   );
 }
@@ -56,6 +53,7 @@ export function LiquidLayoutLeft({ className, ...props }: Readonly<ComponentProp
           "flex-col",
           "items-start",
           "gap-4",
+          "justify-self-start",
           "overflow-y-auto",
           "[&>*]:pointer-events-auto",
         ],

package/dist/chunk-MTZQ4C2U.cjs

@@ -1,21 +0,0 @@
-'use strict';
-
-var chunkWJY6BMVR_cjs = require('./chunk-WJY6BMVR.cjs');
-var chunk7DFI7CUK_cjs = require('./chunk-7DFI7CUK.cjs');
-var chunkWB43VEZA_cjs = require('./chunk-WB43VEZA.cjs');
-var chunkL6LCOLOV_cjs = require('./chunk-L6LCOLOV.cjs');
-var chunk4PKPCOAF_cjs = require('./chunk-4PKPCOAF.cjs');
-var chunkRQH7ZAWF_cjs = require('./chunk-RQH7ZAWF.cjs');
-
-// src/highlight-cursor/enhanced-components.tsx
-var CursorButton = chunkWJY6BMVR_cjs.withCursor(chunkRQH7ZAWF_cjs.Button);
-var CursorTabs = chunkWJY6BMVR_cjs.withCursor(chunkL6LCOLOV_cjs.Tabs);
-var CursorInputRoot = chunkWJY6BMVR_cjs.withCursor(chunkWB43VEZA_cjs.InputRoot);
-var CursorSelectTrigger = chunkWJY6BMVR_cjs.withCursor(chunk4PKPCOAF_cjs.SelectTrigger);
-var CursorTextarea = chunkWJY6BMVR_cjs.withCursor(chunk7DFI7CUK_cjs.Textarea);
-
-exports.CursorButton = CursorButton;
-exports.CursorInputRoot = CursorInputRoot;
-exports.CursorSelectTrigger = CursorSelectTrigger;
-exports.CursorTabs = CursorTabs;
-exports.CursorTextarea = CursorTextarea;