@quaffui/quaff 0.1.0-prealpha

package/dist/css/theme/theme.light.scss

@@ -0,0 +1,36 @@
+body.light {
+  --primary: rgba(var(--primary-light));
+  --on-primary: rgba(var(--on-primary-light));
+  --primary-container: rgba(var(--primary-container-light));
+  --on-primary-container: rgba(var(--on-primary-container-light));
+  --secondary: rgba(var(--secondary-light));
+  --on-secondary: rgba(var(--on-secondary-light));
+  --secondary-container: rgba(var(--secondary-container-light));
+  --on-secondary-container: rgba(var(--on-secondary-container-light));
+  --tertiary: rgba(var(--tertiary-light));
+  --on-tertiary: rgba(var(--on-tertiary-light));
+  --tertiary-container: rgba(var(--tertiary-container-light));
+  --on-tertiary-container: rgba(var(--on-tertiary-container-light));
+  --error: rgba(var(--error-light));
+  --error-container: rgba(var(--error-container-light));
+  --on-error: rgba(var(--on-error-light));
+  --on-error-container: rgba(var(--on-error-container-light));
+  --background: rgba(var(--background-light));
+  --on-background: rgba(var(--on-background-light));
+  --surface: rgba(var(--surface-light));
+  --on-surface: rgba(var(--on-surface-light));
+  --on-surface-2: rgba(var(--on-surface-light), 0.08);
+  --on-surface-4: rgba(var(--on-surface-light), 0.12);
+  --surface-variant: rgba(var(--surface-variant-light));
+  --on-surface-variant: rgba(var(--on-surface-variant-light));
+  --on-surface-variant-2: rgba(var(--on-surface-variant-light), 0.08);
+  --on-surface-variant-4: rgba(var(--on-surface-variant-light), 0.12);
+  --outline: rgba(var(--outline-light));
+  --inverse-on-surface: rgba(var(--inverse-on-surface-light));
+  --inverse-surface: rgba(var(--inverse-surface-light));
+  --inverse-primary: rgba(var(--inverse-primary-light));
+  --shadow: rgba(var(--shadow-light));
+  --surface-tint: rgba(var(--surface-tint-light));
+  --outline-variant: rgba(var(--outline-variant-light));
+  --scrim: rgba(var(--scrim-light));
+}

package/dist/css/theme/theme.scss

@@ -0,0 +1,5 @@
+@import "$css/theme/tokens.scss";
+@import "$css/theme/colors.module.scss";
+@import "$css/theme/typography.module.scss";
+@import "$css/theme/theme.light.scss";
+@import "$css/theme/theme.dark.scss";

package/dist/css/theme/tokens.scss

@@ -0,0 +1,266 @@
+:root {
+  --md-source: 255, 183, 123;
+  /* primary */
+  --palette-primary0: 0, 0, 0;
+  --palette-primary10: 46, 21, 0;
+  --palette-primary20: 77, 39, 0;
+  --palette-primary25: 93, 48, 0;
+  --palette-primary30: 109, 57, 0;
+  --palette-primary35: 126, 67, 0;
+  --palette-primary40: 144, 77, 0;
+  --palette-primary50: 176, 100, 20;
+  --palette-primary60: 207, 125, 45;
+  --palette-primary70: 239, 150, 69;
+  --palette-primary80: 255, 183, 124;
+  --palette-primary90: 255, 220, 194;
+  --palette-primary95: 255, 237, 226;
+  --palette-primary98: 255, 248, 245;
+  --palette-primary99: 255, 251, 255;
+  --palette-primary100: 255, 255, 255;
+  /* secondary */
+  --palette-secondary0: 0, 0, 0;
+  --palette-secondary10: 42, 23, 7;
+  --palette-secondary20: 65, 44, 25;
+  --palette-secondary25: 78, 55, 35;
+  --palette-secondary30: 90, 66, 46;
+  --palette-secondary35: 103, 77, 57;
+  --palette-secondary40: 116, 89, 68;
+  --palette-secondary50: 142, 113, 91;
+  --palette-secondary60: 170, 139, 115;
+  --palette-secondary70: 198, 165, 140;
+  --palette-secondary80: 227, 192, 166;
+  --palette-secondary90: 255, 220, 194;
+  --palette-secondary95: 255, 237, 226;
+  --palette-secondary98: 255, 248, 245;
+  --palette-secondary99: 255, 251, 255;
+  --palette-secondary100: 255, 255, 255;
+  /* tertiary */
+  --palette-tertiary0: 0, 0, 0;
+  --palette-tertiary10: 25, 30, 0;
+  --palette-tertiary20: 46, 51, 13;
+  --palette-tertiary25: 57, 62, 23;
+  --palette-tertiary30: 68, 74, 34;
+  --palette-tertiary35: 80, 86, 44;
+  --palette-tertiary40: 92, 98, 55;
+  --palette-tertiary50: 116, 123, 77;
+  --palette-tertiary60: 142, 149, 101;
+  --palette-tertiary70: 169, 175, 125;
+  --palette-tertiary80: 196, 203, 151;
+  --palette-tertiary90: 224, 231, 177;
+  --palette-tertiary95: 239, 245, 190;
+  --palette-tertiary98: 247, 254, 198;
+  --palette-tertiary99: 252, 255, 220;
+  --palette-tertiary100: 255, 255, 255;
+  /* neutral */
+  --palette-neutral0: 0, 0, 0;
+  --palette-neutral10: 32, 27, 23;
+  --palette-neutral20: 53, 47, 43;
+  --palette-neutral25: 65, 58, 54;
+  --palette-neutral30: 76, 69, 65;
+  --palette-neutral35: 88, 81, 76;
+  --palette-neutral40: 101, 93, 88;
+  --palette-neutral50: 126, 117, 112;
+  --palette-neutral60: 152, 143, 137;
+  --palette-neutral70: 179, 169, 163;
+  --palette-neutral80: 207, 196, 190;
+  --palette-neutral90: 236, 224, 218;
+  --palette-neutral95: 250, 238, 232;
+  --palette-neutral98: 255, 248, 245;
+  --palette-neutral99: 255, 251, 255;
+  --palette-neutral100: 255, 255, 255;
+  /* neutral-variant */
+  --palette-neutral-variant0: 0, 0, 0;
+  --palette-neutral-variant10: 36, 26, 18;
+  --palette-neutral-variant20: 58, 46, 37;
+  --palette-neutral-variant25: 69, 57, 48;
+  --palette-neutral-variant30: 81, 68, 59;
+  --palette-neutral-variant35: 93, 80, 70;
+  --palette-neutral-variant40: 106, 92, 81;
+  --palette-neutral-variant50: 132, 116, 105;
+  --palette-neutral-variant60: 158, 142, 130;
+  --palette-neutral-variant70: 186, 168, 156;
+  --palette-neutral-variant80: 214, 195, 182;
+  --palette-neutral-variant90: 243, 223, 210;
+  --palette-neutral-variant95: 255, 237, 226;
+  --palette-neutral-variant98: 255, 248, 245;
+  --palette-neutral-variant99: 255, 251, 255;
+  --palette-neutral-variant100: 255, 255, 255;
+  /* error */
+  --palette-error0: 0, 0, 0;
+  --palette-error10: 65, 0, 2;
+  --palette-error20: 105, 0, 5;
+  --palette-error25: 126, 0, 7;
+  --palette-error30: 147, 0, 10;
+  --palette-error35: 168, 7, 16;
+  --palette-error40: 186, 26, 26;
+  --palette-error50: 222, 55, 48;
+  --palette-error60: 255, 84, 73;
+  --palette-error70: 255, 137, 125;
+  --palette-error80: 255, 180, 171;
+  --palette-error90: 255, 218, 214;
+  --palette-error95: 255, 237, 234;
+  --palette-error98: 255, 248, 247;
+  --palette-error99: 255, 251, 255;
+  --palette-error100: 255, 255, 255;
+  /* light */
+  --primary-light: 0, 98, 159;
+  --on-primary-light: 255, 255, 255;
+  --primary-container-light: 206, 229, 255;
+  --on-primary-container-light: 18, 28, 39;
+  --secondary-light: 82, 96, 112;
+  --on-secondary-light: 255, 255, 255;
+  --secondary-container-light: 214, 228, 247;
+  --on-secondary-container-light: 15, 29, 42;
+  --tertiary-light: 105, 88, 121;
+  --on-tertiary-light: 255, 255, 255;
+  --tertiary-container-light: 241, 219, 255;
+  --on-tertiary-container-light: 36, 21, 51;
+  --error-light: 186, 27, 27;
+  --error-container-light: 255, 218, 212;
+  --on-error-light: 255, 255, 255;
+  --on-error-container-light: 65, 0, 1;
+  --background-light: 253, 252, 255;
+  --on-background-light: 26, 28, 30;
+  --surface-light: 253, 252, 255;
+  --on-surface-light: 26, 28, 30;
+  --surface-variant-light: 223, 227, 236;
+  --on-surface-variant-light: 66, 71, 78;
+  --outline-light: 114, 119, 127;
+  --inverse-on-surface-light: 240, 240, 243;
+  --inverse-surface-light: 47, 48, 51;
+  --inverse-primary-light: 151, 203, 255;
+  --shadow-light: 0, 0, 0;
+  /* dark */
+  --primary-dark: 151, 203, 255;
+  --on-primary-dark: 0, 51, 85;
+  --primary-container-dark: 0, 74, 122;
+  --on-primary-container-dark: 206, 229, 255;
+  --secondary-dark: 186, 200, 218;
+  --on-secondary-dark: 36, 50, 64;
+  --secondary-container-dark: 59, 72, 87;
+  --on-secondary-container-dark: 214, 228, 247;
+  --tertiary-dark: 212, 190, 230;
+  --on-tertiary-dark: 57, 42, 72;
+  --tertiary-container-dark: 81, 64, 97;
+  --on-tertiary-container-dark: 241, 219, 255;
+  --error-dark: 255, 180, 169;
+  --error-container-dark: 147, 0, 6;
+  --on-error-dark: 104, 0, 3;
+  --on-error-container-dark: 255, 218, 212;
+  --background-dark: 26, 28, 30;
+  --on-background-dark: 226, 226, 230;
+  --surface-dark: 26, 28, 30;
+  --on-surface-dark: 226, 226, 230;
+  --surface-variant-dark: 66, 71, 78;
+  --on-surface-variant-dark: 195, 199, 207;
+  --outline-dark: 140, 145, 153;
+  --inverse-on-surface-dark: 26, 28, 30;
+  --inverse-surface-dark: 226, 226, 230;
+  --inverse-primary-dark: 0, 98, 159;
+  --shadow-dark: 0, 0, 0;
+  /* display - large */
+  --typescale-display-large-font-family-name: Roboto, sans-serif;
+  --typescale-display-large-font-family-style: Regular;
+  --typescale-display-large-font-weight: 400px;
+  --typescale-display-large-font-size: 57px;
+  --typescale-display-large-line-height: 64px;
+  --typescale-display-large-letter-spacing: -0.25px;
+  /* display - medium */
+  --typescale-display-medium-font-family-name: Roboto, sans-serif;
+  --typescale-display-medium-font-family-style: Regular;
+  --typescale-display-medium-font-weight: 400px;
+  --typescale-display-medium-font-size: 45px;
+  --typescale-display-medium-line-height: 52px;
+  --typescale-display-medium-letter-spacing: 0px;
+  /* display - small */
+  --typescale-display-small-font-family-name: Roboto, sans-serif;
+  --typescale-display-small-font-family-style: Regular;
+  --typescale-display-small-font-weight: 400px;
+  --typescale-display-small-font-size: 36px;
+  --typescale-display-small-line-height: 44px;
+  --typescale-display-small-letter-spacing: 0px;
+  /* headline - large */
+  --typescale-headline-large-font-family-name: Roboto, sans-serif;
+  --typescale-headline-large-font-family-style: Regular;
+  --typescale-headline-large-font-weight: 400px;
+  --typescale-headline-large-font-size: 32px;
+  --typescale-headline-large-line-height: 40px;
+  --typescale-headline-large-letter-spacing: 0px;
+  /* headline - medium */
+  --typescale-headline-medium-font-family-name: Roboto, sans-serif;
+  --typescale-headline-medium-font-family-style: Regular;
+  --typescale-headline-medium-font-weight: 400px;
+  --typescale-headline-medium-font-size: 28px;
+  --typescale-headline-medium-line-height: 36px;
+  --typescale-headline-medium-letter-spacing: 0px;
+  /* headline - small */
+  --typescale-headline-small-font-family-name: Roboto, sans-serif;
+  --typescale-headline-small-font-family-style: Regular;
+  --typescale-headline-small-font-weight: 400px;
+  --typescale-headline-small-font-size: 24px;
+  --typescale-headline-small-line-height: 32px;
+  --typescale-headline-small-letter-spacing: 0px;
+  /* body - large */
+  --typescale-body-large-font-family-name: Roboto, sans-serif;
+  --typescale-body-large-font-family-style: Regular;
+  --typescale-body-large-font-weight: 400px;
+  --typescale-body-large-font-size: 16px;
+  --typescale-body-large-line-height: 24px;
+  --typescale-body-large-letter-spacing: 0.5px;
+  /* body - medium */
+  --typescale-body-medium-font-family-name: Roboto, sans-serif;
+  --typescale-body-medium-font-family-style: Regular;
+  --typescale-body-medium-font-weight: 400px;
+  --typescale-body-medium-font-size: 14px;
+  --typescale-body-medium-line-height: 20px;
+  --typescale-body-medium-letter-spacing: 0.25px;
+  /* body - small */
+  --typescale-body-small-font-family-name: Roboto, sans-serif;
+  --typescale-body-small-font-family-style: Regular;
+  --typescale-body-small-font-weight: 400px;
+  --typescale-body-small-font-size: 12px;
+  --typescale-body-small-line-height: 16px;
+  --typescale-body-small-letter-spacing: 0.4px;
+  /* label - large */
+  --typescale-label-large-font-family-name: Roboto, sans-serif;
+  --typescale-label-large-font-family-style: Medium;
+  --typescale-label-large-font-weight: 500px;
+  --typescale-label-large-font-size: 14px;
+  --typescale-label-large-line-height: 20px;
+  --typescale-label-large-letter-spacing: 0.1px;
+  /* label - medium */
+  --typescale-label-medium-font-family-name: Roboto, sans-serif;
+  --typescale-label-medium-font-family-style: Medium;
+  --typescale-label-medium-font-weight: 500px;
+  --typescale-label-medium-font-size: 12px;
+  --typescale-label-medium-line-height: 16px;
+  --typescale-label-medium-letter-spacing: 0.5px;
+  /* label - small */
+  --typescale-label-small-font-family-name: Roboto, sans-serif;
+  --typescale-label-small-font-family-style: Medium;
+  --typescale-label-small-font-weight: 500px;
+  --typescale-label-small-font-size: 11px;
+  --typescale-label-small-line-height: 16px;
+  --typescale-label-small-letter-spacing: 0.5px;
+  /* title - large */
+  --typescale-title-large-font-family-name: Roboto, sans-serif;
+  --typescale-title-large-font-family-style: Regular;
+  --typescale-title-large-font-weight: 400px;
+  --typescale-title-large-font-size: 22px;
+  --typescale-title-large-line-height: 28px;
+  --typescale-title-large-letter-spacing: 0px;
+  /* title - medium */
+  --typescale-title-medium-font-family-name: Roboto, sans-serif;
+  --typescale-title-medium-font-family-style: Medium;
+  --typescale-title-medium-font-weight: 500px;
+  --typescale-title-medium-font-size: 16px;
+  --typescale-title-medium-line-height: 24px;
+  --typescale-title-medium-letter-spacing: 0.15px;
+  /* title - small */
+  --typescale-title-small-font-family-name: Roboto, sans-serif;
+  --typescale-title-small-font-family-style: Medium;
+  --typescale-title-small-font-weight: 500px;
+  --typescale-title-small-font-size: 14px;
+  --typescale-title-small-line-height: 20px;
+  --typescale-title-small-letter-spacing: 0.1px;
+}

package/dist/css/theme/typography.module.scss

@@ -0,0 +1,150 @@
+.display-large {
+  font-family: var(--typescale-display-large-font-family-name);
+  font-style: var(--typescale-display-large-font-family-style);
+  font-weight: var(--typescale-display-large-font-weight);
+  font-size: var(--typescale-display-large-font-size);
+  letter-spacing: var(--typescale-display-large-tracking);
+  line-height: var(--typescale-display-large-height);
+  text-transform: var(--typescale-display-large-text-transform);
+  text-decoration: var(--typescale-display-large-text-decoration);
+}
+.display-medium {
+  font-family: var(--typescale-display-medium-font-family-name);
+  font-style: var(--typescale-display-medium-font-family-style);
+  font-weight: var(--typescale-display-medium-font-weight);
+  font-size: var(--typescale-display-medium-font-size);
+  letter-spacing: var(--typescale-display-medium-tracking);
+  line-height: var(--typescale-display-medium-height);
+  text-transform: var(--typescale-display-medium-text-transform);
+  text-decoration: var(--typescale-display-medium-text-decoration);
+}
+.display-small {
+  font-family: var(--typescale-display-small-font-family-name);
+  font-style: var(--typescale-display-small-font-family-style);
+  font-weight: var(--typescale-display-small-font-weight);
+  font-size: var(--typescale-display-small-font-size);
+  letter-spacing: var(--typescale-display-small-tracking);
+  line-height: var(--typescale-display-small-height);
+  text-transform: var(--typescale-display-small-text-transform);
+  text-decoration: var(--typescale-display-small-text-decoration);
+}
+.headline-large {
+  font-family: var(--typescale-headline-large-font-family-name);
+  font-style: var(--typescale-headline-large-font-family-style);
+  font-weight: var(--typescale-headline-large-font-weight);
+  font-size: var(--typescale-headline-large-font-size);
+  letter-spacing: var(--typescale-headline-large-tracking);
+  line-height: var(--typescale-headline-large-height);
+  text-transform: var(--typescale-headline-large-text-transform);
+  text-decoration: var(--typescale-headline-large-text-decoration);
+}
+.headline-medium {
+  font-family: var(--typescale-headline-medium-font-family-name);
+  font-style: var(--typescale-headline-medium-font-family-style);
+  font-weight: var(--typescale-headline-medium-font-weight);
+  font-size: var(--typescale-headline-medium-font-size);
+  letter-spacing: var(--typescale-headline-medium-tracking);
+  line-height: var(--typescale-headline-medium-height);
+  text-transform: var(--typescale-headline-medium-text-transform);
+  text-decoration: var(--typescale-headline-medium-text-decoration);
+}
+.headline-small {
+  font-family: var(--typescale-headline-small-font-family-name);
+  font-style: var(--typescale-headline-small-font-family-style);
+  font-weight: var(--typescale-headline-small-font-weight);
+  font-size: var(--typescale-headline-small-font-size);
+  letter-spacing: var(--typescale-headline-small-tracking);
+  line-height: var(--typescale-headline-small-height);
+  text-transform: var(--typescale-headline-small-text-transform);
+  text-decoration: var(--typescale-headline-small-text-decoration);
+}
+.body-large {
+  font-family: var(--typescale-body-large-font-family-name);
+  font-style: var(--typescale-body-large-font-family-style);
+  font-weight: var(--typescale-body-large-font-weight);
+  font-size: var(--typescale-body-large-font-size);
+  letter-spacing: var(--typescale-body-large-tracking);
+  line-height: var(--typescale-body-large-height);
+  text-transform: var(--typescale-body-large-text-transform);
+  text-decoration: var(--typescale-body-large-text-decoration);
+}
+.body-medium {
+  font-family: var(--typescale-body-medium-font-family-name);
+  font-style: var(--typescale-body-medium-font-family-style);
+  font-weight: var(--typescale-body-medium-font-weight);
+  font-size: var(--typescale-body-medium-font-size);
+  letter-spacing: var(--typescale-body-medium-tracking);
+  line-height: var(--typescale-body-medium-height);
+  text-transform: var(--typescale-body-medium-text-transform);
+  text-decoration: var(--typescale-body-medium-text-decoration);
+}
+.body-small {
+  font-family: var(--typescale-body-small-font-family-name);
+  font-style: var(--typescale-body-small-font-family-style);
+  font-weight: var(--typescale-body-small-font-weight);
+  font-size: var(--typescale-body-small-font-size);
+  letter-spacing: var(--typescale-body-small-tracking);
+  line-height: var(--typescale-body-small-height);
+  text-transform: var(--typescale-body-small-text-transform);
+  text-decoration: var(--typescale-body-small-text-decoration);
+}
+.label-large {
+  font-family: var(--typescale-label-large-font-family-name);
+  font-style: var(--typescale-label-large-font-family-style);
+  font-weight: var(--typescale-label-large-font-weight);
+  font-size: var(--typescale-label-large-font-size);
+  letter-spacing: var(--typescale-label-large-tracking);
+  line-height: var(--typescale-label-large-height);
+  text-transform: var(--typescale-label-large-text-transform);
+  text-decoration: var(--typescale-label-large-text-decoration);
+}
+.label-medium {
+  font-family: var(--typescale-label-medium-font-family-name);
+  font-style: var(--typescale-label-medium-font-family-style);
+  font-weight: var(--typescale-label-medium-font-weight);
+  font-size: var(--typescale-label-medium-font-size);
+  letter-spacing: var(--typescale-label-medium-tracking);
+  line-height: var(--typescale-label-medium-height);
+  text-transform: var(--typescale-label-medium-text-transform);
+  text-decoration: var(--typescale-label-medium-text-decoration);
+}
+.label-small {
+  font-family: var(--typescale-label-small-font-family-name);
+  font-style: var(--typescale-label-small-font-family-style);
+  font-weight: var(--typescale-label-small-font-weight);
+  font-size: var(--typescale-label-small-font-size);
+  letter-spacing: var(--typescale-label-small-tracking);
+  line-height: var(--typescale-label-small-height);
+  text-transform: var(--typescale-label-small-text-transform);
+  text-decoration: var(--typescale-label-small-text-decoration);
+}
+.title-large {
+  font-family: var(--typescale-title-large-font-family-name);
+  font-style: var(--typescale-title-large-font-family-style);
+  font-weight: var(--typescale-title-large-font-weight);
+  font-size: var(--typescale-title-large-font-size);
+  letter-spacing: var(--typescale-title-large-tracking);
+  line-height: var(--typescale-title-large-height);
+  text-transform: var(--typescale-title-large-text-transform);
+  text-decoration: var(--typescale-title-large-text-decoration);
+}
+.title-medium {
+  font-family: var(--typescale-title-medium-font-family-name);
+  font-style: var(--typescale-title-medium-font-family-style);
+  font-weight: var(--typescale-title-medium-font-weight);
+  font-size: var(--typescale-title-medium-font-size);
+  letter-spacing: var(--typescale-title-medium-tracking);
+  line-height: var(--typescale-title-medium-height);
+  text-transform: var(--typescale-title-medium-text-transform);
+  text-decoration: var(--typescale-title-medium-text-decoration);
+}
+.title-small {
+  font-family: var(--typescale-title-small-font-family-name);
+  font-style: var(--typescale-title-small-font-family-style);
+  font-weight: var(--typescale-title-small-font-weight);
+  font-size: var(--typescale-title-small-font-size);
+  letter-spacing: var(--typescale-title-small-tracking);
+  line-height: var(--typescale-title-small-height);
+  text-transform: var(--typescale-title-small-text-transform);
+  text-decoration: var(--typescale-title-small-text-decoration);
+}

package/dist/global.d.ts

@@ -0,0 +1,10 @@
+declare var __QUAFF_VERSION__: string;
+declare var __PLATFORM__:
+  | "aix"
+  | "darwin"
+  | "freebsd"
+  | "linux"
+  | "openbsd"
+  | "sunos"
+  | "win32"
+  | "android";

package/dist/helpers/activationHandler.d.ts

@@ -0,0 +1,9 @@
+type Event = MouseEvent | KeyboardEvent;
+interface Options {
+    disable: boolean | undefined;
+    callback: (e: Event) => void;
+}
+export declare function activationHandler(node: HTMLElement, { disable, callback }: Options): {
+    destroy(): void;
+};
+export {};

package/dist/helpers/activationHandler.js

@@ -0,0 +1,23 @@
+export function activationHandler(node, { disable, callback }) {
+    function handleEvent(event) {
+        if (disable) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        if (event instanceof KeyboardEvent) {
+            if (!["Enter", "Space"].includes(event.code))
+                return;
+        }
+        event.preventDefault();
+        callback(event);
+    }
+    node.addEventListener("click", handleEvent);
+    node.addEventListener("keydown", handleEvent);
+    return {
+        destroy() {
+            node.removeEventListener("click", handleEvent);
+            node.removeEventListener("keydown", handleEvent);
+        },
+    };
+}

package/dist/helpers/clickOutside.d.ts

@@ -0,0 +1,6 @@
+export declare function clickOutside(node: HTMLElement, onEventFunction: () => any): {
+    destroy(): void;
+};
+export declare function clickOutsideDialog(node: HTMLDialogElement, onEventFunction: () => any): {
+    destroy(): void;
+};

package/dist/helpers/clickOutside.js

@@ -0,0 +1,34 @@
+export function clickOutside(node, onEventFunction) {
+    const handleClick = (event) => {
+        let path = event.composedPath();
+        if (!path.includes(node)) {
+            onEventFunction();
+        }
+    };
+    document.addEventListener("click", handleClick);
+    return {
+        destroy() {
+            document.removeEventListener("click", handleClick);
+        },
+    };
+}
+export function clickOutsideDialog(node, onEventFunction) {
+    const handleClick = (event) => {
+        if (!node.open)
+            return;
+        let rect = node.getBoundingClientRect();
+        let isInDialog = rect.top <= event.clientY &&
+            event.clientY <= rect.top + rect.height &&
+            rect.left <= event.clientX &&
+            event.clientX <= rect.left + rect.width;
+        if (isInDialog === false && node.open === true) {
+            onEventFunction();
+        }
+    };
+    document.addEventListener("click", handleClick);
+    return {
+        destroy() {
+            document.removeEventListener("click", handleClick);
+        },
+    };
+}

package/dist/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./clickOutside";
+export * from "./activationHandler";

package/dist/helpers/index.js

@@ -0,0 +1,2 @@
+export * from "./clickOutside";
+export * from "./activationHandler";

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "$components";

package/dist/index.js

@@ -0,0 +1,2 @@
+// Reexport your entry components here
+export * from "$components";

package/dist/stores/QTheme.d.ts

@@ -0,0 +1,41 @@
+interface IMaterialDynamicColorsThemeColorFormatted {
+    primary: string;
+    "on-primary": string;
+    "primary-container": string;
+    "on-primary-container": string;
+    secondary: string;
+    "on-secondary": string;
+    "secondary-container": string;
+    "on-secondary-container": string;
+    tertiary: string;
+    "on-tertiary": string;
+    "tertiary-container": string;
+    "on-tertiary-container": string;
+    error: string;
+    "error-container": string;
+    "on-error": string;
+    "on-error-container": string;
+    background: string;
+    "on-background": string;
+    surface: string;
+    "on-surface": string;
+    "surface-variant": string;
+    "on-surface-variant": string;
+    outline: string;
+    "inverse-on-surface": string;
+    "inverse-surface": string;
+    "inverse-primary": string;
+    shadow: string;
+}
+interface IMaterialDynamicColorsThemeFormatted {
+    light: IMaterialDynamicColorsThemeColorFormatted;
+    dark: IMaterialDynamicColorsThemeColorFormatted;
+}
+type CSSDynamicColor = `${keyof IMaterialDynamicColorsThemeColorFormatted}-${keyof IMaterialDynamicColorsThemeFormatted}`;
+export declare const QTheme: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<Record<"error-dark" | "error-light" | "outline-dark" | "outline-light" | "primary-dark" | "primary-light" | "secondary-dark" | "secondary-light" | "tertiary-dark" | "tertiary-light" | "surface-dark" | "surface-light" | "surface-variant-dark" | "surface-variant-light" | "on-primary-dark" | "on-primary-light" | "primary-container-dark" | "primary-container-light" | "on-primary-container-dark" | "on-primary-container-light" | "on-secondary-dark" | "on-secondary-light" | "secondary-container-dark" | "secondary-container-light" | "on-secondary-container-dark" | "on-secondary-container-light" | "on-tertiary-dark" | "on-tertiary-light" | "tertiary-container-dark" | "tertiary-container-light" | "on-tertiary-container-dark" | "on-tertiary-container-light" | "error-container-dark" | "error-container-light" | "on-error-dark" | "on-error-light" | "on-error-container-dark" | "on-error-container-light" | "background-dark" | "background-light" | "on-background-dark" | "on-background-light" | "on-surface-dark" | "on-surface-light" | "on-surface-variant-dark" | "on-surface-variant-light" | "inverse-on-surface-dark" | "inverse-on-surface-light" | "inverse-surface-dark" | "inverse-surface-light" | "inverse-primary-dark" | "inverse-primary-light" | "shadow-dark" | "shadow-light", string>>, invalidate?: ((value?: Record<"error-dark" | "error-light" | "outline-dark" | "outline-light" | "primary-dark" | "primary-light" | "secondary-dark" | "secondary-light" | "tertiary-dark" | "tertiary-light" | "surface-dark" | "surface-light" | "surface-variant-dark" | "surface-variant-light" | "on-primary-dark" | "on-primary-light" | "primary-container-dark" | "primary-container-light" | "on-primary-container-dark" | "on-primary-container-light" | "on-secondary-dark" | "on-secondary-light" | "secondary-container-dark" | "secondary-container-light" | "on-secondary-container-dark" | "on-secondary-container-light" | "on-tertiary-dark" | "on-tertiary-light" | "tertiary-container-dark" | "tertiary-container-light" | "on-tertiary-container-dark" | "on-tertiary-container-light" | "error-container-dark" | "error-container-light" | "on-error-dark" | "on-error-light" | "on-error-container-dark" | "on-error-container-light" | "background-dark" | "background-light" | "on-background-dark" | "on-background-light" | "on-surface-dark" | "on-surface-light" | "on-surface-variant-dark" | "on-surface-variant-light" | "inverse-on-surface-dark" | "inverse-on-surface-light" | "inverse-surface-dark" | "inverse-surface-light" | "inverse-primary-dark" | "inverse-primary-light" | "shadow-dark" | "shadow-light", string> | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
+    setThemeColors: (from: string) => Promise<void>;
+    updateThemeColor: (color: CSSDynamicColor, newValue: string) => void;
+    apply: () => void;
+};
+export {};

package/dist/stores/QTheme.js

@@ -0,0 +1,53 @@
+import { writable } from "svelte/store";
+import materialDynamicColors from "material-dynamic-colors";
+import { convertCase } from "../utils/string";
+import QColors from "../utils/colors";
+async function prepareThemeColors(from) {
+    let theme = await materialDynamicColors(from);
+    //@ts-ignore
+    const themeColors = {};
+    let mode;
+    for (mode in theme) {
+        let color;
+        for (color in theme[mode]) {
+            let colorFormatted = convertCase(color, "camel", "kebab");
+            let cssColor = `${colorFormatted}-${mode}`;
+            themeColors[cssColor] = theme[mode][color];
+        }
+    }
+    return themeColors;
+}
+/* const defaultThemeColors = await prepareThemeColors("/cocktail.jpg"); */
+const defaultThemeColors = await prepareThemeColors("#3499E7");
+function themeBuilder() {
+    const { subscribe, set, update } = writable(defaultThemeColors);
+    const setThemeColors = async (from) => {
+        let newTheme = await prepareThemeColors(from);
+        set(newTheme);
+    };
+    const updateThemeColor = (color, newValue) => {
+        update(($themeColors) => {
+            $themeColors[color] = newValue;
+            return $themeColors;
+        });
+    };
+    const apply = () => {
+        let root = document.documentElement;
+        if (root === null)
+            return;
+        update(($themeColors) => {
+            let colorName;
+            for (colorName in $themeColors) {
+                root.style.setProperty(`--${colorName}`, QColors.hexToRgb($themeColors[colorName]).join(", "));
+            }
+            return $themeColors;
+        });
+    };
+    return {
+        subscribe,
+        setThemeColors,
+        updateThemeColor,
+        apply,
+    };
+}
+export const QTheme = themeBuilder();