From 055b064dccac817f9f5de979dc6c1217d7f93adf Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sun, 15 Sep 2024 00:50:20 +0800
Subject: [PATCH 1/2] chore(theme): rollback PR3658

---
 .changeset/silent-ads-mix.md                  |  5 ++
 .../core/theme/src/components/autocomplete.ts |  8 +-
 .../core/theme/src/components/checkbox.ts     | 16 ++--
 .../core/theme/src/components/date-input.ts   | 33 ++++---
 .../core/theme/src/components/date-picker.ts  |  7 +-
 packages/core/theme/src/components/input.ts   | 86 +++++++++----------
 packages/core/theme/src/components/radio.ts   | 24 +++---
 packages/core/theme/src/components/select.ts  | 74 +++++++---------
 packages/core/theme/src/components/toggle.ts  | 53 +++++-------
 9 files changed, 145 insertions(+), 161 deletions(-)
 create mode 100644 .changeset/silent-ads-mix.md

diff --git a/.changeset/silent-ads-mix.md b/.changeset/silent-ads-mix.md
new file mode 100644
index 0000000000..c63ff68c00
--- /dev/null
+++ b/.changeset/silent-ads-mix.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+remove tw nested group (rollback PR3658)
diff --git a/packages/core/theme/src/components/autocomplete.ts b/packages/core/theme/src/components/autocomplete.ts
index 2175610722..a1c6af6a9b 100644
--- a/packages/core/theme/src/components/autocomplete.ts
+++ b/packages/core/theme/src/components/autocomplete.ts
@@ -4,7 +4,7 @@ import {tv} from "../utils/tv";
 
 const autocomplete = tv({
   slots: {
-    base: "group/autocomplete inline-flex flex-column w-full",
+    base: "group inline-flex flex-column w-full",
     listboxWrapper: "scroll-py-6 max-h-64 w-full",
     listbox: "",
     popoverContent: "w-full p-1 overflow-hidden",
@@ -16,14 +16,14 @@ const autocomplete = tv({
       "opacity-0",
       "pointer-events-none",
       "text-default-500",
-      "group-data-[invalid=true]/autocomplete:text-danger",
+      "group-data-[invalid=true]:text-danger",
       "data-[visible=true]:opacity-100", // on mobile is always visible when there is a value
       "data-[visible=true]:pointer-events-auto",
       "data-[visible=true]:cursor-pointer",
       "sm:data-[visible=true]:opacity-0", // only visible on hover
       "sm:data-[visible=true]:pointer-events-none",
-      "sm:group-data-[hover=true]:data-[visible=true]/autocomplete:opacity-100",
-      "sm:group-data-[hover=true]:data-[visible=true]/autocomplete:pointer-events-auto",
+      "sm:group-data-[hover=true]:data-[visible=true]:opacity-100",
+      "sm:group-data-[hover=true]:data-[visible=true]:pointer-events-auto",
     ],
     selectorButton: "text-medium",
   },
diff --git a/packages/core/theme/src/components/checkbox.ts b/packages/core/theme/src/components/checkbox.ts
index 9071df044f..7ebf311c7d 100644
--- a/packages/core/theme/src/components/checkbox.ts
+++ b/packages/core/theme/src/components/checkbox.ts
@@ -21,7 +21,7 @@ import {groupDataFocusVisibleClasses} from "../utils";
  */
 const checkbox = tv({
   slots: {
-    base: "group/checkbox relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
+    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
     wrapper: [
       "relative",
       "inline-flex",
@@ -44,14 +44,14 @@ const checkbox = tv({
       "after:scale-50",
       "after:opacity-0",
       "after:origin-center",
-      "group-data-[selected=true]/checkbox:after:scale-100",
-      "group-data-[selected=true]/checkbox:after:opacity-100",
+      "group-data-[selected=true]:after:scale-100",
+      "group-data-[selected=true]:after:opacity-100",
       // hover
-      "group-data-[hover=true]/checkbox:before:bg-default-100",
+      "group-data-[hover=true]:before:bg-default-100",
       // focus ring
       ...groupDataFocusVisibleClasses,
     ],
-    icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]/checkbox:opacity-100",
+    icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]:opacity-100",
     label: "relative text-foreground select-none",
   },
   variants: {
@@ -147,8 +147,8 @@ const checkbox = tv({
           "before:bg-foreground",
           "before:w-0",
           "before:h-0.5",
-          "group-data-[selected=true]/checkbox:opacity-60",
-          "group-data-[selected=true]/checkbox:before:w-full",
+          "group-data-[selected=true]:opacity-60",
+          "group-data-[selected=true]:before:w-full",
         ],
       },
     },
@@ -172,7 +172,7 @@ const checkbox = tv({
       false: {
         wrapper: [
           "before:transition-colors",
-          "group-data-[pressed=true]/checkbox:scale-95",
+          "group-data-[pressed=true]:scale-95",
           "transition-transform",
           "after:transition-transform-opacity",
           "after:!ease-linear",
diff --git a/packages/core/theme/src/components/date-input.ts b/packages/core/theme/src/components/date-input.ts
index b4f4fb54b0..1036491eec 100644
--- a/packages/core/theme/src/components/date-input.ts
+++ b/packages/core/theme/src/components/date-input.ts
@@ -9,13 +9,13 @@ import {tv} from "../utils/tv";
  */
 const dateInput = tv({
   slots: {
-    base: "group/dateinput flex flex-col",
+    base: "group flex flex-col",
     label: [
       "block subpixel-antialiased text-small text-default-600",
       // isRequired=true
-      "group-data-[required=true]/dateinput:after:content-['*'] group-data-[required=true]/dateinput:after:text-danger group-data-[required=true]/dateinput:after:ml-0.5",
+      "group-data-[required=true]:after:content-['*'] group-data-[required=true]:after:text-danger group-data-[required=true]:after:ml-0.5",
       // isInValid=true
-      "group-data-[invalid=true]/dateinput:text-danger",
+      "group-data-[invalid=true]:text-danger",
     ],
     inputWrapper: [
       "relative px-3 gap-3 w-full inline-flex flex-row items-center",
@@ -25,10 +25,10 @@ const dateInput = tv({
     innerWrapper: [
       "flex items-center text-default-400 w-full gap-x-2 h-6",
       // isInValid=true
-      "group-data-[invalid=true]/dateinput:text-danger",
+      "group-data-[invalid=true]:text-danger",
     ], // this wraps the input and the start/end content
     segment: [
-      "group/dateinput first:-ml-0.5 [&:not(:first-child)]:-ml-1 px-0.5 my-auto box-content tabular-nums text-start",
+      "group first:-ml-0.5 [&:not(:first-child)]:-ml-1 px-0.5 my-auto box-content tabular-nums text-start",
       "inline-block outline-none focus:shadow-sm rounded-md",
       "text-foreground-500 data-[editable=true]:text-foreground",
       "data-[editable=true]:data-[placeholder=true]:text-foreground-500",
@@ -37,8 +37,7 @@ const dateInput = tv({
       "data-[invalid=true]:focus:bg-danger-400/50 dark:data-[invalid=true]:focus:bg-danger-400/20",
       "data-[invalid=true]:data-[editable=true]:focus:text-danger",
     ],
-    helperWrapper:
-      "hidden group-data-[has-helper=true]/dateinput:flex p-1 relative flex-col gap-1.5",
+    helperWrapper: "hidden group-data-[has-helper=true]:flex p-1 relative flex-col gap-1.5",
     description: "text-tiny text-foreground-400",
     errorMessage: "text-tiny text-danger",
   },
@@ -50,9 +49,9 @@ const dateInput = tv({
           "hover:bg-default-200",
           "focus-within:hover:bg-default-100",
           // isInvalid=true
-          "group-data-[invalid=true]/dateinput:bg-danger-50",
-          "group-data-[invalid=true]/dateinput:hover:bg-danger-100",
-          "group-data-[invalid=true]/dateinput:focus-within:hover:bg-danger-50",
+          "group-data-[invalid=true]:bg-danger-50",
+          "group-data-[invalid=true]:hover:bg-danger-100",
+          "group-data-[invalid=true]:focus-within:hover:bg-danger-50",
         ],
       },
       faded: {
@@ -62,9 +61,9 @@ const dateInput = tv({
           "border-default-200",
           "hover:border-default-400",
           // isInvalid=true
-          "group-data-[invalid=true]/dateinput:bg-danger-50",
-          "group-data-[invalid=true]/dateinput:hover:bg-danger-100",
-          "group-data-[invalid=true]/dateinput:focus-within:hover:bg-danger-50",
+          "group-data-[invalid=true]:bg-danger-50",
+          "group-data-[invalid=true]:hover:bg-danger-100",
+          "group-data-[invalid=true]:focus-within:hover:bg-danger-50",
         ],
       },
       bordered: {
@@ -75,9 +74,9 @@ const dateInput = tv({
           "focus-within:border-default-foreground",
           "focus-within:hover:border-default-foreground",
           // isInvalid=true
-          "group-data-[invalid=true]/dateinput:border-danger",
-          "group-data-[invalid=true]/dateinput:hover:border-danger",
-          "group-data-[invalid=true]/dateinput:focus-within:hover:border-danger",
+          "group-data-[invalid=true]:border-danger",
+          "group-data-[invalid=true]:hover:border-danger",
+          "group-data-[invalid=true]:focus-within:hover:border-danger",
         ],
       },
       underlined: {
@@ -103,7 +102,7 @@ const dateInput = tv({
           "after:h-[2px]",
           "focus-within:after:w-full",
           // isInvalid=true
-          "group-data-[invalid=true]/dateinput:after:bg-danger",
+          "group-data-[invalid=true]:after:bg-danger",
         ],
       },
     },
diff --git a/packages/core/theme/src/components/date-picker.ts b/packages/core/theme/src/components/date-picker.ts
index 1fb3ea2954..7a0ebd4dfe 100644
--- a/packages/core/theme/src/components/date-picker.ts
+++ b/packages/core/theme/src/components/date-picker.ts
@@ -9,7 +9,7 @@ import {tv} from "../utils/tv";
  */
 const datePicker = tv({
   slots: {
-    base: "group/datepicker w-full",
+    base: "group w-full",
     selectorButton: "-mr-2 text-inherit",
     selectorIcon: "text-lg text-inherit pointer-events-none flex-shrink-0",
     popoverContent: "p-0 w-full",
@@ -23,10 +23,9 @@ const datePicker = tv({
 const dateRangePicker = tv({
   extend: datePicker,
   slots: {
-    calendar: "group/daterangepicker",
+    calendar: "group",
     bottomContent: "flex flex-col gap-y-2",
-    timeInputWrapper:
-      "flex flex-col group-data-[has-multiple-months=true]/daterangepicker:flex-row",
+    timeInputWrapper: "flex flex-col group-data-[has-multiple-months=true]:flex-row",
     separator: "-mx-1 text-inherit",
   },
 });
diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts
index bead55572b..43c0741982 100644
--- a/packages/core/theme/src/components/input.ts
+++ b/packages/core/theme/src/components/input.ts
@@ -23,7 +23,7 @@ import {dataFocusVisibleClasses, groupDataFocusVisibleClasses} from "../utils";
  */
 const input = tv({
   slots: {
-    base: "group/input flex flex-col data-[hidden=true]:hidden",
+    base: "group flex flex-col data-[hidden=true]:hidden",
     label: [
       "absolute",
       "z-10",
@@ -65,7 +65,7 @@ const input = tv({
       // focus ring
       ...dataFocusVisibleClasses,
     ],
-    helperWrapper: "hidden group-data-[has-helper=true]/input:flex p-1 relative flex-col gap-1.5",
+    helperWrapper: "hidden group-data-[has-helper=true]:flex p-1 relative flex-col gap-1.5",
     description: "text-tiny text-foreground-400",
     errorMessage: "text-tiny text-danger",
   },
@@ -75,7 +75,7 @@ const input = tv({
         inputWrapper: [
           "bg-default-100",
           "data-[hover=true]:bg-default-200",
-          "group-data-[focus=true]/input:bg-default-100",
+          "group-data-[focus=true]:bg-default-100",
         ],
       },
       faded: {
@@ -85,14 +85,14 @@ const input = tv({
           "border-default-200",
           "data-[hover=true]:border-default-400",
         ],
-        value: "group-data-[has-value=true]/input:text-default-foreground",
+        value: "group-data-[has-value=true]:text-default-foreground",
       },
       bordered: {
         inputWrapper: [
           "border-medium",
           "border-default-200",
           "data-[hover=true]:border-default-400",
-          "group-data-[focus=true]/input:border-default-foreground",
+          "group-data-[focus=true]:border-default-foreground",
         ],
       },
       underlined: {
@@ -116,10 +116,10 @@ const input = tv({
           "after:-translate-x-1/2",
           "after:-bottom-[2px]",
           "after:h-[2px]",
-          "group-data-[focus=true]/input:after:w-full",
+          "group-data-[focus=true]:after:w-full",
         ],
         innerWrapper: "pb-1",
-        label: "group-data-[filled-within=true]/input:text-foreground",
+        label: "group-data-[filled-within=true]:text-foreground",
       },
     },
     color: {
@@ -178,7 +178,7 @@ const input = tv({
       inside: {
         label: "text-tiny cursor-text",
         inputWrapper: "flex-col items-start justify-center gap-0",
-        innerWrapper: "group-data-[has-label=true]/input:items-end",
+        innerWrapper: "group-data-[has-label=true]:items-end",
       },
     },
     fullWidth: {
@@ -215,7 +215,7 @@ const input = tv({
       true: {
         label: "relative",
         inputWrapper: "!h-auto",
-        innerWrapper: "items-start group-data-[has-label=true]/input:items-start",
+        innerWrapper: "items-start group-data-[has-label=true]:items-start",
         input: "resize-none data-[hide-scroll=true]:scrollbar-hide",
       },
     },
@@ -253,7 +253,7 @@ const input = tv({
       variant: "flat",
       color: "default",
       class: {
-        input: "group-data-[has-value=true]/input:text-default-foreground",
+        input: "group-data-[has-value=true]:text-default-foreground",
       },
     },
     {
@@ -264,7 +264,7 @@ const input = tv({
           "bg-primary-50",
           "data-[hover=true]:bg-primary-100",
           "text-primary",
-          "group-data-[focus=true]/input:bg-primary-50",
+          "group-data-[focus=true]:bg-primary-50",
           "placeholder:text-primary",
         ],
         input: "placeholder:text-primary",
@@ -279,7 +279,7 @@ const input = tv({
           "bg-secondary-50",
           "text-secondary",
           "data-[hover=true]:bg-secondary-100",
-          "group-data-[focus=true]/input:bg-secondary-50",
+          "group-data-[focus=true]:bg-secondary-50",
           "placeholder:text-secondary",
         ],
         input: "placeholder:text-secondary",
@@ -297,7 +297,7 @@ const input = tv({
           "placeholder:text-success-600",
           "dark:placeholder:text-success",
           "data-[hover=true]:bg-success-100",
-          "group-data-[focus=true]/input:bg-success-50",
+          "group-data-[focus=true]:bg-success-50",
         ],
         input: "placeholder:text-success-600 dark:placeholder:text-success",
         label: "text-success-600 dark:text-success",
@@ -314,7 +314,7 @@ const input = tv({
           "placeholder:text-warning-600",
           "dark:placeholder:text-warning",
           "data-[hover=true]:bg-warning-100",
-          "group-data-[focus=true]/input:bg-warning-50",
+          "group-data-[focus=true]:bg-warning-50",
         ],
         input: "placeholder:text-warning-600 dark:placeholder:text-warning",
         label: "text-warning-600 dark:text-warning",
@@ -331,7 +331,7 @@ const input = tv({
           "placeholder:text-danger",
           "dark:placeholder:text-danger-500",
           "data-[hover=true]:bg-danger-100",
-          "group-data-[focus=true]/input:bg-danger-50",
+          "group-data-[focus=true]:bg-danger-50",
         ],
         input: "placeholder:text-danger dark:placeholder:text-danger-500",
         label: "text-danger dark:text-danger-500",
@@ -383,7 +383,7 @@ const input = tv({
       variant: "underlined",
       color: "default",
       class: {
-        input: "group-data-[has-value=true]/input:text-foreground",
+        input: "group-data-[has-value=true]:text-foreground",
       },
     },
     {
@@ -431,7 +431,7 @@ const input = tv({
       variant: "bordered",
       color: "primary",
       class: {
-        inputWrapper: "group-data-[focus=true]/input:border-primary",
+        inputWrapper: "group-data-[focus=true]:border-primary",
         label: "text-primary",
       },
     },
@@ -439,7 +439,7 @@ const input = tv({
       variant: "bordered",
       color: "secondary",
       class: {
-        inputWrapper: "group-data-[focus=true]/input:border-secondary",
+        inputWrapper: "group-data-[focus=true]:border-secondary",
         label: "text-secondary",
       },
     },
@@ -447,7 +447,7 @@ const input = tv({
       variant: "bordered",
       color: "success",
       class: {
-        inputWrapper: "group-data-[focus=true]/input:border-success",
+        inputWrapper: "group-data-[focus=true]:border-success",
         label: "text-success",
       },
     },
@@ -455,7 +455,7 @@ const input = tv({
       variant: "bordered",
       color: "warning",
       class: {
-        inputWrapper: "group-data-[focus=true]/input:border-warning",
+        inputWrapper: "group-data-[focus=true]:border-warning",
         label: "text-warning",
       },
     },
@@ -463,7 +463,7 @@ const input = tv({
       variant: "bordered",
       color: "danger",
       class: {
-        inputWrapper: "group-data-[focus=true]/input:border-danger",
+        inputWrapper: "group-data-[focus=true]:border-danger",
         label: "text-danger",
       },
     },
@@ -472,7 +472,7 @@ const input = tv({
       labelPlacement: "inside",
       color: "default",
       class: {
-        label: "group-data-[filled-within=true]/input:text-default-600",
+        label: "group-data-[filled-within=true]:text-default-600",
       },
     },
     // labelPlacement=outside & default
@@ -480,7 +480,7 @@ const input = tv({
       labelPlacement: "outside",
       color: "default",
       class: {
-        label: "group-data-[filled-within=true]/input:text-foreground",
+        label: "group-data-[filled-within=true]:text-foreground",
       },
     },
     // radius-full & size
@@ -538,7 +538,7 @@ const input = tv({
         inputWrapper: [
           "!bg-danger-50",
           "data-[hover=true]:!bg-danger-100",
-          "group-data-[focus=true]/input:!bg-danger-50",
+          "group-data-[focus=true]:!bg-danger-50",
         ],
       },
     },
@@ -546,7 +546,7 @@ const input = tv({
       isInvalid: true,
       variant: "bordered",
       class: {
-        inputWrapper: "!border-danger group-data-[focus=true]/input:!border-danger",
+        inputWrapper: "!border-danger group-data-[focus=true]:!border-danger",
       },
     },
     {
@@ -592,7 +592,7 @@ const input = tv({
     {
       labelPlacement: ["inside", "outside"],
       class: {
-        label: ["group-data-[filled-within=true]/input:pointer-events-auto"],
+        label: ["group-data-[filled-within=true]:pointer-events-auto"],
       },
     },
     // labelPlacement=[outside] & isMultiline
@@ -606,7 +606,7 @@ const input = tv({
           "z-20",
           "top-1/2",
           "-translate-y-1/2",
-          "group-data-[filled-within=true]/input:start-0",
+          "group-data-[filled-within=true]:start-0",
         ],
       },
     },
@@ -614,7 +614,7 @@ const input = tv({
     {
       labelPlacement: ["inside"],
       class: {
-        label: ["group-data-[filled-within=true]/input:scale-85"],
+        label: ["group-data-[filled-within=true]:scale-85"],
       },
     },
     // labelPlacement=[inside] & variant=flat
@@ -654,7 +654,7 @@ const input = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]",
         ],
       },
     },
@@ -664,7 +664,7 @@ const input = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]",
         ],
       },
     },
@@ -675,7 +675,7 @@ const input = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]",
         ],
       },
     },
@@ -687,7 +687,7 @@ const input = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]",
         ],
       },
     },
@@ -698,7 +698,7 @@ const input = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]",
         ],
       },
     },
@@ -710,7 +710,7 @@ const input = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]",
         ],
       },
     },
@@ -722,7 +722,7 @@ const input = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]",
         ],
       },
     },
@@ -733,7 +733,7 @@ const input = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]",
         ],
       },
     },
@@ -745,7 +745,7 @@ const input = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]",
         ],
       },
     },
@@ -758,7 +758,7 @@ const input = tv({
         label: [
           "start-2",
           "text-tiny",
-          "group-data-[filled-within=true]/input:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]",
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_8px)]",
       },
@@ -772,7 +772,7 @@ const input = tv({
           "start-3",
           "end-auto",
           "text-small",
-          "group-data-[filled-within=true]/input:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]",
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)]",
       },
@@ -786,7 +786,7 @@ const input = tv({
           "start-3",
           "end-auto",
           "text-medium",
-          "group-data-[filled-within=true]/input:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]",
+          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]",
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]",
       },
@@ -796,21 +796,21 @@ const input = tv({
       labelPlacement: "outside-left",
       size: "sm",
       class: {
-        label: "group-data-[has-helper=true]/input:pt-2",
+        label: "group-data-[has-helper=true]:pt-2",
       },
     },
     {
       labelPlacement: "outside-left",
       size: "md",
       class: {
-        label: "group-data-[has-helper=true]/input:pt-3",
+        label: "group-data-[has-helper=true]:pt-3",
       },
     },
     {
       labelPlacement: "outside-left",
       size: "lg",
       class: {
-        label: "group-data-[has-helper=true]/input:pt-4",
+        label: "group-data-[has-helper=true]:pt-4",
       },
     },
     // labelPlacement=[outside, outside-left] & isMultiline
diff --git a/packages/core/theme/src/components/radio.ts b/packages/core/theme/src/components/radio.ts
index b97b0f5915..30f0feeacb 100644
--- a/packages/core/theme/src/components/radio.ts
+++ b/packages/core/theme/src/components/radio.ts
@@ -27,7 +27,7 @@ import {groupDataFocusVisibleClasses} from "../utils";
  */
 const radio = tv({
   slots: {
-    base: "group/radio relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
+    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
     wrapper: [
       "relative",
       "inline-flex",
@@ -40,7 +40,7 @@ const radio = tv({
       "box-border",
       "border-default",
       "rounded-full",
-      "group-data-[hover-unselected=true]/radio:bg-default-100",
+      "group-data-[hover-unselected=true]:bg-default-100",
       // focus ring
       ...groupDataFocusVisibleClasses,
     ],
@@ -53,8 +53,8 @@ const radio = tv({
       "scale-0",
       "origin-center",
       "rounded-full",
-      "group-data-[selected=true]/radio:opacity-100",
-      "group-data-[selected=true]/radio:scale-100",
+      "group-data-[selected=true]:opacity-100",
+      "group-data-[selected=true]:scale-100",
     ],
     label: "relative text-foreground select-none",
     description: "relative text-foreground-400",
@@ -63,27 +63,27 @@ const radio = tv({
     color: {
       default: {
         control: "bg-default-500 text-default-foreground",
-        wrapper: "group-data-[selected=true]/radio:border-default-500",
+        wrapper: "group-data-[selected=true]:border-default-500",
       },
       primary: {
         control: "bg-primary text-primary-foreground",
-        wrapper: "group-data-[selected=true]/radio:border-primary",
+        wrapper: "group-data-[selected=true]:border-primary",
       },
       secondary: {
         control: "bg-secondary text-secondary-foreground",
-        wrapper: "group-data-[selected=true]/radio:border-secondary",
+        wrapper: "group-data-[selected=true]:border-secondary",
       },
       success: {
         control: "bg-success text-success-foreground",
-        wrapper: "group-data-[selected=true]/radio:border-success",
+        wrapper: "group-data-[selected=true]:border-success",
       },
       warning: {
         control: "bg-warning text-warning-foreground",
-        wrapper: "group-data-[selected=true]/radio:border-warning",
+        wrapper: "group-data-[selected=true]:border-warning",
       },
       danger: {
         control: "bg-danger text-danger-foreground",
-        wrapper: "group-data-[selected=true]/radio:border-danger",
+        wrapper: "group-data-[selected=true]:border-danger",
       },
     },
     size: {
@@ -117,7 +117,7 @@ const radio = tv({
     isInvalid: {
       true: {
         control: "bg-danger text-danger-foreground",
-        wrapper: "border-danger group-data-[selected=true]/radio:border-danger",
+        wrapper: "border-danger group-data-[selected=true]:border-danger",
         label: "text-danger",
         description: "text-danger-300",
       },
@@ -126,7 +126,7 @@ const radio = tv({
       true: {},
       false: {
         wrapper: [
-          "group-data-[pressed=true]/radio:scale-95",
+          "group-data-[pressed=true]:scale-95",
           "transition-transform-colors",
           "motion-reduce:transition-none",
         ],
diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts
index 22f7229f06..a490c59fba 100644
--- a/packages/core/theme/src/components/select.ts
+++ b/packages/core/theme/src/components/select.ts
@@ -5,7 +5,7 @@ import {tv} from "../utils/tv";
 
 const select = tv({
   slots: {
-    base: ["group/select inline-flex flex-col relative w-full"],
+    base: ["group inline-flex flex-col relative w-full"],
     label: [
       "block",
       "absolute",
@@ -38,7 +38,7 @@ const select = tv({
         trigger: [
           "bg-default-100",
           "data-[hover=true]:bg-default-200",
-          "group-data-[focus=true]/select:bg-default-100",
+          "group-data-[focus=true]:bg-default-100",
         ],
       },
       faded: {
@@ -49,7 +49,7 @@ const select = tv({
           "border-default-200",
           "data-[hover=true]:border-default-400",
         ],
-        value: "group-data-[has-value=true]/select:text-default-foreground",
+        value: "group-data-[has-value=true]:text-default-foreground",
       },
       bordered: {
         trigger: [
@@ -86,7 +86,7 @@ const select = tv({
           "data-[open=true]:after:w-full",
           "data-[focus=true]:after:w-full",
         ],
-        value: "group-data-[has-value=true]/select:text-default-foreground",
+        value: "group-data-[has-value=true]:text-default-foreground",
       },
     },
     color: {
@@ -218,7 +218,7 @@ const select = tv({
       variant: "flat",
       color: "default",
       class: {
-        value: "group-data-[has-value=true]/select:text-default-foreground",
+        value: "group-data-[has-value=true]:text-default-foreground",
         trigger: ["bg-default-100", "data-[hover=true]:bg-default-50"],
       },
     },
@@ -230,7 +230,7 @@ const select = tv({
           "bg-primary-100",
           "text-primary",
           "data-[hover=true]:bg-primary-50",
-          "group-data-[focus=true]/select:bg-primary-50",
+          "group-data-[focus=true]:bg-primary-50",
         ],
         value: "text-primary",
         label: "text-primary",
@@ -244,7 +244,7 @@ const select = tv({
           "bg-secondary-100",
           "text-secondary",
           "data-[hover=true]:bg-secondary-50",
-          "group-data-[focus=true]/select:bg-secondary-50",
+          "group-data-[focus=true]:bg-secondary-50",
         ],
         value: "text-secondary",
         label: "text-secondary",
@@ -259,7 +259,7 @@ const select = tv({
           "text-success-600",
           "dark:text-success",
           "data-[hover=true]:bg-success-50",
-          "group-data-[focus=true]/select:bg-success-50",
+          "group-data-[focus=true]:bg-success-50",
         ],
         value: "text-success-600 dark:text-success",
         label: "text-success-600 dark:text-success",
@@ -274,7 +274,7 @@ const select = tv({
           "text-warning-600",
           "dark:text-warning",
           "data-[hover=true]:bg-warning-50",
-          "group-data-[focus=true]/select:bg-warning-50",
+          "group-data-[focus=true]:bg-warning-50",
         ],
         value: "text-warning-600 dark:text-warning",
         label: "text-warning-600 dark:text-warning",
@@ -289,7 +289,7 @@ const select = tv({
           "text-danger",
           "dark:text-danger-500",
           "data-[hover=true]:bg-danger-50",
-          "group-data-[focus=true]/select:bg-danger-50",
+          "group-data-[focus=true]:bg-danger-50",
         ],
         value: "text-danger dark:text-danger-500",
         label: "text-danger dark:text-danger-500",
@@ -342,7 +342,7 @@ const select = tv({
       variant: "underlined",
       color: "default",
       class: {
-        value: "group-data-[has-value=true]/select:text-foreground",
+        value: "group-data-[has-value=true]:text-foreground",
       },
     },
     {
@@ -431,7 +431,7 @@ const select = tv({
       labelPlacement: "inside",
       color: "default",
       class: {
-        label: "group-data-[filled=true]/select:text-default-600",
+        label: "group-data-[filled=true]:text-default-600",
       },
     },
     // labelPlacement=outside & default
@@ -439,7 +439,7 @@ const select = tv({
       labelPlacement: "outside",
       color: "default",
       class: {
-        label: "group-data-[filled=true]/select:text-foreground",
+        label: "group-data-[filled=true]:text-foreground",
       },
     },
     // radius-full & size
@@ -497,7 +497,7 @@ const select = tv({
         trigger: [
           "bg-danger-50",
           "data-[hover=true]:bg-danger-100",
-          "group-data-[focus=true]/select:bg-danger-50",
+          "group-data-[focus=true]:bg-danger-50",
         ],
       },
     },
@@ -505,7 +505,7 @@ const select = tv({
       isInvalid: true,
       variant: "bordered",
       class: {
-        trigger: "!border-danger group-data-[focus=true]/select:border-danger",
+        trigger: "!border-danger group-data-[focus=true]:border-danger",
       },
     },
     {
@@ -543,20 +543,14 @@ const select = tv({
       isMultiline: false,
       class: {
         base: "group relative justify-end",
-        label: [
-          "pb-0",
-          "z-20",
-          "top-1/2",
-          "-translate-y-1/2",
-          "group-data-[filled=true]/select:start-0",
-        ],
+        label: ["pb-0", "z-20", "top-1/2", "-translate-y-1/2", "group-data-[filled=true]:start-0"],
       },
     },
     // labelPlacement=[inside]
     {
       labelPlacement: ["inside"],
       class: {
-        label: "group-data-[filled=true]/select:scale-85",
+        label: "group-data-[filled=true]:scale-85",
       },
     },
     // inside & size
@@ -572,10 +566,8 @@ const select = tv({
       isMultiline: false,
       size: "sm",
       class: {
-        label: [
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]",
-        ],
-        innerWrapper: "group-data-[has-label=true]/select:pt-4",
+        label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]"],
+        innerWrapper: "group-data-[has-label=true]:pt-4",
       },
     },
     {
@@ -584,9 +576,9 @@ const select = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]",
         ],
-        innerWrapper: "group-data-[has-label=true]/select:pt-4",
+        innerWrapper: "group-data-[has-label=true]:pt-4",
       },
     },
     {
@@ -596,9 +588,9 @@ const select = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]",
         ],
-        innerWrapper: "group-data-[has-label=true]/select:pt-5",
+        innerWrapper: "group-data-[has-label=true]:pt-5",
       },
     },
     // inside & size & [faded, bordered]
@@ -609,7 +601,7 @@ const select = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]",
         ],
       },
     },
@@ -620,7 +612,7 @@ const select = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]",
         ],
       },
     },
@@ -632,7 +624,7 @@ const select = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]",
         ],
       },
     },
@@ -643,9 +635,7 @@ const select = tv({
       isMultiline: false,
       size: "sm",
       class: {
-        label: [
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]",
-        ],
+        label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]"],
       },
     },
     {
@@ -655,7 +645,7 @@ const select = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]",
         ],
       },
     },
@@ -667,7 +657,7 @@ const select = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]",
         ],
       },
     },
@@ -680,7 +670,7 @@ const select = tv({
         label: [
           "start-2",
           "text-tiny",
-          "group-data-[filled=true]/select:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]",
+          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]",
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_8px)]",
       },
@@ -693,7 +683,7 @@ const select = tv({
         label: [
           "start-3",
           "text-small",
-          "group-data-[filled=true]/select:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]",
+          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]",
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)]",
       },
@@ -706,7 +696,7 @@ const select = tv({
         label: [
           "start-3",
           "text-medium",
-          "group-data-[filled=true]/select:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]",
+          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]",
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]",
       },
diff --git a/packages/core/theme/src/components/toggle.ts b/packages/core/theme/src/components/toggle.ts
index 1ebacb11af..8b70dcf2be 100644
--- a/packages/core/theme/src/components/toggle.ts
+++ b/packages/core/theme/src/components/toggle.ts
@@ -30,7 +30,7 @@ import {groupDataFocusVisibleClasses} from "../utils";
  */
 const toggle = tv({
   slots: {
-    base: "group/toggle relative max-w-fit inline-flex items-center justify-start cursor-pointer touch-none tap-highlight-transparent select-none",
+    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer touch-none tap-highlight-transparent select-none",
     wrapper: [
       "px-1",
       "relative",
@@ -63,37 +63,37 @@ const toggle = tv({
     color: {
       default: {
         wrapper: [
-          "group-data-[selected=true]/toggle:bg-default-400",
-          "group-data-[selected=true]/toggle:text-default-foreground",
+          "group-data-[selected=true]:bg-default-400",
+          "group-data-[selected=true]:text-default-foreground",
         ],
       },
       primary: {
         wrapper: [
-          "group-data-[selected=true]/toggle:bg-primary",
-          "group-data-[selected=true]/toggle:text-primary-foreground",
+          "group-data-[selected=true]:bg-primary",
+          "group-data-[selected=true]:text-primary-foreground",
         ],
       },
       secondary: {
         wrapper: [
-          "group-data-[selected=true]/toggle:bg-secondary",
-          "group-data-[selected=true]/toggle:text-secondary-foreground",
+          "group-data-[selected=true]:bg-secondary",
+          "group-data-[selected=true]:text-secondary-foreground",
         ],
       },
       success: {
         wrapper: [
-          "group-data-[selected=true]/toggle:bg-success",
-          "group-data-[selected=true]/toggle:text-success-foreground",
+          "group-data-[selected=true]:bg-success",
+          "group-data-[selected=true]:text-success-foreground",
         ],
       },
       warning: {
         wrapper: [
-          "group-data-[selected=true]/toggle:bg-warning",
-          "group-data-[selected=true]/toggle:text-warning-foreground",
+          "group-data-[selected=true]:bg-warning",
+          "group-data-[selected=true]:text-warning-foreground",
         ],
       },
       danger: {
         wrapper: [
-          "group-data-[selected=true]/toggle:bg-danger",
+          "group-data-[selected=true]:bg-danger",
           "data-[selected=true]:text-danger-foreground",
         ],
       },
@@ -104,7 +104,7 @@ const toggle = tv({
         thumb: [
           "w-4 h-4 text-tiny",
           //selected
-          "group-data-[selected=true]/toggle:ml-4 rtl:group-data-[selected=true]/toggle:ml-0 rtl:group-data-[selected=true]/toggle:mr-4",
+          "group-data-[selected=true]:ml-4 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-4",
         ],
         endContent: "text-tiny",
         startContent: "text-tiny",
@@ -115,7 +115,7 @@ const toggle = tv({
         thumb: [
           "w-5 h-5 text-small",
           //selected
-          "group-data-[selected=true]/toggle:ml-5 rtl:group-data-[selected=true]/toggle:ml-0 rtl:group-data-[selected=true]/toggle:mr-5",
+          "group-data-[selected=true]:ml-5 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-5",
         ],
         endContent: "text-small",
         startContent: "text-small",
@@ -126,7 +126,7 @@ const toggle = tv({
         thumb: [
           "w-6 h-6 text-medium",
           //selected
-          "group-data-[selected=true]/toggle:ml-6 rtl:group-data-[selected=true]/toggle:ml-0 rtl:group-data-[selected=true]/toggle:mr-6",
+          "group-data-[selected=true]:ml-6 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-6",
         ],
         endContent: "text-medium",
         startContent: "text-medium",
@@ -150,14 +150,14 @@ const toggle = tv({
           "opacity-0",
           "scale-50",
           "transition-transform-opacity",
-          "group-data-[selected=true]/toggle:scale-100",
-          "group-data-[selected=true]/toggle:opacity-100",
+          "group-data-[selected=true]:scale-100",
+          "group-data-[selected=true]:opacity-100",
         ],
         endContent: [
           "opacity-100",
           "transition-transform-opacity",
-          "group-data-[selected=true]/toggle:translate-x-3",
-          "group-data-[selected=true]/toggle:opacity-0",
+          "group-data-[selected=true]:translate-x-3",
+          "group-data-[selected=true]:opacity-0",
         ],
       },
     },
@@ -172,30 +172,21 @@ const toggle = tv({
       disableAnimation: false,
       size: "sm",
       class: {
-        thumb: [
-          "group-data-[pressed=true]/toggle:w-5",
-          "group-data-[selected]/toggle:group-data-[pressed]/toggle:ml-3",
-        ],
+        thumb: ["group-data-[pressed=true]:w-5", "group-data-[selected]:group-data-[pressed]:ml-3"],
       },
     },
     {
       disableAnimation: false,
       size: "md",
       class: {
-        thumb: [
-          "group-data-[pressed=true]/toggle:w-6",
-          "group-data-[selected]/toggle:group-data-[pressed]/toggle:ml-4",
-        ],
+        thumb: ["group-data-[pressed=true]:w-6", "group-data-[selected]:group-data-[pressed]:ml-4"],
       },
     },
     {
       disableAnimation: false,
       size: "lg",
       class: {
-        thumb: [
-          "group-data-[pressed=true]/toggle:w-7",
-          "group-data-[selected]/toggle:group-data-[pressed]/toggle:ml-5",
-        ],
+        thumb: ["group-data-[pressed=true]:w-7", "group-data-[selected]:group-data-[pressed]:ml-5"],
       },
     },
   ],

From c2853bd6cd8aa68a47d542d4edebeaa38226ef78 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sun, 15 Sep 2024 00:53:33 +0800
Subject: [PATCH 2/2] chore: rollback PR 3751

---
 apps/docs/app/examples/perf/page.tsx                      | 2 +-
 apps/docs/components/theme-switch.tsx                     | 2 +-
 apps/docs/content/components/input/custom-styles.ts       | 4 ++--
 apps/docs/content/components/select/custom-styles.ts      | 2 +-
 apps/docs/content/components/switch/custom-styles.ts      | 8 ++++----
 .../customization/custom-variants/slots-component.ts      | 2 +-
 apps/docs/content/docs/customization/custom-variants.mdx  | 2 +-
 packages/components/select/stories/select.stories.tsx     | 2 +-
 8 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/docs/app/examples/perf/page.tsx b/apps/docs/app/examples/perf/page.tsx
index cc70cf7c80..79ab457b0a 100644
--- a/apps/docs/app/examples/perf/page.tsx
+++ b/apps/docs/app/examples/perf/page.tsx
@@ -106,7 +106,7 @@ const MyInput = extendVariants(Input, {
           "focus-within:bg-zinc-100",
           "data-[hover=true]:border-zinc-600",
           "data-[hover=true]:bg-zinc-100",
-          "group-data-[focus=true]/input:border-zinc-600",
+          "group-data-[focus=true]:border-zinc-600",
           // dark theme
           "dark:bg-zinc-900",
           "dark:border-zinc-800",
diff --git a/apps/docs/components/theme-switch.tsx b/apps/docs/components/theme-switch.tsx
index 5554dbe3ef..33da930e3c 100644
--- a/apps/docs/components/theme-switch.tsx
+++ b/apps/docs/components/theme-switch.tsx
@@ -57,7 +57,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
               "bg-transparent",
               "rounded-lg",
               "flex items-center justify-center",
-              "group-data-[selected=true]/toggle:bg-transparent",
+              "group-data-[selected=true]:bg-transparent",
               "!text-default-600 dark:!text-default-500",
               "pt-px",
               "px-0",
diff --git a/apps/docs/content/components/input/custom-styles.ts b/apps/docs/content/components/input/custom-styles.ts
index 5b8d511c3f..3908b17561 100644
--- a/apps/docs/content/components/input/custom-styles.ts
+++ b/apps/docs/content/components/input/custom-styles.ts
@@ -52,8 +52,8 @@ export default function App() {
             "backdrop-saturate-200",
             "hover:bg-default-200/70",
             "dark:hover:bg-default/70",
-            "group-data-[focus=true]/input:bg-default-200/50",
-            "dark:group-data-[focus=true]/input:bg-default/60",
+            "group-data-[focus=true]:bg-default-200/50",
+            "dark:group-data-[focus=true]:bg-default/60",
             "!cursor-text",
           ],
         }}
diff --git a/apps/docs/content/components/select/custom-styles.ts b/apps/docs/content/components/select/custom-styles.ts
index bd7b963f58..ae2db45e8a 100644
--- a/apps/docs/content/components/select/custom-styles.ts
+++ b/apps/docs/content/components/select/custom-styles.ts
@@ -212,7 +212,7 @@ export default function App() {
       className="max-w-xs"
       variant="bordered"
       classNames={{
-        label: "group-data-[filled=true]/select:-translate-y-5",
+        label: "group-data-[filled=true]:-translate-y-5",
         trigger: "min-h-16",
         listboxWrapper: "max-h-[400px]",
       }}
diff --git a/apps/docs/content/components/switch/custom-styles.ts b/apps/docs/content/components/switch/custom-styles.ts
index 20537838f9..c4470a56e0 100644
--- a/apps/docs/content/components/switch/custom-styles.ts
+++ b/apps/docs/content/components/switch/custom-styles.ts
@@ -11,12 +11,12 @@ export default function App() {
         ),
         wrapper: "p-0 h-4 overflow-visible",
         thumb: cn("w-6 h-6 border-2 shadow-lg",
-          "group-data-[hover=true]/toggle:border-primary",
+          "group-data-[hover=true]:border-primary",
           //selected
-          "group-data-[selected=true]/toggle:ml-6",
+          "group-data-[selected=true]:ml-6",
           // pressed
-          "group-data-[pressed=true]/toggle:w-7",
-          "group-data-[selected]:group-data-[pressed]/toggle:ml-4",
+          "group-data-[pressed=true]:w-7",
+          "group-data-[selected]:group-data-[pressed]:ml-4",
         ),
       }}
     >
diff --git a/apps/docs/content/customization/custom-variants/slots-component.ts b/apps/docs/content/customization/custom-variants/slots-component.ts
index 1fd09f9273..c1fd3c86cd 100644
--- a/apps/docs/content/customization/custom-variants/slots-component.ts
+++ b/apps/docs/content/customization/custom-variants/slots-component.ts
@@ -47,7 +47,7 @@ const MyInput = extendVariants(Input, {
           "focus-within:bg-zinc-100",
           "data-[hover=true]:border-zinc-600",
           "data-[hover=true]:bg-zinc-100",
-          "group-data-[focus=true]/input:border-zinc-600",
+          "group-data-[focus=true]:border-zinc-600",
           "dark:bg-zinc-900",
           "dark:border-zinc-800",
           "dark:data-[hover=true]:bg-zinc-900",
diff --git a/apps/docs/content/docs/customization/custom-variants.mdx b/apps/docs/content/docs/customization/custom-variants.mdx
index 6d81ec297d..2c5b0314d5 100644
--- a/apps/docs/content/docs/customization/custom-variants.mdx
+++ b/apps/docs/content/docs/customization/custom-variants.mdx
@@ -133,7 +133,7 @@ const MyInput = extendVariants(Input, {
           "focus-within:bg-zinc-100",
           "data-[hover=true]:border-zinc-600",
           "data-[hover=true]:bg-zinc-100",
-          "group-data-[focus=true]/input:border-zinc-600",
+          "group-data-[focus=true]:border-zinc-600",
           // dark theme
           "dark:bg-zinc-900",
           "dark:border-zinc-800",
diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
index a7bb0c53d1..0a58ad10a3 100644
--- a/packages/components/select/stories/select.stories.tsx
+++ b/packages/components/select/stories/select.stories.tsx
@@ -505,7 +505,7 @@ const CustomStylesTemplate = ({color, variant, ...args}: SelectProps<User>) => {
     <Select
       className="max-w-xs"
       classNames={{
-        label: "group-data-[filled=true]/select:-translate-y-5",
+        label: "group-data-[filled=true]:-translate-y-5",
         trigger: "min-h-16",
         listboxWrapper: "max-h-[400px]",
       }}