@zentauri-ui/zentauri-components 0.0.4 → 0.0.5

package/dist/ui/index.d.cts

@@ -291,6 +291,9 @@ type DrawerAnimationPresets = Record<DrawerAnimation, DrawerPresetMotionProps>;
 declare const drawerPanelPresets: (side: "left" | "right" | "top" | "bottom") => DrawerAnimationPresets;
 
 declare const drawerOverlayVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const drawerTriggerVariants: (props?: ({
+    appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "glass" | "amber" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const drawerContentVariants: (props?: ({
     side?: "bottom" | "left" | "right" | "top" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
@@ -307,6 +310,7 @@ type DrawerProps = {
 };
 type DrawerTriggerProps = HTMLAttributes<HTMLButtonElement> & {
     ref?: Ref<HTMLButtonElement>;
+    appearance?: VariantProps<typeof drawerTriggerVariants>["appearance"];
 };
 type DrawerContentProps = DrawerContentVariantProps & {
     animation?: DrawerAnimation;
@@ -325,7 +329,7 @@ declare function Drawer({ open, defaultOpen, onOpenChange, children }: DrawerPro
 declare namespace Drawer {
     var displayName: string;
 }
-declare function DrawerTrigger({ className, children, onClick, ref, ...rest }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
+declare function DrawerTrigger({ className, children, appearance, onClick, ref, ...rest }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
 declare namespace DrawerTrigger {
     var displayName: string;
 }
@@ -477,6 +481,9 @@ declare const Input: {
 };
 
 declare const modalOverlayVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const modalTriggerVariants: (props?: ({
+    appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "glass" | "amber" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const modalContentVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
     position?: "bottom" | "top" | "center" | null | undefined;
@@ -493,6 +500,7 @@ type ModalProps = {
 };
 type ModalTriggerProps = HTMLAttributes<HTMLButtonElement> & {
     ref?: Ref<HTMLButtonElement>;
+    appearance?: VariantProps<typeof modalTriggerVariants>["appearance"];
 };
 type ModalContentProps = ModalContentVariantProps & {
     animation?: ModalAnimation;
@@ -511,7 +519,7 @@ declare function Modal({ open, defaultOpen, onOpenChange, children }: ModalProps
 declare namespace Modal {
     var displayName: string;
 }
-declare function ModalTrigger({ className, children, onClick, ref, ...rest }: ModalTriggerProps): react_jsx_runtime.JSX.Element;
+declare function ModalTrigger({ className, children, appearance, onClick, ref, ...rest }: ModalTriggerProps): react_jsx_runtime.JSX.Element;
 declare namespace ModalTrigger {
     var displayName: string;
 }
@@ -1088,7 +1096,7 @@ declare const toggleThumbAnimationPresets: ToggleAnimationPresets;
 
 declare const toggleTrackVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
-    appearance?: "default" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "success" | "gray" | "destructive" | "cyan" | "green" | "lime" | "neutral" | "slate" | "zinc" | "stone" | null | undefined;
+    appearance?: "default" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "success" | "gray" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "destructive" | "cyan" | "green" | "lime" | "neutral" | "slate" | "zinc" | "stone" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const toggleThumbVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;

package/dist/ui/index.d.ts

@@ -291,6 +291,9 @@ type DrawerAnimationPresets = Record<DrawerAnimation, DrawerPresetMotionProps>;
 declare const drawerPanelPresets: (side: "left" | "right" | "top" | "bottom") => DrawerAnimationPresets;
 
 declare const drawerOverlayVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const drawerTriggerVariants: (props?: ({
+    appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "glass" | "amber" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const drawerContentVariants: (props?: ({
     side?: "bottom" | "left" | "right" | "top" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
@@ -307,6 +310,7 @@ type DrawerProps = {
 };
 type DrawerTriggerProps = HTMLAttributes<HTMLButtonElement> & {
     ref?: Ref<HTMLButtonElement>;
+    appearance?: VariantProps<typeof drawerTriggerVariants>["appearance"];
 };
 type DrawerContentProps = DrawerContentVariantProps & {
     animation?: DrawerAnimation;
@@ -325,7 +329,7 @@ declare function Drawer({ open, defaultOpen, onOpenChange, children }: DrawerPro
 declare namespace Drawer {
     var displayName: string;
 }
-declare function DrawerTrigger({ className, children, onClick, ref, ...rest }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
+declare function DrawerTrigger({ className, children, appearance, onClick, ref, ...rest }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
 declare namespace DrawerTrigger {
     var displayName: string;
 }
@@ -477,6 +481,9 @@ declare const Input: {
 };
 
 declare const modalOverlayVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const modalTriggerVariants: (props?: ({
+    appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "glass" | "amber" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const modalContentVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
     position?: "bottom" | "top" | "center" | null | undefined;
@@ -493,6 +500,7 @@ type ModalProps = {
 };
 type ModalTriggerProps = HTMLAttributes<HTMLButtonElement> & {
     ref?: Ref<HTMLButtonElement>;
+    appearance?: VariantProps<typeof modalTriggerVariants>["appearance"];
 };
 type ModalContentProps = ModalContentVariantProps & {
     animation?: ModalAnimation;
@@ -511,7 +519,7 @@ declare function Modal({ open, defaultOpen, onOpenChange, children }: ModalProps
 declare namespace Modal {
     var displayName: string;
 }
-declare function ModalTrigger({ className, children, onClick, ref, ...rest }: ModalTriggerProps): react_jsx_runtime.JSX.Element;
+declare function ModalTrigger({ className, children, appearance, onClick, ref, ...rest }: ModalTriggerProps): react_jsx_runtime.JSX.Element;
 declare namespace ModalTrigger {
     var displayName: string;
 }
@@ -1088,7 +1096,7 @@ declare const toggleThumbAnimationPresets: ToggleAnimationPresets;
 
 declare const toggleTrackVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
-    appearance?: "default" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "success" | "gray" | "destructive" | "cyan" | "green" | "lime" | "neutral" | "slate" | "zinc" | "stone" | null | undefined;
+    appearance?: "default" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "success" | "gray" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "destructive" | "cyan" | "green" | "lime" | "neutral" | "slate" | "zinc" | "stone" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const toggleThumbVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;

package/dist/ui/index.js

@@ -1218,6 +1218,41 @@ var drawerPanelPresets = (side) => ({
 // src/ui/drawer/variants.ts
 import { cva as cva7 } from "class-variance-authority";
 var drawerOverlayVariants = cva7("fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm");
+var drawerTriggerVariants = cva7(
+  "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"
+    }
+  }
+);
 var drawerContentVariants = cva7(
   "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",
   {
@@ -1334,7 +1369,7 @@ function Drawer({ open, defaultOpen = false, onOpenChange, children }) {
   return /* @__PURE__ */ jsx7(DrawerContext.Provider, { value: ctx, children });
 }
 Drawer.displayName = "Drawer";
-function DrawerTrigger({ className, children, onClick, ref, ...rest }) {
+function DrawerTrigger({ className, children, appearance, onClick, ref, ...rest }) {
   const { setOpen } = useDrawerContext("DrawerTrigger");
   return /* @__PURE__ */ jsx7(
     "button",
@@ -1342,7 +1377,7 @@ function DrawerTrigger({ className, children, onClick, ref, ...rest }) {
       ref,
       type: "button",
       "data-slot": "drawer-trigger",
-      className: cn(className),
+      className: cn(drawerTriggerVariants({ appearance }), className),
       onClick: (event) => {
         onClick?.(event);
         if (!event.defaultPrevented) {
@@ -1537,15 +1572,15 @@ var triggerVariants = cva8(
         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": "border border-gradient-to-r from-blue-600 to-purple-600 text-gradient-to-r from-blue-600 to-purple-600",
-        "gradient-green": "border border-gradient-to-r from-green-600 to-lime-600 text-gradient-to-r from-green-600 to-lime-600",
-        "gradient-red": "border border-gradient-to-r from-red-600 to-pink-600 text-gradient-to-r from-red-600 to-pink-600",
-        "gradient-yellow": "border border-gradient-to-r from-yellow-600 to-orange-600 text-gradient-to-r from-yellow-600 to-orange-600",
-        "gradient-purple": "border border-gradient-to-r from-purple-600 to-pink-600 text-gradient-to-r from-purple-600 to-pink-600",
-        "gradient-teal": "border border-gradient-to-r from-teal-600 to-cyan-600 text-gradient-to-r from-teal-600 to-cyan-600",
-        "gradient-indigo": "border border-gradient-to-r from-indigo-600 to-purple-600 text-gradient-to-r from-indigo-600 to-purple-600",
-        "gradient-pink": "border border-gradient-to-r from-pink-600 to-rose-600 text-gradient-to-r from-pink-600 to-rose-600",
-        "gradient-orange": "border border-gradient-to-r from-orange-600 to-red-600 text-gradient-to-r from-orange-600 to-red-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",
@@ -1560,7 +1595,7 @@ var triggerVariants = cva8(
   }
 );
 var contentVariants = cva8(
-  "absolute min-w-[200px] rounded-md shadow-md z-50 border",
+  "absolute min-w-[200px] rounded-md p-2 shadow-md z-50 border",
   {
     variants: {
       placement: {
@@ -1585,13 +1620,13 @@ var contentVariants = cva8(
   }
 );
 var itemVariants = cva8(
-  "flex items-center justify-between px-3 py-2 text-sm cursor-pointer transition-colors",
+  "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 bg-white text-gray-900",
-        ghost: "hover:bg-gray-100 hover:text-gray-900 bg-transparent text-gray-900",
+        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",
@@ -2363,6 +2398,41 @@ import { cva as cva11 } from "class-variance-authority";
 var modalOverlayVariants = cva11(
   "fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm data-[state=open]:animate-in"
 );
+var modalTriggerVariants = cva11(
+  "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"
+    }
+  }
+);
 var modalContentVariants = cva11(
   "fixed left-1/2 z-50 w-[calc(100%-2rem)] max-h-[min(90vh,720px)] translate-x-[-50%] overflow-y-auto 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",
   {
@@ -2466,7 +2536,7 @@ function Modal({ open, defaultOpen = false, onOpenChange, children }) {
   return /* @__PURE__ */ jsx11(ModalContext.Provider, { value: ctx, children });
 }
 Modal.displayName = "Modal";
-function ModalTrigger({ className, children, onClick, ref, ...rest }) {
+function ModalTrigger({ className, children, appearance, onClick, ref, ...rest }) {
   const { setOpen } = useModalContext("ModalTrigger");
   return /* @__PURE__ */ jsx11(
     "button",
@@ -2474,7 +2544,7 @@ function ModalTrigger({ className, children, onClick, ref, ...rest }) {
       ref,
       type: "button",
       "data-slot": "modal-trigger",
-      className: cn(className),
+      className: cn(modalTriggerVariants({ appearance }), className),
       onClick: (event) => {
         onClick?.(event);
         if (!event.defaultPrevented) {
@@ -4905,7 +4975,7 @@ var toggleThumbAnimationPresets = {
 // src/ui/toggle/variants.ts
 import { cva as cva20 } from "class-variance-authority";
 var toggleTrackVariants = cva20(
-  "relative inline-flex shrink-0 cursor-pointer rounded-full border border-white/10 bg-white/10 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950 data-[state=checked]:border-cyan-500/40 data-[state=checked]:bg-cyan-600/80 disabled:cursor-not-allowed disabled:opacity-50",
+  "relative inline-flex shrink-0 cursor-pointer rounded-full border border-white/10 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950 data-[state=checked]:border-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       size: {
@@ -4932,7 +5002,16 @@ var toggleTrackVariants = cva20(
         slate: "data-[state=checked]:border-slate-400/40 data-[state=checked]:bg-slate-600/90",
         zinc: "data-[state=checked]:border-zinc-400/40 data-[state=checked]:bg-zinc-600/90",
         gray: "data-[state=checked]:border-gray-400/40 data-[state=checked]:bg-gray-600/90",
-        stone: "data-[state=checked]:border-stone-400/40 data-[state=checked]:bg-stone-600/90"
+        stone: "data-[state=checked]:border-stone-400/40 data-[state=checked]:bg-stone-600/90",
+        "gradient-blue": "data-[state=checked]:bg-linear-to-r from-blue-600 to-purple-600",
+        "gradient-green": "data-[state=checked]:bg-linear-to-r from-green-600 to-lime-600",
+        "gradient-red": "data-[state=checked]:bg-linear-to-r from-red-600 to-pink-600",
+        "gradient-yellow": "data-[state=checked]:bg-linear-to-r from-yellow-600 to-orange-600",
+        "gradient-purple": "data-[state=checked]:bg-linear-to-r from-purple-600 to-pink-600",
+        "gradient-teal": "data-[state=checked]:bg-linear-to-r from-teal-600 to-cyan-600",
+        "gradient-indigo": "data-[state=checked]:bg-linear-to-r from-indigo-600 to-purple-600",
+        "gradient-pink": "data-[state=checked]:bg-linear-to-r from-pink-600 to-rose-600",
+        "gradient-orange": "data-[state=checked]:bg-linear-to-r from-orange-600 to-red-600"
       }
     },
     defaultVariants: {