@descope/web-components-ui 1.0.40 → 1.0.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/cjs/index.cjs.js +35 -18
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +416 -343
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/descope-button/index.js +3 -3
  7. package/src/components/descope-checkbox/index.js +2 -2
  8. package/src/components/descope-combo/index.js +12 -12
  9. package/src/components/descope-container/Container.js +57 -51
  10. package/src/components/descope-container/index.js +1 -1
  11. package/src/components/descope-date-picker/index.js +13 -7
  12. package/src/components/descope-email-field/index.js +2 -2
  13. package/src/components/descope-number-field/index.js +2 -2
  14. package/src/components/descope-password-field/index.js +2 -2
  15. package/src/components/descope-switch-toggle/index.js +2 -2
  16. package/src/components/descope-text-area/index.js +2 -2
  17. package/src/components/descope-text-field/index.js +3 -3
  18. package/src/componentsHelpers/componentNameValidationMixin.js +21 -17
  19. package/src/componentsHelpers/createProxy/helpers.js +31 -27
  20. package/src/componentsHelpers/createStyleMixin/helpers.js +65 -47
  21. package/src/componentsHelpers/createStyleMixin/index.js +76 -55
  22. package/src/componentsHelpers/draggableMixin.js +25 -26
  23. package/src/constants.js +1 -1
  24. package/src/dev/index.js +4 -3
  25. package/src/helpers.js +8 -6
  26. package/src/index.cjs.js +1 -1
  27. package/src/index.js +13 -13
  28. package/src/index.umd.js +11 -5
  29. package/src/theme/components/button.js +37 -37
  30. package/src/theme/components/container.js +10 -12
  31. package/src/theme/components/textArea.js +3 -3
  32. package/src/theme/components/textField.js +1 -1
  33. package/src/theme/globals.js +44 -36
  34. package/src/theme/index.js +2 -2
  35. package/src/themeHelpers/index.js +45 -30
  36. package/src/themeHelpers/processColors.js +10 -7
@@ -5,14 +5,16 @@ var set = require('lodash.set');
5
5
 
6
6
  const DESCOPE_PREFIX = 'descope';
7
7
 
8
- const kebabCase = str => str
9
- .replace(/([a-z])([A-Z])/g, "$1-$2")
10
- .replace(/[\s_.]+/g, '-')
11
- .toLowerCase();
8
+ const kebabCase = (str) =>
9
+ str
10
+ .replace(/([a-z])([A-Z])/g, '$1-$2')
11
+ .replace(/[\s_.]+/g, '-')
12
+ .toLowerCase();
12
13
 
13
14
  const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
14
15
 
15
- const getCssVarName = (...args) => `--${kebabCaseJoin(...args.filter(arg => !!arg))}`;
16
+ const getCssVarName = (...args) =>
17
+ `--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;
16
18
 
17
19
  const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
18
20
 
@@ -28,21 +30,25 @@ const transformTheme = (theme, path, getTransformation) => {
28
30
  }, {});
29
31
  };
30
32
 
31
- const stringifyArray = (strArr) => strArr.map((str) => (str.includes(" ") ? `"${str}"` : str)).join(", ");
33
+ const stringifyArray = (strArr) =>
34
+ strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
32
35
 
33
36
  const themeToCSSVarsObj = (theme) =>
34
37
  transformTheme(theme, [], (path, val) => ({
35
- [getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val,
38
+ [getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val
36
39
  }));
37
40
 
38
41
  const getThemeRefs = (theme, prefix) =>
39
- transformTheme(theme, [], (path) => set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`));
42
+ transformTheme(theme, [], (path) =>
43
+ set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
44
+ );
40
45
 
41
46
  const globalsThemeToStyle = (theme, themeName = '') => `
42
47
  *[data-theme="${themeName}"] {
43
48
  ${Object.entries(themeToCSSVarsObj(theme)).reduce(
44
- (acc, entry) => (acc += `${entry.join(":")};\n`), ''
45
- )}
49
+ (acc, entry) => (acc += `${entry.join(':')};\n`),
50
+ ''
51
+ )}
46
52
  }
47
53
  `;
48
54
 
@@ -55,16 +61,22 @@ const componentsThemeToStyleObj = (componentsTheme) =>
55
61
  // starts with underscore -> attribute selector
56
62
 
57
63
  const attrsSelector = restPath.reduce((acc, section, idx) => {
58
- if (section.startsWith('_')) return acc += `[${kebabCase(section.replace(/^_/, ''))}]`;
64
+ if (section.startsWith('_'))
65
+ return (acc += `[${kebabCase(section.replace(/^_/, ''))}="true"]`);
59
66
 
60
67
  const nextSection = restPath[idx + 1];
61
68
 
62
69
  if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
63
- console.error('theme generator', `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`);
70
+ console.error(
71
+ 'theme generator',
72
+ `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
73
+ );
64
74
  return acc;
65
75
  }
66
76
 
67
- return acc += `[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
77
+ return (acc += `[${kebabCase(section)}="${restPath
78
+ .splice(idx + 1, 1)
79
+ .join('')}"]`);
68
80
  }, '');
69
81
 
70
82
  let selector = `${getComponentName(component)}${attrsSelector}`;
@@ -73,12 +85,17 @@ const componentsThemeToStyleObj = (componentsTheme) =>
73
85
  [selector]: {
74
86
  [property]: val
75
87
  }
76
- }
88
+ };
77
89
  });
78
90
 
79
91
  const componentsThemeToStyle = (componentsTheme, themeName = '') =>
80
92
  Object.entries(componentsThemeToStyleObj(componentsTheme)).reduce(
81
- (acc, [selector, vars]) => (acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(vars).map(([key, val]) => `${key}: ${val}`).join(';\n')} \n}\n\n`),
93
+ (acc, [selector, vars]) =>
94
+ (acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(
95
+ vars
96
+ )
97
+ .map(([key, val]) => `${key}: ${val}`)
98
+ .join(';\n')} \n}\n\n`),
82
99
  ''
83
100
  );
84
101
 
@@ -87,7 +104,7 @@ ${globalsThemeToStyle(globals, themeName)}
87
104
  ${componentsThemeToStyle(components, themeName)}
88
105
  `;
89
106
 
90
- const useVar = varName => `var(${varName})`;
107
+ const useVar = (varName) => `var(${varName})`;
91
108
 
92
109
  const createHelperVars = (theme, prefix) => {
93
110
  const res = transformTheme(theme, [], (path, value) => {
@@ -99,10 +116,10 @@ const createHelperVars = (theme, prefix) => {
99
116
  const theme = set({}, [...modifiedPath, varName], value);
100
117
  const useVars = { [property]: useVar(varName) };
101
118
 
102
- return { theme, useVars, vars }
119
+ return { theme, useVars, vars };
103
120
  });
104
121
 
105
- return [res.theme, res.useVars, res.vars]
122
+ return [res.theme, res.useVars, res.vars];
106
123
  };
107
124
 
108
125
  exports.componentsThemeToStyle = componentsThemeToStyle;
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs.js","sources":["../../src/constants.js","../../src/helpers.js","../../src/componentsHelpers/index.js","../../src/themeHelpers/index.js"],"sourcesContent":["export const DESCOPE_PREFIX = 'descope'","export const kebabCase = str => str\n.replace(/([a-z])([A-Z])/g, \"$1-$2\")\n.replace(/[\\s_.]+/g, '-')\n.toLowerCase();\n\nexport const kebabCaseJoin = (...args) => kebabCase(args.join('-'))\n\nexport const getCssVarName = (...args) => `--${kebabCaseJoin(...args.filter(arg => !!arg))}`\n","import { DESCOPE_PREFIX } from '../constants';\nimport { kebabCaseJoin } from '../helpers';\n\nexport const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);\n\nexport const compose =\n\t(...fns) =>\n\t(val) =>\n\t\tfns.reduceRight((res, fn) => fn(res), val);\n\nexport { createStyleMixin } from './createStyleMixin';\nexport { draggableMixin } from './draggableMixin';\nexport { createProxy } from './createProxy';\nexport { inputMixin } from './inputMixin';\nexport { componentNameValidationMixin } from './componentNameValidationMixin';\n","import merge from \"lodash.merge\";\nimport set from \"lodash.set\";\nimport { DESCOPE_PREFIX } from \"../constants\";\nimport { getCssVarName, kebabCase } from \"../helpers\";\nimport { getComponentName } from \"../componentsHelpers\";\n\nconst getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path)\n\nconst transformTheme = (theme, path, getTransformation) => {\n\treturn Object.entries(theme).reduce((acc, [key, val]) => {\n\t\tif (val?.constructor !== Object) {\n\t\t\treturn merge(acc, getTransformation(path.concat(key), val));\n\t\t} else {\n\t\t\treturn merge(acc, transformTheme(val, [...path, key], getTransformation));\n\t\t}\n\t}, {});\n};\n\nconst stringifyArray = (strArr) => strArr.map((str) => (str.includes(\" \") ? `\"${str}\"` : str)).join(\", \")\n\nexport const themeToCSSVarsObj = (theme) =>\n\ttransformTheme(theme, [], (path, val) => ({\n\t\t[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val,\n\t}));\n\nexport const getThemeRefs = (theme, prefix) =>\n\ttransformTheme(theme, [], (path) => set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`));\n\nexport const globalsThemeToStyle = (theme, themeName = '') => `\n*[data-theme=\"${themeName}\"] {\n\t${Object.entries(themeToCSSVarsObj(theme)).reduce(\n\t(acc, entry) => (acc += `${entry.join(\":\")};\\n`), ''\n)}\n}\n`\n\nconst componentsThemeToStyleObj = (componentsTheme) =>\n\ttransformTheme(componentsTheme, [], (path, val) => {\n\t\tconst [component, ...restPath] = path\n\t\tconst property = restPath.pop()\n\n\t\t// do not start with underscore -> key:value, must have 2 no underscore attrs in a row\n\t\t// starts with underscore -> attribute selector\n\n\t\tconst attrsSelector = restPath.reduce((acc, section, idx) => {\n\t\t\tif (section.startsWith('_')) return acc += `[${kebabCase(section.replace(/^_/, ''))}]`;\n\n\t\t\tconst nextSection = restPath[idx + 1];\n\n\t\t\tif (typeof nextSection !== 'string' || nextSection.startsWith('_')) {\n\t\t\t\tconsole.error('theme generator', `your theme structure is invalid, attribute \"${section}\" is followed by \"${nextSection}\" which is not allowed`)\n\t\t\t\treturn acc;\n\t\t\t}\n\n\t\t\treturn acc += `[${kebabCase(section)}=\"${restPath.splice(idx + 1, 1).join('')}\"]`;\n\t\t}, '');\n\n\t\tlet selector = `${getComponentName(component)}${attrsSelector}`\n\n\t\treturn {\n\t\t\t[selector]: {\n\t\t\t\t[property]: val\n\t\t\t}\n\t\t}\n\t});\n\nexport const componentsThemeToStyle = (componentsTheme, themeName = '') =>\n\tObject.entries(componentsThemeToStyleObj(componentsTheme)).reduce(\n\t\t(acc, [selector, vars]) => (acc += `*[data-theme=\"${themeName}\"] ${selector} { \\n${Object.entries(vars).map(([key, val]) => `${key}: ${val}`).join(';\\n')} \\n}\\n\\n`),\n\t\t''\n\t);\n\nexport const themeToStyle = ({ globals, components }, themeName) => `\n${globalsThemeToStyle(globals, themeName)}\n${componentsThemeToStyle(components, themeName)}\n`\n\nconst useVar = varName => `var(${varName})`\n\nexport const createHelperVars = (theme, prefix) => {\n\tconst res = transformTheme(theme, [], (path, value) => {\n\t\tconst modifiedPath = [...path];\n\t\tconst property = modifiedPath.splice(-1)\n\t\tconst varName = getCssVarName(prefix, property)\n\n\t\tconst vars = { [property]: varName }\n\t\tconst theme = set({}, [...modifiedPath, varName], value)\n\t\tconst useVars = { [property]: useVar(varName) }\n\n\t\treturn { theme, useVars, vars }\n\t})\n\n\treturn [res.theme, res.useVars, res.vars]\n};\n"],"names":[],"mappings":";;;;;AAAO,MAAM,cAAc,GAAG;;ACAvB,MAAM,SAAS,GAAG,GAAG,IAAI,GAAG;AACnC,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC;AACpC,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG,CAAC;AACzB,CAAC,WAAW,EAAE,CAAC;AACf;AACO,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAC;AACnE;AACO,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,KAAK,CAAC,EAAE,EAAE,aAAa,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;;ACJpF,MAAM,gBAAgB,GAAG,CAAC,IAAI,KAAK,aAAa,CAAC,cAAc,EAAE,IAAI,CAAC;;ACG7E,MAAM,UAAU,GAAG,CAAC,IAAI,KAAK,aAAa,CAAC,cAAc,EAAE,GAAG,IAAI,EAAC;AACnE;AACA,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,iBAAiB,KAAK;AAC3D,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,KAAK;AAC1D,EAAE,IAAI,GAAG,EAAE,WAAW,KAAK,MAAM,EAAE;AACnC,GAAG,OAAO,KAAK,CAAC,GAAG,EAAE,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;AAC/D,GAAG,MAAM;AACT,GAAG,OAAO,KAAK,CAAC,GAAG,EAAE,cAAc,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAC7E,GAAG;AACH,EAAE,EAAE,EAAE,CAAC,CAAC;AACR,CAAC,CAAC;AACF;AACA,MAAM,cAAc,GAAG,CAAC,MAAM,KAAK,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAC;AACzG;AACY,MAAC,iBAAiB,GAAG,CAAC,KAAK;AACvC,CAAC,cAAc,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,EAAE,GAAG,MAAM;AAC3C,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG,GAAG;AACpE,EAAE,CAAC,EAAE;AACL;AACY,MAAC,YAAY,GAAG,CAAC,KAAK,EAAE,MAAM;AAC1C,CAAC,cAAc,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,MAAM,GAAG,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;AAC7G;AACY,MAAC,mBAAmB,GAAG,CAAC,KAAK,EAAE,SAAS,GAAG,EAAE,KAAK,CAAC;AAC/D,cAAc,EAAE,SAAS,CAAC;AAC1B,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;AAClD,CAAC,CAAC,GAAG,EAAE,KAAK,MAAM,GAAG,IAAI,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE;AACrD,CAAC,CAAC;AACF;AACA,EAAC;AACD;AACA,MAAM,yBAAyB,GAAG,CAAC,eAAe;AAClD,CAAC,cAAc,CAAC,eAAe,EAAE,EAAE,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK;AACpD,EAAE,MAAM,CAAC,SAAS,EAAE,GAAG,QAAQ,CAAC,GAAG,KAAI;AACvC,EAAE,MAAM,QAAQ,GAAG,QAAQ,CAAC,GAAG,GAAE;AACjC;AACA;AACA;AACA;AACA,EAAE,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,KAAK;AAC/D,GAAG,IAAI,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC1F;AACA,GAAG,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;AACzC;AACA,GAAG,IAAI,OAAO,WAAW,KAAK,QAAQ,IAAI,WAAW,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;AACvE,IAAI,OAAO,CAAC,KAAK,CAAC,iBAAiB,EAAE,CAAC,4CAA4C,EAAE,OAAO,CAAC,kBAAkB,EAAE,WAAW,CAAC,sBAAsB,CAAC,EAAC;AACpJ,IAAI,OAAO,GAAG,CAAC;AACf,IAAI;AACJ;AACA,GAAG,OAAO,GAAG,IAAI,CAAC,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACrF,GAAG,EAAE,EAAE,CAAC,CAAC;AACT;AACA,EAAE,IAAI,QAAQ,GAAG,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC,EAAE,aAAa,CAAC,EAAC;AACjE;AACA,EAAE,OAAO;AACT,GAAG,CAAC,QAAQ,GAAG;AACf,IAAI,CAAC,QAAQ,GAAG,GAAG;AACnB,IAAI;AACJ,GAAG;AACH,EAAE,CAAC,CAAC;AACJ;AACY,MAAC,sBAAsB,GAAG,CAAC,eAAe,EAAE,SAAS,GAAG,EAAE;AACtE,CAAC,MAAM,CAAC,OAAO,CAAC,yBAAyB,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM;AAClE,EAAE,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,GAAG,EAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;AACtK,EAAE,EAAE;AACJ,GAAG;AACH;AACY,MAAC,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,SAAS,KAAK,CAAC;AACrE,EAAE,mBAAmB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAC1C,EAAE,sBAAsB,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAChD,EAAC;AACD;AACA,MAAM,MAAM,GAAG,OAAO,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,EAAC;AAC3C;AACY,MAAC,gBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK;AACnD,CAAC,MAAM,GAAG,GAAG,cAAc,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK;AACxD,EAAE,MAAM,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;AACjC,EAAE,MAAM,QAAQ,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAC;AAC1C,EAAE,MAAM,OAAO,GAAG,aAAa,CAAC,MAAM,EAAE,QAAQ,EAAC;AACjD;AACA,EAAE,MAAM,IAAI,GAAG,EAAE,CAAC,QAAQ,GAAG,OAAO,GAAE;AACtC,EAAE,MAAM,KAAK,GAAG,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,YAAY,EAAE,OAAO,CAAC,EAAE,KAAK,EAAC;AAC1D,EAAE,MAAM,OAAO,GAAG,EAAE,CAAC,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,GAAE;AACjD;AACA,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE;AACjC,EAAE,EAAC;AACH;AACA,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC;AAC1C;;;;;;;;;"}
1
+ {"version":3,"file":"index.cjs.js","sources":["../../src/constants.js","../../src/helpers.js","../../src/componentsHelpers/index.js","../../src/themeHelpers/index.js"],"sourcesContent":["export const DESCOPE_PREFIX = 'descope';\n","export const kebabCase = (str) =>\n\tstr\n\t\t.replace(/([a-z])([A-Z])/g, '$1-$2')\n\t\t.replace(/[\\s_.]+/g, '-')\n\t\t.toLowerCase();\n\nexport const kebabCaseJoin = (...args) => kebabCase(args.join('-'));\n\nexport const getCssVarName = (...args) =>\n\t`--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;\n","import { DESCOPE_PREFIX } from '../constants';\nimport { kebabCaseJoin } from '../helpers';\n\nexport const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);\n\nexport const compose =\n\t(...fns) =>\n\t(val) =>\n\t\tfns.reduceRight((res, fn) => fn(res), val);\n\nexport { createStyleMixin } from './createStyleMixin';\nexport { draggableMixin } from './draggableMixin';\nexport { createProxy } from './createProxy';\nexport { inputMixin } from './inputMixin';\nexport { componentNameValidationMixin } from './componentNameValidationMixin';\n","import merge from 'lodash.merge';\nimport set from 'lodash.set';\nimport { DESCOPE_PREFIX } from '../constants';\nimport { getCssVarName, kebabCase } from '../helpers';\nimport { getComponentName } from '../componentsHelpers';\n\nconst getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);\n\nconst transformTheme = (theme, path, getTransformation) => {\n\treturn Object.entries(theme).reduce((acc, [key, val]) => {\n\t\tif (val?.constructor !== Object) {\n\t\t\treturn merge(acc, getTransformation(path.concat(key), val));\n\t\t} else {\n\t\t\treturn merge(acc, transformTheme(val, [...path, key], getTransformation));\n\t\t}\n\t}, {});\n};\n\nconst stringifyArray = (strArr) =>\n\tstrArr.map((str) => (str.includes(' ') ? `\"${str}\"` : str)).join(', ');\n\nexport const themeToCSSVarsObj = (theme) =>\n\ttransformTheme(theme, [], (path, val) => ({\n\t\t[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val\n\t}));\n\nexport const getThemeRefs = (theme, prefix) =>\n\ttransformTheme(theme, [], (path) =>\n\t\tset({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)\n\t);\n\nexport const globalsThemeToStyle = (theme, themeName = '') => `\n*[data-theme=\"${themeName}\"] {\n\t${Object.entries(themeToCSSVarsObj(theme)).reduce(\n\t\t(acc, entry) => (acc += `${entry.join(':')};\\n`),\n\t\t''\n\t)}\n}\n`;\n\nconst componentsThemeToStyleObj = (componentsTheme) =>\n\ttransformTheme(componentsTheme, [], (path, val) => {\n\t\tconst [component, ...restPath] = path;\n\t\tconst property = restPath.pop();\n\n\t\t// do not start with underscore -> key:value, must have 2 no underscore attrs in a row\n\t\t// starts with underscore -> attribute selector\n\n\t\tconst attrsSelector = restPath.reduce((acc, section, idx) => {\n\t\t\tif (section.startsWith('_'))\n\t\t\t\treturn (acc += `[${kebabCase(section.replace(/^_/, ''))}=\"true\"]`);\n\n\t\t\tconst nextSection = restPath[idx + 1];\n\n\t\t\tif (typeof nextSection !== 'string' || nextSection.startsWith('_')) {\n\t\t\t\tconsole.error(\n\t\t\t\t\t'theme generator',\n\t\t\t\t\t`your theme structure is invalid, attribute \"${section}\" is followed by \"${nextSection}\" which is not allowed`\n\t\t\t\t);\n\t\t\t\treturn acc;\n\t\t\t}\n\n\t\t\treturn (acc += `[${kebabCase(section)}=\"${restPath\n\t\t\t\t.splice(idx + 1, 1)\n\t\t\t\t.join('')}\"]`);\n\t\t}, '');\n\n\t\tlet selector = `${getComponentName(component)}${attrsSelector}`;\n\n\t\treturn {\n\t\t\t[selector]: {\n\t\t\t\t[property]: val\n\t\t\t}\n\t\t};\n\t});\n\nexport const componentsThemeToStyle = (componentsTheme, themeName = '') =>\n\tObject.entries(componentsThemeToStyleObj(componentsTheme)).reduce(\n\t\t(acc, [selector, vars]) =>\n\t\t\t(acc += `*[data-theme=\"${themeName}\"] ${selector} { \\n${Object.entries(\n\t\t\t\tvars\n\t\t\t)\n\t\t\t\t.map(([key, val]) => `${key}: ${val}`)\n\t\t\t\t.join(';\\n')} \\n}\\n\\n`),\n\t\t''\n\t);\n\nexport const themeToStyle = ({ globals, components }, themeName) => `\n${globalsThemeToStyle(globals, themeName)}\n${componentsThemeToStyle(components, themeName)}\n`;\n\nconst useVar = (varName) => `var(${varName})`;\n\nexport const createHelperVars = (theme, prefix) => {\n\tconst res = transformTheme(theme, [], (path, value) => {\n\t\tconst modifiedPath = [...path];\n\t\tconst property = modifiedPath.splice(-1);\n\t\tconst varName = getCssVarName(prefix, property);\n\n\t\tconst vars = { [property]: varName };\n\t\tconst theme = set({}, [...modifiedPath, varName], value);\n\t\tconst useVars = { [property]: useVar(varName) };\n\n\t\treturn { theme, useVars, vars };\n\t});\n\n\treturn [res.theme, res.useVars, res.vars];\n};\n"],"names":[],"mappings":"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"}