auxalia-ui-kit 1.1.7 → 1.1.8

package/dist/index.cjs

@@ -99,7 +99,7 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/button.tsx
+// src/components/Button.tsx
 var React = __toESM(require("react"), 1);
 var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
@@ -111,7 +111,7 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 
-// src/components/button.tsx
+// src/components/Button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var compoundVariants = [
   // FILLED - Using Auxalia Brand Colors
@@ -241,7 +241,7 @@ var Button = React.forwardRef(
 );
 Button.displayName = "Button";
 
-// src/components/collapsible.tsx
+// src/components/Collapsible.tsx
 var import_radix_ui = require("radix-ui");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function CollapsibleRoot({
@@ -260,10 +260,32 @@ function CollapsibleContent({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Collapsible.Content, { className: "bg-red dark:bg-amber-50", "data-slot": "collapsible-content", ...props });
 }
 
-// src/components/dropdown-menu.tsx
+// src/components/DropdownMenu/index.tsx
 var React2 = __toESM(require("react"), 1);
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
 var import_lucide_react = require("lucide-react");
+
+// src/components/DropdownMenu/dropdown.styles.ts
+var import_class_variance_authority2 = require("class-variance-authority");
+var dropdownMenuItemVariants = (0, import_class_variance_authority2.cva)(
+  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "focus:bg-black/5 dark:focus:bg-white/6 focus:text-primary",
+        primary: "focus:bg-primary/10 dark:focus:bg-primary/15 focus:text-primary",
+        secondary: "focus:bg-secondary/10 dark:focus:bg-secondary/15 focus:text-primary",
+        accent: "focus:bg-accent/10 dark:focus:bg-accent/15 focus:text-primary",
+        destructive: "focus:bg-destructive/10 dark:focus:bg-destructive/15 focus:text-destructive"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+
+// src/components/DropdownMenu/index.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -293,7 +315,7 @@ var DropdownMenuSubContent = React2.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-950 p-1.5 text-primary shadow-xl dark:shadow-slate-900/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-lg border border-black/6 dark:border-white/8 bg-popover p-1.5 text-primary shadow-xl dark:shadow-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -306,7 +328,7 @@ var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...pro
     ref,
     sideOffset,
     className: cn(
-      "glass z-50 min-w-[8rem] overflow-hidden p-2 text-primary rounded-2xl border border-black/8  transition-colors  shadow-xl dark:shadow-slate-900/50",
+      "bg-popover z-50 min-w-32 overflow-hidden p-2 text-primary rounded-2xl border border-black/6 dark:border-white/8 transition-colors shadow-xl dark:shadow-black/40",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
@@ -314,25 +336,22 @@ var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...pro
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React2.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+var DropdownMenuItem = React2.forwardRef(({ className, inset, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   DropdownMenuPrimitive.Item,
   {
     ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-      inset && "pl-8",
-      className
-    ),
+    className: cn(dropdownMenuItemVariants({ variant }), inset && "pl-8", className),
     ...props
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React2.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+var DropdownMenuCheckboxItem = React2.forwardRef(({ className, children, checked, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      dropdownMenuItemVariants({ variant }),
+      "py-1.5 pl-8 pr-2",
       className
     ),
     checked,
@@ -344,12 +363,13 @@ var DropdownMenuCheckboxItem = React2.forwardRef(({ className, children, checked
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+var DropdownMenuRadioItem = React2.forwardRef(({ className, children, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      dropdownMenuItemVariants({ variant }),
+      "py-1.5 pl-8 pr-2",
       className
     ),
     ...props,
@@ -398,7 +418,7 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/components/Field.tsx
 var import_react = require("react");
-var import_class_variance_authority2 = require("class-variance-authority");
+var import_class_variance_authority3 = require("class-variance-authority");
 var import_react_separator = require("@radix-ui/react-separator");
 var import_radix_ui2 = require("radix-ui");
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -449,7 +469,7 @@ function FieldGroup({ className, ...props }) {
     }
   );
 }
-var fieldVariants = (0, import_class_variance_authority2.cva)(
+var fieldVariants = (0, import_class_variance_authority3.cva)(
   "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
   {
     variants: {
@@ -611,7 +631,7 @@ function FieldError({
   );
 }
 
-// src/components/labels.tsx
+// src/components/Labels.tsx
 var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function Label3({
@@ -631,7 +651,7 @@ function Label3({
   );
 }
 
-// src/components/pagination.tsx
+// src/components/Pagination.tsx
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function Pagination({ className, ...props }) {
@@ -688,7 +708,7 @@ function PaginationPrevious({
     {
       "aria-label": "Go to previous page",
       size: "1",
-      className: cn("gap-1 px-2.5 sm:pl-2.5", className),
+      className: cn("flex flex-row items-center gap-1 px-2.5 sm:pl-2.5", className),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ChevronLeftIcon, {}),
@@ -706,7 +726,7 @@ function PaginationNext({
     {
       "aria-label": "Go to next page",
       size: "1",
-      className: cn("gap-1 px-2.5 sm:pr-2.5", className),
+      className: cn("flex flex-row items-center gap-1 px-2.5 sm:pr-2.5", className),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hidden sm:block", children: "Next" }),
@@ -734,29 +754,48 @@ function PaginationEllipsis({
   );
 }
 
-// src/components/popover.tsx
+// src/components/Popover.tsx
 var React3 = __toESM(require("react"), 1);
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React3.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-  PopoverPrimitive.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "z-50 w-72 p-2 text-primary rounded-2xl border border-black/8 glass transition-colors  shadow-xl dark:shadow-slate-900/50 outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
+var PopoverContent = React3.forwardRef(
+  ({
+    className,
+    align = "center",
+    sideOffset = 6,
+    collisionPadding = 8,
     ...props
-  }
-) }));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    PopoverPrimitive.Content,
+    {
+      ref,
+      align,
+      sideOffset,
+      collisionPadding,
+      className: cn(
+        // base
+        "z-50 w-72 rounded-md border border-black/10 dark:border-white/10 bg-[#f87171] p-4 text-primary shadow-md outline-none",
+        // animations
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+        "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
+        // slide
+        "data-[side=bottom]:slide-in-from-top-2",
+        "data-[side=top]:slide-in-from-bottom-2",
+        "data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2",
+        className
+      ),
+      ...props
+    }
+  ) })
+);
+PopoverContent.displayName = "PopoverContent";
 
-// src/components/tooltip.tsx
+// src/components/Tooltip.tsx
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function TooltipProvider({
@@ -807,8 +846,8 @@ function TooltipContent({
 }
 
 // src/components/Card/card.styles.ts
-var import_class_variance_authority3 = require("class-variance-authority");
-var cardVariants = (0, import_class_variance_authority3.cva)(
+var import_class_variance_authority4 = require("class-variance-authority");
+var cardVariants = (0, import_class_variance_authority4.cva)(
   `
   rounded-lg border p-4 transition-all duration-300
   `,
@@ -836,8 +875,8 @@ function Card({ variant, className, ...props }) {
 }
 
 // src/components/Input/input.styles.ts
-var import_class_variance_authority4 = require("class-variance-authority");
-var inputVariants = (0, import_class_variance_authority4.cva)(
+var import_class_variance_authority5 = require("class-variance-authority");
+var inputVariants = (0, import_class_variance_authority5.cva)(
   `
   w-full rounded-md border transition-colors
   bg-white dark:bg-white/5
@@ -5982,8 +6021,8 @@ var Separator3 = SelectSeparator;
 var import_lucide_react3 = require("lucide-react");
 
 // src/components/Select/select.styles.ts
-var import_class_variance_authority5 = require("class-variance-authority");
-var selectTriggerVariants = (0, import_class_variance_authority5.cva)(
+var import_class_variance_authority6 = require("class-variance-authority");
+var selectTriggerVariants = (0, import_class_variance_authority6.cva)(
   `
   flex w-full items-center justify-between gap-2 rounded-md border transition-colors
   bg-white dark:bg-white/5
@@ -6002,6 +6041,30 @@ var selectTriggerVariants = (0, import_class_variance_authority5.cva)(
           focus:border-black/20 dark:focus:border-white/20
           focus:ring-black/10 dark:focus:ring-white/10
         `,
+        primary: `
+          border-primary/30 dark:border-primary/25
+          hover:border-primary/50 dark:hover:border-primary/40
+          focus:border-primary/50 dark:focus:border-primary/40
+          focus:ring-primary/20 dark:focus:ring-primary/15
+        `,
+        secondary: `
+          border-secondary/30 dark:border-secondary/25
+          hover:border-secondary/50 dark:hover:border-secondary/40
+          focus:border-secondary/50 dark:focus:border-secondary/40
+          focus:ring-secondary/20 dark:focus:ring-secondary/15
+        `,
+        accent: `
+          border-accent/30 dark:border-accent/25
+          hover:border-accent/50 dark:hover:border-accent/40
+          focus:border-accent/50 dark:focus:border-accent/40
+          focus:ring-accent/20 dark:focus:ring-accent/15
+        `,
+        destructive: `
+          border-destructive/40 dark:border-destructive/35
+          hover:border-destructive/60 dark:hover:border-destructive/50
+          focus:border-destructive/60 dark:focus:border-destructive/50
+          focus:ring-destructive/20 dark:focus:ring-destructive/15
+        `,
         error: `
           border-red-500 dark:border-red-400
           focus:border-red-600 dark:focus:border-red-500
@@ -6020,6 +6083,23 @@ var selectTriggerVariants = (0, import_class_variance_authority5.cva)(
     }
   }
 );
+var selectItemVariants = (0, import_class_variance_authority6.cva)(
+  "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "focus:bg-black/5 dark:focus:bg-white/6 focus:text-primary",
+        primary: "focus:bg-primary/10 dark:focus:bg-primary/15 focus:text-primary",
+        secondary: "focus:bg-secondary/10 dark:focus:bg-secondary/15 focus:text-primary",
+        accent: "focus:bg-accent/10 dark:focus:bg-accent/15 focus:text-primary",
+        destructive: "focus:bg-destructive/10 dark:focus:bg-destructive/15 focus:text-destructive"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
 
 // src/components/Select/index.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
@@ -6064,7 +6144,7 @@ var SelectContent2 = React34.forwardRef(({ className, children, position = "popp
   {
     ref,
     className: cn(
-      "bg-card z-50 min-w-[8rem] overflow-hidden rounded-2xl border border-black/8 p-2 text-primary shadow-xl",
+      "bg-popover z-50 min-w-32 overflow-hidden rounded-2xl border border-black/6 dark:border-white/8 p-2 text-primary shadow-xl dark:shadow-black/40",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
@@ -6096,16 +6176,11 @@ var SelectLabel2 = React34.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 SelectLabel2.displayName = Label4.displayName;
-var SelectItem2 = React34.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+var SelectItem2 = React34.forwardRef(({ className, children, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
   Item2,
   {
     ref,
-    className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-      "focus:bg-primary focus:text-primary",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
+    className: cn(selectItemVariants({ variant }), className),
     ...props,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ItemIndicator2, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react3.Check, { className: "size-4" }) }) }),
@@ -6128,14 +6203,14 @@ SelectSeparator2.displayName = Separator3.displayName;
 var import_react6 = require("react");
 
 // src/components/Tabs/tabs.styles.ts
-var import_class_variance_authority6 = require("class-variance-authority");
-var tabsVariants = (0, import_class_variance_authority6.cva)(
+var import_class_variance_authority7 = require("class-variance-authority");
+var tabsVariants = (0, import_class_variance_authority7.cva)(
   `
   inline-flex items-center gap-1 rounded-lg p-1
   border border-black/8 bg-white/50 dark:border-white/10 dark:bg-white/5
   `
 );
-var tabVariants = (0, import_class_variance_authority6.cva)(
+var tabVariants = (0, import_class_variance_authority7.cva)(
   `
   inline-flex items-center justify-center px-4 py-2 text-sm font-medium
   rounded-md transition-colors duration-200
@@ -6188,8 +6263,8 @@ function TabsContent({ value, children, className }) {
 }
 
 // src/components/Text/text.styles.ts
-var import_class_variance_authority7 = require("class-variance-authority");
-var textVariants = (0, import_class_variance_authority7.cva)(`text-primary`, {
+var import_class_variance_authority8 = require("class-variance-authority");
+var textVariants = (0, import_class_variance_authority8.cva)(`text-primary`, {
   variants: {
     size: {
       sm: "text-sm",
@@ -6550,7 +6625,7 @@ var ControlledPagination = ({
       )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-4 text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: countLabel(startItem, endItem, totalCount) }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "w-full", children: countLabel(startItem, endItem, totalCount) }),
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Pagination, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(PaginationContent, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           PaginationPrevious,
@@ -6965,8 +7040,9 @@ var preset = {
       },
       backgroundColor: {
         hero: "var(--color-bg-hero)",
-        card: "var(--surface-card)",
-        cardHover: "var(--surface-card-hover)"
+        card: "var(--card)",
+        cardHover: "var(--card-hover)",
+        popover: "var(--popover)"
       },
       backgroundImage: {
         "gradient-radial-green": "radial-gradient(circle at 20% 20%, rgba(167, 213, 0, 0.15), transparent 35%)",
@@ -6976,67 +7052,6 @@ var preset = {
     }
   }
 };
-preset.safelist = [
-  // ─── Button: filled (default) ──────────────────────────────────────────────
-  "bg-primary",
-  "bg-secondary",
-  "bg-accent",
-  "bg-destructive",
-  "text-primary-foreground",
-  "text-secondary-foreground",
-  "text-accent-foreground",
-  "text-destructive-foreground",
-  "hover:bg-primary-hover",
-  "hover:bg-secondary-hover",
-  "hover:bg-destructive-hover",
-  "shadow-sm",
-  // ─── Button: outline ───────────────────────────────────────────────────────
-  "border-2",
-  "border-primary",
-  "border-secondary",
-  "border-accent",
-  "border-destructive",
-  "text-primary",
-  "text-secondary",
-  "text-accent",
-  "text-destructive",
-  "hover:bg-primary",
-  "hover:bg-secondary",
-  "hover:bg-accent",
-  "hover:bg-destructive",
-  "hover:text-primary-foreground",
-  "hover:text-secondary-foreground",
-  "hover:text-accent-foreground",
-  "hover:text-destructive-foreground",
-  "dark:border-primary",
-  "dark:text-primary",
-  // ─── Button: ghost ─────────────────────────────────────────────────────────
-  "hover:bg-primary/10",
-  "dark:hover:bg-primary/20",
-  "hover:bg-secondary/10",
-  "hover:bg-accent/10",
-  "hover:bg-destructive/10",
-  // ─── Button: link ──────────────────────────────────────────────────────────
-  "underline",
-  "hover:text-primary-hover",
-  "hover:text-secondary-hover",
-  // ─── Card: border opacity ──────────────────────────────────────────────────
-  "border-primary/10",
-  "border-primary/20",
-  "border-primary/30",
-  "border-primary/40",
-  "border-primary/50",
-  "hover:border-primary/20",
-  "hover:border-primary/50",
-  "dark:border-primary/20",
-  "dark:border-primary/40",
-  "border-accent/10",
-  // ─── Card: background opacity ──────────────────────────────────────────────
-  "bg-primary/10",
-  "bg-primary/20",
-  "hover:shadow-md",
-  "hover:shadow-xl"
-];
 var tailwind_preset_default = preset;
 
 // src/lib/tokens.ts

package/dist/index.d.cts

@@ -10,9 +10,8 @@ import { Button as Button$1 } from '@radix-ui/themes';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as SelectPrimitive from '@radix-ui/react-select';
-export { default as tailwindPreset } from './tailwind.preset.cjs';
+import { Config } from 'tailwindcss';
 import { ClassValue } from 'clsx';
-import 'tailwindcss';
 
 declare const buttonVariants: (props?: {
     variant?: "default" | "outline" | "ghost" | "link";
@@ -29,6 +28,11 @@ declare function CollapsibleRoot({ ...props }: React.ComponentProps<typeof Colla
 declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof Collapsible.Trigger>): react_jsx_runtime.JSX.Element;
 declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof Collapsible.Content>): react_jsx_runtime.JSX.Element;
 
+declare const dropdownMenuItemVariants: (props?: {
+    variant?: "default" | "primary" | "secondary" | "accent" | "destructive";
+} & class_variance_authority_types.ClassProp) => string;
+type DropdownMenuItemVariantProps = VariantProps<typeof dropdownMenuItemVariants>;
+
 declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
@@ -40,11 +44,11 @@ declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<Dropd
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & DropdownMenuItemVariantProps & {
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & DropdownMenuItemVariantProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & DropdownMenuItemVariantProps & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
@@ -115,10 +119,15 @@ type InputVariantProps = {
 type InputProps = Omit<React.ComponentProps<'input'>, 'size'> & InputVariantProps;
 declare function Input({ size, variant, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 
-type SelectTriggerVariantProps = {
-    variant?: 'default' | 'error';
-    size?: 'sm' | 'md' | 'lg';
-};
+declare const selectTriggerVariants: (props?: {
+    variant?: "default" | "primary" | "secondary" | "accent" | "destructive" | "error";
+    size?: "sm" | "lg" | "md";
+} & class_variance_authority_types.ClassProp) => string;
+declare const selectItemVariants: (props?: {
+    variant?: "default" | "primary" | "secondary" | "accent" | "destructive";
+} & class_variance_authority_types.ClassProp) => string;
+type SelectTriggerVariantProps = VariantProps<typeof selectTriggerVariants>;
+type SelectItemVariantProps = VariantProps<typeof selectItemVariants>;
 
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
@@ -128,7 +137,7 @@ declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectP
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & SelectItemVariantProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 type TabsProps = {
@@ -271,6 +280,8 @@ interface CustomComponentType {
 
 declare const ControlledTable: ({ tableSource, tableConfig, filteredParams, isSelectable, selectedRows, rowUniqueKey, emptyMessage, withOpenAction, withEditAction, withDownloadAction, withCloneAction, withRemoveAction, withPagination, loading, toolbarActions, openPath, handleClickIcon, handleOpenAction, handleEditAction, handleDownloadAction, handleRemoveAction, setSelectedRows, setFilteredParams, onSearchCallback, onFilterCallback, onRowClick, getDataOnChange, }: CommonTableProps) => react_jsx_runtime.JSX.Element;
 
+declare const preset: Config;
+
 /**
  * Auxalia Design System - Color Tokens
  *
@@ -362,4 +373,4 @@ declare const AuxaliaTokens: {
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AuxaliaTokens, Button, type ButtonProps, Card, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, type CommonTableProps, type CustomComponentType, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOption, FieldSeparator, FieldSet, FieldTitle, type FilterField, Input, Label, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type QueryParams, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type SortObj, type TableConfig, type TableField, ControlledTable as TableView, Tabs, TabsContent, TabsList, TabsTrigger, Text, type ToolbarActionsProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, cn };
+export { AuxaliaTokens, Button, type ButtonProps, Card, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, type CommonTableProps, type CustomComponentType, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOption, FieldSeparator, FieldSet, FieldTitle, type FilterField, Input, Label, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type QueryParams, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type SortObj, type TableConfig, type TableField, ControlledTable as TableView, Tabs, TabsContent, TabsList, TabsTrigger, Text, type ToolbarActionsProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, cn, preset as tailwindPreset };

package/dist/index.d.ts

@@ -10,9 +10,8 @@ import { Button as Button$1 } from '@radix-ui/themes';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as SelectPrimitive from '@radix-ui/react-select';
-export { default as tailwindPreset } from './tailwind.preset.js';
+import { Config } from 'tailwindcss';
 import { ClassValue } from 'clsx';
-import 'tailwindcss';
 
 declare const buttonVariants: (props?: {
     variant?: "default" | "outline" | "ghost" | "link";
@@ -29,6 +28,11 @@ declare function CollapsibleRoot({ ...props }: React.ComponentProps<typeof Colla
 declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof Collapsible.Trigger>): react_jsx_runtime.JSX.Element;
 declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof Collapsible.Content>): react_jsx_runtime.JSX.Element;
 
+declare const dropdownMenuItemVariants: (props?: {
+    variant?: "default" | "primary" | "secondary" | "accent" | "destructive";
+} & class_variance_authority_types.ClassProp) => string;
+type DropdownMenuItemVariantProps = VariantProps<typeof dropdownMenuItemVariants>;
+
 declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
@@ -40,11 +44,11 @@ declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<Dropd
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & DropdownMenuItemVariantProps & {
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & DropdownMenuItemVariantProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & DropdownMenuItemVariantProps & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
@@ -115,10 +119,15 @@ type InputVariantProps = {
 type InputProps = Omit<React.ComponentProps<'input'>, 'size'> & InputVariantProps;
 declare function Input({ size, variant, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 
-type SelectTriggerVariantProps = {
-    variant?: 'default' | 'error';
-    size?: 'sm' | 'md' | 'lg';
-};
+declare const selectTriggerVariants: (props?: {
+    variant?: "default" | "primary" | "secondary" | "accent" | "destructive" | "error";
+    size?: "sm" | "lg" | "md";
+} & class_variance_authority_types.ClassProp) => string;
+declare const selectItemVariants: (props?: {
+    variant?: "default" | "primary" | "secondary" | "accent" | "destructive";
+} & class_variance_authority_types.ClassProp) => string;
+type SelectTriggerVariantProps = VariantProps<typeof selectTriggerVariants>;
+type SelectItemVariantProps = VariantProps<typeof selectItemVariants>;
 
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
@@ -128,7 +137,7 @@ declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectP
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & SelectItemVariantProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 type TabsProps = {
@@ -271,6 +280,8 @@ interface CustomComponentType {
 
 declare const ControlledTable: ({ tableSource, tableConfig, filteredParams, isSelectable, selectedRows, rowUniqueKey, emptyMessage, withOpenAction, withEditAction, withDownloadAction, withCloneAction, withRemoveAction, withPagination, loading, toolbarActions, openPath, handleClickIcon, handleOpenAction, handleEditAction, handleDownloadAction, handleRemoveAction, setSelectedRows, setFilteredParams, onSearchCallback, onFilterCallback, onRowClick, getDataOnChange, }: CommonTableProps) => react_jsx_runtime.JSX.Element;
 
+declare const preset: Config;
+
 /**
  * Auxalia Design System - Color Tokens
  *
@@ -362,4 +373,4 @@ declare const AuxaliaTokens: {
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AuxaliaTokens, Button, type ButtonProps, Card, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, type CommonTableProps, type CustomComponentType, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOption, FieldSeparator, FieldSet, FieldTitle, type FilterField, Input, Label, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type QueryParams, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type SortObj, type TableConfig, type TableField, ControlledTable as TableView, Tabs, TabsContent, TabsList, TabsTrigger, Text, type ToolbarActionsProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, cn };
+export { AuxaliaTokens, Button, type ButtonProps, Card, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, type CommonTableProps, type CustomComponentType, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOption, FieldSeparator, FieldSet, FieldTitle, type FilterField, Input, Label, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type QueryParams, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type SortObj, type TableConfig, type TableField, ControlledTable as TableView, Tabs, TabsContent, TabsList, TabsTrigger, Text, type ToolbarActionsProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, cn, preset as tailwindPreset };

package/dist/index.js

@@ -1,8 +1,4 @@
-import {
-  tailwind_preset_default
-} from "./chunk-O6RHMFJG.js";
-
-// src/components/button.tsx
+// src/components/Button.tsx
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
@@ -14,7 +10,7 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-// src/components/button.tsx
+// src/components/Button.tsx
 import { jsx } from "react/jsx-runtime";
 var compoundVariants = [
   // FILLED - Using Auxalia Brand Colors
@@ -144,7 +140,7 @@ var Button = React.forwardRef(
 );
 Button.displayName = "Button";
 
-// src/components/collapsible.tsx
+// src/components/Collapsible.tsx
 import { Collapsible } from "radix-ui";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function CollapsibleRoot({
@@ -163,10 +159,32 @@ function CollapsibleContent({
   return /* @__PURE__ */ jsx2(Collapsible.Content, { className: "bg-red dark:bg-amber-50", "data-slot": "collapsible-content", ...props });
 }
 
-// src/components/dropdown-menu.tsx
+// src/components/DropdownMenu/index.tsx
 import * as React2 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
+
+// src/components/DropdownMenu/dropdown.styles.ts
+import { cva as cva2 } from "class-variance-authority";
+var dropdownMenuItemVariants = cva2(
+  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "focus:bg-black/5 dark:focus:bg-white/6 focus:text-primary",
+        primary: "focus:bg-primary/10 dark:focus:bg-primary/15 focus:text-primary",
+        secondary: "focus:bg-secondary/10 dark:focus:bg-secondary/15 focus:text-primary",
+        accent: "focus:bg-accent/10 dark:focus:bg-accent/15 focus:text-primary",
+        destructive: "focus:bg-destructive/10 dark:focus:bg-destructive/15 focus:text-destructive"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+
+// src/components/DropdownMenu/index.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -196,7 +214,7 @@ var DropdownMenuSubContent = React2.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-950 p-1.5 text-primary shadow-xl dark:shadow-slate-900/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-lg border border-black/6 dark:border-white/8 bg-popover p-1.5 text-primary shadow-xl dark:shadow-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -209,7 +227,7 @@ var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...pro
     ref,
     sideOffset,
     className: cn(
-      "glass z-50 min-w-[8rem] overflow-hidden p-2 text-primary rounded-2xl border border-black/8  transition-colors  shadow-xl dark:shadow-slate-900/50",
+      "bg-popover z-50 min-w-32 overflow-hidden p-2 text-primary rounded-2xl border border-black/6 dark:border-white/8 transition-colors shadow-xl dark:shadow-black/40",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
@@ -217,25 +235,22 @@ var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...pro
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React2.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx3(
+var DropdownMenuItem = React2.forwardRef(({ className, inset, variant, ...props }, ref) => /* @__PURE__ */ jsx3(
   DropdownMenuPrimitive.Item,
   {
     ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-      inset && "pl-8",
-      className
-    ),
+    className: cn(dropdownMenuItemVariants({ variant }), inset && "pl-8", className),
     ...props
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React2.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuCheckboxItem = React2.forwardRef(({ className, children, checked, variant, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      dropdownMenuItemVariants({ variant }),
+      "py-1.5 pl-8 pr-2",
       className
     ),
     checked,
@@ -247,12 +262,13 @@ var DropdownMenuCheckboxItem = React2.forwardRef(({ className, children, checked
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuRadioItem = React2.forwardRef(({ className, children, variant, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      dropdownMenuItemVariants({ variant }),
+      "py-1.5 pl-8 pr-2",
       className
     ),
     ...props,
@@ -301,7 +317,7 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/components/Field.tsx
 import { useMemo } from "react";
-import { cva as cva2 } from "class-variance-authority";
+import { cva as cva3 } from "class-variance-authority";
 import { Separator as Separator2 } from "@radix-ui/react-separator";
 import { Label as Label2 } from "radix-ui";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -352,7 +368,7 @@ function FieldGroup({ className, ...props }) {
     }
   );
 }
-var fieldVariants = cva2(
+var fieldVariants = cva3(
   "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
   {
     variants: {
@@ -514,7 +530,7 @@ function FieldError({
   );
 }
 
-// src/components/labels.tsx
+// src/components/Labels.tsx
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { jsx as jsx5 } from "react/jsx-runtime";
 function Label3({
@@ -534,7 +550,7 @@ function Label3({
   );
 }
 
-// src/components/pagination.tsx
+// src/components/Pagination.tsx
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -595,7 +611,7 @@ function PaginationPrevious({
     {
       "aria-label": "Go to previous page",
       size: "1",
-      className: cn("gap-1 px-2.5 sm:pl-2.5", className),
+      className: cn("flex flex-row items-center gap-1 px-2.5 sm:pl-2.5", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx6(ChevronLeftIcon, {}),
@@ -613,7 +629,7 @@ function PaginationNext({
     {
       "aria-label": "Go to next page",
       size: "1",
-      className: cn("gap-1 px-2.5 sm:pr-2.5", className),
+      className: cn("flex flex-row items-center gap-1 px-2.5 sm:pr-2.5", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx6("span", { className: "hidden sm:block", children: "Next" }),
@@ -641,29 +657,48 @@ function PaginationEllipsis({
   );
 }
 
-// src/components/popover.tsx
+// src/components/Popover.tsx
 import * as React3 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React3.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx7(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx7(
-  PopoverPrimitive.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "z-50 w-72 p-2 text-primary rounded-2xl border border-black/8 glass transition-colors  shadow-xl dark:shadow-slate-900/50 outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
+var PopoverContent = React3.forwardRef(
+  ({
+    className,
+    align = "center",
+    sideOffset = 6,
+    collisionPadding = 8,
     ...props
-  }
-) }));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+  }, ref) => /* @__PURE__ */ jsx7(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx7(
+    PopoverPrimitive.Content,
+    {
+      ref,
+      align,
+      sideOffset,
+      collisionPadding,
+      className: cn(
+        // base
+        "z-50 w-72 rounded-md border border-black/10 dark:border-white/10 bg-[#f87171] p-4 text-primary shadow-md outline-none",
+        // animations
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+        "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
+        // slide
+        "data-[side=bottom]:slide-in-from-top-2",
+        "data-[side=top]:slide-in-from-bottom-2",
+        "data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2",
+        className
+      ),
+      ...props
+    }
+  ) })
+);
+PopoverContent.displayName = "PopoverContent";
 
-// src/components/tooltip.tsx
+// src/components/Tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function TooltipProvider({
@@ -714,8 +749,8 @@ function TooltipContent({
 }
 
 // src/components/Card/card.styles.ts
-import { cva as cva3 } from "class-variance-authority";
-var cardVariants = cva3(
+import { cva as cva4 } from "class-variance-authority";
+var cardVariants = cva4(
   `
   rounded-lg border p-4 transition-all duration-300
   `,
@@ -743,8 +778,8 @@ function Card({ variant, className, ...props }) {
 }
 
 // src/components/Input/input.styles.ts
-import { cva as cva4 } from "class-variance-authority";
-var inputVariants = cva4(
+import { cva as cva5 } from "class-variance-authority";
+var inputVariants = cva5(
   `
   w-full rounded-md border transition-colors
   bg-white dark:bg-white/5
@@ -5889,8 +5924,8 @@ var Separator3 = SelectSeparator;
 import { Check as Check2, ChevronDown, ChevronUp } from "lucide-react";
 
 // src/components/Select/select.styles.ts
-import { cva as cva5 } from "class-variance-authority";
-var selectTriggerVariants = cva5(
+import { cva as cva6 } from "class-variance-authority";
+var selectTriggerVariants = cva6(
   `
   flex w-full items-center justify-between gap-2 rounded-md border transition-colors
   bg-white dark:bg-white/5
@@ -5909,6 +5944,30 @@ var selectTriggerVariants = cva5(
           focus:border-black/20 dark:focus:border-white/20
           focus:ring-black/10 dark:focus:ring-white/10
         `,
+        primary: `
+          border-primary/30 dark:border-primary/25
+          hover:border-primary/50 dark:hover:border-primary/40
+          focus:border-primary/50 dark:focus:border-primary/40
+          focus:ring-primary/20 dark:focus:ring-primary/15
+        `,
+        secondary: `
+          border-secondary/30 dark:border-secondary/25
+          hover:border-secondary/50 dark:hover:border-secondary/40
+          focus:border-secondary/50 dark:focus:border-secondary/40
+          focus:ring-secondary/20 dark:focus:ring-secondary/15
+        `,
+        accent: `
+          border-accent/30 dark:border-accent/25
+          hover:border-accent/50 dark:hover:border-accent/40
+          focus:border-accent/50 dark:focus:border-accent/40
+          focus:ring-accent/20 dark:focus:ring-accent/15
+        `,
+        destructive: `
+          border-destructive/40 dark:border-destructive/35
+          hover:border-destructive/60 dark:hover:border-destructive/50
+          focus:border-destructive/60 dark:focus:border-destructive/50
+          focus:ring-destructive/20 dark:focus:ring-destructive/15
+        `,
         error: `
           border-red-500 dark:border-red-400
           focus:border-red-600 dark:focus:border-red-500
@@ -5927,6 +5986,23 @@ var selectTriggerVariants = cva5(
     }
   }
 );
+var selectItemVariants = cva6(
+  "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "focus:bg-black/5 dark:focus:bg-white/6 focus:text-primary",
+        primary: "focus:bg-primary/10 dark:focus:bg-primary/15 focus:text-primary",
+        secondary: "focus:bg-secondary/10 dark:focus:bg-secondary/15 focus:text-primary",
+        accent: "focus:bg-accent/10 dark:focus:bg-accent/15 focus:text-primary",
+        destructive: "focus:bg-destructive/10 dark:focus:bg-destructive/15 focus:text-destructive"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
 
 // src/components/Select/index.tsx
 import { jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -5971,7 +6047,7 @@ var SelectContent2 = React34.forwardRef(({ className, children, position = "popp
   {
     ref,
     className: cn(
-      "bg-card z-50 min-w-[8rem] overflow-hidden rounded-2xl border border-black/8 p-2 text-primary shadow-xl",
+      "bg-popover z-50 min-w-32 overflow-hidden rounded-2xl border border-black/6 dark:border-white/8 p-2 text-primary shadow-xl dark:shadow-black/40",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
@@ -6003,16 +6079,11 @@ var SelectLabel2 = React34.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 SelectLabel2.displayName = Label4.displayName;
-var SelectItem2 = React34.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs6(
+var SelectItem2 = React34.forwardRef(({ className, children, variant, ...props }, ref) => /* @__PURE__ */ jsxs6(
   Item2,
   {
     ref,
-    className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-      "focus:bg-primary focus:text-primary",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
+    className: cn(selectItemVariants({ variant }), className),
     ...props,
     children: [
       /* @__PURE__ */ jsx23("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx23(ItemIndicator2, { children: /* @__PURE__ */ jsx23(Check2, { className: "size-4" }) }) }),
@@ -6035,14 +6106,14 @@ SelectSeparator2.displayName = Separator3.displayName;
 import { createContext as createContext4, useContext as useContext4 } from "react";
 
 // src/components/Tabs/tabs.styles.ts
-import { cva as cva6 } from "class-variance-authority";
-var tabsVariants = cva6(
+import { cva as cva7 } from "class-variance-authority";
+var tabsVariants = cva7(
   `
   inline-flex items-center gap-1 rounded-lg p-1
   border border-black/8 bg-white/50 dark:border-white/10 dark:bg-white/5
   `
 );
-var tabVariants = cva6(
+var tabVariants = cva7(
   `
   inline-flex items-center justify-center px-4 py-2 text-sm font-medium
   rounded-md transition-colors duration-200
@@ -6095,8 +6166,8 @@ function TabsContent({ value, children, className }) {
 }
 
 // src/components/Text/text.styles.ts
-import { cva as cva7 } from "class-variance-authority";
-var textVariants = cva7(`text-primary`, {
+import { cva as cva8 } from "class-variance-authority";
+var textVariants = cva8(`text-primary`, {
   variants: {
     size: {
       sm: "text-sm",
@@ -6480,7 +6551,7 @@ var ControlledPagination = ({
       )
     ] }),
     /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-4 text-sm", children: [
-      /* @__PURE__ */ jsx31("span", { children: countLabel(startItem, endItem, totalCount) }),
+      /* @__PURE__ */ jsx31("p", { className: "w-full", children: countLabel(startItem, endItem, totalCount) }),
       /* @__PURE__ */ jsx31(Pagination, { children: /* @__PURE__ */ jsxs10(PaginationContent, { children: [
         /* @__PURE__ */ jsx31(PaginationItem, { children: /* @__PURE__ */ jsx31(
           PaginationPrevious,
@@ -6807,6 +6878,108 @@ var ControlledTable = ({
 };
 var ControlledTable_default = ControlledTable;
 
+// src/tailwind.preset.ts
+var auxaliaColors = {
+  // Primary Brand Color - Fresh Green
+  "auxalia-green": {
+    50: "#f8fbf0",
+    100: "#f0f7e1",
+    200: "#ddf0c0",
+    300: "#c3e88a",
+    400: "#a7d500",
+    // Brand primary
+    500: "#93b800",
+    600: "#749400",
+    700: "#5a7600",
+    800: "#3d5000",
+    900: "#1f2800"
+  },
+  // Secondary Brand Color - Dark Blue
+  "auxalia-blue": {
+    50: "#f0f4f8",
+    100: "#e0eaf3",
+    200: "#c0d6e6",
+    300: "#8fb3d1",
+    400: "#5c8fb5",
+    500: "#3e6897",
+    // Brand secondary
+    600: "#2d5080",
+    700: "#1f3860",
+    800: "#142a47",
+    900: "#0a1628"
+  },
+  // Accent - Petrol Green
+  "auxalia-petrol": {
+    50: "#f0fbfc",
+    100: "#dff8f9",
+    200: "#bef1f3",
+    300: "#7fe6eb",
+    400: "#3fd9e1",
+    500: "#0f868b",
+    // Auxalia petrol
+    600: "#0a646b",
+    700: "#064952",
+    800: "#033539",
+    900: "#011f22"
+  },
+  // Supporting Colors
+  "auxalia-orange": "#dc6b39",
+  "auxalia-yellow": "#cfd12d",
+  "auxalia-red": "#93383a",
+  "auxalia-cyan": "#abbfbd"
+};
+var preset = {
+  darkMode: "class",
+  theme: {
+    extend: {
+      fontFamily: {
+        display: ['"Weissenhof Grotesk"', '"Calibri"', "sans-serif"],
+        body: ['"Weissenhof Grotesk"', '"Calibri"', "sans-serif"]
+      },
+      colors: {
+        // Primary using Auxalia Green — RGB channels enable Tailwind opacity modifiers (e.g. bg-primary/20)
+        primary: "rgb(var(--color-primary) / <alpha-value>)",
+        "primary-foreground": "var(--color-primary-foreground)",
+        "primary-hover": "var(--color-primary-hover)",
+        // Secondary using Auxalia Blue
+        secondary: "rgb(var(--color-secondary) / <alpha-value>)",
+        "secondary-foreground": "var(--color-secondary-foreground)",
+        "secondary-hover": "var(--color-secondary-hover)",
+        // Accent using Auxalia Petrol
+        accent: "rgb(var(--color-accent) / <alpha-value>)",
+        "accent-foreground": "var(--color-accent-foreground)",
+        surface: "var(--color-surface)",
+        "surface-hover": "var(--color-surface-hover)",
+        "surface-foreground": "var(--color-surface-foreground)",
+        destructive: "rgb(var(--color-destructive) / <alpha-value>)",
+        "destructive-hover": "var(--color-destructive-hover)",
+        "destructive-foreground": "var(--color-destructive-foreground)",
+        // Auxalia specific colors for direct use
+        "auxalia-green": auxaliaColors["auxalia-green"],
+        "auxalia-blue": auxaliaColors["auxalia-blue"],
+        "auxalia-petrol": auxaliaColors["auxalia-petrol"]
+      },
+      textColor: {
+        primary: "var(--color-text)",
+        secondary: "var(--color-text-secondary)",
+        muted: "var(--color-text-muted)"
+      },
+      backgroundColor: {
+        hero: "var(--color-bg-hero)",
+        card: "var(--card)",
+        cardHover: "var(--card-hover)",
+        popover: "var(--popover)"
+      },
+      backgroundImage: {
+        "gradient-radial-green": "radial-gradient(circle at 20% 20%, rgba(167, 213, 0, 0.15), transparent 35%)",
+        "gradient-radial-blue": "radial-gradient(circle at 80% 0%, rgba(62, 104, 151, 0.1), transparent 40%)",
+        "gradient-glow": "linear-gradient(to bottom right, rgba(6, 182, 212, 0.1), transparent, rgba(255, 255, 255, 0.05))"
+      }
+    }
+  }
+};
+var tailwind_preset_default = preset;
+
 // src/lib/tokens.ts
 var AuxaliaTokens = {
   // PRIMARY: BRAND GREEN

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auxalia-ui-kit",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "A React component library built with Radix UI and Tailwind CSS, designed to provide accessible and customizable UI components for modern web applications.",
   "license": "ISC",
   "author": {
@@ -67,6 +67,7 @@
     "dist/tokens.css"
   ],
   "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "vercel-build": "npm run build-storybook"