From a30dbd0a70e4d000f78a09e3b7673445c246b174 Mon Sep 17 00:00:00 2001
From: chongruei <chongruei@gmail.com>
Date: Wed, 20 Sep 2023 22:10:11 +0800
Subject: [PATCH] refactor: use collapseAdjacentVariantBorders to wrap an
 adjacent selector

---
 packages/core/theme/src/components/button.ts | 20 +++++++-------------
 packages/core/theme/src/utils/classes.ts     | 13 +++++++++++++
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/core/theme/src/components/button.ts b/packages/core/theme/src/components/button.ts
index 92136e9cc2..0b7cbc1aed 100644
--- a/packages/core/theme/src/components/button.ts
+++ b/packages/core/theme/src/components/button.ts
@@ -1,7 +1,7 @@
 import type {VariantProps} from "tailwind-variants";
 
 import {tv} from "../utils/tv";
-import {colorVariants, dataFocusVisibleClasses} from "../utils";
+import {collapseAdjacentVariantBorders, colorVariants, dataFocusVisibleClasses} from "../utils";
 
 /**
  * Button wrapper **Tailwind Variants** component
@@ -346,43 +346,37 @@ const button = tv({
       isInGroup: true,
       variant: ["ghost", "bordered"],
       color: "default",
-      className:
-        "nextui-adjacent-default [&+.nextui-adjacent-default]:ml-[calc(theme(borderWidth.medium)*-1)]",
+      className: collapseAdjacentVariantBorders.default,
     },
     {
       isInGroup: true,
       variant: ["ghost", "bordered"],
       color: "primary",
-      className:
-        "nextui-adjacent-primary [&+.nextui-adjacent-primary]:ml-[calc(theme(borderWidth.medium)*-1)]",
+      className: collapseAdjacentVariantBorders.primary,
     },
     {
       isInGroup: true,
       variant: ["ghost", "bordered"],
       color: "secondary",
-      className:
-        "nextui-adjacent-secondary [&+.nextui-adjacent-secondary]:ml-[calc(theme(borderWidth.medium)*-1)]",
+      className: collapseAdjacentVariantBorders.secondary,
     },
     {
       isInGroup: true,
       variant: ["ghost", "bordered"],
       color: "success",
-      className:
-        "nextui-adjacent-success [&+.nextui-adjacent-success]:ml-[calc(theme(borderWidth.medium)*-1)]",
+      className: collapseAdjacentVariantBorders.success,
     },
     {
       isInGroup: true,
       variant: ["ghost", "bordered"],
       color: "warning",
-      className:
-        "nextui-adjacent-warning [&+.nextui-adjacent-warning]:ml-[calc(theme(borderWidth.medium)*-1)]",
+      className: collapseAdjacentVariantBorders.warning,
     },
     {
       isInGroup: true,
       variant: ["ghost", "bordered"],
       color: "danger",
-      className:
-        "nextui-adjacent-danger [&+.nextui-adjacent-danger]:ml-[calc(theme(borderWidth.medium)*-1)]",
+      className: collapseAdjacentVariantBorders.danger,
     },
     {
       isIconOnly: true,
diff --git a/packages/core/theme/src/utils/classes.ts b/packages/core/theme/src/utils/classes.ts
index 30ab57a583..36f14aa78a 100644
--- a/packages/core/theme/src/utils/classes.ts
+++ b/packages/core/theme/src/utils/classes.ts
@@ -54,3 +54,16 @@ export const translateCenterClasses = [
 ];
 
 export const absoluteFullClasses = ["absolute", "inset-0"];
+
+/**
+ * This object defines CSS classes for collapsing adjacent variant borders.
+ * It includes classes for different variants like default, primary, secondary, etc.
+ */
+export const collapseAdjacentVariantBorders = {
+  default: ["[&+.border-medium.border-default]:ml-[calc(theme(borderWidth.medium)*-1)]"],
+  primary: ["[&+.border-medium.border-primary]:ml-[calc(theme(borderWidth.medium)*-1)]"],
+  secondary: ["[&+.border-medium.border-secondary]:ml-[calc(theme(borderWidth.medium)*-1)]"],
+  success: ["[&+.border-medium.border-success]:ml-[calc(theme(borderWidth.medium)*-1)]"],
+  warning: ["[&+.border-medium.border-warning]:ml-[calc(theme(borderWidth.medium)*-1)]"],
+  danger: ["[&+.border-medium.border-danger]:ml-[calc(theme(borderWidth.medium)*-1)]"],
+};