Feature request: Export resolveClassName
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Feature request
## Summary
Using BaseUI with tailwind-variants, it expects className to be a string/obj/array (not a function), but BaseUI className prop can be a string or a function passing state as an arg. So this throws a typescript error:
```tsx
import { Button as ButtonBase } from "@base-ui/react/button";
import { tv, type VariantProps } from "tailwind-variants";
const button = tv({
base: "font-semibold text-black py-1 px-3 rounded-full active:opacity-80",
variants: {
color: {
primary: "bg-blue-500 hover:bg-blue-700",
secondary: "bg-purple-500 hover:bg-purple-700",
},
size: {
sm: "py-1 px-3 text-xs",
md: "py-1.5 px-4 text-sm",
},
},
});
function Button({
className,
color,
size,
...props
}: ButtonBase.Props & VariantProps) {
return (
);
}
export { Button };
```
To fix it you need to normalize the prop to a string if its a function like this:
```
button({ color, size, className: typeof className === "function" ? className(state) : className, })} {...props} />
```
Which is exactly whats being used under the hood with [resolveClassName](https://github.com/mui/base-ui/blob/master/packages/react/src/utils/resolveClassName.ts).
It'd be really helpful if that could be exported/exposed publicly so we could use that instead of rolling out own version.
I'd put in a PR myself but none of the other utils are exported so I'm not sure how you would want to approach it.
Contributor guide
Assessment
This issue has not been assessed yet.