fix: allow custom className

.eslintrc.js

@@ -106,7 +106,8 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['**/__tests__/**/*.spec.[jt]s?(x)'],
+      files: ['**/__tests__/**/*.spec.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+      excludedFiles: 'playwright/*',
       extends: ['plugin:testing-library/react'],
     },
     {

.vscode/settings.json

@@ -4,7 +4,7 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.stylelint": true
+    "source.fixAll.stylelint": "explicit"
   },
   "eslint.workingDirectories": ["./", "./apps/remix"]
 }

packages/components/package.json

@@ -33,7 +33,8 @@
   },
   "dependencies": {
     "@launchpad-ui/tokens": "workspace:~",
-    "react-aria-components": "1.0.0-rc.0"
+    "react-aria-components": "1.0.0-rc.0",
+    "clsx": "2.0.0"
   },
   "peerDependencies": {
     "@stylexjs/stylex": "0.3.0",

packages/components/src/ProgressBar.tsx

@@ -2,6 +2,7 @@ import type { StyleXStyles } from '@stylexjs/stylex';
 import type { ProgressBarProps as AriaProgressBarProps } from 'react-aria-components';
 
 import * as stylex from '@stylexjs/stylex';
+import { clsx } from 'clsx';
 import { ProgressBar as AriaProgressBar } from 'react-aria-components';
 
 import { tokens } from './tokens.stylex';
@@ -44,14 +45,20 @@ interface ProgressBarProps extends Omit<AriaProgressBarProps, 'style'> {
   size?: 'small' | 'medium' | 'large';
 }
 
-const ProgressBar = ({ style, size = 'small', ...props }: ProgressBarProps) => {
+const ProgressBar = ({ style, size = 'small', className, ...props }: ProgressBarProps) => {
   const center = 16;
   const strokeWidth = 4;
   const r = 16 - strokeWidth;
   const c = 2 * r * Math.PI;
 
+  const stylexProps = stylex.props(styles.base, styles[size], style);
+
   return (
-    <AriaProgressBar {...props} {...stylex.props(styles.base, styles[size], style)}>
+    <AriaProgressBar
+      {...props}
+      className={clsx(stylexProps.className, className)}
+      style={stylexProps.style}
+    >
       {({ percentage }) => (
         <svg
           width={64}