@saasflare/ui 3.1.1 → 3.2.0

package/dist/{chunk-FT66KYRN.js → chunk-ITALEYDI.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkD5LKWKG7_js = require('./chunk-D5LKWKG7.js');
+var chunk2GOPD64T_js = require('./chunk-2GOPD64T.js');
 
 // src/components/ui/motion-config.ts
 var spring = { type: "spring", stiffness: 400, damping: 25 };
@@ -13,7 +13,7 @@ var scaleIn = { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, sca
 var slideUp = { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 } };
 var slideDown = { initial: { opacity: 0, y: -8 }, animate: { opacity: 1, y: 0 } };
 function useSaasflareMotion(animated, base = spring, ...extraDisablers) {
-  const reduced = chunkD5LKWKG7_js.useReducedMotion();
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
   const disabled = !animated || reduced || extraDisablers.some(Boolean);
   return { transition: disabled ? noMotion : base, disabled };
 }

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

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
-var chunkFT66KYRN_js = require('./chunk-FT66KYRN.js');
-var chunkD5LKWKG7_js = require('./chunk-D5LKWKG7.js');
+var chunkITALEYDI_js = require('./chunk-ITALEYDI.js');
+var chunkR3AVBLJ3_js = require('./chunk-R3AVBLJ3.js');
+var chunk2GOPD64T_js = require('./chunk-2GOPD64T.js');
 var react = require('motion/react');
 var DialogPrimitive = require('@radix-ui/react-dialog');
-var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -56,7 +56,7 @@ function DialogOverlay({
     DialogPrimitive__namespace.Overlay,
     {
       "data-slot": "dialog-overlay",
-      className: chunkD5LKWKG7_js.cn(
+      className: chunk2GOPD64T_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
       ),
@@ -70,10 +70,11 @@ function DialogContent({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = chunkD5LKWKG7_js.useSaasflareProps({ surface, radius, animated });
-  const motion = chunkFT66KYRN_js.useSaasflareMotion(sf.animated, chunkFT66KYRN_js.springBouncy);
+  const sf = chunk2GOPD64T_js.useSaasflareProps({ surface, radius, animated, iconWeight });
+  const motion = chunkITALEYDI_js.useSaasflareMotion(sf.animated, chunkITALEYDI_js.springBouncy);
   return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -92,14 +93,14 @@ function DialogContent({
             animate: { opacity: 1, scale: 1, y: 0 },
             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: chunk2GOPD64T_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 surface-card p-6 sm:max-w-lg",
               className
             ),
             children: [
               children,
               /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.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__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(chunkR3AVBLJ3_js.XIcon, { weight: sf.iconWeight }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
               ] })
             ]
@@ -114,7 +115,7 @@ function DialogHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "dialog-header",
-      className: chunkD5LKWKG7_js.cn("flex flex-col gap-2 text-center sm:text-left", className),
+      className: chunk2GOPD64T_js.cn("flex flex-col gap-2 text-center sm:text-left", className),
       ...props
     }
   );
@@ -124,7 +125,7 @@ function DialogFooter({ className, ...props }) {
     "div",
     {
       "data-slot": "dialog-footer",
-      className: chunkD5LKWKG7_js.cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+      className: chunk2GOPD64T_js.cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
       ...props
     }
   );
@@ -137,7 +138,7 @@ function DialogTitle({
     DialogPrimitive__namespace.Title,
     {
       "data-slot": "dialog-title",
-      className: chunkD5LKWKG7_js.cn("text-lg leading-none font-semibold", className),
+      className: chunk2GOPD64T_js.cn("text-lg leading-none font-semibold", className),
       ...props
     }
   );
@@ -150,7 +151,7 @@ function DialogDescription({
     DialogPrimitive__namespace.Description,
     {
       "data-slot": "dialog-description",
-      className: chunkD5LKWKG7_js.cn("text-sm text-muted-foreground", className),
+      className: chunk2GOPD64T_js.cn("text-sm text-muted-foreground", className),
       ...props
     }
   );

package/dist/chunk-N65HIOBD.js

@@ -0,0 +1,234 @@
+"use client";
+'use strict';
+
+var chunk7UD3SGPP_js = require('./chunk-7UD3SGPP.js');
+var chunkR3AVBLJ3_js = require('./chunk-R3AVBLJ3.js');
+var chunk2GOPD64T_js = require('./chunk-2GOPD64T.js');
+var React = require('react');
+var reactDayPicker = require('react-day-picker');
+var jsxRuntime = require('react/jsx-runtime');
+
+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);
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  surface,
+  radius,
+  animated,
+  iconWeight,
+  ...props
+}) {
+  const sf = chunk2GOPD64T_js.useSaasflareProps({ surface, radius, animated, iconWeight });
+  const defaultClassNames = reactDayPicker.getDefaultClassNames();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactDayPicker.DayPicker,
+    {
+      "data-slot": "calendar",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      showOutsideDays,
+      className: chunk2GOPD64T_js.cn(
+        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      ),
+      captionLayout,
+      formatters: {
+        formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+        ...formatters
+      },
+      classNames: {
+        root: chunk2GOPD64T_js.cn("w-fit", defaultClassNames.root),
+        months: chunk2GOPD64T_js.cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: chunk2GOPD64T_js.cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: chunk2GOPD64T_js.cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: chunk2GOPD64T_js.cn(
+          chunk7UD3SGPP_js.buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: chunk2GOPD64T_js.cn(
+          chunk7UD3SGPP_js.buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: chunk2GOPD64T_js.cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: chunk2GOPD64T_js.cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: chunk2GOPD64T_js.cn(
+          "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: chunk2GOPD64T_js.cn(
+          "absolute inset-0 bg-popover opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: chunk2GOPD64T_js.cn(
+          "font-medium select-none",
+          captionLayout === "label" ? "text-sm" : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: chunk2GOPD64T_js.cn("flex", defaultClassNames.weekdays),
+        weekday: chunk2GOPD64T_js.cn(
+          "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: chunk2GOPD64T_js.cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: chunk2GOPD64T_js.cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: chunk2GOPD64T_js.cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: chunk2GOPD64T_js.cn(
+          "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md",
+          props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          defaultClassNames.day
+        ),
+        range_start: chunk2GOPD64T_js.cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: chunk2GOPD64T_js.cn("rounded-none", defaultClassNames.range_middle),
+        range_end: chunk2GOPD64T_js.cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: chunk2GOPD64T_js.cn(
+          "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: chunk2GOPD64T_js.cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: chunk2GOPD64T_js.cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: chunk2GOPD64T_js.cn("invisible", defaultClassNames.hidden),
+        ...classNames
+      },
+      components: {
+        Root: ({ className: className2, rootRef, ...props2 }) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-slot": "calendar",
+              ref: rootRef,
+              className: chunk2GOPD64T_js.cn(className2),
+              ...props2
+            }
+          );
+        },
+        Chevron: ({ className: className2, orientation, ...props2 }) => {
+          if (orientation === "left") {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              chunkR3AVBLJ3_js.CaretLeftIcon,
+              {
+                weight: sf.iconWeight,
+                className: chunk2GOPD64T_js.cn("size-4", className2),
+                ...props2
+              }
+            );
+          }
+          if (orientation === "right") {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              chunkR3AVBLJ3_js.CaretRightIcon,
+              {
+                weight: sf.iconWeight,
+                className: chunk2GOPD64T_js.cn("size-4", className2),
+                ...props2
+              }
+            );
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            chunkR3AVBLJ3_js.CaretDownIcon,
+            {
+              weight: sf.iconWeight,
+              className: chunk2GOPD64T_js.cn("size-4", className2),
+              ...props2
+            }
+          );
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props2 }) => {
+          return /* @__PURE__ */ jsxRuntime.jsx("td", { ...props2, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
+        },
+        ...components
+      },
+      ...props
+    }
+  );
+}
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}) {
+  const defaultClassNames = reactDayPicker.getDefaultClassNames();
+  const ref = React__namespace.useRef(null);
+  React__namespace.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunk7UD3SGPP_js.Button,
+    {
+      ref,
+      variant: "ghost",
+      size: "icon",
+      "data-day": day.date.toLocaleDateString(),
+      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+      "data-range-start": modifiers.range_start,
+      "data-range-end": modifiers.range_end,
+      "data-range-middle": modifiers.range_middle,
+      className: chunk2GOPD64T_js.cn(
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+exports.Calendar = Calendar;
+exports.CalendarDayButton = CalendarDayButton;

package/dist/{chunk-EJHYM2HP.mjs → chunk-OZAWULTM.mjs}

@@ -1,4 +1,4 @@
-import { useReducedMotion } from './chunk-WRONFPRI.mjs';
+import { useReducedMotion } from './chunk-RMQBB72G.mjs';
 
 // src/components/ui/motion-config.ts
 var spring = { type: "spring", stiffness: 400, damping: 25 };