@zentauri-ui/zentauri-components 1.4.6 → 1.4.7

package/src/ui/empty-state/animated/empty-state-animated.tsx

@@ -3,9 +3,7 @@
 import { motion } from "framer-motion";
 import { emptyStateAnimationPresets } from "./animations";
 import type { EmptyStateAnimatedProps } from "./types";
-import {
-  EmptyStateBase,
-} from "../empty-state-base";
+import { EmptyStateBase } from "../empty-state-base";
 
 export function EmptyStateAnimated(props: EmptyStateAnimatedProps) {
   const { animation = "none" } = props;
@@ -20,4 +18,4 @@ export function EmptyStateAnimated(props: EmptyStateAnimatedProps) {
   );
 }
 
-EmptyStateAnimated.displayName = "EmptyState";
+EmptyStateAnimated.displayName = "EmptyState";

package/src/ui/empty-state/animated/index.ts

@@ -1,7 +1,10 @@
 "use client";
 
-export {
-  EmptyStateAnimated,
-} from "./empty-state-animated";
-export type { EmptyStateAnimatedProps, EmptyStateAnimation, EmptyStateVariantProps, EmptyStateAnimationPresets } from "./types";
-export { emptyStateAnimationPresets } from "./animations";
+export { EmptyStateAnimated } from "./empty-state-animated";
+export type {
+  EmptyStateAnimatedProps,
+  EmptyStateAnimation,
+  EmptyStateVariantProps,
+  EmptyStateAnimationPresets,
+} from "./types";
+export { emptyStateAnimationPresets } from "./animations";

package/src/ui/empty-state/empty-state-base.tsx

@@ -4,7 +4,11 @@ import { createContext, useContext, useMemo } from "react";
 
 import { cn } from "../../lib/utils";
 
-import type { EmptyStateProps, EmptyStateSectionProps, EmptyStateSize } from "./types";
+import type {
+  EmptyStateProps,
+  EmptyStateSectionProps,
+  EmptyStateSize,
+} from "./types";
 import {
   emptyStateDescriptionVariants,
   emptyStateTitleVariants,
@@ -25,17 +29,25 @@ export function EmptyStateBase(props: EmptyStateProps) {
     align,
     children,
     ref,
+    liveRegion = false,
     as: Wrapper = "section",
     ...rest
   } = props;
   const ctx = useMemo(() => size ?? "md", [size]);
 
+  const liveAria =
+    typeof liveRegion === "string"
+      ? liveRegion
+      : liveRegion === true
+        ? "polite"
+        : undefined;
+
   return (
     <EmptyStateSizeContext.Provider value={ctx}>
       <Wrapper
         ref={ref}
         data-slot="empty-state"
-        aria-live="polite"
+        aria-live={liveAria}
         className={cn(
           emptyStateVariants({ size, appearance, align }),
           className,

package/src/ui/empty-state/index.ts

@@ -1,7 +1,13 @@
 "use client";
 
 export { EmptyState } from "./empty-state";
-export { EmptyStateAction, EmptyStateBase, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from "./empty-state-base";
+export {
+  EmptyStateAction,
+  EmptyStateBase,
+  EmptyStateDescription,
+  EmptyStateIcon,
+  EmptyStateTitle,
+} from "./empty-state-base";
 export type { EmptyStateProps, EmptyStateSectionProps } from "./types";
 export {
   emptyStateVariants,

package/src/ui/empty-state/types.ts

@@ -8,6 +8,7 @@ type EmptyStateVariantProps = VariantProps<typeof emptyStateVariants>;
 export type EmptyStateProps = EmptyStateVariantProps &
   (Omit<ComponentPropsWithRef<"section">, "children"> & {
     children?: ReactNode;
+    liveRegion?: false | true | "polite" | "assertive";
     as?: ElementType;
   });
 

package/src/ui/file-upload/file-upload.tsx

@@ -70,8 +70,6 @@ export function FileUpload({
         multiple={multiple}
         disabled={disabled}
         onChange={handleChange}
-        aria-hidden
-        tabIndex={-1}
       />
       <label
         htmlFor={inputId}
@@ -104,13 +102,9 @@ export function FileUpload({
             </span>
           </>
         )}
-        {
-          dragOver && (
-            <span className="text-xs text-slate-400">
-              Drop files here
-            </span>
-          )
-        }
+        {dragOver && (
+          <span className="text-xs text-slate-400">Drop files here</span>
+        )}
       </label>
     </div>
   );

package/src/ui/file-upload/variants.ts

@@ -8,17 +8,26 @@ export const fileUploadVariants = cva(
         idle: "border-white/15 bg-white/5 text-slate-300 hover:border-white/25 hover:bg-white/[0.07]",
         active: "border-violet-400/70 bg-violet-500/10 text-white",
         disabled: "cursor-not-allowed opacity-50",
-        error: "border-red-400/70 bg-red-500/10 text-red-400 hover:border-red-400/80 hover:bg-red-500/15",
-        success: "border-green-400/70 bg-green-500/10 text-green-400 hover:border-green-400/80 hover:bg-green-500/15",
-        warning: "border-yellow-400/70 bg-yellow-500/10 text-yellow-400 hover:border-yellow-400/80 hover:bg-yellow-500/15",
+        error:
+          "border-red-400/70 bg-red-500/10 text-red-400 hover:border-red-400/80 hover:bg-red-500/15",
+        success:
+          "border-green-400/70 bg-green-500/10 text-green-400 hover:border-green-400/80 hover:bg-green-500/15",
+        warning:
+          "border-yellow-400/70 bg-yellow-500/10 text-yellow-400 hover:border-yellow-400/80 hover:bg-yellow-500/15",
         info: "border-blue-400/70 bg-blue-500/10 text-blue-400 hover:border-blue-400/80 hover:bg-blue-500/15",
-        neutral: "border-gray-400/70 bg-gray-500/10 text-gray-400 hover:border-gray-400/80 hover:bg-gray-500/15",
-        purple: "border-purple-400/70 bg-purple-500/10 text-purple-400 hover:border-purple-400/80 hover:bg-purple-500/15",
-        indigo: "border-indigo-400/70 bg-indigo-500/10 text-indigo-400 hover:border-indigo-400/80 hover:bg-indigo-500/15",
-        emerald: "border-emerald-400/70 bg-emerald-500/10 text-emerald-400 hover:border-emerald-400/80 hover:bg-emerald-500/15",
-        amber: "border-amber-400/70 bg-amber-500/10 text-amber-400 hover:border-amber-400/80 hover:bg-amber-500/15",
+        neutral:
+          "border-gray-400/70 bg-gray-500/10 text-gray-400 hover:border-gray-400/80 hover:bg-gray-500/15",
+        purple:
+          "border-purple-400/70 bg-purple-500/10 text-purple-400 hover:border-purple-400/80 hover:bg-purple-500/15",
+        indigo:
+          "border-indigo-400/70 bg-indigo-500/10 text-indigo-400 hover:border-indigo-400/80 hover:bg-indigo-500/15",
+        emerald:
+          "border-emerald-400/70 bg-emerald-500/10 text-emerald-400 hover:border-emerald-400/80 hover:bg-emerald-500/15",
+        amber:
+          "border-amber-400/70 bg-amber-500/10 text-amber-400 hover:border-amber-400/80 hover:bg-amber-500/15",
         pink: "border-pink-400/70 bg-pink-500/10 text-pink-400 hover:border-pink-400/80 hover:bg-pink-500/15",
-        orange: "border-orange-400/70 bg-orange-500/10 text-orange-400 hover:border-orange-400/80 hover:bg-orange-500/15",
+        orange:
+          "border-orange-400/70 bg-orange-500/10 text-orange-400 hover:border-orange-400/80 hover:bg-orange-500/15",
         teal: "border-teal-400/70 bg-teal-500/10 text-teal-400 hover:border-teal-400/80 hover:bg-teal-500/15",
       },
     },

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

@@ -1,5 +1,11 @@
 "use client";
 
 export { InputAnimated } from "./input-animated";
-export type { InputAnimatedProps, InputAnimation, InputAnimationPresets, InputPresetMotionProps, InputSharedAnimatedProps } from "./types";
+export type {
+  InputAnimatedProps,
+  InputAnimation,
+  InputAnimationPresets,
+  InputPresetMotionProps,
+  InputSharedAnimatedProps,
+} from "./types";
 export { inputAnimationPresets } from "./animations";

package/src/ui/inputs/input-base.tsx

@@ -7,6 +7,18 @@ import { cn } from "../../lib/utils";
 import type { InputProps } from "./types";
 import { inputVariants } from "./variants";
 
+function mergeDescribedByIds(
+  user: string | undefined,
+  ...generated: (string | undefined)[]
+): string | undefined {
+  const ids = [
+    ...(user ?? "").split(/\s+/).filter(Boolean),
+    ...generated.filter((id): id is string => Boolean(id)),
+  ];
+  const unique = [...new Set(ids)];
+  return unique.length > 0 ? unique.join(" ") : undefined;
+}
+
 export const InputBase = (props: InputProps) => {
   const generatedId = useId();
 
@@ -19,13 +31,17 @@ export const InputBase = (props: InputProps) => {
       ref,
       "aria-invalid": ariaInvalidProp,
       errorMessage,
+      hint,
+      label,
       id,
       as,
+      "aria-describedby": ariaDescribedByUser,
       ...rest
     } = props;
 
     const controlId = id ?? generatedId;
     const errorId = `${controlId}-error`;
+    const hintId = `${controlId}-hint`;
     const ariaInvalid =
       ariaInvalidProp !== undefined
         ? ariaInvalidProp
@@ -33,8 +49,27 @@ export const InputBase = (props: InputProps) => {
           ? true
           : undefined;
 
+    const describedBy = mergeDescribedByIds(
+      ariaDescribedByUser,
+      hint !== undefined ? hintId : undefined,
+      errorMessage && appearance === "error" ? errorId : undefined,
+    );
+
     return (
       <>
+        {label !== undefined && (
+          <label
+            htmlFor={controlId}
+            className="mb-1 block text-sm font-medium text-slate-200"
+          >
+            {label}
+          </label>
+        )}
+        {hint !== undefined && (
+          <p id={hintId} className="mb-1 text-xs text-slate-400">
+            {hint}
+          </p>
+        )}
         <textarea
           ref={ref}
           id={controlId}
@@ -44,9 +79,7 @@ export const InputBase = (props: InputProps) => {
             className,
           )}
           aria-invalid={ariaInvalid}
-          aria-describedby={
-            errorMessage && appearance === "error" ? errorId : undefined
-          }
+          aria-describedby={describedBy}
           {...rest}
         />
         {errorMessage && appearance === "error" && (
@@ -69,13 +102,17 @@ export const InputBase = (props: InputProps) => {
     ref,
     "aria-invalid": ariaInvalidProp,
     errorMessage,
+    hint,
+    label,
     id,
     as,
+    "aria-describedby": ariaDescribedByUser,
     ...rest
   } = props;
 
   const controlId = id ?? generatedId;
   const errorId = `${controlId}-error`;
+  const hintId = `${controlId}-hint`;
   const ariaInvalid =
     ariaInvalidProp !== undefined
       ? ariaInvalidProp
@@ -83,8 +120,27 @@ export const InputBase = (props: InputProps) => {
         ? true
         : undefined;
 
+  const describedBy = mergeDescribedByIds(
+    ariaDescribedByUser,
+    hint !== undefined ? hintId : undefined,
+    errorMessage && appearance === "error" ? errorId : undefined,
+  );
+
   return (
     <>
+      {label !== undefined && (
+        <label
+          htmlFor={controlId}
+          className="mb-1 block text-sm font-medium text-slate-200"
+        >
+          {label}
+        </label>
+      )}
+      {hint !== undefined && (
+        <p id={hintId} className="mb-1 text-xs text-slate-400">
+          {hint}
+        </p>
+      )}
       <input
         ref={ref}
         id={controlId}
@@ -94,9 +150,7 @@ export const InputBase = (props: InputProps) => {
           className,
         )}
         aria-invalid={ariaInvalid}
-        aria-describedby={
-          errorMessage && appearance === "error" ? errorId : undefined
-        }
+        aria-describedby={describedBy}
         {...rest}
       />
       {errorMessage && appearance === "error" && (

package/src/ui/inputs/input.test.tsx

@@ -381,7 +381,11 @@ describe("Input (component library)", () => {
       "should render without throwing when animation=%s",
       (animation) => {
         const { unmount } = render(
-          <InputAnimated animation={animation} placeholder="x" aria-label="Anim" />,
+          <InputAnimated
+            animation={animation}
+            placeholder="x"
+            aria-label="Anim"
+          />,
         );
         expect(
           getInputSlot(),

package/src/ui/inputs/types.ts

@@ -1,10 +1,15 @@
 import type { VariantProps } from "class-variance-authority";
-import type { ComponentPropsWithRef } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 
 import type { inputVariants } from "./variants";
 
-export type InputSharedProps = Omit<VariantProps<typeof inputVariants>, "as"> & {
+export type InputSharedProps = Omit<
+  VariantProps<typeof inputVariants>,
+  "as"
+> & {
   errorMessage?: string;
+  hint?: ReactNode;
+  label?: ReactNode;
 };
 
 export type InputProps =

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

@@ -1,5 +1,10 @@
 "use client";
 
 export { ModalContentAnimated } from "./modal-content-animated";
-export type { ModalContentAnimatedProps, ModalAnimation, ModalAnimationPresets, ModalPresetMotionProps } from "./types";
+export type {
+  ModalContentAnimatedProps,
+  ModalAnimation,
+  ModalAnimationPresets,
+  ModalPresetMotionProps,
+} from "./types";
 export { modalOverlayAnimationPresets } from "./animations";

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

@@ -22,7 +22,7 @@ export function ModalContentAnimated({
   id,
   style,
 }: ModalContentAnimatedProps) {
-  const { open, setOpen, titleId, descriptionId, contentRef } =
+  const { open, setOpen, titleId, descriptionId, contentRef, triggerRef } =
     useModalContext("ModalContent");
   const reduceMotion = useReducedMotion();
   const overlayMotion =
@@ -34,6 +34,7 @@ export function ModalContentAnimated({
     open,
     setOpen,
     contentRef,
+    triggerRef,
   });
 
   const portalTarget = typeof document !== "undefined" ? document.body : null;
@@ -46,10 +47,8 @@ export function ModalContentAnimated({
     <AnimatePresence>
       {open ? (
         <div className="fixed inset-0 z-50" data-slot="modal-portal">
-          <motion.button
-            type="button"
-            aria-hidden
-            tabIndex={-1}
+          <motion.div
+            role="presentation"
             data-slot="modal-overlay"
             className={modalOverlayVariants()}
             onClick={() => setOpen(false)}

package/src/ui/modal/index.ts

@@ -9,7 +9,7 @@ export {
   ModalHeader,
   ModalDescription,
   ModalClose,
-  ModalFooter
+  ModalFooter,
 } from "./modal-base";
 export type {
   ModalContentProps,

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

@@ -8,6 +8,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type RefObject,
 } from "react";
 import { createPortal } from "react-dom";
 
@@ -31,7 +32,8 @@ type ModalCtx = {
   setOpen: (next: boolean) => void;
   titleId: string;
   descriptionId: string;
-  contentRef: React.RefObject<HTMLDivElement | null>;
+  contentRef: RefObject<HTMLDivElement | null>;
+  triggerRef: RefObject<HTMLElement | null>;
 };
 
 const ModalContext = createContext<ModalCtx | null>(null);
@@ -68,6 +70,7 @@ export function Modal({
   const titleId = `${baseId}-title`;
   const descriptionId = `${baseId}-description`;
   const contentRef = useRef<HTMLDivElement | null>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
 
   const ctx = useMemo(
     () => ({
@@ -76,6 +79,7 @@ export function Modal({
       titleId,
       descriptionId,
       contentRef,
+      triggerRef,
     }),
     [descriptionId, resolvedOpen, setOpen, titleId],
   );
@@ -90,13 +94,20 @@ export function ModalTrigger({
   children,
   appearance,
   onClick,
-  ref,
+  ref: refProp,
   ...rest
 }: ModalTriggerProps) {
-  const { setOpen } = useModalContext("ModalTrigger");
+  const { setOpen, triggerRef } = useModalContext("ModalTrigger");
   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="modal-trigger"
       className={cn(modalTriggerVariants({ appearance }), className)}
@@ -115,7 +126,6 @@ export function ModalTrigger({
 
 ModalTrigger.displayName = "ModalTrigger";
 
-
 export function ModalContent({
   className,
   size,
@@ -126,13 +136,14 @@ export function ModalContent({
   id,
   style,
 }: ModalContentProps) {
-  const { open, setOpen, titleId, descriptionId, contentRef } =
+  const { open, setOpen, titleId, descriptionId, contentRef, triggerRef } =
     useModalContext("ModalContent");
 
   useFocusManagement({
     open,
     setOpen,
     contentRef,
+    triggerRef,
   });
 
   const portalTarget = typeof document !== "undefined" ? document.body : null;
@@ -144,10 +155,8 @@ export function ModalContent({
   return createPortal(
     open ? (
       <div className="fixed inset-0 z-50" data-slot="modal-portal">
-        <button
-          type="button"
-          aria-hidden
-          tabIndex={-1}
+        <div
+          role="presentation"
           data-slot="modal-overlay"
           className={modalOverlayVariants()}
           onClick={() => setOpen(false)}

package/src/ui/modal/modal.test.tsx

@@ -2,11 +2,15 @@ import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 
+import { Modal } from "./modal";
 import {
-  Modal,
-} from "./modal";
-import { ModalTrigger, ModalContent, ModalTitle, ModalBody, ModalDescription, ModalClose } from "./modal-base";
-
+  ModalTrigger,
+  ModalContent,
+  ModalTitle,
+  ModalBody,
+  ModalDescription,
+  ModalClose,
+} from "./modal-base";
 
 describe("Modal", () => {
   it("should expose displayName on exported parts", () => {
@@ -77,6 +81,21 @@ describe("Modal", () => {
     });
   });
 
+  it("should render overlay as non-focusable presentation surface", async () => {
+    render(
+      <Modal defaultOpen>
+        <ModalContent>
+          <ModalTitle>T</ModalTitle>
+        </ModalContent>
+      </Modal>,
+    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
+    const overlay = document.querySelector('[data-slot="modal-overlay"]');
+    expect(overlay?.tagName.toLowerCase()).toBe("div");
+    expect(overlay).toHaveAttribute("role", "presentation");
+    expect((overlay as HTMLElement).tabIndex).toBe(-1);
+  });
+
   it("should close when Escape is pressed", async () => {
     const user = userEvent.setup();
     render(
@@ -126,4 +145,25 @@ describe("Modal", () => {
     await user.keyboard("{Escape}");
     await waitFor(() => expect(handleChange).toHaveBeenLastCalledWith(false));
   });
+
+  it("should restore focus to the trigger after the dialog closes", async () => {
+    const user = userEvent.setup();
+    render(
+      <Modal>
+        <ModalTrigger>Open</ModalTrigger>
+        <ModalContent>
+          <ModalTitle>T</ModalTitle>
+        </ModalContent>
+      </Modal>,
+    );
+    const trigger = screen.getByRole("button", { name: "Open" });
+    trigger.focus();
+    await user.click(trigger);
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
+    await user.keyboard("{Escape}");
+    await waitFor(() =>
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument(),
+    );
+    expect(trigger).toHaveFocus();
+  });
 });

package/src/ui/modal/modal.tsx

@@ -5,4 +5,4 @@ export const Modal = (props: ModalProps) => {
   return <ModalBase {...props} />;
 };
 
-Modal.displayName = "Modal";
+Modal.displayName = "Modal";

package/src/ui/modal/types.ts

@@ -1,9 +1,17 @@
 import type { VariantProps } from "class-variance-authority";
-import type { CSSProperties, ElementType, HTMLAttributes, ReactNode, Ref } from "react";
+import type {
+  CSSProperties,
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
+  Ref,
+} from "react";
 
 import type { modalContentVariants, modalTriggerVariants } from "./variants";
 
-export type ModalContentVariantProps = VariantProps<typeof modalContentVariants>;
+export type ModalContentVariantProps = VariantProps<
+  typeof modalContentVariants
+>;
 
 export type ModalProps = {
   open?: boolean;

package/src/ui/modal/variants.ts

@@ -24,23 +24,23 @@ export const modalTriggerVariants = 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: {
@@ -81,23 +81,23 @@ export const modalContentVariants = 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: {

package/src/ui/pagination/pagination.tsx

@@ -192,9 +192,9 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
                 {item.type === "ellipsis" ? (
                   <span
                     data-slot="pagination-ellipsis"
-                    aria-hidden="true"
-                    title={ellipsisLabel}
                     className={paginationEllipsisVariants({ size })}
+                    role="img"
+                    aria-label={ellipsisLabel}
                   >
                     …
                   </span>