@papernote/ui 1.10.1 → 1.10.3

package/dist/components/Badge.d.ts

@@ -10,6 +10,10 @@ export interface BadgeProps {
     dot?: boolean;
     /** Use pill shape (more rounded, compact padding) for inline use */
     pill?: boolean;
+    /** Truncate text with ellipsis if it overflows (requires maxWidth) */
+    truncate?: boolean;
+    /** Maximum width for the badge (useful with truncate), e.g. '150px' or '10rem' */
+    maxWidth?: string;
 }
-export default function Badge({ children, variant, size, icon, onRemove, className, dot, pill, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export default function Badge({ children, variant, size, icon, onRemove, className, dot, pill, truncate, maxWidth, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAC/D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,QAAQ,EACR,OAAmB,EACnB,IAAW,EACX,IAAI,EACJ,QAAQ,EACR,SAAc,EACd,GAAW,EACX,IAAY,GACb,EAAE,UAAU,2CAiFZ"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAC/D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,QAAQ,EACR,OAAmB,EACnB,IAAW,EACX,IAAI,EACJ,QAAQ,EACR,SAAc,EACd,GAAW,EACX,IAAY,EACZ,QAAgB,EAChB,QAAQ,GACT,EAAE,UAAU,2CAmFZ"}

package/dist/components/Modal.d.ts

@@ -86,7 +86,7 @@ export interface ModalProps {
  * </Modal>
  * ```
  */
-export default function Modal({ isOpen, onClose, title, children, size, showCloseButton, animation, scrollable, maxHeight, mobileMode, mobileHeight, mobileShowHandle, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+export default function Modal({ isOpen, onClose, title, children, size, showCloseButton, animation, scrollable, maxHeight, mobileMode, mobileHeight, mobileShowHandle, }: ModalProps): React.ReactPortal | null;
 export declare function ModalFooter({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAKxD,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;IAClE,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,yHAAyH;IACzH,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IACxC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC3C,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAW,EACX,eAAsB,EACtB,SAAmB,EACnB,UAAkB,EAClB,SAAS,EACT,UAAmB,EACnB,YAAmB,EACnB,gBAAuB,GACxB,EAAE,UAAU,kDA+HZ;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAMtE"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAMxD,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;IAClE,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,yHAAyH;IACzH,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IACxC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC3C,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAW,EACX,eAAsB,EACtB,SAAmB,EACnB,UAAkB,EAClB,SAAS,EACT,UAAmB,EACnB,YAAmB,EACnB,gBAAuB,GACxB,EAAE,UAAU,4BAkIZ;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAMtE"}

package/dist/index.d.ts

@@ -1451,7 +1451,7 @@ interface ModalProps {
  * </Modal>
  * ```
  */
-declare function Modal({ isOpen, onClose, title, children, size, showCloseButton, animation, scrollable, maxHeight, mobileMode, mobileHeight, mobileShowHandle, }: ModalProps): react_jsx_runtime.JSX.Element | null;
+declare function Modal({ isOpen, onClose, title, children, size, showCloseButton, animation, scrollable, maxHeight, mobileMode, mobileHeight, mobileShowHandle, }: ModalProps): React__default.ReactPortal | null;
 declare function ModalFooter({ children }: {
     children: React__default.ReactNode;
 }): react_jsx_runtime.JSX.Element;
@@ -3251,8 +3251,12 @@ interface BadgeProps {
     dot?: boolean;
     /** Use pill shape (more rounded, compact padding) for inline use */
     pill?: boolean;
+    /** Truncate text with ellipsis if it overflows (requires maxWidth) */
+    truncate?: boolean;
+    /** Maximum width for the badge (useful with truncate), e.g. '150px' or '10rem' */
+    maxWidth?: string;
 }
-declare function Badge({ children, variant, size, icon, onRemove, className, dot, pill, }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge({ children, variant, size, icon, onRemove, className, dot, pill, truncate, maxWidth, }: BadgeProps): react_jsx_runtime.JSX.Element;
 
 interface AvatarProps {
     /** User's first name (for initials) */

package/dist/index.esm.js

@@ -3453,12 +3453,13 @@ function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton
         return null;
     // Render as BottomSheet on mobile
     if (useBottomSheet) {
-        return (jsx(BottomSheet, { isOpen: isOpen, onClose: onClose, title: title, height: mobileHeight, showHandle: mobileShowHandle, showCloseButton: showCloseButton, children: children }));
+        return createPortal(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 (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: 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: [jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsx(X, { className: "h-5 w-5" }) }))] }), jsx("div", { className: `px-6 py-4 ${scrollable || maxHeight ? 'overflow-y-auto' : ''}`, style: {
+    const modalContent = (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: 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: [jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsx(X, { className: "h-5 w-5" }) }))] }), jsx("div", { className: `px-6 py-4 ${scrollable || maxHeight ? 'overflow-y-auto' : ''}`, style: {
                         maxHeight: maxHeight || (scrollable ? 'calc(100vh - 200px)' : undefined),
                     }, children: children })] }) }));
+    return createPortal(modalContent, document.body);
 }
 function ModalFooter({ children }) {
     return (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 }));
@@ -8171,7 +8172,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',
@@ -8218,12 +8219,13 @@ function Badge({ children, variant = 'neutral', size = 'md', icon, onRemove, cla
     }
     // Regular badge
     return (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 && jsx("span", { className: iconSize[size], children: icon }), jsx("span", { children: children }), onRemove && (jsx("button", { onClick: onRemove, className: "ml-1 hover:opacity-70 transition-opacity", "aria-label": "Remove badge", children: jsx(X, { className: iconSize[size] }) }))] }));
+      `, style: maxWidth ? { maxWidth } : undefined, children: [icon && jsx("span", { className: `${iconSize[size]} flex-shrink-0`, children: icon }), jsx("span", { className: truncate ? 'truncate' : '', children: children }), onRemove && (jsx("button", { onClick: onRemove, className: "ml-1 hover:opacity-70 transition-opacity flex-shrink-0", "aria-label": "Remove badge", children: jsx(X, { className: iconSize[size] }) }))] }));
 }
 
 const TabsContext = createContext$1(null);