Something went wrong. Try again.
Training wheels for the terminal
Something went wrong. Try again.
1.5 kB · 45 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546"use client";import { composeRenderProps, Button as RACButton, ButtonProps as RACButtonProps,} from "react-aria-components";import { tv } from "tailwind-variants";import { focusRing } from "./utils";
export interface ButtonProps extends RACButtonProps { /** @default 'primary' */ variant?: "primary" | "themed" | "secondary";}
let button = tv({ extend: focusRing, base: "inset-ring text-ctp-base px-3 py-2 text-sm text-center rounded-lg cursor-default shadow-sm shadow-ctp-surface1 dark:shadow-ctp-mantle hover:shadow-md", variants: { variant: { primary: "bg-ctp-mauve-700 hover:bg-ctp-mauve pressed:bg-ctp-mauve-950 inset-ring-ctp-mauve-300", secondary: "inset-ring-ctp-surface2 hover:bg-ctp-mantle dark:hover:bg-ctp-surface1 pressed:bg-ctp-surface2 text-ctp-text", themed: "bg-hue-700 inset-ring-hue hover:bg-hue pressed:bg-hue-700 text-ctp-base", }, isDisabled: { true: "text-ctp-subtext0 bg-ctp-surface1 inset-ring-ctp-surface1 opacity-60 cursor-not-allowed hover:bg-ctp-surface1 pressed:bg-ctp-surface1 forced-colors:text-[GrayText]", }, }, defaultVariants: { variant: "primary", },});
export function Button(props: ButtonProps) { return ( <RACButton {...props} className={composeRenderProps(props.className, (className, renderProps) => button({ ...renderProps, variant: props.variant, className }), )} /> );}