From a4842b4ae065f6dc6cb9302b1f1cc303b2bc369c Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Wed, 25 Feb 2026 10:59:06 +0100
Subject: [PATCH] Migrate ToggleButtonGroup component from useStyles to
 useDefinition

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .../ToggleButtonGroup/ToggleButtonGroup.tsx   | 17 +++++--------
 .../ToggleButtonGroup/definition.ts           | 24 ++++++++++++-------
 .../src/components/ToggleButtonGroup/types.ts | 16 ++++++++++---
 3 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index 43449f8472..29ad8965a5 100644
--- a/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -14,32 +14,27 @@
  * limitations under the License.
  */
 
-import clsx from 'clsx';
 import { forwardRef, Ref } from 'react';
 import { ToggleButtonGroup as AriaToggleButtonGroup } from 'react-aria-components';
 import type { ToggleButtonGroupProps } from './types';
-import { useStyles } from '../../hooks/useStyles';
+import { useDefinition } from '../../hooks/useDefinition';
 import { ToggleButtonGroupDefinition } from './definition';
-import styles from './ToggleButtonGroup.module.css';
 
 /** @public */
 export const ToggleButtonGroup = forwardRef(
   (props: ToggleButtonGroupProps, ref: Ref<HTMLDivElement>) => {
-    const { classNames, dataAttributes, cleanedProps } = useStyles(
+    const { ownProps, restProps, dataAttributes } = useDefinition(
       ToggleButtonGroupDefinition,
-      {
-        ...props,
-      },
+      props,
     );
-
-    const { className, children, ...rest } = cleanedProps;
+    const { classes, children } = ownProps;
 
     return (
       <AriaToggleButtonGroup
-        className={clsx(classNames.root, styles[classNames.root], className)}
+        className={classes.root}
         ref={ref}
         {...dataAttributes}
-        {...rest}
+        {...restProps}
       >
         {children}
       </AriaToggleButtonGroup>
diff --git a/packages/ui/src/components/ToggleButtonGroup/definition.ts b/packages/ui/src/components/ToggleButtonGroup/definition.ts
index 7acf6828f0..50dfd7dd26 100644
--- a/packages/ui/src/components/ToggleButtonGroup/definition.ts
+++ b/packages/ui/src/components/ToggleButtonGroup/definition.ts
@@ -14,17 +14,23 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { ToggleButtonGroupOwnProps } from './types';
+import styles from './ToggleButtonGroup.module.css';
 
 /**
  * Component definition for ToggleButtonGroup
  * @public
  */
-export const ToggleButtonGroupDefinition = {
-  classNames: {
-    root: 'bui-ToggleButtonGroup',
-  },
-  dataAttributes: {
-    orientation: ['horizontal', 'vertical'] as const,
-  },
-} as const satisfies ComponentDefinition;
+export const ToggleButtonGroupDefinition =
+  defineComponent<ToggleButtonGroupOwnProps>()({
+    styles,
+    classNames: {
+      root: 'bui-ToggleButtonGroup',
+    },
+    propDefs: {
+      orientation: { dataAttribute: true },
+      className: {},
+      children: {},
+    },
+  });
diff --git a/packages/ui/src/components/ToggleButtonGroup/types.ts b/packages/ui/src/components/ToggleButtonGroup/types.ts
index 7a57708750..f58eef3d00 100644
--- a/packages/ui/src/components/ToggleButtonGroup/types.ts
+++ b/packages/ui/src/components/ToggleButtonGroup/types.ts
@@ -14,10 +14,20 @@
  * limitations under the License.
  */
 
+import type { ReactNode } from 'react';
 import type { ToggleButtonGroupProps as AriaToggleButtonGroupProps } from 'react-aria-components';
 
 /** @public */
-export interface ToggleButtonGroupProps
-  extends Omit<AriaToggleButtonGroupProps, 'orientation'> {
+export type ToggleButtonGroupOwnProps = {
   orientation?: NonNullable<AriaToggleButtonGroupProps['orientation']>;
-}
+  className?: string;
+  children?: ReactNode;
+};
+
+/** @public */
+export interface ToggleButtonGroupProps
+  extends Omit<
+      AriaToggleButtonGroupProps,
+      'orientation' | 'className' | 'children'
+    >,
+    ToggleButtonGroupOwnProps {}