@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
36 lines (35 loc) • 3.6 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { Button as ButtonPrimitive } from '@base-ui/react/button';
import { cva } from 'class-variance-authority';
import { cn } from '../../lib/utils';
const buttonVariants = cva('twa:group/button twa:inline-flex twa:shrink-0 twa:items-center twa:justify-center twa:rounded-button twa:border twa:border-transparent twa:bg-clip-padding twa:text-sm twa:font-medium twa:whitespace-nowrap twa:transition-all twa:outline-none twa:select-none twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:active:translate-y-px twa:disabled:pointer-events-none twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4', {
variants: {
variant: {
default: 'twa:bg-primary twa:text-primary-foreground twa:hover:bg-primary/80',
outline: 'twa:border-border twa:bg-background twa:shadow-xs twa:hover:bg-muted twa:hover:text-foreground twa:aria-expanded:bg-muted twa:aria-expanded:text-foreground twa:dark:border-input twa:dark:hover:bg-input/50',
secondary: 'twa:bg-secondary twa:text-secondary-foreground twa:hover:bg-secondary/80 twa:aria-expanded:bg-secondary twa:aria-expanded:text-secondary-foreground',
ghost: 'twa:bg-transparent twa:hover:bg-muted twa:hover:text-foreground twa:aria-expanded:bg-muted twa:aria-expanded:text-foreground twa:dark:hover:bg-muted/50',
destructive: 'twa:bg-destructive/10 twa:text-destructive twa:hover:bg-destructive/20 twa:focus-visible:border-destructive/40 twa:focus-visible:ring-destructive/20 twa:dark:bg-destructive/20 twa:dark:hover:bg-destructive/30 twa:dark:focus-visible:ring-destructive/40',
link: 'twa:text-primary twa:underline-offset-4 twa:hover:underline',
},
size: {
default: 'twa:min-h-input twa:h-9 twa:gap-1.5 twa:px-2.5 twa:in-data-[slot=button-group]:rounded-md twa:has-data-[icon=inline-end]:pr-2 twa:has-data-[icon=inline-start]:pl-2',
xs: 'twa:h-6 twa:gap-1 twa:rounded-[min(var(--radius-md),8px)] twa:px-2 twa:text-xs twa:in-data-[slot=button-group]:rounded-md twa:has-data-[icon=inline-end]:pr-1.5 twa:has-data-[icon=inline-start]:pl-1.5 twa:[&_svg:not([class*=size-])]:size-3',
sm: 'twa:h-8 twa:gap-1 twa:rounded-[min(var(--radius-md),10px)] twa:px-2.5 twa:in-data-[slot=button-group]:rounded-md twa:has-data-[icon=inline-end]:pr-1.5 twa:has-data-[icon=inline-start]:pl-1.5',
lg: 'twa:h-10 twa:gap-1.5 twa:px-2.5 twa:has-data-[icon=inline-end]:pr-3 twa:has-data-[icon=inline-start]:pl-3',
icon: 'twa:size-9',
'icon-xs': 'twa:size-6 twa:rounded-[min(var(--radius-md),8px)] twa:in-data-[slot=button-group]:rounded-md twa:[&_svg:not([class*=size-])]:size-3',
'icon-sm': 'twa:size-8 twa:rounded-[min(var(--radius-md),10px)] twa:in-data-[slot=button-group]:rounded-md',
'icon-lg': 'twa:size-10',
},
},
defaultVariants: {
variant: 'default',
size: 'default',
},
});
const Button = React.forwardRef(function Button({ className, variant = 'default', size = 'default', ...props }, ref) {
return (_jsx(ButtonPrimitive, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
});
export { Button, buttonVariants };