@vuer-ai/vuer-uikit 0.0.108 → 0.0.112

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

@@ -1,14 +1,16 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 
 import {
   CmInput,
   DegInput,
   EulerDegInput,
   EulerInput,
+  EulerRadInput,
   FormLayout,
   InchInput,
   IntInput,
   Label,
+  type LayoutType,
   QuaternionInput,
   RadInput,
   TextInput,
@@ -16,7 +18,6 @@ import {
   Vec3Input,
   VectorInput,
 } from "../../index";
-import { EulerRadInput } from "../../ui/inputs/number-inputs/EulerRadInput";
 import { LabelPositionT, useDialSchema } from "../DialProvider";
 
 // Base props for all dial-wrapped inputs
@@ -29,19 +30,19 @@ interface DialWrapperProps {
 }
 
 // Helper component for wrapping inputs with labels
-const DialInputWrapper: React.FC<{
-  label?: string;
-  children: React.ReactElement;
-}> = ({ label, children }) => {
+const DialInputWrapper: React.FC<PropsWithChildren<DialWrapperProps>> = ({
+  label,
+  labelPosition = "top",
+  children,
+}) => {
   if (!label) {
     return <>{children}</>;
   }
 
-  // Always use horizontal layout (label on left)
   return (
-    <FormLayout orientation="label-top">
+    <FormLayout orientation={`label-${labelPosition}` as LayoutType}>
       <Label size="sm">{label}</Label>
-      {children}
+      <>{children}</>
     </FormLayout>
   );
 };
@@ -69,7 +70,7 @@ export const DialVec3Input: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <Vec3Input
           value={value}
           onValuesChange={(val) => setValue(name, val)}
@@ -104,7 +105,7 @@ export const DialEulerInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <EulerInput
           value={value}
           onValuesChange={(val) => setValue(name, val)}
@@ -139,7 +140,7 @@ export const DialEulerDegInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <EulerDegInput
           value={value}
           onValuesChange={(val) => setValue(name, val)}
@@ -174,7 +175,7 @@ export const DialQuaternionInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <QuaternionInput
           value={value}
           onValuesChange={(val) => setValue(name, val)}
@@ -210,7 +211,7 @@ export const DialVectorInput: React.FC<DialWrapperProps & { dimensions?: number
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <VectorInput
           value={value}
           onValuesChange={(val) => setValue(name, val)}
@@ -245,7 +246,7 @@ export const DialIntInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <IntInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
       </DialInputWrapper>
     );
@@ -275,7 +276,7 @@ export const DialDegInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <DegInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
       </DialInputWrapper>
     );
@@ -305,7 +306,7 @@ export const DialRadInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <RadInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
       </DialInputWrapper>
     );
@@ -335,7 +336,7 @@ export const DialCmInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <CmInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
       </DialInputWrapper>
     );
@@ -365,7 +366,7 @@ export const DialInchInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <InchInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
       </DialInputWrapper>
     );
@@ -395,7 +396,7 @@ export const DialTimeInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <TimeInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
       </DialInputWrapper>
     );
@@ -425,11 +426,11 @@ export const DialTextInput: React.FC<DialWrapperProps & { placeholder?: string }
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
-        <TextInput 
-          value={value} 
-          onChange={(val) => setValue(name, val)} 
-          size={size} 
+      <DialInputWrapper name={name} label={label}>
+        <TextInput
+          value={value}
+          onChange={(val) => setValue(name, val)}
+          size={size}
           placeholder={placeholder}
         />
       </DialInputWrapper>
@@ -461,7 +462,7 @@ export const DialEulerRadInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <EulerRadInput
           value={value}
           onValuesChange={(val) => setValue(name, val)}
@@ -487,7 +488,7 @@ export const DialNumberRadInput: React.FC<DialWrapperProps> = ({
 
   // Convert radians to degrees for display
   const degValue = (value * 180) / Math.PI;
-  
+
   // Handler to convert degrees back to radians
   const handleChange = (deg: number) => {
     const rad = (deg * Math.PI) / 180;
@@ -506,7 +507,7 @@ export const DialNumberRadInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <DegInput value={degValue} onChange={handleChange} size={size} step={step} />
       </DialInputWrapper>
     );

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

@@ -1,51 +1,42 @@
 import React from "react";
 
+import { FormLayout, Label, type LayoutType } from "../../ui";
 import { PresetsInput } from "../../ui/inputs/presets-input";
-import { FormLayout, Label } from "../../index";
 import { LabelPositionT, useDialSchema } from "../DialProvider";
 
-interface DialPresetsInputProps {
-  name: string;
-  label?: string;
-  size?: "sm" | "md" | "lg";
-  labelPosition?: LabelPositionT;
-  options: Array<string | number | { label: string; value: string | number }>;
-}
-
 const DialInputWrapper: React.FC<{
   label?: string;
+  labelPosition?: LabelPositionT;
   children: React.ReactElement;
-}> = ({ label, children }) => {
+}> = ({ label, labelPosition = "top", children }) => {
   if (!label) {
     return <>{children}</>;
   }
 
   return (
-    <FormLayout orientation="label-top">
+    <FormLayout orientation={`label-${labelPosition}` as LayoutType}>
       <Label size="sm">{label}</Label>
       {children}
     </FormLayout>
   );
 };
 
-export const DialPresetsInput: React.FC<DialPresetsInputProps> = ({
-  name,
-  label,
-  size = "sm",
-  labelPosition,
-  options,
-}) => {
+export const DialPresetsInput: React.FC<{
+  name: string;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  labelPosition?: LabelPositionT;
+  options: Array<string | number | { label: string; value: string | number }>;
+}> = ({ name, label, size = "sm", labelPosition = "top", options }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? 0) as number;
 
   // Extract preset values from options
-  const presets = options
-    .slice(0, 3)
-    .map((opt) => {
-      if (typeof opt === "number") return opt;
-      if (typeof opt === "string") return parseFloat(opt);
-      return typeof opt.value === "number" ? opt.value : parseFloat(opt.value as string);
-    }) as [number, number, number];
+  const presets = options.slice(0, 3).map((opt) => {
+    if (typeof opt === "number") return opt;
+    if (typeof opt === "string") return parseFloat(opt);
+    return typeof opt.value === "number" ? opt.value : parseFloat(opt.value as string);
+  }) as [number, number, number];
 
   // Pad with zeros if less than 3 presets
   while (presets.length < 3) {
@@ -53,6 +44,7 @@ export const DialPresetsInput: React.FC<DialPresetsInputProps> = ({
   }
 
   if (labelPosition === "inline") {
+    // this is suspicious - Ge
     return (
       <div className="flex items-center gap-2">
         {label && <Label size="sm">{label}</Label>}
@@ -66,7 +58,7 @@ export const DialPresetsInput: React.FC<DialPresetsInputProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper label={label} labelPosition={labelPosition}>
         <PresetsInput
           value={value}
           onChange={(val) => setValue(name, val)}
@@ -76,4 +68,4 @@ export const DialPresetsInput: React.FC<DialPresetsInputProps> = ({
       </DialInputWrapper>
     );
   }
-};
+};

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

@@ -1,12 +1,14 @@
-import React from "react";
+import React, { useCallback } from "react";
+
+import { FormLayout, Label, type LayoutType, VectorInput } from "../../index";
 import { useDialSchema } from "../DialProvider";
-import { FormLayout, Label, VectorInput } from "../../index";
 
 interface DialVectorInputProps {
   name: string;
   label?: string;
   column?: boolean;
   size?: "sm" | "md" | "lg";
+  labelPosition?: "left" | "top";
 }
 
 /**
@@ -17,8 +19,17 @@ export const DialVectorInput: React.FC<DialVectorInputProps> = ({
   name,
   label,
   size = "sm",
+  labelPosition = "top",
 }) => {
   const { getValue, setValue, schemas } = useDialSchema();
+
+  const handleValuesChange = useCallback(
+    (newValues: number[]) => {
+      setValue(name, newValues);
+    },
+    [name],
+  );
+
   const schema = schemas.find((s) => s.name === name);
   if (!schema) {
     return null;
@@ -61,8 +72,6 @@ export const DialVectorInput: React.FC<DialVectorInputProps> = ({
     gridRows = undefined;
   }
 
-  console.log("the grid-flow is", gridAutoFlow, gridColumns, gridRows);
-
   // Ensure value is an array with correct dimensions
   const vectorValue = Array.isArray(value)
     ? value.concat(Array(Math.max(0, dimensions - value.length)).fill(0))
@@ -85,10 +94,6 @@ export const DialVectorInput: React.FC<DialVectorInputProps> = ({
       ? placeholders.map((p) => <span className="text-xs">{p}</span>)
       : undefined;
 
-  const handleValuesChange = (newValues: number[]) => {
-    setValue(name, newValues);
-  };
-
   const inputComponent = (
     <VectorInput
       value={vectorValue}
@@ -107,7 +112,7 @@ export const DialVectorInput: React.FC<DialVectorInputProps> = ({
   }
 
   return (
-    <FormLayout orientation="label-top">
+    <FormLayout orientation={`label-${labelPosition}` as LayoutType}>
       <Label size="sm">{label}</Label>
       <div className="flex flex-row items-center gap-2">
         {schema.helpText && (

package/src/styles/theme.css

@@ -10,7 +10,7 @@
     rgba(50, 50, 50, 0.6) 0%,
     rgba(70, 70, 70, 0.6) 105.28%
   ) !important;
-  backdrop-filter: blur(20px) !important;
+  backdrop-filter: blur(5px) !important;
 }
 
 @utility liquid-light-bg {
@@ -19,7 +19,7 @@
     rgba(236, 236, 236, 0.6) 0%,
     rgba(202, 202, 202, 0.6) 105.28%
   ) !important;
-  backdrop-filter: blur(20px) !important;
+  backdrop-filter: blur(5px) !important;
 }
 
 @utility liquid-dark-bg-tooltip-arrow {
@@ -165,7 +165,7 @@
   --color-select-secondary: var(--select-secondary);
   /* radius */
   --radius-uk-xs: var(--radius); /* 4px */
-  --radius-uk-sm: calc(var(--radius) + 2px); /* 6px */
+  --radius-uk-sm: calc(var(--radius) + 3px); /* 6px */
   --radius-uk-md: calc(var(--radius) + 4px); /* 8px */
   --radius-uk-lg: calc(var(--radius) + 10px); /* 12px */
   --radius-uk-xl: calc(var(--radius) + 13px); /* 16px */
@@ -178,6 +178,7 @@
   --spacing-xl: calc(var(--spacing) + 12px); /* 16px */
   /* font-size */
   --text-uk-hint: 10px; /* hint text */
+  --text-uk-xxs: 10px; /* primary text, input title */
   --text-uk-xs: 11px; /* primary text, input title */
   --text-uk-sm: 12px; /* tab, highlight text, numbers */
   --text-uk-subtitle: 13px; /* subtitle */
@@ -188,6 +189,7 @@
   --text-uk-h1: 30px; /* heading 1 */
   /* line-height */
   --leading-uk-hint: 12px; /* hint text */
+  --leading-uk-xxs: 12px; /* primary text, input title */
   --leading-uk-xs: 14px; /* primary text, input title */
   --leading-uk-sm: 16px; /* tab, highlight text, numbers */
   --leading-uk-subtitle: 18px; /* subtitle */

package/src/ui/button.tsx

@@ -55,11 +55,11 @@ export const buttonVariants = cva(
       },
       size: {
         sm: [
-          "rounded-uk-sm",
+          "rounded-uk-md",
           "text-uk-sm",
           "py-sm",
           "gap-xxs",
-          "px-sm",
+          "px-md",
           "leading-4",
           "[&_svg:not([class*='size-'])]:size-3",
         ],

package/src/ui/card.tsx

@@ -12,9 +12,12 @@ const cardVariants = cva(
     "flex-col",
     "rounded-uk-lg",
     "bg-bg-primary",
-    "liquid:shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
     "liquid-dark:liquid-dark-bg",
+    "liquid-dark:border-[0.9px]",
+    "liquid-dark:border-[rgba(85,85,85,100)]",
     "liquid-light:liquid-light-bg",
+    "liquid-light:border-[0.8px]",
+    "liquid-light:border-[white]",
   ],
   {
     variants: {
@@ -86,7 +89,6 @@ function CardTitle({ className, ...props }: ComponentProps<"div">) {
         "text-uk-md",
         "leading-uk-md",
         "font-medium",
-        "-mt-2",
         "vertical-align-middle",
         className,
       )}
@@ -102,7 +104,7 @@ function CardDescription({ className, ...props }: ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-uk-sm", "-mt-2", "text-text-secondary", "leading-uk-sm", className)}
+      className={cn("text-uk-sm", "text-text-secondary", "leading-uk-sm", className)}
       {...props}
     />
   );
@@ -119,8 +121,6 @@ function CardAction({ className, ...props }: ComponentProps<"div">) {
         "text-text-secondary",
         "text-uk-sm",
         "leading-uk-sm",
-        "-mt-2",
-        "-mr-3",
         "font-medium",
         "vertical-align-middle",
         className,

package/src/ui/index.ts

@@ -20,7 +20,6 @@ export * from "./toggle-group";
 export * from "./badge";
 export * from "./radio-group";
 export * from "./card";
-export * from "./panel";
 export * from "./toolbar";
 export * from "./checkbox";
 export * from "./switch";
@@ -38,6 +37,8 @@ export * from "./UIKitBadge";
 export * from "./DialBadge";
 export * from "./resizable";
 export * from "./inputs";
+export * from "./progress";
+export * from "./spinner";
 
 export * from "./layouts";
 export * from "./theme";

package/src/ui/inputs/input.tsx

@@ -14,9 +14,27 @@ const inputRootVariants = cva(
         error: ["hover:bg-danger-primary/10", "bg-danger-primary/20"],
       },
       size: {
-        sm: ["h-6", "text-uk-sm", "[&_.input-slot>svg:not([class*='size-'])]:size-3", "px-sm"],
-        md: ["h-8", "text-uk-md", "[&_.input-slot>svg:not([class*='size-'])]:size-4", "px-md"],
-        lg: ["h-9", "text-uk-lg", "[&_.input-slot>svg:not([class*='size-'])]:size-5", "px-lg"],
+        sm: [
+          "h-6",
+          "text-uk-sm",
+          "rounded-[10px]",
+          "[&_.input-slot>svg:not([class*='size-'])]:size-3",
+          "px-sm",
+        ],
+        md: [
+          "h-8",
+          "text-uk-md",
+          "rounded-[11px]",
+          "[&_.input-slot>svg:not([class*='size-'])]:size-4",
+          "px-md",
+        ],
+        lg: [
+          "h-9",
+          "text-uk-lg",
+          "rounded-[12px]",
+          "[&_.input-slot>svg:not([class*='size-'])]:size-5",
+          "px-lg",
+        ],
       },
     },
     defaultVariants: {

package/src/ui/label.tsx

@@ -5,13 +5,21 @@ import * as React from "react";
 import { cn } from "../hooks";
 
 const labelVariants = cva(
-  ["font-normal", "leading-none", "peer-disabled:cursor-not-allowed", "peer-disabled:opacity-70"],
+  [
+    "font-normal",
+    "leading-none",
+    "peer-disabled:cursor-not-allowed",
+    "peer-disabled:opacity-70",
+    "text-nowrap",
+    "overflow-ellipsis",
+  ],
   {
     variants: {
       size: {
         xs: "text-xxs",
         sm: "text-xs",
         lg: "text-md",
+        hint: "text-hint text-muted-foreground",
       },
     },
     defaultVariants: {
@@ -22,7 +30,7 @@ const labelVariants = cva(
 
 type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
   VariantProps<typeof labelVariants> & {
-    size?: "xs" | "sm" | "lg";
+    size?: "xs" | "sm" | "lg" | "hint";
   };
 
 const Label = React.forwardRef<React.ComponentRef<typeof LabelPrimitive.Root>, LabelProps>(

package/src/ui/layout.tsx

@@ -3,11 +3,12 @@ import { PropsWithChildren, ReactElement } from "react";
 
 import { cn } from "../hooks";
 
+export type LayoutType = "label-left" | "label-top";
 export interface FormLayoutProps extends PropsWithChildren {
   align?: "start" | "center" | "end" | "baseline";
   asChild?: boolean;
   className?: string;
-  orientation?: "label-left" | "label-top";
+  orientation?: LayoutType;
   children: [ReactElement, ReactElement];
 }
 
@@ -22,6 +23,7 @@ export function FormLayout({
   children,
 }: FormLayoutProps) {
   const Com = asChild ? Slot : "div";
+  console.log("layout", orientation);
 
   return (
     <Com

package/src/ui/progress.tsx

@@ -0,0 +1,29 @@
+import { type ComponentProps } from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "../hooks"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-bg-secondary relative h-2 w-full overflow-hidden rounded-uk-xl",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-brand-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

package/src/ui/spinner.tsx

@@ -0,0 +1,67 @@
+import { type LucideProps } from 'lucide-react';
+
+const Ring = ({ size = 24, ...props }: LucideProps) => (
+  <svg
+    height={size}
+    stroke="currentColor"
+    viewBox="0 0 44 44"
+    width={size}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <title>Loading...</title>
+    <g fill="none" fillRule="evenodd" strokeWidth="2">
+      <circle cx="22" cy="22" r="1">
+        <animate
+          attributeName="r"
+          begin="0s"
+          calcMode="spline"
+          dur="1.8s"
+          keySplines="0.165, 0.84, 0.44, 1"
+          keyTimes="0; 1"
+          repeatCount="indefinite"
+          values="1; 20"
+        />
+        <animate
+          attributeName="stroke-opacity"
+          begin="0s"
+          calcMode="spline"
+          dur="1.8s"
+          keySplines="0.3, 0.61, 0.355, 1"
+          keyTimes="0; 1"
+          repeatCount="indefinite"
+          values="1; 0"
+        />
+      </circle>
+      <circle cx="22" cy="22" r="1">
+        <animate
+          attributeName="r"
+          begin="-0.9s"
+          calcMode="spline"
+          dur="1.8s"
+          keySplines="0.165, 0.84, 0.44, 1"
+          keyTimes="0; 1"
+          repeatCount="indefinite"
+          values="1; 20"
+        />
+        <animate
+          attributeName="stroke-opacity"
+          begin="-0.9s"
+          calcMode="spline"
+          dur="1.8s"
+          keySplines="0.3, 0.61, 0.355, 1"
+          keyTimes="0; 1"
+          repeatCount="indefinite"
+          values="1; 0"
+        />
+      </circle>
+    </g>
+  </svg>
+);
+
+export type SpinnerProps = LucideProps;
+
+export const Spinner = (props: SpinnerProps) => {
+  return <Ring {...props} />;
+};
+  

package/src/ui/toolbar.tsx

@@ -29,14 +29,27 @@ export function Toolbar({ className, children, variant = "default", size = "md"
   return (
     <div
       className={cn(
-        "bg-bg-primary flex items-center gap-2",
-        "liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg liquid:shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-        size === "sm" && "rounded-uk-md p-1.5",
-        size === "md" && "rounded-uk-lg p-1.5",
-        size === "lg" && "rounded-uk-xl p-1.5",
-        variant === "floating" &&
-          "rounded-[var(--radius-uk-md)] bg-white dark:bg-gray-900" &&
-          (size === "sm" ? "px-1 py-1" : size === "md" ? "px-2 py-2" : "px-3 py-3"),
+        "flex items-center gap-2",
+        "liquid-dark:liquid-dark-bg",
+        "liquid-dark:border-[0.9px]",
+        "liquid-dark:border-[rgba(85,85,85,100)]",
+        "liquid-light:liquid-light-bg",
+        "liquid-light:border-[0.8px]",
+        "liquid-light:border-[white]",
+        "liquid:shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+        // Base styles for non-floating variants
+        variant !== "floating" && "bg-bg-primary",
+        // Size-based border radius for non-floating variants
+        variant !== "floating" && size === "sm" && "rounded-uk-md p-1.5",
+        variant !== "floating" && size === "md" && "rounded-uk-lg p-1.5",
+        variant !== "floating" && size === "lg" && "rounded-uk-xl p-1.5",
+        // Floating variant styles
+        variant === "floating" && [
+          "rounded-[var(--radius-uk-md)] bg-white dark:bg-gray-900",
+          size === "sm" && "px-1 py-1",
+          size === "md" && "px-[0.6em] py-2",
+          size === "lg" && "px-3 py-3",
+        ],
         className,
       )}
     >