@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/ui/inputs/input.tsx

@@ -0,0 +1,155 @@
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { cva, type VariantProps } from "class-variance-authority";
+import { type ComponentProps, forwardRef, useRef } from "react";
+
+import { cn } from "../../hooks";
+
+const inputRootVariants = cva(
+  ["flex", "gap-md", "items-center", "rounded-uk-sm", "overflow-hidden", "bg-bg-secondary"],
+  {
+    variants: {
+      state: {
+        default: [
+          "hover:bg-bg-secondary/80",
+          "has-[input:focus]:bg-bg-secondary",
+        ],
+        disabled: ["disabled:cursor-not-allowed", "bg-bg-secondary", "text-text-secondary"],
+        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"],
+      },
+    },
+    defaultVariants: {
+      state: "default",
+      size: "md",
+    },
+  },
+);
+
+export interface InputRootProps
+  extends Omit<ComponentProps<"input">, "size">,
+    VariantProps<typeof inputRootVariants> {
+  state?: "default" | "error";
+  side?: "left" | "right" | "center";
+  asChild?: boolean;
+  inputClassName?: string;
+}
+
+/**
+ * Stylized input root that provides consistent container and input styling.
+ * Includes clickable slots on left/right to control caret position.
+ *
+ * @param state - Visual state ("default" | "error")
+ * @param size - Control size ("sm" | "base" | "lg")
+ * @param side - Align text for inputs ("left" | "right" | "center")
+ * @param inputClassName - Additional classes applied to the internal input element
+ */
+export const InputRoot = forwardRef<HTMLInputElement, InputRootProps>(function InputRoot(
+  { style, className, side, children, disabled, state, size, type, inputClassName, ...props },
+  ref,
+) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div
+      style={style}
+      data-input
+      className={cn(inputRootVariants({ size, state: disabled ? "disabled" : state }), className)}
+      onClick={(event) => {
+        const target = event.target as HTMLElement;
+        if (target.closest("input, button, a")) return;
+
+        const input = inputRef.current;
+        if (!input) return;
+
+        // Same selector as in the CSS to find the right slot
+        const isRightSlot = target.closest(`
+            .input-slot[data-side='right'],
+            .input-slot:not([data-side='right']) ~ .input-slot:not([data-side='left'])
+          `);
+
+        const cursorPosition = isRightSlot ? input.value.length : 0;
+
+        requestAnimationFrame(() => {
+          // Only some input types support this, browsers will throw an error if not supported
+          // See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange#:~:text=Note%20that%20according,not%20support%20selection%22.
+          try {
+            input.setSelectionRange(cursorPosition, cursorPosition);
+          } catch {
+            /* empty */
+          }
+          input.focus();
+        });
+      }}
+    >
+      <input
+        spellCheck="false"
+        {...props}
+        type={type}
+        data-side={side}
+        disabled={disabled}
+        name={type ?? "text"}
+        ref={composeRefs(inputRef, ref)}
+        className={cn(
+          [
+            "w-full",
+            "h-full",
+            "outline-none",
+            "data-[side=right]:text-right",
+            "data-[side=center]:text-center",
+            "[input[type=number]]:font-number-input",
+            "[&::-webkit-inner-spin-button]:appearance-none",
+            "[&::-webkit-outer-spin-button]:appearance-none",
+          ],
+          inputClassName,
+        )}
+      />
+      {children}
+    </div>
+  );
+});
+
+export interface InputSlotProps extends ComponentProps<"div"> {
+  side?: "left" | "right";
+}
+
+/**
+ * Decorative/interactive slot that can be placed on either side of the input.
+ * Useful for icons, prefixes, or suffixes.
+ *
+ * @param side - Which side this slot is on ("left" | "right")
+ */
+export const InputSlot = forwardRef<HTMLDivElement, InputSlotProps>(function (
+  { className, children, side = "left", ...props },
+  ref,
+) {
+  return (
+    <div
+      data-side={side}
+      {...props}
+      ref={ref}
+      className={cn(
+        [
+          "input-slot",
+          "cursor-text",
+          "shrink-0",
+          "order-[0]",
+          "text-text-tertiary",
+          "data-[side=left]:-order-1",
+        ],
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+});
+
+/*
+note-ge: add this since a bunch of tools defaults to import Input.
+If you want to change this, look up the usage references first.
+*/
+export { InputRoot as Input };

package/src/ui/inputs/number-inputs/CmInput.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+
+import { InputNumbers, InputNumbersProps } from "../input-numbers";
+
+interface CmInputProps extends Omit<InputNumbersProps, "value" | "onValuesChange" | "onChange"> {
+  value?: number;
+  onChange?: (value: number) => void;
+}
+
+const CmInput = forwardRef<HTMLDivElement, CmInputProps>(function CmInput(
+  { value = 0, onChange, ...props },
+  ref,
+) {
+  return (
+    <InputNumbers
+      ref={ref}
+      value={[value]}
+      onValuesChange={(values) => onChange?.(values[0])}
+      suffix={["cm"]}
+      {...props}
+    />
+  );
+});
+
+export { CmInput };
+export type { CmInputProps };

package/src/ui/inputs/number-inputs/DegInput.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+
+import { InputNumbers, InputNumbersProps } from "../input-numbers";
+
+interface DegInputProps extends Omit<InputNumbersProps, "value" | "onValuesChange" | "onChange"> {
+  value?: number;
+  onChange?: (value: number) => void;
+}
+
+const DegInput = forwardRef<HTMLDivElement, DegInputProps>(function DegInput(
+  { value = 0, onChange, ...props },
+  ref,
+) {
+  return (
+    <InputNumbers
+      ref={ref}
+      value={[value]}
+      onValuesChange={(values) => onChange?.(values[0])}
+      suffix={["°"]}
+      {...props}
+    />
+  );
+});
+
+export { DegInput };
+export type { DegInputProps };

package/src/ui/inputs/number-inputs/EulerDegInput.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from "react";
+
+import { EulerInput, EulerInputProps } from "./EulerInput";
+
+type EulerDegInputProps = Omit<EulerInputProps, "unit">;
+
+const EulerDegInput = forwardRef<HTMLDivElement, EulerDegInputProps>(
+  function EulerDegInput(props, ref) {
+    return <EulerInput ref={ref} unit="deg" {...props} />;
+  },
+);
+
+export { EulerDegInput };
+export type { EulerDegInputProps };

package/src/ui/inputs/number-inputs/EulerInput.tsx

@@ -0,0 +1,30 @@
+import { forwardRef } from "react";
+
+import { VectorInput, VectorInputProps } from "./VectorInput";
+
+interface EulerInputProps extends Omit<VectorInputProps, "value" | "labels" | "onValuesChange"> {
+  value: [number, number, number];
+  onValuesChange?: (value: [number, number, number]) => void;
+  unit?: "deg" | "rad";
+}
+
+const EulerInput = forwardRef<HTMLDivElement, EulerInputProps>(function EulerInput(
+  { value, onValuesChange, unit = "deg", ...props },
+  ref,
+) {
+  const unitSymbol = unit === "deg" ? "°" : "rad";
+  const labels = [`x${unitSymbol}`, `y${unitSymbol}`, `z${unitSymbol}`];
+
+  return (
+    <VectorInput
+      ref={ref}
+      value={value}
+      onValuesChange={onValuesChange as (value: number[]) => void}
+      labels={labels}
+      {...props}
+    />
+  );
+});
+
+export { EulerInput };
+export type { EulerInputProps };

package/src/ui/inputs/number-inputs/EulerRadInput.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from "react";
+
+import { EulerInput, EulerInputProps } from "./EulerInput";
+
+type EulerRadInputProps = Omit<EulerInputProps, "unit">;
+
+const EulerRadInput = forwardRef<HTMLDivElement, EulerRadInputProps>(
+  function EulerRadInput(props, ref) {
+    return <EulerInput ref={ref} unit="rad" {...props} />;
+  },
+);
+
+export { EulerRadInput };
+export type { EulerRadInputProps };

package/src/ui/inputs/number-inputs/InchInput.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+
+import { InputNumbers, InputNumbersProps } from "../input-numbers";
+
+interface InchInputProps extends Omit<InputNumbersProps, "value" | "onValuesChange" | "onChange"> {
+  value?: number;
+  onChange?: (value: number) => void;
+}
+
+const InchInput = forwardRef<HTMLDivElement, InchInputProps>(function InchInput(
+  { value = 0, onChange, ...props },
+  ref,
+) {
+  return (
+    <InputNumbers
+      ref={ref}
+      value={[value]}
+      onValuesChange={(values) => onChange?.(values[0])}
+      suffix={["in"]}
+      {...props}
+    />
+  );
+});
+
+export { InchInput };
+export type { InchInputProps };

package/src/ui/inputs/number-inputs/IntInput.tsx

@@ -0,0 +1,46 @@
+import { forwardRef, useCallback } from "react";
+
+import { InputNumbers, InputNumbersProps } from "../input-numbers";
+
+interface IntInputProps extends Omit<InputNumbersProps, "value" | "onValuesChange" | "onChange"> {
+  value?: number;
+  onChange?: (value: number) => void;
+}
+
+const IntInput = forwardRef<HTMLDivElement, IntInputProps>(function IntInput(
+  { value = 0, onChange, ...props },
+  ref,
+) {
+  const handleValuesChange = useCallback(
+    (values: number[]) => {
+      const newValue = values[0];
+
+      if (newValue === ("" as unknown as number)) {
+        onChange?.(newValue as unknown as number);
+        return;
+      }
+
+      if (isNaN(newValue) || newValue === undefined || newValue === null) {
+        onChange?.(0);
+        return;
+      }
+
+      const intValue = Math.round(newValue);
+      onChange?.(intValue);
+    },
+    [onChange],
+  );
+
+  return (
+    <InputNumbers
+      ref={ref}
+      value={[value]}
+      onValuesChange={handleValuesChange}
+      step={1}
+      {...props}
+    />
+  );
+});
+
+export { IntInput };
+export type { IntInputProps };

package/src/ui/inputs/number-inputs/KVectorInput.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from "react";
+
+import { VectorInput, VectorInputProps } from "./VectorInput";
+
+interface KVectorInputProps extends Omit<VectorInputProps, "labels"> {
+  dimensions?: number;
+}
+
+const KVectorInput = forwardRef<HTMLDivElement, KVectorInputProps>(function KVectorInput(
+  { value, dimensions, ...props },
+  ref,
+) {
+  const k = dimensions || value.length;
+  const labels = Array.from({ length: k }, (_, i) => `${i}`);
+
+  return <VectorInput ref={ref} value={value} labels={labels} {...props} />;
+});
+
+export { KVectorInput };
+export type { KVectorInputProps };

package/src/ui/inputs/number-inputs/QuaternionInput.tsx

@@ -0,0 +1,27 @@
+import { forwardRef } from "react";
+
+import { VectorInput, VectorInputProps } from "./VectorInput";
+
+interface QuaternionInputProps
+  extends Omit<VectorInputProps, "value" | "labels" | "onValuesChange"> {
+  value: [number, number, number, number];
+  onValuesChange?: (value: [number, number, number, number]) => void;
+}
+
+const QuaternionInput = forwardRef<HTMLDivElement, QuaternionInputProps>(function QuaternionInput(
+  { value, onValuesChange, ...props },
+  ref,
+) {
+  return (
+    <VectorInput
+      ref={ref}
+      value={value}
+      onValuesChange={onValuesChange as (value: number[]) => void}
+      labels={["w", "x", "y", "z"]}
+      {...props}
+    />
+  );
+});
+
+export { QuaternionInput };
+export type { QuaternionInputProps };

package/src/ui/inputs/number-inputs/RadInput.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+
+import { InputNumbers, InputNumbersProps } from "../input-numbers";
+
+interface RadInputProps extends Omit<InputNumbersProps, "value" | "onValuesChange" | "onChange"> {
+  value?: number;
+  onChange?: (value: number) => void;
+}
+
+const RadInput = forwardRef<HTMLDivElement, RadInputProps>(function RadInput(
+  { value = 0, onChange, ...props },
+  ref,
+) {
+  return (
+    <InputNumbers
+      ref={ref}
+      value={[value]}
+      onValuesChange={(values) => onChange?.(values[0])}
+      suffix={["rad"]}
+      {...props}
+    />
+  );
+});
+
+export { RadInput };
+export type { RadInputProps };

package/src/ui/inputs/number-inputs/TimeInput.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+
+import { InputNumbers, InputNumbersProps } from "../input-numbers";
+
+interface TimeInputProps extends Omit<InputNumbersProps, "value" | "onValuesChange" | "onChange"> {
+  value?: number;
+  onChange?: (value: number) => void;
+}
+
+const TimeInput = forwardRef<HTMLDivElement, TimeInputProps>(function TimeInput(
+  { value = 0, onChange, ...props },
+  ref,
+) {
+  return (
+    <InputNumbers
+      ref={ref}
+      value={[value]}
+      onValuesChange={(values) => onChange?.(values[0])}
+      suffix={["s"]}
+      {...props}
+    />
+  );
+});
+
+export { TimeInput };
+export type { TimeInputProps };

package/src/ui/inputs/number-inputs/Vec3Input.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+
+import { VectorInput, VectorInputProps } from "./VectorInput";
+
+interface Vec3InputProps extends Omit<VectorInputProps, "value" | "labels" | "onValuesChange"> {
+  value: [number, number, number];
+  onValuesChange?: (value: [number, number, number]) => void;
+}
+
+const Vec3Input = forwardRef<HTMLDivElement, Vec3InputProps>(function Vec3Input(
+  { value, onValuesChange, ...props },
+  ref,
+) {
+  return (
+    <VectorInput
+      ref={ref}
+      value={value}
+      onValuesChange={onValuesChange as (value: number[]) => void}
+      labels={["x", "y", "z"]}
+      {...props}
+    />
+  );
+});
+
+export { Vec3Input };
+export type { Vec3InputProps };

package/src/ui/inputs/number-inputs/VectorInput.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef, ReactNode } from "react";
+
+import { InputNumbers, InputNumbersProps } from "../input-numbers";
+
+
+interface VectorInputProps
+  extends Omit<InputNumbersProps, "value" | "onValuesChange" | "onChange"> {
+  value: number[];
+  onValuesChange?: (value: number[]) => void;
+  labels?: ReactNode[];
+  step?: number | number[];
+  gridAutoFlow?: "column" | "row";
+  columns?: number;
+  rows?: number;
+  // Legacy props (deprecated)
+  layout?: "column" | "row";
+  columnMajor?: boolean;
+}
+
+const VectorInput = forwardRef<HTMLDivElement, VectorInputProps>(function VectorInput(
+  { labels, prefix, gridAutoFlow, columns, rows, layout, columnMajor, ...props },
+  ref,
+) {
+  return (
+    <InputNumbers
+      ref={ref}
+      prefix={labels || prefix}
+      gridAutoFlow={gridAutoFlow || layout}
+      columns={columns}
+      rows={rows}
+      columnMajor={columnMajor}
+      {...props}
+    />
+  );
+});
+
+export { VectorInput };
+export type { VectorInputProps };

package/src/ui/inputs/number-inputs/index.ts

@@ -0,0 +1,38 @@
+export { IntInput } from "./IntInput";
+export type { IntInputProps } from "./IntInput";
+
+export { DegInput } from "./DegInput";
+export type { DegInputProps } from "./DegInput";
+
+export { RadInput } from "./RadInput";
+export type { RadInputProps } from "./RadInput";
+
+export { InchInput } from "./InchInput";
+export type { InchInputProps } from "./InchInput";
+
+export { CmInput } from "./CmInput";
+export type { CmInputProps } from "./CmInput";
+
+export { TimeInput } from "./TimeInput";
+export type { TimeInputProps } from "./TimeInput";
+
+export { VectorInput } from "./VectorInput";
+export type { VectorInputProps } from "./VectorInput";
+
+export { Vec3Input } from "./Vec3Input";
+export type { Vec3InputProps } from "./Vec3Input";
+
+export { EulerInput } from "./EulerInput";
+export type { EulerInputProps } from "./EulerInput";
+
+export { EulerDegInput } from "./EulerDegInput";
+export type { EulerDegInputProps } from "./EulerDegInput";
+
+export { EulerRadInput } from "./EulerRadInput";
+export type { EulerRadInputProps } from "./EulerRadInput";
+
+export { QuaternionInput } from "./QuaternionInput";
+export type { QuaternionInputProps } from "./QuaternionInput";
+
+export { KVectorInput } from "./KVectorInput";
+export type { KVectorInputProps } from "./KVectorInput";

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

@@ -0,0 +1,59 @@
+import { forwardRef, useState } from "react";
+
+import { Button } from "../button";
+import { InputNumbers, InputNumbersProps } from "./input-numbers";
+import { cn } from "../../hooks";
+
+interface PresetsInputProps
+  extends Omit<InputNumbersProps, "presets" | "value" | "onChange" | "onValuesChange"> {
+  presets: [number, number, number];
+  value?: number;
+  onChange?: (value: number) => void;
+  className?: string;
+}
+
+export const PresetsInput = forwardRef<HTMLDivElement, PresetsInputProps>(function PresetsInput(
+  { presets, value = 0, onChange, size, className, ...props },
+  ref,
+) {
+  const [preset, setPreset] = useState(value);
+
+  const handleValueChange = (values: number[]) => {
+    const newValue = values[0];
+    setPreset(newValue);
+    onChange?.(newValue);
+  };
+
+  const handlePresetClick = (presetValue: number) => {
+    setPreset(presetValue);
+    onChange?.(presetValue);
+  };
+
+  return (
+    <div className={cn("gap-xs grid grid-cols-5", className)}>
+      <div className="col-span-full">
+        <InputNumbers
+          {...props}
+          ref={ref}
+          size={size}
+          value={[preset]}
+          onValuesChange={handleValueChange}
+        />
+      </div>
+
+      {presets.map((p: number, i: number) => {
+        return (
+          <Button
+            key={i}
+            size={size}
+            variant="secondary"
+            className="h-6"
+            onClick={() => handlePresetClick(p)}
+          >
+            {p}
+          </Button>
+        );
+      })}
+    </div>
+  );
+});

package/src/ui/label.tsx

@@ -0,0 +1,35 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+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"],
+  {
+    variants: {
+      size: {
+        xs: "text-xxs",
+        sm: "text-xs",
+        lg: "text-md",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+    },
+  },
+);
+
+type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+  VariantProps<typeof labelVariants> & {
+    size?: "xs" | "sm" | "lg";
+  };
+
+const Label = React.forwardRef<React.ComponentRef<typeof LabelPrimitive.Root>, LabelProps>(
+  ({ className, size, ...props }, ref) => (
+    <LabelPrimitive.Root ref={ref} className={cn(labelVariants({ size }), className)} {...props} />
+  ),
+);
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };