fix(docs): missing tw nested groups in docs (#3751)

Author: wingkwong

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]:border-zinc-600",
+          "group-data-[focus=true]/input:border-zinc-600",
           // dark theme
           "dark:bg-zinc-900",
           "dark:border-zinc-800",

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]:bg-transparent",
+              "group-data-[selected=true]/toggle:bg-transparent",
               "!text-default-600 dark:!text-default-500",
               "pt-px",
               "px-0",

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]:bg-default-200/50",
-            "dark:group-data-[focus=true]:bg-default/60",
+            "group-data-[focus=true]/input:bg-default-200/50",
+            "dark:group-data-[focus=true]/input:bg-default/60",
             "!cursor-text",
           ],
         }}

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]:-translate-y-5",
+        label: "group-data-[filled=true]/select:-translate-y-5",
         trigger: "min-h-16",
         listboxWrapper: "max-h-[400px]",
       }}

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]:border-primary",
+          "group-data-[hover=true]/toggle:border-primary",
           //selected
-          "group-data-[selected=true]:ml-6",
+          "group-data-[selected=true]/toggle:ml-6",
           // pressed
-          "group-data-[pressed=true]:w-7",
-          "group-data-[selected]:group-data-[pressed]:ml-4",
+          "group-data-[pressed=true]/toggle:w-7",
+          "group-data-[selected]:group-data-[pressed]/toggle:ml-4",
         ),
       }}
     >

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]:border-zinc-600",
+          "group-data-[focus=true]/input:border-zinc-600",
           "dark:bg-zinc-900",
           "dark:border-zinc-800",
           "dark:data-[hover=true]:bg-zinc-900",

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]:border-zinc-600",
+          "group-data-[focus=true]/input:border-zinc-600",
           // dark theme
           "dark:bg-zinc-900",
           "dark:border-zinc-800",

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]:-translate-y-5",
+        label: "group-data-[filled=true]/select:-translate-y-5",
         trigger: "min-h-16",
         listboxWrapper: "max-h-[400px]",
       }}