@papernote/ui 2.0.2 → 2.0.4

package/dist/components/FilterBar.d.ts

@@ -1,7 +1,7 @@
 export interface FilterConfig {
     key: string;
     label: string;
-    type: 'text' | 'search' | 'select' | 'date' | 'number' | 'boolean' | 'dateRange' | 'toggle' | 'multiSelect';
+    type: "text" | "search" | "select" | "date" | "number" | "boolean" | "dateRange" | "toggle" | "switch" | "multiSelect";
     placeholder?: string;
     options?: Array<{
         label: string;

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

@@ -1 +1 @@
-{"version":3,"file":"FilterBar.d.ts","sourceRoot":"","sources":["../../src/components/FilterBar.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,CAAC;IAC5G,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CACpD;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAc,EACd,OAAO,EACP,eAAuB,GACxB,EAAE,cAAc,kDA0PhB"}
+{"version":3,"file":"FilterBar.d.ts","sourceRoot":"","sources":["../../src/components/FilterBar.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EACA,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CACpD;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAc,EACd,OAAO,EACP,eAAuB,GACxB,EAAE,cAAc,kDA6ThB"}

package/dist/index.d.ts

@@ -1065,7 +1065,7 @@ declare function FormControl({ label, required, error, helperText, children, cla
 interface FilterConfig {
     key: string;
     label: string;
-    type: 'text' | 'search' | 'select' | 'date' | 'number' | 'boolean' | 'dateRange' | 'toggle' | 'multiSelect';
+    type: "text" | "search" | "select" | "date" | "number" | "boolean" | "dateRange" | "toggle" | "switch" | "multiSelect";
     placeholder?: string;
     options?: Array<{
         label: string;

package/dist/index.esm.js

@@ -2745,7 +2745,7 @@ function FormControl({ label, required = false, error, helperText, children, cla
     return (jsxs("div", { className: `${className}`, children: [label && (jsxs("label", { htmlFor: htmlFor, className: "block text-sm font-medium text-ink-700 mb-1", children: [label, required && jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsx("div", { children: children }), (error || helperText) && (jsx("p", { className: `mt-1 text-xs ${error ? 'text-error-600' : 'text-ink-500'}`, children: error || helperText }))] }));
 }
 
-function FilterBar({ filters, values, onChange, className = '', onClear, showClearButton = false, }) {
+function FilterBar({ filters, values, onChange, className = "", onClear, showClearButton = false, }) {
     const handleFilterChange = (key, value) => {
         onChange({
             ...values,
@@ -2759,16 +2759,19 @@ function FilterBar({ filters, values, onChange, className = '', onClear, showCle
         else {
             // Default clear: set all values to null/empty
             const clearedValues = {};
-            filters.forEach(filter => {
-                if (filter.type === 'text' || filter.type === 'search') {
-                    clearedValues[filter.key] = '';
+            filters.forEach((filter) => {
+                if (filter.type === "text" || filter.type === "search") {
+                    clearedValues[filter.key] = "";
                 }
-                else if (filter.type === 'dateRange') {
+                else if (filter.type === "dateRange") {
                     clearedValues[filter.key] = { from: undefined, to: undefined };
                 }
-                else if (filter.type === 'multiSelect') {
+                else if (filter.type === "multiSelect") {
                     clearedValues[filter.key] = [];
                 }
+                else if (filter.type === "switch") {
+                    clearedValues[filter.key] = false;
+                }
                 else {
                     clearedValues[filter.key] = null;
                 }
@@ -2779,51 +2782,70 @@ function FilterBar({ filters, values, onChange, className = '', onClear, showCle
     const renderFilter = (filter) => {
         const value = values[filter.key];
         switch (filter.type) {
-            case 'text':
-                return (jsx(Input, { type: "text", placeholder: filter.placeholder || `Filter by ${filter.label}`, value: value || '', onChange: (e) => handleFilterChange(filter.key, e.target.value) }));
-            case 'select': {
+            case "text":
+                return (jsx(Input, { type: "text", placeholder: filter.placeholder || `Filter by ${filter.label}`, value: value || "", onChange: (e) => handleFilterChange(filter.key, e.target.value) }));
+            case "select": {
                 const selectOptions = [
-                    { value: '', label: `All ${filter.label}` },
-                    ...(filter.options?.map(opt => ({
+                    { value: "", label: `All ${filter.label}` },
+                    ...(filter.options?.map((opt) => ({
                         value: String(opt.value),
                         label: opt.label,
                     })) || []),
                 ];
-                return (jsx(Select, { options: selectOptions, value: String(value || ''), onChange: (newValue) => handleFilterChange(filter.key, newValue || null) }));
+                return (jsx(Select, { options: selectOptions, value: String(value || ""), onChange: (newValue) => handleFilterChange(filter.key, newValue || null) }));
             }
-            case 'date':
-                return (jsx("input", { type: "date", value: value || '', onChange: (e) => handleFilterChange(filter.key, e.target.value), className: "input" }));
-            case 'number':
-                return (jsx("input", { type: "number", placeholder: filter.placeholder || `Filter by ${filter.label}`, value: value !== null && value !== undefined ? String(value) : '', onChange: (e) => handleFilterChange(filter.key, e.target.value ? Number(e.target.value) : null), className: "input" }));
-            case 'boolean': {
+            case "date":
+                return (jsx("input", { type: "date", value: value || "", onChange: (e) => handleFilterChange(filter.key, e.target.value), className: "input" }));
+            case "number":
+                return (jsx("input", { type: "number", placeholder: filter.placeholder || `Filter by ${filter.label}`, value: value !== null && value !== undefined ? String(value) : "", onChange: (e) => handleFilterChange(filter.key, e.target.value ? Number(e.target.value) : null), className: "input" }));
+            case "boolean": {
                 const boolOptions = [
-                    { value: '', label: 'All' },
-                    { value: 'true', label: 'Yes' },
-                    { value: 'false', label: 'No' },
+                    { value: "", label: "All" },
+                    { value: "true", label: "Yes" },
+                    { value: "false", label: "No" },
                 ];
-                return (jsx(Select, { options: boolOptions, value: value === null || value === undefined ? '' : String(value), onChange: (newValue) => handleFilterChange(filter.key, newValue === '' ? null : newValue === 'true') }));
+                return (jsx(Select, { options: boolOptions, value: value === null || value === undefined ? "" : String(value), onChange: (newValue) => handleFilterChange(filter.key, newValue === "" ? null : newValue === "true") }));
             }
-            case 'search':
-                return (jsxs("div", { className: "relative", children: [jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: jsx(Search, { className: "h-4 w-4 text-ink-400" }) }), jsx("input", { type: "text", placeholder: filter.placeholder || `Search ${filter.label}...`, value: value || '', onChange: (e) => handleFilterChange(filter.key, e.target.value), className: "input pl-9" })] }));
-            case 'dateRange': {
+            case "search":
+                return (jsxs("div", { className: "relative", children: [jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: jsx(Search, { className: "h-4 w-4 text-ink-400" }) }), jsx("input", { type: "text", placeholder: filter.placeholder || `Search ${filter.label}...`, value: value || "", onChange: (e) => handleFilterChange(filter.key, e.target.value), className: "input pl-9" })] }));
+            case "dateRange": {
                 const rangeValue = value || {};
-                return (jsxs("div", { className: "flex items-center gap-2", children: [jsx("input", { type: "date", value: rangeValue.from || '', onChange: (e) => handleFilterChange(filter.key, { ...rangeValue, from: e.target.value || undefined }), className: "input text-sm", "aria-label": `${filter.label} from` }), jsx("span", { className: "text-ink-400 text-xs", children: "to" }), jsx("input", { type: "date", value: rangeValue.to || '', onChange: (e) => handleFilterChange(filter.key, { ...rangeValue, to: e.target.value || undefined }), className: "input text-sm", "aria-label": `${filter.label} to` })] }));
-            }
-            case 'toggle': {
+                return (jsxs("div", { className: "flex items-center gap-2", children: [jsx("input", { type: "date", value: rangeValue.from || "", onChange: (e) => handleFilterChange(filter.key, {
+                                ...rangeValue,
+                                from: e.target.value || undefined,
+                            }), className: "input text-sm", "aria-label": `${filter.label} from` }), jsx("span", { className: "text-ink-400 text-xs", children: "to" }), jsx("input", { type: "date", value: rangeValue.to || "", onChange: (e) => handleFilterChange(filter.key, {
+                                ...rangeValue,
+                                to: e.target.value || undefined,
+                            }), className: "input text-sm", "aria-label": `${filter.label} to` })] }));
+            }
+            case "toggle": {
                 const toggleOptions = [
-                    { value: '', label: 'All' },
-                    { value: 'true', label: 'Yes' },
-                    { value: 'false', label: 'No' },
+                    { value: "", label: "All" },
+                    { value: "true", label: "Yes" },
+                    { value: "false", label: "No" },
                 ];
-                const currentVal = value === null || value === undefined ? '' : String(value);
-                return (jsx("div", { className: "flex rounded-lg border border-paper-300 overflow-hidden", role: "group", children: toggleOptions.map((opt) => (jsx("button", { type: "button", onClick: () => handleFilterChange(filter.key, opt.value === '' ? null : opt.value === 'true'), className: `px-3 py-1.5 text-xs font-medium transition-colors ${currentVal === opt.value
-                            ? 'bg-accent-500 text-white'
-                            : 'bg-white text-ink-600 hover:bg-paper-50'} ${opt.value !== '' ? 'border-l border-paper-300' : ''}`, children: opt.label }, opt.value))) }));
-            }
-            case 'multiSelect': {
+                const currentVal = value === null || value === undefined ? "" : String(value);
+                return (jsx("div", { className: "flex rounded-lg border border-paper-300 overflow-hidden", role: "group", children: toggleOptions.map((opt) => (jsx("button", { type: "button", onClick: () => handleFilterChange(filter.key, opt.value === "" ? null : opt.value === "true"), className: `px-3 py-1.5 text-xs font-medium transition-colors ${currentVal === opt.value
+                            ? "bg-accent-500 text-white"
+                            : "bg-white text-ink-600 hover:bg-paper-50"} ${opt.value !== "" ? "border-l border-paper-300" : ""}`, children: opt.label }, opt.value))) }));
+            }
+            case "switch": {
+                // Single binary toggle — use when the filter is naturally on/off
+                // (e.g. "Mine only", "Archived"), unlike `boolean` / `toggle` which
+                // present an All/Yes/No tri-state. Stored value is a plain boolean.
+                const checked = value === true;
+                return (jsxs("button", { type: "button", role: "switch", "aria-checked": checked, onClick: () => handleFilterChange(filter.key, !checked), className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2 ${checked ? "bg-accent-500" : "bg-paper-300"}`, children: [jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${checked ? "translate-x-6" : "translate-x-1"}` }), jsx("span", { className: "sr-only", children: filter.label })] }));
+            }
+            case "multiSelect": {
                 const selectedValues = Array.isArray(value) ? value : [];
                 const msOptions = filter.options || [];
-                return (jsxs("div", { className: "relative", children: [jsx(Select, { options: [{ value: '', label: `All ${filter.label}` }, ...msOptions.map(o => ({ value: String(o.value), label: o.label }))], value: "", onChange: (newValue) => {
+                return (jsxs("div", { className: "relative", children: [jsx(Select, { options: [
+                                { value: "", label: `All ${filter.label}` },
+                                ...msOptions.map((o) => ({
+                                    value: String(o.value),
+                                    label: o.label,
+                                })),
+                            ], value: "", onChange: (newValue) => {
                                 if (!newValue) {
                                     handleFilterChange(filter.key, []);
                                 }
@@ -2831,8 +2853,8 @@ function FilterBar({ filters, values, onChange, className = '', onClear, showCle
                                     handleFilterChange(filter.key, [...selectedValues, newValue]);
                                 }
                             } }), selectedValues.length > 0 && (jsx("div", { className: "flex flex-wrap gap-1 mt-1", children: selectedValues.map((sv) => {
-                                const opt = msOptions.find(o => String(o.value) === sv);
-                                return (jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-accent-100 text-accent-700 rounded-full", children: [opt?.label || sv, jsx("button", { type: "button", onClick: () => handleFilterChange(filter.key, selectedValues.filter(v => v !== sv)), className: "hover:text-accent-900", children: jsx(X, { className: "h-3 w-3" }) })] }, sv));
+                                const opt = msOptions.find((o) => String(o.value) === sv);
+                                return (jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-accent-100 text-accent-700 rounded-full", children: [opt?.label || sv, jsx("button", { type: "button", onClick: () => handleFilterChange(filter.key, selectedValues.filter((v) => v !== sv)), className: "hover:text-accent-900", children: jsx(X, { className: "h-3 w-3" }) })] }, sv));
                             }) }))] }));
             }
             default:
@@ -15821,44 +15843,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;
@@ -15867,7 +15897,7 @@ function requireHelpers () {
 	if (hasRequiredHelpers) return helpers;
 	hasRequiredHelpers = 1;
 	const FormulaError = requireError();
-	const Collection = collection;
+	const Collection = requireCollection();
 
 	const Types = {
 	    NUMBER: 0,
@@ -25521,7 +25551,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 = {
@@ -37149,7 +37179,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;
 
@@ -37911,7 +37941,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 {