@papernote/ui 1.7.2 → 1.7.3

package/dist/index.js

@@ -4240,7 +4240,7 @@ function Stepper({ steps, activeStep, completedSteps = [], orientation = 'horizo
       `, children: steps.map((step, index) => renderStep(step, index)) }));
 }
 
-function Calendar({ value, onChange, events = [], onEventClick, rangeMode = false, rangeValue, onRangeChange, minDate, maxDate, disabledDates = [], showWeekNumbers = false, firstDayOfWeek = 0, className = '', }) {
+function Calendar({ value, onChange, onMonthChange, events = [], onEventClick, rangeMode = false, rangeValue, onRangeChange, minDate, maxDate, disabledDates = [], showWeekNumbers = false, firstDayOfWeek = 0, className = '', }) {
     const [currentMonth, setCurrentMonth] = React.useState(value || new Date());
     const [hoverDate, setHoverDate] = React.useState(null);
     // Generate calendar grid for current month
@@ -4364,21 +4364,31 @@ function Calendar({ value, onChange, events = [], onEventClick, rangeMode = fals
     };
     // Navigate months
     const previousMonth = () => {
-        setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1));
+        const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1);
+        setCurrentMonth(newMonth);
+        onMonthChange?.(newMonth);
     };
     const nextMonth = () => {
-        setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1));
+        const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1);
+        setCurrentMonth(newMonth);
+        onMonthChange?.(newMonth);
     };
     // Navigate years
     const previousYear = () => {
-        setCurrentMonth(new Date(currentMonth.getFullYear() - 1, currentMonth.getMonth(), 1));
+        const newMonth = new Date(currentMonth.getFullYear() - 1, currentMonth.getMonth(), 1);
+        setCurrentMonth(newMonth);
+        onMonthChange?.(newMonth);
     };
     const nextYear = () => {
-        setCurrentMonth(new Date(currentMonth.getFullYear() + 1, currentMonth.getMonth(), 1));
+        const newMonth = new Date(currentMonth.getFullYear() + 1, currentMonth.getMonth(), 1);
+        setCurrentMonth(newMonth);
+        onMonthChange?.(newMonth);
     };
     // Go to today
     const goToToday = () => {
-        setCurrentMonth(new Date());
+        const today = new Date();
+        setCurrentMonth(today);
+        onMonthChange?.(today);
     };
     // Day names
     const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
@@ -4391,7 +4401,7 @@ function Calendar({ value, onChange, events = [], onEventClick, rangeMode = fals
         error: 'bg-error-500',
         accent: 'bg-accent-500',
     };
-    return (jsxRuntime.jsxs("div", { className: `bg-white rounded-lg border border-paper-200 shadow-sm ${className}`, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-4 border-b border-paper-200", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("button", { onClick: previousYear, className: "p-1.5 hover:bg-paper-100 rounded transition-colors", "aria-label": "Previous year", children: [jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4 text-ink-600" }), jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4 text-ink-600 -ml-3" })] }), jsxRuntime.jsx("button", { onClick: previousMonth, className: "p-1.5 hover:bg-paper-100 rounded transition-colors", "aria-label": "Previous month", children: jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4 text-ink-600" }) })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-ink-900", children: currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) }), jsxRuntime.jsx("button", { onClick: goToToday, className: "px-3 py-1 text-sm font-medium text-accent-700 hover:bg-accent-50 rounded transition-colors", children: "Today" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("button", { onClick: nextMonth, className: "p-1.5 hover:bg-paper-100 rounded transition-colors", "aria-label": "Next month", children: jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-ink-600" }) }), jsxRuntime.jsxs("button", { onClick: nextYear, className: "p-1.5 hover:bg-paper-100 rounded transition-colors", "aria-label": "Next year", children: [jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-ink-600" }), jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-ink-600 -ml-3" })] })] })] }), jsxRuntime.jsx("div", { className: "p-4", children: jsxRuntime.jsxs("div", { className: "grid grid-cols-7 gap-1", children: [showWeekNumbers && jsxRuntime.jsx("div", { className: "h-8" }), adjustedDayNames.map((day) => (jsxRuntime.jsx("div", { className: "h-8 flex items-center justify-center text-xs font-semibold text-ink-600", children: day }, day))), Array.from({ length: 6 }).map((_, weekIndex) => (jsxRuntime.jsxs(React.Fragment, { children: [showWeekNumbers && (jsxRuntime.jsx("div", { className: "flex items-center justify-center text-xs text-ink-500 font-medium", children: getWeekNumber(calendarDays[weekIndex * 7]) })), calendarDays.slice(weekIndex * 7, weekIndex * 7 + 7).map((date, dayIndex) => {
+    return (jsxRuntime.jsxs("div", { className: `bg-white rounded-lg border border-paper-200 shadow-sm ${className}`, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-4 border-b border-paper-200", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("button", { onClick: previousYear, className: "p-1.5 hover:bg-paper-100 rounded transition-colors", "aria-label": "Previous year", children: jsxRuntime.jsx(lucideReact.ChevronsLeft, { className: "h-4 w-4 text-ink-600" }) }), jsxRuntime.jsx("button", { onClick: previousMonth, className: "p-1.5 hover:bg-paper-100 rounded transition-colors", "aria-label": "Previous month", children: jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4 text-ink-600" }) })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-ink-900", children: currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) }), jsxRuntime.jsx("button", { onClick: goToToday, className: "px-3 py-1 text-sm font-medium text-accent-700 hover:bg-accent-50 rounded transition-colors", children: "Today" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("button", { onClick: nextMonth, className: "p-1.5 hover:bg-paper-100 rounded transition-colors", "aria-label": "Next month", children: jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-ink-600" }) }), jsxRuntime.jsx("button", { onClick: nextYear, className: "p-1.5 hover:bg-paper-100 rounded transition-colors", "aria-label": "Next year", children: jsxRuntime.jsx(lucideReact.ChevronsRight, { className: "h-4 w-4 text-ink-600" }) })] })] }), jsxRuntime.jsx("div", { className: "p-4", children: jsxRuntime.jsxs("div", { className: "grid grid-cols-7 gap-1", children: [showWeekNumbers && jsxRuntime.jsx("div", { className: "h-8" }), adjustedDayNames.map((day) => (jsxRuntime.jsx("div", { className: "h-8 flex items-center justify-center text-xs font-semibold text-ink-600", children: day }, day))), Array.from({ length: 6 }).map((_, weekIndex) => (jsxRuntime.jsxs(React.Fragment, { children: [showWeekNumbers && (jsxRuntime.jsx("div", { className: "flex items-center justify-center text-xs text-ink-500 font-medium", children: getWeekNumber(calendarDays[weekIndex * 7]) })), calendarDays.slice(weekIndex * 7, weekIndex * 7 + 7).map((date, dayIndex) => {
                                     const dateEvents = getEventsForDate(date);
                                     const selected = isSelected(date);
                                     const inRange = isInRange(date);
@@ -7283,6 +7293,9 @@ function Hide({ children, above, below, only, className = '' }) {
  * Hook to detect breadcrumb navigation and trigger callbacks.
  * Use this in host components to reset state when a breadcrumb is clicked.
  *
+ * Note: This hook requires React Router context. If used outside a Router,
+ * it will be a no-op (the callback will never be called).
+ *
  * @param onReset - Callback fired when breadcrumb navigation is detected
  *
  * @example
@@ -7296,15 +7309,19 @@ function Hide({ children, above, below, only, className = '' }) {
  * }
  */
 function useBreadcrumbReset(onReset) {
-    const location = reactRouterDom.useLocation();
+    const inRouter = reactRouterDom.useInRouterContext();
     const lastResetRef = React.useRef(null);
+    // Only use useLocation when inside Router context
+    const location = inRouter ? reactRouterDom.useLocation() : null;
     React.useEffect(() => {
+        if (!location)
+            return;
         const state = location.state;
         if (state?.breadcrumbReset && state.breadcrumbReset !== lastResetRef.current) {
             lastResetRef.current = state.breadcrumbReset;
             onReset();
         }
-    }, [location.state, onReset]);
+    }, [location?.state, onReset, location]);
 }
 /**
  * Breadcrumbs navigation component.
@@ -7339,8 +7356,10 @@ function useBreadcrumbReset(onReset) {
  * }
  */
 function Breadcrumbs({ items, showHome = true }) {
-    const navigate = reactRouterDom.useNavigate();
-    const location = reactRouterDom.useLocation();
+    const inRouter = reactRouterDom.useInRouterContext();
+    // Only use router hooks when inside Router context
+    const navigate = inRouter ? reactRouterDom.useNavigate() : null;
+    const location = inRouter ? reactRouterDom.useLocation() : null;
     /**
      * Handle breadcrumb click with same-route detection.
      * When clicking a breadcrumb that points to the current route,
@@ -7349,6 +7368,9 @@ function Breadcrumbs({ items, showHome = true }) {
     const handleBreadcrumbClick = (e, href, onClick) => {
         // Always call onClick if provided (for custom actions)
         onClick?.();
+        // If not in router context, let the browser handle navigation naturally
+        if (!navigate || !location)
+            return;
         // Check if we're navigating to the same base path
         const targetPath = href.split('?')[0].split('#')[0];
         const currentPath = location.pathname;
@@ -7365,7 +7387,16 @@ function Breadcrumbs({ items, showHome = true }) {
         }
         // Different route - let the Link handle it normally
     };
-    return (jsxRuntime.jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center space-x-2 text-sm", children: [showHome && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactRouterDom.Link, { to: "/", className: "text-ink-500 hover:text-ink-900 transition-colors", "aria-label": "Home", onClick: (e) => handleBreadcrumbClick(e, '/'), children: jsxRuntime.jsx(lucideReact.Home, { className: "h-4 w-4" }) }), items.length > 0 && jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-ink-400" })] })), items.map((item, index) => {
+    // Helper to render a link - uses Link when in router, <a> when not
+    const renderLink = (href, children, className, onClick, ariaLabel) => {
+        if (inRouter) {
+            return (jsxRuntime.jsx(reactRouterDom.Link, { to: href, className: className, onClick: onClick, "aria-label": ariaLabel, children: children }));
+        }
+        return (jsxRuntime.jsx("a", { href: href, className: className, onClick: (e) => {
+                onClick?.(e);
+            }, "aria-label": ariaLabel, children: children }));
+    };
+    return (jsxRuntime.jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center space-x-2 text-sm", children: [showHome && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderLink('/', jsxRuntime.jsx(lucideReact.Home, { className: "h-4 w-4" }), 'text-ink-500 hover:text-ink-900 transition-colors', (e) => handleBreadcrumbClick(e, '/'), 'Home'), items.length > 0 && jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-ink-400" })] })), items.map((item, index) => {
                 const isLast = index === items.length - 1;
                 const isActive = isLast;
                 const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.icon && jsxRuntime.jsx("span", { className: "flex-shrink-0", children: item.icon }), jsxRuntime.jsx("span", { children: item.label })] }));
@@ -7374,9 +7405,9 @@ function Breadcrumbs({ items, showHome = true }) {
                     if (isActive) {
                         return (jsxRuntime.jsx("span", { className: "flex items-center gap-2 px-2 py-1 rounded-md bg-accent-50 text-accent-900 font-semibold transition-colors", "aria-current": "page", children: content }));
                     }
-                    // Has href - render as Link with same-route detection
+                    // Has href - render as Link (or <a> if no router) with same-route detection
                     if (item.href) {
-                        return (jsxRuntime.jsx(reactRouterDom.Link, { to: item.href, onClick: (e) => handleBreadcrumbClick(e, item.href, item.onClick), className: "flex items-center gap-2 text-ink-500 hover:text-ink-900 hover:underline transition-colors", children: content }));
+                        return renderLink(item.href, content, 'flex items-center gap-2 text-ink-500 hover:text-ink-900 hover:underline transition-colors', (e) => handleBreadcrumbClick(e, item.href, item.onClick));
                     }
                     // Only onClick (no href) - render as button
                     if (item.onClick) {
@@ -10321,44 +10352,52 @@ function getAugmentedNamespace(n) {
  * (A1, A1:C5, ...)
  */
 
-let Collection$3 = class Collection {
+var collection;
+var hasRequiredCollection;
+
+function requireCollection () {
+	if (hasRequiredCollection) return collection;
+	hasRequiredCollection = 1;
+	class Collection {
 
-    constructor(data, refs) {
-        if (data == null && refs == null) {
-            this._data = [];
-            this._refs = [];
-        } else {
-            if (data.length !== refs.length)
-                throw Error('Collection: data length should match references length.');
-            this._data = data;
-            this._refs = refs;
-        }
-    }
+	    constructor(data, refs) {
+	        if (data == null && refs == null) {
+	            this._data = [];
+	            this._refs = [];
+	        } else {
+	            if (data.length !== refs.length)
+	                throw Error('Collection: data length should match references length.');
+	            this._data = data;
+	            this._refs = refs;
+	        }
+	    }
 
-    get data() {
-        return this._data;
-    }
+	    get data() {
+	        return this._data;
+	    }
 
-    get refs() {
-        return this._refs;
-    }
+	    get refs() {
+	        return this._refs;
+	    }
 
-    get length() {
-        return this._data.length;
-    }
+	    get length() {
+	        return this._data.length;
+	    }
 
-    /**
-     * Add data and references to this collection.
-     * @param {{}} obj - data
-     * @param {{}} ref - reference
-     */
-    add(obj, ref) {
-        this._data.push(obj);
-        this._refs.push(ref);
-    }
-};
+	    /**
+	     * Add data and references to this collection.
+	     * @param {{}} obj - data
+	     * @param {{}} ref - reference
+	     */
+	    add(obj, ref) {
+	        this._data.push(obj);
+	        this._refs.push(ref);
+	    }
+	}
 
-var collection = Collection$3;
+	collection = Collection;
+	return collection;
+}
 
 var helpers;
 var hasRequiredHelpers;
@@ -10367,7 +10406,7 @@ function requireHelpers () {
 	if (hasRequiredHelpers) return helpers;
 	hasRequiredHelpers = 1;
 	const FormulaError = requireError();
-	const Collection = collection;
+	const Collection = requireCollection();
 
 	const Types = {
 	    NUMBER: 0,
@@ -20021,7 +20060,7 @@ var engineering = EngineeringFunctions;
 
 const FormulaError$b = requireError();
 const {FormulaHelpers: FormulaHelpers$8, Types: Types$6, WildCard, Address: Address$3} = requireHelpers();
-const Collection$2 = collection;
+const Collection$2 = requireCollection();
 const H$5 = FormulaHelpers$8;
 
 const ReferenceFunctions$1 = {
@@ -31649,7 +31688,7 @@ var parsing = {
 const FormulaError$4 = requireError();
 const {Address: Address$1} = requireHelpers();
 const {Prefix: Prefix$1, Postfix: Postfix$1, Infix: Infix$1, Operators: Operators$1} = operators;
-const Collection$1 = collection;
+const Collection$1 = requireCollection();
 const MAX_ROW$1 = 1048576, MAX_COLUMN$1 = 16384;
 const {NotAllInputParsedException} = require$$4;
 
@@ -32411,7 +32450,7 @@ var hooks$1 = {
 const FormulaError$2 = requireError();
 const {FormulaHelpers: FormulaHelpers$1, Types, Address} = requireHelpers();
 const {Prefix, Postfix, Infix, Operators} = operators;
-const Collection = collection;
+const Collection = requireCollection();
 const MAX_ROW = 1048576, MAX_COLUMN = 16384;
 
 let Utils$1 = class Utils {