@saasflare/ui 3.1.1 → 3.2.0

package/dist/{chunk-RW2S3KNB.mjs → chunk-5C65JNGY.mjs}

@@ -1,9 +1,9 @@
 "use client";
-import { useSaasflareMotion, springBouncy } from './chunk-EJHYM2HP.mjs';
-import { cn, useSaasflareProps } from './chunk-WRONFPRI.mjs';
+import { useSaasflareMotion, springBouncy } from './chunk-OZAWULTM.mjs';
+import { XIcon } from './chunk-GI6VN7XU.mjs';
+import { cn, useSaasflareProps } from './chunk-RMQBB72G.mjs';
 import { m } from 'motion/react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { XIcon } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function Dialog({
@@ -48,9 +48,10 @@ function DialogContent({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = useSaasflareProps({ surface, radius, animated });
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   const motion = useSaasflareMotion(sf.animated, springBouncy);
   return /* @__PURE__ */ jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
@@ -71,13 +72,13 @@ function DialogContent({
             exit: motion.disabled ? { opacity: 0 } : { opacity: 0, scale: 0.95, y: 10 },
             transition: motion.transition,
             className: cn(
-              "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg sm:max-w-lg",
+              "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border surface-card p-6 sm:max-w-lg",
               className
             ),
             children: [
               children,
               /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [
-                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx(XIcon, { weight: sf.iconWeight }),
                 /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
               ] })
             ]

package/dist/{chunk-DNLCSV5M.js → chunk-7UD3SGPP.js}

@@ -1,9 +1,8 @@
 "use client";
 'use strict';
 
-var chunkFT66KYRN_js = require('./chunk-FT66KYRN.js');
-var chunkD5LKWKG7_js = require('./chunk-D5LKWKG7.js');
-var lucideReact = require('lucide-react');
+var chunkITALEYDI_js = require('./chunk-ITALEYDI.js');
+var chunk2GOPD64T_js = require('./chunk-2GOPD64T.js');
 var react = require('motion/react');
 var classVarianceAuthority = require('class-variance-authority');
 var Slot = require('@radix-ui/react-slot');
@@ -41,11 +40,12 @@ var buttonVariants = classVarianceAuthority.cva(
     variants: {
       variant: {
         solid: "bg-[var(--intent)] text-[var(--intent-fg)] shadow-xs hover:brightness-110 dark:hover:brightness-125",
-        soft: "bg-[var(--intent)]/15 text-[var(--intent)] hover:bg-[var(--intent)]/25 dark:bg-[var(--intent)]/20 dark:hover:bg-[var(--intent)]/30",
-        outline: "border border-[var(--intent)]/30 text-[var(--intent)] shadow-xs hover:bg-[var(--intent)]/10 dark:border-[var(--intent)]/40 dark:hover:bg-[var(--intent)]/15",
-        ghost: "text-[var(--intent)] hover:bg-[var(--intent)]/10 dark:hover:bg-[var(--intent)]/15",
-        link: "text-[var(--intent)] underline-offset-4 hover:underline",
-        glass: "bg-[var(--glass-bg)] text-[var(--intent)] border border-[var(--glass-border)] backdrop-blur-lg shadow-[var(--glass-shadow)] hover:bg-[var(--glass-bg-hover)] hover:border-[var(--glass-border-hover)]",
+        soft: "bg-[var(--intent)]/15 text-[var(--intent-text)] hover:bg-[var(--intent)]/25 dark:bg-[var(--intent)]/20 dark:hover:bg-[var(--intent)]/30",
+        outline: "border border-[var(--intent-text)]/30 text-[var(--intent-text)] shadow-xs hover:bg-[var(--intent-text)]/10 dark:border-[var(--intent-text)]/40 dark:hover:bg-[var(--intent-text)]/15",
+        ghost: "text-[var(--intent-text)] hover:bg-[var(--intent-text)]/10 dark:hover:bg-[var(--intent-text)]/15",
+        link: "text-[var(--intent-text)] underline-offset-4 hover:underline",
+        glass: "bg-[var(--surface-bg)] text-[var(--intent-text)] border border-[var(--surface-border)] [backdrop-filter:var(--surface-backdrop)] [-webkit-backdrop-filter:var(--surface-backdrop)] shadow-[var(--surface-shadow)] hover:brightness-110 dark:hover:brightness-125",
+        clay: "bg-[var(--intent)] text-[var(--intent-fg)] shadow-[var(--surface-shadow)] hover:brightness-110 active:translate-y-px dark:hover:brightness-125",
         shadow: "bg-[var(--intent)] text-[var(--intent-fg)] shadow-[var(--btn-shadow)] hover:shadow-[var(--btn-shadow-hover)] hover:brightness-110 dark:hover:brightness-125"
       },
       size: {
@@ -72,18 +72,18 @@ function Button({
   size = "md",
   intent: intentProp = "primary",
   asChild = false,
-  loading = false,
   fullWidth = false,
   surface,
+  iconWeight,
   radius,
   animated,
   disabled,
   children,
   ...props
 }) {
-  const sf = chunkD5LKWKG7_js.useSaasflareProps({ surface, radius, animated });
-  const motion = chunkFT66KYRN_js.useSaasflareMotion(sf.animated, chunkFT66KYRN_js.spring, disabled ?? false, loading);
-  const effectiveVariant = variantProp ?? (sf.surface === "glass" ? "glass" : "solid");
+  const sf = chunk2GOPD64T_js.useSaasflareProps({ surface, radius, animated, iconWeight });
+  const motion = chunkITALEYDI_js.useSaasflareMotion(sf.animated, chunkITALEYDI_js.spring, disabled ?? false);
+  const effectiveVariant = variantProp ?? (sf.surface === "glass" ? "glass" : sf.surface === "clay" ? "clay" : "solid");
   let resolvedVariant = effectiveVariant;
   let resolvedIntent = intentProp;
   const legacy = LEGACY_VARIANT_MAP[effectiveVariant];
@@ -93,56 +93,45 @@ function Button({
       resolvedIntent = legacy.intent;
     }
   }
+  const dataAttrs = {
+    "data-slot": "button",
+    "data-variant": resolvedVariant,
+    "data-intent": resolvedIntent,
+    "data-size": size,
+    "data-surface": sf.surface,
+    "data-radius": sf.radius,
+    "data-animated": String(sf.animated)
+  };
+  const classes = chunk2GOPD64T_js.cn(
+    buttonVariants({ variant: resolvedVariant, size }),
+    fullWidth && "w-full",
+    className
+  );
   if (asChild) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       MotionSlot,
       {
         ...props,
-        "data-slot": "button",
-        "data-variant": resolvedVariant,
-        "data-intent": resolvedIntent,
-        "data-size": size,
-        "data-surface": sf.surface,
-        "data-radius": sf.radius,
-        "data-animated": String(sf.animated),
+        ...dataAttrs,
         whileHover: motion.disabled ? void 0 : { scale: 1.02 },
         whileTap: motion.disabled ? void 0 : { scale: 0.97 },
         transition: motion.transition,
-        className: chunkD5LKWKG7_js.cn(
-          buttonVariants({ variant: resolvedVariant, size }),
-          fullWidth && "w-full",
-          className
-        ),
+        className: classes,
         children
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     react.m.button,
     {
-      "data-slot": "button",
-      "data-variant": resolvedVariant,
-      "data-intent": resolvedIntent,
-      "data-size": size,
-      "data-surface": sf.surface,
-      "data-radius": sf.radius,
-      "data-animated": String(sf.animated),
+      ...dataAttrs,
       whileHover: motion.disabled ? void 0 : { scale: 1.02 },
       whileTap: motion.disabled ? void 0 : { scale: 0.97 },
       transition: motion.transition,
-      className: chunkD5LKWKG7_js.cn(
-        buttonVariants({ variant: resolvedVariant, size }),
-        fullWidth && "w-full",
-        className
-      ),
+      className: classes,
       disabled,
-      "aria-busy": loading || void 0,
-      "aria-disabled": disabled || void 0,
       ...props,
-      children: [
-        loading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "animate-spin", "aria-hidden": "true" }),
-        children
-      ]
+      children
     }
   );
 }