@zentauri-ui/zentauri-components 1.4.6 → 1.4.7

package/src/ui/buttons/variants.ts

@@ -14,43 +14,43 @@ export const buttonVariants = cva(
         default:
           "bg-slate-50 text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.12)] hover:bg-white",
         secondary: "bg-slate-800 text-slate-50 hover:bg-slate-700",
-        destructive: "bg-rose-600 text-white hover:bg-rose-600",
+        destructive: "bg-rose-700 text-white hover:bg-rose-800",
         outline:
           "border border-white/10 bg-white/5 text-slate-50 hover:bg-white/10",
         ghost: "bg-transparent text-slate-200 hover:bg-white/5",
         link: "bg-transparent text-cyan-300 underline-offset-4 hover:underline",
         glass:
           "border border-white/15 bg-white/10 text-white backdrop-blur-md hover:bg-white/15",
-        emerald: "bg-emerald-600 text-white hover:bg-emerald-600",
+        emerald: "bg-emerald-800 text-white hover:bg-emerald-900",
         indigo: "bg-indigo-600 text-white hover:bg-indigo-600",
         purple: "bg-purple-600 text-white hover:bg-purple-600",
         pink: "bg-pink-600 text-white hover:bg-pink-600",
         rose: "bg-rose-600 text-white hover:bg-rose-600",
-        sky: "bg-sky-600 text-white hover:bg-sky-600",
-        teal: "bg-teal-600 text-white hover:bg-teal-600",
-        yellow: "bg-yellow-600 text-white hover:bg-yellow-600",
-        orange: "bg-orange-600 text-white hover:bg-orange-600",
-        gray: "bg-gray-600 text-white hover:bg-gray-600",
-        amber: "bg-amber-600 text-white hover:bg-amber-600",
+        sky: "bg-sky-700 text-white hover:bg-sky-800",
+        teal: "bg-teal-700 text-white hover:bg-teal-800",
+        yellow: "bg-yellow-800 text-white hover:bg-yellow-900",
+        orange: "bg-orange-800 text-white hover:bg-orange-900",
+        gray: "bg-gray-700 text-white hover:bg-gray-800",
+        amber: "bg-amber-800 text-white hover:bg-amber-900",
         violet: "bg-violet-600 text-white hover:bg-violet-600",
         "gradient-blue":
-          "bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-600 hover:to-purple-600",
+          "bg-linear-to-r from-blue-600 to-purple-600 text-white hover:from-blue-600 hover:to-purple-600",
         "gradient-green":
-          "bg-gradient-to-r from-green-600 to-lime-600 text-white hover:from-green-600 hover:to-lime-600",
+          "bg-linear-to-r from-green-600 to-lime-600 text-white hover:from-green-600 hover:to-lime-600",
         "gradient-red":
-          "bg-gradient-to-r from-red-600 to-pink-600 text-white hover:from-red-600 hover:to-pink-600",
+          "bg-linear-to-r from-red-600 to-pink-600 text-white hover:from-red-600 hover:to-pink-600",
         "gradient-yellow":
-          "bg-gradient-to-r from-yellow-600 to-orange-600 text-white hover:from-yellow-600 hover:to-orange-600",
+          "bg-linear-to-r from-yellow-600 to-orange-600 text-white hover:from-yellow-600 hover:to-orange-600",
         "gradient-purple":
-          "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-600 hover:to-pink-600",
+          "bg-linear-to-r from-purple-600 to-pink-600 text-white hover:from-purple-600 hover:to-pink-600",
         "gradient-teal":
-          "bg-gradient-to-r from-teal-600 to-cyan-600 text-white hover:from-teal-600 hover:to-cyan-600",
+          "bg-linear-to-r from-teal-600 to-cyan-600 text-white hover:from-teal-600 hover:to-cyan-600",
         "gradient-indigo":
-          "bg-gradient-to-r from-indigo-600 to-purple-600 text-white hover:from-indigo-600 hover:to-purple-600",
+          "bg-linear-to-r from-indigo-600 to-purple-600 text-white hover:from-indigo-600 hover:to-purple-600",
         "gradient-pink":
-          "bg-gradient-to-r from-pink-600 to-rose-600 text-white hover:from-pink-600 hover:to-rose-600",
+          "bg-linear-to-r from-pink-600 to-rose-600 text-white hover:from-pink-600 hover:to-rose-600",
         "gradient-orange":
-          "bg-gradient-to-r from-orange-600 to-red-600 text-white hover:from-orange-600 hover:to-red-600",
+          "bg-linear-to-r from-orange-600 to-red-600 text-white hover:from-orange-600 hover:to-red-600",
       },
       size: {
         sm: "h-7 md:h-9 px-3 text-xs",

package/src/ui/card/animated/types.ts

@@ -5,4 +5,3 @@ export type CardAnimation = "none" | "lift" | "glow" | "tilt";
 export type CardAnimatedProps = Omit<CardBaseProps, "as"> & {
   animation?: CardAnimation;
 };
-

package/src/ui/card/card-base.tsx

@@ -1,11 +1,6 @@
 "use client";
 
-import {
-  createContext,
-  useContext,
-  useMemo,
-  type ElementType,
-} from "react";
+import { createContext, useContext, useMemo, type ElementType } from "react";
 
 import { cn } from "../../lib/utils";
 

package/src/ui/card/card.test.tsx

@@ -2,10 +2,14 @@ import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 
+import { Card } from "./card";
 import {
-  Card,
-} from "./card";
-import { CardBody, CardDescription, CardFooter, CardHeader, CardTitle } from "./card-base";
+  CardBody,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./card-base";
 
 const CARD_SLOT = '[data-slot="card"]';
 

package/src/ui/card/card.tsx

@@ -1,7 +1,5 @@
 // card.tsx — default static entry (no framer-motion)
-import {
-  CardBase,
-} from "./card-base";
+import { CardBase } from "./card-base";
 import type { CardProps } from "./types";
 
 export function Card(props: CardProps) {

package/src/ui/card/index.ts

@@ -1,9 +1,13 @@
 "use client";
 
+export { Card } from "./card";
 export {
-  Card,
-} from "./card";
-export { CardBody, CardDescription, CardFooter, CardHeader, CardTitle } from "./card-base";
+  CardBody,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./card-base";
 export type {
   CardBaseProps,
   CardVariantProps,

package/src/ui/card/types.ts

@@ -39,4 +39,4 @@ export type CardDescriptionProps = {
   ref?: Ref<HTMLElement>;
 } & Omit<HTMLAttributes<HTMLElement>, "className" | "children">;
 
-export type CardSize = NonNullable<CardProps["size"]>;
+export type CardSize = NonNullable<CardProps["size"]>;

package/src/ui/card/variants.ts

@@ -30,23 +30,23 @@ export const cardVariants = cva(
         amber: "border border-amber-600 bg-amber-950/70 backdrop-blur-xl",
         violet: "border border-violet-600 bg-violet-950/70 backdrop-blur-xl",
         "gradient-blue":
-          "border 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",
+          "border border-blue-600 bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
         "gradient-green":
-          "border 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",
+          "border border-green-600 bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
         "gradient-red":
-          "border 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",
+          "border border-red-600 bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
         "gradient-yellow":
-          "border 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",
+          "border border-yellow-600 bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
         "gradient-purple":
-          "border 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",
+          "border border-purple-600 bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
         "gradient-teal":
-          "border 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",
+          "border border-teal-600 bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
         "gradient-indigo":
-          "border 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",
+          "border border-indigo-600 bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
         "gradient-pink":
-          "border 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",
+          "border border-pink-600 bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
         "gradient-orange":
-          "border 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",
+          "border border-orange-600 bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
       },
       size: {
         sm: "gap-2 p-3 text-sm",

package/src/ui/divider/animated/index.ts

@@ -1,4 +1,8 @@
 "use client";
 
 export { DividerAnimated } from "./divider-animated";
-export type { DividerAnimatedProps, DividerAnimation, DividerDomDragProps } from "./types";
+export type {
+  DividerAnimatedProps,
+  DividerAnimation,
+  DividerDomDragProps,
+} from "./types";

package/src/ui/divider/animated/types.ts

@@ -12,7 +12,9 @@ export type DividerDomDragProps =
   | "onDragStart"
   | "onDrop";
 
-export type DividerAnimatedProps = Omit<DividerBaseProps, "as" | DividerDomDragProps> & {
+export type DividerAnimatedProps = Omit<
+  DividerBaseProps,
+  "as" | DividerDomDragProps
+> & {
   animation?: DividerAnimation;
 };
-

package/src/ui/divider/divider-base.tsx

@@ -10,7 +10,6 @@ import {
   dividerVariants,
 } from "./variants";
 
-
 export function DividerBase({
   className,
   appearance,

package/src/ui/drawer/animated/drawer-content-animated.tsx

@@ -9,10 +9,7 @@ import { useFocusManagement } from "../../../hooks/useFocusManagement";
 
 import { drawerPanelPresets } from "./animations";
 import { useDrawerContext } from "../drawer-base";
-import {
-  drawerContentVariants,
-  drawerOverlayVariants,
-} from "../variants";
+import { drawerContentVariants, drawerOverlayVariants } from "../variants";
 import type { DrawerContentAnimatedProps } from "./types";
 
 export function DrawerContentAnimated({
@@ -26,7 +23,7 @@ export function DrawerContentAnimated({
   id,
   style,
 }: DrawerContentAnimatedProps) {
-  const { open, setOpen, titleId, descriptionId, contentRef } =
+  const { open, setOpen, titleId, descriptionId, contentRef, triggerRef } =
     useDrawerContext("DrawerContent");
   const resolvedSide = side ?? "right";
   const reduceMotion = useReducedMotion();
@@ -39,6 +36,7 @@ export function DrawerContentAnimated({
     open,
     setOpen,
     contentRef,
+    triggerRef,
   });
 
   const portalTarget = typeof document !== "undefined" ? document.body : null;
@@ -50,10 +48,8 @@ export function DrawerContentAnimated({
     <AnimatePresence>
       {open ? (
         <div className="fixed inset-0 z-50" data-slot="drawer-portal">
-          <motion.button
-            type="button"
-            aria-hidden
-            tabIndex={-1}
+          <motion.div
+            role="presentation"
             data-slot="drawer-overlay"
             className={drawerOverlayVariants()}
             onClick={() => setOpen(false)}
@@ -68,8 +64,7 @@ export function DrawerContentAnimated({
               if (typeof ref === "function") {
                 ref(node);
               } else if (ref) {
-                (ref as MutableRefObject<HTMLDivElement | null>).current =
-                  node;
+                (ref as MutableRefObject<HTMLDivElement | null>).current = node;
               }
             }}
             role="dialog"

package/src/ui/drawer/animated/index.ts

@@ -10,5 +10,10 @@ export {
   DrawerTrigger,
 } from "../drawer-base";
 export { DrawerContentAnimated } from "./drawer-content-animated";
-export type { DrawerContentAnimatedProps, DrawerAnimation, DrawerPresetMotionProps, DrawerAnimationPresets } from "./types";
+export type {
+  DrawerContentAnimatedProps,
+  DrawerAnimation,
+  DrawerPresetMotionProps,
+  DrawerAnimationPresets,
+} from "./types";
 export { drawerPanelPresets } from "./animations";

package/src/ui/drawer/drawer-base.tsx

@@ -62,6 +62,7 @@ export function Drawer({
   const titleId = `${baseId}-title`;
   const descriptionId = `${baseId}-description`;
   const contentRef = useRef<HTMLDivElement | null>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
 
   const ctx = useMemo(
     () => ({
@@ -70,6 +71,7 @@ export function Drawer({
       titleId,
       descriptionId,
       contentRef,
+      triggerRef,
     }),
     [descriptionId, resolvedOpen, setOpen, titleId],
   );
@@ -86,13 +88,20 @@ export function DrawerTrigger({
   children,
   appearance,
   onClick,
-  ref,
+  ref: refProp,
   ...rest
 }: DrawerTriggerProps) {
-  const { setOpen } = useDrawerContext("DrawerTrigger");
+  const { setOpen, triggerRef } = useDrawerContext("DrawerTrigger");
   return (
     <button
-      ref={ref}
+      ref={(node) => {
+        triggerRef.current = node;
+        if (typeof refProp === "function") {
+          refProp(node);
+        } else if (refProp) {
+          (refProp as RefObject<HTMLButtonElement | null>).current = node;
+        }
+      }}
       type="button"
       data-slot="drawer-trigger"
       className={cn(drawerTriggerVariants({ appearance }), className)}
@@ -121,7 +130,7 @@ export function DrawerContent({
   id,
   style,
 }: DrawerContentProps) {
-  const { open, setOpen, titleId, descriptionId, contentRef } =
+  const { open, setOpen, titleId, descriptionId, contentRef, triggerRef } =
     useDrawerContext("DrawerContent");
   const resolvedSide = side ?? "right";
 
@@ -129,6 +138,7 @@ export function DrawerContent({
     open,
     setOpen,
     contentRef,
+    triggerRef,
   });
 
   const portalTarget = typeof document !== "undefined" ? document.body : null;
@@ -139,10 +149,8 @@ export function DrawerContent({
   return createPortal(
     open ? (
       <div className="fixed inset-0 z-50" data-slot="drawer-portal">
-        <button
-          type="button"
-          aria-hidden
-          tabIndex={-1}
+        <div
+          role="presentation"
           data-slot="drawer-overlay"
           className={drawerOverlayVariants()}
           onClick={() => setOpen(false)}

package/src/ui/drawer/types.ts

@@ -1,9 +1,17 @@
 import type { VariantProps } from "class-variance-authority";
-import type { CSSProperties, HTMLAttributes, ReactNode, Ref, RefObject } from "react";
+import type {
+  CSSProperties,
+  HTMLAttributes,
+  ReactNode,
+  Ref,
+  RefObject,
+} from "react";
 
 import type { drawerContentVariants, drawerTriggerVariants } from "./variants";
 
-export type DrawerContentVariantProps = VariantProps<typeof drawerContentVariants>;
+export type DrawerContentVariantProps = VariantProps<
+  typeof drawerContentVariants
+>;
 
 export type DrawerProps = {
   open?: boolean;
@@ -36,4 +44,5 @@ export type DrawerCtx = {
   titleId: string;
   descriptionId: string;
   contentRef: RefObject<HTMLDivElement | null>;
-};
+  triggerRef: RefObject<HTMLElement | null>;
+};

package/src/ui/drawer/variants.ts

@@ -24,23 +24,23 @@ export const drawerTriggerVariants = cva(
         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",
+          "border-blue-600 bg-linear-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",
+          "border-green-600 bg-linear-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",
+          "border-red-600 bg-linear-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",
+          "border-yellow-600 bg-linear-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",
+          "border-purple-600 bg-linear-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",
+          "border-teal-600 bg-linear-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",
+          "border-indigo-600 bg-linear-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",
+          "border-pink-600 bg-linear-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",
+          "border-orange-600 bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
       },
     },
     defaultVariants: {
@@ -82,23 +82,23 @@ export const drawerContentVariants = cva(
         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",
+          "border-blue-600 bg-linear-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",
+          "border-green-600 bg-linear-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",
+          "border-red-600 bg-linear-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",
+          "border-yellow-600 bg-linear-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",
+          "border-purple-600 bg-linear-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",
+          "border-teal-600 bg-linear-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",
+          "border-indigo-600 bg-linear-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",
+          "border-pink-600 bg-linear-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",
+          "border-orange-600 bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
       },
     },
     compoundVariants: [

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

@@ -104,9 +104,7 @@ describe("Dropdown", () => {
         </DropdownContent>
       </Dropdown>,
     );
-    const item = screen
-      .getByText("Alpha")
-      .closest('div[tabindex="0"]') as HTMLElement;
+    const item = screen.getByRole("menuitem", { name: "Alpha" });
     item.focus();
     fireEvent.keyDown(item, { key: "Enter" });
     expect(handleSelect).toHaveBeenCalledTimes(1);

package/src/ui/dropdown/dropdown.tsx

@@ -1,6 +1,13 @@
 "use client";
 
-import { createContext, useContext, useState, useRef, useEffect } from "react";
+import {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+  useId,
+} from "react";
 import { FiCheck } from "react-icons/fi";
 import { cn } from "../../lib/utils";
 import type {
@@ -34,6 +41,7 @@ export const Dropdown = ({
   onOpenChange,
   multiSelect = false,
 }: DropdownProps) => {
+  const menuId = `${useId()}-menu`;
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
   const [selectedValues, setSelectedValues] = useState<string[]>([]);
 
@@ -70,6 +78,7 @@ export const Dropdown = ({
         selectedValues,
         toggleSelect,
         multiSelect,
+        menuId,
       }}
     >
       <div className="relative inline-block">{children}</div>
@@ -85,15 +94,25 @@ export const DropdownTrigger = ({
   className,
   variant,
   size,
+  onClick,
   ...props
 }: DropdownTriggerProps) => {
-  const { toggle } = useDropdown();
+  const { toggle, open, menuId } = useDropdown();
 
   return (
     <button
-      onClick={toggle}
+      type="button"
+      aria-expanded={open}
+      aria-haspopup="menu"
+      aria-controls={menuId}
       className={cn(triggerVariants({ variant, size }), className)}
       {...props}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          toggle();
+        }
+      }}
     >
       {children}
     </button>
@@ -111,7 +130,7 @@ export const DropdownContent = ({
   divider,
   ...props
 }: DropdownContentProps) => {
-  const { open, setOpen } = useDropdown();
+  const { open, setOpen, menuId } = useDropdown();
   const ref = useRef<HTMLDivElement>(null);
 
   // click outside
@@ -122,6 +141,8 @@ export const DropdownContent = ({
   return (
     <div
       ref={ref}
+      id={menuId}
+      role="menu"
       className={cn(
         contentVariants({ placement, spacing }),
         className,
@@ -157,10 +178,14 @@ export const DropdownItem = ({
 
   return (
     <div
+      role="menuitem"
       tabIndex={0}
       onClick={handleClick}
       onKeyDown={(e) => {
-        if (e.key === "Enter") handleClick();
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
       }}
       className={cn(itemVariants({ variant }), className)}
       {...props}

package/src/ui/dropdown/types.ts

@@ -7,6 +7,7 @@ export type DropdownContextType = {
   selectedValues: string[];
   toggleSelect: (value: string) => void;
   multiSelect: boolean;
+  menuId: string;
 };
 
 type Variant =

package/src/ui/dropdown/variants.ts

@@ -1,7 +1,7 @@
 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",
+  "inline-flex items-center justify-between rounded-md font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-500/60 cursor-pointer",
   {
     variants: {
       variant: {
@@ -23,23 +23,23 @@ export const triggerVariants = cva(
         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",
+          "bg-linear-to-r from-blue-600 to-purple-600 text-blue-200",
         "gradient-green":
-          "bg-gradient-to-r from-green-600 to-lime-600 text-gradient-to-r from-green-600 to-lime-600",
+          "bg-linear-to-r from-green-600 to-lime-600 text-green-200",
         "gradient-red":
-          "bg-gradient-to-r from-red-600 to-pink-600 text-gradient-to-r from-red-600 to-pink-600",
+          "bg-linear-to-r from-red-600 to-pink-600 text-red-200",
         "gradient-yellow":
-          "bg-gradient-to-r from-yellow-600 to-orange-600 text-gradient-to-r from-yellow-600 to-orange-600",
+          "bg-linear-to-r from-yellow-600 to-orange-600 text-yellow-200",
         "gradient-purple":
-          "bg-gradient-to-r from-purple-600 to-pink-600 text-gradient-to-r from-purple-600 to-pink-600",
+          "bg-linear-to-r from-purple-600 to-pink-600 text-purple-200",
         "gradient-teal":
-          "bg-gradient-to-r from-teal-600 to-cyan-600 text-gradient-to-r from-teal-600 to-cyan-600",
+          "bg-linear-to-r from-teal-600 to-cyan-600 text-teal-200",
         "gradient-indigo":
-          "bg-gradient-to-r from-indigo-600 to-purple-600 text-gradient-to-r from-indigo-600 to-purple-600",
+          "bg-linear-to-r from-indigo-600 to-purple-600 text-indigo-200",
         "gradient-pink":
-          "bg-gradient-to-r from-pink-600 to-rose-600 text-gradient-to-r from-pink-600 to-rose-600",
+          "bg-linear-to-r from-pink-600 to-rose-600 text-pink-200",
         "gradient-orange":
-          "bg-gradient-to-r from-orange-600 to-red-600 text-gradient-to-r from-orange-600 to-red-600",
+          "bg-linear-to-r from-orange-600 to-red-600 text-orange-200",
       },
       size: {
         sm: "px-2 py-1 text-sm",
@@ -81,7 +81,7 @@ export const contentVariants = cva(
 );
 
 export const itemVariants = cva(
-  "flex items-center justify-between px-3 py-2 text-sm cursor-pointer rounded-md transition-colors",
+  "flex items-center justify-between px-3 py-2 text-sm cursor-pointer rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-500/60",
   {
     variants: {
       variant: {
@@ -112,23 +112,23 @@ export const itemVariants = cva(
         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",
+          "hover:bg-linear-to-r from-blue-600 to-purple-600 hover:text-blue-900 bg-linear-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",
+          "hover:bg-linear-to-r from-green-600 to-lime-600 hover:text-green-900 bg-linear-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",
+          "hover:bg-linear-to-r from-red-600 to-pink-600 hover:text-red-900 bg-linear-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",
+          "hover:bg-linear-to-r from-yellow-600 to-orange-600 hover:text-yellow-900 bg-linear-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",
+          "hover:bg-linear-to-r from-purple-600 to-pink-600 hover:text-purple-900 bg-linear-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",
+          "hover:bg-linear-to-r from-teal-600 to-cyan-600 hover:text-teal-900 bg-linear-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",
+          "hover:bg-linear-to-r from-indigo-600 to-purple-600 hover:text-indigo-900 bg-linear-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",
+          "hover:bg-linear-to-r from-pink-600 to-rose-600 hover:text-pink-900 bg-linear-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",
+          "hover:bg-linear-to-r from-orange-600 to-red-600 hover:text-orange-900 bg-linear-to-r from-orange-200 to-red-200 text-orange-800",
       },
     },
     defaultVariants: {