@saasflare/ui 3.0.2 → 3.1.1

package/dist/button-0Bdl7Nqm.d.ts

@@ -0,0 +1,87 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { c as SaasflareComponentProps } from './use-saasflare-props-NrM2Glmp.js';
+
+declare const INTENTS: readonly ["primary", "neutral", "success", "warning", "danger", "info"];
+type Intent = (typeof INTENTS)[number];
+/**
+ * Button variant definitions using the 3-axis system.
+ *
+ * Axes:
+ *   variant — visual treatment: solid, soft, outline, ghost, link, glass, shadow
+ *   intent  — color intent via data-intent attribute + CSS tokens
+ *   size    — dimensional: xs, sm, md, lg, xl, icon, icon-xs, icon-sm, icon-lg
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "outline" | "link" | "glass" | "soft" | "solid" | "ghost" | "shadow" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/** Framer-motion event overrides that conflict with React HTML events */
+type MotionConflicts = "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd";
+/**
+ * Props for the Saasflare Button component.
+ *
+ * Extends {@link SaasflareComponentProps} to accept `surface` and `animated`
+ * overrides that are resolved against the <SaasflareProvider> context.
+ */
+interface ButtonProps extends Omit<React.ComponentProps<"button">, MotionConflicts>, VariantProps<typeof buttonVariants>, SaasflareComponentProps {
+    /** Render as child element (Radix Slot pattern) */
+    asChild?: boolean;
+    /** Semantic color intent */
+    intent?: Intent;
+    /** Show loading spinner (replaces left icon, keeps text visible) */
+    loading?: boolean;
+    /** Stretch to full width of container */
+    fullWidth?: boolean;
+}
+/**
+ * Primary interactive button with motion, loading, and intent support.
+ *
+ * Resolves `surface` and `animated` via {@link useSaasflareProps} with the
+ * precedence: component prop > <SaasflareProvider> context > hardcoded default.
+ *
+ * When no explicit `variant` is set and the resolved surface is `"glass"`, the
+ * button promotes itself to `variant="glass"`. An explicit `variant` prop always
+ * wins over the surface-based promotion.
+ *
+ * @component
+ * @layer ui
+ *
+ * @param {string} variant - Visual treatment: "solid" | "soft" | "outline" | "ghost" | "link" | "glass" | "shadow"
+ * @param {string} intent - Color intent: "primary" | "neutral" | "success" | "warning" | "danger" | "info"
+ * @param {string} size - Button size: "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg"
+ * @param {string} surface - Surface style override: "flat" | "glass" (inherits from provider when omitted)
+ * @param {boolean} animated - Gate motion effects (inherits from provider when omitted)
+ * @param {boolean} loading - Shows spinner, sets aria-busy, preserves width
+ * @param {boolean} fullWidth - Stretches to container width
+ * @param {boolean} asChild - Render as child element (Slot pattern)
+ *
+ * @example
+ * // Solid primary (default)
+ * <Button>Save Changes</Button>
+ *
+ * @example
+ * // Outline danger
+ * <Button variant="outline" intent="danger">Delete Account</Button>
+ *
+ * @example
+ * // Inherits surface from provider — auto-promotes to glass variant
+ * <SaasflareProvider surface="glass"><Button>Frosted</Button></SaasflareProvider>
+ *
+ * @example
+ * // Loading state
+ * <Button loading>Processing...</Button>
+ *
+ * @example
+ * // Icon button
+ * <Button variant="ghost" size="icon"><SettingsIcon /></Button>
+ *
+ * @example
+ * // Legacy API (deprecated but supported)
+ * <Button variant="destructive">Delete</Button>
+ */
+declare function Button({ className, variant: variantProp, size, intent: intentProp, asChild, loading, fullWidth, surface, radius, animated, disabled, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+export { Button as B, type Intent as I, type ButtonProps as a, buttonVariants as b };

package/dist/button-Brb4BhPO.d.mts

@@ -0,0 +1,87 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { c as SaasflareComponentProps } from './use-saasflare-props-NrM2Glmp.mjs';
+
+declare const INTENTS: readonly ["primary", "neutral", "success", "warning", "danger", "info"];
+type Intent = (typeof INTENTS)[number];
+/**
+ * Button variant definitions using the 3-axis system.
+ *
+ * Axes:
+ *   variant — visual treatment: solid, soft, outline, ghost, link, glass, shadow
+ *   intent  — color intent via data-intent attribute + CSS tokens
+ *   size    — dimensional: xs, sm, md, lg, xl, icon, icon-xs, icon-sm, icon-lg
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "outline" | "link" | "glass" | "soft" | "solid" | "ghost" | "shadow" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/** Framer-motion event overrides that conflict with React HTML events */
+type MotionConflicts = "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd";
+/**
+ * Props for the Saasflare Button component.
+ *
+ * Extends {@link SaasflareComponentProps} to accept `surface` and `animated`
+ * overrides that are resolved against the <SaasflareProvider> context.
+ */
+interface ButtonProps extends Omit<React.ComponentProps<"button">, MotionConflicts>, VariantProps<typeof buttonVariants>, SaasflareComponentProps {
+    /** Render as child element (Radix Slot pattern) */
+    asChild?: boolean;
+    /** Semantic color intent */
+    intent?: Intent;
+    /** Show loading spinner (replaces left icon, keeps text visible) */
+    loading?: boolean;
+    /** Stretch to full width of container */
+    fullWidth?: boolean;
+}
+/**
+ * Primary interactive button with motion, loading, and intent support.
+ *
+ * Resolves `surface` and `animated` via {@link useSaasflareProps} with the
+ * precedence: component prop > <SaasflareProvider> context > hardcoded default.
+ *
+ * When no explicit `variant` is set and the resolved surface is `"glass"`, the
+ * button promotes itself to `variant="glass"`. An explicit `variant` prop always
+ * wins over the surface-based promotion.
+ *
+ * @component
+ * @layer ui
+ *
+ * @param {string} variant - Visual treatment: "solid" | "soft" | "outline" | "ghost" | "link" | "glass" | "shadow"
+ * @param {string} intent - Color intent: "primary" | "neutral" | "success" | "warning" | "danger" | "info"
+ * @param {string} size - Button size: "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg"
+ * @param {string} surface - Surface style override: "flat" | "glass" (inherits from provider when omitted)
+ * @param {boolean} animated - Gate motion effects (inherits from provider when omitted)
+ * @param {boolean} loading - Shows spinner, sets aria-busy, preserves width
+ * @param {boolean} fullWidth - Stretches to container width
+ * @param {boolean} asChild - Render as child element (Slot pattern)
+ *
+ * @example
+ * // Solid primary (default)
+ * <Button>Save Changes</Button>
+ *
+ * @example
+ * // Outline danger
+ * <Button variant="outline" intent="danger">Delete Account</Button>
+ *
+ * @example
+ * // Inherits surface from provider — auto-promotes to glass variant
+ * <SaasflareProvider surface="glass"><Button>Frosted</Button></SaasflareProvider>
+ *
+ * @example
+ * // Loading state
+ * <Button loading>Processing...</Button>
+ *
+ * @example
+ * // Icon button
+ * <Button variant="ghost" size="icon"><SettingsIcon /></Button>
+ *
+ * @example
+ * // Legacy API (deprecated but supported)
+ * <Button variant="destructive">Delete</Button>
+ */
+declare function Button({ className, variant: variantProp, size, intent: intentProp, asChild, loading, fullWidth, surface, radius, animated, disabled, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+export { Button as B, type Intent as I, type ButtonProps as a, buttonVariants as b };

package/dist/{chunk-XXT4HKND.js → chunk-4BOMMZEY.js}

@@ -1,8 +1,8 @@
 "use client";
 'use strict';
 
-var chunkCWW36RYE_js = require('./chunk-CWW36RYE.js');
-var chunkM3ICCPCU_js = require('./chunk-M3ICCPCU.js');
+var chunkFT66KYRN_js = require('./chunk-FT66KYRN.js');
+var chunkD5LKWKG7_js = require('./chunk-D5LKWKG7.js');
 var react = require('motion/react');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var lucideReact = require('lucide-react');
@@ -56,7 +56,7 @@ function DialogOverlay({
     DialogPrimitive__namespace.Overlay,
     {
       "data-slot": "dialog-overlay",
-      className: chunkM3ICCPCU_js.cn(
+      className: chunkD5LKWKG7_js.cn(
         "fixed inset-0 z-50 bg-black/50 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className
       ),
@@ -67,25 +67,32 @@ function DialogOverlay({
 function DialogContent({
   className,
   children,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
-  const reduced = chunkCWW36RYE_js.useReducedMotion();
+  const sf = chunkD5LKWKG7_js.useSaasflareProps({ surface, radius, animated });
+  const motion = chunkFT66KYRN_js.useSaasflareMotion(sf.animated, chunkFT66KYRN_js.springBouncy);
   return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxRuntime.jsx(
       DialogPrimitive__namespace.Content,
       {
+        ...props,
         "data-slot": "dialog-content",
         asChild: true,
-        ...props,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           react.m.div,
           {
-            initial: reduced ? { opacity: 1 } : { opacity: 0, scale: 0.95, y: 10 },
+            "data-surface": sf.surface,
+            "data-radius": sf.radius,
+            "data-animated": String(sf.animated),
+            initial: motion.disabled ? { opacity: 1 } : { opacity: 0, scale: 0.95, y: 10 },
             animate: { opacity: 1, scale: 1, y: 0 },
-            exit: reduced ? { opacity: 0 } : { opacity: 0, scale: 0.95, y: 10 },
-            transition: reduced ? chunkCWW36RYE_js.noMotion : chunkCWW36RYE_js.springBouncy,
-            className: chunkM3ICCPCU_js.cn(
+            exit: motion.disabled ? { opacity: 0 } : { opacity: 0, scale: 0.95, y: 10 },
+            transition: motion.transition,
+            className: chunkD5LKWKG7_js.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",
               className
             ),
@@ -107,7 +114,7 @@ function DialogHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "dialog-header",
-      className: chunkM3ICCPCU_js.cn("flex flex-col gap-2 text-center sm:text-left", className),
+      className: chunkD5LKWKG7_js.cn("flex flex-col gap-2 text-center sm:text-left", className),
       ...props
     }
   );
@@ -117,7 +124,7 @@ function DialogFooter({ className, ...props }) {
     "div",
     {
       "data-slot": "dialog-footer",
-      className: chunkM3ICCPCU_js.cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+      className: chunkD5LKWKG7_js.cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
       ...props
     }
   );
@@ -130,7 +137,7 @@ function DialogTitle({
     DialogPrimitive__namespace.Title,
     {
       "data-slot": "dialog-title",
-      className: chunkM3ICCPCU_js.cn("text-lg leading-none font-semibold", className),
+      className: chunkD5LKWKG7_js.cn("text-lg leading-none font-semibold", className),
       ...props
     }
   );
@@ -143,7 +150,7 @@ function DialogDescription({
     DialogPrimitive__namespace.Description,
     {
       "data-slot": "dialog-description",
-      className: chunkM3ICCPCU_js.cn("text-sm text-muted-foreground", className),
+      className: chunkD5LKWKG7_js.cn("text-sm text-muted-foreground", className),
       ...props
     }
   );

package/dist/{chunk-YAE5VBWJ.js → chunk-D5LKWKG7.js}

@@ -1,15 +1,13 @@
 "use client";
 'use strict';
 
-var chunkCWW36RYE_js = require('./chunk-CWW36RYE.js');
-var chunkM3ICCPCU_js = require('./chunk-M3ICCPCU.js');
-var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var React2 = require('react');
+require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var nextThemes = require('next-themes');
-var react$1 = require('motion/react');
-var lucideReact = require('lucide-react');
-var classVarianceAuthority = require('class-variance-authority');
-var Slot = require('@radix-ui/react-slot');
+var react = require('motion/react');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -29,14 +27,74 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var Slot__namespace = /*#__PURE__*/_interopNamespace(Slot);
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 
-var AnimationContext = react.createContext(
+// src/lib/utils.ts
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+// src/lib/color.ts
+function hexToOklch(hex) {
+  const normalized = normalizeHex(hex);
+  if (!normalized) return null;
+  const r = srgbToLinear(parseInt(normalized.slice(0, 2), 16) / 255);
+  const g = srgbToLinear(parseInt(normalized.slice(2, 4), 16) / 255);
+  const b = srgbToLinear(parseInt(normalized.slice(4, 6), 16) / 255);
+  const l_ = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+  const m_ = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+  const s_ = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+  const lc = Math.cbrt(l_);
+  const mc = Math.cbrt(m_);
+  const sc = Math.cbrt(s_);
+  const L = 0.2104542553 * lc + 0.793617785 * mc - 0.0040720468 * sc;
+  const a = 1.9779984951 * lc - 2.428592205 * mc + 0.4505937099 * sc;
+  const b2 = 0.0259040371 * lc + 0.7827717662 * mc - 0.808675766 * sc;
+  const c = Math.sqrt(a * a + b2 * b2);
+  let h = Math.atan2(b2, a) * 180 / Math.PI;
+  if (h < 0) h += 360;
+  return { l: L, c, h };
+}
+function normalizeHex(input) {
+  if (typeof input !== "string") return null;
+  const s = input.trim().replace(/^#/, "").toLowerCase();
+  if (/^[0-9a-f]{3}$/.test(s)) {
+    return s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
+  }
+  if (/^[0-9a-f]{4}$/.test(s)) {
+    return s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
+  }
+  if (/^[0-9a-f]{6}$/.test(s)) {
+    return s;
+  }
+  if (/^[0-9a-f]{8}$/.test(s)) {
+    return s.slice(0, 6);
+  }
+  return null;
+}
+function srgbToLinear(c) {
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+function isHex(input) {
+  return typeof input === "string" && /^#?[0-9a-f]{3,8}$/i.test(input.trim());
+}
+var QUERY = "(prefers-reduced-motion: reduce)";
+var subscribe = (cb) => {
+  const mql = window.matchMedia(QUERY);
+  mql.addEventListener("change", cb);
+  return () => mql.removeEventListener("change", cb);
+};
+var getSnapshot = () => window.matchMedia(QUERY).matches;
+var getServerSnapshot = () => false;
+function useReducedMotion() {
+  return React2__namespace.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+var AnimationContext = React2.createContext(
   void 0
 );
 function useAnimation() {
-  const context = react.useContext(AnimationContext);
-  const prefersReduced = chunkCWW36RYE_js.useReducedMotion();
+  const context = React2.useContext(AnimationContext);
+  const prefersReduced = useReducedMotion();
   if (context) return context;
   return { animated: !prefersReduced };
 }
@@ -44,9 +102,9 @@ function SmoothScrollProvider({
   children,
   enabled = true
 }) {
-  const reduced = chunkCWW36RYE_js.useReducedMotion();
+  const reduced = useReducedMotion();
   const shouldSmooth = enabled && !reduced;
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!shouldSmooth) return;
     const html = document.documentElement;
     const previous = html.style.scrollBehavior;
@@ -95,18 +153,18 @@ function SaasflareScript({ nonce, palette, surface, radius, animated, storageKey
 }
 var SYNC_PREFIX = "sf-ls:";
 function useLocalStorage(key, initialValue, options) {
-  const initialRef = react.useRef(initialValue);
-  const optionsRef = react.useRef(options);
+  const initialRef = React2.useRef(initialValue);
+  const optionsRef = React2.useRef(options);
   optionsRef.current = options;
-  const serialize = react.useCallback(
+  const serialize = React2.useCallback(
     (value) => (optionsRef.current?.serializer ?? JSON.stringify)(value),
     []
   );
-  const deserialize = react.useCallback(
+  const deserialize = React2.useCallback(
     (raw) => (optionsRef.current?.deserializer ?? JSON.parse)(raw),
     []
   );
-  const handleError = react.useCallback(
+  const handleError = React2.useCallback(
     (error, operation) => {
       if (optionsRef.current?.onError) {
         optionsRef.current.onError(error, operation);
@@ -116,7 +174,7 @@ function useLocalStorage(key, initialValue, options) {
     },
     [key]
   );
-  const readValue = react.useCallback(() => {
+  const readValue = React2.useCallback(() => {
     if (typeof window === "undefined") return initialRef.current;
     try {
       const item = window.localStorage.getItem(key);
@@ -126,8 +184,8 @@ function useLocalStorage(key, initialValue, options) {
       return initialRef.current;
     }
   }, [key, deserialize, handleError]);
-  const [storedValue, setStoredValue] = react.useState(() => readValue());
-  const setValue = react.useCallback(
+  const [storedValue, setStoredValue] = React2.useState(() => readValue());
+  const setValue = React2.useCallback(
     (value) => {
       try {
         setStoredValue((prev) => {
@@ -144,7 +202,7 @@ function useLocalStorage(key, initialValue, options) {
     },
     [key, serialize, handleError]
   );
-  const removeValue = react.useCallback(() => {
+  const removeValue = React2.useCallback(() => {
     try {
       if (typeof window !== "undefined") {
         window.localStorage.removeItem(key);
@@ -155,7 +213,7 @@ function useLocalStorage(key, initialValue, options) {
       handleError(error, "remove");
     }
   }, [key, handleError]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const onStorage = (e) => {
       if (e.key === key) setStoredValue(readValue());
     };
@@ -168,7 +226,7 @@ function useLocalStorage(key, initialValue, options) {
       window.removeEventListener(syncEvent, onSync);
     };
   }, [key, readValue]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     setStoredValue(readValue());
   }, [readValue]);
   return [storedValue, setValue, removeValue];
@@ -184,13 +242,13 @@ var DEFAULT_CONTEXT = {
   setRadius: () => {
   }
 };
-var SaasflareThemeContext = react.createContext(DEFAULT_CONTEXT);
+var SaasflareThemeContext = React2.createContext(DEFAULT_CONTEXT);
 function useSaasflareTheme() {
-  return react.useContext(SaasflareThemeContext);
+  return React2.useContext(SaasflareThemeContext);
 }
 function applyColorAxis(root, prefix, value, injected) {
-  if (chunkM3ICCPCU_js.isHex(value)) {
-    const oklch = chunkM3ICCPCU_js.hexToOklch(value);
+  if (isHex(value)) {
+    const oklch = hexToOklch(value);
     if (oklch) {
       const hKey = `--${prefix}-h`;
       const cKey = `--${prefix}-c`;
@@ -211,7 +269,7 @@ function applyColorAxis(root, prefix, value, injected) {
 }
 function CustomPaletteInjector({ palette }) {
   const { resolvedTheme } = nextThemes.useTheme();
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const root = document.documentElement;
     const injected = [];
     applyColorAxis(root, "primary", palette.primary, injected);
@@ -268,21 +326,21 @@ function SaasflareProvider({
   const currentPalette = isCustomPalette ? palette.name : palette ?? persisted.palette;
   const currentStyle = surface ?? persisted.surface ?? "flat";
   const currentRadius = radius ?? persisted.radius ?? "rounded";
-  const setPalette = react.useCallback(
+  const setPalette = React2.useCallback(
     (id) => setPersisted((prev) => ({ ...prev, palette: id })),
     [setPersisted]
   );
-  const setSurface = react.useCallback(
+  const setSurface = React2.useCallback(
     (style) => setPersisted((prev) => ({ ...prev, surface: style })),
     [setPersisted]
   );
-  const setRadius = react.useCallback(
+  const setRadius = React2.useCallback(
     (r) => setPersisted((prev) => ({ ...prev, radius: r })),
     [setPersisted]
   );
-  const prefersReduced = chunkCWW36RYE_js.useReducedMotion();
+  const prefersReduced = useReducedMotion();
   const effectiveAnimated = animated && !prefersReduced;
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const root = document.documentElement;
     if (currentPalette) {
       root.setAttribute(SAASFLARE_DATA_ATTR.palette, currentPalette);
@@ -293,7 +351,7 @@ function SaasflareProvider({
     root.setAttribute(SAASFLARE_DATA_ATTR.radius, currentRadius);
     root.setAttribute(SAASFLARE_DATA_ATTR.animated, String(effectiveAnimated));
   }, [currentPalette, currentStyle, currentRadius, effectiveAnimated]);
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.LazyMotion, { features: react$1.domAnimation, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domAnimation, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
     nextThemes.ThemeProvider,
     {
       attribute: "class",
@@ -380,7 +438,7 @@ function SaasflareShell({
 }
 function useSaasflareProps(props = {}) {
   const ctx = useSaasflareTheme();
-  const anim = react.useContext(AnimationContext);
+  const anim = React2.useContext(AnimationContext);
   return {
     surface: props.surface ?? ctx.surface,
     radius: props.radius ?? ctx.radius,
@@ -388,127 +446,13 @@ function useSaasflareProps(props = {}) {
     palette: ctx.palette
   };
 }
-var MotionSlot = react$1.m.create(Slot__namespace.Root);
-var LEGACY_VARIANT_MAP = {
-  default: { variant: "solid", intent: "primary" },
-  destructive: { variant: "solid", intent: "danger" },
-  secondary: { variant: "soft", intent: "neutral" }
-};
-var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    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)]",
-        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: {
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-        md: "h-9 px-4 py-2 has-[>svg]:px-3",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        xl: "h-12 rounded-lg px-8 text-base has-[>svg]:px-5 [&_svg:not([class*='size-'])]:size-5",
-        icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "solid",
-      size: "md"
-    }
-  }
-);
-function Button({
-  className,
-  variant: variantProp,
-  size = "md",
-  intent: intentProp = "primary",
-  asChild = false,
-  loading = false,
-  fullWidth = false,
-  surface,
-  animated,
-  disabled,
-  children,
-  ...props
-}) {
-  const sfProps = useSaasflareProps({ surface, animated });
-  const reduced = chunkCWW36RYE_js.useReducedMotion();
-  const effectiveVariant = variantProp ?? (sfProps.surface === "glass" ? "glass" : "solid");
-  let resolvedVariant = effectiveVariant;
-  let resolvedIntent = intentProp;
-  const legacy = LEGACY_VARIANT_MAP[effectiveVariant];
-  if (legacy) {
-    resolvedVariant = legacy.variant;
-    if (legacy.intent) {
-      resolvedIntent = legacy.intent;
-    }
-  }
-  const motionDisabled = !sfProps.animated || reduced || disabled || loading;
-  const transition = !sfProps.animated || reduced ? chunkCWW36RYE_js.noMotion : chunkCWW36RYE_js.spring;
-  if (asChild) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      MotionSlot,
-      {
-        "data-slot": "button",
-        "data-variant": resolvedVariant,
-        "data-intent": resolvedIntent,
-        "data-size": size,
-        "data-surface": sfProps.surface,
-        whileHover: motionDisabled ? void 0 : { scale: 1.02 },
-        whileTap: motionDisabled ? void 0 : { scale: 0.97 },
-        transition,
-        className: chunkM3ICCPCU_js.cn(
-          buttonVariants({ variant: resolvedVariant, size }),
-          fullWidth && "w-full",
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react$1.m.button,
-    {
-      "data-slot": "button",
-      "data-variant": resolvedVariant,
-      "data-intent": resolvedIntent,
-      "data-size": size,
-      "data-surface": sfProps.surface,
-      whileHover: motionDisabled ? void 0 : { scale: 1.02 },
-      whileTap: motionDisabled ? void 0 : { scale: 0.97 },
-      transition,
-      className: chunkM3ICCPCU_js.cn(
-        buttonVariants({ variant: resolvedVariant, size }),
-        fullWidth && "w-full",
-        className
-      ),
-      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
-      ]
-    }
-  );
-}
 
-exports.Button = Button;
 exports.SaasflareProvider = SaasflareProvider;
 exports.SaasflareScript = SaasflareScript;
 exports.SaasflareShell = SaasflareShell;
 exports.SmoothScrollProvider = SmoothScrollProvider;
-exports.buttonVariants = buttonVariants;
+exports.cn = cn;
 exports.useAnimation = useAnimation;
+exports.useReducedMotion = useReducedMotion;
 exports.useSaasflareProps = useSaasflareProps;
 exports.useSaasflareTheme = useSaasflareTheme;