@vuer-ai/vuer-uikit 0.0.121 → 0.1.0

package/dist/ui/waterfall/hooks/useViewport.d.cts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React$1 from 'react';
 import { LogItemWithMeta } from '../types.cjs';
 import '../../tree-view/types.cjs';
 
@@ -10,7 +10,7 @@ interface UseViewportProps {
 declare function useViewport({ visibleLogData, onTemporalCursorChange, temporalCursor, }: UseViewportProps): {
     viewStart: number;
     viewDuration: number;
-    timelineContainerRef: react.RefObject<HTMLDivElement | null>;
+    timelineContainerRef: React$1.RefObject<HTMLDivElement | null>;
     activeTemporalCursor: number | null;
     timeToPercent: (time: number) => number;
     ticks: {
@@ -24,8 +24,8 @@ declare function useViewport({ visibleLogData, onTemporalCursorChange, temporalC
     handlePan: (direction: "left" | "right") => void;
     handleZoomDragStart: (e: React.MouseEvent) => void;
     handleTimelineClick: (e: React.MouseEvent) => void;
-    setViewStart: react.Dispatch<react.SetStateAction<number>>;
-    setViewDuration: react.Dispatch<react.SetStateAction<number>>;
+    setViewStart: React$1.Dispatch<React$1.SetStateAction<number>>;
+    setViewDuration: React$1.Dispatch<React$1.SetStateAction<number>>;
     cursorVisible: boolean;
     cursorPosition: number;
     cursorLabel: string;

package/dist/ui/waterfall/hooks/useViewport.d.ts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React$1 from 'react';
 import { LogItemWithMeta } from '../types.js';
 import '../../tree-view/types.js';
 
@@ -10,7 +10,7 @@ interface UseViewportProps {
 declare function useViewport({ visibleLogData, onTemporalCursorChange, temporalCursor, }: UseViewportProps): {
     viewStart: number;
     viewDuration: number;
-    timelineContainerRef: react.RefObject<HTMLDivElement | null>;
+    timelineContainerRef: React$1.RefObject<HTMLDivElement | null>;
     activeTemporalCursor: number | null;
     timeToPercent: (time: number) => number;
     ticks: {
@@ -24,8 +24,8 @@ declare function useViewport({ visibleLogData, onTemporalCursorChange, temporalC
     handlePan: (direction: "left" | "right") => void;
     handleZoomDragStart: (e: React.MouseEvent) => void;
     handleTimelineClick: (e: React.MouseEvent) => void;
-    setViewStart: react.Dispatch<react.SetStateAction<number>>;
-    setViewDuration: react.Dispatch<react.SetStateAction<number>>;
+    setViewStart: React$1.Dispatch<React$1.SetStateAction<number>>;
+    setViewDuration: React$1.Dispatch<React$1.SetStateAction<number>>;
     cursorVisible: boolean;
     cursorPosition: number;
     cursorLabel: string;

package/dist/ui/waterfall/index.cjs

@@ -1,37 +1,37 @@
 'use strict';
 
-var chunkMMQR4IEY_cjs = require('../../chunk-MMQR4IEY.cjs');
+var chunk753HUOAI_cjs = require('../../chunk-753HUOAI.cjs');
 require('../../chunk-WJL5HMO6.cjs');
 require('../../chunk-RJ7I6ZQK.cjs');
-require('../../chunk-STJMH4NX.cjs');
-require('../../chunk-O3DFVRON.cjs');
 require('../../chunk-5HT74RHB.cjs');
 require('../../chunk-Z6UDRPC2.cjs');
 require('../../chunk-YJ6X6T5K.cjs');
-require('../../chunk-G5NT42YF.cjs');
-require('../../chunk-UFYHIDMC.cjs');
-require('../../chunk-4WWGBRQV.cjs');
-require('../../chunk-VOTZLQ6J.cjs');
 require('../../chunk-OCADGDGL.cjs');
 require('../../chunk-UTS56UA5.cjs');
-var chunkG2ZYONQO_cjs = require('../../chunk-G2ZYONQO.cjs');
 require('../../chunk-JWVH6R35.cjs');
 require('../../chunk-MVAFOQ67.cjs');
+require('../../chunk-STJMH4NX.cjs');
+require('../../chunk-O3DFVRON.cjs');
+var chunkG2ZYONQO_cjs = require('../../chunk-G2ZYONQO.cjs');
+require('../../chunk-G5NT42YF.cjs');
+require('../../chunk-VOTZLQ6J.cjs');
 require('../../chunk-7ICRKPIO.cjs');
+require('../../chunk-WZQ2BT3P.cjs');
+require('../../chunk-4WWGBRQV.cjs');
 require('../../chunk-NIACIZWY.cjs');
 require('../../chunk-T2BDPMCF.cjs');
 require('../../chunk-PMG3NZF5.cjs');
 require('../../chunk-JMCH2AFN.cjs');
 require('../../chunk-ZG33TW5I.cjs');
 require('../../chunk-QN4N4I3Z.cjs');
-require('../../chunk-LBWMTA5T.cjs');
-require('../../chunk-Q7E73DVJ.cjs');
-require('../../chunk-DVUN6GQI.cjs');
-require('../../chunk-VXZURKMQ.cjs');
 require('../../chunk-Q4XH2Z5M.cjs');
 require('../../chunk-6BOWMGFG.cjs');
 require('../../chunk-YZIR6LIY.cjs');
 require('../../chunk-GEGPGQVH.cjs');
+require('../../chunk-LBWMTA5T.cjs');
+require('../../chunk-Q7E73DVJ.cjs');
+require('../../chunk-DVUN6GQI.cjs');
+require('../../chunk-VXZURKMQ.cjs');
 require('../../chunk-6LTCLQH3.cjs');
 require('../../chunk-G4FJGNY5.cjs');
 
@@ -39,7 +39,7 @@ require('../../chunk-G4FJGNY5.cjs');
 
 Object.defineProperty(exports, "Waterfall", {
   enumerable: true,
-  get: function () { return chunkMMQR4IEY_cjs.Waterfall; }
+  get: function () { return chunk753HUOAI_cjs.Waterfall; }
 });
 Object.defineProperty(exports, "TOTAL_DURATION", {
   enumerable: true,

package/dist/ui/waterfall/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import react__default, { ReactNode } from 'react';
+import React__default, { ReactNode } from 'react';
 import { LogItemType } from './types.cjs';
 export { LogItemWithMeta } from './types.cjs';
 export { TOTAL_DURATION, borderColorClasses, colorClasses, formatDuration, leftWedgeClasses, rightWedgeClasses } from './utils.cjs';
@@ -25,7 +25,7 @@ interface WaterfallProps {
     /** Enable wheel handling for pan and zoom (default: true) */
     enabled?: boolean;
     /** Children elements to render within the timeline */
-    children?: react__default.ReactNode;
+    children?: React__default.ReactNode;
     /** Additional CSS classes for the wrapper */
     className?: string;
 }

package/dist/ui/waterfall/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import react__default, { ReactNode } from 'react';
+import React__default, { ReactNode } from 'react';
 import { LogItemType } from './types.js';
 export { LogItemWithMeta } from './types.js';
 export { TOTAL_DURATION, borderColorClasses, colorClasses, formatDuration, leftWedgeClasses, rightWedgeClasses } from './utils.js';
@@ -25,7 +25,7 @@ interface WaterfallProps {
     /** Enable wheel handling for pan and zoom (default: true) */
     enabled?: boolean;
     /** Children elements to render within the timeline */
-    children?: react__default.ReactNode;
+    children?: React__default.ReactNode;
     /** Additional CSS classes for the wrapper */
     className?: string;
 }

package/dist/ui/waterfall/index.mjs

@@ -1,34 +1,34 @@
-export { Waterfall } from '../../chunk-LJYIEOGQ.mjs';
+export { Waterfall } from '../../chunk-LLFE3UHZ.mjs';
 import '../../chunk-JWKOW2OV.mjs';
 import '../../chunk-VPQ5SSY3.mjs';
-import '../../chunk-EZ536NLQ.mjs';
-import '../../chunk-7TD77VF4.mjs';
 import '../../chunk-OW653F7T.mjs';
 import '../../chunk-CIPI2V54.mjs';
 import '../../chunk-WPDU2YYR.mjs';
-import '../../chunk-HVVT3D2T.mjs';
-import '../../chunk-7RRQ2HHL.mjs';
-import '../../chunk-NKUK73WB.mjs';
-import '../../chunk-HTAFERCZ.mjs';
 import '../../chunk-ZQOQB6GF.mjs';
 import '../../chunk-D5H4XX6Q.mjs';
-export { TOTAL_DURATION, borderColorClasses, colorClasses, formatDuration, leftWedgeClasses, rightWedgeClasses } from '../../chunk-4U232QAX.mjs';
 import '../../chunk-JVV7W3TP.mjs';
 import '../../chunk-OC4HRPZU.mjs';
+import '../../chunk-EZ536NLQ.mjs';
+import '../../chunk-7TD77VF4.mjs';
+export { TOTAL_DURATION, borderColorClasses, colorClasses, formatDuration, leftWedgeClasses, rightWedgeClasses } from '../../chunk-4U232QAX.mjs';
+import '../../chunk-HVVT3D2T.mjs';
+import '../../chunk-HTAFERCZ.mjs';
 import '../../chunk-XZTEU7ME.mjs';
+import '../../chunk-YRNI7ZJ7.mjs';
+import '../../chunk-NKUK73WB.mjs';
 import '../../chunk-IPMWGCAI.mjs';
 import '../../chunk-4Y5IF7R5.mjs';
 import '../../chunk-HGTL7DFT.mjs';
 import '../../chunk-BNDRHLLZ.mjs';
 import '../../chunk-EGJLY5VZ.mjs';
 import '../../chunk-F7ZHPSLA.mjs';
-import '../../chunk-IDUVYPN7.mjs';
-import '../../chunk-3QT5VABC.mjs';
-import '../../chunk-H3JRYX2U.mjs';
-import '../../chunk-LQOPO4KU.mjs';
 import '../../chunk-U3LN5NB6.mjs';
 import '../../chunk-IZARTVYN.mjs';
 import '../../chunk-VA4LUFKD.mjs';
 import '../../chunk-4NABYVCK.mjs';
+import '../../chunk-IDUVYPN7.mjs';
+import '../../chunk-3QT5VABC.mjs';
+import '../../chunk-H3JRYX2U.mjs';
+import '../../chunk-LQOPO4KU.mjs';
 import '../../chunk-HBEU2PU2.mjs';
 import '../../chunk-SAGQV2YZ.mjs';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuer-ai/vuer-uikit",
   "author": "Ge Yang",
-  "version": "0.0.121",
+  "version": "0.1.0",
   "files": [
     "/dist",
     "/src"
@@ -21,11 +21,6 @@
       "import": "./src/index.ts",
       "require": "./src/index.ts"
     },
-    "./auth": {
-      "types": "./dist/auth/index.d.ts",
-      "import": "./dist/auth/index.mjs",
-      "require": "./dist/auth/index.cjs"
-    },
     "./src/dial": {
       "types": "./src/dial/index.ts",
       "import": "./src/dial/index.ts",
@@ -54,7 +49,8 @@
   "peerDependencies": {
     "@react-three/drei": "latest",
     "@react-three/fiber": "latest",
-    "better-auth": "^1.3.9",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
     "lucide-react": "latest",
     "react": "latest",
     "react-dom": "latest",
@@ -63,6 +59,7 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-collapsible": "^1.1.11",
@@ -97,8 +94,6 @@
     "@eslint/js": "^9.30.1",
     "@tailwindcss/cli": "^4.1.11",
     "@types/node": "^20.0.0",
-    "@types/react": "^19.0.6",
-    "@types/react-dom": "^19.0.3",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.30.1",
     "eslint-config-prettier": "^10.1.5",
@@ -134,6 +129,7 @@
     "dev": "tsup --watch",
     "build": "tsup",
     "lint": "eslint . --fix",
+    "check-types": "tsc --noEmit",
     "prettier": "prettier . --write"
   }
 }

package/src/dial/DialPanel.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 
+import { DialButton, DialCustom } from "./components";
 import type { GroupSchema, DialSchema, LabelPositionT } from "./types";
 import {
+  DialArrayInput,
   DialBooleanInput,
   DialColorInput,
   DialEulerDegInput,
@@ -13,6 +15,7 @@ import {
   DialSelectInput,
   DialSliderInput,
   DialTextInput,
+  DialTupleInput,
   DialVec3Input,
   DialVectorInput,
 } from "./wrapped-inputs";
@@ -98,9 +101,41 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
 
     // Choose the right input component based on dtype
     switch (dtype) {
+      case "tuple":
+        // General tuple with mixed types
+        return (
+          <DialTupleInput
+            key={name}
+            name={name}
+            label={label}
+            labelPosition={effectiveLabelPosition}
+            icon={icon}
+          />
+        );
+
+      case "array":
+        // Array of primitive types
+        return (
+          <DialArrayInput
+            key={name}
+            name={name}
+            label={label}
+            labelPosition={effectiveLabelPosition}
+            icon={icon}
+          />
+        );
+
       case "interface":
       case "object":
-        return <DialInterfaceInput name={name} />;
+        return (
+          <DialInterfaceInput
+            key={name}
+            name={name}
+            label={label}
+            labelPosition={effectiveLabelPosition}
+            icon={icon}
+          />
+        );
 
       case "vector3":
         return (
@@ -117,6 +152,19 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
         );
 
       case "euler":
+      case "euler-rad": // Alias for euler (both default to radians)
+        return (
+          <DialEulerRadInput
+            key={name}
+            name={name}
+            label={label}
+            step={step || 0.001}
+            labelPosition={effectiveLabelPosition}
+            icon={icon}
+          />
+        );
+
+      case "euler-deg":
         return (
           <DialEulerDegInput
             key={name}
@@ -128,7 +176,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
           />
         );
 
-      case "euler-rad":
+      case "euler-pi":
         return (
           <DialEulerRadInput
             key={name}
@@ -137,6 +185,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
             step={step || 0.001}
             labelPosition={effectiveLabelPosition}
             icon={icon}
+            format="pi"
           />
         );
 
@@ -276,24 +325,85 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
           />
         );
 
+      case "button":
+        return (
+          <DialButton
+            key={name}
+            name={name}
+            label={label}
+            icon={icon}
+            onClick={schema.onClick}
+            variant={schema.variant}
+            disabled={schema.disabled}
+          />
+        );
+
+      case "custom":
+        // Either render function or children must be provided
+        if (!schema.render && !schema.children) {
+          console.warn(
+            `DialPanel: dtype="custom" requires either render or children for "${name}"`,
+          );
+          return null;
+        }
+        return (
+          <DialCustom
+            key={name}
+            schema={schema}
+            render={schema.render}
+            children={schema.children}
+          />
+        );
+
       default:
         return null;
     }
   };
 
+  // Wrapper function to apply span styles
+  const wrapWithStyle = (schema: DialSchema, component: React.ReactNode) => {
+    const spanStyle: React.CSSProperties = {};
+    if (schema.colSpan) {
+      spanStyle.gridColumn = `span ${schema.colSpan}`;
+    }
+    if (schema.rowSpan) {
+      spanStyle.gridRow = `span ${schema.rowSpan}`;
+    }
+
+    if (Object.keys(spanStyle).length > 0) {
+      return (
+        <div key={schema.name} style={spanStyle}>
+          {component}
+        </div>
+      );
+    }
+    return component;
+  };
+
+  // Sort groups: Transform first, then alphabetically
+  const sortedGroups = Object.entries(groupedSchemas).sort(([nameA], [nameB]) => {
+    const lowerA = nameA.toLowerCase();
+    const lowerB = nameB.toLowerCase();
+
+    if (lowerA === "transform") return -1;
+    if (lowerB === "transform") return 1;
+
+    return lowerA.localeCompare(lowerB);
+  });
+
   return (
     <div className="dial-schema-renderer space-y-4">
       {/* Render grouped schemas */}
-      {Object.entries(groupedSchemas).map(([name, schemaList]) => {
+      {sortedGroups.map(([name, schemaList]) => {
         // Use group configuration
         const groupConfig = groupConfigMap[name];
         const groupStyle = generateGroupStyle(groupConfig);
 
         return (
           <div key={name} className="dial-group">
-            <div className="text-text-primary mb-2 font-medium capitalize">{name}</div>
+            <div className="text-text-primary mb-2 pl-1.5 font-medium capitalize">{name}</div>
             <div className="dial-row" style={groupStyle}>
-              {schemaList.map(renderSchemaInput)}
+              {schemaList.map((schema) => wrapWithStyle(schema, renderSchemaInput(schema)))}
             </div>
           </div>
         );
@@ -305,7 +415,9 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
           {/*<h3 className="text-sm font-semibold text-text-primary mb-2">*/}
           {/*  General*/}
           {/*</h3>*/}
-          <div className="dial-row grid grid-cols-1 gap-2">{ungrouped.map(renderSchemaInput)}</div>
+          <div className="dial-row grid grid-cols-1 gap-2">
+            {ungrouped.map((schema) => wrapWithStyle(schema, renderSchemaInput(schema)))}
+          </div>
         </div>
       )}
     </div>

package/src/dial/components/DialButton.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+import { Button } from "../../ui/button";
+import { IconRenderer } from "../IconRenderer";
+
+export interface DialButtonProps {
+  name: string;
+  label?: string;
+  icon?: string;
+  onClick?: () => void;
+  variant?: "primary" | "secondary" | "ghost" | "destructive" | "link";
+  disabled?: boolean;
+}
+
+/**
+ * Button component for dial panels
+ *
+ * Used to trigger actions from within the dial UI.
+ * Unlike input components, buttons don't store values in the dial state.
+ *
+ * @example
+ * ```tsx
+ * const handleReset = useCallback(() => {
+ *   // reset logic
+ * }, []);
+ *
+ * { name: 'reset', dtype: 'button', label: 'Reset', onClick: handleReset }
+ * ```
+ */
+export const DialButton: React.FC<DialButtonProps> = ({
+  name,
+  label,
+  icon,
+  onClick,
+  variant = "secondary",
+  disabled = false,
+}) => {
+  const displayLabel = label || name.charAt(0).toUpperCase() + name.slice(1);
+
+  return (
+    <Button
+      variant={variant}
+      size="sm"
+      onClick={onClick}
+      disabled={disabled}
+      className="w-full justify-center gap-2"
+    >
+      <IconRenderer iconName={icon} size={14} />
+      {displayLabel}
+    </Button>
+  );
+};

package/src/dial/components/DialCustom.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode } from "react";
+
+import { useDialSchema } from "../DialProvider";
+import type { DialCustomRenderFn, DialSchema } from "../types";
+
+export interface DialCustomProps {
+  schema: DialSchema;
+  /** Render function with access to getValue/setValue context */
+  render?: DialCustomRenderFn;
+  /** Direct ReactNode (no context access) */
+  children?: ReactNode;
+}
+
+/**
+ * Custom component that renders user-provided React components
+ *
+ * Supports two modes:
+ * 1. `render` function: Receives getValue/setValue context for dial integration
+ * 2. `children`: Direct ReactNode for simple/static components
+ *
+ * @example
+ * ```tsx
+ * // Mode 1: Render function with context (recommended for dial integration)
+ * const customRender = useMemo(() => ({ getValue, setValue }) => (
+ *   <div className="flex gap-2">
+ *     <span>Value: {getValue('myField')}</span>
+ *     <button onClick={() => setValue('myField', 0)}>Reset</button>
+ *   </div>
+ * ), []);
+ *
+ * // Mode 2: Direct ReactNode (for static or self-managed components)
+ * const myComponent = useMemo(() => <MyStaticComponent />, []);
+ * ```
+ */
+export const DialCustom: React.FC<DialCustomProps> = ({ schema, render, children }) => {
+  const { getValue, setValue } = useDialSchema();
+
+  // Priority: render function > children
+  if (render) {
+    return <>{render({ getValue, setValue, schema })}</>;
+  }
+
+  // Fallback to children (direct ReactNode)
+  return <>{children}</>;
+};

package/src/dial/components/index.ts

@@ -0,0 +1,3 @@
+// Non-input dial components (actions, containers, etc.)
+export { DialButton } from "./DialButton";
+export { DialCustom } from "./DialCustom";

package/src/dial/index.ts

@@ -6,7 +6,7 @@ export * from "./types";
 export { DialPanel } from "./DialPanel";
 export { IconRenderer } from "./IconRenderer";
 
-// All wrapped input components
+// Dial input components
 export {
   // Basic controlled inputs
   DialBooleanInput,
@@ -27,3 +27,6 @@ export {
   DialInchInput,
   DialTimeInput,
 } from "./wrapped-inputs";
+
+// Non-input dial components
+export { DialButton, DialCustom } from "./components";

package/src/dial/types.ts

@@ -9,18 +9,6 @@ import type { DialSchema, GroupSchema } from "../../dial-cli/src/types";
 
 export type LabelPositionT = "left" | "top" | "inline" | undefined;
 
-// Define specific value types for dial values
-export type DialValue =
-  | string
-  | number
-  | boolean
-  | number[]
-  | string[]
-  | (boolean | number | string)[]
-  | object
-  | null
-  | undefined;
-
 /**
  * Runtime schema group - extends ComponentSchema with DialSchema
  */
@@ -34,7 +22,11 @@ export interface DialSchemaGroup {
 // Re-export base types for convenience
 export type {
   // Schema types (final output)
+  DialCustomRenderContext,
+  DialCustomRenderFn,
+  DialDtype,
   DialSchema,
+  DialValue,
   NestedTypeDefinition,
   GroupSchema,
 } from "../../dial-cli/src/types";

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

@@ -13,7 +13,7 @@ import {
   SelectValue,
   Slider,
   Switch,
-} from "../../index"; // Base input component that connects to the dial store
+} from "../../index";
 import { useDialSchema } from "../DialProvider";
 import { IconRenderer } from "../IconRenderer";
 import type { LabelPositionT } from "../types";
@@ -31,7 +31,7 @@ const DialInputWrapper: React.FC<{
 
   return (
     <FormLayout orientation={`label-${labelPosition}` as LayoutType} className="overflow-x-hidden">
-      <Label size="sm" className="flex items-center gap-1">
+      <Label size="sm" className="flex items-center gap-1 pl-1.5">
         <IconRenderer iconName={icon} size={14} className="text-text-secondary" />
         {label}
       </Label>
@@ -117,12 +117,12 @@ export const DialBooleanInput: React.FC<DialNumInputProps> = ({
   };
 
   if (!label || labelPosition === "inline") {
-    return <Switch {...switchProps} />;
+    return <Switch className="ml-1.5" {...switchProps} />;
   }
 
   return (
     <DialInputWrapper label={label} labelPosition={labelPosition} icon={icon} {...props}>
-      <Switch {...switchProps} />
+      <Switch className="ml-1.5" {...switchProps} />
     </DialInputWrapper>
   );
 };
@@ -130,14 +130,17 @@ export const DialBooleanInput: React.FC<DialNumInputProps> = ({
 // Dial-wrapped ColorInput
 export const DialColorInput: React.FC<DialNumInputProps> = ({ name, label, icon, ...props }) => {
   const { getValue, setValue } = useDialSchema();
-  const value = (getValue(name) ?? "") as string;
+  // Value can be string or number (0xffffff format)
+  const value = getValue(name) as string | number | undefined;
 
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => setValue(name, e.target.value),
+  const handleValueChange = useCallback(
+    (hexColor: string) => setValue(name, hexColor),
     [name, setValue],
   );
 
-  const inputComp = <ColorInput value={value} onChange={handleChange} prefix={label} />;
+  const inputComp = (
+    <ColorInput className="ml-1.5" value={value ?? ""} onValueChange={handleValueChange} />
+  );
 
   return (
     <DialInputWrapper label={label} icon={icon} {...props}>
@@ -208,13 +211,15 @@ export const DialSliderInput: React.FC<DialNumInputProps> = ({
     min,
     max,
     step,
-    className: "flex-1",
+    className: "flex-1 pl-1.5",
   };
 
   return (
     <DialInputWrapper label={label} icon={icon} {...props}>
-      <Slider {...sliderProps} />
-      <span className="text-text-secondary w-12 text-right text-sm">{value}</span>
+      <div className={"flex"}>
+        <Slider {...sliderProps} />
+        <span className="text-text-secondary w-12 text-right text-sm">{value}</span>
+      </div>
     </DialInputWrapper>
   );
 };