@vuer-ai/vuer-uikit 0.0.11 → 0.0.13

package/src/ui/checkbox.tsx

@@ -0,0 +1,76 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import { type ComponentProps } from "react";
+
+import { cn } from "../utils";
+
+interface CheckboxProps extends Omit<ComponentProps<typeof CheckboxPrimitive.Root>, "className"> {
+  checkall?: boolean;
+  className?: string;
+}
+
+function Checkbox({ className, checkall, ...props }: CheckboxProps) {
+  return (
+    <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-3/5",
+            "h-3/5",
+            "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,36 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import type { ComponentProps } from "react";
+
+import { cn } from "../utils";
+
+function Collapsible({ ...props }: ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
+}
+
+function CollapsibleContent({
+  className,
+  ...props
+}: ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <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/dropdown.tsx

@@ -0,0 +1,375 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { ComponentProps } from "react";
+
+import { cn } from "../utils";
+
+function DropdownMenu({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+function DropdownMenuTrigger({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      className="text-text-primary hover:text-text-highlight disabled:text-text-tertiary active:text-text-secondary"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          [
+            "bg-bg-primary",
+            "p-md",
+            "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-dropdown-menu-content-available-height)",
+            "min-w-[8rem]",
+            "origin-(--radix-dropdown-menu-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",
+          ],
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group
+      data-slot="dropdown-menu-group"
+      className={cn("space-y-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        [
+          "w-full",
+          "flex",
+          "gap-md",
+          "items-center",
+          "pr-md",
+          "pl-[calc(var(--spacing-md)*2)]",
+          "py-xs",
+          "mb-xs",
+          "last:mb-0",
+          "relative",
+          "cursor-default",
+          "rounded-uk-xs",
+          "text-uk-xs",
+          "leading-uk-xs",
+          "outline-hidden",
+          "select-none",
+          "hover:bg-bg-tertiary",
+          "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",
+        ],
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        [
+          "w-full",
+          "flex",
+          "gap-md",
+          "items-center",
+          "pr-md",
+          "pl-[calc(var(--spacing-xl)*1.8)]",
+          "py-xs",
+          "mb-xs",
+          "last:mb-0",
+          "relative",
+          "cursor-default",
+          "rounded-uk-xs",
+          "text-uk-xs",
+          "leading-uk-xs",
+          "outline-hidden",
+          "select-none",
+          "hover:bg-bg-tertiary",
+          "data-[disabled]:pointer-events-none",
+          "data-[disabled]:text-bg-quaternary",
+          "[&_svg:not([class*='size-'])]:size-4",
+          "[&_svg]:pointer-events-none",
+          "[&_svg]:shrink-0",
+        ],
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        [
+          "w-full",
+          "hover:bg-bg-tertiary",
+          "outline-hidden",
+          "relative",
+          "flex",
+          "cursor-default",
+          "select-none",
+          "items-center",
+          "gap-md",
+          "rounded-uk-xs",
+          "py-xs",
+          "pl-[calc(var(--spacing-xl)*1.8)]",
+          "pr-md",
+          "mb-xs",
+          "last:mb-0",
+          "text-uk-xs",
+          "leading-uk-xs",
+          "data-[disabled]:pointer-events-none",
+          "data-[disabled]:text-bg-quaternary",
+          "[&_svg:not([class*='size-'])]:size-4",
+          "[&_svg]:pointer-events-none",
+          "[&_svg]:shrink-0",
+        ],
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn("text-text-secondary text-uk-xs leading-uk-xs px-2 py-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-line-primary my-lg pointer-events-none -mx-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn("text-text-tertiary text-uk-xs leading-uk-xs ml-auto", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "w-full",
+        "flex",
+        "gap-md",
+        "items-center",
+        "pr-md",
+        "pl-[calc(var(--spacing-md)*2)]",
+        "py-xs",
+        "mb-xs",
+        "relative",
+        "cursor-default",
+        "rounded-uk-xs",
+        "text-uk-xs",
+        "leading-uk-xs",
+        "outline-hidden",
+        "select-none",
+        "hover:bg-bg-tertiary",
+        "data-[state=open]:bg-bg-tertiary",
+        "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",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-bg-primary",
+        "p-md",
+        "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-dropdown-menu-content-available-height)",
+        "min-w-[8rem]",
+        "origin-(--radix-dropdown-menu-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",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};

package/src/ui/index.ts

@@ -0,0 +1,31 @@
+export * from "./timeline";
+export * from "./tree-view-v2";
+export * from "./tree-view";
+export * from "./sheet";
+export * from "./popover";
+export * from "./avatar";
+export * from "./tooltip";
+export * from "./toast";
+export * from "./textarea";
+export * from "./dropdown";
+export * from "./toggle";
+export * from "./toggle-group";
+export * from "./badge";
+export * from "./radio-group";
+export * from "./card";
+export * from "./checkbox";
+export * from "./switch";
+export * from "./tabs";
+export * from "./modal";
+export * from "./button";
+export * from "./input";
+export * from "./input-numbers";
+export * from "./collapsible";
+export * from "./select";
+export * from "./modal";
+export * from "./tabs";
+export * from "./slider";
+export * from "./layout";
+export * from "./version-badge";
+
+export * from "./theme-context";