@papernote/ui 1.7.2 → 1.7.4

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);
@@ -5378,7 +5388,6 @@ function FormWizard({ steps, onComplete, onStepChange, showStepNumbers = true, a
     const [isSubmitting, setIsSubmitting] = React.useState(false);
     const isFirstStep = currentStep === 0;
     const isLastStep = currentStep === steps.length - 1;
-    const canGoNext = allowSkip || completedSteps.has(currentStep);
     // Go to specific step
     const goToStep = (stepIndex) => {
         if (stepIndex < 0 || stepIndex >= steps.length)
@@ -5450,7 +5459,7 @@ function FormWizard({ steps, onComplete, onStepChange, showStepNumbers = true, a
                                                 ? 'bg-accent-500'
                                                 : 'bg-paper-200'}
                       ` }) }))] }, step.id));
-                    }) }) }), jsxRuntime.jsx("div", { className: "mb-8", children: steps.map((step, index) => (jsxRuntime.jsx("div", { hidden: index !== currentStep, children: step.content }, step.id))) }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between pt-6 border-t border-paper-200", children: [jsxRuntime.jsx("button", { type: "button", onClick: prevStep, disabled: isFirstStep, className: "px-4 py-2 text-sm font-medium text-ink-700 bg-white border border-paper-300 rounded-lg hover:bg-paper-50 disabled:opacity-40 disabled:cursor-not-allowed transition-all", children: "Previous" }), jsxRuntime.jsxs("div", { className: "text-sm text-ink-600", children: ["Step ", currentStep + 1, " of ", steps.length] }), jsxRuntime.jsx("button", { type: "button", onClick: nextStep, disabled: !allowSkip && !canGoNext && !isLastStep || isSubmitting, className: "px-4 py-2 text-sm font-medium text-white bg-accent-500 rounded-lg hover:bg-accent-600 disabled:opacity-40 disabled:cursor-not-allowed transition-all", children: isSubmitting ? 'Submitting...' : isLastStep ? 'Complete' : 'Next' })] })] }));
+                    }) }) }), jsxRuntime.jsx("div", { className: "mb-8", children: steps.map((step, index) => (jsxRuntime.jsx("div", { hidden: index !== currentStep, children: step.content }, step.id))) }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between pt-6 border-t border-paper-200", children: [jsxRuntime.jsx("button", { type: "button", onClick: prevStep, disabled: isFirstStep, className: "px-4 py-2 text-sm font-medium text-ink-700 bg-white border border-paper-300 rounded-lg hover:bg-paper-50 disabled:opacity-40 disabled:cursor-not-allowed transition-all", children: "Previous" }), jsxRuntime.jsxs("div", { className: "text-sm text-ink-600", children: ["Step ", currentStep + 1, " of ", steps.length] }), jsxRuntime.jsx("button", { type: "button", onClick: nextStep, disabled: isSubmitting, className: "px-4 py-2 text-sm font-medium text-white bg-accent-500 rounded-lg hover:bg-accent-600 disabled:opacity-40 disabled:cursor-not-allowed transition-all", children: isSubmitting ? 'Submitting...' : isLastStep ? 'Complete' : 'Next' })] })] }));
 }
 
 function InfiniteScroll({ loadMore, hasMore, loading = false, children, threshold = 200, loader, scrollContainer, reverse = false, className = '', }) {
@@ -7283,6 +7292,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 +7308,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 +7355,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 +7367,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 +7386,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 +7404,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) {