@papernote/ui 1.10.9 → 1.10.10

package/dist/components/Progress.d.ts

@@ -15,8 +15,12 @@ export interface ProgressProps {
     striped?: boolean;
     /** Animated stripes (requires striped=true) */
     animated?: boolean;
+    /** Milestone markers (array of values 0-100) */
+    milestones?: number[];
+    /** Show labels at milestone markers */
+    showMilestoneLabels?: boolean;
     /** Class name for container */
     className?: string;
 }
-export default function Progress({ value, variant, size, color, showLabel, label, striped, animated, className, }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+export default function Progress({ value, variant, size, color, showLabel, label, striped, animated, milestones, showMilestoneLabels, className, }: ProgressProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Progress.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/components/Progress.tsx"],"names":[],"mappings":"AACA,MAAM,WAAW,aAAa;IAC5B,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IACzC,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACpD,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,OAAkB,EAClB,IAAW,EACX,KAAiB,EACjB,SAAiB,EACjB,KAAK,EACL,OAAe,EACf,QAAgB,EAChB,SAAc,GACf,EAAE,aAAa,2CA8Hf"}
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/components/Progress.tsx"],"names":[],"mappings":"AACA,MAAM,WAAW,aAAa;IAC5B,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IACzC,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACpD,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,uCAAuC;IACvC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,OAAkB,EAClB,IAAW,EACX,KAAiB,EACjB,SAAiB,EACjB,KAAK,EACL,OAAe,EACf,QAAgB,EAChB,UAAU,EACV,mBAA2B,EAC3B,SAAc,GACf,EAAE,aAAa,2CAuPf"}

package/dist/index.d.ts

@@ -3550,10 +3550,14 @@ interface ProgressProps {
     striped?: boolean;
     /** Animated stripes (requires striped=true) */
     animated?: boolean;
+    /** Milestone markers (array of values 0-100) */
+    milestones?: number[];
+    /** Show labels at milestone markers */
+    showMilestoneLabels?: boolean;
     /** Class name for container */
     className?: string;
 }
-declare function Progress({ value, variant, size, color, showLabel, label, striped, animated, className, }: ProgressProps): react_jsx_runtime.JSX.Element;
+declare function Progress({ value, variant, size, color, showLabel, label, striped, animated, milestones, showMilestoneLabels, className, }: ProgressProps): react_jsx_runtime.JSX.Element;
 
 interface AccordionItem {
     id: string;

package/dist/index.esm.js

@@ -9486,7 +9486,7 @@ function ComingSoon({ title, description, icon, features = [], estimatedDate })
     return (jsx("div", { className: "p-6 max-w-4xl mx-auto", children: jsxs("div", { className: "bg-paper-50 dark:bg-paper-800 rounded-lg shadow-sm border border-paper-200 dark:border-paper-700 p-8", children: [jsxs("div", { className: "flex items-start gap-4 mb-6", children: [jsx("div", { className: "p-3 bg-primary-100 dark:bg-primary-900 rounded-lg", children: icon || jsx(FileText, { className: "h-8 w-8 text-primary-600 dark:text-primary-400" }) }), jsxs("div", { className: "flex-1", children: [jsx("h1", { className: "text-2xl font-bold text-ink-900 dark:text-ink-100 mb-2", children: title }), jsx("p", { className: "text-base text-ink-600 dark:text-ink-400", children: description })] })] }), jsx("div", { className: "mb-6", children: jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-2 bg-warning-100 dark:bg-warning-900 rounded-full", children: [jsx(AlertCircle, { className: "h-4 w-4 text-warning-700 dark:text-warning-300" }), jsx("span", { className: "text-sm font-medium text-warning-700 dark:text-warning-300", children: "Coming Soon - Under Development" })] }) }), features.length > 0 && (jsxs("div", { className: "mb-6", children: [jsxs("h2", { className: "text-lg font-semibold text-ink-900 dark:text-ink-100 mb-3 flex items-center gap-2", children: [jsx(TrendingUp, { className: "h-5 w-5" }), "Planned Features"] }), jsx("ul", { className: "space-y-2", children: features.map((feature, index) => (jsxs("li", { className: "flex items-start gap-2 text-ink-600 dark:text-ink-400", children: [jsx("span", { className: "text-primary-500 mt-1", children: "\u2022" }), jsx("span", { children: feature })] }, index))) })] })), estimatedDate && (jsx("div", { className: "pt-6 border-t border-paper-300 dark:border-paper-600", children: jsxs("div", { className: "flex items-center gap-2 text-sm text-ink-600 dark:text-ink-400", children: [jsx(Calendar$1, { className: "h-4 w-4" }), jsxs("span", { children: [jsx("span", { className: "font-medium", children: "Estimated Release:" }), " ", estimatedDate] })] }) })), jsx("div", { className: "mt-6 p-4 bg-paper-100 dark:bg-paper-700 rounded", children: jsxs("p", { className: "text-sm text-ink-600 dark:text-ink-400", children: [jsx("span", { className: "font-medium", children: "Need this feature sooner?" }), " Contact your administrator to discuss prioritization."] }) })] }) }));
 }
 
-function Progress({ value, variant = 'linear', size = 'md', color = 'primary', showLabel = false, label, striped = false, animated = false, className = '', }) {
+function Progress({ value, variant = 'linear', size = 'md', color = 'primary', showLabel = false, label, striped = false, animated = false, milestones, showMilestoneLabels = false, className = '', }) {
     // Clamp value between 0 and 100
     const clampedValue = Math.min(100, Math.max(0, value));
     const colorClasses = {
@@ -9510,24 +9510,43 @@ function Progress({ value, variant = 'linear', size = 'md', color = 'primary', s
             md: 'h-2',
             lg: 'h-3',
         };
-        return (jsxs("div", { className: `w-full ${className}`, children: [jsx("div", { className: `relative w-full rounded-full overflow-hidden ${bgColorClasses[color]} ${heightClasses[size]}`, children: jsx("div", { className: `
-              h-full transition-all duration-300 ease-out
-              ${colorClasses[color]}
-              ${striped ? 'bg-striped' : ''}
-              ${animated && striped ? 'animate-striped' : ''}
-            `, style: {
-                            width: `${clampedValue}%`,
-                            backgroundImage: striped ? 'linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent)' : undefined,
-                            backgroundSize: striped ? '1rem 1rem' : undefined,
-                        }, role: "progressbar", "aria-valuenow": clampedValue, "aria-valuemin": 0, "aria-valuemax": 100 }) }), (showLabel || label) && (jsx("p", { className: "text-xs text-ink-600 mt-1", children: label || `${Math.round(clampedValue)}%` }))] }));
+        const tickSizes = {
+            sm: { height: 8, width: 2 },
+            md: { height: 12, width: 2 },
+            lg: { height: 16, width: 3 },
+        };
+        // Sort and clamp milestones
+        const sortedMilestones = milestones
+            ? [...milestones].map(m => Math.min(100, Math.max(0, m))).sort((a, b) => a - b)
+            : [];
+        return (jsxs("div", { className: `w-full ${className}`, children: [jsxs("div", { className: "relative", children: [jsx("div", { className: `relative w-full rounded-full overflow-hidden ${bgColorClasses[color]} ${heightClasses[size]}`, children: jsx("div", { className: `
+                h-full transition-all duration-300 ease-out
+                ${colorClasses[color]}
+                ${striped ? 'bg-striped' : ''}
+                ${animated && striped ? 'animate-striped' : ''}
+              `, style: {
+                                    width: `${clampedValue}%`,
+                                    backgroundImage: striped ? 'linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent)' : undefined,
+                                    backgroundSize: striped ? '1rem 1rem' : undefined,
+                                }, role: "progressbar", "aria-valuenow": clampedValue, "aria-valuemin": 0, "aria-valuemax": 100 }) }), sortedMilestones.length > 0 && (jsx("div", { className: "absolute inset-0 pointer-events-none", children: sortedMilestones.map((milestone) => (jsx("div", { className: "absolute flex flex-col items-center", style: {
+                                    left: `${milestone}%`,
+                                    top: '50%',
+                                    transform: 'translate(-50%, -50%)',
+                                }, children: jsx("div", { className: `rounded-full ${milestone <= clampedValue ? 'bg-ink-700' : 'bg-ink-400'}`, style: {
+                                        width: tickSizes[size].width,
+                                        height: tickSizes[size].height,
+                                    } }) }, milestone))) }))] }), showMilestoneLabels && sortedMilestones.length > 0 && (jsx("div", { className: "relative w-full mt-1", style: { height: '1rem' }, children: sortedMilestones.map((milestone) => (jsxs("span", { className: "absolute text-xs text-ink-500", style: {
+                            left: `${milestone}%`,
+                            transform: 'translateX(-50%)',
+                        }, children: [milestone, "%"] }, milestone))) })), (showLabel || label) && !showMilestoneLabels && (jsx("p", { className: "text-xs text-ink-600 mt-1", children: label || `${Math.round(clampedValue)}%` }))] }));
     }
     // Circular progress
     const sizeValues = {
-        sm: { size: 40, stroke: 3, fontSize: 'text-xs' },
-        md: { size: 60, stroke: 4, fontSize: 'text-sm' },
-        lg: { size: 80, stroke: 5, fontSize: 'text-base' },
+        sm: { size: 40, stroke: 3, fontSize: 'text-xs', dotSize: 4, labelOffset: 14 },
+        md: { size: 60, stroke: 4, fontSize: 'text-sm', dotSize: 5, labelOffset: 18 },
+        lg: { size: 80, stroke: 5, fontSize: 'text-base', dotSize: 6, labelOffset: 22 },
     };
-    const { size: svgSize, stroke: strokeWidth, fontSize } = sizeValues[size];
+    const { size: svgSize, stroke: strokeWidth, fontSize, dotSize, labelOffset } = sizeValues[size];
     const radius = (svgSize - strokeWidth) / 2;
     const circumference = 2 * Math.PI * radius;
     const offset = circumference - (clampedValue / 100) * circumference;
@@ -9543,7 +9562,44 @@ function Progress({ value, variant = 'linear', size = 'md', color = 'primary', s
         warning: 'stroke-warning-100',
         error: 'stroke-error-100',
     };
-    return (jsx("div", { className: `inline-flex flex-col items-center ${className}`, children: jsxs("div", { className: "relative", style: { width: svgSize, height: svgSize }, children: [jsxs("svg", { width: svgSize, height: svgSize, className: "transform -rotate-90", children: [jsx("circle", { cx: svgSize / 2, cy: svgSize / 2, r: radius, fill: "none", strokeWidth: strokeWidth, className: strokeBgColorClasses[color] }), jsx("circle", { cx: svgSize / 2, cy: svgSize / 2, r: radius, fill: "none", strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", className: `${strokeColorClasses[color]} transition-all duration-300 ease-out` })] }), (showLabel || label) && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx("span", { className: `font-medium text-ink-900 ${fontSize}`, children: label || `${Math.round(clampedValue)}%` }) }))] }) }));
+    // Sort and clamp milestones for circular
+    const sortedMilestones = milestones
+        ? [...milestones].map(m => Math.min(100, Math.max(0, m))).sort((a, b) => a - b)
+        : [];
+    // Calculate position on circle for a given percentage
+    // SVG is rotated -90deg so 0% is at top
+    const getMilestonePosition = (percentage, r) => {
+        const angle = (percentage / 100) * 2 * Math.PI - Math.PI / 2;
+        return {
+            x: svgSize / 2 + r * Math.cos(angle),
+            y: svgSize / 2 + r * Math.sin(angle),
+        };
+    };
+    // Size for the container when labels are shown
+    const containerSize = showMilestoneLabels && sortedMilestones.length > 0
+        ? svgSize + labelOffset * 2
+        : svgSize;
+    return (jsx("div", { className: `inline-flex flex-col items-center ${className}`, children: jsxs("div", { className: "relative", style: { width: containerSize, height: containerSize }, children: [jsxs("svg", { width: svgSize, height: svgSize, style: {
+                        position: 'absolute',
+                        left: showMilestoneLabels && sortedMilestones.length > 0 ? labelOffset : 0,
+                        top: showMilestoneLabels && sortedMilestones.length > 0 ? labelOffset : 0,
+                    }, children: [jsx("circle", { cx: svgSize / 2, cy: svgSize / 2, r: radius, fill: "none", strokeWidth: strokeWidth, className: strokeBgColorClasses[color] }), jsx("circle", { cx: svgSize / 2, cy: svgSize / 2, r: radius, fill: "none", strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", className: `${strokeColorClasses[color]} transition-all duration-300 ease-out`, style: { transform: 'rotate(-90deg)', transformOrigin: 'center' } }), sortedMilestones.map((milestone) => {
+                            const pos = getMilestonePosition(milestone, radius);
+                            return (jsx("circle", { cx: pos.x, cy: pos.y, r: dotSize / 2, className: milestone <= clampedValue ? 'fill-ink-700' : 'fill-ink-400' }, milestone));
+                        })] }), (showLabel || label) && (jsx("div", { className: "absolute flex items-center justify-center", style: {
+                        left: showMilestoneLabels && sortedMilestones.length > 0 ? labelOffset : 0,
+                        top: showMilestoneLabels && sortedMilestones.length > 0 ? labelOffset : 0,
+                        width: svgSize,
+                        height: svgSize,
+                    }, children: jsx("span", { className: `font-medium text-ink-900 ${fontSize}`, children: label || `${Math.round(clampedValue)}%` }) })), showMilestoneLabels && sortedMilestones.map((milestone) => {
+                    const pos = getMilestonePosition(milestone, radius + labelOffset);
+                    return (jsxs("span", { className: "absolute text-xs text-ink-500", style: {
+                            left: pos.x + labelOffset - 12,
+                            top: pos.y + labelOffset - 6,
+                            width: 24,
+                            textAlign: 'center',
+                        }, children: [milestone, "%"] }, milestone));
+                })] }) }));
 }
 
 function Accordion({ items, allowMultiple = false, defaultOpen = [], onChange, expandIcon, collapseIcon, showStepNumbers = false, }) {