@zentauri-ui/zentauri-components 0.0.6 → 0.0.8

package/dist/ui/index.js

@@ -45,7 +45,16 @@ var accordionVariants = cva("w-full", {
       yellow: "divide-y divide-yellow-600 rounded-xl border border-yellow-600",
       teal: "divide-y divide-teal-600 rounded-xl border border-teal-600",
       indigo: "divide-y divide-indigo-600 rounded-xl border border-indigo-600",
-      emerald: "divide-y divide-emerald-600 rounded-xl border border-emerald-600"
+      emerald: "divide-y divide-emerald-600 rounded-xl border border-emerald-600",
+      "gradient-blue": "divide-y divide-gradient-to-r from-blue-600 to-purple-600 rounded-xl border border-gradient-to-r from-blue-600 to-purple-600",
+      "gradient-green": "divide-y divide-gradient-to-r from-green-600 to-lime-600 rounded-xl border border-gradient-to-r from-green-600 to-lime-600",
+      "gradient-red": "divide-y divide-gradient-to-r from-red-600 to-pink-600 rounded-xl border border-gradient-to-r from-red-600 to-pink-600",
+      "gradient-yellow": "divide-y divide-gradient-to-r from-yellow-600 to-orange-600 rounded-xl border border-gradient-to-r from-yellow-600 to-orange-600",
+      "gradient-purple": "divide-y divide-gradient-to-r from-purple-600 to-pink-600 rounded-xl border border-gradient-to-r from-purple-600 to-pink-600",
+      "gradient-teal": "divide-y divide-gradient-to-r from-teal-600 to-cyan-600 rounded-xl border border-gradient-to-r from-teal-600 to-cyan-600",
+      "gradient-indigo": "divide-y divide-gradient-to-r from-indigo-600 to-purple-600 rounded-xl border border-gradient-to-r from-indigo-600 to-purple-600",
+      "gradient-pink": "divide-y divide-gradient-to-r from-pink-600 to-rose-600 rounded-xl border border-gradient-to-r from-pink-600 to-rose-600",
+      "gradient-orange": "divide-y divide-gradient-to-r from-orange-600 to-red-600 rounded-xl border border-gradient-to-r from-orange-600 to-red-600"
     },
     size: {
       sm: "px-3 py-2 text-sm",
@@ -74,7 +83,16 @@ var accordionItemVariants = cva("", {
       yellow: "rounded-xl border border-yellow-600 bg-yellow-600/[0.03] p-2",
       teal: "rounded-xl border border-teal-600 bg-teal-600/[0.03] p-2",
       indigo: "rounded-xl border border-indigo-600 bg-indigo-600/[0.03] p-2",
-      emerald: "rounded-xl border border-emerald-600 bg-emerald-600/[0.03] p-2"
+      emerald: "rounded-xl border border-emerald-600 bg-emerald-600/[0.03] p-2",
+      "gradient-blue": "rounded-xl bg-linear-to-r from-blue-600 to-purple-600/[0.03] p-2 text-white",
+      "gradient-green": "rounded-xl bg-linear-to-r from-green-600 to-lime-600/[0.03] p-2 text-white",
+      "gradient-red": "rounded-xl bg-linear-to-r from-red-600 to-pink-600/[0.03] p-2 text-white",
+      "gradient-yellow": "rounded-xl bg-linear-to-r from-yellow-600 to-orange-600/[0.03] p-2 text-white",
+      "gradient-purple": "rounded-xl bg-linear-to-r from-purple-600 to-pink-600/[0.03] p-2 text-white",
+      "gradient-teal": "rounded-xl bg-linear-to-r from-teal-600 to-cyan-600/[0.03] p-2 text-white",
+      "gradient-indigo": "rounded-xl bg-linear-to-r from-indigo-600 to-purple-600/[0.03] p-2 text-white",
+      "gradient-pink": "rounded-xl bg-linear-to-r from-pink-600 to-rose-600/[0.03] p-2 text-white",
+      "gradient-orange": "rounded-xl bg-linear-to-r from-orange-600 to-red-600/[0.03] p-2 text-white"
     }
   },
   defaultVariants: { appearance: "default" }
@@ -92,7 +110,7 @@ var accordionTriggerVariants = cva(
     defaultVariants: { size: "md" }
   }
 );
-var accordionContentVariants = cva("pb-3 text-sm text-slate-300", {
+var accordionContentVariants = cva("pb-3 text-sm", {
   variants: {
     size: {
       sm: "pb-2 text-xs",
@@ -506,7 +524,8 @@ var buttonLikeSolidAppearances = {
   "gradient-purple": "bg-gradient-to-r from-purple-600 to-pink-600 text-white",
   "gradient-teal": "bg-gradient-to-r from-teal-600 to-cyan-600 text-white",
   "gradient-indigo": "bg-gradient-to-r from-indigo-600 to-purple-600 text-white",
-  "gradient-pink": "bg-gradient-to-r from-pink-600 to-rose-600 text-white"
+  "gradient-pink": "bg-gradient-to-r from-pink-600 to-rose-600 text-white",
+  "gradient-orange": "bg-gradient-to-r from-orange-600 to-red-600 text-white"
 };
 var badgeAppearances = {
   ...buttonLikeSolidAppearances,
@@ -670,6 +689,9 @@ var buttonVariants = cva4(
         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",
+        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",
         "gradient-green": "bg-gradient-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",
@@ -677,7 +699,8 @@ var buttonVariants = cva4(
         "gradient-purple": "bg-gradient-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",
         "gradient-indigo": "bg-gradient-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"
+        "gradient-pink": "bg-gradient-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"
       },
       size: {
         sm: "h-7 md:h-9 px-3 text-xs",
@@ -2025,7 +2048,8 @@ var inputVariants = cva10(
         violet: "border-violet-500/80 text-violet-50 placeholder:text-violet-300/70 focus-visible:border-violet-400 focus-visible:ring-violet-400/80",
         amber: "border-amber-500/80 text-amber-50 placeholder:text-amber-300/70 focus-visible:border-amber-400 focus-visible:ring-amber-400/80",
         pink: "border-pink-500/80 text-pink-50 placeholder:text-pink-300/70 focus-visible:border-pink-400 focus-visible:ring-pink-400/80",
-        indigo: "border-indigo-500/80 text-indigo-50 placeholder:text-indigo-300/70 focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80"
+        indigo: "border-indigo-500/80 text-indigo-50 placeholder:text-indigo-300/70 focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80",
+        orange: "border-orange-500/80 text-orange-50 placeholder:text-orange-300/70 focus-visible:border-orange-400 focus-visible:ring-orange-400/80"
       },
       size: {
         sm: "h-8 px-3 text-xs",
@@ -2850,6 +2874,9 @@ var paginationListVariants = cva12(
         teal: "border-teal-500/25 bg-teal-950/20",
         yellow: "border-yellow-500/25 bg-yellow-950/20",
         orange: "border-orange-500/25 bg-orange-950/20",
+        gray: "border-gray-500/25 bg-gray-950/20",
+        amber: "border-amber-500/25 bg-amber-950/20",
+        violet: "border-violet-500/25 bg-violet-950/20",
         "gradient-blue": "border-blue-500/30 bg-gradient-to-r from-blue-950/30 to-purple-950/30",
         "gradient-green": "border-lime-500/30 bg-gradient-to-r from-green-950/30 to-lime-950/30",
         "gradient-red": "border-pink-500/30 bg-gradient-to-r from-red-950/30 to-pink-950/30",
@@ -2857,7 +2884,8 @@ var paginationListVariants = cva12(
         "gradient-purple": "border-pink-500/30 bg-gradient-to-r from-purple-950/30 to-pink-950/30",
         "gradient-teal": "border-cyan-500/30 bg-gradient-to-r from-teal-950/30 to-cyan-950/30",
         "gradient-indigo": "border-purple-500/30 bg-gradient-to-r from-indigo-950/30 to-purple-950/30",
-        "gradient-pink": "border-rose-500/30 bg-gradient-to-r from-pink-950/30 to-rose-950/30"
+        "gradient-pink": "border-rose-500/30 bg-gradient-to-r from-pink-950/30 to-rose-950/30",
+        "gradient-orange": "border-orange-500/30 bg-gradient-to-r from-orange-950/30 to-red-950/30"
       },
       size: {
         sm: "gap-0.5",
@@ -3152,7 +3180,8 @@ var progressVariants = cva13("w-full text-slate-50", {
       "gradient-purple": "[--progress-fill:linear-gradient(90deg,theme(colors.purple.500),theme(colors.pink.500))]",
       "gradient-teal": "[--progress-fill:linear-gradient(90deg,theme(colors.teal.500),theme(colors.cyan.500))]",
       "gradient-indigo": "[--progress-fill:linear-gradient(90deg,theme(colors.indigo.500),theme(colors.purple.500))]",
-      "gradient-pink": "[--progress-fill:linear-gradient(90deg,theme(colors.pink.500),theme(colors.rose.500))]"
+      "gradient-pink": "[--progress-fill:linear-gradient(90deg,theme(colors.pink.500),theme(colors.rose.500))]",
+      "gradient-orange": "[--progress-fill:linear-gradient(90deg,theme(colors.orange.500),theme(colors.red.500))]"
     },
     size: {
       xs: "text-[0.65rem]",
@@ -4182,7 +4211,8 @@ var spinnerAppearances = {
   "gradient-purple": "text-purple-400",
   "gradient-teal": "text-teal-400",
   "gradient-indigo": "text-indigo-400",
-  "gradient-pink": "text-pink-400"
+  "gradient-pink": "text-pink-400",
+  "gradient-orange": "text-orange-400"
 };
 var spinnerVariants = cva16("inline-flex items-center justify-center", {
   variants: {
@@ -4348,52 +4378,91 @@ var tableAnimationPresets = {
 
 // src/ui/table/variants.ts
 import { cva as cva17 } from "class-variance-authority";
-var tableVariants = cva17("w-full caption-bottom text-sm text-slate-200", {
-  variants: {
-    appearance: {
-      default: "",
-      striped: "",
-      bordered: "border border-white/10",
-      ghost: ""
-    },
-    size: {
-      sm: "text-xs",
-      md: "text-sm",
-      lg: "text-base"
+var tableVariants = cva17(
+  "w-full table-auto border-collapse caption-bottom text-sm text-slate-200 md:table-fixed",
+  {
+    variants: {
+      appearance: {
+        default: "",
+        striped: "",
+        bordered: "border border-white/10",
+        ghost: "",
+        sky: "border border-sky-600",
+        rose: "border border-rose-600",
+        purple: "border border-purple-600",
+        pink: "border border-pink-600",
+        orange: "border border-orange-600",
+        yellow: "border border-yellow-600",
+        teal: "border border-teal-600",
+        indigo: "border border-indigo-600",
+        emerald: "border border-emerald-600",
+        gray: "border border-gray-600",
+        amber: "border border-amber-600",
+        violet: "border border-violet-600"
+      },
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      },
+      stickyHeader: {
+        true: "",
+        false: ""
+      }
     },
-    stickyHeader: {
-      true: "",
-      false: ""
-    }
-  },
-  compoundVariants: [
-    {
-      stickyHeader: true,
-      class: "[&_thead>tr]:sticky [&_thead>tr]:top-0 [&_thead>tr]:z-10 [&_thead>tr]:bg-slate-950/95 [&_thead>tr]:backdrop-blur"
+    defaultVariants: {
+      appearance: "default",
+      size: "md",
+      stickyHeader: false
     }
-  ],
-  defaultVariants: {
-    appearance: "default",
-    size: "md",
-    stickyHeader: false
   }
-});
+);
 var tableRowVariants = cva17(
-  "border-b border-white/5 transition-colors hover:bg-white/[0.04] data-[state=selected]:bg-white/[0.06]",
+  "border-b border-white/5 transition-colors data-[state=selected]:bg-white/[0.06]",
   {
     variants: {
       appearance: {
         default: "",
         striped: "odd:bg-white/[0.03]",
         bordered: "",
-        ghost: "border-transparent hover:bg-white/[0.03]"
+        ghost: "border-transparent hover:bg-white/[0.03]",
+        sky: "border-sky-600 hover:bg-sky-600",
+        rose: "border-rose-600 hover:bg-rose-900",
+        purple: "border-purple-600 hover:bg-purple-900",
+        pink: "border-pink-600 hover:bg-pink-900",
+        orange: "border-orange-600 hover:bg-orange-900",
+        yellow: "border-yellow-600 hover:bg-yellow-900",
+        teal: "border-teal-600 hover:bg-teal-900",
+        indigo: "border-indigo-600 hover:bg-indigo-900",
+        emerald: "border-emerald-600 hover:bg-emerald-900",
+        gray: "border-gray-600 hover:bg-gray-900",
+        amber: "border-amber-600 hover:bg-amber-900",
+        violet: "border-violet-600 hover:bg-violet-900"
       }
     },
     defaultVariants: { appearance: "default" }
   }
 );
-var tableCellVariants = cva17("p-3 align-middle", {
+var tableCellVariants = cva17("min-w-0 border p-3 align-middle break-words", {
   variants: {
+    appearance: {
+      default: "border-white/10",
+      striped: "border-white/10",
+      bordered: "border-white/10",
+      ghost: "border-white/10",
+      sky: "border-sky-600",
+      rose: "border-rose-600",
+      purple: "border-purple-600",
+      pink: "border-pink-600",
+      orange: "border-orange-600",
+      yellow: "border-yellow-600",
+      teal: "border-teal-600",
+      indigo: "border-indigo-600",
+      emerald: "border-emerald-600",
+      gray: "border-gray-600",
+      amber: "border-amber-600",
+      violet: "border-violet-600"
+    },
     size: {
       sm: "p-2",
       md: "p-3",
@@ -4405,7 +4474,7 @@ var tableCellVariants = cva17("p-3 align-middle", {
       right: "text-right"
     }
   },
-  defaultVariants: { size: "md" }
+  defaultVariants: { appearance: "default", size: "md" }
 });
 
 // src/ui/table/table.tsx
@@ -4428,7 +4497,6 @@ function Table(props) {
     rowAnimation = "none",
     children,
     ref,
-    overflow = "auto",
     ...rest
   } = props;
   const ctx = useMemo10(
@@ -4441,17 +4509,17 @@ function Table(props) {
     }),
     [appearance, rowAnimation, size, stickyHeader, textAlign]
   );
-  const overflowClass = overflow === "auto" ? cn(
-    "min-w-0 max-lg:overflow-x-auto max-lg:overscroll-x-contain lg:overflow-x-visible",
-    "max-lg:[&_[data-slot=table]]:w-full max-lg:[&_[data-slot=table]]:min-w-max"
-  ) : "overflow-hidden";
-  return /* @__PURE__ */ jsx17(TableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx17("div", { "data-slot": "table-scroll", className: cn("relative w-full"), children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx17(TableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx17("div", { "data-slot": "table-scroll", className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx17(
     "table",
     {
       ref,
       "data-slot": "table",
       role: "table",
-      className: cn(tableVariants({ appearance, size, stickyHeader }), overflowClass, className),
+      className: cn(
+        tableVariants({ appearance, size, stickyHeader }),
+        "w-full min-w-0 table",
+        className
+      ),
       ...rest,
       children
     }
@@ -4459,7 +4527,9 @@ function Table(props) {
 }
 Table.displayName = "Table";
 function TableHeader({ className, children }) {
-  return /* @__PURE__ */ jsx17("thead", { "data-slot": "table-header", className: cn(className), children });
+  const { stickyHeader } = useTableContext("TableHeader");
+  const stickyClass = stickyHeader ? "sticky top-0 z-10 bg-slate-950/95 backdrop-blur" : "";
+  return /* @__PURE__ */ jsx17("thead", { "data-slot": "table-header", className: cn(stickyClass, className), children });
 }
 TableHeader.displayName = "TableHeader";
 function TableBody({ className, children }) {
@@ -4471,13 +4541,21 @@ function TableFooter({ className, children }) {
     "tfoot",
     {
       "data-slot": "table-footer",
-      className: cn("border-t border-white/10 bg-white/3 font-medium", className),
+      className: cn(
+        "border-t border-white/10 bg-white/3 font-medium",
+        className
+      ),
       children
     }
   );
 }
 TableFooter.displayName = "TableFooter";
-function TableRow({ className, children, ref, ...rest }) {
+function TableRow({
+  className,
+  children,
+  ref,
+  ...rest
+}) {
   const { appearance, rowAnimation } = useTableContext("TableRow");
   const motionProps = tableAnimationPresets[rowAnimation];
   return /* @__PURE__ */ jsx17(
@@ -4494,8 +4572,15 @@ function TableRow({ className, children, ref, ...rest }) {
   );
 }
 TableRow.displayName = "TableRow";
-function TableHead({ className, children, scope = "col", sortDirection, ref, ...rest }) {
-  const { size, textAlign } = useTableContext("TableHead");
+function TableHead({
+  className,
+  children,
+  scope = "col",
+  sortDirection,
+  ref,
+  ...rest
+}) {
+  const { appearance, size, textAlign } = useTableContext("TableHead");
   return /* @__PURE__ */ jsx17(
     "th",
     {
@@ -4503,21 +4588,32 @@ function TableHead({ className, children, scope = "col", sortDirection, ref, ...
       "data-slot": "table-head",
       scope,
       "aria-sort": sortDirection,
-      className: cn(tableCellVariants({ size, textAlign }), className),
+      className: cn(
+        tableCellVariants({ appearance, size, textAlign }),
+        className
+      ),
       ...rest,
       children
     }
   );
 }
 TableHead.displayName = "TableHead";
-function TableCell({ className, children, ref, ...rest }) {
-  const { size, textAlign } = useTableContext("TableCell");
+function TableCell({
+  className,
+  children,
+  ref,
+  ...rest
+}) {
+  const { appearance, size, textAlign } = useTableContext("TableCell");
   return /* @__PURE__ */ jsx17(
     "td",
     {
       ref,
       "data-slot": "table-cell",
-      className: cn(tableCellVariants({ size, textAlign }), className),
+      className: cn(
+        tableCellVariants({ appearance, size, textAlign }),
+        className
+      ),
       ...rest,
       children
     }
@@ -4525,7 +4621,14 @@ function TableCell({ className, children, ref, ...rest }) {
 }
 TableCell.displayName = "TableCell";
 function TableCaption({ className, children }) {
-  return /* @__PURE__ */ jsx17("caption", { "data-slot": "table-caption", className: cn("mt-3 text-left text-xs text-slate-500", className), children });
+  return /* @__PURE__ */ jsx17(
+    "caption",
+    {
+      "data-slot": "table-caption",
+      className: cn("mt-3 text-left text-xs text-slate-500", className),
+      children
+    }
+  );
 }
 TableCaption.displayName = "TableCaption";
 
@@ -4839,7 +4942,27 @@ var toastRootVariants = cva19(
         success: "border-emerald-500/40 bg-emerald-950",
         warning: "border-amber-500/40 bg-amber-950",
         error: "border-rose-500/50 bg-rose-950",
-        info: "border-sky-500/40 bg-sky-950"
+        info: "border-sky-500/40 bg-sky-950",
+        ghost: "border-transparent bg-transparent text-slate-200",
+        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"
       },
       size: {
         sm: "p-3 text-xs",
@@ -5180,13 +5303,13 @@ var tooltipVariants = cva21(
         lg: "text-base px-4 py-2"
       },
       width: {
-        fit: "w-full md:min-w-fit",
-        xs: "w-full md:min-w-xs",
-        sm: "w-full md:min-w-sm",
-        md: "w-full md:min-w-md",
-        lg: "w-full md:min-w-lg",
-        xl: "w-full md:min-w-xl",
-        "2xl": "w-full md:min-w-2xl"
+        fit: "min-w-75 md:min-w-fit",
+        xs: "min-w-75 md:min-w-xs",
+        sm: "min-w-75 md:min-w-sm",
+        md: "min-w-75 md:min-w-md",
+        lg: "min-w-75 md:min-w-lg",
+        xl: "min-w-75 md:min-w-xl",
+        "2xl": "min-w-75 md:min-w-2xl"
       }
     },
     defaultVariants: {
@@ -5314,8 +5437,8 @@ var TooltipContent = ({
   const { open, position } = useTooltip();
   if (!open) return null;
   const positionStyles = {
-    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+    top: "bottom-full mb-2",
+    bottom: "top-full mt-2",
     left: "right-full top-1/2 -translate-y-1/2 mr-2",
     right: "left-full top-1/2 -translate-y-1/2 ml-2"
   };