@likable-hair/svelte 2.0.8 → 3.0.0

package/dist/css/main.css

@@ -0,0 +1,261 @@
+/* make the dark/light variable be usable in components */
+
+:root, :root.light {
+  --global-color-background-50: var(--global-color-light-background-50, 247, 247, 248);
+  --global-color-background-100: var(--global-color-light-background-100, 241, 242, 244);
+  --global-color-background-200: var(--global-color-light-background-200, 232, 234, 237);
+  --global-color-background-300: var(--global-color-light-background-300, 224, 226, 230);
+  --global-color-background-400: var(--global-color-light-background-400, 213, 216, 221);
+  --global-color-background-500: var(--global-color-light-background-500, 204, 208, 214);
+  --global-color-background-600: var(--global-color-light-background-600, 193, 197, 205);
+  --global-color-background-700: var(--global-color-light-background-700, 182, 187, 196);
+  --global-color-background-800: var(--global-color-light-background-800, 170, 176, 187);
+  --global-color-background-900: var(--global-color-light-background-900, 156, 163, 175);
+  --global-color-background-950: var(--global-color-light-background-950, 112, 121, 138);
+
+  --global-color-contrast-50: var(--global-color-light-contrast-50, 209, 213, 219);
+  --global-color-contrast-100: var(--global-color-light-contrast-100, 198, 203, 210);
+  --global-color-contrast-200: var(--global-color-light-contrast-200, 172, 179, 190);
+  --global-color-contrast-300: var(--global-color-light-contrast-300, 149, 158, 172);
+  --global-color-contrast-400: var(--global-color-light-contrast-400, 126, 137, 154);
+  --global-color-contrast-500: var(--global-color-light-contrast-500, 105, 117, 134);
+  --global-color-contrast-600: var(--global-color-light-contrast-600, 85, 95, 109);
+  --global-color-contrast-700: var(--global-color-light-contrast-700, 67, 75, 86);
+  --global-color-contrast-800: var(--global-color-light-contrast-800, 49, 55, 63);
+  --global-color-contrast-900: var(--global-color-light-contrast-900, 29, 32, 37);
+  --global-color-contrast-950: var(--global-color-light-contrast-950, 20, 22, 26);
+
+  --global-color-grey-50: var(--global-color-light-grey-50, 227, 227, 227);
+  --global-color-grey-100: var(--global-color-light-grey-100, 217, 217, 217);
+  --global-color-grey-200: var(--global-color-light-grey-200, 194, 194, 194);
+  --global-color-grey-300: var(--global-color-light-grey-300, 171, 171, 171);
+  --global-color-grey-400: var(--global-color-light-grey-400, 150, 150, 150);
+  --global-color-grey-500: var(--global-color-light-grey-500, 128, 128, 128);
+  --global-color-grey-600: var(--global-color-light-grey-600, 105, 105, 105);
+  --global-color-grey-700: var(--global-color-light-grey-700, 82, 82, 82);
+  --global-color-grey-800: var(--global-color-light-grey-800, 61, 61, 61);
+  --global-color-grey-900: var(--global-color-light-grey-900, 38, 38, 38);
+  --global-color-grey-950: var(--global-color-light-grey-950, 28, 28, 28);
+
+  --global-color-primary-50: var(--global-color-light-primary-50, 219, 224, 245);
+  --global-color-primary-100: var(--global-color-light-primary-100, 204, 210, 240);
+  --global-color-primary-200: var(--global-color-light-primary-200, 172, 183, 231);
+  --global-color-primary-300: var(--global-color-light-primary-300, 136, 152, 221);
+  --global-color-primary-400: var(--global-color-light-primary-400, 105, 124, 212);
+  --global-color-primary-500: var(--global-color-light-primary-500, 69, 93, 201);
+  --global-color-primary-600: var(--global-color-light-primary-600, 51, 75, 178);
+  --global-color-primary-700: var(--global-color-light-primary-700, 41, 60, 143);
+  --global-color-primary-800: var(--global-color-light-primary-800, 32, 46, 111);
+  --global-color-primary-900: var(--global-color-light-primary-900, 22, 31, 75);
+  --global-color-primary-950: var(--global-color-light-primary-950, 17, 25, 59);
+
+  --global-color-secondary-50: var(--global-color-light-secondary-50, 232, 252, 251);
+  --global-color-secondary-100: var(--global-color-light-secondary-100, 214, 250, 247);
+  --global-color-secondary-200: var(--global-color-light-secondary-200, 168, 245, 239);
+  --global-color-secondary-300: var(--global-color-light-secondary-300, 127, 240, 231);
+  --global-color-secondary-400: var(--global-color-light-secondary-400, 86, 236, 223);
+  --global-color-secondary-500: var(--global-color-light-secondary-500, 40, 231, 215);
+  --global-color-secondary-600: var(--global-color-light-secondary-600, 23, 202, 188);
+  --global-color-secondary-700: var(--global-color-light-secondary-700, 17, 151, 140);
+  --global-color-secondary-800: var(--global-color-light-secondary-800, 11, 101, 93);
+  --global-color-secondary-900: var(--global-color-light-secondary-900, 6, 50, 47);
+  --global-color-secondary-950: var(--global-color-light-secondary-950, 3, 27, 25);
+
+  --global-color-error-50: var(--global-color-light-error-50, 253, 231, 231);
+  --global-color-error-100: var(--global-color-light-error-100, 252, 212, 212);
+  --global-color-error-200: var(--global-color-light-error-200, 249, 170, 170);
+  --global-color-error-300: var(--global-color-light-error-300, 245, 122, 122);
+  --global-color-error-400: var(--global-color-light-error-400, 242, 80, 80);
+  --global-color-error-500: var(--global-color-light-error-500, 238, 37, 37);
+  --global-color-error-600: var(--global-color-light-error-600, 211, 16, 16);
+  --global-color-error-700: var(--global-color-light-error-700, 156, 12, 12);
+  --global-color-error-800: var(--global-color-light-error-800, 104, 8, 8);
+  --global-color-error-900: var(--global-color-light-error-900, 52, 4, 4);
+  --global-color-error-950: var(--global-color-light-error-950, 28, 2, 2);
+
+  --global-color-warning-50: var(--global-color-light-warning-50, 253, 247, 237);
+  --global-color-warning-100: var(--global-color-light-warning-100, 251, 238, 219);
+  --global-color-warning-200: var(--global-color-light-warning-200, 246, 220, 178);
+  --global-color-warning-300: var(--global-color-light-warning-300, 241, 203, 141);
+  --global-color-warning-400: var(--global-color-light-warning-400, 237, 186, 105);
+  --global-color-warning-500: var(--global-color-light-warning-500, 232, 168, 64);
+  --global-color-warning-600: var(--global-color-light-warning-600, 227, 151, 27);
+  --global-color-warning-700: var(--global-color-light-warning-700, 169, 112, 20);
+  --global-color-warning-800: var(--global-color-light-warning-800, 114, 75, 14);
+  --global-color-warning-900: var(--global-color-light-warning-900, 55, 36, 7);
+  --global-color-warning-950: var(--global-color-light-warning-950, 27, 18, 3);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --global-color-background-50: var(--global-color-light-background-50, 34, 37, 43);
+    --global-color-background-100: var(--global-color-light-background-100, 43, 47, 54);
+    --global-color-background-200: var(--global-color-light-background-200, 63, 69, 80);
+    --global-color-background-300: var(--global-color-light-background-300, 81, 88, 103);
+    --global-color-background-400: var(--global-color-light-background-400, 101, 110, 128);
+    --global-color-background-500: var(--global-color-light-background-500, 121, 130, 149);
+    --global-color-background-600: var(--global-color-light-background-600, 147, 154, 169);
+    --global-color-background-700: var(--global-color-light-background-700, 170, 176, 187);
+    --global-color-background-800: var(--global-color-light-background-800, 195, 199, 208);
+    --global-color-background-900: var(--global-color-light-background-900, 218, 221, 226);
+    --global-color-background-950: var(--global-color-light-background-950, 232, 234, 237);
+  
+    --global-color-contrast-50: var(--global-color-light-contrast-50, 112, 121, 138);
+    --global-color-contrast-100: var(--global-color-light-contrast-100, 156, 163, 175);
+    --global-color-contrast-200: var(--global-color-light-contrast-200, 170, 176, 187);
+    --global-color-contrast-300: var(--global-color-light-contrast-300, 182, 187, 196);
+    --global-color-contrast-400: var(--global-color-light-contrast-400, 193, 197, 205);
+    --global-color-contrast-500: var(--global-color-light-contrast-500, 204, 208, 214);
+    --global-color-contrast-600: var(--global-color-light-contrast-600, 213, 216, 221);
+    --global-color-contrast-700: var(--global-color-light-contrast-700, 224, 226, 230);
+    --global-color-contrast-800: var(--global-color-light-contrast-800, 232, 234, 237);
+    --global-color-contrast-900: var(--global-color-light-contrast-900, 241, 242, 244);
+    --global-color-contrast-950: var(--global-color-light-contrast-950, 247, 247, 248);
+
+    --global-color-grey-50: var(--global-color-light-grey-50, 227, 227, 227);
+    --global-color-grey-100: var(--global-color-light-grey-100, 217, 217, 217);
+    --global-color-grey-200: var(--global-color-light-grey-200, 194, 194, 194);
+    --global-color-grey-300: var(--global-color-light-grey-300, 171, 171, 171);
+    --global-color-grey-400: var(--global-color-light-grey-400, 150, 150, 150);
+    --global-color-grey-500: var(--global-color-light-grey-500, 128, 128, 128);
+    --global-color-grey-600: var(--global-color-light-grey-600, 105, 105, 105);
+    --global-color-grey-700: var(--global-color-light-grey-700, 82, 82, 82);
+    --global-color-grey-800: var(--global-color-light-grey-800, 61, 61, 61);
+    --global-color-grey-900: var(--global-color-light-grey-900, 38, 38, 38);
+    --global-color-grey-950: var(--global-color-light-grey-950, 28, 28, 28);
+  
+    --global-color-primary-50: var(--global-color-light-primary-50, 219, 224, 245);
+    --global-color-primary-100: var(--global-color-light-primary-100, 204, 210, 240);
+    --global-color-primary-200: var(--global-color-light-primary-200, 172, 183, 231);
+    --global-color-primary-300: var(--global-color-light-primary-300, 136, 152, 221);
+    --global-color-primary-400: var(--global-color-light-primary-400, 105, 124, 212);
+    --global-color-primary-500: var(--global-color-light-primary-500, 69, 93, 201);
+    --global-color-primary-600: var(--global-color-light-primary-600, 51, 75, 178);
+    --global-color-primary-700: var(--global-color-light-primary-700, 41, 60, 143);
+    --global-color-primary-800: var(--global-color-light-primary-800, 32, 46, 111);
+    --global-color-primary-900: var(--global-color-light-primary-900, 22, 31, 75);
+    --global-color-primary-950: var(--global-color-light-primary-950, 17, 25, 59);
+  
+    --global-color-secondary-50: var(--global-color-light-secondary-50, 232, 252, 251);
+    --global-color-secondary-100: var(--global-color-light-secondary-100, 214, 250, 247);
+    --global-color-secondary-200: var(--global-color-light-secondary-200, 168, 245, 239);
+    --global-color-secondary-300: var(--global-color-light-secondary-300, 127, 240, 231);
+    --global-color-secondary-400: var(--global-color-light-secondary-400, 86, 236, 223);
+    --global-color-secondary-500: var(--global-color-light-secondary-500, 40, 231, 215);
+    --global-color-secondary-600: var(--global-color-light-secondary-600, 23, 202, 188);
+    --global-color-secondary-700: var(--global-color-light-secondary-700, 17, 151, 140);
+    --global-color-secondary-800: var(--global-color-light-secondary-800, 11, 101, 93);
+    --global-color-secondary-900: var(--global-color-light-secondary-900, 6, 50, 47);
+    --global-color-secondary-950: var(--global-color-light-secondary-950, 3, 27, 25);
+  
+    --global-color-error-50: var(--global-color-light-error-50, 253, 231, 231);
+    --global-color-error-100: var(--global-color-light-error-100, 252, 212, 212);
+    --global-color-error-200: var(--global-color-light-error-200, 249, 170, 170);
+    --global-color-error-300: var(--global-color-light-error-300, 245, 122, 122);
+    --global-color-error-400: var(--global-color-light-error-400, 242, 80, 80);
+    --global-color-error-500: var(--global-color-light-error-500, 238, 37, 37);
+    --global-color-error-600: var(--global-color-light-error-600, 211, 16, 16);
+    --global-color-error-700: var(--global-color-light-error-700, 156, 12, 12);
+    --global-color-error-800: var(--global-color-light-error-800, 104, 8, 8);
+    --global-color-error-900: var(--global-color-light-error-900, 52, 4, 4);
+    --global-color-error-950: var(--global-color-light-error-950, 28, 2, 2);
+  
+    --global-color-warning-50: var(--global-color-light-warning-50, 253, 247, 237);
+    --global-color-warning-100: var(--global-color-light-warning-100, 251, 238, 219);
+    --global-color-warning-200: var(--global-color-light-warning-200, 246, 220, 178);
+    --global-color-warning-300: var(--global-color-light-warning-300, 241, 203, 141);
+    --global-color-warning-400: var(--global-color-light-warning-400, 237, 186, 105);
+    --global-color-warning-500: var(--global-color-light-warning-500, 232, 168, 64);
+    --global-color-warning-600: var(--global-color-light-warning-600, 227, 151, 27);
+    --global-color-warning-700: var(--global-color-light-warning-700, 169, 112, 20);
+    --global-color-warning-800: var(--global-color-light-warning-800, 114, 75, 14);
+    --global-color-warning-900: var(--global-color-light-warning-900, 55, 36, 7);
+    --global-color-warning-950: var(--global-color-light-warning-950, 27, 18, 3);
+  }
+}
+
+:root.dark {
+  --global-color-background-50: var(--global-color-light-background-50, 34, 37, 43);
+  --global-color-background-100: var(--global-color-light-background-100, 43, 47, 54);
+  --global-color-background-200: var(--global-color-light-background-200, 63, 69, 80);
+  --global-color-background-300: var(--global-color-light-background-300, 81, 88, 103);
+  --global-color-background-400: var(--global-color-light-background-400, 101, 110, 128);
+  --global-color-background-500: var(--global-color-light-background-500, 121, 130, 149);
+  --global-color-background-600: var(--global-color-light-background-600, 147, 154, 169);
+  --global-color-background-700: var(--global-color-light-background-700, 170, 176, 187);
+  --global-color-background-800: var(--global-color-light-background-800, 195, 199, 208);
+  --global-color-background-900: var(--global-color-light-background-900, 218, 221, 226);
+  --global-color-background-950: var(--global-color-light-background-950, 232, 234, 237);
+
+  --global-color-contrast-50: var(--global-color-light-contrast-50, 112, 121, 138);
+  --global-color-contrast-100: var(--global-color-light-contrast-100, 156, 163, 175);
+  --global-color-contrast-200: var(--global-color-light-contrast-200, 170, 176, 187);
+  --global-color-contrast-300: var(--global-color-light-contrast-300, 182, 187, 196);
+  --global-color-contrast-400: var(--global-color-light-contrast-400, 193, 197, 205);
+  --global-color-contrast-500: var(--global-color-light-contrast-500, 204, 208, 214);
+  --global-color-contrast-600: var(--global-color-light-contrast-600, 213, 216, 221);
+  --global-color-contrast-700: var(--global-color-light-contrast-700, 224, 226, 230);
+  --global-color-contrast-800: var(--global-color-light-contrast-800, 232, 234, 237);
+  --global-color-contrast-900: var(--global-color-light-contrast-900, 241, 242, 244);
+  --global-color-contrast-950: var(--global-color-light-contrast-950, 247, 247, 248);
+
+  --global-color-grey-50: var(--global-color-light-grey-50, 227, 227, 227);
+  --global-color-grey-100: var(--global-color-light-grey-100, 217, 217, 217);
+  --global-color-grey-200: var(--global-color-light-grey-200, 194, 194, 194);
+  --global-color-grey-300: var(--global-color-light-grey-300, 171, 171, 171);
+  --global-color-grey-400: var(--global-color-light-grey-400, 150, 150, 150);
+  --global-color-grey-500: var(--global-color-light-grey-500, 128, 128, 128);
+  --global-color-grey-600: var(--global-color-light-grey-600, 105, 105, 105);
+  --global-color-grey-700: var(--global-color-light-grey-700, 82, 82, 82);
+  --global-color-grey-800: var(--global-color-light-grey-800, 61, 61, 61);
+  --global-color-grey-900: var(--global-color-light-grey-900, 38, 38, 38);
+  --global-color-grey-950: var(--global-color-light-grey-950, 28, 28, 28);
+
+  --global-color-primary-50: var(--global-color-light-primary-50, 219, 224, 245);
+  --global-color-primary-100: var(--global-color-light-primary-100, 204, 210, 240);
+  --global-color-primary-200: var(--global-color-light-primary-200, 172, 183, 231);
+  --global-color-primary-300: var(--global-color-light-primary-300, 136, 152, 221);
+  --global-color-primary-400: var(--global-color-light-primary-400, 105, 124, 212);
+  --global-color-primary-500: var(--global-color-light-primary-500, 69, 93, 201);
+  --global-color-primary-600: var(--global-color-light-primary-600, 51, 75, 178);
+  --global-color-primary-700: var(--global-color-light-primary-700, 41, 60, 143);
+  --global-color-primary-800: var(--global-color-light-primary-800, 32, 46, 111);
+  --global-color-primary-900: var(--global-color-light-primary-900, 22, 31, 75);
+  --global-color-primary-950: var(--global-color-light-primary-950, 17, 25, 59);
+
+  --global-color-secondary-50: var(--global-color-light-secondary-50, 232, 252, 251);
+  --global-color-secondary-100: var(--global-color-light-secondary-100, 214, 250, 247);
+  --global-color-secondary-200: var(--global-color-light-secondary-200, 168, 245, 239);
+  --global-color-secondary-300: var(--global-color-light-secondary-300, 127, 240, 231);
+  --global-color-secondary-400: var(--global-color-light-secondary-400, 86, 236, 223);
+  --global-color-secondary-500: var(--global-color-light-secondary-500, 40, 231, 215);
+  --global-color-secondary-600: var(--global-color-light-secondary-600, 23, 202, 188);
+  --global-color-secondary-700: var(--global-color-light-secondary-700, 17, 151, 140);
+  --global-color-secondary-800: var(--global-color-light-secondary-800, 11, 101, 93);
+  --global-color-secondary-900: var(--global-color-light-secondary-900, 6, 50, 47);
+  --global-color-secondary-950: var(--global-color-light-secondary-950, 3, 27, 25);
+
+  --global-color-error-50: var(--global-color-light-error-50, 253, 231, 231);
+  --global-color-error-100: var(--global-color-light-error-100, 252, 212, 212);
+  --global-color-error-200: var(--global-color-light-error-200, 249, 170, 170);
+  --global-color-error-300: var(--global-color-light-error-300, 245, 122, 122);
+  --global-color-error-400: var(--global-color-light-error-400, 242, 80, 80);
+  --global-color-error-500: var(--global-color-light-error-500, 238, 37, 37);
+  --global-color-error-600: var(--global-color-light-error-600, 211, 16, 16);
+  --global-color-error-700: var(--global-color-light-error-700, 156, 12, 12);
+  --global-color-error-800: var(--global-color-light-error-800, 104, 8, 8);
+  --global-color-error-900: var(--global-color-light-error-900, 52, 4, 4);
+  --global-color-error-950: var(--global-color-light-error-950, 28, 2, 2);
+
+  --global-color-warning-50: var(--global-color-light-warning-50, 253, 247, 237);
+  --global-color-warning-100: var(--global-color-light-warning-100, 251, 238, 219);
+  --global-color-warning-200: var(--global-color-light-warning-200, 246, 220, 178);
+  --global-color-warning-300: var(--global-color-light-warning-300, 241, 203, 141);
+  --global-color-warning-400: var(--global-color-light-warning-400, 237, 186, 105);
+  --global-color-warning-500: var(--global-color-light-warning-500, 232, 168, 64);
+  --global-color-warning-600: var(--global-color-light-warning-600, 227, 151, 27);
+  --global-color-warning-700: var(--global-color-light-warning-700, 169, 112, 20);
+  --global-color-warning-800: var(--global-color-light-warning-800, 114, 75, 14);
+  --global-color-warning-900: var(--global-color-light-warning-900, 55, 36, 7);
+  --global-color-warning-950: var(--global-color-light-warning-950, 27, 18, 3);
+}

package/dist/stores/theme.d.ts

@@ -0,0 +1,30 @@
+export type Shades = {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+};
+type Colors = Record<string, {
+    background?: Shades;
+    contrast?: Shades;
+    primary?: Shades;
+    secondary?: Shades;
+    error?: Shades;
+    warning?: Shades;
+}>;
+type ThemeStore = {
+    colors?: Colors;
+    active: string;
+    disabled: boolean;
+    dark: boolean;
+};
+declare const theme: import("svelte/store").Writable<ThemeStore>;
+export declare function setTheme(th: 'light' | 'dark'): void;
+export declare function toggleTheme(): void;
+export default theme;

package/dist/stores/theme.js

@@ -0,0 +1,85 @@
+import { writable } from 'svelte/store';
+import { BROWSER } from 'esm-env';
+const theme = writable({
+    active: 'light',
+    disabled: true,
+    dark: false
+});
+if (BROWSER) {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme == 'dark') {
+        document.documentElement.classList.add("dark");
+        theme.update((v) => {
+            v.dark = true;
+            return v;
+        });
+    }
+    else if (savedTheme == 'light') {
+        document.documentElement.classList.add("light");
+        theme.update((v) => {
+            v.dark = false;
+            return v;
+        });
+    }
+}
+export function setTheme(th) {
+    localStorage.setItem('theme', th);
+    if (th == 'dark') {
+        document.documentElement.classList.add("dark");
+        document.documentElement.classList.remove("light");
+        theme.update((v) => {
+            v.dark = true;
+            return v;
+        });
+    }
+    else if (th == 'light') {
+        document.documentElement.classList.add("light");
+        document.documentElement.classList.remove("dark");
+        theme.update((v) => {
+            v.dark = false;
+            return v;
+        });
+    }
+}
+export function toggleTheme() {
+    if (BROWSER) {
+        const th = localStorage.getItem('theme');
+        const matchMediaDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        if (th == 'dark')
+            setTheme('light');
+        else if (th == 'light')
+            setTheme('dark');
+        else if (matchMediaDark)
+            setTheme('light');
+        else
+            setTheme('light');
+    }
+}
+let styleTag;
+theme.subscribe(value => {
+    if (BROWSER) {
+        if (!value.disabled) {
+            const headTag = document.getElementsByTagName('head')[0];
+            styleTag = document.createElement("style");
+            let styleBuilder = `:root {`;
+            if (!!value.colors) {
+                const activeTheme = value.active || 'light';
+                if (!!value.colors[activeTheme]) {
+                    for (const [colorType, shades] of Object.entries(value.colors[activeTheme])) {
+                        for (const [shade, color] of Object.entries(shades)) {
+                            styleBuilder += `--global-color-${colorType}-${shade}:${color}`;
+                        }
+                    }
+                }
+            }
+            styleBuilder += '}';
+            styleTag.innerHTML = styleBuilder;
+            headTag.appendChild(styleTag);
+        }
+        else if (!!styleTag) {
+            const headTag = document.getElementsByTagName('head')[0];
+            headTag.removeChild(styleTag);
+        }
+    }
+});
+export default theme;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "2.0.8",
+  "version": "3.0.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -33,9 +33,10 @@
     "@orama/orama": "^1.0.0-beta.7",
     "@playwright/test": "^1.28.1",
     "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/kit": "^1.5.0",
+    "@sveltejs/kit": "^1.22.3",
     "@sveltejs/package": "^2.0.0",
     "@types/lodash": "^4.14.192",
+    "@types/luxon": "^3.3.0",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "eslint": "^8.28.0",
@@ -59,7 +60,9 @@
     "esm-env": "^1.0.0",
     "highlight.js": "^11.7.0",
     "highlightjs-svelte": "^1.0.6",
-    "lodash": "^4.17.21"
+    "imask": "^7.1.0-alpha.0",
+    "lodash": "^4.17.21",
+    "luxon": "^3.3.0"
   },
   "typesVersions": {
     ">4.0": {

package/dist/components/simple/buttons/DefaultButton.svelte

@@ -1,93 +0,0 @@
-<script>import { createEventDispatcher } from "svelte";
-export let _backgroundColor = null, _border = null, _padding = null, _color = null, _borderRadius = null, _cursor = null, _opacity = null, _transitionTimingFunction = null, _transitionDuration = null, _boxShadow = null, _disabledBackgroundColor = null, _disabledBorder = null, _disabledColor = null, _disabledOpacity = null, _hoverBackgroundColor = null, _hoverBorder = null, _hoverColor = null, _hoverOpacity = null, _hoverBoxShadow = null, _activeBackgroundColor = null, _activeBorder = null, _activeColor = null, _activeOpacity = null, _activeBoxShadow = null;
-export let disabled = false, active = false;
-const dispatch = createEventDispatcher();
-function handleClick(event) {
-  if (disabled)
-    return;
-  dispatch("click", {
-    nativeEvent: event
-  });
-}
-function handleKeyPress(event) {
-  if (disabled)
-    return;
-  dispatch("keypress", {
-    nativeEvent: event
-  });
-}
-</script>
-
-<button
-  style:--button-disabled-background-color={_disabledBackgroundColor}
-  style:--button-disabled-border={_disabledBorder}
-  style:--button-disabled-color={_disabledColor}
-  style:--button-disabled-opacity={_disabledOpacity}
-  style:--button-hover-background-color={_hoverBackgroundColor}
-  style:--button-hover-border={_hoverBorder}
-  style:--button-hover-color={_hoverColor}
-  style:--button-hover-opacity={_hoverOpacity}
-  style:--button-hover-box-shadow={_hoverBoxShadow}
-  style:--button-active-background-color={_activeBackgroundColor}
-  style:--button-active-border={_activeBorder}
-  style:--button-active-color={_activeColor}
-  style:--button-active-opacity={_activeOpacity}
-  style:--button-active-box-shadow={_activeBoxShadow}
-  style:--button-background-color={_backgroundColor}
-  style:--button-border={_border}
-  style:--button-padding={_padding}
-  style:--button-color={_color}
-  style:--button-border-radius={_borderRadius}
-  style:--button-cursor={_cursor}
-  style:--button-opacity={_opacity}
-  style:--button-transition-timing-function={_transitionTimingFunction}
-  style:--button-transition-duration={_transitionDuration}
-  style:--button-box-shadow={_boxShadow}
-  on:click={handleClick}
-  on:keypress={handleKeyPress}
-  disabled={disabled}
-  class:active={active}
->
-  <slot></slot>
-</button>
-
-<style>
-  button {
-    --default-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-
-    background-color: var(--button-background-color, rgba(239, 239, 239));
-    border: var(--button-border, none);
-    padding: var(--button-padding, .875rem 1.2rem);
-    color: var(--button-color, inherit);
-    border-radius: var(--button-border-radius, .3rem);
-    cursor: var(--button-cursor, pointer);
-    opacity: var(--button-opacity, 100%);
-    box-shadow: var(--button-box-shadow, var(--default-box-shadow));
-    transition-property: background-color color box-shadow;
-    transition-timing-function: var(--button-transition-timing-function, ease-in-out);
-    transition-duration: var(--button-transition-duration, .1s);
-  }
-
-  button:disabled {
-    background-color: var(--button-disabled-background-color, rgba(239, 239, 239, 0.3));
-    border: var(--button-disabled-border, none);
-    color: var(--button-disabled-color, inherit);
-    opacity: var(--button-disabled-color, 100%);
-  }
-
-  button:hover {
-    background-color: var(--button-hover-background-color, rgba(126, 126, 126, 0.3));
-    border: var(--button-hover-border, none);
-    color: var(--button-hover-color, inherit);
-    opacity: var(--button-hover-color, 100%);
-    box-shadow: var(--button-hover-box-shadow, var(--default-box-shadow));
-  }
-
-  button.active {
-    background-color: var(--button-active-background-color, rgba(126, 126, 126, 0.3));
-    border: var(--button-active-border, none);
-    color: var(--button-active-color, inherit);
-    opacity: var(--button-active-color, 100%);
-    box-shadow: var(--button-active-box-shadow, var(--default-box-shadow));
-  }
-</style>

package/dist/components/simple/buttons/DefaultButton.svelte.d.ts

@@ -1,50 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        _backgroundColor?: string | null | undefined;
-        _border?: string | null | undefined;
-        _padding?: string | null | undefined;
-        _color?: string | null | undefined;
-        _borderRadius?: string | null | undefined;
-        _cursor?: string | null | undefined;
-        _opacity?: string | null | undefined;
-        _transitionTimingFunction?: string | null | undefined;
-        _transitionDuration?: string | null | undefined;
-        _boxShadow?: string | null | undefined;
-        _disabledBackgroundColor?: string | null | undefined;
-        _disabledBorder?: string | null | undefined;
-        _disabledColor?: string | null | undefined;
-        _disabledOpacity?: string | null | undefined;
-        _hoverBackgroundColor?: string | null | undefined;
-        _hoverBorder?: string | null | undefined;
-        _hoverColor?: string | null | undefined;
-        _hoverOpacity?: string | null | undefined;
-        _hoverBoxShadow?: string | null | undefined;
-        _activeBackgroundColor?: string | null | undefined;
-        _activeBorder?: string | null | undefined;
-        _activeColor?: string | null | undefined;
-        _activeOpacity?: string | null | undefined;
-        _activeBoxShadow?: string | null | undefined;
-        disabled?: boolean | undefined;
-        active?: boolean | undefined;
-    };
-    events: {
-        click: CustomEvent<{
-            nativeEvent: MouseEvent;
-        }>;
-        keypress: CustomEvent<{
-            nativeEvent: KeyboardEvent;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type DefaultButtonProps = typeof __propDef.props;
-export type DefaultButtonEvents = typeof __propDef.events;
-export type DefaultButtonSlots = typeof __propDef.slots;
-export default class DefaultButton extends SvelteComponentTyped<DefaultButtonProps, DefaultButtonEvents, DefaultButtonSlots> {
-}
-export {};