@saasflare/ui 3.1.1 → 3.2.0

package/dist/{chunk-WRONFPRI.mjs → chunk-RMQBB72G.mjs}

@@ -2,7 +2,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React2 from 'react';
-import { createContext, useContext, useEffect, useCallback, useRef, useState } from 'react';
+import { createContext, useRef, useCallback, useState, useEffect, useContext } from 'react';
 import 'class-variance-authority';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { ThemeProvider, useTheme } from 'next-themes';
@@ -68,6 +68,99 @@ var getServerSnapshot = () => false;
 function useReducedMotion() {
   return React2.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
+var SYNC_PREFIX = "sf-ls:";
+function useLocalStorage(key, initialValue, options) {
+  const initialRef = useRef(initialValue);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const serialize = useCallback(
+    (value) => (optionsRef.current?.serializer ?? JSON.stringify)(value),
+    []
+  );
+  const deserialize = useCallback(
+    (raw) => (optionsRef.current?.deserializer ?? JSON.parse)(raw),
+    []
+  );
+  const handleError = useCallback(
+    (error, operation) => {
+      if (optionsRef.current?.onError) {
+        optionsRef.current.onError(error, operation);
+      } else {
+        console.warn(`useLocalStorage: ${operation} failed for "${key}"`, error);
+      }
+    },
+    [key]
+  );
+  const readValue = useCallback(() => {
+    if (typeof window === "undefined") return initialRef.current;
+    try {
+      const item = window.localStorage.getItem(key);
+      return item !== null ? deserialize(item) : initialRef.current;
+    } catch (error) {
+      handleError(error, "read");
+      return initialRef.current;
+    }
+  }, [key, deserialize, handleError]);
+  const [storedValue, setStoredValue] = useState(initialValue);
+  const setValue = useCallback(
+    (value) => {
+      let prev;
+      if (typeof window === "undefined") {
+        prev = initialRef.current;
+      } else {
+        try {
+          const raw = window.localStorage.getItem(key);
+          prev = raw !== null ? deserialize(raw) : initialRef.current;
+        } catch {
+          prev = initialRef.current;
+        }
+      }
+      const next = typeof value === "function" ? value(prev) : value;
+      setStoredValue(next);
+      if (typeof window === "undefined") return;
+      try {
+        window.localStorage.setItem(key, serialize(next));
+      } catch (err) {
+        handleError(err, "write");
+        return;
+      }
+      setTimeout(() => {
+        window.dispatchEvent(new CustomEvent(`${SYNC_PREFIX}${key}`));
+      }, 0);
+    },
+    [key, serialize, deserialize, handleError]
+  );
+  const removeValue = useCallback(() => {
+    setStoredValue(initialRef.current);
+    if (typeof window === "undefined") return;
+    try {
+      window.localStorage.removeItem(key);
+    } catch (err) {
+      handleError(err, "remove");
+      return;
+    }
+    setTimeout(() => {
+      window.dispatchEvent(new CustomEvent(`${SYNC_PREFIX}${key}`));
+    }, 0);
+  }, [key, handleError]);
+  useEffect(() => {
+    const onStorage = (e) => {
+      if (e.key === key) setStoredValue(readValue());
+    };
+    const onSync = () => setStoredValue(readValue());
+    const syncEvent = `${SYNC_PREFIX}${key}`;
+    window.addEventListener("storage", onStorage);
+    window.addEventListener(syncEvent, onSync);
+    return () => {
+      window.removeEventListener("storage", onStorage);
+      window.removeEventListener(syncEvent, onSync);
+    };
+  }, [key, readValue]);
+  useEffect(() => {
+    setStoredValue(readValue());
+  }, [readValue]);
+  return [storedValue, setValue, removeValue];
+}
 var AnimationContext = createContext(
   void 0
 );
@@ -130,95 +223,18 @@ function SaasflareScript({ nonce, palette, surface, radius, animated, storageKey
     }
   );
 }
-var SYNC_PREFIX = "sf-ls:";
-function useLocalStorage(key, initialValue, options) {
-  const initialRef = useRef(initialValue);
-  const optionsRef = useRef(options);
-  optionsRef.current = options;
-  const serialize = useCallback(
-    (value) => (optionsRef.current?.serializer ?? JSON.stringify)(value),
-    []
-  );
-  const deserialize = useCallback(
-    (raw) => (optionsRef.current?.deserializer ?? JSON.parse)(raw),
-    []
-  );
-  const handleError = useCallback(
-    (error, operation) => {
-      if (optionsRef.current?.onError) {
-        optionsRef.current.onError(error, operation);
-      } else {
-        console.warn(`useLocalStorage: ${operation} failed for "${key}"`, error);
-      }
-    },
-    [key]
-  );
-  const readValue = useCallback(() => {
-    if (typeof window === "undefined") return initialRef.current;
-    try {
-      const item = window.localStorage.getItem(key);
-      return item !== null ? deserialize(item) : initialRef.current;
-    } catch (error) {
-      handleError(error, "read");
-      return initialRef.current;
-    }
-  }, [key, deserialize, handleError]);
-  const [storedValue, setStoredValue] = useState(() => readValue());
-  const setValue = useCallback(
-    (value) => {
-      try {
-        setStoredValue((prev) => {
-          const next = typeof value === "function" ? value(prev) : value;
-          if (typeof window !== "undefined") {
-            window.localStorage.setItem(key, serialize(next));
-            window.dispatchEvent(new CustomEvent(`${SYNC_PREFIX}${key}`));
-          }
-          return next;
-        });
-      } catch (error) {
-        handleError(error, "write");
-      }
-    },
-    [key, serialize, handleError]
-  );
-  const removeValue = useCallback(() => {
-    try {
-      if (typeof window !== "undefined") {
-        window.localStorage.removeItem(key);
-        window.dispatchEvent(new CustomEvent(`${SYNC_PREFIX}${key}`));
-      }
-      setStoredValue(initialRef.current);
-    } catch (error) {
-      handleError(error, "remove");
-    }
-  }, [key, handleError]);
-  useEffect(() => {
-    const onStorage = (e) => {
-      if (e.key === key) setStoredValue(readValue());
-    };
-    const onSync = () => setStoredValue(readValue());
-    const syncEvent = `${SYNC_PREFIX}${key}`;
-    window.addEventListener("storage", onStorage);
-    window.addEventListener(syncEvent, onSync);
-    return () => {
-      window.removeEventListener("storage", onStorage);
-      window.removeEventListener(syncEvent, onSync);
-    };
-  }, [key, readValue]);
-  useEffect(() => {
-    setStoredValue(readValue());
-  }, [readValue]);
-  return [storedValue, setValue, removeValue];
-}
 var DEFAULT_CONTEXT = {
   palette: null,
   surface: "flat",
-  radius: "rounded",
+  radius: "soft",
+  iconWeight: "regular",
   setPalette: () => {
   },
   setSurface: () => {
   },
   setRadius: () => {
+  },
+  setIconWeight: () => {
   }
 };
 var SaasflareThemeContext = createContext(DEFAULT_CONTEXT);
@@ -278,7 +294,8 @@ var PERSISTED_DEFAULTS = {
   palette: null,
   surface: null,
   radius: null,
-  animated: null
+  animated: null,
+  iconWeight: null
 };
 function SaasflareProvider({
   children,
@@ -286,8 +303,9 @@ function SaasflareProvider({
   palette,
   surface,
   radius,
-  animated = true,
-  smoothScrolling = false,
+  iconWeight,
+  animated,
+  smoothScrolling = true,
   disableScript = false,
   scriptNonce,
   storageKey = UI_PREFS_STORAGE_KEY,
@@ -304,7 +322,9 @@ function SaasflareProvider({
   );
   const currentPalette = isCustomPalette ? palette.name : palette ?? persisted.palette;
   const currentStyle = surface ?? persisted.surface ?? "flat";
-  const currentRadius = radius ?? persisted.radius ?? "rounded";
+  const currentRadius = radius ?? persisted.radius ?? "soft";
+  const currentIconWeight = iconWeight ?? persisted.iconWeight ?? "regular";
+  const currentAnimated = animated ?? persisted.animated ?? true;
   const setPalette = useCallback(
     (id) => setPersisted((prev) => ({ ...prev, palette: id })),
     [setPersisted]
@@ -317,8 +337,12 @@ function SaasflareProvider({
     (r) => setPersisted((prev) => ({ ...prev, radius: r })),
     [setPersisted]
   );
+  const setIconWeight = useCallback(
+    (w) => setPersisted((prev) => ({ ...prev, iconWeight: w })),
+    [setPersisted]
+  );
   const prefersReduced = useReducedMotion();
-  const effectiveAnimated = animated && !prefersReduced;
+  const effectiveAnimated = currentAnimated && !prefersReduced;
   useEffect(() => {
     const root = document.documentElement;
     if (currentPalette) {
@@ -335,7 +359,7 @@ function SaasflareProvider({
     {
       attribute: "class",
       defaultTheme: theme,
-      enableSystem: theme === "system",
+      enableSystem: true,
       storageKey: themeStorageKey,
       disableTransitionOnChange: true,
       children: [
@@ -353,9 +377,11 @@ function SaasflareProvider({
               palette: currentPalette,
               surface: currentStyle,
               radius: currentRadius,
+              iconWeight: currentIconWeight,
               setPalette,
               setSurface,
-              setRadius
+              setRadius,
+              setIconWeight
             },
             children: /* @__PURE__ */ jsxs(AnimationContext.Provider, { value: { animated: effectiveAnimated }, children: [
               isCustomPalette && /* @__PURE__ */ jsx(CustomPaletteInjector, { palette }),
@@ -422,8 +448,9 @@ function useSaasflareProps(props = {}) {
     surface: props.surface ?? ctx.surface,
     radius: props.radius ?? ctx.radius,
     animated: props.animated ?? anim?.animated ?? true,
-    palette: ctx.palette
+    palette: ctx.palette,
+    iconWeight: props.iconWeight ?? ctx.iconWeight
   };
 }
 
-export { SaasflareProvider, SaasflareScript, SaasflareShell, SmoothScrollProvider, cn, useAnimation, useReducedMotion, useSaasflareProps, useSaasflareTheme };
+export { SaasflareProvider, SaasflareScript, SaasflareShell, SmoothScrollProvider, cn, useAnimation, useLocalStorage, useReducedMotion, useSaasflareProps, useSaasflareTheme };

package/dist/chunk-XNDTCYSO.mjs

@@ -0,0 +1,211 @@
+"use client";
+import { buttonVariants, Button } from './chunk-2ONA6OMO.mjs';
+import { CaretLeftIcon, CaretRightIcon, CaretDownIcon } from './chunk-GI6VN7XU.mjs';
+import { useSaasflareProps, cn } from './chunk-RMQBB72G.mjs';
+import * as React from 'react';
+import { getDefaultClassNames, DayPicker } from 'react-day-picker';
+import { jsx } from 'react/jsx-runtime';
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  surface,
+  radius,
+  animated,
+  iconWeight,
+  ...props
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
+  const defaultClassNames = getDefaultClassNames();
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      "data-slot": "calendar",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      showOutsideDays,
+      className: 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: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: 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: cn(
+          "absolute inset-0 bg-popover opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: 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: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: 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: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames
+      },
+      components: {
+        Root: ({ className: className2, rootRef, ...props2 }) => {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "calendar",
+              ref: rootRef,
+              className: cn(className2),
+              ...props2
+            }
+          );
+        },
+        Chevron: ({ className: className2, orientation, ...props2 }) => {
+          if (orientation === "left") {
+            return /* @__PURE__ */ jsx(
+              CaretLeftIcon,
+              {
+                weight: sf.iconWeight,
+                className: cn("size-4", className2),
+                ...props2
+              }
+            );
+          }
+          if (orientation === "right") {
+            return /* @__PURE__ */ jsx(
+              CaretRightIcon,
+              {
+                weight: sf.iconWeight,
+                className: cn("size-4", className2),
+                ...props2
+              }
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            CaretDownIcon,
+            {
+              weight: sf.iconWeight,
+              className: cn("size-4", className2),
+              ...props2
+            }
+          );
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props2 }) => {
+          return /* @__PURE__ */ jsx("td", { ...props2, children: /* @__PURE__ */ jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
+        },
+        ...components
+      },
+      ...props
+    }
+  );
+}
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsx(
+    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: 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
+    }
+  );
+}
+
+export { Calendar, CalendarDayButton };

package/dist/{dialog-BmY55WSX.d.ts → dialog-CZRwrqDa.d.ts}

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { c as SaasflareComponentProps } from './use-saasflare-props-NrM2Glmp.js';
+import { d as SaasflareComponentProps } from './use-saasflare-props-BrjMhU0U.js';
 
 declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
 declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
@@ -16,7 +16,7 @@ interface DialogContentProps extends Omit<React.ComponentProps<typeof DialogPrim
  * @component
  * @layer core
  */
-declare function DialogContent({ className, children, surface, radius, animated, ...props }: DialogContentProps): react_jsx_runtime.JSX.Element;
+declare function DialogContent({ className, children, surface, radius, animated, iconWeight, ...props }: DialogContentProps): react_jsx_runtime.JSX.Element;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;

package/dist/{dialog-CcaHMAsS.d.mts → dialog-Cr0becOL.d.mts}

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { c as SaasflareComponentProps } from './use-saasflare-props-NrM2Glmp.mjs';
+import { d as SaasflareComponentProps } from './use-saasflare-props-BrjMhU0U.mjs';
 
 declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
 declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
@@ -16,7 +16,7 @@ interface DialogContentProps extends Omit<React.ComponentProps<typeof DialogPrim
  * @component
  * @layer core
  */
-declare function DialogContent({ className, children, surface, radius, animated, ...props }: DialogContentProps): react_jsx_runtime.JSX.Element;
+declare function DialogContent({ className, children, surface, radius, animated, iconWeight, ...props }: DialogContentProps): react_jsx_runtime.JSX.Element;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;

package/dist/entries/calendar.d.mts

@@ -1,15 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { DayPicker, DayButton } from 'react-day-picker';
-import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.mjs';
-import { B as Button } from '../button-Brb4BhPO.mjs';
+import { d as SaasflareComponentProps } from '../use-saasflare-props-BrjMhU0U.mjs';
+import { B as Button } from '../button-BA7OcXqy.mjs';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
 
 type CalendarProps = React.ComponentProps<typeof DayPicker> & SaasflareComponentProps & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 };
-declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, surface, radius, animated, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, surface, radius, animated, iconWeight, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
 declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): react_jsx_runtime.JSX.Element;
 
 export { Calendar, CalendarDayButton };

package/dist/entries/calendar.d.ts

@@ -1,15 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { DayPicker, DayButton } from 'react-day-picker';
-import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.js';
-import { B as Button } from '../button-0Bdl7Nqm.js';
+import { d as SaasflareComponentProps } from '../use-saasflare-props-BrjMhU0U.js';
+import { B as Button } from '../button-Bfg2Tnvx.js';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
 
 type CalendarProps = React.ComponentProps<typeof DayPicker> & SaasflareComponentProps & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 };
-declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, surface, radius, animated, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, surface, radius, animated, iconWeight, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
 declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): react_jsx_runtime.JSX.Element;
 
 export { Calendar, CalendarDayButton };