@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/ui/navigation.tsx

@@ -0,0 +1,86 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { type ComponentProps, forwardRef } from "react";
+
+import { cn } from "../hooks";
+import { Button } from "./button";
+
+const navigationVariants = cva(["inline-flex", "items-center", "gap-lg", "bg-bg-primary"], {
+  variants: {
+    size: {
+      sm: [],
+      md: [],
+      lg: [],
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+const navigationTitleVariants = cva(["text-text-primary", "truncate"], {
+  variants: {
+    size: {
+      sm: ["text-uk-sm"],
+      md: ["text-uk-md"],
+      lg: ["text-uk-lg"],
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+const navigationButtonVariants = cva([
+  "text-icon-primary",
+  "disabled:text-icon-tertiary",
+  "disabled:bg-bg-transparent",
+]);
+
+interface NavigationProps
+  extends Omit<ComponentProps<"div">, "title">,
+    VariantProps<typeof navigationVariants> {
+  title: string;
+  onBack?: () => void;
+  onForward?: () => void;
+  canGoBack?: boolean;
+  canGoForward?: boolean;
+}
+
+const Navigation = forwardRef<HTMLDivElement, NavigationProps>(function Navigation(
+  { className, title, onBack, onForward, canGoBack = true, canGoForward = true, size, ...props },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cn(navigationVariants({ size, className }))} {...props}>
+      <Button
+        variant="ghost"
+        size={size}
+        icon
+        onClick={onBack}
+        disabled={!canGoBack}
+        className={cn(navigationButtonVariants())}
+        aria-label="Back"
+      >
+        <ChevronLeft />
+      </Button>
+
+      <Button
+        variant="ghost"
+        size={size}
+        icon
+        onClick={onForward}
+        disabled={!canGoForward}
+        className={cn(navigationButtonVariants())}
+        aria-label="Forward"
+      >
+        <ChevronRight />
+      </Button>
+
+      <span className={cn(navigationTitleVariants({ size }))}>{title}</span>
+    </div>
+  );
+});
+
+export { Navigation };
+export type { NavigationProps };

package/src/ui/pagination.tsx

@@ -0,0 +1,129 @@
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { ComponentProps } from "react";
+
+import { TabsCursorProvider, useTabsCursor } from "../highlight-cursor/tabs-cursor-context";
+import { cn } from "../hooks";
+import { Button, buttonVariants } from "./button";
+
+function Pagination({ className, ...props }: ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  );
+}
+
+function PaginationContent({ className, ...props }: ComponentProps<"ul">) {
+  const { setCursorTarget } = useTabsCursor();
+  return (
+    <TabsCursorProvider>
+      <ul
+        onMouseLeave={() => setCursorTarget(null)}
+        data-slot="pagination-content"
+        className={cn("gap-xs flex flex-row items-center", className)}
+        style={{
+          marginBottom: "0px",
+        }}
+        {...props}
+      />
+    </TabsCursorProvider>
+  );
+}
+
+function PaginationItem({ ...props }: ComponentProps<"li">) {
+  const { setCursorTarget } = useTabsCursor();
+  return (
+    <li
+      onMouseEnter={(e) => setCursorTarget(e.currentTarget)}
+      data-slot="pagination-item"
+      className="rounded-uk-sm"
+      style={{
+        marginBottom: "0px",
+      }}
+      {...props}
+    />
+  );
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ComponentProps<typeof Button>, "size"> &
+  ComponentProps<"a">;
+
+function PaginationLink({ className, isActive, size = "md", ...props }: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "secondary" : "ghost",
+          size,
+        }),
+        "hover:bg-transparent",
+        "hover:text-text-primary",
+        "min-w-[32px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function PaginationPrevious({ className, ...props }: ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      className={cn("gap-xs px-lg sm:pl-lg", className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  );
+}
+
+function PaginationNext({ className, ...props }: ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      className={cn("gap-xs px-lg sm:pr-lg", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  );
+}
+
+function PaginationEllipsis({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn(
+        "text-text-primary flex size-9 size-[32px] items-center justify-center",
+        className,
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  );
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};

package/src/ui/panel.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 panel component.
+ */
+const panelVariants = 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 PanelProps extends ComponentProps<"div">, VariantProps<typeof panelVariants> {}
+
+/**
+ * Container panel with default padding, radius and shadow.
+ */
+function Panel({ className, size, ...props }: PanelProps) {
+  return <div data-slot="panel" className={cn(panelVariants({ size, className }))} {...props} />;
+}
+
+/**
+ * Variants for the panel header component.
+ */
+const panelHeaderVariants = 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 PanelHeaderProps
+  extends ComponentProps<"div">,
+    VariantProps<typeof panelHeaderVariants> {}
+
+/**
+ * Horizontal header row for panel.
+ */
+function PanelHeader({ className, size, ...props }: PanelHeaderProps) {
+  return (
+    <div
+      data-slot="panel-header"
+      className={cn(panelHeaderVariants({ size, className }))}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Title text styling within panel.
+ */
+function PanelTitle({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="panel-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 PanelDescription({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="panel-description"
+      className={cn("text-uk-sm", "-mt-2", "text-text-secondary", "leading-uk-sm", className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Right-aligned action area.
+ */
+function PanelAction({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="panel-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 PanelContent({ className, ...props }: ComponentProps<"div">) {
+  return <div data-slot="panel-content" className={cn("", className)} {...props} />;
+}
+
+/**
+ * Footer row for actions or meta.
+ */
+function PanelFooter({ className, ...props }: ComponentProps<"div">) {
+  return <div data-slot="panel-footer" className={cn("flex items-center", className)} {...props} />;
+}
+
+export { Panel, PanelHeader, PanelFooter, PanelTitle, PanelAction, PanelDescription, PanelContent };

package/src/ui/popover.tsx

@@ -0,0 +1,112 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { ComponentProps } from "react";
+
+import { cn, createClientOnlyComponent } from "../hooks";
+
+/**
+ * Popover root based on Radix primitives.
+ */
+function PopoverRoot({ ...props }: ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverFallback({ ...props }: ComponentProps<"div">) {
+  return <div data-slot="popover" {...props} />;
+}
+
+const Popover = createClientOnlyComponent(PopoverRoot, PopoverFallback);
+
+/**
+ * Element that opens the popover.
+ */
+function PopoverTriggerRoot({ ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverTriggerFallback({
+  asChild,
+  children,
+  ...props
+}: ComponentProps<"button"> & { asChild?: boolean }) {
+  if (asChild) {
+    return <>{children}</>;
+  }
+  return (
+    <button data-slot="popover-trigger" {...props}>
+      {children}
+    </button>
+  );
+}
+
+const PopoverTrigger = createClientOnlyComponent(PopoverTriggerRoot, PopoverTriggerFallback);
+
+/**
+ * Floating content panel for the popover.
+ */
+function PopoverContentRoot({
+  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",
+          "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-20",
+          "origin-(--radix-popover-content-transform-origin)",
+          "border-none",
+          "outline-hidden",
+          "liquid:liquid-bg",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverContentFallback({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-content"
+      className={cn(
+        "bg-bg-primary",
+        "rounded-uk-lg",
+        "p-xl",
+        "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+        "z-20",
+        "border-none",
+        "outline-hidden",
+        "liquid:liquid-bg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const PopoverContent = createClientOnlyComponent(PopoverContentRoot, PopoverContentFallback);
+
+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,63 @@
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { type ComponentProps } from "react";
+
+import { cn } from "../hooks";
+
+/**
+ * Radio group container with flex spacing.
+ */
+function RadioGroup({ className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("gap-md flex", className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Single radio item with styled indicator.
+ */
+function RadioGroupItem({ className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "group",
+        "w-4",
+        "h-4",
+        "flex",
+        "items-center",
+        "justify-center",
+        "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(
+            "m-auto",
+            "size-[8px]",
+            "rounded-full",
+            "bg-brand-primary",
+            "group-disabled:bg-bg-tertiary",
+          )}
+        />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };

package/src/ui/resizable.tsx

@@ -0,0 +1,52 @@
+import { GripVerticalIcon } from "lucide-react";
+import * as React from "react";
+import { ComponentProps } from "react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "../hooks";
+
+type ResizablePanelGroupProps = ComponentProps<typeof ResizablePrimitive.PanelGroup>;
+
+function ResizablePanelGroup({ className, ...props }: Readonly<ResizablePanelGroupProps>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+type ComponentPropsProps = ComponentProps<typeof ResizablePrimitive.Panel>;
+
+function ResizablePanel(props: Readonly<ComponentPropsProps>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+interface ResizableHandleProps extends ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> {
+  withHandle?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+function ResizableHandle({ withHandle, className, children, ...props }: ResizableHandleProps) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {!children && withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  );
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };