@vuer-ai/vuer-uikit 0.0.11 → 0.0.13

package/src/ui/input-numbers.tsx

@@ -0,0 +1,201 @@
+import { useGesture } from "@use-gesture/react";
+import { ChangeEvent, forwardRef, ReactNode, useCallback, useRef } from "react";
+
+import { InputRoot, InputRootProps, InputSlot } from "./input";
+import { cn } from "../utils";
+
+const getHoverElementAndIndex = (
+  element: Element | null,
+  inputs: Map<string, HTMLInputElement | null>,
+) => {
+  if (!element) return null;
+  const container = element?.closest("[data-input]");
+
+  const currentInput = container?.querySelector("input");
+
+  if (!currentInput) return null;
+
+  return Array.from(inputs.values()).indexOf(currentInput);
+};
+
+// down y x none
+const changeElementsHoverState = (
+  inputs: Map<string, HTMLInputElement | null>,
+  range: [number | null, number | null],
+  changed: "x" | "y" | "none",
+) => {
+  const [first, last] = range;
+  Array.from(inputs.values()).forEach((input, i) => {
+    const container = input?.closest("[data-input]");
+    if (first === null || last === null) {
+      container?.setAttribute("data-hover", "none");
+    } else if (i >= Math.min(first, last) && i <= Math.max(first, last)) {
+      container?.setAttribute("data-hover", changed !== "none" ? changed : "down");
+    } else {
+      container?.setAttribute("data-hover", "none");
+    }
+  });
+};
+
+interface InputNumbersProps extends Pick<InputRootProps, "size"> {
+  step?: number;
+  value: number[];
+  prefix?: ReactNode[];
+  onValuesChange?: (value: Array<number>) => void;
+}
+
+const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(function InputNumbers(
+  { size, value, onValuesChange, prefix, step = 0.1 },
+  ref,
+) {
+  const inputs = useRef<Map<string, HTMLInputElement | null>>(new Map());
+  const selectRange = useRef<[number | null, number | null]>([null, null]);
+  const inputChange = useRef(false);
+
+  const stopClick = useCallback(() => {
+    if (typeof document === "undefined") return;
+
+    const stopClick = (e: MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      document.removeEventListener("click", stopClick, true);
+    };
+    document.addEventListener("click", stopClick, true);
+  }, []);
+
+  const bind = useGesture({
+    onDrag: ({ delta: [dx], event, initial, distance: [, oy], xy, memo = 0 }) => {
+      event.stopPropagation();
+      event.preventDefault();
+
+      if (selectRange.current[0] === null) {
+        selectRange.current[0] = getHoverElementAndIndex(
+          typeof document !== "undefined" ? document.elementFromPoint(...initial) : null,
+          inputs.current,
+        );
+      }
+
+      let newMX: number = memo + dx / 2;
+
+      if (Math.abs(newMX) >= (inputChange.current ? 1 : 5)) {
+        const multiplyStep = event.shiftKey ? 5 : event.altKey ? 1 / 5 : 1;
+
+        const newValue = value.map((v, i) => {
+          const [first, last] = selectRange.current;
+          if (first === null || last === null) {
+            return v;
+          } else if (i <= Math.max(first, last) && i >= Math.min(first, last)) {
+            return Number(((v || 0) + Math.floor(newMX) * step * multiplyStep).toPrecision(6));
+          } else {
+            return v;
+          }
+        });
+        onValuesChange?.(newValue);
+        newMX = 0;
+        inputChange.current = true;
+
+        changeElementsHoverState(inputs.current, selectRange.current, "x");
+
+        stopClick();
+      }
+
+      if (!inputChange.current) {
+        const currentElement =
+          typeof document !== "undefined" ? document.elementFromPoint(...xy) : null;
+
+        const currentIndex = getHoverElementAndIndex(currentElement, inputs.current);
+        selectRange.current[1] = currentIndex ?? selectRange.current[1];
+
+        changeElementsHoverState(inputs.current, selectRange.current, oy !== 0 ? "y" : "none");
+
+        stopClick();
+      }
+
+      return newMX;
+    },
+    onDragEnd: () => {
+      selectRange.current = [null, null];
+      inputChange.current = false;
+      changeElementsHoverState(inputs.current, selectRange.current, "none");
+    },
+  });
+
+  const valueChangeHandler = useCallback(
+    (index: number) => {
+      return (e: ChangeEvent<HTMLInputElement>) => {
+        const inputValue = e.target.value;
+        if (inputValue === "" || !isNaN(Number(inputValue))) {
+          const newValue = value.map((v, i) => {
+            if (inputValue === "") {
+              return "" as unknown as number;
+            }
+            return i === index ? Number(inputValue) : v;
+          });
+          onValuesChange?.(newValue);
+        }
+      };
+    },
+    [onValuesChange, value],
+  );
+
+  if (value?.length === 0) {
+    throw new Error("`value` cannot be an empty array");
+  }
+
+  return (
+    <div
+      ref={ref}
+      {...bind()}
+      className={cn("gap-xs flex cursor-crosshair touch-none flex-col select-none")}
+    >
+      {value.map((item, index) => (
+        <InputRoot
+          key={index}
+          ref={(r) => {
+            inputs.current.set(index.toString(), r);
+            return () => {
+              inputs.current.delete(index.toString());
+            };
+          }}
+          size={size}
+          value={item}
+          onClick={() => {
+            inputs.current.get(index.toString())?.focus();
+          }}
+          onChange={valueChangeHandler(index)}
+          data-hover="none"
+          className={cn([
+            "group/number-input",
+            "cursor-crosshair",
+            "data-[hover=down]:bg-bg-tertiary",
+            "data-[hover=x]:bg-bg-tertiary",
+            "data-[hover=y]:bg-bg-tertiary",
+            "data-[hover=down]:cursor-move",
+            "data-[hover=x]:cursor-col-resize",
+            "data-[hover=y]:cursor-ns-resize",
+          ])}
+          inputClassName={cn([
+            "cursor-crosshair",
+            "group-data-[hover=down]/number-input:cursor-move",
+            "group-data-[hover=x]/number-input:cursor-col-resize",
+            "group-data-[hover=y]/number-input:cursor-ns-resize",
+          ])}
+        >
+          <InputSlot
+            className={cn(
+              "cursor-crosshair",
+              "group-data-[hover=down]/number-input:cursor-move",
+              "group-data-[hover=x]/number-input:cursor-col-resize",
+              "group-data-[hover=y]/number-input:cursor-ns-resize",
+            )}
+          >
+            {prefix?.[index]}
+          </InputSlot>
+        </InputRoot>
+      ))}
+    </div>
+  );
+});
+
+export { InputNumbers };
+export type { InputNumbersProps };

package/src/ui/input.tsx

@@ -0,0 +1,141 @@
+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 "../utils";
+
+const inputRootVariants = cva(
+  [
+    "px-1.5",
+    "flex",
+    "gap-md",
+    "items-center",
+    "rounded-uk-sm",
+    "overflow-hidden",
+    "bg-bg-secondary",
+  ],
+  {
+    variants: {
+      state: {
+        default: ["hover:bg-bg-tertiary", "has-[input:focus]:bg-bg-quaternary"],
+        disabled: ["disabled:cursor-not-allowed", "bg-bg-tertiary", "text-text-tertiary"],
+        error: ["hover:bg-danger-primary/10", "bg-danger-primary/20"],
+      },
+      size: {
+        sm: ["h-5.5", "text-uk-sm", "[&_.input-slot>svg:not([class*='size-'])]:size-lg"],
+        base: ["h-7", "text-uk-md", "[&_.input-slot>svg:not([class*='size-'])]:size-[14px]"],
+        lg: ["h-8", "text-uk-lg", "[&_.input-slot>svg:not([class*='size-'])]:size-xl"],
+      },
+    },
+    defaultVariants: {
+      state: "default",
+      size: "base",
+    },
+  },
+);
+
+interface InputRootProps
+  extends Omit<ComponentProps<"input">, "size">,
+    VariantProps<typeof inputRootVariants> {
+  state?: "default" | "error";
+  side?: "left" | "right";
+  asChild?: boolean;
+  inputClassName?: string;
+}
+
+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",
+            "[input[type=number]]:font-number-input",
+            "[&::-webkit-inner-spin-button]:appearance-none",
+            "[&::-webkit-outer-spin-button]:appearance-none",
+          ],
+          inputClassName,
+        )}
+      />
+      {children}
+    </div>
+  );
+});
+
+interface InputSlotProps extends ComponentProps<"div"> {
+  side?: "left" | "right";
+}
+
+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>
+  );
+});
+
+export { InputRoot, InputSlot };
+export type { InputRootProps, InputSlotProps };

package/src/ui/layout.tsx

@@ -0,0 +1,41 @@
+import { Slot } from "@radix-ui/react-slot";
+import { PropsWithChildren } from "react";
+
+import { cn } from "../utils";
+
+interface Props extends PropsWithChildren {
+  align?: "start" | "center" | "end";
+  asChild?: boolean;
+  className?: string;
+  orientation?: "horizontal" | "vertical";
+}
+
+function Layout({
+  asChild,
+  className,
+  children,
+  align = "start",
+  orientation = "horizontal",
+}: Props) {
+  const Com = asChild ? Slot : "div";
+
+  return (
+    <Com
+      className={cn(
+        {
+          "gap-xs flex flex-col": orientation === "horizontal",
+          "gap-xs grid grid-cols-[1fr_2fr] text-center": orientation === "vertical",
+          "items-baseline": align === "start",
+          "items-center": align === "center",
+          "items-end": align === "end",
+        },
+        className,
+      )}
+    >
+      {children}
+    </Com>
+  );
+}
+
+export { Layout };
+export type { Props as LayoutProps };

package/src/ui/modal.tsx

@@ -0,0 +1,198 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva } from "class-variance-authority";
+import { XIcon } from "lucide-react";
+import { type ComponentProps } from "react";
+
+import { cn } from "../utils";
+
+type ModalProps = ComponentProps<typeof DialogPrimitive.Root>;
+
+function Modal({ ...props }: ModalProps) {
+  return <DialogPrimitive.Root data-slot="modal" {...props} />;
+}
+
+type ModalTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>;
+
+function ModalTrigger({ ...props }: ModalTriggerProps) {
+  return <DialogPrimitive.Trigger data-slot="modal-trigger" {...props} />;
+}
+
+type ModalPortalProps = ComponentProps<typeof DialogPrimitive.Portal>;
+
+function ModalPortal({ ...props }: ModalPortalProps) {
+  return <DialogPrimitive.Portal data-slot="modal-portal" {...props} />;
+}
+
+type ModalCloseProps = ComponentProps<typeof DialogPrimitive.Close>;
+
+function ModalClose({ ...props }: ModalCloseProps) {
+  return <DialogPrimitive.Close data-slot="modal-close" {...props} />;
+}
+
+const modalOverlayVariants = cva([
+  "fixed",
+  "inset-0",
+  "z-100",
+  "bg-bg-mask",
+  "transition-all",
+  "duration-200",
+]);
+
+type ModalOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay>;
+
+function ModalOverlay({ className, ...props }: ModalOverlayProps) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="modal-overlay"
+      className={cn(modalOverlayVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+const modalContentVariants = cva([
+  "pb-xl",
+  "px-xl",
+  "bg-bg-primary",
+  "rounded-uk-xl",
+  "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+  "min-w-[280px]",
+  "duration-200",
+  "transition-all",
+  "fixed",
+  "translate-x-[-50%]",
+  "translate-y-[-50%]",
+  "z-101",
+  "left-1/2",
+  "top-1/2",
+  "data-[state=open]:animate-in",
+  "data-[state=closed]:animate-out",
+  "data-[state=closed]:fade-out-0",
+  "data-[state=open]:fade-in-0",
+  "data-[state=closed]:zoom-out-95",
+  "data-[state=open]:zoom-in-95",
+  "liquid:liquid-bg",
+]);
+
+interface ModalContentProps extends ComponentProps<typeof DialogPrimitive.Content> {
+  showCloseButton?: boolean;
+}
+
+function ModalContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: ModalContentProps) {
+  return (
+    <ModalPortal>
+      <ModalOverlay />
+      <DialogPrimitive.Content
+        data-slot="modal-content"
+        className={cn(modalContentVariants(), className)}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="modal-close"
+            className={cn(
+              "absolute",
+              "right-[16px]",
+              "top-[16px]",
+              "w-[16px]",
+              "h-[16px]",
+              "rounded-uk-sm",
+              "cursor-pointer",
+              "hover:text-icon-highlight",
+              "text-icon-primary",
+              "flex",
+              "items-center",
+              "justify-center",
+            )}
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </ModalPortal>
+  );
+}
+
+type ModalHeaderProps = ComponentProps<"div">;
+
+function ModalHeader({ className, ...props }: ModalHeaderProps) {
+  return <div data-slot="modal-header" className={cn("flex flex-col", className)} {...props} />;
+}
+
+type ModalTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
+
+function ModalTitle({ className, ...props }: ModalTitleProps) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="modal-title"
+      className={cn(
+        "text-text-highlight",
+        "text-uk-lg",
+        "leading-uk-lg",
+        "font-medium",
+        "py-lg",
+        "px-xl",
+        "text-center",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type ModalDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
+
+function ModalDescription({ className, ...props }: ModalDescriptionProps) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="modal-description"
+      className={cn("text-text-primary", "text-uk-md", "leading-uk-md", "text-start", className)}
+      {...props}
+    />
+  );
+}
+
+type ModalFooterProps = ComponentProps<"div">;
+
+function ModalFooter({ className, ...props }: ModalFooterProps) {
+  return (
+    <div
+      data-slot="modal-footer"
+      className={cn("w-full", "flex", "justify-end", "gap-xs", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Modal,
+  ModalTrigger,
+  ModalPortal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalTitle,
+  ModalDescription,
+  ModalFooter,
+  ModalClose,
+};
+
+export type {
+  ModalProps,
+  ModalTriggerProps,
+  ModalPortalProps,
+  ModalOverlayProps,
+  ModalContentProps,
+  ModalHeaderProps,
+  ModalTitleProps,
+  ModalDescriptionProps,
+  ModalFooterProps,
+  ModalCloseProps,
+};

package/src/ui/popover.tsx

@@ -0,0 +1,59 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { ComponentProps } from "react";
+
+import { cn } from "../utils";
+
+function Popover({ ...props }: ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-bg-primary",
+          "rounded-uk-lg",
+          "p-xl",
+          "w-[320px]",
+          "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+          "data-[state=open]:animate-in",
+          "data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0",
+          "data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95",
+          "data-[state=open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-2",
+          "data-[side=left]:slide-in-from-right-2",
+          "data-[side=right]:slide-in-from-left-2",
+          "data-[side=top]:slide-in-from-bottom-2",
+          "z-50",
+          "origin-(--radix-popover-content-transform-origin)",
+          "border-none",
+          "outline-hidden",
+          "liquid:liquid-bg",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({ ...props }: ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/src/ui/radio-group.tsx

@@ -0,0 +1,56 @@
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { type ComponentProps } from "react";
+
+import { cn } from "../utils";
+
+function RadioGroup({ className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function RadioGroupItem({ className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "group",
+        "w-[16px]",
+        "h-[16px]",
+        "rounded-full",
+        "border-[1.5px]",
+        "border-solid",
+        "border-bg-tertiary",
+        "data-[state=checked]:border-brand-primary",
+        "disabled:cursor-not-allowed",
+        "disabled:bg-bg-secondary",
+        "disabled:data-[state=checked]:border-bg-tertiary",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <div
+          className={cn(
+            "absolute",
+            "inset-0",
+            "m-auto",
+            "size-[8px]",
+            "rounded-full",
+            "bg-brand-primary",
+            "group-disabled:bg-bg-tertiary",
+          )}
+        />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };