@saasflare/ui 1.1.2 → 3.0.0

package/README.md

@@ -57,30 +57,41 @@ pnpm add react react-dom next next-themes framer-motion
 `tailwindcss` is **not** a peer dependency — it's a build-time tool. Install it
 in your app and add a `@source` directive (see Setup below).
 
-### Optional (per-component)
-
-These peers are only needed if you import the matching components.
-`peerDependenciesMeta.optional` is set, so package managers won't warn if you
-skip them.
-
-| Component(s)              | Install                                                  |
-| ------------------------- | -------------------------------------------------------- |
-| `Form` + resolvers        | `react-hook-form@^7`, `@hookform/resolvers@^5`, `zod@^4` |
-| `Toast` (`Toaster`)       | `sonner@^2`                                              |
-| `Drawer`                  | `vaul@^1`                                                |
-| `Calendar`                | `react-day-picker@^9`, `date-fns@^4`                     |
-| `Resizable`               | `react-resizable-panels@^4`                              |
-
-### Subpath imports (heavy peers — install only when used)
-
-| Subpath                  | Install                          |
-| ------------------------ | -------------------------------- |
-| `@saasflare/ui/chart`    | `recharts@^3` (~95 KB gzip)       |
-| `@saasflare/ui/carousel` | `embla-carousel-react@^8` (~25 KB) |
-
-These two components are deliberately **not** in the main barrel — importing
-them through their subpath keeps the heavy peer out of consumers who don't use
-them.
+### Optional (in main barrel — tree-shake-friendly)
+
+`Form` lives in the main barrel because `react-hook-form` declares
+`"sideEffects": false`, so consumer bundlers reliably eliminate the import when
+`Form` is unused. Install only if you use it. `peerDependenciesMeta.optional`
+is set, so package managers won't warn if you skip it.
+
+| Component          | Install                                                  |
+| ------------------ | -------------------------------------------------------- |
+| `Form` + resolvers | `react-hook-form@^7`, `@hookform/resolvers@^5`, `zod@^4` |
+
+### Bundled (no install required)
+
+`Toaster` (sonner-based toast notifications) is bundled directly into
+`@saasflare/ui` — no separate `sonner` install needed. Sonner injects ~6 KB
+of toast CSS into the document at module load, which adds ~13 KB gzip to the
+main barrel for all consumers, including those who don't render `<Toaster />`.
+We accepted this trade-off because Toaster usage is >80 % across the Saasflare
+codebase and consumers; the extra-import friction was worse than the byte cost.
+
+### Subpath imports (heavy, low-frequency, or non-tree-shakeable peers)
+
+These components are **not in the main barrel** — import them via their
+subpath. This keeps the peer (and its side-effects, e.g. CSS injection) out of
+consumers who don't use the component.
+
+| Subpath                    | Install                                  | Notes                                    |
+| -------------------------- | ---------------------------------------- | ---------------------------------------- |
+| `@saasflare/ui/chart`      | `recharts@^3`                            | ~95 KB gzip peer                         |
+| `@saasflare/ui/carousel`   | `embla-carousel-react@^8`                | ~25 KB peer                              |
+| `@saasflare/ui/calendar`   | `react-day-picker@^9`, `date-fns@^4`     | ~30 KB peer combined                     |
+| `@saasflare/ui/drawer`     | `vaul@^1`                                | Mobile drawer / bottom sheet             |
+| `@saasflare/ui/command`    | (no extra install — `cmdk` bundled)       | Full Command palette / cmdk-based modal  |
+| `@saasflare/ui/input-otp`  | `input-otp@^1`                           | OTP / 2FA input                          |
+| `@saasflare/ui/resizable`  | `react-resizable-panels@^4`              | Split-view panels                        |
 
 ---
 
@@ -152,11 +163,16 @@ export function Example() {
 }
 ```
 
-For chart/carousel:
+Components with heavy or low-frequency peers ship as subpaths:
 
 ```tsx
 import { ChartContainer, ChartTooltip } from "@saasflare/ui/chart";
 import { Carousel, CarouselContent, CarouselItem } from "@saasflare/ui/carousel";
+import { Calendar } from "@saasflare/ui/calendar";
+import { Drawer, DrawerContent, DrawerTrigger } from "@saasflare/ui/drawer";
+import { Command, CommandInput, CommandList } from "@saasflare/ui/command";
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@saasflare/ui/input-otp";
+import { ResizablePanel, ResizablePanelGroup } from "@saasflare/ui/resizable";
 ```
 
 ---
@@ -215,9 +231,14 @@ the design system pick them up automatically.
 
 | Path                              | What it is                                                          |
 | --------------------------------- | ------------------------------------------------------------------- |
-| `@saasflare/ui`                   | Core: components, hooks, providers, utilities                       |
+| `@saasflare/ui`                   | Core: components, hooks, providers, utilities (incl. Form, Toaster) |
+| `@saasflare/ui/calendar`          | Calendar (requires `react-day-picker`, `date-fns`)                  |
+| `@saasflare/ui/carousel`          | Carousel (requires `embla-carousel-react`)                          |
 | `@saasflare/ui/chart`             | Chart primitives (requires `recharts`)                              |
-| `@saasflare/ui/carousel`          | Carousel primitives (requires `embla-carousel-react`)               |
+| `@saasflare/ui/command`           | Command palette / cmdk modal                                        |
+| `@saasflare/ui/drawer`            | Mobile drawer (requires `vaul`)                                     |
+| `@saasflare/ui/input-otp`         | OTP input (requires `input-otp`)                                    |
+| `@saasflare/ui/resizable`         | Resizable panels (requires `react-resizable-panels`)                |
 | `@saasflare/ui/styles`            | Full CSS bundle (alias for `globals.css`)                           |
 | `@saasflare/ui/globals.css`       | Same as above, explicit                                             |
 | `@saasflare/ui/theme.css`         | Token root only (advanced use)                                      |
@@ -239,9 +260,9 @@ the design system pick them up automatically.
   `Density`, …)
 - **Composed widgets:** `ScrollToTopButton`, `ThemeModeToggle`,
   `TopLoadingBar`, `UserAvatar`
-- **All core UI primitives** from `components/ui` (Chart and Carousel are
-  *not* here — see Subpath imports above) — full list and live examples in
-  the [catalog](https://ui.saasflare.io).
+- **All core UI primitives** from `components/ui` (Calendar, Carousel, Chart,
+  Command, Drawer, InputOTP, and Resizable are *not* here — see Subpath imports
+  above) — full list and live examples in the [catalog](https://ui.saasflare.io).
 
 ---
 

package/dist/{button-B2DR7obe.d.mts → button-DUQJ0X7e.d.mts}

@@ -181,29 +181,6 @@ type Surface = StyleVariant;
  */
 type RadiusProp = Radius;
 
-/**
- * @fileoverview Base props and resolver hook for Saasflare components.
- * @module packages/ui/providers/use-saasflare-props
- * @package ui
- *
- * Every Saasflare component MUST:
- *   1. Extend SaasflareComponentProps in its props interface
- *   2. Call useSaasflareProps(props) to resolve effective values
- *
- * This ensures consistent precedence:
- *   component prop > provider context > hardcoded defaults
- *
- * @example
- * interface CardProps extends SaasflareComponentProps {
- *   title: string
- * }
- *
- * function Card({ title, ...sfProps }: CardProps) {
- *   const { surface, radius, animated } = useSaasflareProps(sfProps)
- *   // surface/radius are guaranteed to be resolved, never undefined
- * }
- */
-
 /** Props that every Saasflare component accepts for theme integration. */
 interface SaasflareComponentProps {
     /** Surface style override. Omit to inherit from provider. */

package/dist/{button-B2DR7obe.d.ts → button-DUQJ0X7e.d.ts}

@@ -181,29 +181,6 @@ type Surface = StyleVariant;
  */
 type RadiusProp = Radius;
 
-/**
- * @fileoverview Base props and resolver hook for Saasflare components.
- * @module packages/ui/providers/use-saasflare-props
- * @package ui
- *
- * Every Saasflare component MUST:
- *   1. Extend SaasflareComponentProps in its props interface
- *   2. Call useSaasflareProps(props) to resolve effective values
- *
- * This ensures consistent precedence:
- *   component prop > provider context > hardcoded defaults
- *
- * @example
- * interface CardProps extends SaasflareComponentProps {
- *   title: string
- * }
- *
- * function Card({ title, ...sfProps }: CardProps) {
- *   const { surface, radius, animated } = useSaasflareProps(sfProps)
- *   // surface/radius are guaranteed to be resolved, never undefined
- * }
- */
-
 /** Props that every Saasflare component accepts for theme integration. */
 interface SaasflareComponentProps {
     /** Surface style override. Omit to inherit from provider. */

package/dist/chunk-7UGPCRZ6.mjs

@@ -0,0 +1,130 @@
+"use client";
+import { useReducedMotion, noMotion, springBouncy } from './chunk-W53NTFPB.mjs';
+import { cn } from './chunk-S26666D6.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({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: 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
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  ...props
+}) {
+  const reduced = useReducedMotion();
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        asChild: true,
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          m.div,
+          {
+            initial: reduced ? { 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 ? noMotion : springBouncy,
+            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",
+              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("span", { className: "sr-only", children: "Close" })
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/chunk-CWW36RYE.js

@@ -0,0 +1,59 @@
+"use client";
+'use strict';
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/hooks/use-reduced-motion.ts
+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 React__namespace.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// src/components/ui/motion-config.ts
+var spring = { type: "spring", stiffness: 400, damping: 25 };
+var springBouncy = { type: "spring", stiffness: 300, damping: 15 };
+var springGentle = { type: "spring", stiffness: 200, damping: 20 };
+var springStiff = { type: "spring", stiffness: 500, damping: 30 };
+var noMotion = { duration: 0 };
+var fadeIn = { initial: { opacity: 0 }, animate: { opacity: 1 } };
+var scaleIn = { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 } };
+var slideUp = { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 } };
+var slideDown = { initial: { opacity: 0, y: -8 }, animate: { opacity: 1, y: 0 } };
+
+exports.fadeIn = fadeIn;
+exports.noMotion = noMotion;
+exports.scaleIn = scaleIn;
+exports.slideDown = slideDown;
+exports.slideUp = slideUp;
+exports.spring = spring;
+exports.springBouncy = springBouncy;
+exports.springGentle = springGentle;
+exports.springStiff = springStiff;
+exports.useReducedMotion = useReducedMotion;

package/dist/chunk-JOVJRQO3.js

@@ -1,4 +1,3 @@
-"use client";
 'use strict';
 
 var clsx = require('clsx');

package/dist/{chunk-O3CFRMDK.js → chunk-OYH6LQWR.js}

@@ -1,12 +1,13 @@
 "use client";
 'use strict';
 
+var chunkCWW36RYE_js = require('./chunk-CWW36RYE.js');
 var chunkJOVJRQO3_js = require('./chunk-JOVJRQO3.js');
-var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
+var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var nextThemes = require('next-themes');
-var react = require('motion/react');
+var react$1 = require('motion/react');
 var lucideReact = require('lucide-react');
 var Slot = require('@radix-ui/react-slot');
 
@@ -28,7 +29,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var Slot__namespace = /*#__PURE__*/_interopNamespace(Slot);
 
 // src/lib/color.ts
@@ -75,34 +75,12 @@ function srgbToLinear(c) {
 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 React__namespace.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-}
-
-// src/components/ui/motion-config.ts
-var spring = { type: "spring", stiffness: 400, damping: 25 };
-var springBouncy = { type: "spring", stiffness: 300, damping: 15 };
-var springGentle = { type: "spring", stiffness: 200, damping: 20 };
-var springStiff = { type: "spring", stiffness: 500, damping: 30 };
-var noMotion = { duration: 0 };
-var fadeIn = { initial: { opacity: 0 }, animate: { opacity: 1 } };
-var scaleIn = { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 } };
-var slideUp = { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 } };
-var slideDown = { initial: { opacity: 0, y: -8 }, animate: { opacity: 1, y: 0 } };
-var AnimationContext = React.createContext(
+var AnimationContext = react.createContext(
   void 0
 );
 function useAnimation() {
-  const context = React.useContext(AnimationContext);
-  const prefersReduced = useReducedMotion();
+  const context = react.useContext(AnimationContext);
+  const prefersReduced = chunkCWW36RYE_js.useReducedMotion();
   if (context) return context;
   return { animated: !prefersReduced };
 }
@@ -110,9 +88,9 @@ function SmoothScrollProvider({
   children,
   enabled = true
 }) {
-  const reduced = useReducedMotion();
+  const reduced = chunkCWW36RYE_js.useReducedMotion();
   const shouldSmooth = enabled && !reduced;
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (!shouldSmooth) return;
     const html = document.documentElement;
     const previous = html.style.scrollBehavior;
@@ -161,18 +139,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 = react.useRef(initialValue);
+  const optionsRef = react.useRef(options);
   optionsRef.current = options;
-  const serialize = React.useCallback(
+  const serialize = react.useCallback(
     (value) => (optionsRef.current?.serializer ?? JSON.stringify)(value),
     []
   );
-  const deserialize = React.useCallback(
+  const deserialize = react.useCallback(
     (raw) => (optionsRef.current?.deserializer ?? JSON.parse)(raw),
     []
   );
-  const handleError = React.useCallback(
+  const handleError = react.useCallback(
     (error, operation) => {
       if (optionsRef.current?.onError) {
         optionsRef.current.onError(error, operation);
@@ -182,7 +160,7 @@ function useLocalStorage(key, initialValue, options) {
     },
     [key]
   );
-  const readValue = React.useCallback(() => {
+  const readValue = react.useCallback(() => {
     if (typeof window === "undefined") return initialRef.current;
     try {
       const item = window.localStorage.getItem(key);
@@ -192,8 +170,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] = react.useState(() => readValue());
+  const setValue = react.useCallback(
     (value) => {
       try {
         setStoredValue((prev) => {
@@ -210,7 +188,7 @@ function useLocalStorage(key, initialValue, options) {
     },
     [key, serialize, handleError]
   );
-  const removeValue = React.useCallback(() => {
+  const removeValue = react.useCallback(() => {
     try {
       if (typeof window !== "undefined") {
         window.localStorage.removeItem(key);
@@ -221,7 +199,7 @@ function useLocalStorage(key, initialValue, options) {
       handleError(error, "remove");
     }
   }, [key, handleError]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     const onStorage = (e) => {
       if (e.key === key) setStoredValue(readValue());
     };
@@ -234,7 +212,7 @@ function useLocalStorage(key, initialValue, options) {
       window.removeEventListener(syncEvent, onSync);
     };
   }, [key, readValue]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     setStoredValue(readValue());
   }, [readValue]);
   return [storedValue, setValue, removeValue];
@@ -250,9 +228,9 @@ var DEFAULT_CONTEXT = {
   setRadius: () => {
   }
 };
-var SaasflareThemeContext = React.createContext(DEFAULT_CONTEXT);
+var SaasflareThemeContext = react.createContext(DEFAULT_CONTEXT);
 function useSaasflareTheme() {
-  return React.useContext(SaasflareThemeContext);
+  return react.useContext(SaasflareThemeContext);
 }
 function applyColorAxis(root, prefix, value, injected) {
   if (isHex(value)) {
@@ -277,7 +255,7 @@ function applyColorAxis(root, prefix, value, injected) {
 }
 function CustomPaletteInjector({ palette }) {
   const { resolvedTheme } = nextThemes.useTheme();
-  React.useEffect(() => {
+  react.useEffect(() => {
     const root = document.documentElement;
     const injected = [];
     applyColorAxis(root, "primary", palette.primary, injected);
@@ -334,21 +312,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 = react.useCallback(
     (id) => setPersisted((prev) => ({ ...prev, palette: id })),
     [setPersisted]
   );
-  const setSurface = React.useCallback(
+  const setSurface = react.useCallback(
     (style) => setPersisted((prev) => ({ ...prev, surface: style })),
     [setPersisted]
   );
-  const setRadius = React.useCallback(
+  const setRadius = react.useCallback(
     (r) => setPersisted((prev) => ({ ...prev, radius: r })),
     [setPersisted]
   );
-  const prefersReduced = useReducedMotion();
+  const prefersReduced = chunkCWW36RYE_js.useReducedMotion();
   const effectiveAnimated = animated && !prefersReduced;
-  React.useEffect(() => {
+  react.useEffect(() => {
     const root = document.documentElement;
     if (currentPalette) {
       root.setAttribute(SAASFLARE_DATA_ATTR.palette, currentPalette);
@@ -359,7 +337,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.LazyMotion, { features: react.domAnimation, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.LazyMotion, { features: react$1.domAnimation, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
     nextThemes.ThemeProvider,
     {
       attribute: "class",
@@ -446,7 +424,7 @@ function SaasflareShell({
 }
 function useSaasflareProps(props = {}) {
   const ctx = useSaasflareTheme();
-  const anim = React.useContext(AnimationContext);
+  const anim = react.useContext(AnimationContext);
   return {
     surface: props.surface ?? ctx.surface,
     radius: props.radius ?? ctx.radius,
@@ -454,7 +432,7 @@ function useSaasflareProps(props = {}) {
     palette: ctx.palette
   };
 }
-var MotionSlot = react.m.create(Slot__namespace.Root);
+var MotionSlot = react$1.m.create(Slot__namespace.Root);
 var LEGACY_VARIANT_MAP = {
   default: { variant: "solid", intent: "primary" },
   destructive: { variant: "solid", intent: "danger" },
@@ -506,7 +484,7 @@ function Button({
   ...props
 }) {
   const sfProps = useSaasflareProps({ surface, animated });
-  const reduced = useReducedMotion();
+  const reduced = chunkCWW36RYE_js.useReducedMotion();
   const effectiveVariant = variantProp ?? (sfProps.surface === "glass" ? "glass" : "solid");
   let resolvedVariant = effectiveVariant;
   let resolvedIntent = intentProp;
@@ -518,7 +496,7 @@ function Button({
     }
   }
   const motionDisabled = !sfProps.animated || reduced || disabled || loading;
-  const transition = !sfProps.animated || reduced ? noMotion : spring;
+  const transition = !sfProps.animated || reduced ? chunkCWW36RYE_js.noMotion : chunkCWW36RYE_js.spring;
   if (asChild) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       MotionSlot,
@@ -542,7 +520,7 @@ function Button({
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    react.m.button,
+    react$1.m.button,
     {
       "data-slot": "button",
       "data-variant": resolvedVariant,
@@ -575,16 +553,6 @@ exports.SaasflareScript = SaasflareScript;
 exports.SaasflareShell = SaasflareShell;
 exports.SmoothScrollProvider = SmoothScrollProvider;
 exports.buttonVariants = buttonVariants;
-exports.fadeIn = fadeIn;
-exports.noMotion = noMotion;
-exports.scaleIn = scaleIn;
-exports.slideDown = slideDown;
-exports.slideUp = slideUp;
-exports.spring = spring;
-exports.springBouncy = springBouncy;
-exports.springGentle = springGentle;
-exports.springStiff = springStiff;
 exports.useAnimation = useAnimation;
-exports.useReducedMotion = useReducedMotion;
 exports.useSaasflareProps = useSaasflareProps;
 exports.useSaasflareTheme = useSaasflareTheme;

package/dist/{chunk-QEKYM3BT.mjs → chunk-QWLQV6FS.mjs}

@@ -1,8 +1,8 @@
 "use client";
+import { useReducedMotion, noMotion, spring } from './chunk-W53NTFPB.mjs';
 import { cn } from './chunk-S26666D6.mjs';
-import * as React from 'react';
-import { createContext, useContext, useEffect, useCallback, useRef, useState } from 'react';
 import { cva } from 'class-variance-authority';
+import { createContext, useContext, useEffect, useCallback, useRef, useState } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { ThemeProvider, useTheme } from 'next-themes';
 import { m, LazyMotion, domAnimation } from 'motion/react';
@@ -53,28 +53,6 @@ function srgbToLinear(c) {
 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 React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-}
-
-// src/components/ui/motion-config.ts
-var spring = { type: "spring", stiffness: 400, damping: 25 };
-var springBouncy = { type: "spring", stiffness: 300, damping: 15 };
-var springGentle = { type: "spring", stiffness: 200, damping: 20 };
-var springStiff = { type: "spring", stiffness: 500, damping: 30 };
-var noMotion = { duration: 0 };
-var fadeIn = { initial: { opacity: 0 }, animate: { opacity: 1 } };
-var scaleIn = { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 } };
-var slideUp = { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 } };
-var slideDown = { initial: { opacity: 0, y: -8 }, animate: { opacity: 1, y: 0 } };
 var AnimationContext = createContext(
   void 0
 );
@@ -547,4 +525,4 @@ function Button({
   );
 }
 
-export { Button, SaasflareProvider, SaasflareScript, SaasflareShell, SmoothScrollProvider, buttonVariants, fadeIn, noMotion, scaleIn, slideDown, slideUp, spring, springBouncy, springGentle, springStiff, useAnimation, useReducedMotion, useSaasflareProps, useSaasflareTheme };
+export { Button, SaasflareProvider, SaasflareScript, SaasflareShell, SmoothScrollProvider, buttonVariants, useAnimation, useSaasflareProps, useSaasflareTheme };