@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/ui/button.tsx

@@ -0,0 +1,143 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { type ComponentProps, forwardRef } from "react";
+
+import { cn } from "../hooks";
+
+export const buttonVariants = cva(
+  [
+    "inline-flex",
+    "cursor-pointer",
+    "items-center",
+    "justify-center",
+    "shrink-0",
+    "whitespace-nowrap",
+    "transition-all",
+    "[&_svg]:shrink-0 ",
+    "[&_svg]:pointer-events-none",
+    "outline-none",
+    "disabled:pointer-events-none",
+    "disabled:bg-bg-tertiary",
+    "disabled:text-text-tertiary",
+    "focus-visible:border-ring",
+    "focus-visible:ring-ring/50",
+    "focus-visible:ring-[3px]",
+    "focus-visible:bg-brand-tertiary",
+    "aria-invalid:ring-destructive/20",
+    "aria-invalid:border-destructive",
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-brand-primary",
+          "text-text-withbg",
+          "hover:bg-brand-hover",
+          "active:bg-brand-pressed",
+        ],
+        secondary: [
+          "bg-alt-primary",
+          "text-text-highlight",
+          "hover:bg-alt-hover",
+          "active:bg-alt-pressed",
+        ],
+        destructive: [
+          "bg-danger-primary",
+          "text-text-withbg",
+          "hover:bg-danger-secondary",
+          "active:bg-danger-tertiary",
+        ],
+        ghost: [
+          "text-text-primary",
+          "hover:text-text-highlight",
+          "hover:bg-alt-primary",
+          "active:bg-bg-secondary",
+          // "active:text-brand-primary",
+          // todo: add state sensitivity (can do via toggle button)
+          // "[value]:text-brand-primary",
+        ],
+        link: ["text-text-primary", "underline-offset-4", "hover:underline"],
+      },
+      size: {
+        sm: [
+          "rounded-uk-sm",
+          "text-uk-sm",
+          "py-sm",
+          "gap-xxs",
+          "px-sm",
+          "leading-4",
+          "[&_svg:not([class*='size-'])]:size-3",
+        ],
+        md: [
+          "rounded-uk-md",
+          "text-uk-md",
+          "py-sm",
+          "gap-xs",
+          "px-lg",
+          "leading-5",
+          "[&_svg:not([class*='size-'])]:size-4",
+        ],
+        lg: [
+          "rounded-uk-lg",
+          "text-uk-lg",
+          "py-sm",
+          "gap-xs",
+          "px-xl",
+          "leading-6",
+          "[&_svg:not([class*='size-'])]:size-5",
+        ],
+      },
+      icon: { false: null, true: null },
+      value: {
+        false: null,
+        true: ["text-brand-primary", "[&_svg]:text-brand-primary"],
+      },
+    },
+    compoundVariants: [
+      { size: "sm", icon: true, class: ["px-xs", "py-xs", " size-6"] },
+      { size: "md", icon: true, class: ["px-sm", "py-sm", "size-8"] },
+      { size: "lg", icon: true, class: ["px-md", "py-md", " size-9"] },
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      icon: false,
+      value: false,
+    },
+  },
+);
+
+interface ButtonProps
+  extends Omit<ComponentProps<"button">, "value">,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  value?: boolean;
+}
+
+/**
+ * Button component with variant and size styling.
+ * Wraps a native `button` or a child element when `asChild` is true.
+ *
+ * @param variant - Visual style variant (e.g. "primary", "secondary", "destructive", "ghost", "link")
+ * @param size - Control size ("sm" | "md" | "lg")
+ * @param icon - If true, adjusts paddings to present as an icon button
+ * @param asChild - When true, renders the child element instead of a button using Slot
+ */
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { className, variant, size, icon, value, asChild = false, ...props },
+  ref,
+) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, icon, value, className }))}
+      {...props}
+    />
+  );
+});
+
+export { Button };
+export type { ButtonProps };

package/src/ui/card.tsx

@@ -0,0 +1,146 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { type ComponentProps } from "react";
+
+import { cn } from "../hooks";
+
+/**
+ * Variants for the card component.
+ */
+const cardVariants = cva(
+  [
+    "flex",
+    "flex-col",
+    "rounded-uk-lg",
+    "bg-bg-primary",
+    "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+    "liquid:liquid-bg",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "p-sm",
+        md: "p-md",
+        lg: "p-lg",
+        xl: "p-xl",
+      },
+    },
+    defaultVariants: {
+      size: "lg",
+    },
+  },
+);
+
+export interface CardProps extends ComponentProps<"div">, VariantProps<typeof cardVariants> {}
+
+/**
+ * Container card with default padding, radius and shadow.
+ */
+function Card({ className, size, ...props }: CardProps) {
+  return <div data-slot="card" className={cn(cardVariants({ size, className }))} {...props} />;
+}
+
+/**
+ * Variants for the card header component.
+ */
+const cardHeaderVariants = cva(["flex", "flex-row", "items-center", "justify-between"], {
+  variants: {
+    size: {
+      sm: "gap-sm",
+      md: "gap-md",
+      lg: "gap-lg",
+      xl: "gap-xl",
+    },
+  },
+  defaultVariants: {
+    size: "lg",
+  },
+});
+
+export interface CardHeaderProps
+  extends ComponentProps<"div">,
+    VariantProps<typeof cardHeaderVariants> {}
+
+/**
+ * Horizontal header row for card.
+ */
+function CardHeader({ className, size, ...props }: CardHeaderProps) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(cardHeaderVariants({ size, className }))}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Title text styling within card.
+ */
+function CardTitle({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "text-text-highlight",
+        "text-uk-md",
+        "leading-uk-md",
+        "font-medium",
+        "-mt-2",
+        "vertical-align-middle",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Secondary description text.
+ */
+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)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Right-aligned action area.
+ */
+function CardAction({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "text-text-secondary",
+        "text-uk-sm",
+        "leading-uk-sm",
+        "-mt-2",
+        "-mr-3",
+        "font-medium",
+        "vertical-align-middle",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Main content area.
+ */
+function CardContent({ className, ...props }: ComponentProps<"div">) {
+  return <div data-slot="card-content" className={cn("", className)} {...props} />;
+}
+
+/**
+ * Footer row for actions or meta.
+ */
+function CardFooter({ className, ...props }: ComponentProps<"div">) {
+  return <div data-slot="card-footer" className={cn("flex items-center", className)} {...props} />;
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/src/ui/checkbox.tsx

@@ -0,0 +1,78 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import { type ComponentProps } from "react";
+
+import { cn } from "../hooks";
+
+interface CheckboxProps extends Omit<ComponentProps<typeof CheckboxPrimitive.Root>, "className"> {
+  checkall?: boolean;
+  className?: string;
+}
+
+/**
+ * Checkbox with optional "checkall" appearance.
+ * When `checkall` is true, renders a filled square state.
+ */
+const Checkbox = ({ className, checkall, ...props }: CheckboxProps) => (
+  <CheckboxPrimitive.Root
+    data-slot="checkbox"
+    className={cn(
+      "group",
+      "relative",
+      "w-[16px]",
+      "h-[16px]",
+      "rounded-[3px]",
+      "border-[1.5px]",
+      "border-solid",
+      "border-bg-tertiary",
+      "data-[state=checked]:bg-brand-primary",
+      "data-[state=checked]:border-none",
+      "disabled:cursor-not-allowed",
+      "disabled:bg-bg-secondary",
+      "disabled:data-[state=checked]:bg-bg-secondary",
+      "disabled:data-[state=checked]:border-[1.5px]",
+      "disabled:data-[state=checked]:border-solid",
+      "disabled:data-[state=checked]:border-bg-tertiary",
+      checkall && [
+        "data-[state=checked]:bg-bg-transparent",
+        "data-[state=checked]:border-[1.5px]",
+        "data-[state=checked]:border-solid",
+        "data-[state=checked]:border-bg-tertiary",
+      ],
+      className,
+    )}
+    {...props}
+  >
+    {checkall ? (
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className={cn(
+          "absolute",
+          "inset-0",
+          "m-auto",
+          "w-[8px]",
+          "h-[8px]",
+          "bg-brand-primary",
+          "group-disabled:bg-bg-tertiary",
+        )}
+      ></CheckboxPrimitive.Indicator>
+    ) : (
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className={cn(
+          "flex",
+          "items-center",
+          "justify-center",
+          "text-current",
+          "transition-none",
+          "text-icon-withbg",
+          "group-disabled:text-bg-tertiary",
+        )}
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    )}
+  </CheckboxPrimitive.Root>
+);
+
+export { Checkbox };

package/src/ui/collapsible.tsx

@@ -0,0 +1,43 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import type { ComponentProps } from "react";
+
+import { cn } from "../hooks";
+
+/**
+ * Root container for collapsible content.
+ */
+const Collapsible = ({ ...props }: ComponentProps<typeof CollapsiblePrimitive.Root>) => (
+  <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+);
+
+/**
+ * Trigger element that toggles the collapsible state.
+ */
+const CollapsibleTrigger = ({
+  ...props
+}: ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) => (
+  <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />
+);
+
+/**
+ * Content area that animates open/close.
+ */
+const CollapsibleContent = ({
+  className,
+  ...props
+}: ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) => (
+  <CollapsiblePrimitive.CollapsibleContent
+    data-slot="collapsible-content"
+    className={cn(
+      [
+        "overflow-hidden",
+        "data-[state=open]:animate-collapsible-down",
+        "data-[state=closed]:animate-collapsible-up",
+      ],
+      className,
+    )}
+    {...props}
+  />
+);
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/ui/drag-selectable/DragSelectProvider.tsx

@@ -0,0 +1,178 @@
+import React, {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+type SelectionMode = "replace" | "add" | "toggle";
+
+interface DragSelectContextType {
+  selectedItems: Set<string>;
+  isDragging: boolean;
+  registerItem: (id: string, index: number) => void;
+  unregisterItem: (id: string) => void;
+  startDrag: (startId: string, mode?: SelectionMode) => void;
+  updateSelection: (currentId: string) => void;
+  endDrag: () => void;
+  clearSelection: () => void;
+  isSelected: (id: string) => boolean;
+}
+
+const DragSelectContext = createContext<DragSelectContextType | undefined>(undefined);
+
+interface DragSelectProviderProps {
+  children: ReactNode;
+}
+
+export const DragSelectProvider = ({ children }: DragSelectProviderProps) => {
+  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartId = useRef<string | null>(null);
+  const dragMode = useRef<SelectionMode>("replace");
+  const dragStartSelection = useRef<Set<string>>(new Set());
+  const registeredItems = useRef<Map<string, number>>(new Map());
+
+  const registerItem = useCallback((id: string, index: number) => {
+    registeredItems.current.set(id, index);
+  }, []);
+
+  const unregisterItem = useCallback((id: string) => {
+    registeredItems.current.delete(id);
+  }, []);
+
+  const startDrag = useCallback(
+    (startId: string, mode: SelectionMode = "replace") => {
+      setIsDragging(true);
+      dragStartId.current = startId;
+      dragMode.current = mode;
+      dragStartSelection.current = new Set(selectedItems);
+
+      if (mode === "replace") {
+        setSelectedItems(new Set([startId]));
+      } else if (mode === "add") {
+        setSelectedItems((prev) => new Set(Array.from(prev).concat([startId])));
+      } else if (mode === "toggle") {
+        setSelectedItems((prev) => {
+          const newSelection = new Set(prev);
+          if (newSelection.has(startId)) {
+            newSelection.delete(startId);
+          } else {
+            newSelection.add(startId);
+          }
+          return newSelection;
+        });
+      }
+    },
+    [selectedItems],
+  );
+
+  const updateSelection = useCallback(
+    (currentId: string) => {
+      if (!isDragging || !dragStartId.current) return;
+
+      const startIndex = registeredItems.current.get(dragStartId.current);
+      const currentIndex = registeredItems.current.get(currentId);
+
+      if (startIndex === undefined || currentIndex === undefined) return;
+
+      const minIndex = Math.min(startIndex, currentIndex);
+      const maxIndex = Math.max(startIndex, currentIndex);
+
+      const dragSelection = new Set<string>();
+      Array.from(registeredItems.current.entries()).forEach(([itemId, itemIndex]) => {
+        if (itemIndex >= minIndex && itemIndex <= maxIndex) {
+          dragSelection.add(itemId);
+        }
+      });
+
+      if (dragMode.current === "replace") {
+        setSelectedItems(dragSelection);
+      } else if (dragMode.current === "add") {
+        setSelectedItems(
+          () => new Set(Array.from(dragStartSelection.current).concat(Array.from(dragSelection))),
+        );
+      } else if (dragMode.current === "toggle") {
+        setSelectedItems(() => {
+          const newSelection = new Set(dragStartSelection.current);
+          Array.from(dragSelection).forEach((itemId) => {
+            if (newSelection.has(itemId)) {
+              newSelection.delete(itemId);
+            } else {
+              newSelection.add(itemId);
+            }
+          });
+          return newSelection;
+        });
+      }
+    },
+    [isDragging],
+  );
+
+  const endDrag = useCallback(() => {
+    setIsDragging(false);
+    dragStartId.current = null;
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    setSelectedItems(new Set());
+  }, []);
+
+  const isSelected = useCallback(
+    (id: string) => {
+      return selectedItems.has(id);
+    },
+    [selectedItems],
+  );
+
+  useEffect(() => {
+    const handleMouseUp = () => {
+      if (isDragging) {
+        endDrag();
+      }
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        clearSelection();
+      }
+    };
+
+    document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isDragging, endDrag, clearSelection]);
+
+  return (
+    <DragSelectContext.Provider
+      value={{
+        selectedItems,
+        isDragging,
+        registerItem,
+        unregisterItem,
+        startDrag,
+        updateSelection,
+        endDrag,
+        clearSelection,
+        isSelected,
+      }}
+    >
+      {children}
+    </DragSelectContext.Provider>
+  );
+};
+
+export const useDragSelectContext = () => {
+  const context = useContext(DragSelectContext);
+  if (context === undefined) {
+    throw new Error("useDragSelectContext must be used within a DragSelectProvider");
+  }
+  return context;
+};

package/src/ui/drag-selectable/createSelectable.tsx

@@ -0,0 +1,43 @@
+import React, { ComponentType, useEffect } from "react";
+
+import { useDragSelectContext } from "./DragSelectProvider";
+
+interface SelectableProps {
+  id: string;
+  index: number;
+  isSelected?: boolean;
+  onMouseDown?: (e: React.MouseEvent) => void;
+  onMouseEnter?: () => void;
+}
+
+export function createSelectable<T extends object>(Component: ComponentType<T & SelectableProps>) {
+  return function SelectableComponent(props: T & { id: string; index: number }) {
+    const { registerItem, unregisterItem, startDrag, updateSelection, isSelected } =
+      useDragSelectContext();
+
+    const { id, index } = props;
+
+    useEffect(() => {
+      registerItem(id, index);
+      return () => unregisterItem(id);
+    }, [id, index, registerItem, unregisterItem]);
+
+    const handleMouseDown = (e: React.MouseEvent) => {
+      const mode = e.ctrlKey || e.metaKey ? "replace" : "toggle";
+      startDrag(id, mode);
+    };
+
+    const handleMouseEnter = () => {
+      updateSelection(id);
+    };
+
+    return (
+      <Component
+        {...props}
+        isSelected={isSelected(id)}
+        onMouseDown={handleMouseDown}
+        onMouseEnter={handleMouseEnter}
+      />
+    );
+  };
+}

package/src/ui/drag-selectable/index.ts

@@ -0,0 +1,2 @@
+export * from "./createSelectable";
+export * from "./DragSelectProvider";