@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/ui/slider.tsx

@@ -0,0 +1,204 @@
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { ComponentProps, ComponentRef, forwardRef, useEffect, useMemo, useState } from "react";
+
+import { cn } from "../hooks";
+
+interface SliderProps extends ComponentProps<typeof SliderPrimitive.Root> {
+  showStep?: boolean;
+}
+
+/**
+ * Slider with optional step markers and multi-thumb support.
+ */
+const Slider = forwardRef<ComponentRef<typeof SliderPrimitive.Root>, SliderProps>(
+  function SliderRoot(
+    {
+      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],
+    );
+
+    useEffect(() => {
+      if (value) {
+        setCurrentValue(value);
+      }
+    }, [value]);
+
+    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[];
+}
+
+/**
+ * Visual step indicators drawn on the track.
+ */
+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,45 @@
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { type ComponentProps } from "react";
+
+import { cn } from "../hooks";
+
+/**
+ * Toggle switch control.
+ * todo: need to add sizing - Ge
+ */
+function Switch({ className, ...props }: ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        className,
+        "group",
+        "w-[32px]",
+        "h-[16px]",
+        "rounded-[24px]",
+        "bg-bg-tertiary",
+        "aria-checked:bg-brand-primary",
+        "disabled:bg-bg-secondary",
+        "disabled:cursor-not-allowed",
+      )}
+      {...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 };

package/src/ui/table.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+
+import { cn } from "../hooks";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      <table
+        data-slot="table"
+        className={cn("text-uk-md w-full caption-bottom rounded-none!", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("hover:bg-bg-tertiary [&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-bg-secondary border-bg-secondary hover:bg-bg-tertiary border-t font-medium [&>tr]:last:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-bg-secondary data-[state=selected]:bg-bg-secondary border-bg-secondary border-b transition-colors",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "bg-bg-secondary! px-lg! text-text-primary! text-uk-md h-[40px] py-0! text-left align-middle font-medium! whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "px-lg! text-text-primary! text-uk-md h-[40px] py-0! align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-text-tertiary text-uk-md mt-4", className)}
+      {...props}
+    />
+  );
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/src/ui/tabs.tsx

@@ -0,0 +1,192 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cva } from "class-variance-authority";
+import { type ComponentProps, createContext, useContext } from "react";
+
+import { TabsCursorProvider, useTabsCursor } from "../highlight-cursor/tabs-cursor-context";
+import { cn, createClientOnlyComponent } from "../hooks";
+
+interface TabsContextType {
+  size?: "sm" | "base" | "lg";
+}
+
+const TabsContext = createContext<TabsContextType | undefined>(undefined);
+
+const useTabsContext = () => {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("Tabs components must be used within a Tabs component");
+  }
+  return context;
+};
+
+interface TabsProps extends ComponentProps<typeof TabsPrimitive.Root> {
+  size?: "sm" | "base" | "lg";
+}
+
+/**
+ * Tabs root that provides size context to child tabs components.
+ *
+ * @param props -
+ * @param className -
+ * @param size - Control size ("sm" | "base" | "lg"), defaults to "base" */
+function TabsRoot({ className, size = "base", ...props }: TabsProps) {
+  return (
+    <TabsContext.Provider value={{ size }}>
+      <TabsPrimitive.Root
+        data-slot="tabs"
+        className={cn("flex w-full flex-col", className)}
+        {...props}
+      />
+    </TabsContext.Provider>
+  );
+}
+
+function TabsFallback({ className, size = "base", ...props }: TabsProps & ComponentProps<"div">) {
+  return (
+    <TabsContext.Provider value={{ size }}>
+      <div data-slot="tabs" className={cn("flex w-full flex-col", className)} {...props} />
+    </TabsContext.Provider>
+  );
+}
+
+const Tabs = createClientOnlyComponent(TabsRoot, TabsFallback);
+
+const tabsListVariants = cva(["inline-flex", "items-center", "justify-center"], {
+  variants: {
+    size: {
+      sm: "gap-xs",
+      base: "gap-sm",
+      lg: "gap-md",
+    },
+  },
+  defaultVariants: {
+    size: "base",
+  },
+});
+
+type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
+
+/**
+ * Container for tab triggers. Emits cursor interactions for visual effects.
+ */
+function TabsListRoot({ className, ...props }: TabsListProps) {
+  const { setCursorTarget } = useTabsCursor();
+  const { size } = useTabsContext();
+  return (
+    <TabsCursorProvider>
+      <TabsPrimitive.List
+        onMouseLeave={() => setCursorTarget(null)}
+        data-slot="tabs-list"
+        className={cn(tabsListVariants({ size }), "justify-start", className)}
+        {...props}
+      />
+    </TabsCursorProvider>
+  );
+}
+
+function TabsListFallback({ className, ...props }: TabsListProps & ComponentProps<"div">) {
+  const { size } = useTabsContext();
+  return (
+    <TabsCursorProvider>
+      <div
+        data-slot="tabs-list"
+        className={cn(tabsListVariants({ size }), "justify-start", className)}
+        {...props}
+      />
+    </TabsCursorProvider>
+  );
+}
+
+const TabsList = createClientOnlyComponent(TabsListRoot, TabsListFallback);
+
+const tabsTriggerVariants = cva(
+  [
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "font-normal",
+    "whitespace-nowrap",
+    "transition-all",
+    "disabled:pointer-events-none",
+    "disabled:bg-bg-tertiary",
+    "[&_svg]:pointer-events-none",
+    "[&_svg:not([class*='size-'])]:size-xl",
+    "shrink-0",
+    "[&_svg]:shrink-0",
+    "outline-none",
+    "text-text-primary",
+    "data-[state=active]:bg-bg-secondary",
+    "data-[state=active]:font-medium",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-uk-sm leading-uk-sm px-md py-xs rounded-uk-sm",
+        base: "text-uk-md leading-uk-md px-lg py-sm rounded-uk-md",
+        lg: "text-uk-lg leading-uk-lg px-xl py-sm rounded-uk-md",
+      },
+    },
+    defaultVariants: {
+      size: "base",
+    },
+  },
+);
+
+type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;
+
+/**
+ * Single tab trigger button.
+ */
+function TabsTriggerRoot({ className, ...props }: TabsTriggerProps) {
+  const { setCursorTarget } = useTabsCursor();
+  const { size } = useTabsContext();
+  return (
+    <TabsPrimitive.Trigger
+      onMouseEnter={(e) => setCursorTarget(e.currentTarget)}
+      data-slot="tabs-trigger"
+      className={cn(tabsTriggerVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function TabsTriggerFallback({ className, ...props }: TabsTriggerProps & ComponentProps<"button">) {
+  const { setCursorTarget } = useTabsCursor();
+  const { size } = useTabsContext();
+  return (
+    <button
+      onMouseEnter={(e) => setCursorTarget(e.currentTarget)}
+      data-slot="tabs-trigger"
+      className={cn(tabsTriggerVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+const TabsTrigger = createClientOnlyComponent(TabsTriggerRoot, TabsTriggerFallback);
+
+type TabsContentProps = ComponentProps<typeof TabsPrimitive.Content>;
+
+/**
+ * Content area for a tab panel.
+ */
+function TabsContentRoot({ className, ...props }: TabsContentProps) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+function TabsContentFallback({ className, ...props }: TabsContentProps & ComponentProps<"div">) {
+  return (
+    <div data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />
+  );
+}
+
+const TabsContent = createClientOnlyComponent(TabsContentRoot, TabsContentFallback);
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps };

package/src/ui/textarea.tsx

@@ -0,0 +1,55 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { type ComponentProps } from "react";
+
+import { cn } from "../hooks";
+
+const textareaVariants = cva(
+  [
+    "bg-bg-secondary",
+    "disabled:bg-bg-tertiary",
+    "disabled:text-text-tertiary",
+    "disabled:cursor-not-allowed",
+    "outline-transparent",
+    "placehoder:text-text-secondary/20",
+    "min-h-16",
+    "flex",
+    "w-full",
+  ],
+  {
+    variants: {
+      state: {
+        default: ["hover:bg-bg-tertiary", "focus:bg-bg-quaternary"],
+        error: ["hover:bg-danger-primary/10", "bg-danger-primary/20"],
+      },
+      size: {
+        sm: ["text-uk-sm", "leading-uk-sm", "rounded-uk-sm", "px-sm", "py-xs"],
+        base: ["text-uk-md", "leading-uk-md", "rounded-uk-md", "px-md", "py-sm"],
+        lg: ["text-uk-lg", "leading-uk-lg", "rounded-uk-md", "px-lg", "py-sm"],
+      },
+    },
+    defaultVariants: {
+      state: "default",
+      size: "base",
+    },
+  },
+);
+
+interface TextareaProps extends ComponentProps<"textarea">, VariantProps<typeof textareaVariants> {
+  state?: "default" | "error";
+  size?: "sm" | "base" | "lg";
+}
+
+/**
+ * Multiline text input with size and error variants.
+ */
+function Textarea({ className, state, size, ...props }: TextareaProps) {
+  return (
+    <textarea
+      className={cn(textareaVariants({ className, state, size }))}
+      data-slot="textarea"
+      {...props}
+    />
+  );
+}
+
+export { Textarea };