@zoop-svelte/svelte-components
Version:
Zoop UI component library built with Svelte 5, TypeScript, and Tailwind CSS
84 lines (83 loc) • 2.93 kB
JavaScript
import { tv } from 'tailwind-variants';
import Root from './button.svelte';
const buttonVariants = tv({
base: [
'inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer',
'text-sm font-medium transition-all duration-200',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 rounded',
'focus-visible:outline-none',
'focus-visible:ring-1 focus-visible:ring-foreground-primary',
'focus-visible:gap-spacing-sm',
'disabled:bg-muted',
'disabled:text-muted-dark',
'disabled:pointer-events-none'
],
variants: {
variant: {
// PRIMARY BUTTON - Exact orange from Figma
primary: [
'bg-primary text-background-primary',
// Hover
'hover:bg-primary-dark',
// Pressed
'active:bg-primary-dark',
'active:border-[2px] active:border-primary-foreground'
],
// DESTRUCTIVE BUTTON - Exact red from Figma
destructive: [
'bg-distructive text-background-primary',
// Hover
'hover:bg-distructive-dark',
// Pressed
'active:bg-distructive-dark',
'active:border-[2px] active:border-distructive-foreground'
],
// SECONDARY BUTTON - Gray from Figma
secondary: [
'bg-secondary text-primary',
// Hover
'hover:bg-primary-background-secondary',
// Pressed
'active:border-[2px] active:border-primary-dark'
],
// GHOST BUTTON - Transparent with orange text
ghost: [
'text-primary',
// Hover
'hover:bg-muted hover:text-primary-dark',
// Pressed
'active:text-primary-dark active:bg-secondary',
// Disabled
'disabled:bg-transparant'
],
// LINK BUTTON - Orange text with underline
link: [
'text-primary',
// Hover
'hover:text-primary-dark',
'hover:underline',
// Pressed
'active:text-primary-foreground',
// Disabled
'disabled:bg-transparant'
],
icon: [
'text-foreground-primary',
// Hover
'hover:bg-muted',
// Pressed
'active:bg-muted-medium'
]
},
size: {
lg: 'h-12 px-6 text-base',
md: 'h-10 px-4 text-md',
sm: 'h-8 px-2 text-sm'
}
},
defaultVariants: {
variant: 'primary',
size: 'lg'
}
});
export { Root, buttonVariants };