@zentauri-ui/zentauri-components 0.0.6 → 0.0.8

package/README.md

@@ -0,0 +1,109 @@
+# @zentauri-ui/zentauri-components
+
+A React UI kit for building product interfaces with Tailwind CSS. Components are implemented in TypeScript, ship with declaration files, and are bundled as ESM and CommonJS for broad bundler compatibility.
+
+## Overview
+
+The library targets **React 18+** apps that use **Tailwind CSS v4** (or an equivalent setup where Tailwind can scan this package via `@source`). Styling uses utility classes; **class-variance-authority** powers variant APIs (size, appearance, and similar props), with **clsx** and **tailwind-merge** for predictable `className` composition. **Framer Motion** backs motion where components animate, and **react-icons** is used for iconography where applicable.
+
+Published artifacts live under `dist/`; consumers import the UI barrel at `@zentauri-ui/zentauri-components/ui`. A compiled stylesheet is also exposed at `@zentauri-ui/zentauri-components/styles.css` for setups that import CSS explicitly (many apps rely on Tailwind scanning alone—see installation).
+
+## Package exports
+
+| Subpath | Description |
+| --- | --- |
+| `@zentauri-ui/zentauri-components/ui` | Components, hooks, and types (ESM `.js`, CJS `.cjs`, `.d.ts`) |
+| `@zentauri-ui/zentauri-components/styles.css` | Compiled CSS emitted by the build |
+
+## Requirements
+
+- **React** and **React DOM** `>= 18` (peer dependencies)
+- A Tailwind pipeline that can **scan** this package (see Step 2 below)
+
+## Components
+
+Modules re-exported from the UI entry include:
+
+Accordion, Alert, Badge, Button, Card, Divider, Drawer, Dropdown, Empty state, Input, Modal, Pagination, Progress, Select, Skeleton, Spinner, Table, Tabs, Toast, Toggle, Tooltip.
+
+## Installation
+
+**Getting started** — Add the package, point Tailwind at the library sources, then import components from the UI entry.
+
+### Step 1 — Install the package
+
+Choose your package manager.
+
+```bash
+npm install @zentauri-ui/zentauri-components
+```
+
+```bash
+pnpm install @zentauri-ui/zentauri-components
+```
+
+```bash
+yarn add @zentauri-ui/zentauri-components
+```
+
+### Step 2 — Include library paths in globals.css
+
+Add an `@source` entry so Tailwind scans class names inside `@zentauri-ui/zentauri-components`. The path is relative to this CSS file—adjust `../` if your file lives elsewhere.
+
+```css
+@import "tailwindcss";
+@source "../node_modules/@zentauri-ui/zentauri-components";
+```
+
+### Step 3 — Import and use components
+
+Import from the UI barrel, then compose primitives in your JSX.
+
+#### Imports
+
+```tsx
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@zentauri-ui/zentauri-components/ui";
+```
+
+#### Usage
+
+```tsx
+<div className="rounded-3xl border border-white/10 bg-white/5 p-5 shadow-2xl shadow-slate-950/40 backdrop-blur-xl">
+  <Accordion type="single" defaultValue="item-1" appearance="separated" size="md">
+    <AccordionItem value="item-1">
+      <AccordionTrigger>Shipping</AccordionTrigger>
+      <AccordionContent>
+        <p className="text-sm text-slate-300">
+          Standard delivery in 3-5 business days. Express options at
+          checkout.
+        </p>
+      </AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="item-2">
+      <AccordionTrigger>Returns</AccordionTrigger>
+      <AccordionContent>
+        <p className="text-sm text-slate-300">
+          Free returns within 30 days of delivery in original condition.
+        </p>
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>
+</div>
+```
+
+## Development
+
+From this package directory in the monorepo:
+
+- `pnpm build` (or `npm run build`) — production bundle via `tsup`
+- `pnpm dev` — `tsup` watch mode
+- `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests
+
+## License
+
+MIT

package/dist/ui/index.cjs

@@ -223,7 +223,16 @@ var accordionVariants = (0, import_class_variance_authority.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",
@@ -252,7 +261,16 @@ var accordionItemVariants = (0, import_class_variance_authority.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" }
@@ -270,7 +288,7 @@ var accordionTriggerVariants = (0, import_class_variance_authority.cva)(
     defaultVariants: { size: "md" }
   }
 );
-var accordionContentVariants = (0, import_class_variance_authority.cva)("pb-3 text-sm text-slate-300", {
+var accordionContentVariants = (0, import_class_variance_authority.cva)("pb-3 text-sm", {
   variants: {
     size: {
       sm: "pb-2 text-xs",
@@ -684,7 +702,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,
@@ -848,6 +867,9 @@ var buttonVariants = (0, import_class_variance_authority4.cva)(
         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",
@@ -855,7 +877,8 @@ var buttonVariants = (0, import_class_variance_authority4.cva)(
         "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",
@@ -2188,7 +2211,8 @@ var inputVariants = (0, import_class_variance_authority10.cva)(
         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",
@@ -3000,6 +3024,9 @@ var paginationListVariants = (0, import_class_variance_authority12.cva)(
         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",
@@ -3007,7 +3034,8 @@ var paginationListVariants = (0, import_class_variance_authority12.cva)(
         "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",
@@ -3302,7 +3330,8 @@ var progressVariants = (0, import_class_variance_authority13.cva)("w-full text-s
       "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]",
@@ -4332,7 +4361,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 = (0, import_class_variance_authority16.cva)("inline-flex items-center justify-center", {
   variants: {
@@ -4498,52 +4528,91 @@ var tableAnimationPresets = {
 
 // src/ui/table/variants.ts
 var import_class_variance_authority17 = require("class-variance-authority");
-var tableVariants = (0, import_class_variance_authority17.cva)("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 = (0, import_class_variance_authority17.cva)(
+  "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 = (0, import_class_variance_authority17.cva)(
-  "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 = (0, import_class_variance_authority17.cva)("p-3 align-middle", {
+var tableCellVariants = (0, import_class_variance_authority17.cva)("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",
@@ -4555,7 +4624,7 @@ var tableCellVariants = (0, import_class_variance_authority17.cva)("p-3 align-mi
       right: "text-right"
     }
   },
-  defaultVariants: { size: "md" }
+  defaultVariants: { appearance: "default", size: "md" }
 });
 
 // src/ui/table/table.tsx
@@ -4578,7 +4647,6 @@ function Table(props) {
     rowAnimation = "none",
     children,
     ref,
-    overflow = "auto",
     ...rest
   } = props;
   const ctx = (0, import_react15.useMemo)(
@@ -4591,17 +4659,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__ */ (0, import_jsx_runtime17.jsx)(TableContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { "data-slot": "table-scroll", className: cn("relative w-full"), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { "data-slot": "table-scroll", className: "relative w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "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
     }
@@ -4609,7 +4677,9 @@ function Table(props) {
 }
 Table.displayName = "Table";
 function TableHeader({ className, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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__ */ (0, import_jsx_runtime17.jsx)("thead", { "data-slot": "table-header", className: cn(stickyClass, className), children });
 }
 TableHeader.displayName = "TableHeader";
 function TableBody({ className, children }) {
@@ -4621,13 +4691,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__ */ (0, import_jsx_runtime17.jsx)(
@@ -4644,8 +4722,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__ */ (0, import_jsx_runtime17.jsx)(
     "th",
     {
@@ -4653,21 +4738,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__ */ (0, import_jsx_runtime17.jsx)(
     "td",
     {
       ref,
       "data-slot": "table-cell",
-      className: cn(tableCellVariants({ size, textAlign }), className),
+      className: cn(
+        tableCellVariants({ appearance, size, textAlign }),
+        className
+      ),
       ...rest,
       children
     }
@@ -4675,7 +4771,14 @@ function TableCell({ className, children, ref, ...rest }) {
 }
 TableCell.displayName = "TableCell";
 function TableCaption({ className, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("caption", { "data-slot": "table-caption", className: cn("mt-3 text-left text-xs text-slate-500", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "caption",
+    {
+      "data-slot": "table-caption",
+      className: cn("mt-3 text-left text-xs text-slate-500", className),
+      children
+    }
+  );
 }
 TableCaption.displayName = "TableCaption";
 
@@ -4976,7 +5079,27 @@ var toastRootVariants = (0, import_class_variance_authority19.cva)(
         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",
@@ -5317,13 +5440,13 @@ var tooltipVariants = (0, import_class_variance_authority21.cva)(
         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: {
@@ -5451,8 +5574,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"
   };