74 lines
1.6 KiB
TypeScript
74 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import { Slot } from "@radix-ui/react-slot"
|
|
import { Children, type ReactNode } from "react"
|
|
import { Button as ButtonRAC } from "react-aria-components"
|
|
|
|
import { buttonVariants } from "./variants"
|
|
|
|
import type { ButtonProps } from "./button"
|
|
|
|
// We wrap all text nodes to avoid having consumers manually wrap text nodes in spans.
|
|
// This is so that we can better support underline on buttons as Material Symbols
|
|
// are implemented as a font and therefore gets underline. Icons inside buttons
|
|
// should not get an underline.
|
|
function wrapTextNodes(children: ReactNode): ReactNode {
|
|
return Children.map(children, (child) => {
|
|
if (typeof child === "string") {
|
|
return <span>{child}</span>
|
|
}
|
|
return child
|
|
})
|
|
}
|
|
|
|
export default function Button(props: ButtonProps) {
|
|
const {
|
|
children,
|
|
className,
|
|
clean,
|
|
intent,
|
|
size,
|
|
theme,
|
|
fullWidth,
|
|
wrapping,
|
|
variant,
|
|
...restProps
|
|
} = props
|
|
|
|
const classNames = buttonVariants({
|
|
className,
|
|
clean,
|
|
intent,
|
|
size,
|
|
theme,
|
|
fullWidth,
|
|
wrapping,
|
|
variant,
|
|
})
|
|
|
|
const wrappedChildren =
|
|
typeof children === "function" ? children : wrapTextNodes(children)
|
|
|
|
if (restProps.asChild) {
|
|
const { asChild, ...slotProps } = restProps
|
|
return (
|
|
<Slot className={classNames} {...slotProps}>
|
|
{/* @ts-expect-error: Incorrect types for Slot */}
|
|
{wrappedChildren}
|
|
</Slot>
|
|
)
|
|
}
|
|
|
|
const { asChild, onClick, disabled, ...racProps } = restProps
|
|
return (
|
|
<ButtonRAC
|
|
className={classNames}
|
|
isDisabled={disabled}
|
|
onPress={onClick}
|
|
{...racProps}
|
|
>
|
|
{wrappedChildren}
|
|
</ButtonRAC>
|
|
)
|
|
}
|