@nswds/app 1.111.1 → 1.112.0

package/dist/globals.css

@@ -4952,6 +4952,21 @@
   .\[--btn-hover-overlay\:var\(--footer-social-hover-bg\)\] {
     --btn-hover-overlay: var(--footer-social-hover-bg);
   }
+  .\[--btn-icon-size\:--spacing\(5\)\] {
+    --btn-icon-size: calc(var(--spacing) * 5);
+  }
+  .\[--btn-icon-size\:--spacing\(6\)\] {
+    --btn-icon-size: calc(var(--spacing) * 6);
+  }
+  .\[--btn-icon-size\:--spacing\(7\)\] {
+    --btn-icon-size: calc(var(--spacing) * 7);
+  }
+  .\[--btn-icon-size\:--spacing\(8\)\] {
+    --btn-icon-size: calc(var(--spacing) * 8);
+  }
+  .\[--btn-icon-size\:--spacing\(9\)\] {
+    --btn-icon-size: calc(var(--spacing) * 9);
+  }
   .\[--btn-icon\:var\(--footer-social\)\] {
     --btn-icon: var(--footer-social);
   }
@@ -8495,6 +8510,14 @@
       }
     }
   }
+  .\*\:data-\[slot\=icon\]\:size-\(--btn-icon-size\) {
+    :is(& > *) {
+      &[data-slot="icon"] {
+        width: var(--btn-icon-size);
+        height: var(--btn-icon-size);
+      }
+    }
+  }
   .\*\:data-\[slot\=icon\]\:size-4 {
     :is(& > *) {
       &[data-slot="icon"] {
@@ -10032,6 +10055,31 @@
       --anchor-offset: -1.375rem;
     }
   }
+  .sm\:\[--btn-icon-size\:--spacing\(4\)\] {
+    @media (width >= 40rem) {
+      --btn-icon-size: calc(var(--spacing) * 4);
+    }
+  }
+  .sm\:\[--btn-icon-size\:--spacing\(5\)\] {
+    @media (width >= 40rem) {
+      --btn-icon-size: calc(var(--spacing) * 5);
+    }
+  }
+  .sm\:\[--btn-icon-size\:--spacing\(6\)\] {
+    @media (width >= 40rem) {
+      --btn-icon-size: calc(var(--spacing) * 6);
+    }
+  }
+  .sm\:\[--btn-icon-size\:--spacing\(7\)\] {
+    @media (width >= 40rem) {
+      --btn-icon-size: calc(var(--spacing) * 7);
+    }
+  }
+  .sm\:\[--btn-icon-size\:--spacing\(8\)\] {
+    @media (width >= 40rem) {
+      --btn-icon-size: calc(var(--spacing) * 8);
+    }
+  }
   .sm\:duration-300 {
     @media (width >= 40rem) {
       animation-duration: 300ms;

package/dist/index.cjs

@@ -4237,7 +4237,7 @@ var styles = {
     // Disabled
     "data-disabled:opacity-50 data-disabled:pointer-events-none",
     // Icon
-    "*:data-[slot=icon]:-mx-0.25 *:data-[slot=icon]:my-0.25 sm:*:data-[slot=icon]:my-0.5 *:data-[slot=icon]:size-6 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) sm:*:data-[slot=icon]:size-5 forced-colors:[--btn-icon:ButtonText] forced-colors:data-hover:[--btn-icon:ButtonText]"
+    "*:data-[slot=icon]:-mx-0.25 *:data-[slot=icon]:my-0.25 sm:*:data-[slot=icon]:my-0.5 *:data-[slot=icon]:size-(--btn-icon-size) *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) forced-colors:[--btn-icon:ButtonText] forced-colors:data-hover:[--btn-icon:ButtonText]"
   ],
   solid: [
     // Text color
@@ -4501,6 +4501,12 @@ var styles = {
     sm: "px-[calc(--spacing(4)-1px)] py-[calc(--spacing(3)-1px)] sm:px-[calc(--spacing(3.5)-1px)] sm:py-[calc(--spacing(2)-1px)]",
     lg: "px-[calc(--spacing(6)-1px)] py-[calc(--spacing(5)-1px)] sm:px-[calc(--spacing(5.5)-1px)] sm:py-[calc(--spacing(4)-1px)]",
     icon: "w-10 h-10 flex-none"
+  },
+  iconSize: {
+    default: "[--btn-icon-size:--spacing(6)] sm:[--btn-icon-size:--spacing(5)]",
+    sm: "[--btn-icon-size:--spacing(5)] sm:[--btn-icon-size:--spacing(4)]",
+    lg: "[--btn-icon-size:--spacing(7)] sm:[--btn-icon-size:--spacing(6)]",
+    xl: "[--btn-icon-size:--spacing(8)] sm:[--btn-icon-size:--spacing(7)]"
   }
 };
 var buttonVariants = classVarianceAuthority.cva(styles.base, {
@@ -4529,16 +4535,23 @@ var buttonVariants = classVarianceAuthority.cva(styles.base, {
       sm: styles.size.sm,
       lg: styles.size.lg,
       icon: styles.size.icon
+    },
+    iconSize: {
+      default: styles.iconSize.default,
+      sm: styles.iconSize.sm,
+      lg: styles.iconSize.lg,
+      xl: styles.iconSize.xl
     }
   },
   defaultVariants: {
     variant: "solid",
     color: "primary",
-    size: "default"
+    size: "default",
+    iconSize: "default"
   }
 });
-var Button2 = React5.forwardRef(function Button3({ className, variant, color: color2, size, children, ...props }, ref) {
-  const classes = cn(buttonVariants({ variant, color: color2, size }), className);
+var Button2 = React5.forwardRef(function Button3({ className, variant, color: color2, size, iconSize, children, ...props }, ref) {
+  const classes = cn(buttonVariants({ variant, color: color2, size, iconSize }), className);
   return "href" in props ? /* @__PURE__ */ jsxRuntime.jsx(
     Link,
     {
@@ -18822,7 +18835,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.110.2"};
+  version: "1.111.1"};
 var SluggerContext = React5__namespace.default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";