@hanzo/ui 5.3.33 → 5.3.35

package/dist/blocks/index.js

@@ -97,63 +97,78 @@ var AccordionContent = /* @__PURE__ */ __name(({
   }
 ), "AccordionContent");
 AccordionContent.displayName = AccordionPrimitive__namespace.Content.displayName;
-var Card = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: cn(
-      "bg-card text-card-foreground rounded-lg border shadow-xs",
-      className
-    ),
-    ref,
-    ...props
-  }
-), "Card");
-Card.displayName = "Card";
-var CardHeader = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: cn("flex flex-col space-y-1.5 p-6", className),
-    ref,
-    ...props
-  }
-), "CardHeader");
-CardHeader.displayName = "CardHeader";
-var CardTitle = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "h3",
-  {
-    className: cn(
-      "text-2xl leading-none font-semibold tracking-tight",
-      className
-    ),
-    ref,
-    ...props
-  }
-), "CardTitle");
-CardTitle.displayName = "CardTitle";
-var CardDescription = /* @__PURE__ */ __name(({
-  className,
-  ref,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "p",
-  {
-    className: cn("text-text-secondary text-sm", className),
-    ref,
-    ...props
-  }
-), "CardDescription");
-CardDescription.displayName = "CardDescription";
-var CardContent = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-6 pt-0", className), ref, ...props }), "CardContent");
-CardContent.displayName = "CardContent";
-var CardFooter = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: cn("flex items-center p-6 pt-0", className),
-    ref,
-    ...props
-  }
-), "CardFooter");
-CardFooter.displayName = "CardFooter";
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(Card, "Card");
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(CardHeader, "CardHeader");
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+__name(CardTitle, "CardTitle");
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+__name(CardDescription, "CardDescription");
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
+__name(CardContent, "CardContent");
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+      ...props
+    }
+  );
+}
+__name(CardFooter, "CardFooter");
 
 // util/specifier.ts
 var getPrimaryStartingWith = /* @__PURE__ */ __name((s, toFind) => {
@@ -381,15 +396,15 @@ var BulletCardsBlockComponent = /* @__PURE__ */ __name(({
 }, "BulletCardsBlockComponent");
 var bullet_cards_block_default = BulletCardsBlockComponent;
 var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all 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',
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
         // Keep the additional Hanzo variants for backward compatibility
         primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
@@ -397,10 +412,12 @@ var buttonVariants = classVarianceAuthority.cva(
         linkMuted: "text-muted-foreground underline-offset-4 hover:underline hover:text-foreground"
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9"
+        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"
       }
     },
     defaultVariants: {
@@ -410,11 +427,14 @@ var buttonVariants = classVarianceAuthority.cva(
   }
 );
 var Button = React4__namespace.forwardRef(
-  ({ className, variant, size, asChild = false, isLoading = false, children, ...props }, ref) => {
+  ({ className, variant = "default", size = "default", asChild = false, isLoading = false, children, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Comp,
       {
+        "data-slot": "button",
+        "data-variant": variant,
+        "data-size": size,
         className: cn(buttonVariants({ variant, size, className })),
         ref,
         ...props,
@@ -422,10 +442,10 @@ var Button = React4__namespace.forwardRef(
           isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
             lucideReact.Loader2,
             {
-              className: cn("h-4 w-4 animate-spin", size !== "icon" && "mr-2")
+              className: cn("h-4 w-4 animate-spin", size !== "icon" && size !== "icon-sm" && size !== "icon-lg" && "mr-2")
             }
           ) : null,
-          isLoading && size === "icon" ? null : children
+          isLoading && (size === "icon" || size === "icon-sm" || size === "icon-lg") ? null : children
         ]
       }
     );

package/dist/blocks/index.mjs

@@ -71,63 +71,78 @@ var AccordionContent = /* @__PURE__ */ __name(({
   }
 ), "AccordionContent");
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-var Card = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(
-      "bg-card text-card-foreground rounded-lg border shadow-xs",
-      className
-    ),
-    ref,
-    ...props
-  }
-), "Card");
-Card.displayName = "Card";
-var CardHeader = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn("flex flex-col space-y-1.5 p-6", className),
-    ref,
-    ...props
-  }
-), "CardHeader");
-CardHeader.displayName = "CardHeader";
-var CardTitle = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
-  "h3",
-  {
-    className: cn(
-      "text-2xl leading-none font-semibold tracking-tight",
-      className
-    ),
-    ref,
-    ...props
-  }
-), "CardTitle");
-CardTitle.displayName = "CardTitle";
-var CardDescription = /* @__PURE__ */ __name(({
-  className,
-  ref,
-  ...props
-}) => /* @__PURE__ */ jsx(
-  "p",
-  {
-    className: cn("text-text-secondary text-sm", className),
-    ref,
-    ...props
-  }
-), "CardDescription");
-CardDescription.displayName = "CardDescription";
-var CardContent = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("p-6 pt-0", className), ref, ...props }), "CardContent");
-CardContent.displayName = "CardContent";
-var CardFooter = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn("flex items-center p-6 pt-0", className),
-    ref,
-    ...props
-  }
-), "CardFooter");
-CardFooter.displayName = "CardFooter";
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(Card, "Card");
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(CardHeader, "CardHeader");
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+__name(CardTitle, "CardTitle");
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+__name(CardDescription, "CardDescription");
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
+__name(CardContent, "CardContent");
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+      ...props
+    }
+  );
+}
+__name(CardFooter, "CardFooter");
 
 // util/specifier.ts
 var getPrimaryStartingWith = /* @__PURE__ */ __name((s, toFind) => {
@@ -355,15 +370,15 @@ var BulletCardsBlockComponent = /* @__PURE__ */ __name(({
 }, "BulletCardsBlockComponent");
 var bullet_cards_block_default = BulletCardsBlockComponent;
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all 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',
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
         // Keep the additional Hanzo variants for backward compatibility
         primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
@@ -371,10 +386,12 @@ var buttonVariants = cva(
         linkMuted: "text-muted-foreground underline-offset-4 hover:underline hover:text-foreground"
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9"
+        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"
       }
     },
     defaultVariants: {
@@ -384,11 +401,14 @@ var buttonVariants = cva(
   }
 );
 var Button = React4.forwardRef(
-  ({ className, variant, size, asChild = false, isLoading = false, children, ...props }, ref) => {
+  ({ className, variant = "default", size = "default", asChild = false, isLoading = false, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsxs(
       Comp,
       {
+        "data-slot": "button",
+        "data-variant": variant,
+        "data-size": size,
         className: cn(buttonVariants({ variant, size, className })),
         ref,
         ...props,
@@ -396,10 +416,10 @@ var Button = React4.forwardRef(
           isLoading ? /* @__PURE__ */ jsx(
             Loader2,
             {
-              className: cn("h-4 w-4 animate-spin", size !== "icon" && "mr-2")
+              className: cn("h-4 w-4 animate-spin", size !== "icon" && size !== "icon-sm" && size !== "icon-lg" && "mr-2")
             }
           ) : null,
-          isLoading && size === "icon" ? null : children
+          isLoading && (size === "icon" || size === "icon-sm" || size === "icon-lg") ? null : children
         ]
       }
     );

package/dist/calendar-ext/index.js

@@ -39,15 +39,15 @@ function cn(...inputs) {
 }
 __name(cn, "cn");
 var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all 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',
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
         // Keep the additional Hanzo variants for backward compatibility
         primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
@@ -55,10 +55,12 @@ var buttonVariants = classVarianceAuthority.cva(
         linkMuted: "text-muted-foreground underline-offset-4 hover:underline hover:text-foreground"
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9"
+        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"
       }
     },
     defaultVariants: {
@@ -68,11 +70,14 @@ var buttonVariants = classVarianceAuthority.cva(
   }
 );
 var Button = React2__namespace.forwardRef(
-  ({ className, variant, size, asChild = false, isLoading = false, children, ...props }, ref) => {
+  ({ className, variant = "default", size = "default", asChild = false, isLoading = false, children, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Comp,
       {
+        "data-slot": "button",
+        "data-variant": variant,
+        "data-size": size,
         className: cn(buttonVariants({ variant, size, className })),
         ref,
         ...props,
@@ -80,10 +85,10 @@ var Button = React2__namespace.forwardRef(
           isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
             lucideReact.Loader2,
             {
-              className: cn("h-4 w-4 animate-spin", size !== "icon" && "mr-2")
+              className: cn("h-4 w-4 animate-spin", size !== "icon" && size !== "icon-sm" && size !== "icon-lg" && "mr-2")
             }
           ) : null,
-          isLoading && size === "icon" ? null : children
+          isLoading && (size === "icon" || size === "icon-sm" || size === "icon-lg") ? null : children
         ]
       }
     );

package/dist/calendar-ext/index.mjs

@@ -18,15 +18,15 @@ function cn(...inputs) {
 }
 __name(cn, "cn");
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all 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',
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
         // Keep the additional Hanzo variants for backward compatibility
         primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
@@ -34,10 +34,12 @@ var buttonVariants = cva(
         linkMuted: "text-muted-foreground underline-offset-4 hover:underline hover:text-foreground"
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9"
+        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"
       }
     },
     defaultVariants: {
@@ -47,11 +49,14 @@ var buttonVariants = cva(
   }
 );
 var Button = React2.forwardRef(
-  ({ className, variant, size, asChild = false, isLoading = false, children, ...props }, ref) => {
+  ({ className, variant = "default", size = "default", asChild = false, isLoading = false, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsxs(
       Comp,
       {
+        "data-slot": "button",
+        "data-variant": variant,
+        "data-size": size,
         className: cn(buttonVariants({ variant, size, className })),
         ref,
         ...props,
@@ -59,10 +64,10 @@ var Button = React2.forwardRef(
           isLoading ? /* @__PURE__ */ jsx(
             Loader2,
             {
-              className: cn("h-4 w-4 animate-spin", size !== "icon" && "mr-2")
+              className: cn("h-4 w-4 animate-spin", size !== "icon" && size !== "icon-sm" && size !== "icon-lg" && "mr-2")
             }
           ) : null,
-          isLoading && size === "icon" ? null : children
+          isLoading && (size === "icon" || size === "icon-sm" || size === "icon-lg") ? null : children
         ]
       }
     );

package/dist/calendar.js

@@ -40,15 +40,15 @@ function cn(...inputs) {
 }
 __name(cn, "cn");
 var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all 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',
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
         // Keep the additional Hanzo variants for backward compatibility
         primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
@@ -56,10 +56,12 @@ var buttonVariants = classVarianceAuthority.cva(
         linkMuted: "text-muted-foreground underline-offset-4 hover:underline hover:text-foreground"
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9"
+        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"
       }
     },
     defaultVariants: {
@@ -69,11 +71,14 @@ var buttonVariants = classVarianceAuthority.cva(
   }
 );
 var Button = React2__namespace.forwardRef(
-  ({ className, variant, size, asChild = false, isLoading = false, children, ...props }, ref) => {
+  ({ className, variant = "default", size = "default", asChild = false, isLoading = false, children, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Comp,
       {
+        "data-slot": "button",
+        "data-variant": variant,
+        "data-size": size,
         className: cn(buttonVariants({ variant, size, className })),
         ref,
         ...props,
@@ -81,10 +86,10 @@ var Button = React2__namespace.forwardRef(
           isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
             lucideReact.Loader2,
             {
-              className: cn("h-4 w-4 animate-spin", size !== "icon" && "mr-2")
+              className: cn("h-4 w-4 animate-spin", size !== "icon" && size !== "icon-sm" && size !== "icon-lg" && "mr-2")
             }
           ) : null,
-          isLoading && size === "icon" ? null : children
+          isLoading && (size === "icon" || size === "icon-sm" || size === "icon-lg") ? null : children
         ]
       }
     );