+
{children}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 38a6381..904b9d1 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -5,28 +5,28 @@ import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-all duration-300 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
- default: "bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-lg hover:shadow-primary/25 active:scale-[0.98]",
+ default: "bg-gradient-to-r from-primary via-primary/95 to-primary/90 text-primary-foreground hover:from-primary/95 hover:via-primary hover:to-primary/95 shadow-xl shadow-primary/30 hover:shadow-2xl hover:shadow-primary/40 hover:scale-[1.03] active:scale-[0.97] backdrop-blur-sm border border-primary/20",
destructive:
- "bg-destructive text-white hover:bg-destructive/90 hover:shadow-lg hover:shadow-destructive/25 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 active:scale-[0.98]",
+ "bg-gradient-to-r from-destructive via-destructive/95 to-destructive/90 text-white hover:from-destructive/95 hover:via-destructive hover:to-destructive/95 shadow-xl shadow-destructive/30 hover:shadow-2xl hover:shadow-destructive/40 hover:scale-[1.03] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 active:scale-[0.97] backdrop-blur-sm border border-destructive/20",
outline:
- "border bg-background/80 backdrop-blur-sm shadow-sm hover:bg-accent hover:text-accent-foreground hover:border-primary/30 hover:shadow-md dark:bg-input/30 dark:border-input dark:hover:bg-input/50 active:scale-[0.98]",
+ "border-2 bg-background/95 backdrop-blur-md shadow-md hover:bg-accent hover:text-accent-foreground hover:border-primary/50 hover:shadow-lg hover:scale-[1.03] dark:bg-input/40 dark:border-input dark:hover:bg-input/60 active:scale-[0.97]",
secondary:
- "bg-secondary text-secondary-foreground hover:bg-secondary/80 hover:shadow-sm active:scale-[0.98]",
+ "bg-gradient-to-r from-secondary via-secondary/95 to-secondary/90 text-secondary-foreground hover:from-secondary/95 hover:via-secondary hover:to-secondary/95 hover:shadow-lg hover:scale-[1.03] active:scale-[0.97] backdrop-blur-sm",
ghost:
- "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 active:scale-[0.98]",
- link: "text-primary underline-offset-4 hover:underline",
+ "hover:bg-accent/70 hover:text-accent-foreground dark:hover:bg-accent/50 hover:scale-[1.03] active:scale-[0.97] backdrop-blur-sm",
+ link: "text-primary underline-offset-4 hover:underline font-semibold",
},
size: {
- default: "h-9 px-4 py-2 has-[>svg]:px-3",
- sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
- lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
- icon: "size-9",
- "icon-sm": "size-8",
- "icon-lg": "size-10",
+ default: "h-10 px-5 py-2.5 has-[>svg]:px-4",
+ sm: "h-9 rounded-lg gap-1.5 px-4 has-[>svg]:px-3 text-xs",
+ lg: "h-12 rounded-xl px-7 has-[>svg]:px-5 text-base",
+ icon: "size-10",
+ "icon-sm": "size-9",
+ "icon-lg": "size-12",
},
},
defaultVariants: {
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index 850e7dd..50e357e 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -7,12 +7,9 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
) {
+ const contentRef = React.useRef
(null);
+
+ React.useEffect(() => {
+ const element = contentRef.current;
+ if (!element) return;
+
+ const disableAnimations = () => {
+ element.style.setProperty('animation', 'none', 'important');
+ element.style.setProperty('transition', 'none', 'important');
+ // Ne pas toucher au transform car il est utilisé pour le positionnement
+ element.style.setProperty('opacity', '1', 'important');
+ element.style.setProperty('will-change', 'auto', 'important');
+
+ // Supprimer toutes les classes d'animation Tailwind
+ const classesToRemove = Array.from(element.classList).filter(cls =>
+ cls.includes('animate') || cls.includes('fade') || cls.includes('zoom') || cls.includes('slide')
+ );
+ classesToRemove.forEach(cls => element.classList.remove(cls));
+ };
+
+ // Désactiver immédiatement
+ disableAnimations();
+
+ // Observer pour les changements d'attributs
+ const observer = new MutationObserver(() => {
+ disableAnimations();
+ });
+
+ observer.observe(element, {
+ attributes: true,
+ attributeFilter: ['class', 'data-state'],
+ subtree: false,
+ });
+
+ // Observer pour les changements dans le DOM
+ const domObserver = new MutationObserver(() => {
+ disableAnimations();
+ });
+
+ domObserver.observe(document.body, {
+ childList: true,
+ subtree: true,
+ });
+
+ return () => {
+ observer.disconnect();
+ domObserver.disconnect();
+ };
+ }, []);
+
return (
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
index e435637..e9faeb3 100644
--- a/components/ui/progress.tsx
+++ b/components/ui/progress.tsx
@@ -14,14 +14,14 @@ function Progress({
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 1eb016e..7cc0783 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -56,17 +56,71 @@ function SelectContent({
position = "popper",
...props
}: React.ComponentProps) {
+ const contentRef = React.useRef(null);
+
+ React.useEffect(() => {
+ const element = contentRef.current;
+ if (!element) return;
+
+ const disableAnimations = () => {
+ element.style.setProperty('animation', 'none', 'important');
+ element.style.setProperty('transition', 'none', 'important');
+ // Ne pas toucher au transform car il est utilisé pour le positionnement
+ element.style.setProperty('opacity', '1', 'important');
+ element.style.setProperty('will-change', 'auto', 'important');
+
+ // Supprimer toutes les classes d'animation Tailwind
+ const classesToRemove = Array.from(element.classList).filter(cls =>
+ cls.includes('animate') || cls.includes('fade') || cls.includes('zoom') || cls.includes('slide')
+ );
+ classesToRemove.forEach(cls => element.classList.remove(cls));
+ };
+
+ // Désactiver immédiatement
+ disableAnimations();
+
+ // Observer pour les changements d'attributs
+ const observer = new MutationObserver(() => {
+ disableAnimations();
+ });
+
+ observer.observe(element, {
+ attributes: true,
+ attributeFilter: ['class', 'data-state'],
+ subtree: false,
+ });
+
+ // Observer pour les changements dans le DOM
+ const domObserver = new MutationObserver(() => {
+ disableAnimations();
+ });
+
+ domObserver.observe(document.body, {
+ childList: true,
+ subtree: true,
+ });
+
+ return () => {
+ observer.disconnect();
+ domObserver.disconnect();
+ };
+ }, []);
+
return (