@zentauri-ui/zentauri-components 1.3.1 → 1.4.0

package/src/ui/drawer/types.ts

@@ -0,0 +1,39 @@
+import type { VariantProps } from "class-variance-authority";
+import type { CSSProperties, HTMLAttributes, ReactNode, Ref, RefObject } from "react";
+
+import type { drawerContentVariants, drawerTriggerVariants } from "./variants";
+
+export type DrawerContentVariantProps = VariantProps<typeof drawerContentVariants>;
+
+export type DrawerProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+};
+
+export type DrawerTriggerProps = HTMLAttributes<HTMLButtonElement> & {
+  ref?: Ref<HTMLButtonElement>;
+  appearance?: VariantProps<typeof drawerTriggerVariants>["appearance"];
+};
+
+export type DrawerContentProps = DrawerContentVariantProps & {
+  className?: string;
+  children?: ReactNode;
+  ref?: Ref<HTMLDivElement>;
+  id?: string;
+  style?: CSSProperties;
+};
+
+export type DrawerSectionProps = {
+  className?: string;
+  children?: ReactNode;
+};
+
+export type DrawerCtx = {
+  open: boolean;
+  setOpen: (next: boolean) => void;
+  titleId: string;
+  descriptionId: string;
+  contentRef: RefObject<HTMLDivElement | null>;
+};

package/src/ui/drawer/variants.ts

@@ -0,0 +1,122 @@
+import { cva } from "class-variance-authority";
+
+export const drawerOverlayVariants = cva(
+  "fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm",
+);
+
+export const drawerTriggerVariants = cva(
+  "relative inline-flex shrink-0 cursor-pointer rounded-md border",
+  {
+    variants: {
+      appearance: {
+        default: "bg-slate-950",
+        glass: "border-white/15 bg-slate-950/70 backdrop-blur-xl",
+        sky: "border-sky-600 bg-sky-950/70 backdrop-blur-xl",
+        rose: "border-rose-600 bg-rose-950/70 backdrop-blur-xl",
+        purple: "border-purple-600 bg-purple-950/70 backdrop-blur-xl",
+        pink: "border-pink-600 bg-pink-950/70 backdrop-blur-xl",
+        orange: "border-orange-600 bg-orange-950/70 backdrop-blur-xl",
+        yellow: "border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
+        teal: "border-teal-600 bg-teal-950/70 backdrop-blur-xl",
+        indigo: "border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
+        emerald: "border-emerald-600 bg-emerald-950/70 backdrop-blur-xl",
+        gray: "border-gray-600 bg-gray-950/70 backdrop-blur-xl",
+        amber: "border-amber-600 bg-amber-950/70 backdrop-blur-xl",
+        violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+        "gradient-blue":
+          "border-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-green":
+          "border-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+        "gradient-red":
+          "border-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-yellow":
+          "border-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+        "gradient-purple":
+          "border-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-teal":
+          "border-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+        "gradient-indigo":
+          "border-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-pink":
+          "border-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+        "gradient-orange":
+          "border-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+      },
+    },
+    defaultVariants: {
+      appearance: "default",
+    },
+  },
+);
+
+export const drawerContentVariants = cva(
+  "fixed z-50 flex max-h-[min(92vh,900px)] flex-col border border-white/10 bg-slate-950 p-6 text-slate-50 shadow-[0_24px_80px_rgba(15,23,42,0.55)] focus:outline-none",
+  {
+    variants: {
+      side: {
+        left: "left-0 top-0 h-full w-[min(100%,420px)]",
+        right: "right-0 top-0 h-full w-[min(100%,420px)]",
+        top: "left-0 top-0 w-full max-h-[min(92vh,520px)]",
+        bottom: "bottom-0 left-0 w-full max-h-[min(92vh,520px)]",
+      },
+      size: {
+        sm: "",
+        md: "",
+        lg: "",
+        xl: "",
+        full: "",
+      },
+      appearance: {
+        default: "bg-slate-950",
+        glass: "border-white/15 bg-slate-950/70 backdrop-blur-xl",
+        sky: "border-sky-600 bg-sky-950/70 backdrop-blur-xl",
+        rose: "border-rose-600 bg-rose-950/70 backdrop-blur-xl",
+        purple: "border-purple-600 bg-purple-950/70 backdrop-blur-xl",
+        pink: "border-pink-600 bg-pink-950/70 backdrop-blur-xl",
+        orange: "border-orange-600 bg-orange-950/70 backdrop-blur-xl",
+        yellow: "border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
+        teal: "border-teal-600 bg-teal-950/70 backdrop-blur-xl",
+        indigo: "border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
+        emerald: "border-emerald-600 bg-emerald-950/70 backdrop-blur-xl",
+        gray: "border-gray-600 bg-gray-950/70 backdrop-blur-xl",
+        amber: "border-amber-600 bg-amber-950/70 backdrop-blur-xl",
+        violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+        "gradient-blue":
+          "border-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-green":
+          "border-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+        "gradient-red":
+          "border-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-yellow":
+          "border-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+        "gradient-purple":
+          "border-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-teal":
+          "border-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+        "gradient-indigo":
+          "border-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-pink":
+          "border-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+        "gradient-orange":
+          "border-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+      },
+    },
+    compoundVariants: [
+      { side: "left", size: "sm", class: "w-[min(100%,320px)]" },
+      { side: "left", size: "md", class: "w-[min(100%,420px)]" },
+      { side: "left", size: "lg", class: "w-[min(100%,520px)]" },
+      { side: "left", size: "xl", class: "w-[min(100%,640px)]" },
+      { side: "left", size: "full", class: "w-full max-w-none" },
+      { side: "right", size: "sm", class: "w-[min(100%,320px)]" },
+      { side: "right", size: "md", class: "w-[min(100%,420px)]" },
+      { side: "right", size: "lg", class: "w-[min(100%,520px)]" },
+      { side: "right", size: "xl", class: "w-[min(100%,640px)]" },
+      { side: "right", size: "full", class: "w-full max-w-none" },
+    ],
+    defaultVariants: {
+      side: "right",
+      size: "md",
+      appearance: "default",
+    },
+  },
+);

package/src/ui/dropdown/dropdown.test.tsx

@@ -0,0 +1,114 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  Dropdown,
+  DropdownContent,
+  DropdownItem,
+  DropdownTrigger,
+} from "./dropdown";
+
+describe("Dropdown", () => {
+  it("should show menu content when the trigger is clicked", async () => {
+    const user = userEvent.setup();
+    render(
+      <Dropdown>
+        <DropdownTrigger>Menu</DropdownTrigger>
+        <DropdownContent>
+          <DropdownItem value="a">Alpha</DropdownItem>
+        </DropdownContent>
+      </Dropdown>,
+    );
+    await user.click(screen.getByRole("button", { name: "Menu" }));
+    expect(screen.getByText("Alpha")).toBeVisible();
+  });
+
+  it("should close the menu after selecting an item when multiSelect is false", async () => {
+    const user = userEvent.setup();
+    render(
+      <Dropdown defaultOpen>
+        <DropdownTrigger>Menu</DropdownTrigger>
+        <DropdownContent>
+          <DropdownItem value="a">Alpha</DropdownItem>
+        </DropdownContent>
+      </Dropdown>,
+    );
+    await user.click(screen.getByText("Alpha"));
+    await waitFor(() => {
+      expect(screen.queryByText("Alpha")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should keep the menu open after selecting when multiSelect is true", async () => {
+    const user = userEvent.setup();
+    render(
+      <Dropdown defaultOpen multiSelect>
+        <DropdownTrigger>Menu</DropdownTrigger>
+        <DropdownContent>
+          <DropdownItem value="a">Alpha</DropdownItem>
+          <DropdownItem value="b">Beta</DropdownItem>
+        </DropdownContent>
+      </Dropdown>,
+    );
+    await user.click(screen.getByText("Alpha"));
+    expect(screen.getByText("Beta")).toBeInTheDocument();
+  });
+
+  it("should invoke onSelect when an item is picked", async () => {
+    const user = userEvent.setup();
+    const handleSelect = vi.fn();
+    render(
+      <Dropdown defaultOpen>
+        <DropdownTrigger>Menu</DropdownTrigger>
+        <DropdownContent>
+          <DropdownItem value="a" onSelect={handleSelect}>
+            Alpha
+          </DropdownItem>
+        </DropdownContent>
+      </Dropdown>,
+    );
+    await user.click(screen.getByText("Alpha"));
+    expect(handleSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it("should close when clicking outside the menu", async () => {
+    const user = userEvent.setup();
+    render(
+      <div>
+        <Dropdown defaultOpen>
+          <DropdownTrigger>Menu</DropdownTrigger>
+          <DropdownContent>
+            <DropdownItem value="a">Alpha</DropdownItem>
+          </DropdownContent>
+        </Dropdown>
+        <button type="button">Outside</button>
+      </div>,
+    );
+    expect(screen.getByText("Alpha")).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Outside" }));
+    await waitFor(() => {
+      expect(screen.queryByText("Alpha")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should activate an item with Enter while focused", () => {
+    const handleSelect = vi.fn();
+    render(
+      <Dropdown defaultOpen>
+        <DropdownTrigger>Menu</DropdownTrigger>
+        <DropdownContent>
+          <DropdownItem value="a" onSelect={handleSelect}>
+            Alpha
+          </DropdownItem>
+        </DropdownContent>
+      </Dropdown>,
+    );
+    const item = screen
+      .getByText("Alpha")
+      .closest('div[tabindex="0"]') as HTMLElement;
+    item.focus();
+    fireEvent.keyDown(item, { key: "Enter" });
+    expect(handleSelect).toHaveBeenCalledTimes(1);
+  });
+});

package/src/ui/dropdown/dropdown.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import { createContext, useContext, useState, useRef, useEffect } from "react";
+import { FiCheck } from "react-icons/fi";
+import { cn } from "../../lib/utils";
+import type {
+  DropdownContextType,
+  DropdownProps,
+  DropdownTriggerProps,
+  DropdownContentProps,
+  DropdownItemProps,
+} from "./types";
+import { triggerVariants, contentVariants, itemVariants } from "./variants";
+import { useClickOutside } from "../../hooks/useClickOutside";
+
+/* =========================
+   Context
+========================= */
+const DropdownContext = createContext<DropdownContextType | null>(null);
+
+const useDropdown = () => {
+  const ctx = useContext(DropdownContext);
+  if (!ctx) throw new Error("Use inside Dropdown");
+  return ctx;
+};
+
+/* =========================
+   Root
+========================= */
+export const Dropdown = ({
+  children,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  multiSelect = false,
+}: DropdownProps) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+  const open = controlledOpen ?? uncontrolledOpen;
+
+  const setOpen = (val: boolean) => {
+    if (controlledOpen !== undefined) {
+      onOpenChange?.(val);
+    } else {
+      setUncontrolledOpen(val);
+    }
+  };
+
+  const toggle = () => setOpen(!open);
+
+  const toggleSelect = (value: string) => {
+    if (!multiSelect) {
+      setSelectedValues([value]);
+      setOpen(false);
+      return;
+    }
+
+    setSelectedValues((prev) =>
+      prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value],
+    );
+  };
+
+  return (
+    <DropdownContext.Provider
+      value={{
+        open,
+        setOpen,
+        toggle,
+        selectedValues,
+        toggleSelect,
+        multiSelect,
+      }}
+    >
+      <div className="relative inline-block">{children}</div>
+    </DropdownContext.Provider>
+  );
+};
+
+/* =========================
+   Trigger
+========================= */
+export const DropdownTrigger = ({
+  children,
+  className,
+  variant,
+  size,
+  ...props
+}: DropdownTriggerProps) => {
+  const { toggle } = useDropdown();
+
+  return (
+    <button
+      onClick={toggle}
+      className={cn(triggerVariants({ variant, size }), className)}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+/* =========================
+   Content
+========================= */
+export const DropdownContent = ({
+  children,
+  className,
+  placement = "bottom",
+  spacing = "default",
+  divider,
+  ...props
+}: DropdownContentProps) => {
+  const { open, setOpen } = useDropdown();
+  const ref = useRef<HTMLDivElement>(null);
+
+  // click outside
+  useClickOutside({ ref, setOpen });
+
+  if (!open) return null;
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        contentVariants({ placement, spacing }),
+        className,
+        divider && "divide-y divide-current",
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+/* =========================
+   Item
+========================= */
+export const DropdownItem = ({
+  children,
+  value,
+  className,
+  variant,
+  onSelect,
+  leftIcon,
+  rightIcon,
+  ...props
+}: DropdownItemProps) => {
+  const { toggleSelect, selectedValues } = useDropdown();
+  const isSelected = selectedValues.includes(value);
+
+  const handleClick = () => {
+    toggleSelect(value);
+    onSelect?.();
+  };
+
+  return (
+    <div
+      tabIndex={0}
+      onClick={handleClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") handleClick();
+      }}
+      className={cn(itemVariants({ variant }), className)}
+      {...props}
+    >
+      <div className="flex items-center gap-2">
+        {leftIcon}
+        {children}
+      </div>
+
+      <div className="flex items-center gap-2">
+        {isSelected && <FiCheck />}
+        {rightIcon}
+      </div>
+    </div>
+  );
+};

package/src/ui/dropdown/index.ts

@@ -0,0 +1,15 @@
+"use client";
+
+export {
+  Dropdown,
+  DropdownTrigger,
+  DropdownContent,
+  DropdownItem,
+} from "./dropdown";
+export type {
+  DropdownProps,
+  DropdownTriggerProps,
+  DropdownContentProps,
+  DropdownItemProps,
+} from "./types";
+export { triggerVariants, contentVariants, itemVariants } from "./variants";

package/src/ui/dropdown/types.ts

@@ -0,0 +1,68 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+
+export type DropdownContextType = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  toggle: () => void;
+  selectedValues: string[];
+  toggleSelect: (value: string) => void;
+  multiSelect: boolean;
+};
+
+type Variant =
+  | "default"
+  | "outline"
+  | "ghost"
+  | "white"
+  | "black"
+  | "sky"
+  | "rose"
+  | "purple"
+  | "pink"
+  | "orange"
+  | "yellow"
+  | "teal"
+  | "indigo"
+  | "emerald"
+  | "gray"
+  | "amber"
+  | "violet"
+  | "gradient-blue"
+  | "gradient-green"
+  | "gradient-red"
+  | "gradient-yellow"
+  | "gradient-purple"
+  | "gradient-teal"
+  | "gradient-indigo"
+  | "gradient-pink"
+  | "gradient-orange";
+
+export type DropdownProps = {
+  children: ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  multiSelect?: boolean;
+};
+
+export type DropdownTriggerProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  children: ReactNode;
+  variant?: Variant;
+  size?: "sm" | "md" | "lg";
+};
+
+export type DropdownContentProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+  placement?: "top" | "bottom" | "left" | "right";
+  spacing?: "none" | "default" | "sm" | "md" | "lg" | "xl";
+  divider?: boolean;
+};
+
+export type DropdownItemProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+  value: string;
+  onSelect?: () => void;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  variant?: Variant;
+};

package/src/ui/dropdown/variants.ts

@@ -0,0 +1,138 @@
+import { cva } from "class-variance-authority";
+
+export const triggerVariants = cva(
+  "inline-flex items-center justify-between rounded-md font-medium transition focus:outline-none cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-gray-900 text-white",
+        outline: "border border-gray-300",
+        ghost: "bg-transparent",
+        white: "bg-white text-gray-900",
+        black: "bg-black text-white",
+        sky: "border border-sky-600 text-sky-600",
+        rose: "border border-rose-600 text-rose-600",
+        purple: "border border-purple-600 text-purple-600",
+        pink: "border border-pink-600 text-pink-600",
+        orange: "border border-orange-600 text-orange-600",
+        yellow: "border border-yellow-600 text-yellow-600",
+        teal: "border border-teal-600 text-teal-600",
+        indigo: "border border-indigo-600 text-indigo-600",
+        emerald: "border border-emerald-600 text-emerald-600",
+        gray: "border border-gray-600 text-gray-600",
+        amber: "border border-amber-600 text-amber-600",
+        violet: "border border-violet-600 text-violet-600",
+        "gradient-blue":
+          "bg-gradient-to-r from-blue-600 to-purple-600 text-gradient-to-r from-blue-600 to-purple-600",
+        "gradient-green":
+          "bg-gradient-to-r from-green-600 to-lime-600 text-gradient-to-r from-green-600 to-lime-600",
+        "gradient-red":
+          "bg-gradient-to-r from-red-600 to-pink-600 text-gradient-to-r from-red-600 to-pink-600",
+        "gradient-yellow":
+          "bg-gradient-to-r from-yellow-600 to-orange-600 text-gradient-to-r from-yellow-600 to-orange-600",
+        "gradient-purple":
+          "bg-gradient-to-r from-purple-600 to-pink-600 text-gradient-to-r from-purple-600 to-pink-600",
+        "gradient-teal":
+          "bg-gradient-to-r from-teal-600 to-cyan-600 text-gradient-to-r from-teal-600 to-cyan-600",
+        "gradient-indigo":
+          "bg-gradient-to-r from-indigo-600 to-purple-600 text-gradient-to-r from-indigo-600 to-purple-600",
+        "gradient-pink":
+          "bg-gradient-to-r from-pink-600 to-rose-600 text-gradient-to-r from-pink-600 to-rose-600",
+        "gradient-orange":
+          "bg-gradient-to-r from-orange-600 to-red-600 text-gradient-to-r from-orange-600 to-red-600",
+      },
+      size: {
+        sm: "px-2 py-1 text-sm",
+        md: "px-3 py-2 text-base",
+        lg: "px-4 py-3 text-lg",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  },
+);
+
+export const contentVariants = cva(
+  "absolute min-w-[200px] rounded-md p-2 shadow-md z-50 border",
+  {
+    variants: {
+      placement: {
+        top: "bottom-full mb-2",
+        bottom: "top-full mt-2",
+        left: "right-full mr-2",
+        right: "left-full ml-2",
+      },
+      spacing: {
+        none: "space-y-0",
+        default: "space-y-1",
+        sm: "space-y-2",
+        md: "space-y-3",
+        lg: "space-y-4",
+        xl: "space-y-5",
+      },
+    },
+    defaultVariants: {
+      placement: "bottom",
+      spacing: "default",
+    },
+  },
+);
+
+export const itemVariants = cva(
+  "flex items-center justify-between px-3 py-2 text-sm cursor-pointer rounded-md transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-gray-100 hover:text-gray-900 text-gray-100",
+        outline:
+          "hover:bg-gray-100 hover:text-gray-900 border border-white text-gray-100",
+        ghost:
+          "hover:bg-gray-100 hover:text-gray-900 bg-transparent text-gray-100",
+        white: "hover:bg-gray-100 hover:text-gray-900 bg-white text-gray-900",
+        black: "hover:bg-gray-100 hover:text-gray-900 bg-black text-white",
+        sky: "hover:bg-sky-100 hover:text-sky-600 bg-sky-200 text-sky-800",
+        rose: "hover:bg-rose-100 hover:text-rose-600 bg-rose-200 text-rose-800",
+        purple:
+          "hover:bg-purple-100 hover:text-purple-600 bg-purple-200 text-purple-800",
+        pink: "hover:bg-pink-100 hover:text-pink-600 bg-pink-200 text-pink-800",
+        orange:
+          "hover:bg-orange-100 hover:text-orange-600 bg-orange-200 text-orange-800",
+        yellow:
+          "hover:bg-yellow-100 hover:text-yellow-600 bg-yellow-200 text-yellow-800",
+        teal: "hover:bg-teal-100 hover:text-teal-600 bg-teal-200 text-teal-800",
+        indigo:
+          "hover:bg-indigo-100 hover:text-indigo-600 bg-indigo-200 text-indigo-800",
+        emerald:
+          "hover:bg-emerald-100 hover:text-emerald-600 bg-emerald-200 text-emerald-800",
+        gray: "hover:bg-gray-100 hover:text-gray-900 bg-gray-200 text-gray-800",
+        amber:
+          "hover:bg-amber-100 hover:text-amber-600 bg-amber-200 text-amber-800",
+        violet:
+          "hover:bg-violet-100 hover:text-violet-600 bg-violet-200 text-violet-800",
+        "gradient-blue":
+          "hover:bg-gradient-to-r from-blue-600 to-purple-600 hover:text-blue-900 bg-gradient-to-r from-blue-200 to-purple-200 text-blue-800",
+        "gradient-green":
+          "hover:bg-gradient-to-r from-green-600 to-lime-600 hover:text-green-900 bg-gradient-to-r from-green-200 to-lime-200 text-green-800",
+        "gradient-red":
+          "hover:bg-gradient-to-r from-red-600 to-pink-600 hover:text-red-900 bg-gradient-to-r from-red-200 to-pink-200 text-red-800",
+        "gradient-yellow":
+          "hover:bg-gradient-to-r from-yellow-600 to-orange-600 hover:text-yellow-900 bg-gradient-to-r from-yellow-200 to-orange-200 text-yellow-800",
+        "gradient-purple":
+          "hover:bg-gradient-to-r from-purple-600 to-pink-600 hover:text-purple-900 bg-gradient-to-r from-purple-200 to-pink-200 text-purple-800",
+        "gradient-teal":
+          "hover:bg-gradient-to-r from-teal-600 to-cyan-600 hover:text-teal-900 bg-gradient-to-r from-teal-200 to-cyan-200 text-teal-800",
+        "gradient-indigo":
+          "hover:bg-gradient-to-r from-indigo-600 to-purple-600 hover:text-indigo-900 bg-gradient-to-r from-indigo-200 to-purple-200 text-indigo-800",
+        "gradient-pink":
+          "hover:bg-gradient-to-r from-pink-600 to-rose-600 hover:text-pink-900 bg-gradient-to-r from-pink-200 to-rose-200 text-pink-800",
+        "gradient-orange":
+          "hover:bg-gradient-to-r from-orange-600 to-red-600 hover:text-orange-900 bg-gradient-to-r from-orange-200 to-red-200 text-orange-800",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);