@zentauri-ui/zentauri-components 1.4.5 → 1.4.7

package/src/ui/stepper/stepper.tsx

@@ -6,7 +6,6 @@ import {
   isValidElement,
   useContext,
   useMemo,
-  type Ref,
 } from "react";
 
 import { cn } from "../../lib/utils";
@@ -25,7 +24,6 @@ import {
   stepperVariants,
 } from "./variants";
 
-
 const StepperContext = createContext<StepperCtx | null>(null);
 
 function useStepper(component: string): StepperCtx {
@@ -46,7 +44,6 @@ function useStepperIndex(component: string): number {
   return index;
 }
 
-
 export function Stepper({
   className,
   orientation = "horizontal",
@@ -54,7 +51,7 @@ export function Stepper({
   children,
   ref,
   ...rest
-}: StepperProps & { ref?: Ref<HTMLDivElement> }) {
+}: StepperProps) {
   const items = useMemo(
     () => Children.toArray(children).filter(isValidElement),
     [children],
@@ -70,11 +67,14 @@ export function Stepper({
 
   return (
     <StepperContext.Provider value={ctx}>
-      <div
+      <ol
         ref={ref}
         data-slot="stepper"
-        role="list"
-        className={cn(stepperVariants({ orientation }), className)}
+        className={cn(
+          stepperVariants({ orientation }),
+          "m-0 list-none p-0",
+          className,
+        )}
         {...rest}
       >
         {items.map((child, index) => (
@@ -82,7 +82,7 @@ export function Stepper({
             {child}
           </StepperIndexContext.Provider>
         ))}
-      </div>
+      </ol>
     </StepperContext.Provider>
   );
 }
@@ -94,18 +94,17 @@ export function StepperItem({
   ref,
   children,
   ...rest
-}: StepperItemProps & { ref?: React.Ref<HTMLDivElement> }) {
+}: StepperItemProps) {
   const { orientation } = useStepper("StepperItem");
   return (
-    <div
+    <li
       ref={ref}
       data-slot="stepper-item"
-      role="listitem"
       className={cn(stepperItemVariants({ orientation }), className)}
       {...rest}
     >
       {children}
-    </div>
+    </li>
   );
 }
 
@@ -143,10 +142,7 @@ export function StepperTitle({
     <div
       ref={ref}
       data-slot="stepper-title"
-      className={cn(
-        "mt-3 text-sm font-semibold",
-        className,
-      )}
+      className={cn("mt-3 text-sm font-semibold", className)}
       {...rest}
     />
   );

package/src/ui/stepper/types.ts

@@ -1,5 +1,9 @@
 import type { VariantProps } from "class-variance-authority";
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type {
+  ComponentPropsWithoutRef,
+  ComponentPropsWithRef,
+  ReactNode,
+} from "react";
 
 import type { stepperIndicatorVariants, stepperVariants } from "./variants";
 
@@ -8,9 +12,9 @@ type StepperVariantProps = VariantProps<typeof stepperVariants>;
 export type StepperProps = StepperVariantProps & {
   size?: VariantProps<typeof stepperIndicatorVariants>["size"];
   children?: ReactNode;
-} & Omit<ComponentPropsWithoutRef<"div">, "children">;
+} & Omit<ComponentPropsWithRef<"ol">, "children">;
 
-export type StepperItemProps = ComponentPropsWithoutRef<"div"> & {
+export type StepperItemProps = ComponentPropsWithRef<"li"> & {
   children?: ReactNode;
 };
 
@@ -23,10 +27,12 @@ export type StepperTitleProps = ComponentPropsWithoutRef<"div">;
 
 export type StepperDescriptionProps = ComponentPropsWithoutRef<"p">;
 
-export type StepperAppearance = VariantProps<typeof stepperIndicatorVariants>["appearance"];
+export type StepperAppearance = VariantProps<
+  typeof stepperIndicatorVariants
+>["appearance"];
 
 export type StepperCtx = {
   orientation: NonNullable<StepperProps["orientation"]>;
   size: NonNullable<StepperProps["size"]>;
   total: number;
-};
+};

package/src/ui/stepper/variants.ts

@@ -36,24 +36,39 @@ export const stepperIndicatorVariants = cva(
         upcoming: "border-white/15 bg-white/5 text-slate-400",
         sky: "border-sky-500/60 bg-sky-500/20 text-sky-100 ring-2 ring-sky-400/30",
         rose: "border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30",
-        purple: "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
+        purple:
+          "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
         pink: "border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30",
-        orange: "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30",
-        yellow: "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
+        orange:
+          "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30",
+        yellow:
+          "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
         teal: "border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30",
-        indigo: "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
-        emerald: "border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30",
+        indigo:
+          "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
+        emerald:
+          "border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30",
         gray: "border-gray-500/60 bg-gray-500/20 text-gray-100 ring-2 ring-gray-400/30",
-        violet: "border-violet-500/60 bg-violet-500/20 text-violet-100 ring-2 ring-violet-400/30",
-        "gradient-blue": "border-blue-500/60 bg-blue-500/20 text-blue-100 ring-2 ring-blue-400/30",
-        "gradient-green": "border-green-500/60 bg-green-500/20 text-green-100 ring-2 ring-green-400/30",
-        "gradient-red": "border-red-500/60 bg-red-500/20 text-red-100 ring-2 ring-red-400/30",
-        "gradient-yellow": "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
-        "gradient-purple": "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
-        "gradient-teal": "border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30",
-        "gradient-indigo": "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
-        "gradient-pink": "border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30",
-        "gradient-orange": "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30",
+        violet:
+          "border-violet-500/60 bg-violet-500/20 text-violet-100 ring-2 ring-violet-400/30",
+        "gradient-blue":
+          "border-blue-500/60 bg-blue-500/20 text-blue-100 ring-2 ring-blue-400/30",
+        "gradient-green":
+          "border-green-500/60 bg-green-500/20 text-green-100 ring-2 ring-green-400/30",
+        "gradient-red":
+          "border-red-500/60 bg-red-500/20 text-red-100 ring-2 ring-red-400/30",
+        "gradient-yellow":
+          "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
+        "gradient-purple":
+          "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
+        "gradient-teal":
+          "border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30",
+        "gradient-indigo":
+          "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
+        "gradient-pink":
+          "border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30",
+        "gradient-orange":
+          "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30",
       },
       size: {
         sm: "size-8 text-xs",

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

@@ -9,7 +9,9 @@ export {
   TableHeader,
 } from "../table-base";
 export { TableRowAnimated } from "./table-animated";
-export type { TableAnimatedProps, TableRowAnimationPresets, TableRowPresetMotionProps } from "./types";
-export {
-  tableAnimationPresets,
-} from "./animations";
+export type {
+  TableAnimatedProps,
+  TableRowAnimationPresets,
+  TableRowPresetMotionProps,
+} from "./types";
+export { tableAnimationPresets } from "./animations";

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

@@ -30,6 +30,7 @@ export function TableBase(props: TableProps) {
     size = "md",
     textAlign = "left",
     stickyHeader = false,
+    scrollAreaAriaLabel,
     children,
     ref,
     ...rest
@@ -47,11 +48,19 @@ export function TableBase(props: TableProps) {
 
   return (
     <TableContext.Provider value={ctx}>
-      <div data-slot="table-scroll" className="relative w-full overflow-auto">
+      <div
+        data-slot="table-scroll"
+        tabIndex={0}
+        role="region"
+        aria-label={scrollAreaAriaLabel ?? "Scrollable table"}
+        className={cn(
+          "relative w-full overflow-auto",
+          "outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
+        )}
+      >
         <table
           ref={ref}
           data-slot="table"
-          role="table"
           className={cn(
             tableVariants({ appearance, size, stickyHeader }),
             "w-full min-w-0 table",
@@ -163,19 +172,31 @@ export function TableCell({
   className,
   children,
   ref,
+  scope,
   ...rest
 }: TableCellProps) {
   const { appearance, size, textAlign } = useTableContext("TableCell");
+  const cellClassName = cn(
+    tableCellVariants({ appearance, size, textAlign }),
+    className,
+  );
+
+  if (scope !== undefined) {
+    return (
+      <th
+        ref={ref}
+        data-slot="table-cell"
+        scope={scope}
+        className={cellClassName}
+        {...rest}
+      >
+        {children}
+      </th>
+    );
+  }
+
   return (
-    <td
-      ref={ref}
-      data-slot="table-cell"
-      className={cn(
-        tableCellVariants({ appearance, size, textAlign }),
-        className,
-      )}
-      {...rest}
-    >
+    <td ref={ref} data-slot="table-cell" className={cellClassName} {...rest}>
       {children}
     </td>
   );

package/src/ui/table/types.ts

@@ -19,6 +19,8 @@ export type TableProps = TableVariantProps &
     children?: ReactNode;
     ref?: Ref<HTMLTableElement>;
     textAlign?: "left" | "center" | "right";
+    /** Label for the overflow scroll wrapper (keyboard-focusable region). */
+    scrollAreaAriaLabel?: string;
   };
 
 export type TableSectionProps = {
@@ -33,9 +35,14 @@ export type TableHeadCellProps = ThHTMLAttributes<HTMLTableCellElement> & {
   ref?: Ref<HTMLTableCellElement>;
 };
 
-export type TableCellProps = TdHTMLAttributes<HTMLTableCellElement> & {
+export type TableCellProps = Omit<
+  TdHTMLAttributes<HTMLTableCellElement>,
+  "scope"
+> & {
   ref?: Ref<HTMLTableCellElement>;
   textAlign?: "left" | "center" | "right";
+  /** Row/column header scope; when set, the cell renders as `<th>` (required for valid `scope` usage). */
+  scope?: ThHTMLAttributes<HTMLTableCellElement>["scope"];
 };
 
 export type TableCtx = {

package/src/ui/tabs/animated/animations.ts

@@ -1,4 +1,8 @@
-import type { TabsAnimationPresets, TabsOrientation, TabsPresetMotionProps } from "./types";
+import type {
+  TabsAnimationPresets,
+  TabsOrientation,
+  TabsPresetMotionProps,
+} from "./types";
 import type { TabsAnimation } from "./types";
 
 const easeOutExpo: [number, number, number, number] = [0.16, 1, 0.3, 1];

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

@@ -1,7 +1,13 @@
 "use client";
 
 export { TabsContentAnimated } from "./tabs-content-animated";
-export type { TabsContentAnimatedProps, TabsAnimation, TabsAnimationPresets, TabsOrientation, TabsPresetMotionProps } from "./types";
+export type {
+  TabsContentAnimatedProps,
+  TabsAnimation,
+  TabsAnimationPresets,
+  TabsOrientation,
+  TabsPresetMotionProps,
+} from "./types";
 export {
   getTabsContentMotionProps,
   tabsContentAnimationPresets,

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

@@ -6,10 +6,10 @@ export type TabsAnimation = "none" | "fade" | "slide";
 
 export type TabsPresetMotionProps = Pick<
   HTMLMotionProps<"div">,
-    "initial" | "animate" | "transition"
-  >;
+  "initial" | "animate" | "transition"
+>;
 
-  export type TabsAnimationPresets = Record<TabsAnimation, TabsPresetMotionProps>;
+export type TabsAnimationPresets = Record<TabsAnimation, TabsPresetMotionProps>;
 
 export type TabsOrientation = "horizontal" | "vertical";
 

package/src/ui/tabs/index.ts

@@ -1,6 +1,13 @@
 "use client";
 
-export { Tabs, TabsContent, TabsList, TabsTrigger, TabsContext, useTabs } from "./tabs";
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  TabsContext,
+  useTabs,
+} from "./tabs";
 export type {
   TabsContentProps,
   TabsListProps,

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

@@ -5,6 +5,7 @@ import {
   KeyboardEvent,
   useContext,
   useId,
+  useRef,
   useState,
 } from "react";
 
@@ -41,6 +42,7 @@ export function Tabs({
 }: TabsProps) {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const idPrefix = useId();
+  const listRef = useRef<HTMLDivElement | null>(null);
 
   const isControlled = value !== undefined;
   const currentValue = isControlled ? value : internalValue;
@@ -60,6 +62,7 @@ export function Tabs({
       value={{
         value: currentValue,
         setValue,
+        listRef,
         orientation,
         size,
         variant,
@@ -76,10 +79,11 @@ export function Tabs({
 }
 
 export function TabsList({ children, className, ...props }: TabsListProps) {
-  const { orientation, size } = useTabs();
+  const { orientation, size, listRef } = useTabs();
 
   return (
     <div
+      ref={listRef}
       role="tablist"
       aria-orientation={orientation}
       className={cn(tabsListVariants({ orientation, size }), className)}
@@ -100,6 +104,8 @@ export function TabsTrigger({
   const {
     value: activeValue,
     setValue,
+    listRef,
+    orientation,
     tabTriggerId,
     tabPanelId,
     size,
@@ -110,30 +116,84 @@ export function TabsTrigger({
   const isActive = activeValue === value;
 
   const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
-    const triggers = Array.from(
-      document.querySelectorAll('[role="tab"]'),
-    ) as HTMLElement[];
+    const list = listRef.current;
+    const triggers =
+      list === null
+        ? []
+        : Array.from(list.querySelectorAll<HTMLButtonElement>('[role="tab"]'));
+
+    const nextKeys =
+      orientation === "vertical" ? ["ArrowDown"] : ["ArrowRight"];
+    const prevKeys = orientation === "vertical" ? ["ArrowUp"] : ["ArrowLeft"];
 
     const index = triggers.findIndex((el) => el === e.currentTarget);
+    if (index === -1) {
+      return;
+    }
 
-    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+    const findEnabledIndex = (
+      start: number,
+      direction: 1 | -1,
+    ): number | undefined => {
+      const n = triggers.length;
+      if (n === 0) {
+        return undefined;
+      }
+      let i = start;
+      for (let step = 0; step < n; step += 1) {
+        i = (i + direction + n) % n;
+        if (triggers[i]?.disabled !== true) {
+          return i;
+        }
+      }
+      return undefined;
+    };
+
+    const focusAt = (i: number) => {
+      const target = triggers[i];
+      if (target !== undefined && target.disabled !== true) {
+        target.focus();
+      }
+    };
+
+    const isNext = nextKeys.includes(e.key);
+    const isPrev = prevKeys.includes(e.key);
+
+    if (isNext) {
       e.preventDefault();
-      triggers[index + 1]?.focus();
+      const nextIdx = findEnabledIndex(index, 1);
+      if (nextIdx !== undefined) {
+        focusAt(nextIdx);
+      }
+      return;
     }
 
-    if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+    if (isPrev) {
       e.preventDefault();
-      triggers[index - 1]?.focus();
+      const prevIdx = findEnabledIndex(index, -1);
+      if (prevIdx !== undefined) {
+        focusAt(prevIdx);
+      }
+      return;
     }
 
     if (e.key === "Home") {
       e.preventDefault();
-      triggers[0]?.focus();
+      const firstEnabledIndex = triggers.findIndex((btn) => !btn.disabled);
+      if (firstEnabledIndex !== -1) {
+        triggers[firstEnabledIndex]?.focus();
+      }
+      return;
     }
 
     if (e.key === "End") {
       e.preventDefault();
-      triggers[triggers.length - 1]?.focus();
+      for (let i = triggers.length - 1; i >= 0; i -= 1) {
+        if (!triggers[i]?.disabled) {
+          triggers[i]?.focus();
+          break;
+        }
+      }
     }
   };
 
@@ -146,6 +206,7 @@ export function TabsTrigger({
       aria-selected={isActive}
       aria-controls={tabPanelId(value)}
       disabled={disabled}
+      tabIndex={activeValue === undefined ? undefined : isActive ? 0 : -1}
       onClick={() => setValue(value)}
       onKeyDown={handleKeyDown}
       className={cn(

package/src/ui/tabs/tabs.tsx

@@ -1,2 +1,9 @@
 // tabs.tsx — default static entry (no framer-motion on content)
-export { Tabs, TabsContent, TabsList, TabsTrigger, TabsContext, useTabs } from "./tabs-base";
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  TabsContext,
+  useTabs,
+} from "./tabs-base";

package/src/ui/tabs/types.ts

@@ -1,4 +1,4 @@
-import type { ElementType, HTMLAttributes, ReactNode } from "react";
+import type { ElementType, HTMLAttributes, ReactNode, RefObject } from "react";
 
 export type TabsValue = string;
 
@@ -59,6 +59,7 @@ export type TabsContentProps = {
 export type TabsContextType = {
   value: TabsValue | undefined;
   setValue: (value: TabsValue) => void;
+  listRef: RefObject<HTMLDivElement | null>;
   orientation: "horizontal" | "vertical";
   size?: "sm" | "md" | "lg";
   variant?: "default" | "underline" | "pills";

package/src/ui/tabs/variants.ts

@@ -24,7 +24,7 @@ export const tabsListVariants = cva("flex items-center gap-1", {
 });
 
 export const tabsTriggerVariants = cva(
-  "px-3 py-1.5 rounded-md transition-all focus:outline-none focus:ring-2 focus:ring-ring",
+  "px-3 py-1.5 rounded-md transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
   {
     variants: {
       appearance: {
@@ -39,15 +39,15 @@ export const tabsTriggerVariants = cva(
         indigo: "bg-indigo-500/75",
         emerald: "bg-emerald-500/75",
         gray: "bg-gray-500/75",
-        "gradient-blue": "bg-gradient-to-r from-blue-600 to-purple-600",
-        "gradient-green": "bg-gradient-to-r from-green-600 to-lime-600",
-        "gradient-red": "bg-gradient-to-r from-red-600 to-pink-600",
-        "gradient-yellow": "bg-gradient-to-r from-yellow-600 to-orange-600",
-        "gradient-purple": "bg-gradient-to-r from-purple-600 to-pink-600",
-        "gradient-teal": "bg-gradient-to-r from-teal-600 to-cyan-600",
-        "gradient-indigo": "bg-gradient-to-r from-indigo-600 to-purple-600",
-        "gradient-pink": "bg-gradient-to-r from-pink-600 to-rose-600",
-        "gradient-orange": "bg-gradient-to-r from-orange-600 to-red-600",
+        "gradient-blue": "bg-linear-to-r from-blue-600 to-purple-600",
+        "gradient-green": "bg-linear-to-r from-green-600 to-lime-600",
+        "gradient-red": "bg-linear-to-r from-red-600 to-pink-600",
+        "gradient-yellow": "bg-linear-to-r from-yellow-600 to-orange-600",
+        "gradient-purple": "bg-linear-to-r from-purple-600 to-pink-600",
+        "gradient-teal": "bg-linear-to-r from-teal-600 to-cyan-600",
+        "gradient-indigo": "bg-linear-to-r from-indigo-600 to-purple-600",
+        "gradient-pink": "bg-linear-to-r from-pink-600 to-rose-600",
+        "gradient-orange": "bg-linear-to-r from-orange-600 to-red-600",
       },
       variant: {
         default: "data-[state=active]:bg-background",

package/src/ui/toast/animated/toast-animated.tsx

@@ -22,7 +22,9 @@ export function ToastViewportAnimated({
 }: ToastViewportProps) {
   const ctx = useContext(ToastStoreContext);
   if (!ctx) {
-    throw new Error("ToastViewportAnimated must be used within <ToastProvider>");
+    throw new Error(
+      "ToastViewportAnimated must be used within <ToastProvider>",
+    );
   }
 
   const portalTarget = typeof document !== "undefined" ? document.body : null;

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

@@ -10,4 +10,4 @@ export type ToastPresetMotionProps = Pick<
 export type ToastAnimationPresets = Record<
   ToastAnimation,
   ToastPresetMotionProps
->;  
+>;

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

@@ -217,7 +217,7 @@ export function ToastClose({
       data-slot="toast-close"
       aria-label="Dismiss notification"
       className={cn(
-        "absolute right-3 top-3 inline-flex size-8 items-center justify-center rounded-md text-slate-200 transition hover:bg-white/10",
+        "absolute right-3 top-3 inline-flex size-8 items-center justify-center rounded-md text-slate-200 transition hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
         className,
       )}
       onClick={onClick}

package/src/ui/toast/types.ts

@@ -5,7 +5,9 @@ import type { toastRootVariants, toastViewportVariants } from "./variants";
 
 export type ToastAnimation = "none" | "slide" | "fade";
 
-export type ToastViewportVariantProps = VariantProps<typeof toastViewportVariants>;
+export type ToastViewportVariantProps = VariantProps<
+  typeof toastViewportVariants
+>;
 export type ToastRootVariantProps = VariantProps<typeof toastRootVariants>;
 
 export type ToastPosition = NonNullable<ToastViewportVariantProps["position"]>;

package/src/ui/toast/variants.ts

@@ -41,23 +41,23 @@ export const toastRootVariants = 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",
       },
       size: {
         sm: "p-3 text-xs",

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

@@ -1,7 +1,10 @@
 "use client";
 
 export { ToggleAnimated } from "./toggle-animated";
-export type { ToggleAnimatedProps, ToggleAnimation, ToggleAnimationPresets, ToggleThumbPreset} from "./types";
-export {
-  toggleThumbAnimationPresets,
-} from "./animations";
+export type {
+  ToggleAnimatedProps,
+  ToggleAnimation,
+  ToggleAnimationPresets,
+  ToggleThumbPreset,
+} from "./types";
+export { toggleThumbAnimationPresets } from "./animations";