@zentauri-ui/zentauri-components 0.0.4 → 0.0.5

package/dist/ui/index.cjs

@@ -1387,6 +1387,41 @@ var drawerPanelPresets = (side) => ({
 // src/ui/drawer/variants.ts
 var import_class_variance_authority7 = require("class-variance-authority");
 var drawerOverlayVariants = (0, import_class_variance_authority7.cva)("fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm");
+var drawerTriggerVariants = (0, import_class_variance_authority7.cva)(
+  "relative inline-flex shrink-0 cursor-pointer rounded-md border",
+  {
+    variants: {
+      appearance: {
+        default: "bg-slate-950",
+        glass: "border-white/15 bg-slate-950/70 backdrop-blur-xl",
+        sky: "border-sky-600 bg-sky-950/70 backdrop-blur-xl",
+        rose: "border-rose-600 bg-rose-950/70 backdrop-blur-xl",
+        purple: "border-purple-600 bg-purple-950/70 backdrop-blur-xl",
+        pink: "border-pink-600 bg-pink-950/70 backdrop-blur-xl",
+        orange: "border-orange-600 bg-orange-950/70 backdrop-blur-xl",
+        yellow: "border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
+        teal: "border-teal-600 bg-teal-950/70 backdrop-blur-xl",
+        indigo: "border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
+        emerald: "border-emerald-600 bg-emerald-950/70 backdrop-blur-xl",
+        gray: "border-gray-600 bg-gray-950/70 backdrop-blur-xl",
+        amber: "border-amber-600 bg-amber-950/70 backdrop-blur-xl",
+        violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+        "gradient-blue": "border-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-green": "border-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+        "gradient-red": "border-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-yellow": "border-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+        "gradient-purple": "border-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-teal": "border-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+        "gradient-indigo": "border-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-pink": "border-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+        "gradient-orange": "border-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl"
+      }
+    },
+    defaultVariants: {
+      appearance: "default"
+    }
+  }
+);
 var drawerContentVariants = (0, import_class_variance_authority7.cva)(
   "fixed z-50 flex max-h-[min(92vh,900px)] flex-col border border-white/10 bg-slate-950 p-6 text-slate-50 shadow-[0_24px_80px_rgba(15,23,42,0.55)] focus:outline-none",
   {
@@ -1503,7 +1538,7 @@ function Drawer({ open, defaultOpen = false, onOpenChange, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(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__ */ (0, import_jsx_runtime7.jsx)(
     "button",
@@ -1511,7 +1546,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) {
@@ -1700,15 +1735,15 @@ var triggerVariants = (0, import_class_variance_authority8.cva)(
         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",
@@ -1723,7 +1758,7 @@ var triggerVariants = (0, import_class_variance_authority8.cva)(
   }
 );
 var contentVariants = (0, import_class_variance_authority8.cva)(
-  "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: {
@@ -1748,13 +1783,13 @@ var contentVariants = (0, import_class_variance_authority8.cva)(
   }
 );
 var itemVariants = (0, import_class_variance_authority8.cva)(
-  "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",
@@ -2513,6 +2548,41 @@ var import_class_variance_authority11 = require("class-variance-authority");
 var modalOverlayVariants = (0, import_class_variance_authority11.cva)(
   "fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm data-[state=open]:animate-in"
 );
+var modalTriggerVariants = (0, import_class_variance_authority11.cva)(
+  "relative inline-flex shrink-0 cursor-pointer rounded-md border",
+  {
+    variants: {
+      appearance: {
+        default: "bg-slate-950",
+        glass: "border-white/15 bg-slate-950/70 backdrop-blur-xl",
+        sky: "border-sky-600 bg-sky-950/70 backdrop-blur-xl",
+        rose: "border-rose-600 bg-rose-950/70 backdrop-blur-xl",
+        purple: "border-purple-600 bg-purple-950/70 backdrop-blur-xl",
+        pink: "border-pink-600 bg-pink-950/70 backdrop-blur-xl",
+        orange: "border-orange-600 bg-orange-950/70 backdrop-blur-xl",
+        yellow: "border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
+        teal: "border-teal-600 bg-teal-950/70 backdrop-blur-xl",
+        indigo: "border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
+        emerald: "border-emerald-600 bg-emerald-950/70 backdrop-blur-xl",
+        gray: "border-gray-600 bg-gray-950/70 backdrop-blur-xl",
+        amber: "border-amber-600 bg-amber-950/70 backdrop-blur-xl",
+        violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+        "gradient-blue": "border-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-green": "border-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+        "gradient-red": "border-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-yellow": "border-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+        "gradient-purple": "border-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-teal": "border-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+        "gradient-indigo": "border-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-pink": "border-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+        "gradient-orange": "border-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl"
+      }
+    },
+    defaultVariants: {
+      appearance: "default"
+    }
+  }
+);
 var modalContentVariants = (0, import_class_variance_authority11.cva)(
   "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",
   {
@@ -2616,7 +2686,7 @@ function Modal({ open, defaultOpen = false, onOpenChange, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(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__ */ (0, import_jsx_runtime11.jsx)(
     "button",
@@ -2624,7 +2694,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) {
@@ -5042,7 +5112,7 @@ var toggleThumbAnimationPresets = {
 // src/ui/toggle/variants.ts
 var import_class_variance_authority20 = require("class-variance-authority");
 var toggleTrackVariants = (0, import_class_variance_authority20.cva)(
-  "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: {
@@ -5069,7 +5139,16 @@ var toggleTrackVariants = (0, import_class_variance_authority20.cva)(
         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: {