Button

1// Copyright (c) 2026 raouf.codes - Azemmur
2 
3'use client';
4 
5import { cn } from '@/lib/utils';
6import { cva, type VariantProps } from 'class-variance-authority';
7import * as React from 'react';
8 
9import {
10  Button as ButtonPrimitive,
11  type ButtonProps as ButtonPrimitiveProps,
12} from '@/components/azemmur/components/primitives/button';
13 
14const buttonVariants = cva(
15  [
16    'inline-flex items-center justify-center gap-2 whitespace-nowrap',
17    'select-none touch-manipulation text-sm font-medium shrink-0',
18    'transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke]',
19    'outline-none',
20    'disabled:pointer-events-none disabled:opacity-50',
21    '[&_svg]:pointer-events-none [&_svg]:shrink-0',
22    "[&_svg:not([class*='size-'])]:size-4",
23    'aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error',
24  ].join(' '),
25  {
26    variants: {
27      intent: {
28        primary: 'bg-primary text-primary border-primary',
29        accent: 'bg-accent text-accent border-accent',
30        secondary: 'bg-secondary text-secondary border-secondary',
31        success: 'bg-success text-success border-success',
32        info: 'bg-info text-info border-info',
33        warning: 'bg-warning text-warning border-warning',
34        error: 'bg-error text-error border-error',
35      },
36      styling: {
37        solid: 'border-none',
38        outline: 'border border-2 bg-background hover:bg-current/20',
39        ghost: 'bg-transparent',
40        link: 'bg-transparent underline-offset-4 hover:underline focus-visible:underline focus-visible:ring-0 focus-visible:bg-ring/40 focus-visible:rounded-none focus-visible:p-0',
41      },
42      size: {
43        sm: 'h-8 px-2 gap-1.5 has-[>svg]:px-2.5',
44        md: 'h-9 px-4 py-2 has-[>svg]:px-4',
45        lg: 'h-10 px-6 has-[>svg]:px-4',
46        'icon-sm': 'size-8 p-0',
47        'icon-md': 'size-9 p-0',
48        'icon-lg': 'size-10 p-0',
49      },
50      shape: {
51        rounded: 'rounded-md',
52        pill: 'rounded-full',
53        sharp: 'rounded-none',
54      },
55      elevation: {
56        raised:
57          'shadow-sm hover:shadow-md active:shadow-none hover:opacity-95 active:opacity-90',
58        floating:
59          'shadow-md hover:shadow-lg active:shadow-sm hover:opacity-95 active:opacity-90',
60      },
61    },
62    compoundVariants: [
63      {
64        intent: 'primary',
65        styling: 'solid',
66        className: 'text-primary-foreground',
67      },
68      {
69        intent: 'accent',
70// … truncated