From d7b20a357c0fc26a91f98c7c9a151e234e9f4540 Mon Sep 17 00:00:00 2001
From: Jack Shelton <104264123+thejackshelton@users.noreply.github.com>
Date: Tue, 31 Dec 2024 17:15:39 -0600
Subject: [PATCH] fix: tailwind on headless (#1031)

---
 .../components/toggle-group/toggle-group-root.tsx | 14 +++++++++++---
 .../src/components/toggle-group/toggle-group.css  | 15 +++++++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 packages/kit-headless/src/components/toggle-group/toggle-group.css

diff --git a/packages/kit-headless/src/components/toggle-group/toggle-group-root.tsx b/packages/kit-headless/src/components/toggle-group/toggle-group-root.tsx
index 37627c800..513c89e61 100644
--- a/packages/kit-headless/src/components/toggle-group/toggle-group-root.tsx
+++ b/packages/kit-headless/src/components/toggle-group/toggle-group-root.tsx
@@ -1,5 +1,12 @@
 import type { PropsOf, QRL, Signal } from '@builder.io/qwik';
-import { component$, useContextProvider, Slot, useTask$, $ } from '@builder.io/qwik';
+import {
+  component$,
+  useContextProvider,
+  Slot,
+  useTask$,
+  $,
+  useStyles$,
+} from '@builder.io/qwik';
 import {
   toggleGroupRootApiContextId,
   type Direction,
@@ -8,6 +15,7 @@ import {
 } from './toggle-group-context';
 import { useToggleGroup } from './use-toggle';
 import { isBrowser, isServer } from '@builder.io/qwik/build';
+import styles from './toggle-group.css?inline';
 
 export type ToggleGroupBaseProps = {
   /**
@@ -87,6 +95,7 @@ export type ToggleGroupApiProps = (ToggleGroupSingleProps | ToggleGroupMultipleP
 export type ToggleGroupRootProps = PropsOf<'div'> & ToggleGroupApiProps;
 
 export const HToggleGroupRoot = component$<ToggleGroupRootProps>((props) => {
+  useStyles$(styles);
   const {
     onChange$: _,
     disabled = false,
@@ -97,7 +106,6 @@ export const HToggleGroupRoot = component$<ToggleGroupRootProps>((props) => {
   } = props;
 
   const commonProps = { role: 'group', 'aria-orientation': orientation, dir: direction };
-  const orientationClass = orientation === 'vertical' ? 'flex-col' : 'flex-row';
 
   const api = useToggleGroup(props);
 
@@ -275,8 +283,8 @@ export const HToggleGroupRoot = component$<ToggleGroupRootProps>((props) => {
     <div
       {...divProps}
       {...commonProps}
-      class={`flex ${orientationClass} items-center gap-1`}
       data-qui-togglegroup-root
+      data-orientation={orientation}
     >
       <Slot />
     </div>
diff --git a/packages/kit-headless/src/components/toggle-group/toggle-group.css b/packages/kit-headless/src/components/toggle-group/toggle-group.css
new file mode 100644
index 000000000..9ce1617c9
--- /dev/null
+++ b/packages/kit-headless/src/components/toggle-group/toggle-group.css
@@ -0,0 +1,15 @@
+@layer qui-togglegroup-root {
+  [data-qui-togglegroup-root] {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  [data-qui-togglegroup-root][data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  [data-qui-togglegroup-root][data-orientation='vertical'] {
+    flex-direction: column;
+  }
+}