@saasflare/ui 1.0.2 → 1.1.0

package/dist/{chunk-7UB3R5JU.js → chunk-O3CFRMDK.js}

@@ -6,7 +6,7 @@ var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var nextThemes = require('next-themes');
-var framerMotion = require('framer-motion');
+var react = require('motion/react');
 var lucideReact = require('lucide-react');
 var Slot = require('@radix-ui/react-slot');
 
@@ -359,7 +359,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(framerMotion.LazyMotion, { features: framerMotion.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",
@@ -454,7 +454,7 @@ function useSaasflareProps(props = {}) {
     palette: ctx.palette
   };
 }
-var MotionSlot = framerMotion.m.create(Slot__namespace.Root);
+var MotionSlot = react.m.create(Slot__namespace.Root);
 var LEGACY_VARIANT_MAP = {
   default: { variant: "solid", intent: "primary" },
   destructive: { variant: "solid", intent: "danger" },
@@ -542,7 +542,7 @@ function Button({
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    framerMotion.m.button,
+    react.m.button,
     {
       "data-slot": "button",
       "data-variant": resolvedVariant,

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

@@ -5,7 +5,7 @@ import { createContext, useContext, useEffect, useCallback, useRef, useState } f
 import { cva } from 'class-variance-authority';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { ThemeProvider, useTheme } from 'next-themes';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'motion/react';
 import { Loader2Icon } from 'lucide-react';
 import * as Slot from '@radix-ui/react-slot';
 

package/dist/entries/carousel.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk7UB3R5JU_js = require('../chunk-7UB3R5JU.js');
+var chunkO3CFRMDK_js = require('../chunk-O3CFRMDK.js');
 var chunkJOVJRQO3_js = require('../chunk-JOVJRQO3.js');
 var React = require('react');
 var useEmblaCarousel = require('embla-carousel-react');
@@ -167,7 +167,7 @@ function CarouselPrevious({
 }) {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunk7UB3R5JU_js.Button,
+    chunkO3CFRMDK_js.Button,
     {
       "data-slot": "carousel-previous",
       variant,
@@ -195,7 +195,7 @@ function CarouselNext({
 }) {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunk7UB3R5JU_js.Button,
+    chunkO3CFRMDK_js.Button,
     {
       "data-slot": "carousel-next",
       variant,

package/dist/entries/carousel.mjs

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-P2JF7JDY.mjs';
+import { Button } from '../chunk-QEKYM3BT.mjs';
 import { cn } from '../chunk-S26666D6.mjs';
 import * as React from 'react';
 import useEmblaCarousel from 'embla-carousel-react';

package/dist/index.js

@@ -1,10 +1,10 @@
 "use client";
 'use strict';
 
-var chunk7UB3R5JU_js = require('./chunk-7UB3R5JU.js');
+var chunkO3CFRMDK_js = require('./chunk-O3CFRMDK.js');
 var chunkJOVJRQO3_js = require('./chunk-JOVJRQO3.js');
 var React9 = require('react');
-var framerMotion = require('framer-motion');
+var react = require('motion/react');
 var jsxRuntime = require('react/jsx-runtime');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var lucideReact = require('lucide-react');
@@ -229,13 +229,13 @@ function usePagination(options) {
   return { activePage, range, setPage, next, previous, first, last };
 }
 function Card({ className, ...props }) {
-  const reduced = chunk7UB3R5JU_js.useReducedMotion();
+  const reduced = chunkO3CFRMDK_js.useReducedMotion();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    framerMotion.m.div,
+    react.m.div,
     {
       "data-slot": "card",
       whileHover: reduced ? void 0 : { y: -2, boxShadow: "0 8px 30px rgba(0,0,0,0.08)" },
-      transition: reduced ? chunk7UB3R5JU_js.noMotion : chunk7UB3R5JU_js.springGentle,
+      transition: reduced ? chunkO3CFRMDK_js.noMotion : chunkO3CFRMDK_js.springGentle,
       className: chunkJOVJRQO3_js.cn(
         "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm transition-[border-color] duration-300 hover:border-primary/20",
         className
@@ -351,7 +351,7 @@ function DialogContent({
   children,
   ...props
 }) {
-  const reduced = chunk7UB3R5JU_js.useReducedMotion();
+  const reduced = chunkO3CFRMDK_js.useReducedMotion();
   return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -361,12 +361,12 @@ function DialogContent({
         asChild: true,
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
-          framerMotion.m.div,
+          react.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 ? chunk7UB3R5JU_js.noMotion : chunk7UB3R5JU_js.springBouncy,
+            transition: reduced ? chunkO3CFRMDK_js.noMotion : chunkO3CFRMDK_js.springBouncy,
             className: chunkJOVJRQO3_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
@@ -466,7 +466,7 @@ function AlertDialogContent({
   children,
   ...props
 }) {
-  const reduced = chunk7UB3R5JU_js.useReducedMotion();
+  const reduced = chunkO3CFRMDK_js.useReducedMotion();
   return /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -476,12 +476,12 @@ function AlertDialogContent({
         asChild: true,
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          framerMotion.m.div,
+          react.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 ? chunk7UB3R5JU_js.noMotion : chunk7UB3R5JU_js.springBouncy,
+            transition: reduced ? chunkO3CFRMDK_js.noMotion : chunkO3CFRMDK_js.springBouncy,
             className: chunkJOVJRQO3_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
@@ -547,7 +547,7 @@ function AlertDialogAction({
     AlertDialogPrimitive__namespace.Action,
     {
       "data-intent": "primary",
-      className: chunkJOVJRQO3_js.cn(chunk7UB3R5JU_js.buttonVariants({ variant: "solid" }), className),
+      className: chunkJOVJRQO3_js.cn(chunkO3CFRMDK_js.buttonVariants({ variant: "solid" }), className),
       ...props
     }
   );
@@ -560,7 +560,7 @@ function AlertDialogCancel({
     AlertDialogPrimitive__namespace.Cancel,
     {
       "data-intent": "neutral",
-      className: chunkJOVJRQO3_js.cn(chunk7UB3R5JU_js.buttonVariants({ variant: "outline" }), className),
+      className: chunkJOVJRQO3_js.cn(chunkO3CFRMDK_js.buttonVariants({ variant: "outline" }), className),
       ...props
     }
   );
@@ -588,7 +588,7 @@ function AccordionTrigger({
   children,
   ...props
 }) {
-  const reduced = chunk7UB3R5JU_js.useReducedMotion();
+  const reduced = chunkO3CFRMDK_js.useReducedMotion();
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
     AccordionPrimitive__namespace.Trigger,
     {
@@ -601,11 +601,11 @@ function AccordionTrigger({
       children: [
         children,
         /* @__PURE__ */ jsxRuntime.jsx(
-          framerMotion.m.div,
+          react.m.div,
           {
             className: "pointer-events-none shrink-0 translate-y-0.5 text-muted-foreground",
             animate: { rotate: 0 },
-            transition: reduced ? { duration: 0 } : chunk7UB3R5JU_js.springBouncy,
+            transition: reduced ? { duration: 0 } : chunkO3CFRMDK_js.springBouncy,
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "size-4" })
           }
         )
@@ -618,7 +618,7 @@ function AccordionContent({
   children,
   ...props
 }) {
-  const reduced = chunk7UB3R5JU_js.useReducedMotion();
+  const reduced = chunkO3CFRMDK_js.useReducedMotion();
   return /* @__PURE__ */ jsxRuntime.jsx(
     AccordionPrimitive__namespace.Content,
     {
@@ -626,7 +626,7 @@ function AccordionContent({
       className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        framerMotion.m.div,
+        react.m.div,
         {
           initial: reduced ? false : { opacity: 0 },
           animate: { opacity: 1 },
@@ -678,7 +678,7 @@ function TabsList({
   ...props
 }) {
   const listRef = React9__namespace.useRef(null);
-  const reduced = chunk7UB3R5JU_js.useReducedMotion();
+  const reduced = chunkO3CFRMDK_js.useReducedMotion();
   const [pos, setPos] = React9__namespace.useState(null);
   React9__namespace.useLayoutEffect(() => {
     const list = listRef.current;
@@ -727,7 +727,7 @@ function TabsList({
       ...props,
       children: [
         pos !== null && /* @__PURE__ */ jsxRuntime.jsx(
-          framerMotion.m.div,
+          react.m.div,
           {
             "data-slot": "tabs-indicator",
             "aria-hidden": true,
@@ -738,7 +738,7 @@ function TabsList({
               width: pos.width,
               height: pos.height
             },
-            transition: reduced ? chunk7UB3R5JU_js.noMotion : chunk7UB3R5JU_js.spring,
+            transition: reduced ? chunkO3CFRMDK_js.noMotion : chunkO3CFRMDK_js.spring,
             className: "pointer-events-none absolute top-0 left-0 rounded-md bg-background shadow-sm dark:border dark:border-input dark:bg-input/30",
             style: { zIndex: 0 }
           }
@@ -782,7 +782,7 @@ function TabsContent({
 }
 function Input({ className, type, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    framerMotion.m.input,
+    react.m.input,
     {
       type,
       "data-slot": "input",
@@ -800,7 +800,7 @@ function Input({ className, type, ...props }) {
 }
 function Textarea({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    framerMotion.m.textarea,
+    react.m.textarea,
     {
       "data-slot": "textarea",
       whileFocus: { boxShadow: "0 0 0 3px hsl(var(--ring) / 0.3)" },
@@ -836,12 +836,12 @@ function Checkbox({
           className: "grid place-content-center text-current",
           asChild: true,
           children: /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.m.span,
+            react.m.span,
             {
               initial: { scale: 0, opacity: 0 },
               animate: { scale: 1, opacity: 1 },
               exit: { scale: 0, opacity: 0 },
-              transition: chunk7UB3R5JU_js.springBouncy,
+              transition: chunkO3CFRMDK_js.springBouncy,
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "size-3.5" })
             }
           )
@@ -872,11 +872,11 @@ function Switch({
           "data-slot": "switch-thumb",
           asChild: true,
           children: /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.m.span,
+            react.m.span,
             {
               className: "pointer-events-none block rounded-full bg-background ring-0 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
               layout: true,
-              transition: chunk7UB3R5JU_js.springBouncy
+              transition: chunkO3CFRMDK_js.springBouncy
             }
           )
         }
@@ -889,7 +889,7 @@ function Progress({
   value,
   ...props
 }) {
-  const reduced = chunk7UB3R5JU_js.useReducedMotion();
+  const reduced = chunkO3CFRMDK_js.useReducedMotion();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ProgressPrimitive__namespace.Root,
     {
@@ -900,12 +900,12 @@ function Progress({
       ),
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(ProgressPrimitive__namespace.Indicator, { "data-slot": "progress-indicator", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        framerMotion.m.div,
+        react.m.div,
         {
           className: "h-full bg-primary",
           initial: { width: "0%" },
           animate: { width: `${value ?? 0}%` },
-          transition: reduced ? chunk7UB3R5JU_js.noMotion : chunk7UB3R5JU_js.spring
+          transition: reduced ? chunkO3CFRMDK_js.noMotion : chunkO3CFRMDK_js.spring
         }
       ) })
     }
@@ -944,7 +944,7 @@ function Badge({
   asChild = false,
   ...props
 }) {
-  const reduced = chunk7UB3R5JU_js.useReducedMotion();
+  const reduced = chunkO3CFRMDK_js.useReducedMotion();
   let resolvedVariant = variantProp;
   let resolvedIntent = intentProp;
   const legacy = LEGACY_VARIANT_MAP[variantProp];
@@ -967,13 +967,13 @@ function Badge({
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    framerMotion.m.span,
+    react.m.span,
     {
       "data-slot": "badge",
       "data-variant": resolvedVariant,
       "data-intent": resolvedIntent,
       whileHover: reduced ? void 0 : { scale: 1.05 },
-      transition: reduced ? chunk7UB3R5JU_js.noMotion : chunk7UB3R5JU_js.spring,
+      transition: reduced ? chunkO3CFRMDK_js.noMotion : chunkO3CFRMDK_js.spring,
       className: chunkJOVJRQO3_js.cn(badgeVariants({ variant: resolvedVariant, size }), className),
       ...props
     }
@@ -1016,12 +1016,12 @@ function TooltipContent({
       asChild: true,
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        framerMotion.m.div,
+        react.m.div,
         {
           initial: { opacity: 0, scale: 0.92, y: 2 },
           animate: { opacity: 1, scale: 1, y: 0 },
           exit: { opacity: 0, scale: 0.92 },
-          transition: chunk7UB3R5JU_js.springBouncy,
+          transition: chunkO3CFRMDK_js.springBouncy,
           className: chunkJOVJRQO3_js.cn(
             "z-50 w-fit overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md",
             className
@@ -1062,12 +1062,12 @@ function PopoverContent({
       asChild: true,
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        framerMotion.m.div,
+        react.m.div,
         {
           initial: { opacity: 0, scale: 0.95, y: -4 },
           animate: { opacity: 1, scale: 1, y: 0 },
           exit: { opacity: 0, scale: 0.95, y: -4 },
-          transition: chunk7UB3R5JU_js.springBouncy,
+          transition: chunkO3CFRMDK_js.springBouncy,
           className: chunkJOVJRQO3_js.cn(
             "z-50 w-72 origin-[var(--radix-popover-content-transform-origin)] rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden",
             className
@@ -1102,12 +1102,12 @@ function HoverCardContent({
       asChild: true,
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        framerMotion.m.div,
+        react.m.div,
         {
           initial: { opacity: 0, scale: 0.95, y: 4 },
           animate: { opacity: 1, scale: 1, y: 0 },
           exit: { opacity: 0, scale: 0.95 },
-          transition: chunk7UB3R5JU_js.springBouncy,
+          transition: chunkO3CFRMDK_js.springBouncy,
           className: chunkJOVJRQO3_js.cn(
             "z-50 w-64 origin-[var(--radix-hover-card-content-transform-origin)] rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden",
             className
@@ -1170,11 +1170,11 @@ function SelectContent({
       asChild: true,
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
-        framerMotion.m.div,
+        react.m.div,
         {
           initial: { opacity: 0, scale: 0.96, y: -4 },
           animate: { opacity: 1, scale: 1, y: 0 },
-          transition: chunk7UB3R5JU_js.springBouncy,
+          transition: chunkO3CFRMDK_js.springBouncy,
           className: chunkJOVJRQO3_js.cn(
             "relative z-50 max-h-[min(var(--radix-select-content-available-height),24rem)] min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
             position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]",
@@ -1305,12 +1305,12 @@ function DropdownMenuContent({
       asChild: true,
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        framerMotion.m.div,
+        react.m.div,
         {
           initial: { opacity: 0, scale: 0.95, y: -4 },
           animate: { opacity: 1, scale: 1, y: 0 },
           exit: { opacity: 0, scale: 0.95, y: -4 },
-          transition: chunk7UB3R5JU_js.springBouncy,
+          transition: chunkO3CFRMDK_js.springBouncy,
           className: chunkJOVJRQO3_js.cn(
             "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
             className
@@ -1697,12 +1697,12 @@ function Slider({
             "data-slot": "slider-thumb",
             asChild: true,
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              framerMotion.m.span,
+              react.m.span,
               {
                 className: "block size-4 shrink-0 cursor-grab rounded-full border border-primary/50 bg-background shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing",
                 whileHover: { scale: 1.2 },
                 whileTap: { scale: 0.9 },
-                transition: chunk7UB3R5JU_js.springBouncy
+                transition: chunkO3CFRMDK_js.springBouncy
               }
             )
           },
@@ -2605,12 +2605,12 @@ function Calendar({
           defaultClassNames.nav
         ),
         button_previous: chunkJOVJRQO3_js.cn(
-          chunk7UB3R5JU_js.buttonVariants({ variant: buttonVariant }),
+          chunkO3CFRMDK_js.buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
         button_next: chunkJOVJRQO3_js.cn(
-          chunk7UB3R5JU_js.buttonVariants({ variant: buttonVariant }),
+          chunkO3CFRMDK_js.buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
@@ -2725,7 +2725,7 @@ function CalendarDayButton({
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk7UB3R5JU_js.Button,
+    chunkO3CFRMDK_js.Button,
     {
       ref,
       variant: "ghost",
@@ -4055,7 +4055,7 @@ function InputGroupButton({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk7UB3R5JU_js.Button,
+    chunkO3CFRMDK_js.Button,
     {
       type,
       "data-size": size,
@@ -4453,7 +4453,7 @@ function PaginationLink({
       "data-slot": "pagination-link",
       "data-active": isActive,
       className: chunkJOVJRQO3_js.cn(
-        chunk7UB3R5JU_js.buttonVariants({
+        chunkO3CFRMDK_js.buttonVariants({
           variant: isActive ? "outline" : "ghost",
           size
         }),
@@ -4661,9 +4661,9 @@ var AnimatedTooltip = ({
 }) => {
   const [hoveredIndex, setHoveredIndex] = React9.useState(null);
   const springConfig = { stiffness: 100, damping: 5 };
-  const x = framerMotion.useMotionValue(0);
-  const rotate = framerMotion.useSpring(framerMotion.useTransform(x, [-100, 100], [-45, 45]), springConfig);
-  const translateX = framerMotion.useSpring(framerMotion.useTransform(x, [-100, 100], [-50, 50]), springConfig);
+  const x = react.useMotionValue(0);
+  const rotate = react.useSpring(react.useTransform(x, [-100, 100], [-45, 45]), springConfig);
+  const translateX = react.useSpring(react.useTransform(x, [-100, 100], [-50, 50]), springConfig);
   const handleMouseMove = (event) => {
     const halfWidth = event.target.offsetWidth / 2;
     x.set(event.nativeEvent.offsetX - halfWidth);
@@ -4675,8 +4675,8 @@ var AnimatedTooltip = ({
       onMouseEnter: () => setHoveredIndex(item.id),
       onMouseLeave: () => setHoveredIndex(null),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: hoveredIndex === item.id && /* @__PURE__ */ jsxRuntime.jsxs(
-          framerMotion.m.div,
+        /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: hoveredIndex === item.id && /* @__PURE__ */ jsxRuntime.jsxs(
+          react.m.div,
           {
             initial: { opacity: 0, y: 20, scale: 0.6 },
             animate: {
@@ -4873,7 +4873,7 @@ function SidebarTrigger({
 }) {
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunk7UB3R5JU_js.Button,
+    chunkO3CFRMDK_js.Button,
     {
       "data-sidebar": "trigger",
       "data-slot": "sidebar-trigger",
@@ -5704,7 +5704,7 @@ function ScrollToTopButton({
   className,
   ...sfProps
 }) {
-  const { animated, surface } = chunk7UB3R5JU_js.useSaasflareProps(sfProps);
+  const { animated, surface } = chunkO3CFRMDK_js.useSaasflareProps(sfProps);
   const [isVisible, setIsVisible] = React9.useState(false);
   const finalId = React9.useMemo(() => scrollContainerId ?? null, [scrollContainerId]);
   const getContainer = React9.useCallback(() => {
@@ -5737,8 +5737,8 @@ function ScrollToTopButton({
   };
   const surfaceClass = surface === "glass" ? "bg-primary/85 text-primary-foreground backdrop-blur-md border border-[oklch(1_0_0_/_0.15)] shadow-[var(--surface-shadow)]" : "bg-primary text-primary-foreground shadow-lg";
   const duration = animated ? 0.3 : 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isVisible && /* @__PURE__ */ jsxRuntime.jsx(
-    framerMotion.m.button,
+  return /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: isVisible && /* @__PURE__ */ jsxRuntime.jsx(
+    react.m.button,
     {
       onClick: scrollToTop,
       "aria-label": "Scroll to top",
@@ -5772,7 +5772,7 @@ function ThemeModeToggle({
     setTheme(theme === "dark" ? "light" : "dark");
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunk7UB3R5JU_js.Button,
+    chunkO3CFRMDK_js.Button,
     {
       variant: "ghost",
       size: showText ? "sm" : "icon",
@@ -5895,7 +5895,7 @@ function TopLoadingBar({
   finishDelayMs,
   ...sfProps
 }) {
-  const { animated } = chunk7UB3R5JU_js.useSaasflareProps(sfProps);
+  const { animated } = chunkO3CFRMDK_js.useSaasflareProps(sfProps);
   if (!animated) {
     return /* @__PURE__ */ jsxRuntime.jsx(React9.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
       TopLoadingBarStatic,
@@ -5927,79 +5927,79 @@ function UserAvatar({ src, name, initials, size = "md", className }) {
 
 Object.defineProperty(exports, "Button", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.Button; }
+  get: function () { return chunkO3CFRMDK_js.Button; }
 });
 Object.defineProperty(exports, "SaasflareProvider", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.SaasflareProvider; }
+  get: function () { return chunkO3CFRMDK_js.SaasflareProvider; }
 });
 Object.defineProperty(exports, "SaasflareScript", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.SaasflareScript; }
+  get: function () { return chunkO3CFRMDK_js.SaasflareScript; }
 });
 Object.defineProperty(exports, "SaasflareShell", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.SaasflareShell; }
+  get: function () { return chunkO3CFRMDK_js.SaasflareShell; }
 });
 Object.defineProperty(exports, "SmoothScrollProvider", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.SmoothScrollProvider; }
+  get: function () { return chunkO3CFRMDK_js.SmoothScrollProvider; }
 });
 Object.defineProperty(exports, "buttonVariants", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.buttonVariants; }
+  get: function () { return chunkO3CFRMDK_js.buttonVariants; }
 });
 Object.defineProperty(exports, "fadeIn", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.fadeIn; }
+  get: function () { return chunkO3CFRMDK_js.fadeIn; }
 });
 Object.defineProperty(exports, "noMotion", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.noMotion; }
+  get: function () { return chunkO3CFRMDK_js.noMotion; }
 });
 Object.defineProperty(exports, "scaleIn", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.scaleIn; }
+  get: function () { return chunkO3CFRMDK_js.scaleIn; }
 });
 Object.defineProperty(exports, "slideDown", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.slideDown; }
+  get: function () { return chunkO3CFRMDK_js.slideDown; }
 });
 Object.defineProperty(exports, "slideUp", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.slideUp; }
+  get: function () { return chunkO3CFRMDK_js.slideUp; }
 });
 Object.defineProperty(exports, "spring", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.spring; }
+  get: function () { return chunkO3CFRMDK_js.spring; }
 });
 Object.defineProperty(exports, "springBouncy", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.springBouncy; }
+  get: function () { return chunkO3CFRMDK_js.springBouncy; }
 });
 Object.defineProperty(exports, "springGentle", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.springGentle; }
+  get: function () { return chunkO3CFRMDK_js.springGentle; }
 });
 Object.defineProperty(exports, "springStiff", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.springStiff; }
+  get: function () { return chunkO3CFRMDK_js.springStiff; }
 });
 Object.defineProperty(exports, "useAnimation", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.useAnimation; }
+  get: function () { return chunkO3CFRMDK_js.useAnimation; }
 });
 Object.defineProperty(exports, "useReducedMotion", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.useReducedMotion; }
+  get: function () { return chunkO3CFRMDK_js.useReducedMotion; }
 });
 Object.defineProperty(exports, "useSaasflareProps", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.useSaasflareProps; }
+  get: function () { return chunkO3CFRMDK_js.useSaasflareProps; }
 });
 Object.defineProperty(exports, "useSaasflareTheme", {
   enumerable: true,
-  get: function () { return chunk7UB3R5JU_js.useSaasflareTheme; }
+  get: function () { return chunkO3CFRMDK_js.useSaasflareTheme; }
 });
 Object.defineProperty(exports, "cn", {
   enumerable: true,

package/dist/index.mjs

@@ -1,11 +1,11 @@
 "use client";
-import { useReducedMotion, noMotion, springGentle, springBouncy, buttonVariants, spring, Button, useSaasflareProps } from './chunk-P2JF7JDY.mjs';
-export { Button, SaasflareProvider, SaasflareScript, SaasflareShell, SmoothScrollProvider, buttonVariants, fadeIn, noMotion, scaleIn, slideDown, slideUp, spring, springBouncy, springGentle, springStiff, useAnimation, useReducedMotion, useSaasflareProps, useSaasflareTheme } from './chunk-P2JF7JDY.mjs';
+import { useReducedMotion, noMotion, springGentle, springBouncy, buttonVariants, spring, Button, useSaasflareProps } from './chunk-QEKYM3BT.mjs';
+export { Button, SaasflareProvider, SaasflareScript, SaasflareShell, SmoothScrollProvider, buttonVariants, fadeIn, noMotion, scaleIn, slideDown, slideUp, spring, springBouncy, springGentle, springStiff, useAnimation, useReducedMotion, useSaasflareProps, useSaasflareTheme } from './chunk-QEKYM3BT.mjs';
 import { cn } from './chunk-S26666D6.mjs';
 export { cn } from './chunk-S26666D6.mjs';
 import * as React9 from 'react';
 import { useState, useCallback, useMemo, useRef, useEffect, Suspense } from 'react';
-import { m, useMotionValue, useSpring, useTransform, AnimatePresence } from 'framer-motion';
+import { m, useMotionValue, useSpring, useTransform, AnimatePresence } from 'motion/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { XIcon, ChevronDownIcon, CheckIcon, ChevronUpIcon, CircleIcon, ChevronRightIcon, ChevronLeftIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, ChevronRight, MoreHorizontal, SearchIcon, MinusIcon, MoreHorizontalIcon, GripVerticalIcon, PanelLeftIcon, ArrowUpIcon, Sun, Moon } from 'lucide-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasflare/ui",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "private": false,
   "license": "MIT",
   "description": "Saasflare UI Components Library – Standalone components built on Radix UI + Tailwind CSS",
@@ -83,15 +83,14 @@
     "cmdk": "^1.1.1",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.577.0",
-    "tailwind-merge": "^3.5.0",
-    "tw-animate-css": "^1.4.0"
+    "tailwind-merge": "^3.5.0"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^5.0.0",
     "date-fns": "^4.0.0",
     "embla-carousel-react": "^8.0.0",
-    "framer-motion": "^12.0.0",
-    "next": "^16.0.0",
+    "motion": "^12.0.0",
+    "next": "^15.0.0 || ^16.0.0",
     "next-themes": "^0.4.0",
     "react": "^18.2.0 || ^19.0.0",
     "react-day-picker": "^9.0.0",
@@ -113,6 +112,15 @@
     "embla-carousel-react": {
       "optional": true
     },
+    "motion": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "next-themes": {
+      "optional": true
+    },
     "react-day-picker": {
       "optional": true
     },

package/styles/motion.css

@@ -1,8 +1,8 @@
 /**
- * @fileoverview Motion tokens + animation kill-switch.
+ * @fileoverview Motion tokens, animation kill-switch, and entrance/exit utilities.
  * @module packages/ui/styles/motion
  * @package ui
- * @reviewed 2026-04-19
+ * @reviewed 2026-05-06
  *
  * Duration and easing tokens consumed by components and utility classes.
  * The [data-animated="false"] attribute — set by SaasflareProvider on <html> —
@@ -11,6 +11,11 @@
  *
  * Reduced-motion media query is an additional safety net for users with an
  * OS-level preference, regardless of the provider's `animated` prop.
+ *
+ * Entrance/exit utilities below are derived from tw-animate-css (MIT,
+ * © 2025 Wombosvideo). Vendored to drop the runtime dependency; only the
+ * surface actually used by this package is kept (animate-in/out, fade,
+ * zoom, slide on cardinal axes, plus accordion-down/up and caret-blink).
  */
 
 :root {
@@ -51,3 +56,150 @@
         scroll-behavior: auto !important;
     }
 }
+
+/* ============================================
+ * Entrance / Exit animations
+ *
+ * The `animate-in` / `animate-out` utilities run shared `enter` / `exit`
+ * keyframes that interpolate four CSS variables (opacity, translate-x,
+ * translate-y, scale). Modifier utilities like `fade-in-0`, `slide-in-from-top-2`,
+ * `zoom-in-95` set those variables to non-default values so the same keyframes
+ * cover every entrance/exit combination — including stacked modifiers like
+ * `animate-in fade-in-0 zoom-in-95 slide-in-from-top-2`.
+ * ============================================ */
+
+@property --tw-enter-opacity { syntax: "*"; inherits: false; initial-value: 1; }
+@property --tw-enter-scale { syntax: "*"; inherits: false; initial-value: 1; }
+@property --tw-enter-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-enter-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-exit-opacity { syntax: "*"; inherits: false; initial-value: 1; }
+@property --tw-exit-scale { syntax: "*"; inherits: false; initial-value: 1; }
+@property --tw-exit-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-exit-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
+
+@theme inline {
+    /* Percentage scale used by zoom-in-*, zoom-out-*, fade-in-*, fade-out-*. */
+    --percentage-0: 0;
+    --percentage-50: 0.5;
+    --percentage-90: 0.9;
+    --percentage-95: 0.95;
+    --percentage-100: 1;
+
+    /* `animate-in` / `animate-out` — run the shared enter/exit keyframes. */
+    --animate-in: enter 0.15s ease;
+    --animate-out: exit 0.15s ease;
+
+    /* Component-specific named animations. */
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+    --animate-accordion-up: accordion-up 0.2s ease-out;
+    --animate-caret-blink: caret-blink 1.25s ease-out infinite;
+}
+
+@keyframes enter {
+    from {
+        opacity: var(--tw-enter-opacity, 1);
+        transform: translate3d(
+                var(--tw-enter-translate-x, 0),
+                var(--tw-enter-translate-y, 0),
+                0
+            )
+            scale3d(
+                var(--tw-enter-scale, 1),
+                var(--tw-enter-scale, 1),
+                var(--tw-enter-scale, 1)
+            );
+    }
+}
+
+@keyframes exit {
+    to {
+        opacity: var(--tw-exit-opacity, 1);
+        transform: translate3d(
+                var(--tw-exit-translate-x, 0),
+                var(--tw-exit-translate-y, 0),
+                0
+            )
+            scale3d(
+                var(--tw-exit-scale, 1),
+                var(--tw-exit-scale, 1),
+                var(--tw-exit-scale, 1)
+            );
+    }
+}
+
+@keyframes accordion-down {
+    from { height: 0; }
+    to { height: var(--radix-accordion-content-height, auto); }
+}
+
+@keyframes accordion-up {
+    from { height: var(--radix-accordion-content-height, auto); }
+    to { height: 0; }
+}
+
+@keyframes caret-blink {
+    0%, 70%, 100% { opacity: 1; }
+    20%, 50% { opacity: 0; }
+}
+
+/* Modifier utilities — set the enter/exit CSS vars consumed by the keyframes.
+ * Each parametric utility tries two resolution paths in order; CSS cascade
+ * keeps whichever resolves last. This matches tw-animate-css behavior so that
+ * both `fade-in-50` (namespace lookup → 0.5) and `fade-in-[0.7]` (arbitrary
+ * value) work. */
+
+@utility fade-in { --tw-enter-opacity: 0; }
+@utility fade-in-* {
+    --tw-enter-opacity: calc(--value(number)/100);
+    --tw-enter-opacity: --value(--percentage-*,[*]);
+}
+@utility fade-out { --tw-exit-opacity: 0; }
+@utility fade-out-* {
+    --tw-exit-opacity: calc(--value(number)/100);
+    --tw-exit-opacity: --value(--percentage-*,[*]);
+}
+
+@utility zoom-in { --tw-enter-scale: 0; }
+@utility zoom-in-* {
+    --tw-enter-scale: calc(--value(number)*1%);
+    --tw-enter-scale: --value(--percentage-*,[*]);
+}
+@utility zoom-out { --tw-exit-scale: 0; }
+@utility zoom-out-* {
+    --tw-exit-scale: calc(--value(number)*1%);
+    --tw-exit-scale: --value(--percentage-*,[*]);
+}
+
+@utility slide-in-from-top { --tw-enter-translate-y: -100%; }
+@utility slide-in-from-top-* {
+    --tw-enter-translate-y: calc(--value(integer)*var(--spacing)*-1);
+}
+@utility slide-in-from-bottom { --tw-enter-translate-y: 100%; }
+@utility slide-in-from-bottom-* {
+    --tw-enter-translate-y: calc(--value(integer)*var(--spacing));
+}
+@utility slide-in-from-left { --tw-enter-translate-x: -100%; }
+@utility slide-in-from-left-* {
+    --tw-enter-translate-x: calc(--value(integer)*var(--spacing)*-1);
+}
+@utility slide-in-from-right { --tw-enter-translate-x: 100%; }
+@utility slide-in-from-right-* {
+    --tw-enter-translate-x: calc(--value(integer)*var(--spacing));
+}
+
+@utility slide-out-to-top { --tw-exit-translate-y: -100%; }
+@utility slide-out-to-top-* {
+    --tw-exit-translate-y: calc(--value(integer)*var(--spacing)*-1);
+}
+@utility slide-out-to-bottom { --tw-exit-translate-y: 100%; }
+@utility slide-out-to-bottom-* {
+    --tw-exit-translate-y: calc(--value(integer)*var(--spacing));
+}
+@utility slide-out-to-left { --tw-exit-translate-x: -100%; }
+@utility slide-out-to-left-* {
+    --tw-exit-translate-x: calc(--value(integer)*var(--spacing)*-1);
+}
+@utility slide-out-to-right { --tw-exit-translate-x: 100%; }
+@utility slide-out-to-right-* {
+    --tw-exit-translate-x: calc(--value(integer)*var(--spacing));
+}

package/styles/theme.css

@@ -24,7 +24,6 @@
  */
 
 @import "tailwindcss";
-@import "tw-animate-css";
 @import "./motion.css";
 @import "./surfaces.css";
 @import "./palettes.css";