fix(Skeleton): css alignment

packages/css/skeleton.css

@@ -2,58 +2,55 @@
   --dsc-skeleton-animation-duration: 0.8s;
   --dsc-skeleton-background: var(--ds-color-neutral-surface-default);
 
+  animation: ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate;
+  background: var(--dsc-skeleton-background);
   height: 1.3em;
   pointer-events: none;
   user-select: none;
-  background-color: var(--dsc-skeleton-background);
-  animation: ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate;
-}
 
-.ds-skeleton--circle {
-  width: 1.3em;
-  border-radius: var(--ds-border-radius-full);
-  aspect-ratio: 1 / 1;
-}
+  &[data-type='circle'] {
+    width: 1.3em;
+    border-radius: var(--ds-border-radius-full);
+    aspect-ratio: 1 / 1;
+  }
 
-.ds-skeleton--rectangle {
-  width: 100%;
-  border-radius: min(1rem, var(--ds-border-radius-lg));
-}
+  &[data-type='rectangle'] {
+    width: 100%;
+    border-radius: min(1rem, var(--ds-border-radius-lg));
+  }
 
-.ds-skeleton--text {
-  width: 100%;
-  height: auto;
-  transform-origin: 0 55%;
-  transform: scale(1, 0.6);
-  border-radius: var(--ds-border-radius-full);
-}
+  &[data-type='text'] {
+    width: 100%;
+    height: auto;
+    transform-origin: 0 55%;
+    transform: scale(1, 0.6);
+    border-radius: var(--ds-border-radius-full);
 
-.ds-skeleton--text:empty::before {
-  content: '\00a0';
-}
+    &:empty::before {
+      content: '\00a0';
+    }
+  }
 
-.ds-skeleton--has-children {
-  width: fit-content;
-  height: fit-content;
-  color: transparent !important;
-}
+  /* When having children, let them define size */
+  &:not(:empty) {
+    width: fit-content;
+    height: fit-content;
+    color: transparent !important;
 
-.ds-skeleton--has-children > * {
-  visibility: hidden;
-}
+    & > * {
+      visibility: hidden;
+    }
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .ds-skeleton {
-    --dsc-skeleton-animation-duration: 1.6s;
+  @media (prefers-reduced-motion: reduce) {
+    & {
+      --dsc-skeleton-animation-duration: 1.6s;
+    }
   }
 }
 
 @keyframes ds-skeleton-opacity-fade {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
+  to {
     opacity: 0.4;
   }
 }

packages/react/src/components/loaders/Skeleton/Skeletons.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+
+import { Skeleton } from '.';
+
+beforeAll(() => {
+  document.getAnimations = () => [];
+});
+
+describe('Skeleton.Text', () => {
+  it('should render skeleton', () => {
+    render(<Skeleton.Text data-testid={'skeleton-text'} />);
+
+    expect(screen.getByTestId('skeleton-text'));
+  });
+});
+
+describe('Skeleton.Circle', () => {
+  it('should render skeleton', () => {
+    render(<Skeleton.Circle data-testid={'skeleton-circle'} />);
+
+    expect(screen.getByTestId('skeleton-circle'));
+  });
+});
+
+describe('Skeleton.Rectangle', () => {
+  it('should render skeleton', () => {
+    render(<Skeleton.Rectangle data-testid={'skeleton-rectangle'} />);
+
+    expect(screen.getByTestId('skeleton-rectangle'));
+  });
+});

packages/react/src/components/loaders/Skeleton/Skeletons.tsx

@@ -0,0 +1,63 @@
+import { useMergeRefs } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { type ForwardedRef, type HTMLAttributes, forwardRef } from 'react';
+
+import { useSynchronizedAnimation } from '../../../utilities';
+
+type SkeletonProps = {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+  /** The width of the component */
+  width?: string | number;
+  /** The height of the component */
+  height?: string | number;
+} & HTMLAttributes<HTMLDivElement>;
+
+const render = (
+  type: string,
+  { asChild, className, width, height, style, ...rest }: SkeletonProps,
+  ref: ForwardedRef<HTMLSpanElement>,
+) => {
+  const Component = asChild ? Slot : 'span';
+  const animationRef = useSynchronizedAnimation<HTMLSpanElement>(
+    'ds-skeleton-opacity-fade',
+  );
+  const mergedRefs = useMergeRefs([animationRef, ref]);
+
+  return (
+    <Component
+      aria-hidden='true'
+      className={cl('ds-skeleton', className)}
+      data-type={type}
+      ref={mergedRefs}
+      style={{ width, height, ...style }}
+      {...rest}
+    />
+  );
+};
+
+export type SkeletonCircleProps = SkeletonProps;
+export const SkeletonCircle = forwardRef<HTMLSpanElement, SkeletonCircleProps>(
+  function SkeletonCircle(props, ref) {
+    return render('circle', props, ref);
+  },
+);
+
+export type SkeletonRectangleProps = SkeletonProps;
+export const SkeletonRectangle = forwardRef<
+  HTMLSpanElement,
+  SkeletonRectangleProps
+>(function SkeletonRectangle(props, ref) {
+  return render('rectangle', props, ref);
+});
+
+export type SkeletonTextProps = SkeletonProps;
+export const SkeletonText = forwardRef<HTMLSpanElement, SkeletonTextProps>(
+  function SkeletonText(props, ref) {
+    return render('text', props, ref);
+  },
+);