@lukso/web-components 1.5.4 → 1.6.1

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 (207) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/README.md +3 -12
  3. package/dist/assets/images/lukso-logo.svg +3 -0
  4. package/dist/assets/images/profile-default.png +0 -0
  5. package/dist/components/index.d.ts.map +1 -0
  6. package/dist/components/index.js +828 -814
  7. package/dist/components/index.umd.cjs +156 -155
  8. package/dist/components/lukso-button/index.d.ts.map +1 -0
  9. package/dist/components/lukso-button/index.js +104 -104
  10. package/dist/components/lukso-button/index.umd.cjs +5 -5
  11. package/dist/components/lukso-card/index.d.ts +5 -2
  12. package/dist/components/lukso-card/index.d.ts.map +1 -0
  13. package/dist/components/lukso-card/index.js +221 -204
  14. package/dist/components/lukso-card/index.umd.cjs +26 -25
  15. package/dist/components/lukso-icon/icons/add-photo.d.ts.map +1 -0
  16. package/dist/components/lukso-icon/icons/arrow-down-lg.d.ts.map +1 -0
  17. package/dist/components/lukso-icon/icons/arrow-down-sm.d.ts.map +1 -0
  18. package/dist/components/lukso-icon/icons/arrow-left-lg.d.ts.map +1 -0
  19. package/dist/components/lukso-icon/icons/arrow-left-sm.d.ts.map +1 -0
  20. package/dist/components/lukso-icon/icons/arrow-right-lg.d.ts.map +1 -0
  21. package/dist/components/lukso-icon/icons/arrow-right-sm.d.ts.map +1 -0
  22. package/dist/components/lukso-icon/icons/arrow-up-lg.d.ts.map +1 -0
  23. package/dist/components/lukso-icon/icons/arrow-up-sm.d.ts.map +1 -0
  24. package/dist/components/lukso-icon/icons/barbell-outline.d.ts.map +1 -0
  25. package/dist/components/lukso-icon/icons/bulb-outline.d.ts.map +1 -0
  26. package/dist/components/lukso-icon/icons/camera.d.ts.map +1 -0
  27. package/dist/components/lukso-icon/icons/clipboard.d.ts.map +1 -0
  28. package/dist/components/lukso-icon/icons/clock.d.ts.map +1 -0
  29. package/dist/components/lukso-icon/icons/close-lg.d.ts.map +1 -0
  30. package/dist/components/lukso-icon/icons/close-sm.d.ts.map +1 -0
  31. package/dist/components/lukso-icon/icons/cloud.d.ts.map +1 -0
  32. package/dist/components/lukso-icon/icons/compass-outline.d.ts.map +1 -0
  33. package/dist/components/lukso-icon/icons/complete-filled-fade-in.d.ts.map +1 -0
  34. package/dist/components/lukso-icon/icons/complete-filled.d.ts.map +1 -0
  35. package/dist/components/lukso-icon/icons/complete-outline.d.ts.map +1 -0
  36. package/dist/components/lukso-icon/icons/connect.d.ts.map +1 -0
  37. package/dist/components/lukso-icon/icons/connections.d.ts.map +1 -0
  38. package/dist/components/lukso-icon/icons/contract-lock.d.ts.map +1 -0
  39. package/dist/components/lukso-icon/icons/controller.d.ts.map +1 -0
  40. package/dist/components/lukso-icon/icons/copy.d.ts.map +1 -0
  41. package/dist/components/lukso-icon/icons/cross-outline.d.ts.map +1 -0
  42. package/dist/components/lukso-icon/icons/dots.d.ts.map +1 -0
  43. package/dist/components/lukso-icon/icons/edit.d.ts.map +1 -0
  44. package/dist/components/lukso-icon/icons/error.d.ts.map +1 -0
  45. package/dist/components/lukso-icon/icons/eth-logo.d.ts.map +1 -0
  46. package/dist/components/lukso-icon/icons/expand.d.ts.map +1 -0
  47. package/dist/components/lukso-icon/icons/extension.d.ts.map +1 -0
  48. package/dist/components/lukso-icon/icons/eye-hide.d.ts.map +1 -0
  49. package/dist/components/lukso-icon/icons/eye-show.d.ts.map +1 -0
  50. package/dist/components/lukso-icon/icons/filter.d.ts.map +1 -0
  51. package/dist/components/lukso-icon/icons/fish-outline.d.ts.map +1 -0
  52. package/dist/components/lukso-icon/icons/flip.d.ts.map +1 -0
  53. package/dist/components/lukso-icon/icons/globe.d.ts.map +1 -0
  54. package/dist/components/lukso-icon/icons/google-color.d.ts.map +1 -0
  55. package/dist/components/lukso-icon/icons/hamburger.d.ts.map +1 -0
  56. package/dist/components/lukso-icon/icons/infinite.d.ts.map +1 -0
  57. package/dist/components/lukso-icon/icons/information.d.ts.map +1 -0
  58. package/dist/components/lukso-icon/icons/key-outline.d.ts.map +1 -0
  59. package/dist/components/lukso-icon/icons/link.d.ts.map +1 -0
  60. package/dist/components/lukso-icon/icons/link1.d.ts.map +1 -0
  61. package/dist/components/lukso-icon/icons/link2.d.ts.map +1 -0
  62. package/dist/components/lukso-icon/icons/link3.d.ts.map +1 -0
  63. package/dist/components/lukso-icon/icons/link4.d.ts.map +1 -0
  64. package/dist/components/lukso-icon/icons/loading.d.ts.map +1 -0
  65. package/dist/components/lukso-icon/icons/location.d.ts.map +1 -0
  66. package/dist/components/lukso-icon/icons/locked.d.ts.map +1 -0
  67. package/dist/components/lukso-icon/icons/login-2.d.ts.map +1 -0
  68. package/dist/components/lukso-icon/icons/login-3.d.ts.map +1 -0
  69. package/dist/components/lukso-icon/icons/login.d.ts.map +1 -0
  70. package/dist/components/lukso-icon/icons/logo-chrome.d.ts.map +1 -0
  71. package/dist/components/lukso-icon/icons/lyx-logo.d.ts.map +1 -0
  72. package/dist/components/lukso-icon/icons/mail.d.ts.map +1 -0
  73. package/dist/components/lukso-icon/icons/menu-1.d.ts.map +1 -0
  74. package/dist/components/lukso-icon/icons/menu-2.d.ts.map +1 -0
  75. package/dist/components/lukso-icon/icons/migrate.d.ts.map +1 -0
  76. package/dist/components/lukso-icon/icons/minimize.d.ts.map +1 -0
  77. package/dist/components/lukso-icon/icons/network.d.ts.map +1 -0
  78. package/dist/components/lukso-icon/icons/notifications.d.ts.map +1 -0
  79. package/dist/components/lukso-icon/icons/phone-portrait-outline.d.ts.map +1 -0
  80. package/dist/components/lukso-icon/icons/pin.d.ts.map +1 -0
  81. package/dist/components/lukso-icon/icons/play-filled.d.ts.map +1 -0
  82. package/dist/components/lukso-icon/icons/play-outline.d.ts.map +1 -0
  83. package/dist/components/lukso-icon/icons/plus.d.ts.map +1 -0
  84. package/dist/components/lukso-icon/icons/profile-add.d.ts.map +1 -0
  85. package/dist/components/lukso-icon/icons/profile-export.d.ts.map +1 -0
  86. package/dist/components/lukso-icon/icons/profile-import.d.ts.map +1 -0
  87. package/dist/components/lukso-icon/icons/profile-recovery-2.d.ts.map +1 -0
  88. package/dist/components/lukso-icon/icons/profile-recovery.d.ts.map +1 -0
  89. package/dist/components/lukso-icon/icons/profile-restore.d.ts.map +1 -0
  90. package/dist/components/lukso-icon/icons/profile.d.ts.map +1 -0
  91. package/dist/components/lukso-icon/icons/progress-complete.d.ts.map +1 -0
  92. package/dist/components/lukso-icon/icons/progress-indicator.d.ts.map +1 -0
  93. package/dist/components/lukso-icon/icons/pulse-dot.d.ts.map +1 -0
  94. package/dist/components/lukso-icon/icons/qr-code.d.ts.map +1 -0
  95. package/dist/components/lukso-icon/icons/relayer.d.ts.map +1 -0
  96. package/dist/components/lukso-icon/icons/reload.d.ts.map +1 -0
  97. package/dist/components/lukso-icon/icons/return-down.d.ts.map +1 -0
  98. package/dist/components/lukso-icon/icons/return-left.d.ts.map +1 -0
  99. package/dist/components/lukso-icon/icons/return-right.d.ts.map +1 -0
  100. package/dist/components/lukso-icon/icons/return-up.d.ts.map +1 -0
  101. package/dist/components/lukso-icon/icons/search.d.ts.map +1 -0
  102. package/dist/components/lukso-icon/icons/settings.d.ts.map +1 -0
  103. package/dist/components/lukso-icon/icons/smart-contract-doc.d.ts.map +1 -0
  104. package/dist/components/lukso-icon/icons/smart-contract.d.ts.map +1 -0
  105. package/dist/components/lukso-icon/icons/star-filled.d.ts.map +1 -0
  106. package/dist/components/lukso-icon/icons/star-outline.d.ts.map +1 -0
  107. package/dist/components/lukso-icon/icons/step-dot.d.ts.map +1 -0
  108. package/dist/components/lukso-icon/icons/step-progress.d.ts.map +1 -0
  109. package/dist/components/lukso-icon/icons/steps.d.ts.map +1 -0
  110. package/dist/components/lukso-icon/icons/tick.d.ts.map +1 -0
  111. package/dist/components/lukso-icon/icons/timer-outline.d.ts.map +1 -0
  112. package/dist/components/lukso-icon/icons/transaction-receive.d.ts.map +1 -0
  113. package/dist/components/lukso-icon/icons/transaction-send.d.ts.map +1 -0
  114. package/dist/components/lukso-icon/icons/transfer.d.ts.map +1 -0
  115. package/dist/components/lukso-icon/icons/trash.d.ts.map +1 -0
  116. package/dist/components/lukso-icon/icons/turn-down.d.ts.map +1 -0
  117. package/dist/components/lukso-icon/icons/turn-left.d.ts.map +1 -0
  118. package/dist/components/lukso-icon/icons/turn-right.d.ts.map +1 -0
  119. package/dist/components/lukso-icon/icons/turn-up.d.ts.map +1 -0
  120. package/dist/components/lukso-icon/icons/unlocked.d.ts.map +1 -0
  121. package/dist/components/lukso-icon/icons/wallet-outline.d.ts.map +1 -0
  122. package/dist/components/lukso-icon/icons/warning-round.d.ts.map +1 -0
  123. package/dist/components/lukso-icon/icons/warning-triangle.d.ts.map +1 -0
  124. package/dist/components/lukso-icon/index.d.ts.map +1 -0
  125. package/dist/components/lukso-icon/index.js +78 -78
  126. package/dist/components/lukso-icon/index.umd.cjs +224 -224
  127. package/dist/components/lukso-input/index.d.ts.map +1 -0
  128. package/dist/components/lukso-input/index.js +31 -30
  129. package/dist/components/lukso-input/index.umd.cjs +13 -13
  130. package/dist/components/lukso-navbar/index.d.ts.map +1 -0
  131. package/dist/components/lukso-navbar/index.js +2 -2
  132. package/dist/components/lukso-navbar/index.umd.cjs +2 -2
  133. package/dist/components/lukso-profile/index.d.ts.map +1 -0
  134. package/dist/components/lukso-profile/index.js +2 -2
  135. package/dist/components/lukso-profile/index.umd.cjs +2 -2
  136. package/dist/components/lukso-sanitize/index.d.ts.map +1 -0
  137. package/dist/components/lukso-sanitize/index.js +39 -39
  138. package/dist/components/lukso-sanitize/index.umd.cjs +1 -1
  139. package/dist/components/lukso-tag/index.d.ts.map +1 -0
  140. package/dist/components/lukso-tag/index.js +1 -1
  141. package/dist/components/lukso-tag/index.umd.cjs +1 -1
  142. package/dist/components/lukso-test/index.d.ts.map +1 -0
  143. package/dist/components/lukso-test/index.js +550 -550
  144. package/dist/components/lukso-test/index.umd.cjs +12 -12
  145. package/dist/components/lukso-username/index.d.ts.map +1 -0
  146. package/dist/components/lukso-username/index.js +19 -19
  147. package/dist/components/lukso-username/index.umd.cjs +1 -1
  148. package/dist/components/lukso-wizard/index.d.ts.map +1 -0
  149. package/dist/components/lukso-wizard/index.js +28 -28
  150. package/dist/components/lukso-wizard/index.umd.cjs +9 -9
  151. package/dist/index.d.ts.map +1 -0
  152. package/dist/index.js +828 -814
  153. package/dist/index.umd.cjs +156 -155
  154. package/dist/sass/typography.scss +23 -3
  155. package/dist/shared/assets/fonts/index.d.ts.map +1 -0
  156. package/dist/shared/assets/images/index.d.ts.map +1 -0
  157. package/dist/shared/assets/index.d.ts.map +1 -0
  158. package/dist/shared/directives/custom-class-map/index.d.ts.map +1 -0
  159. package/dist/shared/directives/index.d.ts.map +1 -0
  160. package/dist/shared/styles/index.d.ts.map +1 -0
  161. package/dist/shared/tailwind-element/index.d.ts.map +1 -0
  162. package/dist/shared/tailwind-element/index.js +21 -21
  163. package/dist/shared/tailwind-element/index.umd.cjs +6 -6
  164. package/dist/shared/tailwind-element.js +21 -21
  165. package/dist/shared/tailwind-element.umd.cjs +6 -6
  166. package/dist/shared/utils/color-palette.d.ts.map +1 -0
  167. package/dist/shared/{styles/hslColorMap.d.ts → utils/hsl-color-map.d.ts} +1 -1
  168. package/dist/shared/utils/hsl-color-map.d.ts.map +1 -0
  169. package/dist/shared/utils/{sliceAddress.d.ts → slice-address.d.ts} +1 -1
  170. package/dist/shared/utils/slice-address.d.ts.map +1 -0
  171. package/dist/styles/main.css +18 -3
  172. package/dist/styles/main.css.map +1 -0
  173. package/package.json +6 -12
  174. package/src/components/lukso-card/index.ts +16 -3
  175. package/src/components/lukso-card/lukso-card.stories.ts +56 -4
  176. package/src/components/lukso-card/style.scss +3 -0
  177. package/src/components/lukso-icon/style.scss +1 -1
  178. package/src/components/lukso-input/index.ts +3 -2
  179. package/src/components/lukso-navbar/index.ts +1 -1
  180. package/src/components/lukso-profile/index.ts +1 -1
  181. package/src/components/lukso-username/index.ts +1 -1
  182. package/src/docs/animations.stories.mdx +83 -0
  183. package/src/docs/colors.stories.mdx +77 -0
  184. package/src/docs/drop-shadows.stories.mdx +108 -0
  185. package/src/docs/icons.stories.mdx +1590 -0
  186. package/src/docs/typography.stories.mdx +253 -0
  187. package/src/shared/assets/images/lukso-logo.svg +3 -0
  188. package/src/shared/assets/images/profile-default.png +0 -0
  189. package/src/shared/styles/typography.scss +23 -3
  190. package/src/shared/utils/__tests__/{sliceAddress.spec.ts → slice-address.spec.ts} +1 -1
  191. package/src/shared/{styles → utils}/color-palette.ts +1 -1
  192. package/src/shared/utils/copy-assets.ts +35 -0
  193. package/tailwind.config.cjs +3 -0
  194. package/tools/color-palette.cjs +17 -62
  195. package/tools/color-palette.d.ts +2 -5
  196. package/tools/color-palette.d.ts.map +1 -1
  197. package/tools/copy-assets.cjs +139 -0
  198. package/tools/copy-assets.d.ts +10 -0
  199. package/tools/copy-assets.d.ts.map +1 -0
  200. package/dist/copy-assets/index.js +0 -19
  201. package/dist/copy-assets/index.umd.cjs +0 -1
  202. package/dist/sass/color-palette.ts +0 -76
  203. package/dist/shared/utils/copy-assets.d.ts +0 -2
  204. package/src/shared/styles/hslColorMap.ts +0 -20
  205. /package/dist/shared/{styles → utils}/color-palette.d.ts +0 -0
  206. /package/{dist/sass/hslColorMap.ts → src/shared/utils/hsl-color-map.ts} +0 -0
  207. /package/src/shared/utils/{sliceAddress.ts → slice-address.ts} +0 -0
@@ -1,19 +0,0 @@
1
- const i = {};
2
- function r(n, c) {
3
- let e = c;
4
- i.existsSync(c) && i.lstatSync(c).isDirectory() && (e = i.join(c, i.basename(n))), i.writeFileSync(e, i.readFileSync(n));
5
- }
6
- function s(n, c) {
7
- let e = [];
8
- const t = i.join(c, i.basename(n));
9
- i.existsSync(t) || i.mkdirSync(t), i.lstatSync(n).isDirectory() && (e = i.readdirSync(n), e.forEach(function(o) {
10
- const y = i.join(n, o);
11
- i.lstatSync(y).isDirectory() ? s(y, t) : r(y, t);
12
- }));
13
- }
14
- const S = (n, c) => {
15
- i.existsSync(n) || i.mkdirSync(n, { recursive: !0 }), s(c, n);
16
- };
17
- export {
18
- S as copyAssets
19
- };
@@ -1 +0,0 @@
1
- (function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports):typeof define=="function"&&define.amd?define(["exports"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.web_component_copy_assets={}))})(this,function(t){"use strict";const e={};function f(n,i){let c=i;e.existsSync(i)&&e.lstatSync(i).isDirectory()&&(c=e.join(i,e.basename(n))),e.writeFileSync(c,e.readFileSync(n))}function y(n,i){let c=[];const o=e.join(i,e.basename(n));e.existsSync(o)||e.mkdirSync(o),e.lstatSync(n).isDirectory()&&(c=e.readdirSync(n),c.forEach(function(l){const s=e.join(n,l);e.lstatSync(s).isDirectory()?y(s,o):f(s,o)}))}const d=(n,i)=>{e.existsSync(n)||e.mkdirSync(n,{recursive:!0}),y(i,n)};t.copyAssets=d,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
@@ -1,76 +0,0 @@
1
- import tinycolor from 'tinycolor2'
2
-
3
- import { hslColorMap } from './hslColorMap'
4
-
5
- type ColorMap = {
6
- [key: string]: string
7
- }
8
-
9
- /**
10
- * Color palette based on the structure thats compatible with Tailwind config
11
- */
12
- export const colorPalette = {
13
- neutral: hslColorMap(
14
- 206,
15
- 30,
16
- [
17
- 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95,
18
- 97, 98, 100,
19
- ]
20
- ),
21
- honey: hslColorMap(42, 93, [72, 75, 82, 85, 92]),
22
- coral: hslColorMap(14, 87, [65, 74, 75, 84, 85, 94]),
23
- warm: hslColorMap(25, 100, [77, 87, 97]),
24
- 'sea-salt': hslColorMap(180, 17, [57, 67, 88]),
25
- cloud: hslColorMap(200, 38, [43, 75, 88]),
26
- ocean: hslColorMap(209, 38, [38, 75, 88]),
27
- sky: hslColorMap(209, 64, [64, 75, 85]),
28
- lukso: hslColorMap(335, 33, [70, 80, 90]),
29
- yellow: hslColorMap(36, 100, [55, 65, 75, 85]),
30
- green: hslColorMap(135, 57, [45, 54, 75, 85]),
31
- blue: hslColorMap(216, 96, [50, 60, 75, 85]),
32
- red: hslColorMap(0, 75, [55, 65, 75, 85]),
33
- purple: hslColorMap(230, 24, [94, 82, 63, 58, 51, 41, 31, 15]),
34
- pink: hslColorMap(11, 73, [97, 96, 95, 94, 93, 92, 91, 90]),
35
- 'gradient-1': {
36
- start: '#D39B9D',
37
- end: '#9071D1',
38
- },
39
- 'gradient-2': {
40
- start: '#F8DAD3',
41
- end: '#CC99AE',
42
- },
43
- 'gradient-3': {
44
- start: tinycolor({ h: 230, s: 20, l: 28 }).toHexString(),
45
- end: tinycolor({ h: 230, s: 24, l: 51 }).toHexString(),
46
- },
47
- }
48
-
49
- /**
50
- * Splits a color map into smaller color maps
51
- *
52
- * @param colors - color map to split
53
- * @param from - index to start from
54
- * @param to - index to end at
55
- * @returns a new color map
56
- */
57
- const splitColor = (colors: ColorMap, from: number, to: number): ColorMap => {
58
- return Object.keys(colors)
59
- .slice(from, to)
60
- .reduce((result, key) => {
61
- result[key] = colors[key]
62
-
63
- return result
64
- }, {})
65
- }
66
-
67
- /**
68
- * Color map subsets that can be used in the Storybook preview
69
- */
70
- export const neutral1 = splitColor(colorPalette.neutral, 0, 8)
71
- export const neutral2 = splitColor(colorPalette.neutral, 8, 16)
72
- export const neutral3 = splitColor(
73
- colorPalette.neutral,
74
- 16,
75
- Object.keys(colorPalette.neutral).length
76
- )
@@ -1,2 +0,0 @@
1
- export declare const copyAssets: (assetDir: string, assets: any) => void;
2
- //# sourceMappingURL=copy-assets.d.ts.map
@@ -1,20 +0,0 @@
1
- import tinycolor from 'tinycolor2'
2
-
3
- /**
4
- * Generates a color map for a given hue, saturation and lightness values
5
- *
6
- * @param {*} h - hue
7
- * @param {*} s - saturation
8
- * @param {*} l - lightness as an array
9
- * @returns object containing lightness as key and hex color as value e.g. { 10: '#000000', 20: '#111111' }
10
- */
11
- export const hslColorMap = (h, s, l) => {
12
- const colors = {}
13
-
14
- for (let i = 0; i < l.length; i++) {
15
- const lightness = l[i]
16
- colors[lightness] = tinycolor({ h, s, l: lightness }).toHexString()
17
- }
18
-
19
- return colors
20
- }