From c84cee9e323669b20706c37ae3f4da10d6bace7e Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Tue, 24 Feb 2026 14:57:08 +0100
Subject: [PATCH] Migrate Skeleton component from useStyles to useDefinition

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .../ui/src/components/Skeleton/Skeleton.tsx   | 24 ++++++++-----------
 .../ui/src/components/Skeleton/definition.ts  | 17 ++++++++++---
 packages/ui/src/components/Skeleton/index.tsx |  2 +-
 packages/ui/src/components/Skeleton/types.ts  | 14 ++++++++---
 4 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/packages/ui/src/components/Skeleton/Skeleton.tsx b/packages/ui/src/components/Skeleton/Skeleton.tsx
index c85a9b23cb..be8c430789 100644
--- a/packages/ui/src/components/Skeleton/Skeleton.tsx
+++ b/packages/ui/src/components/Skeleton/Skeleton.tsx
@@ -14,32 +14,28 @@
  * limitations under the License.
  */
 
-import { useStyles } from '../../hooks/useStyles';
+import type { SkeletonProps } from './types';
+import { useDefinition } from '../../hooks/useDefinition';
 import { SkeletonDefinition } from './definition';
-import { SkeletonProps } from './types';
-import styles from './Skeleton.module.css';
-import clsx from 'clsx';
 
 /** @public */
 export const Skeleton = (props: SkeletonProps) => {
-  const { classNames, cleanedProps } = useStyles(SkeletonDefinition, {
-    width: 80,
-    height: 24,
-    rounded: false,
-    ...props,
-  });
-  const { className, width, height, rounded, style, ...rest } = cleanedProps;
+  const { ownProps, restProps, dataAttributes } = useDefinition(
+    SkeletonDefinition,
+    props,
+  );
+  const { classes, width, height, style } = ownProps;
 
   return (
     <div
-      className={clsx(classNames.root, styles[classNames.root], className)}
-      data-rounded={rounded}
+      className={classes.root}
+      {...dataAttributes}
       style={{
         width,
         height,
         ...style,
       }}
-      {...rest}
+      {...restProps}
     />
   );
 };
diff --git a/packages/ui/src/components/Skeleton/definition.ts b/packages/ui/src/components/Skeleton/definition.ts
index 42c4d6c444..518cecfcb7 100644
--- a/packages/ui/src/components/Skeleton/definition.ts
+++ b/packages/ui/src/components/Skeleton/definition.ts
@@ -14,14 +14,25 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { SkeletonOwnProps } from './types';
+import styles from './Skeleton.module.css';
 
 /**
  * Component definition for Skeleton
  * @public
  */
-export const SkeletonDefinition = {
+export const SkeletonDefinition = defineComponent<SkeletonOwnProps>()({
+  styles,
   classNames: {
     root: 'bui-Skeleton',
   },
-} as const satisfies ComponentDefinition;
+  propDefs: {
+    width: { default: 80 },
+    height: { default: 24 },
+    rounded: { dataAttribute: true, default: false },
+    children: {},
+    className: {},
+    style: {},
+  },
+});
diff --git a/packages/ui/src/components/Skeleton/index.tsx b/packages/ui/src/components/Skeleton/index.tsx
index ab44364f8b..93bdc1cc65 100644
--- a/packages/ui/src/components/Skeleton/index.tsx
+++ b/packages/ui/src/components/Skeleton/index.tsx
@@ -15,5 +15,5 @@
  */
 
 export { Skeleton } from './Skeleton';
-export type { SkeletonProps } from './types';
+export type { SkeletonOwnProps, SkeletonProps } from './types';
 export { SkeletonDefinition } from './definition';
diff --git a/packages/ui/src/components/Skeleton/types.ts b/packages/ui/src/components/Skeleton/types.ts
index 136873ed27..24ba396c5c 100644
--- a/packages/ui/src/components/Skeleton/types.ts
+++ b/packages/ui/src/components/Skeleton/types.ts
@@ -14,11 +14,19 @@
  * limitations under the License.
  */
 
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 /** @public */
-export interface SkeletonProps extends ComponentProps<'div'> {
+export type SkeletonOwnProps = {
   width?: number | string;
   height?: number | string;
   rounded?: boolean;
-}
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+/** @public */
+export interface SkeletonProps
+  extends Omit<ComponentProps<'div'>, 'children' | 'className' | 'style'>,
+    SkeletonOwnProps {}