@papernote/ui 1.11.4 → 1.11.6

package/dist/components/FunnelChart.d.ts

@@ -15,6 +15,8 @@ export interface FunnelChartProps {
     height?: number;
     /** Whether to show conversion rates between stages */
     showConversion?: boolean;
+    /** Label size preset — controls stage name, value, count, and conversion text */
+    labelSize?: 'sm' | 'md' | 'lg';
     /** Click handler for a stage */
     onStageClick?: (stageName: string) => void;
     /** Additional className */
@@ -27,5 +29,5 @@ export interface FunnelChartProps {
  * to its count relative to the first (widest) stage.
  * Shows stage names, counts, values, and optional conversion rates.
  */
-export default function FunnelChart({ stages, height, showConversion, onStageClick, className, }: FunnelChartProps): import("react/jsx-runtime").JSX.Element | null;
+export default function FunnelChart({ stages, height, showConversion, labelSize, onStageClick, className, }: FunnelChartProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=FunnelChart.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FunnelChart.d.ts","sourceRoot":"","sources":["../../src/components/FunnelChart.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,mDAAmD;IACnD,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gCAAgC;IAChC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,MAAY,EACZ,cAAqB,EACrB,YAAY,EACZ,SAAc,GACf,EAAE,gBAAgB,kDAwGlB"}
+{"version":3,"file":"FunnelChart.d.ts","sourceRoot":"","sources":["../../src/components/FunnelChart.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,mDAAmD;IACnD,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iFAAiF;IACjF,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC/B,gCAAgC;IAChC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8BD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,MAAY,EACZ,cAAqB,EACrB,SAAgB,EAChB,YAAY,EACZ,SAAc,GACf,EAAE,gBAAgB,kDAuGlB"}

package/dist/index.d.ts

@@ -4500,6 +4500,8 @@ interface FunnelChartProps {
     height?: number;
     /** Whether to show conversion rates between stages */
     showConversion?: boolean;
+    /** Label size preset — controls stage name, value, count, and conversion text */
+    labelSize?: 'sm' | 'md' | 'lg';
     /** Click handler for a stage */
     onStageClick?: (stageName: string) => void;
     /** Additional className */
@@ -4512,7 +4514,7 @@ interface FunnelChartProps {
  * to its count relative to the first (widest) stage.
  * Shows stage names, counts, values, and optional conversion rates.
  */
-declare function FunnelChart({ stages, height, showConversion, onStageClick, className, }: FunnelChartProps): react_jsx_runtime.JSX.Element | null;
+declare function FunnelChart({ stages, height, showConversion, labelSize, onStageClick, className, }: FunnelChartProps): react_jsx_runtime.JSX.Element | null;
 
 interface DashboardWidget {
     /** Widget unique ID */

package/dist/index.esm.js

@@ -12296,6 +12296,14 @@ const defaultColors = [
     '#f3e8ff', // purple ultra light
 ];
 // =============================================================================
+// Label Size Presets
+// =============================================================================
+const labelSizes = {
+    sm: { name: '9px', value: '8px', count: '10px', conversion: '8px' },
+    md: { name: '11px', value: '10px', count: '12px', conversion: '10px' },
+    lg: { name: '13px', value: '12px', count: '14px', conversion: '12px' },
+};
+// =============================================================================
 // Component
 // =============================================================================
 /**
@@ -12305,9 +12313,10 @@ const defaultColors = [
  * to its count relative to the first (widest) stage.
  * Shows stage names, counts, values, and optional conversion rates.
  */
-function FunnelChart({ stages, height = 300, showConversion = true, onStageClick, className = '', }) {
+function FunnelChart({ stages, height = 300, showConversion = true, labelSize = 'md', onStageClick, className = '', }) {
     if (stages.length === 0)
         return null;
+    const sizes = labelSizes[labelSize];
     const maxCount = Math.max(...stages.map(s => s.count), 1);
     const stageHeight = height / stages.length;
     const svgWidth = 450;
@@ -12335,7 +12344,7 @@ function FunnelChart({ stages, height = 300, showConversion = true, onStageClick
             L ${centerX - bottomWidth / 2} ${y + stageHeight - 2}
             Z
           `;
-                return (jsxs("g", { onClick: () => onStageClick?.(stage.name), style: onStageClick ? { cursor: 'pointer' } : undefined, role: onStageClick ? 'button' : undefined, children: [jsx("path", { d: path, fill: color, opacity: 0.85, className: "transition-opacity hover:opacity-100" }), jsx("text", { x: centerX, y: y + stageHeight / 2 + 1, textAnchor: "middle", dominantBaseline: "middle", className: "fill-white text-xs font-bold", style: { fontSize: '12px' }, children: stage.count.toLocaleString() }), jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 - 6, className: "fill-ink-700 dark:fill-ink-300", style: { fontSize: '11px', fontWeight: 500 }, children: stage.name }), stage.value && (jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 + 8, className: "fill-ink-400", style: { fontSize: '10px' }, children: stage.value })), showConversion && conversionRate !== null && (jsx("g", { children: jsxs("text", { x: centerX - funnelWidth / 2 - 16, y: y + 4, textAnchor: "end", className: "fill-ink-500", style: { fontSize: '10px', fontWeight: 500 }, children: ["\u2193 ", conversionRate, "%"] }) }))] }, stage.name));
+                return (jsxs("g", { onClick: () => onStageClick?.(stage.name), style: onStageClick ? { cursor: 'pointer' } : undefined, role: onStageClick ? 'button' : undefined, children: [jsx("path", { d: path, fill: color, opacity: 0.85, className: "transition-opacity hover:opacity-100" }), jsx("text", { x: centerX, y: y + stageHeight / 2 + 1, textAnchor: "middle", dominantBaseline: "middle", className: "fill-white font-bold", style: { fontSize: sizes.count }, children: stage.count.toLocaleString() }), jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 - 4, className: "fill-ink-700 dark:fill-ink-300", style: { fontSize: sizes.name, fontWeight: 500 }, children: stage.name }), stage.value && (jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 + 7, className: "fill-ink-400", style: { fontSize: sizes.value }, children: stage.value })), showConversion && conversionRate !== null && (jsxs("text", { x: centerX - funnelWidth / 2 - 16, y: y + 4, textAnchor: "end", className: "fill-ink-500", style: { fontSize: sizes.conversion, fontWeight: 500 }, children: ["\u2193 ", conversionRate, "%"] }))] }, stage.name));
             }) }) }));
 }
 
@@ -15672,44 +15681,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;
@@ -15718,7 +15735,7 @@ function requireHelpers () {
 	if (hasRequiredHelpers) return helpers;
 	hasRequiredHelpers = 1;
 	const FormulaError = requireError();
-	const Collection = collection;
+	const Collection = requireCollection();
 
 	const Types = {
 	    NUMBER: 0,
@@ -25372,7 +25389,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 = {
@@ -37000,7 +37017,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;
 
@@ -37762,7 +37779,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 {