@papernote/ui 1.10.1 → 1.10.3

package/dist/index.js

@@ -3473,12 +3473,13 @@ function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton
         return null;
     // Render as BottomSheet on mobile
     if (useBottomSheet) {
-        return (jsxRuntime.jsx(BottomSheet, { isOpen: isOpen, onClose: onClose, title: title, height: mobileHeight, showHandle: mobileShowHandle, showCloseButton: showCloseButton, children: children }));
+        return reactDom.createPortal(jsxRuntime.jsx(BottomSheet, { isOpen: isOpen, onClose: onClose, title: title, height: mobileHeight, showHandle: mobileShowHandle, showCloseButton: showCloseButton, children: children }), document.body);
     }
     // Render as standard modal on desktop
-    return (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onMouseDown: handleBackdropMouseDown, onClick: handleBackdropClick, children: jsxRuntime.jsxs("div", { ref: modalRef, className: `${sizeClasses$8[size]} w-full bg-white bg-subtle-grain rounded-xl shadow-2xl border border-paper-200 ${getAnimationClass()}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsxRuntime.jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsxRuntime.jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) }))] }), jsxRuntime.jsx("div", { className: `px-6 py-4 ${scrollable || maxHeight ? 'overflow-y-auto' : ''}`, style: {
+    const modalContent = (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onMouseDown: handleBackdropMouseDown, onClick: handleBackdropClick, children: jsxRuntime.jsxs("div", { ref: modalRef, className: `${sizeClasses$8[size]} w-full bg-white bg-subtle-grain rounded-xl shadow-2xl border border-paper-200 ${getAnimationClass()}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsxRuntime.jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsxRuntime.jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) }))] }), jsxRuntime.jsx("div", { className: `px-6 py-4 ${scrollable || maxHeight ? 'overflow-y-auto' : ''}`, style: {
                         maxHeight: maxHeight || (scrollable ? 'calc(100vh - 200px)' : undefined),
                     }, children: children })] }) }));
+    return reactDom.createPortal(modalContent, document.body);
 }
 function ModalFooter({ children }) {
     return (jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-paper-200 bg-paper-50 -mx-6 -mb-4 mt-4 rounded-b-xl", children: children }));
@@ -8191,7 +8192,7 @@ function Breadcrumbs({ items, showHome = true }) {
             })] }));
 }
 
-function Badge({ children, variant = 'neutral', size = 'md', icon, onRemove, className = '', dot = false, pill = false, }) {
+function Badge({ children, variant = 'neutral', size = 'md', icon, onRemove, className = '', dot = false, pill = false, truncate = false, maxWidth, }) {
     const variantStyles = {
         success: 'bg-success-50 text-success-700 border-success-200',
         warning: 'bg-warning-50 text-warning-700 border-warning-200',
@@ -8238,12 +8239,13 @@ function Badge({ children, variant = 'neutral', size = 'md', icon, onRemove, cla
     }
     // Regular badge
     return (jsxRuntime.jsxs("span", { className: `
-        inline-flex items-center border font-medium
+        inline-flex items-center border font-medium whitespace-nowrap
         ${pill ? 'rounded-full' : 'rounded-full'}
         ${variantStyles[variant]}
         ${pill ? pillSizeStyles[size] : sizeStyles[size]}
+        ${truncate ? 'max-w-full overflow-hidden' : ''}
         ${className}
-      `, children: [icon && jsxRuntime.jsx("span", { className: iconSize[size], children: icon }), jsxRuntime.jsx("span", { children: children }), onRemove && (jsxRuntime.jsx("button", { onClick: onRemove, className: "ml-1 hover:opacity-70 transition-opacity", "aria-label": "Remove badge", children: jsxRuntime.jsx(lucideReact.X, { className: iconSize[size] }) }))] }));
+      `, style: maxWidth ? { maxWidth } : undefined, children: [icon && jsxRuntime.jsx("span", { className: `${iconSize[size]} flex-shrink-0`, children: icon }), jsxRuntime.jsx("span", { className: truncate ? 'truncate' : '', children: children }), onRemove && (jsxRuntime.jsx("button", { onClick: onRemove, className: "ml-1 hover:opacity-70 transition-opacity flex-shrink-0", "aria-label": "Remove badge", children: jsxRuntime.jsx(lucideReact.X, { className: iconSize[size] }) }))] }));
 }
 
 const TabsContext = React.createContext(null);