upgrade to v3

Author: irsyadadl

package-lock.json

@@ -32,9 +32,9 @@
         "@types/node": "^22.14.0",
         "motion": "^12.10.0",
         "react": "^19.1.0",
-        "react-aria-components": "^1.10.0",
+        "react-aria-components": "^1.10.1",
         "react-dom": "^19.1.0",
-        "sonner": "^2.0.3",
+        "sonner": "^2.0.5",
         "tailwindcss-react-aria-components": "^2.0.0",
         "tw-animate-css": "^1.2.5",
         "vite": "^6.2.5"

package.json

@@ -1,5 +1,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "./toast.css";
+
 @plugin 'tailwindcss-react-aria-components';
 
 @variant dark (&:is(.dark *));

resources/css/app.css

@@ -0,0 +1,53 @@
+@theme inline {
+    --color-success-bg: var(--success-bg);
+    --color-success-border: var(--success-border);
+    --color-success-text: var(--success-text);
+
+    --color-info-bg: var(--info-bg);
+    --color-info-border: var(--info-border);
+    --color-info-text: var(--info-text);
+
+    --color-warning-bg: var(--warning-bg);
+    --color-warning-border: var(--warning-border);
+    --color-warning-text: var(--warning-text);
+
+    --color-error-bg: var(--error-bg);
+    --color-error-border: var(--error-border);
+    --color-error-text: var(--error-text);
+}
+
+:root {
+    --success-bg: var(--color-emerald-50);
+    --success-border: var(--color-emerald-100);
+    --success-text: var(--color-emerald-600);
+
+    --info-bg: theme(--color-blue-600/15%);
+    --info-border: theme(--color-blue-600/15%);
+    --info-text: var(--color-blue-600);
+
+    --warning-bg: theme(--color-amber-500/15%);
+    --warning-border: theme(--color-amber-400/40%);
+    --warning-text: var(--color-amber-600);
+
+    --error-bg: theme(--color-red-500/20%);
+    --error-border: theme(--color-red-200);
+    --error-text: var(--color-red-600);
+}
+
+.dark {
+    --success-bg: var(--color-emerald-950);
+    --success-border: var(--color-emerald-900);
+    --success-text: var(--color-emerald-200);
+
+    --info-bg: theme(--color-blue-600/15%);
+    --info-border: theme(--color-blue-600/15%);
+    --info-text: var(--color-blue-200);
+
+    --warning-bg: theme(--color-amber-400/10%);
+    --warning-border: theme(--color-amber-500/15%);
+    --warning-text: var(--color-amber-200);
+
+    --error-bg: theme(--color-red-600/10%);
+    --error-border: theme(--color-red-600/15%);
+    --error-text: var(--color-red-200);
+}

resources/css/toast.css

@@ -5,74 +5,92 @@ import {
   type ButtonProps as ButtonPrimitiveProps,
   composeRenderProps,
 } from "react-aria-components"
-import { tv } from "tailwind-variants"
+import { type VariantProps, tv } from "tailwind-variants"
 
 const buttonStyles = tv({
   base: [
-    "relative isolate inline-flex items-center justify-center gap-x-2 font-medium",
-    "outline-0 outline-offset-2 hover:no-underline focus-visible:outline-2",
-    "inset-ring inset-ring-fg/20 bg-(--btn-bg) pressed:bg-(--btn-overlay) text-(--btn-fg) shadow-[shadow:inset_0_2px_--theme(--color-white/15%)] hover:bg-(--btn-overlay) dark:inset-ring-fg/15 dark:shadow-none",
-    "forced-colors:outline-[Highlight] forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText]",
-    "*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:my-1 *:data-[slot=icon]:size-4 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:text-current/60 pressed:*:data-[slot=icon]:text-current *:data-[slot=icon]:transition hover:*:data-[slot=icon]:text-current/90",
-    "*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:my-1 *:data-[slot=avatar]:*:size-4 *:data-[slot=avatar]:size-4 *:data-[slot=avatar]:shrink-0",
+    "[--btn-icon-active:var(--btn-fg)] [--btn-outline:var(--btn-bg)] [--btn-ring:var(--btn-bg)]/20",
+    "bg-(--btn-bg) pressed:bg-(--btn-overlay) text-(--btn-fg) outline-(--btn-outline) ring-(--btn-ring) hover:bg-(--btn-overlay)",
+    "relative inset-ring inset-ring-fg/15 isolate inline-flex items-center justify-center font-medium",
+    "focus:outline-0 focus-visible:outline focus-visible:outline-offset-2 focus-visible:ring-2 focus-visible:ring-offset-3 focus-visible:ring-offset-bg",
+    "*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:my-0.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) pressed:*:data-[slot=icon]:text-(--btn-icon-active) focus-visible:*:data-[slot=icon]:text-(--btn-icon-active)/80 hover:*:data-[slot=icon]:text-(--btn-icon-active)/90 sm:*:data-[slot=icon]:my-1 forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText]",
+    "*:data-[slot=loader]:-mx-0.5 *:data-[slot=loader]:my-0.5 *:data-[slot=loader]:shrink-0 *:data-[slot=loader]:self-center *:data-[slot=loader]:text-(--btn-icon) sm:*:data-[slot=loader]:my-1",
   ],
   variants: {
     intent: {
-      primary: [
-        "outline-primary [--btn-bg:var(--color-primary)]/95 [--btn-fg:var(--color-primary-fg)] [--btn-overlay:var(--color-primary)]",
-      ],
-      secondary: [
-        "outline-primary [--btn-bg:var(--color-secondary)]/90 [--btn-fg:var(--color-secondary-fg)] [--btn-overlay:var(--color-secondary)]",
-      ],
-      warning: [
-        "outline-warning [--btn-bg:var(--color-warning)]/95 [--btn-fg:var(--color-warning-fg)] [--btn-overlay:var(--color-warning)]",
+      primary:
+        "[--btn-bg:var(--color-primary)] [--btn-fg:var(--color-primary-fg)] [--btn-icon:color-mix(in_oklab,var(--primary-fg)_60%,var(--primary))] [--btn-overlay:var(--color-primary)]/85",
+      secondary:
+        "[--btn-bg:var(--color-secondary)] [--btn-fg:var(--color-secondary-fg)] [--btn-icon:var(--color-muted-fg)] [--btn-outline:var(--color-secondary-fg)] [--btn-overlay:var(--color-secondary)]/85 [--btn-ring:var(--color-muted-fg)]/20",
+      warning:
+        "[--btn-bg:var(--color-warning)] [--btn-fg:var(--color-warning-fg)] [--btn-icon:color-mix(in_oklab,var(--warning-fg)_60%,var(--warning))] [--btn-overlay:var(--color-warning)]/85",
+      danger:
+        "[--btn-bg:var(--color-danger)] [--btn-fg:var(--color-danger-fg)] [--btn-icon:color-mix(in_oklab,var(--danger-fg)_60%,var(--danger))] [--btn-overlay:var(--color-danger)]/85",
+      outline:
+        "inset-ring-border [--btn-bg:transparent] [--btn-icon:var(--color-muted-fg)] [--btn-outline:var(--color-ring)] [--btn-overlay:var(--color-muted)] [--btn-ring:var(--color-ring)]/20",
+      plain:
+        "inset-ring-transparent [--btn-bg:transparent] [--btn-icon:var(--color-muted-fg)] [--btn-outline:var(--color-ring)] [--btn-overlay:var(--color-muted)] [--btn-ring:var(--color-ring)]/20",
+    },
+    size: {
+      xs: [
+        "gap-x-1 px-2.5 py-1.5 text-sm sm:px-2 sm:py-1 sm:text-xs/4",
+        "*:data-[slot=icon]:size-3.5 sm:*:data-[slot=icon]:size-3",
+        "*:data-[slot=loader]:size-3.5 sm:*:data-[slot=loader]:size-3",
       ],
-      danger: [
-        "outline-danger [--btn-bg:var(--color-danger)]/95 [--btn-fg:var(--color-danger-fg)] [--btn-overlay:var(--color-danger)]",
+      sm: [
+        "gap-x-1.5 px-3 py-2 sm:px-2.5 sm:py-1.5 sm:text-sm/5",
+        "*:data-[slot=icon]:size-4.5 sm:*:data-[slot=icon]:size-4",
+        "*:data-[slot=loader]:size-4.5 sm:*:data-[slot=loader]:size-4",
       ],
-      outline: [
-        "shadow-none outline-primary [--btn-fg:var(--color-fg)] [--btn-overlay:var(--color-secondary)]/90",
+      md: [
+        "gap-x-2 px-3.5 py-2 sm:px-3 sm:py-1.5 sm:text-sm/6",
+        "*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4",
+        "*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4",
       ],
-      plain: [
-        "inset-ring-transparent shadow-none outline-primary [--btn-fg:var(--color-fg)] [--btn-overlay:var(--color-secondary)]/90 dark:inset-ring-transparent",
+      lg: [
+        "gap-x-2 px-4 py-2.5 sm:px-3.5 sm:py-2 sm:text-sm/6",
+        "*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4.5",
+        "*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4.5",
       ],
+      "sq-xs":
+        "size-8 *:data-[slot=icon]:size-3.5 *:data-[slot=loader]:size-3.5 sm:size-7 sm:*:data-[slot=icon]:size-3 sm:*:data-[slot=loader]:size-3",
+      "sq-sm":
+        "size-9 *:data-[slot=icon]:size-4.5 *:data-[slot=loader]:size-4.5 sm:size-8 sm:*:data-[slot=icon]:size-4 sm:*:data-[slot=loader]:size-4",
+      "sq-md":
+        "size-10 *:data-[slot=icon]:size-5 *:data-[slot=loader]:size-5 sm:size-9 sm:*:data-[slot=icon]:size-4 sm:*:data-[slot=loader]:size-4",
+      "sq-lg":
+        "size-11 *:data-[slot=icon]:size-5 *:data-[slot=loader]:size-5 sm:size-10 sm:*:data-[slot=icon]:size-4.5 sm:*:data-[slot=loader]:size-4.5",
     },
-    size: {
-      "extra-small":
-        "h-8 px-[calc(var(--spacing)*2.7)] text-xs/4 **:data-[slot=avatar]:*:size-3.5 **:data-[slot=avatar]:size-3.5 **:data-[slot=icon]:size-3 lg:text-[0.800rem]/4",
-      small: "h-9 px-3.5 text-sm/5 sm:text-sm/5",
-      medium: "h-10 px-4 text-base sm:text-sm/6",
-      large:
-        "h-11 px-4.5 text-base *:data-[slot=icon]:mx-[-1.5px] sm:*:data-[slot=icon]:size-5 lg:text-base/7",
-      "square-petite": "size-9 shrink-0",
-    },
-    shape: {
-      square: "rounded-lg",
-      circle: "rounded-full",
+
+    isCircle: {
+      true: "rounded-full",
+      false: "rounded-lg",
     },
     isDisabled: {
-      false: "cursor-pointer",
-      true: "inset-ring-0 cursor-default opacity-50 forced-colors:text-[GrayText]",
+      true: "inset-ring-0 opacity-50 forced-colors:text-[GrayText]",
     },
     isPending: {
-      true: "cursor-default opacity-50",
+      true: "opacity-50",
     },
   },
   defaultVariants: {
     intent: "primary",
-    size: "medium",
-    shape: "square",
+    size: "md",
+    isCircle: false,
   },
+  compoundVariants: [
+    {
+      size: ["xs", "sq-xs"],
+      className: "rounded-sm *:data-[slot=icon]:size-3",
+    },
+  ],
 })
 
-interface ButtonProps extends ButtonPrimitiveProps {
-  intent?: "primary" | "secondary" | "danger" | "warning" | "outline" | "plain"
-  size?: "medium" | "large" | "square-petite" | "extra-small" | "small"
-  shape?: "square" | "circle"
+interface ButtonProps extends ButtonPrimitiveProps, VariantProps<typeof buttonStyles> {
   ref?: React.Ref<HTMLButtonElement>
 }
 
-const Button = ({ className, intent, size, shape, ref, ...props }: ButtonProps) => {
+const Button = ({ className, intent, size, isCircle, ref, ...props }: ButtonProps) => {
   return (
     <ButtonPrimitive
       ref={ref}
@@ -82,7 +100,7 @@ const Button = ({ className, intent, size, shape, ref, ...props }: ButtonProps)
           ...renderProps,
           intent,
           size,
-          shape,
+          isCircle,
           className,
         }),
       )}