@flux-ui/components 3.0.0-next.22 → 3.0.0-next.24

package/src/css/typography.scss

@@ -33,7 +33,7 @@
     }
 
     a:not([class]), a[class=""] {
-        color: var(--primary-7);
+        color: var(--primary-600);
         text-decoration: underline;
         text-decoration-thickness: 1px;
         text-underline-offset: 4px;
@@ -44,14 +44,14 @@
     }
 
     p {
-        line-height: 1.8;
+        line-height: 1.6;
     }
 
     blockquote {
         position: relative;
         margin: 0 0 0 30px;
         padding: 15px 21px;
-        background: var(--gray-2);
+        background: var(--gray-100);
         border-radius: var(--radius);
 
         &::before {
@@ -59,7 +59,7 @@
             top: 5px;
             left: -27px;
             content: '”';
-            color: var(--primary-7);
+            color: var(--primary-600);
             font-size: 39px;
             font-weight: 700;
         }
@@ -71,7 +71,7 @@
 
     img:not([class]) {
         height: unset;
-        border-radius: calc(var(--radius) / 2);
+        border-radius: var(--radius-half);
         outline: 1px solid rgb(0 0 0 / .025);
         outline-offset: -1px;
     }

package/src/css/variables.scss

@@ -8,163 +8,189 @@
 }
 
 @mixin color-light {
-    --gray-0: oklch(100% 0 270);
-    --gray-1: oklch(98% 0.005 270);
-    --gray-2: oklch(95% 0.008 270);
-    --gray-3: oklch(91% 0.012 270);
-    --gray-4: oklch(84% 0.015 270);
-    --gray-5: oklch(72% 0.03 270);
-    --gray-6: oklch(64% 0.035 270);
-    --gray-7: oklch(52% 0.04 270);
-    --gray-8: oklch(40% 0.04 270);
-    --gray-9: oklch(32% 0.028 270);
-    --gray-10: oklch(24% 0.028 270);
-    --gray-11: oklch(16% 0.028 270);
-
-    --primary-0: oklch(99% 0 264);
-    --primary-1: oklch(96% 0.02 264);
-    --primary-2: oklch(92% 0.04 264);
-    --primary-3: oklch(88% 0.06 264);
-    --primary-4: oklch(80% 0.10 264);
-    --primary-5: oklch(72% 0.14 264);
-    --primary-6: oklch(64% 0.18 264);
-    --primary-7: oklch(52% 0.22 264);
-    --primary-8: oklch(40% 0.20 264);
-    --primary-9: oklch(32% 0.18 264);
-    --primary-10: oklch(24% 0.14 264);
-    --primary-11: oklch(16% 0.10 264);
-
-    --danger-0: oklch(99% 0.004 25);
-    --danger-1: oklch(96.9% 0.015 12);
-    --danger-2: oklch(94.1% 0.03 13);
-    --danger-3: oklch(89.2% 0.058 9);
-    --danger-4: oklch(80.6% 0.112 12);
-    --danger-5: oklch(70.6% 0.19 13);
-    --danger-6: oklch(64.3% 0.245 17);
-    --danger-7: oklch(59.7% 0.24 20);
-    --danger-8: oklch(52.5% 0.211 19);
-    --danger-9: oklch(45.9% 0.184 15);
-    --danger-10: oklch(41.1% 0.159 10);
-    --danger-11: oklch(27% 0.105 12);
-
-    --info-0: oklch(99% 0.005 235);
-    --info-1: oklch(97% 0.014 255);
-    --info-2: oklch(93.2% 0.032 256);
-    --info-3: oklch(88.2% 0.059 254);
-    --info-4: oklch(80.7% 0.101 250);
-    --info-5: oklch(70.4% 0.158 254);
-    --info-6: oklch(61.9% 0.207 259);
-    --info-7: oklch(54.7% 0.246 263);
-    --info-8: oklch(48.8% 0.243 264);
-    --info-9: oklch(42.4% 0.198 265);
-    --info-10: oklch(38% 0.145 265);
-    --info-11: oklch(28.1% 0.092 268);
-
-    --success-0: oklch(99% 0.005 145);
-    --success-1: oklch(98.2% 0.018 156);
-    --success-2: oklch(96.2% 0.043 157);
-    --success-3: oklch(92.6% 0.084 156);
-    --success-4: oklch(87% 0.149 155);
-    --success-5: oklch(79.1% 0.209 152);
-    --success-6: oklch(72.9% 0.212 148);
-    --success-7: oklch(63.2% 0.186 147);
-    --success-8: oklch(53% 0.149 149);
-    --success-9: oklch(44.7% 0.119 151);
-    --success-10: oklch(39.3% 0.096 152);
-    --success-11: oklch(26.5% 0.065 153);
-
-    --warning-0: oklch(99% 0.005 85);
-    --warning-1: oklch(98.7% 0.021 95);
-    --warning-2: oklch(96.2% 0.059 96);
-    --warning-3: oklch(92.4% 0.12 96);
-    --warning-4: oklch(87.8% 0.169 92);
-    --warning-5: oklch(82.9% 0.171 81);
-    --warning-6: oklch(77.2% 0.173 62);
-    --warning-7: oklch(66.7% 0.169 60);
-    --warning-8: oklch(55.7% 0.158 58);
-    --warning-9: oklch(47.5% 0.136 56);
-    --warning-10: oklch(41.5% 0.113 54);
-    --warning-11: oklch(27.9% 0.077 52);
+    --gray-25: #ffffff;
+    --gray-50: #f7f8fc;
+    --gray-100: #eceef4;
+    --gray-200: #dee1ea;
+    --gray-300: #c6cad5;
+    --gray-400: #9da4b8;
+    --gray-500: #848ca2;
+    --gray-600: #606881;
+    --gray-700: #3f475e;
+    --gray-800: #2d3241;
+    --gray-900: #1a1f2d;
+    --gray-950: #090c19;
+
+    //--gray-25: #ffffff;
+    //--gray-50: #f9fafb;
+    //--gray-100: #f3f4f6;
+    //--gray-200: #e5e7eb;
+    //--gray-300: #d1d5db;
+    //--gray-400: #9ca3af;
+    //--gray-500: #6b7280;
+    //--gray-600: #4b5563;
+    //--gray-700: #374151;
+    //--gray-800: #1f2937;
+    //--gray-900: #111827;
+    //--gray-950: #030712;
+
+    //--gray-25: #ffffff;
+    //--gray-50: #f9fafb;
+    //--gray-100: #f1f5f9;
+    //--gray-200: #e2e8f0;
+    //--gray-300: #cbd5e1;
+    //--gray-400: #94a3b8;
+    //--gray-500: #64748b;
+    //--gray-600: #475569;
+    //--gray-700: #334155;
+    //--gray-800: #1e293b;
+    //--gray-900: #0f172a;
+    //--gray-950: #020617;
+
+    --primary-25: #fcfcfc;
+    --primary-50: #ebf2ff;
+    --primary-100: #d7e5ff;
+    --primary-200: #c4d8ff;
+    --primary-300: #9dbdff;
+    --primary-400: #77a2fc;
+    --primary-500: #5285f8;
+    --primary-600: #2258e5;
+    --primary-700: #0935b1;
+    --primary-800: #011e8c;
+    --primary-900: #000f60;
+    --primary-950: #000337;
+
+    --danger-25: #fefbfa;
+    --danger-50: #fff1f2;
+    --danger-100: #ffe4e6;
+    --danger-200: #ffccd3;
+    --danger-300: #ffa1ac;
+    --danger-400: #ff637e;
+    --danger-500: #ff2054;
+    --danger-600: #ec003e;
+    --danger-700: #c70036;
+    --danger-800: #a50035;
+    --danger-900: #8b0836;
+    --danger-950: #4d0218;
+
+    --info-25: #f9fcff;
+    --info-50: #eff6ff;
+    --info-100: #dbeafe;
+    --info-200: #bedbff;
+    --info-300: #8dc5ff;
+    --info-400: #52a2ff;
+    --info-500: #297fff;
+    --info-600: #165dfc;
+    --info-700: #1048e6;
+    --info-800: #163cb8;
+    --info-900: #1b398e;
+    --info-950: #162456;
+
+    --success-25: #fafdfa;
+    --success-50: #f0fdf4;
+    --success-100: #dcfce7;
+    --success-200: #b9f8cf;
+    --success-300: #7af1a9;
+    --success-400: #00df73;
+    --success-500: #00c951;
+    --success-600: #08a63d;
+    --success-700: #028236;
+    --success-800: #03662f;
+    --success-900: #0d542a;
+    --success-950: #032e15;
+
+    --warning-25: #fdfcf8;
+    --warning-50: #fffbeb;
+    --warning-100: #fef3c6;
+    --warning-200: #fee685;
+    --warning-300: #ffd22f;
+    --warning-400: #ffb902;
+    --warning-500: #ff9717;
+    --warning-600: #dd7500;
+    --warning-700: #b55500;
+    --warning-800: #934200;
+    --warning-900: #793600;
+    --warning-950: #451b00;
 }
 
 @mixin color-dark {
-    --gray-0: oklch(16% 0.01 270);
-    --gray-1: oklch(19% 0.012 270);
-    --gray-2: oklch(23% 0.015 270);
-    --gray-3: oklch(27% 0.017 270);
-    --gray-4: oklch(35% 0.02 270);
-    --gray-5: oklch(43% 0.03 270);
-    --gray-6: oklch(51% 0.035 270);
-    --gray-7: oklch(63% 0.04 270);
-    --gray-8: oklch(75% 0.04 270);
-    --gray-9: oklch(83% 0.028 270);
-    --gray-10: oklch(91% 0.028 270);
-    --gray-11: oklch(99% 0.028 270);
-
-    --primary-0: oklch(26.8% 0.012 264);
-    --primary-1: oklch(29.3% 0.025 264);
-    --primary-2: oklch(32.4% 0.038 264);
-    --primary-3: oklch(36.4% 0.052 264);
-    --primary-4: oklch(40.6% 0.068 264);
-    --primary-5: oklch(45.3% 0.085 264);
-    --primary-6: oklch(49.8% 0.102 264);
-    --primary-7: oklch(54.9% 0.118 264);
-    --primary-8: oklch(60.9% 0.134 264);
-    --primary-9: oklch(68.5% 0.148 264);
-    --primary-10: oklch(73.9% 0.158 264);
-    --primary-11: oklch(79.5% 0.165 264);
-
-    --danger-0: oklch(26.1% 0.007 346);
-    --danger-1: oklch(29.3% 0.025 4);
-    --danger-2: oklch(32.4% 0.038 8);
-    --danger-3: oklch(36.4% 0.052 12);
-    --danger-4: oklch(40.6% 0.068 15);
-    --danger-5: oklch(45.3% 0.085 17);
-    --danger-6: oklch(49.8% 0.102 18);
-    --danger-7: oklch(54.9% 0.118 19);
-    --danger-8: oklch(60.9% 0.134 18);
-    --danger-9: oklch(68.5% 0.148 16);
-    --danger-10: oklch(73.9% 0.158 14);
-    --danger-11: oklch(79.5% 0.165 12);
-
-    --info-0: oklch(26.8% 0.012 264);
-    --info-1: oklch(29.3% 0.025 260);
-    --info-2: oklch(32.4% 0.038 258);
-    --info-3: oklch(36.4% 0.052 256);
-    --info-4: oklch(40.6% 0.068 254);
-    --info-5: oklch(45.3% 0.085 253);
-    --info-6: oklch(49.8% 0.102 252);
-    --info-7: oklch(54.9% 0.118 252);
-    --info-8: oklch(60.9% 0.134 253);
-    --info-9: oklch(68.5% 0.148 254);
-    --info-10: oklch(73.9% 0.158 254);
-    --info-11: oklch(79.5% 0.165 254);
-
-    --success-0: oklch(25.8% 0.017 156);
-    --success-1: oklch(29.3% 0.025 155);
-    --success-2: oklch(32.4% 0.038 155);
-    --success-3: oklch(36.4% 0.052 155);
-    --success-4: oklch(40.6% 0.068 154);
-    --success-5: oklch(45.3% 0.085 153);
-    --success-6: oklch(49.8% 0.102 152);
-    --success-7: oklch(54.9% 0.118 151);
-    --success-8: oklch(60.9% 0.134 150);
-    --success-9: oklch(68.5% 0.148 149);
-    --success-10: oklch(73.9% 0.158 148);
-    --success-11: oklch(79.5% 0.165 147);
-
-    --warning-0: oklch(27% 0.022 88);
-    --warning-1: oklch(29.3% 0.029 87);
-    --warning-2: oklch(32.4% 0.036 86);
-    --warning-3: oklch(36.4% 0.046 85);
-    --warning-4: oklch(40.6% 0.054 84);
-    --warning-5: oklch(45.3% 0.064 82);
-    --warning-6: oklch(49.8% 0.072 80);
-    --warning-7: oklch(54.9% 0.083 78);
-    --warning-8: oklch(60.9% 0.096 76);
-    --warning-9: oklch(68.5% 0.112 75);
-    --warning-10: oklch(73.9% 0.122 74);
-    --warning-11: oklch(79.5% 0.132 73);
+    --gray-25: #0c0d12;
+    --gray-50: #121419;
+    --gray-100: #1a1d24;
+    --gray-200: #23262f;
+    --gray-300: #363a45;
+    --gray-400: #494f61;
+    --gray-500: #5e657b;
+    --gray-600: #7f88a2;
+    --gray-700: #a4adc8;
+    --gray-800: #c0c7da;
+    --gray-900: #dae1f5;
+    --gray-950: #f4fbff;
+
+    --primary-25: #23262c;
+    --primary-50: #262c39;
+    --primary-100: #2a3448;
+    --primary-200: #303e5a;
+    --primary-300: #36486e;
+    --primary-400: #3e5585;
+    --primary-500: #44619d;
+    --primary-600: #4d6fb6;
+    --primary-700: #5980d3;
+    --primary-800: #6a96f5;
+    --primary-900: #77a7ff;
+    --primary-950: #85b8ff;
+
+    --danger-25: #272325;
+    --danger-50: #37272b;
+    --danger-100: #452c30;
+    --danger-200: #563237;
+    --danger-300: #69393d;
+    --danger-400: #7f4145;
+    --danger-500: #94484c;
+    --danger-600: #ab5155;
+    --danger-700: #c65d64;
+    --danger-800: #e66f7a;
+    --danger-900: #fd7c8c;
+    --danger-950: #ff8ba0;
+
+    --info-25: #23262c;
+    --info-50: #252c39;
+    --info-100: #283447;
+    --info-200: #2c3f59;
+    --info-300: #2e4b6d;
+    --info-400: #315884;
+    --info-500: #33659b;
+    --info-600: #3874b4;
+    --info-700: #4285d1;
+    --info-800: #539cf3;
+    --info-900: #5dadff;
+    --info-950: #6bbfff;
+
+    --success-25: #1d2620;
+    --success-50: #223027;
+    --success-100: #243a2b;
+    --success-200: #264632;
+    --success-300: #285438;
+    --success-400: #2b643f;
+    --success-500: #2d7345;
+    --success-600: #32844c;
+    --success-700: #3b9956;
+    --success-800: #4cb265;
+    --success-900: #59c56f;
+    --success-950: #6ad87b;
+
+    --warning-25: #2b261a;
+    --warning-50: #322b1b;
+    --warning-100: #3c331e;
+    --warning-200: #493c21;
+    --warning-300: #574725;
+    --warning-400: #68532a;
+    --warning-500: #785e30;
+    --warning-600: #8c6b35;
+    --warning-700: #a47a3b;
+    --warning-800: #c28f42;
+    --warning-900: #d89e4a;
+    --warning-950: #efae52;
 }
 
 @mixin defaults {
@@ -172,15 +198,26 @@
     --font-sans: inter-variable, sans-serif;
     --font-serif: serif;
     --font-size: 15px;
-    --radius: 9px;
-
-    --background: var(--gray-2);
-    --foreground: var(--gray-8);
-    --foreground-prominent: var(--gray-10);
-    --foreground-secondary: var(--gray-5);
-
-    --overlay: oklch(from var(--gray-11) l c h / .6);
-    --overlay-secondary: oklch(from var(--gray-11) l c h / .4);
+    --radius: 12px;
+    --radius-double: 24px;
+    --radius-half: 6px;
+
+    --background: var(--gray-50);
+    --foreground: var(--gray-700);
+    --foreground-prominent: var(--gray-900);
+    --foreground-secondary: var(--gray-400);
+    --surface: var(--gray-25);
+    --surface-loader: rgb(from var(--gray-25) r g b / .75);
+    --surface-stroke: var(--gray-200);
+    --surface-stroke-hover: var(--gray-300);
+    --surface-stroke-out: rgb(from var(--gray-900) r g b / .1);
+    --surface-stroke-out-hover: rgb(from var(--gray-950) r g b / .1);
+    --surface-hover: var(--gray-50);
+    --surface-active: var(--gray-100);
+    --surface-disabled: var(--gray-100);
+
+    --overlay: rgb(from var(--gray-950) r g b / .3);
+    --overlay-secondary: rgb(from var(--gray-950) r g b / .15);
 }
 
 @mixin defaults-dark {
@@ -189,21 +226,21 @@
 }
 
 @mixin shadow-light {
-    --shadow-px: 0 1px 1px oklch(from var(--gray-9) l c h / 0.02);
-    --shadow-xs: 0 1px 2px 0 oklch(from var(--gray-9) l c h / 0.02);
-    --shadow-sm: 0 1px 3px oklch(from var(--gray-9) l c h / 0.05), 0 1px 2px -1px oklch(from var(--gray-9) l c h / 0.05);
-    --shadow-md: 0 4px 6px -1px oklch(from var(--gray-9) l c h / 0.05), 0 2px 4px -2px oklch(from var(--gray-9) l c h / 0.05);
-    --shadow-lg: 0 10px 15px -3px oklch(from var(--gray-9) l c h / 0.05), 0 4px 6px -4px oklch(from var(--gray-9) l c h / 0.05);
-    --shadow-xl: 0 20px 25px -5px oklch(from var(--gray-9) l c h / 0.05), 0 8px 10px -6px oklch(from var(--gray-9) l c h / 0.05);
-    --shadow-2xl: 0 25px 50px -12px oklch(from var(--gray-9) l c h / 0.12);
+    --shadow-px: 0 1px 1px rgb(from var(--gray-800) r g b / 0.02);
+    --shadow-xs: 0 1px 2px 0 rgb(from var(--gray-800) r g b / 0.02);
+    --shadow-sm: 0 1px 3px rgb(from var(--gray-800) r g b / 0.05), 0 1px 2px -1px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(from var(--gray-800) r g b / 0.05), 0 2px 4px -2px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-lg: 0 10px 15px -3px rgb(from var(--gray-800) r g b / 0.05), 0 4px 6px -4px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-xl: 0 20px 25px -5px rgb(from var(--gray-800) r g b / 0.05), 0 8px 10px -6px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-2xl: 0 25px 50px -12px rgb(from var(--gray-800) r g b / 0.12);
 }
 
 @mixin shadow-dark {
-    --shadow-px: 0 1px 1px oklch(0 0 0 / 0.1);
-    --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.1);
-    --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.15), 0 1px 2px -1px oklch(0 0 0 / 0.15);
-    --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.15), 0 2px 4px -2px oklch(0 0 0 / 0.15);
-    --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.15), 0 4px 6px -4px oklch(0 0 0 / 0.15);
-    --shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.15), 0 8px 10px -6px oklch(0 0 0 / 0.15);
-    --shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.25);
+    --shadow-px: 0 1px 1px rgb(0 0 0 / 0.1);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.1);
+    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.15), 0 1px 2px -1px rgb(0 0 0 / 0.15);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.15);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.15);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.15);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 }

package/src/data/filter.ts

@@ -1,4 +1,164 @@
-import type { FluxFilterOptionHeader, FluxFilterOptionItem } from '@flux-ui/types';
+import { formatNumber } from '@basmilius/utils';
+import type { FluxFilterBase, FluxFilterDateEntry, FluxFilterDateRangeEntry, FluxFilterOptionEntry, FluxFilterOptionHeader, FluxFilterOptionItem, FluxFilterOptionRow, FluxFilterOptionsEntry, FluxFilterRangeEntry, FluxFilterValue, FluxFilterValueSingle } from '@flux-ui/types';
+import { DateTime } from 'luxon';
+import { useTranslate } from '$flux/composable/private';
+import type { FluxTranslate } from '$flux/data';
+import { createLabelForDateRange } from '$flux/util';
+
+function parseDate(base: FluxFilterBase): FluxFilterDateEntry {
+    return {
+        ...base,
+        type: 'date',
+
+        async getValueLabel(value): Promise<string | null> {
+            if (!DateTime.isDateTime(value)) {
+                return null;
+            }
+
+            return value.toLocaleString({
+                day: 'numeric',
+                month: 'short',
+                year: 'numeric'
+            });
+        }
+    };
+}
+
+function parseDateRange(base: FluxFilterBase): FluxFilterDateRangeEntry {
+    return {
+        ...base,
+        type: 'dateRange',
+
+        async getValueLabel(value): Promise<string | null> {
+            if (!Array.isArray(value) || value.length !== 2) {
+                return null;
+            }
+
+            const [start, end] = value;
+
+            if (!DateTime.isDateTime(start) || !DateTime.isDateTime(end)) {
+                return null;
+            }
+
+            return createLabelForDateRange(start, end);
+        }
+    };
+}
+
+function parseOption(base: FluxFilterBase): FluxFilterOptionEntry {
+    const options = (base as any).options as FluxFilterOptionItem[];
+
+    return {
+        ...base,
+        type: 'option',
+
+        async getValueLabel(value): Promise<string | null> {
+            return options.find(o => o.value === value)?.label ?? null;
+        }
+    };
+}
+
+function parseOptionAsync(base: FluxFilterBase): FluxFilterOptionEntry {
+    const fetchOptions = (base as any).fetchOptions as (ids: FluxFilterValue[]) => Promise<FluxFilterOptionRow[]>;
+
+    return {
+        ...base,
+        type: 'option',
+
+        async getValueLabel(value): Promise<string | null> {
+            const options = (await fetchOptions([value])).filter(isFluxFilterOptionItem);
+
+            return options.find(o => o.value === value)?.label ?? null;
+        }
+    };
+}
+
+function parseOptions(base: FluxFilterBase): FluxFilterOptionsEntry {
+    const options = (base as any).options as FluxFilterOptionItem[];
+    const translate = useTranslate();
+
+    return {
+        ...base,
+        type: 'options',
+
+        async getValueLabel(value): Promise<string | null> {
+            if (!Array.isArray(value)) {
+                return null;
+            }
+
+            return generateMultiOptionsLabel(translate, options, value);
+        }
+    };
+}
+
+function parseOptionsAsync(base: FluxFilterBase): FluxFilterOptionsEntry {
+    const fetchOptions = (base as any).fetchOptions as (ids: FluxFilterValue[]) => Promise<FluxFilterOptionRow[]>;
+    const translate = useTranslate();
+
+    return {
+        ...base,
+        type: 'options',
+
+        async getValueLabel(value): Promise<string | null> {
+            if (!Array.isArray(value)) {
+                return null;
+            }
+
+            const options = (await fetchOptions(value)).filter(isFluxFilterOptionItem);
+
+            return generateMultiOptionsLabel(translate, options, value);
+        }
+    };
+}
+
+function parseRange(base: FluxFilterBase): FluxFilterRangeEntry {
+    return {
+        ...base,
+        type: 'range',
+
+        async getValueLabel(value): Promise<string | null> {
+            if (!value || !Array.isArray(value) || value.length !== 2) {
+                return null;
+            }
+
+            const [lower, upper] = value as number[];
+
+            if ('formatter' in base) {
+                const formatter = base.formatter as (value: number) => string;
+
+                return `${formatter(lower!)} – ${formatter(upper!)}`;
+            }
+
+            return `${formatNumber(lower!)} – ${formatNumber(upper!)}`;
+        }
+    };
+}
+
+function generateMultiOptionsLabel(translate: FluxTranslate, options: FluxFilterOptionItem[], values: FluxFilterValueSingle[]): string | null {
+    const selected = options.filter(o => values.includes(o.value)).length;
+
+    if (selected <= 0) {
+        return null;
+    }
+
+    if (selected === 1) {
+        return options.find(o => values.includes(o.value))!.label;
+    }
+
+    return translate('flux.nSelected', {
+        n: selected
+    });
+}
+
+export const filterParsers = {
+    date: parseDate,
+    dateRange: parseDateRange,
+    option: parseOption,
+    optionAsync: parseOptionAsync,
+    options: parseOptions,
+    optionsAsync: parseOptionsAsync,
+    range: parseRange
+} as const;
 
 export function isFluxFilterOptionHeader(obj: object): obj is FluxFilterOptionHeader {
     return 'title' in obj;

package/src/data/iconRegistry.ts

@@ -9,6 +9,10 @@ export let iconRegistry: IconRegistry = {};
 
 export function fluxRegisterIcons(icons: Icons): void {
     iconRegistry = Object.keys(icons).reduce((acc: IconRegistry, key: string) => {
+        if (!icons[key]) {
+            return acc;
+        }
+
         const {icon, iconName} = icons[key];
         acc[iconName as FluxIconName] = icon;
 

package/src/vite.d.ts

@@ -1,11 +1,5 @@
-declare module '*.module.css' {
-    const content: Record<string, string>;
-    export default content;
-}
-
-declare module '*.module.scss' {
-    const content: Record<string, string>;
-    export default content;
+declare module '*.scss' {
+    export = string;
 }
 
 declare module '*.svg' {