@a-type/ui 5.0.22 → 6.0.0

package/src/components/scrollArea/ScrollArea.module.css

@@ -0,0 +1,187 @@
+.root {
+	box-sizing: border-box;
+	min-height: 0;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.viewport {
+	height: 100%;
+	min-height: 0;
+	@apply --mx-shadow;
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		--mx-ring-value: --fn-ring(var(--m-color-main-ink), 1px);
+	}
+}
+
+.verticalFades {
+	--scroll-area-overflow-y-end: inherit;
+	--scroll-area-overflow-y-start: inherit;
+
+	pointer-events: none;
+	position: absolute;
+	inset: 0;
+
+	&::before {
+		content: '';
+		--scroll-area-overflow-y-start: inherit;
+
+		position: absolute;
+		left: 0;
+		top: 0;
+		display: block;
+		height: min(40px, var(--scroll-area-overflow-y-start, 40px));
+		width: 100%;
+		transition: height var(--m-duration) var(--m-easing);
+
+		background: linear-gradient(
+			to bottom,
+			var(--mx-bg-ref) 0%,
+			transparent 100%
+		);
+	}
+
+	&::after {
+		content: '';
+		--scroll-area-overflow-y-end: inherit;
+
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		display: block;
+		height: min(40px, var(--scroll-area-overflow-y-end, 40px));
+		width: 100%;
+		transition: height var(--m-duration) var(--m-easing);
+
+		background: linear-gradient(to top, var(--mx-bg-ref) 0%, transparent 100%);
+	}
+}
+
+.horizontalFades {
+	--scroll-area-overflow-x-end: inherit;
+	--scroll-area-overflow-x-start: inherit;
+
+	pointer-events: none;
+	position: absolute;
+	inset: 0;
+
+	&::before {
+		content: '';
+		--scroll-area-overflow-x-start: inherit;
+
+		position: absolute;
+		left: 0;
+		top: 0;
+		display: block;
+		height: 100%;
+		width: min(40px, var(--scroll-area-overflow-x-start, 40px));
+		transition: width var(--m-duration) var(--m-easing);
+
+		background: linear-gradient(
+			to right,
+			var(--mx-bg-ref) 0%,
+			transparent 100%
+		);
+	}
+
+	&::after {
+		content: '';
+		--scroll-area-overflow-x-end: inherit;
+
+		position: absolute;
+		right: 0;
+		top: 0;
+		display: block;
+		height: 100%;
+		width: min(40px, var(--scroll-area-overflow-x-end, 40px));
+		transition: width var(--m-duration) var(--m-easing);
+
+		background: linear-gradient(to left, var(--mx-bg-ref) 0%, transparent 100%);
+	}
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+
+	[data-scroll-direction='horizontal'] > &,
+	[data-scroll-direction='both'] > & {
+		min-width: min-content;
+	}
+}
+
+.thumb {
+	@apply --mx-bg(var(--mx-fg-ref));
+	@apply --mx-bg-faded(25%);
+	border-radius: 9999px;
+
+	&[data-orientation='vertical'] {
+		width: 100%;
+	}
+	&[data-orientation='horizontal'] {
+		height: 100%;
+	}
+}
+
+.scrollbar {
+	pointer-events: none;
+	position: relative;
+	margin: 1px;
+	display: flex;
+	user-select: none;
+	opacity: 0;
+	border-radius: 9999px;
+	touch-action: none;
+	transition:
+		opacity,
+		height,
+		width var(--m-duration) var(--m-easing);
+
+	@apply --mx-bg(var(--mx-fg-ref));
+	@apply --mx-bg-faded(5%);
+
+	&[data-hovering] {
+		pointer-events: auto;
+		opacity: 1;
+	}
+	&[data-scrolling] {
+		transition-duration: 0;
+	}
+
+	&::before {
+		content: '';
+		position: absolute;
+	}
+
+	&[data-orientation='vertical'] {
+		width: 4px;
+		justify-content: center;
+		&::before {
+			height: 100%;
+			width: 20px;
+		}
+		&:hover::before {
+			width: 8px;
+		}
+	}
+	&[data-orientation='horizontal'] {
+		height: 4px;
+		align-items: center;
+		&::before {
+			width: 100%;
+			height: 20px;
+		}
+		&:hover::before {
+			height: 8px;
+		}
+	}
+}
+
+.corner {
+	@apply --mx-bg(transparent);
+}

package/src/components/scrollArea/ScrollArea.stories.tsx

@@ -1,5 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import clsx from 'clsx';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
 import { Input } from '../input/Input.js';
@@ -33,10 +32,10 @@ export const Default: Story = {
 				style={{ height: '200px', width: '400px' }}
 			>
 				<ScrollArea.Content
-					className={clsx(
-						direction === 'horizontal' && 'w-10000px',
-						direction === 'both' && 'w-800px',
-					)}
+					style={{
+						width: direction === 'horizontal' ? '10000px' : undefined,
+						height: direction === 'both' ? '10000px' : undefined,
+					}}
 				>
 					<Content />
 				</ScrollArea.Content>
@@ -48,7 +47,7 @@ export const Default: Story = {
 export const ConstraintTest: Story = {
 	render({ direction }) {
 		return (
-			<ScrollArea direction={direction} className="h-300px w-300px">
+			<ScrollArea direction={direction} style={{ height: 300, width: 300 }}>
 				<ScrollArea.Content>
 					<Box gap>
 						<Input placeholder="Test input" />

package/src/components/scrollArea/ScrollArea.tsx

@@ -6,32 +6,22 @@ import {
 } from '@base-ui/react/scroll-area';
 import { Ref } from 'react';
 import { withClassName } from '../../hooks.js';
+import cls from './ScrollArea.module.css';
 
 export type * from '@base-ui/react/scroll-area';
 
-export const ScrollAreaRoot = withClassName(
-	BaseScrollArea.Root,
-	'layer-components:(box-border min-h-0 min-w-0 flex flex-col)',
-);
+export const ScrollAreaRoot = withClassName(BaseScrollArea.Root, cls.root);
 
 export const StyledScrollAreaViewport = withClassName(
 	BaseScrollArea.Viewport,
-	'layer-components:(h-full min-h-0 outline-none)',
-	'layer-components:foc',
+	cls.viewport,
 );
 
-export const ScrollAreaVerticalFades = withClassName(
-	'div',
-	'layer-components:([--scroll-area-overflow-y-end:inherit] [--scroll-area-overflow-y-start:inherit] pointer-events-none absolute inset-0)',
-	'layer-components:before:([--scroll-area-overflow-y-start:inherit] absolute left-0 top-0 block h-[min(40px,var(--scroll-area-overflow-y-start,40px))] w-full bg-gradient-from-bg bg-gradient-to-transparent bg-gradient-to-b transition-height content-empty)',
-	'layer-components:after:([--scroll-area-overflow-y-end:inherit] absolute bottom-0 left-0 block h-[min(40px,var(--scroll-area-overflow-y-end,40px))] w-full bg-gradient-from-bg bg-gradient-to-transparent bg-gradient-to-t transition-height content-empty)',
-);
+export const ScrollAreaVerticalFades = withClassName('div', cls.verticalFades);
 
 export const ScrollAreaHorizontalFades = withClassName(
 	'div',
-	'layer-components:([--scroll-area-overflow-x-end:inherit] [--scroll-area-overflow-x-start:inherit] pointer-events-none absolute inset-0)',
-	'layer-components:before:([--scroll-area-overflow-x-start:inherit] absolute left-0 top-0 block h-full w-[min(40px,var(--scroll-area-overflow-x-start,40px))] bg-gradient-from-bg bg-gradient-to-transparent bg-gradient-to-r transition-width content-empty)',
-	'layer-components:after:([--scroll-area-overflow-x-end:inherit] absolute right-0 top-0 block h-full w-[min(40px,var(--scroll-area-overflow-x-end,40px))] bg-gradient-from-bg bg-gradient-to-transparent bg-gradient-to-l transition-width content-empty)',
+	cls.horizontalFades,
 );
 
 export const ScrollAreaViewportFades = () => (
@@ -53,16 +43,10 @@ BaseScrollContentWithoutMinWidth.displayName = 'ScrollAreaContent';
 
 export const ScrollAreaContent = withClassName(
 	BaseScrollContentWithoutMinWidth,
-	'layer-components:(flex flex-col)',
-	'layer-components:[[data-scroll-direction=horizontal]>&,[data-scroll-direction=both]>&]:min-w-min-content',
+	cls.content,
 );
 
-export const ScrollAreaThumb = withClassName(
-	BaseScrollArea.Thumb,
-	'layer-components:(rounded-inherit bg-fg/25)',
-	'layer-components:data-[orientation=horizontal]:(h-full)',
-	'layer-components:data-[orientation=vertical]:(w-full)',
-);
+export const ScrollAreaThumb = withClassName(BaseScrollArea.Thumb, cls.thumb);
 
 const ComposedScrollbar = ({
 	children,
@@ -76,19 +60,12 @@ ComposedScrollbar.displayName = 'ScrollAreaScrollbar';
 
 export const ScrollAreaScrollbar = withClassName(
 	ComposedScrollbar,
-	'layer-components:(pointer-events-none relative m-xxs flex touch-none select-none rounded-full opacity-0)',
-	'layer-components:(transition-[opacity,height,width] bg-fg/5)',
-	'layer-components:data-[hovering]:(pointer-events-auto opacity-100)',
-	'layer-components:data-[scrolling]:(duration-0)',
-	'layer-components:before:(absolute content-empty)',
-
-	'layer-components:data-[orientation=vertical]:(w-0.25rem justify-center before:h-full before:w-1.25rem hover:w-0.5rem)',
-	'layer-components:data-[orientation=horizontal]:(h-0.25rem items-center before:h-1.25rem before:w-full hover:h-0.5rem)',
+	cls.scrollbar,
 );
 
 export const ScrollAreaCorner = withClassName(
 	BaseScrollArea.Corner,
-	'layer-components:(bg-transparent)',
+	cls.corner,
 );
 
 export interface ScrollAreaViewportProps extends BaseScrollArea.Viewport.Props {

package/src/components/select/Select.module.css

@@ -0,0 +1,46 @@
+.trigger {
+	display: inline-flex;
+	font-weight: normal;
+	gap: var(--m-spacing-md);
+
+	&[data-placeholder] {
+		color: var(--m-color-neutral-heavy);
+	}
+}
+
+.value {
+	display: flex;
+	flex-direction: row;
+}
+
+.groupLabel {
+	padding-inline: var(--m-spacing-lg);
+}
+
+.icon {
+	margin-left: auto;
+	@apply --mx-fg(inherit);
+
+	& > [data-icon] {
+		position: relative;
+		top: --fn-literal(1px);
+		width: --fn-literal(12px);
+		height: --fn-literal(12px);
+	}
+}
+
+.positioner {
+	user-select: none;
+	transform-origin: var(--transform-origin);
+
+	&:focus {
+		outline: none;
+	}
+}
+
+.popup {
+	min-width: var(--anchor-width);
+	&[data-side='none'] {
+		min-width: calc(var(--anchor-width) + 2rem);
+	}
+}

package/src/components/select/Select.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Box } from '../box/Box.js';
 import { Button } from '../button/index.js';
 import { Select, SelectContent, SelectItem, SelectTrigger } from './Select.js';
@@ -22,7 +22,7 @@ type Story = StoryObj<typeof Select>;
 export const Default: Story = {
 	render(args) {
 		return (
-			<Box full layout="center center" className="min-h-200px">
+			<Box full layout="center center" style={{ minHeight: 200 }}>
 				<Select {...args}>
 					<SelectTrigger />
 					<SelectContent>
@@ -38,10 +38,29 @@ export const Default: Story = {
 	},
 };
 
+export const Empty: Story = {
+	render(args) {
+		return (
+			<Box full layout="center center" style={{ minHeight: 200 }}>
+				<Select value={null}>
+					<SelectTrigger placeholder="Select an option" />
+					<SelectContent>
+						{['One', 'Two', 'Three'].map((item) => (
+							<SelectItem key={item} value={item}>
+								{item}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+			</Box>
+		);
+	},
+};
+
 export const LongListWithItemLabels: Story = {
 	render({ defaultValue: _, value: __, ...args }) {
 		return (
-			<Box full layout="center center" className="min-h-200px">
+			<Box full layout="center center" style={{ minHeight: 200 }}>
 				<Select
 					{...args}
 					defaultValue={0}
@@ -67,7 +86,7 @@ export const LongListWithItemLabels: Story = {
 export const CompareSelectAndButton: Story = {
 	render(args) {
 		return (
-			<div className="row">
+			<div style={{ display: 'flex', flexDirection: 'row' }}>
 				<Select {...args}>
 					<SelectTrigger />
 					<SelectContent>

package/src/components/select/Select.tsx

@@ -11,11 +11,12 @@ import {
 import classNames, { clsx } from 'clsx';
 import { Ref } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
-import { GroupScaleReset } from '../../systems/GroupScale.js';
 import { Button, ButtonProps } from '../button/Button.js';
-import { getButtonClassName } from '../button/classes.js';
+import buttonCls from '../button/Button.module.css';
 import { Icon } from '../icon/index.js';
+import menuCls from '../primitives/menus.module.css';
 import { ArrowSvg } from '../utility/ArrowSvg.js';
+import cls from './Select.module.css';
 
 export const SelectItem = ({
 	ref: forwardedRef,
@@ -33,14 +34,10 @@ export const SelectItem = ({
 	);
 };
 
-export const SelectItemRoot = withClassName(
-	BaseSelect.Item,
-	'layer-components:(relative h-36px min-h-touch-large flex flex-row select-none items-center pl-35px pr-4 text-md leading-4 color-black)',
-	'[&[data-highlighted]]:(outline-none color-black bg-gray-light) layer-components:[&[data-disabled]]:(pointer-events-none color-gray)',
-);
+export const SelectItemRoot = withClassName(BaseSelect.Item, menuCls.item);
 export const SelectItemIndicatorRoot = withClassName(
 	BaseSelect.ItemIndicator,
-	'layer-components:(absolute left-0 w-25px inline-flex items-center justify-center)',
+	menuCls.itemIndicator,
 );
 export const SelectItemIndicator = (props: SelectItemIndicatorProps) => (
 	<SelectItemIndicatorRoot {...props}>
@@ -51,10 +48,7 @@ export const SelectItemText = withClassName(BaseSelect.ItemText, '');
 export const SelectGroup = BaseSelect.Group;
 
 export const SelectRoot = BaseSelect.Root;
-export const selectTriggerClassName = classNames(
-	getButtonClassName({}),
-	'layer-components:([all:unset] inline-flex data-[placeholder]:color-gray-dark)',
-);
+export const selectTriggerClassName = classNames(buttonCls.root, cls.trigger);
 export const SelectTriggerBase = withClassName(
 	BaseSelect.Trigger,
 	selectTriggerClassName,
@@ -66,20 +60,21 @@ export const SelectTrigger = function SelectTrigger({
 	ref,
 	children,
 	render,
+	placeholder,
 	...props
 }: SelectTriggerProps & {
 	ref?: React.Ref<HTMLButtonElement>;
+	placeholder?: string;
 }) {
 	return (
 		<UnstyledSelectTrigger
 			{...props}
-			className="layer-components:(font-normal)"
 			ref={ref}
-			render={render || <Button className="gap-2 font-normal" />}
+			render={render || <Button className={cls.trigger} />}
 		>
 			{children || (
 				<>
-					<SelectValue />
+					<SelectValue placeholder={placeholder} />
 					<SelectIcon />
 				</>
 			)}
@@ -87,14 +82,15 @@ export const SelectTrigger = function SelectTrigger({
 	);
 };
 
-export const SelectValue = withClassName(BaseSelect.Value, 'flex flex-row');
+export const SelectValue = withClassName(BaseSelect.Value, cls.value);
 export const SelectGroupLabel = withClassName(
 	BaseSelect.GroupLabel,
-	'select-none px-25px text-xs leading-6 color-black',
+	menuCls.groupLabel,
+	cls.groupLabel,
 );
 export const SelectSeparator = withClassName(
 	BaseSelect.Separator,
-	'm-1 h-1px bg-gray-light',
+	menuCls.separator,
 );
 export const SelectIcon = ({
 	ref: forwardedRef,
@@ -105,36 +101,21 @@ export const SelectIcon = ({
 }) => {
 	return (
 		<BaseSelect.Icon
-			className={classNames('ml-auto color-inherit', className)}
+			className={classNames(cls.icon, className)}
 			{...props}
 			ref={forwardedRef}
 		>
-			<Icon name="chevron" className="relative top-1px h-[12px] w-[12px]" />
+			<Icon name="chevron" />
 		</BaseSelect.Icon>
 	);
 };
 
 export const SelectArrow = ({ className, ...props }: SelectArrowProps) => (
-	<BaseSelect.Arrow
-		className={clsx('layer-components:arrow', className)}
-		{...props}
-	>
+	<BaseSelect.Arrow className={clsx(menuCls.arrow, className)} {...props}>
 		<ArrowSvg />
 	</BaseSelect.Arrow>
 );
 
-const scrollArrowClass = clsx(
-	'layer-components:(z-1 h-1rem w-full flex cursor-default select-none items-center justify-center rounded-sm text-center text-xs bg-white)',
-	'layer-components:before:(absolute left-0 h-full w-full content-empty)',
-	'layer-components:data-[direction=up]:data-[side=none]:before:(-top-full)',
-	'layer-components:data-[direction=down]:(bottom-0 data-[side=none]:before:-bottom-full)',
-);
-
-const contentStyle = {
-	zIndex: 1001,
-	'--local-corner-scale': '1',
-} as React.CSSProperties;
-const viewportStyle = { '--local-corner-scale': '0.9' } as React.CSSProperties;
 export const SelectContent = ({
 	ref: forwardedRef,
 	children,
@@ -157,65 +138,40 @@ export const SelectContent = ({
 	SelectPositionerProps & { ref?: Ref<HTMLDivElement> }) => {
 	return (
 		<BaseSelect.Portal>
-			<GroupScaleReset>
-				<BaseSelect.Backdrop />
-				<BaseSelect.Positioner
-					side={side}
-					sideOffset={sideOffset}
-					align={align}
-					alignOffset={alignOffset}
-					alignItemWithTrigger={alignItemWithTrigger}
-					disableAnchorTracking={disableAnchorTracking}
-					arrowPadding={arrowPadding}
-					anchor={anchor}
-					collisionAvoidance={collisionAvoidance}
-					collisionBoundary={collisionBoundary}
-					collisionPadding={collisionPadding}
-					sticky={sticky}
-					positionMethod={positionMethod}
-					className={classNames(
-						'layer-components:(z-1 select-none outline-none)',
-						'layer-components:(transform-origin-[--transform-origin])',
-					)}
+			<BaseSelect.Backdrop />
+			<BaseSelect.Positioner
+				side={side}
+				sideOffset={sideOffset}
+				align={align}
+				alignOffset={alignOffset}
+				alignItemWithTrigger={alignItemWithTrigger}
+				disableAnchorTracking={disableAnchorTracking}
+				arrowPadding={arrowPadding}
+				anchor={anchor}
+				collisionAvoidance={collisionAvoidance}
+				collisionBoundary={collisionBoundary}
+				collisionPadding={collisionPadding}
+				sticky={sticky}
+				positionMethod={positionMethod}
+				className={classNames(cls.positioner)}
+			>
+				<BaseSelect.Popup
+					className={classNames(menuCls.popup, cls.popup, className)}
+					{...props}
+					ref={forwardedRef}
 				>
-					<SelectArrow
-						className={clsx(
-							'layer-components:(transform transition border-black)',
-							'layer-components:data-[closed]:(scale-0 opacity-0)',
-							'layer-components:data-[open]:(scale-100 opacity-100)',
-						)}
-					/>
-					<BaseSelect.Popup
-						className={classNames(
-							'layer-components:(overflow-hidden border border rounded-md border-solid bg-clip-padding shadow-lg transition bg-white border-black)',
-							'layer-components:transform-origin-[var(--transform-origin)]',
-							'layer-components:data-[starting-style]:data-[side=bottom]:(translate-y-4px opacity-0)',
-							'layer-components:data-[ending-style]:data-[side=bottom]:(translate-y-4px opacity-0)',
-							'layer-components:data-[starting-style]:data-[side=top]:(translate-y--4px opacity-0)',
-							'layer-components:data-[ending-style]:data-[side=top]:(translate-y-0 opacity-0)',
-							'layer-components:data-[starting-style]:data-[side=right]:(translate-x-4px opacity-0)',
-							'layer-components:data-[ending-style]:data-[side=right]:(translate-x-0 opacity-0)',
-							'layer-components:data-[starting-style]:data-[side=left]:(translate-x--4px opacity-0)',
-							'layer-components:data-[ending-style]:data-[side=left]:(translate-x-0 opacity-0)',
-							'important:motion-reduce:animate-none',
-							'layer-components:data-[side=none]:(min-w-[calc(var(--anchor-width)+2rem)] translate-y-0px)',
-							'layer-components:(max-h-[var(--available-height)] min-w-[var(--anchor-width)])',
-							className,
-						)}
-						style={contentStyle}
-						{...props}
-						ref={forwardedRef}
-					>
-						<BaseSelect.ScrollUpArrow className={scrollArrowClass}>
-							<Icon name="chevron" className="rotate-180" />
-						</BaseSelect.ScrollUpArrow>
-						<BaseSelect.List style={viewportStyle}>{children}</BaseSelect.List>
-						<BaseSelect.ScrollDownArrow className={scrollArrowClass}>
-							<Icon name="chevron" />
-						</BaseSelect.ScrollDownArrow>
-					</BaseSelect.Popup>
-				</BaseSelect.Positioner>
-			</GroupScaleReset>
+					<SelectArrow />
+					<BaseSelect.ScrollUpArrow className={menuCls.scrollArrow}>
+						<Icon name="chevron" style={{ transform: 'rotate(180deg)' }} />
+					</BaseSelect.ScrollUpArrow>
+					<BaseSelect.List className={menuCls.itemList}>
+						{children}
+					</BaseSelect.List>
+					<BaseSelect.ScrollDownArrow className={menuCls.scrollArrow}>
+						<Icon name="chevron" />
+					</BaseSelect.ScrollDownArrow>
+				</BaseSelect.Popup>
+			</BaseSelect.Positioner>
 		</BaseSelect.Portal>
 	);
 };

package/src/components/skeletons/TextSkeleton.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Box } from '../index.js';
 import { TextSkeleton } from './skeletons.js';
 

package/src/components/skeletons/skeletons.module.css

@@ -0,0 +1,33 @@
+@keyframes skeleton {
+	0% {
+		background-position: 0% 50%;
+	}
+	100% {
+		background-position: 100% 50%;
+	}
+}
+
+.textSkeleton {
+	background-size: 400%, 400%;
+	display: inline-block;
+	height: 100%;
+	max-width: 100%;
+	border-radius: var(--m-radius-md);
+	width: 100%;
+	flex-shrink: 0;
+	opacity: 20%;
+
+	animation-name: skeleton;
+	animation-duration: 1.5s;
+	animation-iteration-count: infinite;
+	animation-timing-function: var(--m-easing);
+	animation-direction: alternate;
+	animation-play-state: running;
+
+	background-image: linear-gradient(
+		to right,
+		transparent 0%,
+		var(--mx-fg-ref, var(--m-color-main-ink)) 50%,
+		transparent 100%
+	);
+}

package/src/components/skeletons/skeletons.tsx

@@ -1,5 +1,6 @@
 import classNames from 'clsx';
 import { useState } from 'react';
+import cls from './skeletons.module.css';
 
 export const TextSkeleton = ({
 	maxLength,
@@ -14,10 +15,7 @@ export const TextSkeleton = ({
 
 	return (
 		<span
-			className={classNames(
-				'[background-size:400%_400%] inline-block h-full max-w-full w-full shrink-0 animate-skeleton animate-duration-1200 animate-ease-in-out animate-alternate animate-iteration-infinite rounded-md from-transparent via-fg to-transparent bg-gradient-to-r opacity-30',
-				className,
-			)}
+			className={classNames(cls.textSkeleton, className)}
 			style={{
 				width: `${length}ch`,
 				height: '1.2em',