@vuer-ai/vuer-uikit 0.0.11 → 0.0.13

package/src/ui/select.tsx

@@ -0,0 +1,292 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../utils";
+
+function Select({ ...props }: ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({ className, ...props }: ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("space-y-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectValue({ ...props }: ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+const selectTriggerVariants = cva(
+  [
+    "flex",
+    "items-center",
+    "justify-between",
+    "gap-2",
+    "rounded-uk-sm",
+    "bg-bg-secondary",
+    "whitespace-nowrap",
+    "shadow-xs",
+    "transition-[color,box-shadow]",
+    "outline-none",
+    "*:data-[slot=select-value]:line-clamp-1",
+    "*:data-[slot=select-value]:flex",
+    "*:data-[slot=select-value]:items-center",
+    "*:data-[slot=select-value]:gap-2",
+    "[&_svg]:shrink-0",
+    "[&_svg]:pointer-events-none",
+    "[&_svg:not([class*='text-'])]:text-muted-foreground",
+  ],
+  {
+    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: "px-sm py-xs text-uk-sm h-5.5 [&_svg:not([class*='size-'])]:size-lg",
+        base: "px-md py-sm text-uk-md h-7 [&_svg:not([class*='size-'])]:size-[14px]",
+        lg: "px-lg py-sm text-uk-lg h-8 [&_svg:not([class*='size-'])]:size-xl",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+      size: "base",
+    },
+  },
+);
+
+interface SelectTriggerProps
+  extends ComponentProps<typeof SelectPrimitive.Trigger>,
+    VariantProps<typeof selectTriggerVariants> {}
+
+function SelectTrigger({
+  className,
+  size,
+  children,
+  disabled,
+  state,
+  ...props
+}: SelectTriggerProps) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        selectTriggerVariants({ size, className, state: disabled ? "disabled" : state }),
+      )}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          [
+            "bg-bg-primary",
+            "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",
+            "relative",
+            "z-50",
+            "max-h-(--radix-select-content-available-height)",
+            "min-w-[8rem]",
+            "origin-(--radix-select-content-transform-origin)",
+            "overflow-x-hidden",
+            "overflow-y-auto",
+            "rounded-uk-md",
+            "shadow-md",
+            "shadow-[0_8px_20px_0_rgba(0,0,0,.80)]",
+            "liquid:liquid-bg",
+          ],
+          {
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1":
+              position === "popper",
+          },
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn("p-md", {
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1":
+              position === "popper",
+          })}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({ className, ...props }: ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-text-secondary text-uk-xs px-2 py-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+interface SelectItemProps extends Omit<ComponentProps<typeof SelectPrimitive.Item>, "prefix"> {
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+}
+
+function SelectItem({ className, children, prefix, suffix, disabled, ...props }: SelectItemProps) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      disabled={disabled}
+      className={cn(
+        [
+          "group/select-item",
+          "w-full",
+          "flex",
+          "gap-md",
+          "items-center",
+          "px-md",
+          "py-xs",
+          "relative",
+          "cursor-default",
+          "rounded-uk-xs",
+          "text-uk-xs",
+          "outline-hidden",
+          "select-none",
+          "focus:bg-bg-secondary",
+          "data-[state=checked]:bg-brand-primary",
+          "data-[disabled]:pointer-events-none",
+          "data-[disabled]:text-bg-quaternary",
+          "[&_svg]:pointer-events-none",
+          "[&_svg]:shrink-0",
+          "[&_svg:not([class*='size-'])]:size-4",
+          "[&_svg:not([class*='text-'])]:text-muted-foreground",
+          "*:[span]:last:flex",
+          "*:[span]:last:items-center",
+          "*:[span]:last:gap-2",
+        ],
+        className,
+      )}
+      {...props}
+    >
+      <p
+        data-disabled={disabled}
+        className={cn([
+          "text-text-tertiary",
+          "flex",
+          "shrink-0",
+          "gap-0.5",
+          "data-[disabled=true]:text-bg-quaternary",
+          "group-data-[state=checked]/select-item:text-text-withbg",
+        ])}
+      >
+        {prefix}
+      </p>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      <p
+        data-disabled={disabled}
+        className={cn(
+          "text-text-tertiary",
+          "ml-auto",
+          "flex",
+          "shrink-0",
+          "gap-0.5",
+          "data-[disabled=true]:text-bg-quaternary",
+          "group-data-[state=checked]/select-item:text-text-withbg",
+        )}
+      >
+        {suffix}
+      </p>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-line-primary my-lg pointer-events-none -mx-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/src/ui/sheet.tsx

@@ -0,0 +1,131 @@
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { ComponentProps } from "react";
+
+import { cn } from "../utils/cn";
+
+function Sheet({ ...props }: ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({ ...props }: ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({ ...props }: ComponentProps<typeof SheetPrimitive.Close>) {
+  return (
+    <SheetPrimitive.Close
+      data-slot="sheet-close"
+      className={cn("focus:ring-0 focus:outline-none")}
+      {...props}
+    />
+  );
+}
+
+function SheetPortal({ ...props }: ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({ className, ...props }: ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-bg-primary/50 fixed inset-0 z-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "liquid:liquid-bg bg-bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out p-xl fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-[340px]",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-[340px]",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="text-icon-primary hover:text-icon-highlight absolute top-4 right-4 disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("gap-md pb-xl flex flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("gap-lg pt-xl mt-auto flex flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-text-highlight text-uk-xl leading-uk-xl font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-text-secondary text-uk-md leading-uk-md", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

package/src/ui/slider.tsx

@@ -0,0 +1,189 @@
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { ComponentProps, ComponentRef, forwardRef, useMemo, useState } from "react";
+
+import { cn } from "../utils";
+
+interface SliderProps extends ComponentProps<typeof SliderPrimitive.Root> {
+  showStep?: boolean;
+}
+
+const Slider = forwardRef<ComponentRef<typeof SliderPrimitive.Root>, SliderProps>(function Slider(
+  {
+    className,
+    defaultValue,
+    value,
+    onValueChange,
+    showStep = false,
+    step = 1,
+    min = 0,
+    max = 100,
+    ...props
+  },
+  ref,
+) {
+  const [currentValue, setCurrentValue] = useState<number[]>(value ?? defaultValue ?? [0]);
+
+  const _values = useMemo(
+    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
+    [value, defaultValue, min, max],
+  );
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={(v) => {
+        onValueChange?.(v);
+        setCurrentValue(v);
+      }}
+      ref={ref}
+      min={min}
+      max={max}
+      step={step}
+      className={cn(
+        "relative",
+        "flex",
+        "w-full",
+        "touch-none",
+        "select-none",
+        "items-center",
+        "data-[orientation=vertical]:h-full",
+        "data-[orientation=vertical]:min-h-44",
+        "data-[orientation=vertical]:w-auto",
+        "data-[orientation=vertical]:flex-col",
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "peer/slider-track",
+          "bg-line-primary",
+          "relative",
+          "grow",
+          "overflow-hidden",
+          "rounded-full",
+          "data-[disabled]:bg-bg-secondary",
+          "data-[orientation=vertical]:w-0.5",
+          "data-[orientation=vertical]:h-full",
+          "data-[orientation=horizontal]:h-0.5",
+          "data-[orientation=horizontal]:w-full",
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-brand-primary",
+            "absolute",
+            "data-[disabled]:bg-bg-secondary",
+            "data-[orientation=vertical]:w-full",
+            "data-[orientation=horizontal]:h-full",
+          )}
+        />
+      </SliderPrimitive.Track>
+
+      {showStep && <SliderSteps currentValue={currentValue} max={max} min={min} step={step} />}
+
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className={cn(
+            "ring-brand-primary/50",
+            "bg-brand-primary",
+            "block",
+            "h-4",
+            "w-[0.6rem]",
+            "shrink-0",
+            "rounded-[3px]",
+            "transition-[color,box-shadow]",
+            "hover:ring-4",
+            "hover:cursor-ew-resize",
+            "focus-visible:ring-4",
+            "focus-visible:outline-hidden",
+            "data-[disabled]:bg-bg-tertiary",
+            "data-[disabled]:pointer-events-none",
+          )}
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+});
+
+interface SliderStepsProps {
+  min: number;
+  max: number;
+  step: number;
+  currentValue: number[];
+}
+
+function SliderSteps({ step, min, max, currentValue }: SliderStepsProps) {
+  const steps = useMemo(() => {
+    const value = max - min;
+    const stepCount = Math.ceil(value / step);
+    return Array.from({ length: stepCount + 1 }, (_, i) => {
+      return { position: Math.min((100 / value) * (i * step), 100), v: i * step + min };
+    });
+  }, [max, min, step]);
+
+  const [minRange, maxRange] = useMemo(() => {
+    if (currentValue.length > 1) {
+      return [Math.min(...currentValue), Math.max(...currentValue)];
+    } else {
+      return [0, ...currentValue];
+    }
+  }, [currentValue]);
+
+  return steps.map((step, i) => {
+    /*
+     * 9.6 is the width of the thumb in pixels
+     * 1 is the direction of the thumb (1 for right, -1 for left)
+     * */
+    const thumbInBoundsOffset = getThumbInBoundsOffset(9.6, step.position, 1);
+    return (
+      <span
+        key={i}
+        data-slot="slider-step"
+        style={{ left: `calc(${step.position}% + ${thumbInBoundsOffset}px)` }}
+        className={cn(
+          "absolute",
+          "top-1/2",
+          "translate-y-[-50%]",
+          "translate-x-[-50%]",
+          "bg-brand-primary",
+          "block",
+          "h-[5pt]",
+          "w-[1pt]",
+          "shrink-0",
+          "rounded-[1px]",
+          "peer-has-data-[disabled]/slider-track:bg-bg-tertiary",
+          { "bg-bg-tertiary": step.v < minRange || step.v > maxRange },
+        )}
+      />
+    );
+  });
+}
+
+/**
+ * Offsets the thumb centre point while sliding to ensure it remains
+ * within the bounds of the slider when reaching the edges
+ */
+function getThumbInBoundsOffset(width: number, left: number, direction: number) {
+  const halfWidth = width / 2;
+  const halfPercent = 50;
+  const offset = linearScale([0, halfPercent], [0, halfWidth]);
+  return (halfWidth - offset(left) * direction) * direction;
+}
+
+function linearScale(input: [number, number], output: [number, number]) {
+  return (value: number) => {
+    if (input[0] === input[1] || output[0] === output[1]) return output[0];
+    const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+    return output[0] + ratio * (value - input[0]);
+  };
+}
+
+export { Slider };
+export type { SliderProps };

package/src/ui/switch.tsx

@@ -0,0 +1,43 @@
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { type ComponentProps } from "react";
+
+import { cn } from "../utils";
+
+function Switch({ className, ...props }: ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "group",
+        "w-[32px]",
+        "h-[16px]",
+        "rounded-[24px]",
+        "bg-bg-tertiary",
+        "data-[state=checked]:bg-brand-primary",
+        "disabled:bg-bg-secondary",
+        "disabled:cursor-not-allowed",
+        "disabled:data-[state=checked]:bg-bg-secondary",
+        "disabled:data-[state=unchecked]:bg-bg-secondary",
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "block",
+          "size-[12px]",
+          "rounded-full",
+          "bg-icon-withbg",
+          "group-disabled:bg-bg-primary",
+          "transition-transform",
+          "duration-200",
+          "translate-x-[2px]",
+          "data-[state=checked]:translate-x-[18px]",
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };