@dnanpm/ui-components 0.8.0 → 0.10.0

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 (249) hide show
  1. package/README.md +13 -0
  2. package/dist/components/Accordion/Accordion.css +9 -2
  3. package/dist/components/AccordionItem/AccordionItem.cjs +4 -4
  4. package/dist/components/AccordionItem/AccordionItem.cjs.map +1 -1
  5. package/dist/components/AccordionItem/AccordionItem.css +8 -2
  6. package/dist/components/AccordionItem/AccordionItem.d.ts.map +1 -1
  7. package/dist/components/AccordionItem/AccordionItem.js +2 -2
  8. package/dist/components/AccordionItem/AccordionItem.js.map +1 -1
  9. package/dist/components/Avatar/Avatar.cjs +83 -0
  10. package/dist/components/Avatar/Avatar.cjs.map +1 -0
  11. package/dist/components/Avatar/Avatar.css +188 -0
  12. package/dist/components/Avatar/Avatar.d.ts +3 -0
  13. package/dist/components/Avatar/Avatar.d.ts.map +1 -0
  14. package/dist/components/Avatar/Avatar.js +83 -0
  15. package/dist/components/Avatar/Avatar.js.map +1 -0
  16. package/dist/components/Avatar/Avatar.module.css.cjs +40 -0
  17. package/dist/components/Avatar/Avatar.module.css.cjs.map +1 -0
  18. package/dist/components/Avatar/Avatar.module.css.js +40 -0
  19. package/dist/components/Avatar/Avatar.module.css.js.map +1 -0
  20. package/dist/components/Avatar/Avatar.types.d.ts +66 -0
  21. package/dist/components/Avatar/Avatar.types.d.ts.map +1 -0
  22. package/dist/components/Avatar/Avatar.utils.cjs +17 -0
  23. package/dist/components/Avatar/Avatar.utils.cjs.map +1 -0
  24. package/dist/components/Avatar/Avatar.utils.d.ts +6 -0
  25. package/dist/components/Avatar/Avatar.utils.d.ts.map +1 -0
  26. package/dist/components/Avatar/Avatar.utils.js +17 -0
  27. package/dist/components/Avatar/Avatar.utils.js.map +1 -0
  28. package/dist/components/Avatar/index.d.ts +3 -0
  29. package/dist/components/Avatar/index.d.ts.map +1 -0
  30. package/dist/components/Breadcrumb/Breadcrumb.cjs +9 -12
  31. package/dist/components/Breadcrumb/Breadcrumb.cjs.map +1 -1
  32. package/dist/components/Breadcrumb/Breadcrumb.css +20 -17
  33. package/dist/components/Breadcrumb/Breadcrumb.d.ts.map +1 -1
  34. package/dist/components/Breadcrumb/Breadcrumb.js +2 -5
  35. package/dist/components/Breadcrumb/Breadcrumb.js.map +1 -1
  36. package/dist/components/Breadcrumb/Breadcrumb.module.css.cjs +5 -8
  37. package/dist/components/Breadcrumb/Breadcrumb.module.css.cjs.map +1 -1
  38. package/dist/components/Breadcrumb/Breadcrumb.module.css.js +5 -8
  39. package/dist/components/Breadcrumb/Breadcrumb.module.css.js.map +1 -1
  40. package/dist/components/Button/Button.cjs +29 -3
  41. package/dist/components/Button/Button.cjs.map +1 -1
  42. package/dist/components/Button/Button.css +76 -30
  43. package/dist/components/Button/Button.d.ts +1 -1
  44. package/dist/components/Button/Button.d.ts.map +1 -1
  45. package/dist/components/Button/Button.js +28 -2
  46. package/dist/components/Button/Button.js.map +1 -1
  47. package/dist/components/Button/Button.module.css.cjs +19 -11
  48. package/dist/components/Button/Button.module.css.cjs.map +1 -1
  49. package/dist/components/Button/Button.module.css.js +19 -11
  50. package/dist/components/Button/Button.module.css.js.map +1 -1
  51. package/dist/components/Button/Button.types.d.ts +20 -3
  52. package/dist/components/Button/Button.types.d.ts.map +1 -1
  53. package/dist/components/Button/index.d.ts +1 -1
  54. package/dist/components/Button/index.d.ts.map +1 -1
  55. package/dist/components/ButtonCard/ButtonCard.cjs +19 -14
  56. package/dist/components/ButtonCard/ButtonCard.cjs.map +1 -1
  57. package/dist/components/ButtonCard/ButtonCard.css +62 -20
  58. package/dist/components/ButtonCard/ButtonCard.d.ts +2 -1
  59. package/dist/components/ButtonCard/ButtonCard.d.ts.map +1 -1
  60. package/dist/components/ButtonCard/ButtonCard.js +17 -12
  61. package/dist/components/ButtonCard/ButtonCard.js.map +1 -1
  62. package/dist/components/ButtonCard/ButtonCard.module.css.cjs +14 -12
  63. package/dist/components/ButtonCard/ButtonCard.module.css.cjs.map +1 -1
  64. package/dist/components/ButtonCard/ButtonCard.module.css.js +14 -12
  65. package/dist/components/ButtonCard/ButtonCard.module.css.js.map +1 -1
  66. package/dist/components/ButtonCard/ButtonCard.types.d.ts +3 -2
  67. package/dist/components/ButtonCard/ButtonCard.types.d.ts.map +1 -1
  68. package/dist/components/Checkbox/Checkbox.cjs +105 -0
  69. package/dist/components/Checkbox/Checkbox.cjs.map +1 -0
  70. package/dist/components/Checkbox/Checkbox.css +323 -0
  71. package/dist/components/Checkbox/Checkbox.d.ts +3 -0
  72. package/dist/components/Checkbox/Checkbox.d.ts.map +1 -0
  73. package/dist/components/Checkbox/Checkbox.js +105 -0
  74. package/dist/components/Checkbox/Checkbox.js.map +1 -0
  75. package/dist/components/Checkbox/Checkbox.module.css.cjs +35 -0
  76. package/dist/components/Checkbox/Checkbox.module.css.cjs.map +1 -0
  77. package/dist/components/Checkbox/Checkbox.module.css.js +35 -0
  78. package/dist/components/Checkbox/Checkbox.module.css.js.map +1 -0
  79. package/dist/components/Checkbox/Checkbox.types.d.ts +47 -0
  80. package/dist/components/Checkbox/Checkbox.types.d.ts.map +1 -0
  81. package/dist/components/Checkbox/index.d.ts +3 -0
  82. package/dist/components/Checkbox/index.d.ts.map +1 -0
  83. package/dist/components/ContentCard/ContentCard.cjs +97 -0
  84. package/dist/components/ContentCard/ContentCard.cjs.map +1 -0
  85. package/dist/components/ContentCard/ContentCard.css +254 -0
  86. package/dist/components/ContentCard/ContentCard.d.ts +3 -0
  87. package/dist/components/ContentCard/ContentCard.d.ts.map +1 -0
  88. package/dist/components/ContentCard/ContentCard.js +97 -0
  89. package/dist/components/ContentCard/ContentCard.js.map +1 -0
  90. package/dist/components/ContentCard/ContentCard.module.css.cjs +24 -0
  91. package/dist/components/ContentCard/ContentCard.module.css.cjs.map +1 -0
  92. package/dist/components/ContentCard/ContentCard.module.css.js +25 -0
  93. package/dist/components/ContentCard/ContentCard.module.css.js.map +1 -0
  94. package/dist/components/ContentCard/ContentCard.types.d.ts +100 -0
  95. package/dist/components/ContentCard/ContentCard.types.d.ts.map +1 -0
  96. package/dist/components/ContentCard/index.d.ts +3 -0
  97. package/dist/components/ContentCard/index.d.ts.map +1 -0
  98. package/dist/components/Drawer/Drawer.cjs +15 -7
  99. package/dist/components/Drawer/Drawer.cjs.map +1 -1
  100. package/dist/components/Drawer/Drawer.css +47 -45
  101. package/dist/components/Drawer/Drawer.d.ts.map +1 -1
  102. package/dist/components/Drawer/Drawer.js +12 -4
  103. package/dist/components/Drawer/Drawer.js.map +1 -1
  104. package/dist/components/Drawer/Drawer.module.css.cjs +16 -16
  105. package/dist/components/Drawer/Drawer.module.css.js +16 -16
  106. package/dist/components/Footer/Footer.cjs +8 -9
  107. package/dist/components/Footer/Footer.cjs.map +1 -1
  108. package/dist/components/Footer/Footer.css +91 -84
  109. package/dist/components/Footer/Footer.d.ts.map +1 -1
  110. package/dist/components/Footer/Footer.js +1 -2
  111. package/dist/components/Footer/Footer.js.map +1 -1
  112. package/dist/components/Footer/Footer.module.css.cjs +39 -39
  113. package/dist/components/Footer/Footer.module.css.js +39 -39
  114. package/dist/components/FunctionButton/FunctionButton.cjs +2 -2
  115. package/dist/components/FunctionButton/FunctionButton.cjs.map +1 -1
  116. package/dist/components/FunctionButton/FunctionButton.css +5 -2
  117. package/dist/components/FunctionButton/FunctionButton.js +1 -1
  118. package/dist/components/FunctionButton/FunctionButton.js.map +1 -1
  119. package/dist/components/Hero/Hero.cjs +30 -29
  120. package/dist/components/Hero/Hero.cjs.map +1 -1
  121. package/dist/components/Hero/Hero.css +86 -74
  122. package/dist/components/Hero/Hero.d.ts +1 -1
  123. package/dist/components/Hero/Hero.d.ts.map +1 -1
  124. package/dist/components/Hero/Hero.js +30 -29
  125. package/dist/components/Hero/Hero.js.map +1 -1
  126. package/dist/components/Hero/Hero.module.css.cjs +20 -17
  127. package/dist/components/Hero/Hero.module.css.cjs.map +1 -1
  128. package/dist/components/Hero/Hero.module.css.js +20 -17
  129. package/dist/components/Hero/Hero.module.css.js.map +1 -1
  130. package/dist/components/Hero/Hero.types.d.ts +2 -6
  131. package/dist/components/Hero/Hero.types.d.ts.map +1 -1
  132. package/dist/components/IconButton/IconButton.cjs +3 -4
  133. package/dist/components/IconButton/IconButton.cjs.map +1 -1
  134. package/dist/components/IconButton/IconButton.css +5 -2
  135. package/dist/components/IconButton/IconButton.d.ts.map +1 -1
  136. package/dist/components/IconButton/IconButton.js +1 -2
  137. package/dist/components/IconButton/IconButton.js.map +1 -1
  138. package/dist/components/Label/Label.css +5 -2
  139. package/dist/components/MainNavigation/MainNavigation.cjs +556 -191
  140. package/dist/components/MainNavigation/MainNavigation.cjs.map +1 -1
  141. package/dist/components/MainNavigation/MainNavigation.css +297 -170
  142. package/dist/components/MainNavigation/MainNavigation.d.ts +1 -1
  143. package/dist/components/MainNavigation/MainNavigation.d.ts.map +1 -1
  144. package/dist/components/MainNavigation/MainNavigation.js +526 -161
  145. package/dist/components/MainNavigation/MainNavigation.js.map +1 -1
  146. package/dist/components/MainNavigation/MainNavigation.module.css.cjs +80 -68
  147. package/dist/components/MainNavigation/MainNavigation.module.css.cjs.map +1 -1
  148. package/dist/components/MainNavigation/MainNavigation.module.css.js +80 -68
  149. package/dist/components/MainNavigation/MainNavigation.module.css.js.map +1 -1
  150. package/dist/components/MainNavigation/MainNavigation.types.d.ts +55 -21
  151. package/dist/components/MainNavigation/MainNavigation.types.d.ts.map +1 -1
  152. package/dist/components/MainNavigation/MainNavigation.utils.cjs +28 -4
  153. package/dist/components/MainNavigation/MainNavigation.utils.cjs.map +1 -1
  154. package/dist/components/MainNavigation/MainNavigation.utils.d.ts +11 -1
  155. package/dist/components/MainNavigation/MainNavigation.utils.d.ts.map +1 -1
  156. package/dist/components/MainNavigation/MainNavigation.utils.js +28 -4
  157. package/dist/components/MainNavigation/MainNavigation.utils.js.map +1 -1
  158. package/dist/components/MainNavigation/index.d.ts +1 -1
  159. package/dist/components/MainNavigation/index.d.ts.map +1 -1
  160. package/dist/components/Modal/Modal.cjs +14 -6
  161. package/dist/components/Modal/Modal.cjs.map +1 -1
  162. package/dist/components/Modal/Modal.css +43 -40
  163. package/dist/components/Modal/Modal.d.ts.map +1 -1
  164. package/dist/components/Modal/Modal.js +12 -4
  165. package/dist/components/Modal/Modal.js.map +1 -1
  166. package/dist/components/Modal/Modal.module.css.cjs +18 -18
  167. package/dist/components/Modal/Modal.module.css.js +18 -18
  168. package/dist/components/Notification/Notification.cjs +3 -2
  169. package/dist/components/Notification/Notification.cjs.map +1 -1
  170. package/dist/components/Notification/Notification.css +20 -12
  171. package/dist/components/Notification/Notification.d.ts.map +1 -1
  172. package/dist/components/Notification/Notification.js +2 -1
  173. package/dist/components/Notification/Notification.js.map +1 -1
  174. package/dist/components/Notification/Notification.module.css.cjs +9 -9
  175. package/dist/components/Notification/Notification.module.css.js +9 -9
  176. package/dist/components/Pagination/Pagination.cjs +142 -0
  177. package/dist/components/Pagination/Pagination.cjs.map +1 -0
  178. package/dist/components/Pagination/Pagination.css +256 -0
  179. package/dist/components/Pagination/Pagination.d.ts +3 -0
  180. package/dist/components/Pagination/Pagination.d.ts.map +1 -0
  181. package/dist/components/Pagination/Pagination.js +142 -0
  182. package/dist/components/Pagination/Pagination.js.map +1 -0
  183. package/dist/components/Pagination/Pagination.module.css.cjs +34 -0
  184. package/dist/components/Pagination/Pagination.module.css.cjs.map +1 -0
  185. package/dist/components/Pagination/Pagination.module.css.js +34 -0
  186. package/dist/components/Pagination/Pagination.module.css.js.map +1 -0
  187. package/dist/components/Pagination/Pagination.types.d.ts +20 -0
  188. package/dist/components/Pagination/Pagination.types.d.ts.map +1 -0
  189. package/dist/components/Pagination/Pagination.utils.cjs +76 -0
  190. package/dist/components/Pagination/Pagination.utils.cjs.map +1 -0
  191. package/dist/components/Pagination/Pagination.utils.d.ts +21 -0
  192. package/dist/components/Pagination/Pagination.utils.d.ts.map +1 -0
  193. package/dist/components/Pagination/Pagination.utils.js +76 -0
  194. package/dist/components/Pagination/Pagination.utils.js.map +1 -0
  195. package/dist/components/Pagination/index.d.ts +3 -0
  196. package/dist/components/Pagination/index.d.ts.map +1 -0
  197. package/dist/components/Pictograph/Pictograph.css +9 -2
  198. package/dist/components/Pictograph/PictographItem.css +9 -2
  199. package/dist/components/Quote/Quote.css +5 -2
  200. package/dist/components/Spinner/Spinner.css +9 -2
  201. package/dist/design-tokens/dist/tokens.cjs +5 -0
  202. package/dist/design-tokens/dist/tokens.cjs.map +1 -0
  203. package/dist/design-tokens/dist/tokens.js +5 -0
  204. package/dist/design-tokens/dist/tokens.js.map +1 -0
  205. package/dist/index.cjs +8 -0
  206. package/dist/index.cjs.map +1 -1
  207. package/dist/index.d.ts +10 -2
  208. package/dist/index.d.ts.map +1 -1
  209. package/dist/index.js +8 -0
  210. package/dist/index.js.map +1 -1
  211. package/dist/styles/utilities.css +6 -0
  212. package/dist/styles/utils/elevation.css +34 -26
  213. package/dist/styles/utils/focus.css +63 -65
  214. package/dist/styles/utils/index.cjs +33 -0
  215. package/dist/styles/utils/index.cjs.map +1 -0
  216. package/dist/styles/utils/index.d.ts +20 -0
  217. package/dist/styles/utils/index.d.ts.map +1 -0
  218. package/dist/styles/utils/index.js +33 -0
  219. package/dist/styles/utils/index.js.map +1 -0
  220. package/dist/styles/utils/overlay.css +35 -28
  221. package/dist/styles/utils/text-decoration.css +19 -12
  222. package/dist/styles.css +46 -12
  223. package/dist/utils/index.d.ts +1 -0
  224. package/dist/utils/index.d.ts.map +1 -1
  225. package/dist/utils/isRenderable/index.d.ts +2 -0
  226. package/dist/utils/isRenderable/index.d.ts.map +1 -0
  227. package/dist/utils/isRenderable/isRenderable.cjs +5 -0
  228. package/dist/utils/isRenderable/isRenderable.cjs.map +1 -0
  229. package/dist/utils/isRenderable/isRenderable.d.ts +4 -0
  230. package/dist/utils/isRenderable/isRenderable.d.ts.map +1 -0
  231. package/dist/utils/isRenderable/isRenderable.js +5 -0
  232. package/dist/utils/isRenderable/isRenderable.js.map +1 -0
  233. package/package.json +12 -4
  234. package/dist/styles/utils/elevation.module.css.cjs +0 -16
  235. package/dist/styles/utils/elevation.module.css.cjs.map +0 -1
  236. package/dist/styles/utils/elevation.module.css.js +0 -16
  237. package/dist/styles/utils/elevation.module.css.js.map +0 -1
  238. package/dist/styles/utils/focus.module.css.cjs +0 -16
  239. package/dist/styles/utils/focus.module.css.cjs.map +0 -1
  240. package/dist/styles/utils/focus.module.css.js +0 -16
  241. package/dist/styles/utils/focus.module.css.js.map +0 -1
  242. package/dist/styles/utils/overlay.module.css.cjs +0 -13
  243. package/dist/styles/utils/overlay.module.css.cjs.map +0 -1
  244. package/dist/styles/utils/overlay.module.css.js +0 -13
  245. package/dist/styles/utils/overlay.module.css.js.map +0 -1
  246. package/dist/styles/utils/text-decoration.module.css.cjs +0 -13
  247. package/dist/styles/utils/text-decoration.module.css.cjs.map +0 -1
  248. package/dist/styles/utils/text-decoration.module.css.js +0 -13
  249. package/dist/styles/utils/text-decoration.module.css.js.map +0 -1
@@ -0,0 +1,33 @@
1
+ require('./elevation.css');
2
+ require('./focus.css');
3
+ require('./overlay.css');
4
+ require('./text-decoration.css');
5
+ "use strict";
6
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
7
+ ;/* empty css */
8
+ ;/* empty css */
9
+ ;/* empty css */
10
+ ;/* empty css */
11
+ const elevationStyles = {
12
+ elevationLow: "dds-elevation-low",
13
+ elevationMedium: "dds-elevation-medium",
14
+ elevationHigh: "dds-elevation-high"
15
+ };
16
+ const focusStyles = {
17
+ focusable: "dds-focusable",
18
+ focusableInset: "dds-focusable-inset",
19
+ focusClipGuard: "dds-focus-clip-guard"
20
+ };
21
+ const overlayStyles = {
22
+ overlayStrong: "dds-overlay-strong",
23
+ overlayClosing: "dds-overlay-closing"
24
+ };
25
+ const textDecorationStyles = {
26
+ underlineLink: "dds-underline-link",
27
+ underlineLinkOnHover: "dds-underline-link-on-hover"
28
+ };
29
+ exports.elevationStyles = elevationStyles;
30
+ exports.focusStyles = focusStyles;
31
+ exports.overlayStyles = overlayStyles;
32
+ exports.textDecorationStyles = textDecorationStyles;
33
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs","sources":["../../../src/styles/utils/index.ts"],"sourcesContent":["import './elevation.css';\nimport './focus.css';\nimport './overlay.css';\nimport './text-decoration.css';\n\nexport const elevationStyles = {\n elevationLow: 'dds-elevation-low',\n elevationMedium: 'dds-elevation-medium',\n elevationHigh: 'dds-elevation-high',\n} as const;\n\nexport const focusStyles = {\n focusable: 'dds-focusable',\n focusableInset: 'dds-focusable-inset',\n focusClipGuard: 'dds-focus-clip-guard',\n} as const;\n\nexport const overlayStyles = {\n overlayStrong: 'dds-overlay-strong',\n overlaySoft: 'dds-overlay-soft',\n overlayClosing: 'dds-overlay-closing',\n} as const;\n\nexport const textDecorationStyles = {\n underlineLink: 'dds-underline-link',\n underlineLinkOnHover: 'dds-underline-link-on-hover',\n} as const;\n"],"names":[],"mappings":";;;;;;AAKO,MAAM,kBAAkB;AAAA,EAC3B,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,eAAe;AACnB;AAEO,MAAM,cAAc;AAAA,EACvB,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,gBAAgB;AACpB;AAEO,MAAM,gBAAgB;AAAA,EACzB,eAAe;AAAA,EAEf,gBAAgB;AACpB;AAEO,MAAM,uBAAuB;AAAA,EAChC,eAAe;AAAA,EACf,sBAAsB;AAC1B;;;;;"}
@@ -0,0 +1,20 @@
1
+ export declare const elevationStyles: {
2
+ readonly elevationLow: "dds-elevation-low";
3
+ readonly elevationMedium: "dds-elevation-medium";
4
+ readonly elevationHigh: "dds-elevation-high";
5
+ };
6
+ export declare const focusStyles: {
7
+ readonly focusable: "dds-focusable";
8
+ readonly focusableInset: "dds-focusable-inset";
9
+ readonly focusClipGuard: "dds-focus-clip-guard";
10
+ };
11
+ export declare const overlayStyles: {
12
+ readonly overlayStrong: "dds-overlay-strong";
13
+ readonly overlaySoft: "dds-overlay-soft";
14
+ readonly overlayClosing: "dds-overlay-closing";
15
+ };
16
+ export declare const textDecorationStyles: {
17
+ readonly underlineLink: "dds-underline-link";
18
+ readonly underlineLinkOnHover: "dds-underline-link-on-hover";
19
+ };
20
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,aAAa,CAAC;AACrB,OAAO,eAAe,CAAC;AACvB,OAAO,uBAAuB,CAAC;AAE/B,eAAO,MAAM,eAAe;;;;CAIlB,CAAC;AAEX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,eAAO,MAAM,aAAa;;;;CAIhB,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;CAGvB,CAAC"}
@@ -0,0 +1,33 @@
1
+ import './elevation.css';
2
+ import './focus.css';
3
+ import './overlay.css';
4
+ import './text-decoration.css';
5
+ /* empty css */
6
+ /* empty css */
7
+ /* empty css */
8
+ /* empty css */
9
+ const elevationStyles = {
10
+ elevationLow: "dds-elevation-low",
11
+ elevationMedium: "dds-elevation-medium",
12
+ elevationHigh: "dds-elevation-high"
13
+ };
14
+ const focusStyles = {
15
+ focusable: "dds-focusable",
16
+ focusableInset: "dds-focusable-inset",
17
+ focusClipGuard: "dds-focus-clip-guard"
18
+ };
19
+ const overlayStyles = {
20
+ overlayStrong: "dds-overlay-strong",
21
+ overlayClosing: "dds-overlay-closing"
22
+ };
23
+ const textDecorationStyles = {
24
+ underlineLink: "dds-underline-link",
25
+ underlineLinkOnHover: "dds-underline-link-on-hover"
26
+ };
27
+ export {
28
+ elevationStyles,
29
+ focusStyles,
30
+ overlayStyles,
31
+ textDecorationStyles
32
+ };
33
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../../src/styles/utils/index.ts"],"sourcesContent":["import './elevation.css';\nimport './focus.css';\nimport './overlay.css';\nimport './text-decoration.css';\n\nexport const elevationStyles = {\n elevationLow: 'dds-elevation-low',\n elevationMedium: 'dds-elevation-medium',\n elevationHigh: 'dds-elevation-high',\n} as const;\n\nexport const focusStyles = {\n focusable: 'dds-focusable',\n focusableInset: 'dds-focusable-inset',\n focusClipGuard: 'dds-focus-clip-guard',\n} as const;\n\nexport const overlayStyles = {\n overlayStrong: 'dds-overlay-strong',\n overlaySoft: 'dds-overlay-soft',\n overlayClosing: 'dds-overlay-closing',\n} as const;\n\nexport const textDecorationStyles = {\n underlineLink: 'dds-underline-link',\n underlineLinkOnHover: 'dds-underline-link-on-hover',\n} as const;\n"],"names":[],"mappings":";;;;AAKO,MAAM,kBAAkB;AAAA,EAC3B,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,eAAe;AACnB;AAEO,MAAM,cAAc;AAAA,EACvB,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,gBAAgB;AACpB;AAEO,MAAM,gBAAgB;AAAA,EACzB,eAAe;AAAA,EAEf,gBAAgB;AACpB;AAEO,MAAM,uBAAuB;AAAA,EAChC,eAAe;AAAA,EACf,sBAAsB;AAC1B;"}
@@ -1,37 +1,44 @@
1
- @layer dds-components {._overlayStrong_1w2h3_1::before,
2
- ._overlaySoft_1w2h3_2::before {
3
- content: '';
4
- position: fixed;
5
- inset: 0;
6
- pointer-events: none;
7
- z-index: 5;
8
- opacity: 1;
9
- transition: opacity 0.2s ease;
1
+ @layer dds-base, dds-components;
2
+
3
+ @layer dds-components {
4
+ @layer fallback, components;
10
5
  }
11
6
 
12
- @starting-style {
13
- ._overlayStrong_1w2h3_1::before,
14
- ._overlaySoft_1w2h3_2::before {
15
- opacity: 0;
7
+ @layer dds-components.components {
8
+ .dds-overlay-strong::before,
9
+ .dds-overlay-soft::before {
10
+ content: '';
11
+ position: fixed;
12
+ inset: 0;
13
+ pointer-events: none;
14
+ z-index: var(--zindex-semantic-overlay);
15
+ opacity: 1;
16
+ transition: opacity 0.2s ease;
16
17
  }
17
- }
18
18
 
19
- ._overlayClosing_1w2h3_19::before {
20
- opacity: 0;
21
- }
19
+ @starting-style {
20
+ .dds-overlay-strong::before,
21
+ .dds-overlay-soft::before {
22
+ opacity: 0;
23
+ }
24
+ }
22
25
 
23
- @media (prefers-reduced-motion: reduce) {
24
- ._overlayStrong_1w2h3_1::before,
25
- ._overlaySoft_1w2h3_2::before {
26
- transition: none;
26
+ .dds-overlay-closing::before {
27
+ opacity: 0;
27
28
  }
28
- }
29
29
 
30
- ._overlayStrong_1w2h3_1::before {
31
- background: var(--color-semantic-utility-overlay-strong);
32
- }
30
+ @media (prefers-reduced-motion: reduce) {
31
+ .dds-overlay-strong::before,
32
+ .dds-overlay-soft::before {
33
+ transition: none;
34
+ }
35
+ }
33
36
 
34
- ._overlaySoft_1w2h3_2::before {
35
- background: var(--color-semantic-utility-overlay-soft);
36
- }
37
+ .dds-overlay-strong::before {
38
+ background: var(--color-semantic-utility-overlay-strong);
39
+ }
40
+
41
+ .dds-overlay-soft::before {
42
+ background: var(--color-semantic-utility-overlay-soft);
43
+ }
37
44
  }
@@ -1,15 +1,22 @@
1
- @layer dds-components {._underlineLink_15fbp_1 {
2
- text-decoration: underline;
3
- text-underline-offset: 0.2em;
4
- text-decoration-skip-ink: auto;
5
- text-decoration-thickness: from-font;
6
- }
1
+ @layer dds-base, dds-components;
7
2
 
8
- ._underlineLinkOnHover_15fbp_8:hover,
9
- ._underlineLinkOnHover_15fbp_8:focus-visible {
10
- text-decoration: underline;
11
- text-underline-offset: 0.2em;
12
- text-decoration-skip-ink: auto;
13
- text-decoration-thickness: from-font;
3
+ @layer dds-components {
4
+ @layer fallback, components;
14
5
  }
6
+
7
+ @layer dds-components.components {
8
+ .dds-underline-link {
9
+ text-decoration: underline;
10
+ text-underline-offset: 0.2em;
11
+ text-decoration-skip-ink: auto;
12
+ text-decoration-thickness: from-font;
13
+ }
14
+
15
+ .dds-underline-link-on-hover:hover,
16
+ .dds-underline-link-on-hover:focus-visible {
17
+ text-decoration: underline;
18
+ text-underline-offset: 0.2em;
19
+ text-decoration-skip-ink: auto;
20
+ text-decoration-thickness: from-font;
21
+ }
15
22
  }
package/dist/styles.css CHANGED
@@ -1,4 +1,11 @@
1
- @layer dds-base {
1
+
2
+ @layer dds-base, dds-components;
3
+ /* Establish top-level layer priority before anything else so the base prelude
4
+ and component chunks agree on order regardless of which loads first in a
5
+ chunked runtime (e.g. Next.js + Turbopack). CSS registers layer priority by
6
+ first appearance, so declaring both names here keeps dds-base < dds-components
7
+ deterministic. A layer-name statement is permitted before @import. */
8
+ @layer dds-base{
2
9
 
3
10
  /**
4
11
  * Do not edit directly, this file was auto-generated.
@@ -130,6 +137,10 @@
130
137
  --typography-font-size-text-md: 16px;
131
138
  --typography-font-size-text-sm: 14px;
132
139
  --typography-font-size-text-xs: 12px;
140
+ --typography-font-size-pricing-lg: 34px;
141
+ --typography-font-size-pricing-md: 30px;
142
+ --typography-font-size-pricing-sm: 24px;
143
+ --typography-font-size-pricing-xs: 20px;
133
144
  --typography-font-weight-regular: 400;
134
145
  --typography-font-weight-medium: 500;
135
146
  --typography-font-weight-bold: 700;
@@ -159,10 +170,29 @@
159
170
  --elevation-semantic-elevation-high-offset-y: 8px;
160
171
  --elevation-semantic-elevation-high-blur: 64px;
161
172
  --elevation-semantic-elevation-high-spread: 0px;
162
- }
163
- }
164
-
165
- @layer dds-base {
173
+ --zindex-semantic-below: -1;
174
+ --zindex-semantic-base: 0;
175
+ --zindex-semantic-raised: 200;
176
+ --zindex-semantic-sticky: 400;
177
+ --zindex-semantic-popup: 600;
178
+ --zindex-semantic-navigation: 1000;
179
+ --zindex-semantic-widget: 1040;
180
+ --zindex-semantic-overlay: 1100;
181
+ --zindex-semantic-dialog: 1200;
182
+ --zindex-semantic-system: 1300;
183
+ --layout-semantic-breakpoint-small-mobile: 360px;
184
+ --layout-semantic-breakpoint-large-mobile: 480px;
185
+ --layout-semantic-breakpoint-tablet: 768px;
186
+ --layout-semantic-breakpoint-desktop: 1024px;
187
+ --layout-semantic-breakpoint-large-desktop: 1344px;
188
+ --layout-semantic-page-min-width: 320px;
189
+ --layout-semantic-page-max-width: 2560px;
190
+ --layout-semantic-container-narrow: 628px;
191
+ --layout-semantic-container-default: 845px;
192
+ --layout-semantic-container-wide: 1280px;
193
+ }
194
+ }
195
+ @layer dds-base{
166
196
 
167
197
  /* ==========================================================================
168
198
  Extended typography tokens (hand-authored, CSS only)
@@ -261,8 +291,7 @@
261
291
  var(--typography-font-family-text-with-fallback);
262
292
  }
263
293
  }
264
-
265
- @layer dds-base {
294
+ @layer dds-base{
266
295
 
267
296
  *,
268
297
  *::before,
@@ -289,7 +318,7 @@ body.dds-un-scrollable {
289
318
  overflow: hidden;
290
319
  }
291
320
 
292
- @media screen and (min-width: 1024px) {
321
+ @media screen and (width >= 1024px) {
293
322
  body.dds-un-scrollable {
294
323
  overflow: initial;
295
324
  }
@@ -303,8 +332,7 @@ video {
303
332
  max-width: 100%;
304
333
  }
305
334
  }
306
-
307
- @layer dds-base {
335
+ @layer dds-base{
308
336
 
309
337
  /* ==========================================================================
310
338
  Base typography styles
@@ -391,7 +419,7 @@ small {
391
419
  cursor: pointer;
392
420
  transition: color 0.2s ease-in-out;
393
421
  }
394
- :where(a:hover) {
422
+ :where(a:hover, a:focus-visible) {
395
423
  color: var(--color-semantic-foreground-link-hover);
396
424
  text-decoration: none;
397
425
  }
@@ -475,8 +503,14 @@ ol {
475
503
  color: var(--color-semantic-foreground-link-inverse);
476
504
  }
477
505
 
478
- :where(a:hover) {
506
+ :where(a:hover, a:focus-visible) {
479
507
  color: var(--color-semantic-foreground-link-inverse-hover);
480
508
  }
481
509
  }
482
510
  }
511
+ /* Sublayer order within dds-components: fallback declarations (e.g. the shared
512
+ focus-ring radius) sit below component styles so components always override
513
+ them, regardless of stylesheet load order. */
514
+ @layer dds-components {
515
+ @layer fallback, components;
516
+ }
@@ -1,3 +1,4 @@
1
1
  export { cn } from './cn';
2
2
  export type { CnDictionary, CnInput } from './cn/index';
3
+ export { isRenderable } from './isRenderable';
3
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { isRenderable } from './isRenderable';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/isRenderable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const isRenderable = (node) => node != null && typeof node !== "boolean" && node !== "" && !(Array.isArray(node) && node.length === 0);
4
+ exports.isRenderable = isRenderable;
5
+ //# sourceMappingURL=isRenderable.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"isRenderable.cjs","sources":["../../../src/utils/isRenderable/isRenderable.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\n/** Nodes that render nothing (e.g. `condition && <X />`, `''` or `[]`) are treated as absent. */\nexport const isRenderable = (node: ReactNode): boolean =>\n node != null &&\n typeof node !== 'boolean' &&\n node !== '' &&\n !(Array.isArray(node) && node.length === 0);\n"],"names":[],"mappings":";;AAGO,MAAM,eAAe,CAAC,SACzB,QAAQ,QACR,OAAO,SAAS,aAChB,SAAS,MACT,EAAE,MAAM,QAAQ,IAAI,KAAK,KAAK,WAAW;;"}
@@ -0,0 +1,4 @@
1
+ import { ReactNode } from 'react';
2
+ /** Nodes that render nothing (e.g. `condition && <X />`, `''` or `[]`) are treated as absent. */
3
+ export declare const isRenderable: (node: ReactNode) => boolean;
4
+ //# sourceMappingURL=isRenderable.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"isRenderable.d.ts","sourceRoot":"","sources":["../../../src/utils/isRenderable/isRenderable.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,iGAAiG;AACjG,eAAO,MAAM,YAAY,GAAI,MAAM,SAAS,KAAG,OAIA,CAAC"}
@@ -0,0 +1,5 @@
1
+ const isRenderable = (node) => node != null && typeof node !== "boolean" && node !== "" && !(Array.isArray(node) && node.length === 0);
2
+ export {
3
+ isRenderable
4
+ };
5
+ //# sourceMappingURL=isRenderable.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"isRenderable.js","sources":["../../../src/utils/isRenderable/isRenderable.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\n/** Nodes that render nothing (e.g. `condition && <X />`, `''` or `[]`) are treated as absent. */\nexport const isRenderable = (node: ReactNode): boolean =>\n node != null &&\n typeof node !== 'boolean' &&\n node !== '' &&\n !(Array.isArray(node) && node.length === 0);\n"],"names":[],"mappings":"AAGO,MAAM,eAAe,CAAC,SACzB,QAAQ,QACR,OAAO,SAAS,aAChB,SAAS,MACT,EAAE,MAAM,QAAQ,IAAI,KAAK,KAAK,WAAW;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dnanpm/ui-components",
3
- "version": "0.8.0",
3
+ "version": "0.10.0",
4
4
  "description": "DNA Design System - React UI Components",
5
5
  "author": "DNA Oy",
6
6
  "license": "ISC",
@@ -18,6 +18,11 @@
18
18
  "require": "./dist/index.cjs"
19
19
  },
20
20
  "./styles.css": "./dist/styles.css",
21
+ "./utilities.css": "./dist/styles/utilities.css",
22
+ "./utilities/elevation.css": "./dist/styles/utils/elevation.css",
23
+ "./utilities/focus.css": "./dist/styles/utils/focus.css",
24
+ "./utilities/overlay.css": "./dist/styles/utils/overlay.css",
25
+ "./utilities/text-decoration.css": "./dist/styles/utils/text-decoration.css",
21
26
  "./font-definitions.css": "./dist/font-definitions.css"
22
27
  },
23
28
  "files": [
@@ -28,14 +33,15 @@
28
33
  "dev": "vite build --watch",
29
34
  "gen:component": "plop --plopfile ./scripts/template-generators/plopfile.mjs component",
30
35
  "tokens:check-css-vars": "bash scripts/check-token-css-vars.sh",
31
- "test": "vitest run --coverage",
32
- "test:watch": "vitest",
36
+ "test": "pnpm --filter @dnanpm/design-tokens build && vitest run --coverage",
37
+ "test:css-exports": "pnpm build && node scripts/check-css-exports.mjs",
38
+ "test:watch": "pnpm --filter @dnanpm/design-tokens build && vitest",
33
39
  "format": "prettier --write .",
34
40
  "format:check": "prettier --check .",
35
41
  "lint": "eslint .",
36
42
  "lint:fix": "eslint . --fix",
37
43
  "clean": "rm -rf dist node_modules",
38
- "type-check": "tsc --noEmit",
44
+ "type-check": "pnpm --filter @dnanpm/design-tokens build && tsc --noEmit",
39
45
  "tar": "bash scripts/generate-tar.sh"
40
46
  },
41
47
  "keywords": [
@@ -61,6 +67,7 @@
61
67
  "react-dom": "^19.0.0"
62
68
  },
63
69
  "devDependencies": {
70
+ "@csstools/postcss-global-data": "^4.0.0",
64
71
  "@dnanpm/design-tokens": "workspace:*",
65
72
  "@repo/eslint-config": "workspace:*",
66
73
  "@repo/typescript-config": "workspace:*",
@@ -76,6 +83,7 @@
76
83
  "jsdom": "^28.1.0",
77
84
  "plop": "^4.0.5",
78
85
  "postcss": "^8.5.10",
86
+ "postcss-custom-media": "^12.0.3",
79
87
  "prettier": "^3.8.1",
80
88
  "react": "^19.2.4",
81
89
  "react-dom": "^19.2.4",
@@ -1,16 +0,0 @@
1
- require('./elevation.css');
2
- "use strict";
3
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
4
- const elevationLow = "_elevationLow_dspr0_1";
5
- const elevationMedium = "_elevationMedium_dspr0_8";
6
- const elevationHigh = "_elevationHigh_dspr0_16";
7
- const elevationStyles = {
8
- elevationLow,
9
- elevationMedium,
10
- elevationHigh
11
- };
12
- exports.default = elevationStyles;
13
- exports.elevationHigh = elevationHigh;
14
- exports.elevationLow = elevationLow;
15
- exports.elevationMedium = elevationMedium;
16
- //# sourceMappingURL=elevation.module.css.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"elevation.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
@@ -1,16 +0,0 @@
1
- import './elevation.css';
2
- const elevationLow = "_elevationLow_dspr0_1";
3
- const elevationMedium = "_elevationMedium_dspr0_8";
4
- const elevationHigh = "_elevationHigh_dspr0_16";
5
- const elevationStyles = {
6
- elevationLow,
7
- elevationMedium,
8
- elevationHigh
9
- };
10
- export {
11
- elevationStyles as default,
12
- elevationHigh,
13
- elevationLow,
14
- elevationMedium
15
- };
16
- //# sourceMappingURL=elevation.module.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"elevation.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -1,16 +0,0 @@
1
- require('./focus.css');
2
- "use strict";
3
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
4
- const focusable = "_focusable_bhneb_1";
5
- const focusableInset = "_focusableInset_bhneb_29";
6
- const focusClipGuard = "_focusClipGuard_bhneb_76";
7
- const focusStyles = {
8
- focusable,
9
- focusableInset,
10
- focusClipGuard
11
- };
12
- exports.default = focusStyles;
13
- exports.focusClipGuard = focusClipGuard;
14
- exports.focusable = focusable;
15
- exports.focusableInset = focusableInset;
16
- //# sourceMappingURL=focus.module.css.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"focus.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
@@ -1,16 +0,0 @@
1
- import './focus.css';
2
- const focusable = "_focusable_bhneb_1";
3
- const focusableInset = "_focusableInset_bhneb_29";
4
- const focusClipGuard = "_focusClipGuard_bhneb_76";
5
- const focusStyles = {
6
- focusable,
7
- focusableInset,
8
- focusClipGuard
9
- };
10
- export {
11
- focusStyles as default,
12
- focusClipGuard,
13
- focusable,
14
- focusableInset
15
- };
16
- //# sourceMappingURL=focus.module.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"focus.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -1,13 +0,0 @@
1
- require('./overlay.css');
2
- "use strict";
3
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
4
- const overlayStrong = "_overlayStrong_1w2h3_1";
5
- const overlayClosing = "_overlayClosing_1w2h3_19";
6
- const overlayStyles = {
7
- overlayStrong,
8
- overlayClosing
9
- };
10
- exports.default = overlayStyles;
11
- exports.overlayClosing = overlayClosing;
12
- exports.overlayStrong = overlayStrong;
13
- //# sourceMappingURL=overlay.module.css.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"overlay.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
@@ -1,13 +0,0 @@
1
- import './overlay.css';
2
- const overlayStrong = "_overlayStrong_1w2h3_1";
3
- const overlayClosing = "_overlayClosing_1w2h3_19";
4
- const overlayStyles = {
5
- overlayStrong,
6
- overlayClosing
7
- };
8
- export {
9
- overlayStyles as default,
10
- overlayClosing,
11
- overlayStrong
12
- };
13
- //# sourceMappingURL=overlay.module.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"overlay.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,13 +0,0 @@
1
- require('./text-decoration.css');
2
- "use strict";
3
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
4
- const underlineLink = "_underlineLink_15fbp_1";
5
- const underlineLinkOnHover = "_underlineLinkOnHover_15fbp_8";
6
- const textDecorationStyles = {
7
- underlineLink,
8
- underlineLinkOnHover
9
- };
10
- exports.default = textDecorationStyles;
11
- exports.underlineLink = underlineLink;
12
- exports.underlineLinkOnHover = underlineLinkOnHover;
13
- //# sourceMappingURL=text-decoration.module.css.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"text-decoration.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
@@ -1,13 +0,0 @@
1
- import './text-decoration.css';
2
- const underlineLink = "_underlineLink_15fbp_1";
3
- const underlineLinkOnHover = "_underlineLinkOnHover_15fbp_8";
4
- const textDecorationStyles = {
5
- underlineLink,
6
- underlineLinkOnHover
7
- };
8
- export {
9
- textDecorationStyles as default,
10
- underlineLink,
11
- underlineLinkOnHover
12
- };
13
- //# sourceMappingURL=text-decoration.module.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"text-decoration.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}