@charcoal-ui/react 3.10.1-beta.0 → 4.0.0-beta.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 (31) hide show
  1. package/dist/_lib/useClassNames.d.ts +5 -0
  2. package/dist/_lib/useClassNames.d.ts.map +1 -0
  3. package/dist/components/Button/index.d.ts +13 -10
  4. package/dist/components/Button/index.d.ts.map +1 -1
  5. package/dist/components/Button/index.story.d.ts +9 -4
  6. package/dist/components/Button/index.story.d.ts.map +1 -1
  7. package/dist/index.cjs.js +314 -357
  8. package/dist/index.cjs.js.map +1 -1
  9. package/dist/index.css +118 -0
  10. package/dist/index.css.map +1 -0
  11. package/dist/index.esm.js +208 -251
  12. package/dist/index.esm.js.map +1 -1
  13. package/dist/styled.d.ts +4 -4
  14. package/package.json +17 -11
  15. package/src/_lib/useClassNames.ts +14 -0
  16. package/src/components/Button/__snapshots__/index.story.storyshot +22 -1754
  17. package/src/components/Button/index.css +125 -0
  18. package/src/components/Button/index.story.tsx +1 -95
  19. package/src/components/Button/index.tsx +36 -42
  20. package/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot +4 -111
  21. package/src/components/DropdownSelector/__snapshots__/index.story.storyshot +2 -105
  22. package/src/components/Modal/__snapshots__/index.story.storyshot +569 -1621
  23. package/dist/components/Button/StyledButton.d.ts +0 -13
  24. package/dist/components/Button/StyledButton.d.ts.map +0 -1
  25. package/dist/components/Button/lib/variantToBackground.d.ts +0 -3
  26. package/dist/components/Button/lib/variantToBackground.d.ts.map +0 -1
  27. package/dist/components/Button/lib/variantToFont.d.ts +0 -3
  28. package/dist/components/Button/lib/variantToFont.d.ts.map +0 -1
  29. package/src/components/Button/StyledButton.tsx +0 -71
  30. package/src/components/Button/lib/variantToBackground.tsx +0 -19
  31. package/src/components/Button/lib/variantToFont.tsx +0 -19
package/dist/index.css ADDED
@@ -0,0 +1,118 @@
1
+ /* src/components/Button/index.css */
2
+ .charcoal-button {
3
+ -webkit-appearance: none;
4
+ -moz-appearance: none;
5
+ appearance: none;
6
+ background: transparent;
7
+ padding: 0;
8
+ border-style: none;
9
+ outline: none;
10
+ text-rendering: inherit;
11
+ letter-spacing: inherit;
12
+ word-spacing: inherit;
13
+ text-decoration: none;
14
+ font: inherit;
15
+ margin: 0;
16
+ overflow: visible;
17
+ text-transform: none;
18
+ width: -moz-min-content;
19
+ width: min-content;
20
+ display: inline-grid;
21
+ align-items: center;
22
+ justify-content: center;
23
+ cursor: pointer;
24
+ -webkit-user-select: none;
25
+ -moz-user-select: none;
26
+ user-select: none;
27
+ white-space: nowrap;
28
+ border-radius: 999999px;
29
+ font-size: 14px;
30
+ line-height: 22px;
31
+ font-weight: bold;
32
+ padding-right: 24px;
33
+ padding-left: 24px;
34
+ color: var(--charcoal-text2);
35
+ background-color: var(--charcoal-surface3);
36
+ transition:
37
+ 0.2s color,
38
+ 0.2s background-color,
39
+ 0.2s box-shadow;
40
+ height: 40px;
41
+ }
42
+ .charcoal-button:disabled {
43
+ cursor: default;
44
+ opacity: 0.32;
45
+ }
46
+ .charcoal-button:not(:disabled):focus-visible {
47
+ outline: none;
48
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
49
+ }
50
+ .charcoal-button:not(:disabled):hover {
51
+ color: var(--charcoal-text2-hover);
52
+ background-color: var(--charcoal-surface3-hover);
53
+ }
54
+ .charcoal-button:not(:disabled):active,
55
+ .charcoal-button[data-active=true] {
56
+ color: var(--charcoal-text2-press);
57
+ background-color: var(--charcoal-surface3-press);
58
+ }
59
+ .charcoal-button[data-variant=Primary] {
60
+ color: var(--charcoal-text5);
61
+ background-color: var(--charcoal-brand);
62
+ }
63
+ .charcoal-button[data-variant=Primary]:hover:not(:disabled) {
64
+ color: var(--charcoal-text5-hover);
65
+ background-color: var(--charcoal-brand-hover);
66
+ }
67
+ .charcoal-button[data-variant=Primary]:active:not(:disabled),
68
+ .charcoal-button[data-variant=Primary][data-active=true] {
69
+ color: var(--charcoal-text5-press);
70
+ background-color: var(--charcoal-brand-press);
71
+ }
72
+ .charcoal-button[data-variant=Overlay] {
73
+ color: var(--charcoal-text5);
74
+ background-color: var(--charcoal-surface4);
75
+ }
76
+ .charcoal-button[data-variant=Overlay]:hover:not(:disabled) {
77
+ color: var(--charcoal-text5-hover);
78
+ background-color: var(--charcoal-surface4-hover);
79
+ }
80
+ .charcoal-button[data-variant=Overlay]:active:not(:disabled),
81
+ .charcoal-button[data-variant=Overlay][data-active=true] {
82
+ color: var(--charcoal-text5-press);
83
+ background-color: var(--charcoal-surface4-press);
84
+ }
85
+ .charcoal-button[data-variant=Navigation] {
86
+ color: var(--charcoal-text5);
87
+ background-color: var(--charcoal-surface6);
88
+ }
89
+ .charcoal-button[data-variant=Navigation]:hover:not(:disabled) {
90
+ color: var(--charcoal-text5-hover);
91
+ background-color: var(--charcoal-surface6-hover);
92
+ }
93
+ .charcoal-button[data-variant=Navigation]:active:not(:disabled),
94
+ .charcoal-button[data-variant=Navigation][data-active=true] {
95
+ color: var(--charcoal-text5-press);
96
+ background-color: var(--charcoal-surface6-press);
97
+ }
98
+ .charcoal-button[data-variant=Danger] {
99
+ color: var(--charcoal-text5);
100
+ background-color: var(--charcoal-assertive);
101
+ }
102
+ .charcoal-button[data-variant=Danger]:hover:not(:disabled) {
103
+ color: var(--charcoal-text5-hover);
104
+ background-color: var(--charcoal-assertive-hover);
105
+ }
106
+ .charcoal-button[data-variant=Danger]:active:not(:disabled),
107
+ .charcoal-button[data-variant=Danger][data-active=true] {
108
+ color: var(--charcoal-text5-press);
109
+ background-color: var(--charcoal-assertive-press);
110
+ }
111
+ .charcoal-button[data-size=S] {
112
+ padding: 0 16px;
113
+ height: 32px;
114
+ }
115
+ .charcoal-button[data-full-width=true] {
116
+ width: 100%;
117
+ }
118
+ /*# sourceMappingURL=index.css.map */
package/dist/index.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Button/index.css"],"sourcesContent":[".charcoal-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: transparent;\n padding: 0;\n border-style: none;\n outline: none;\n text-rendering: inherit;\n letter-spacing: inherit;\n word-spacing: inherit;\n text-decoration: none;\n font: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n width: -moz-min-content;\n width: min-content;\n display: inline-grid;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n white-space: nowrap;\n border-radius: 999999px;\n font-size: 14px;\n line-height: 22px;\n font-weight: bold;\n padding-right: 24px;\n padding-left: 24px;\n color: var(--charcoal-text2);\n background-color: var(--charcoal-surface3);\n transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;\n height: 40px;\n}\n\n.charcoal-button:disabled {\n cursor: default;\n opacity: 0.32;\n}\n\n.charcoal-button:not(:disabled):focus-visible {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-button:not(:disabled):hover {\n color: var(--charcoal-text2-hover);\n background-color: var(--charcoal-surface3-hover);\n}\n\n.charcoal-button:not(:disabled):active,\n.charcoal-button[data-active='true'] {\n color: var(--charcoal-text2-press);\n background-color: var(--charcoal-surface3-press);\n}\n\n.charcoal-button[data-variant='Primary'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-brand);\n}\n\n.charcoal-button[data-variant='Primary']:hover:not(:disabled) {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-brand-hover);\n}\n\n.charcoal-button[data-variant='Primary']:active:not(:disabled),\n.charcoal-button[data-variant='Primary'][data-active='true'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-brand-press);\n}\n\n.charcoal-button[data-variant='Overlay'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-surface4);\n}\n\n.charcoal-button[data-variant='Overlay']:hover:not(:disabled) {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-surface4-hover);\n}\n\n.charcoal-button[data-variant='Overlay']:active:not(:disabled),\n.charcoal-button[data-variant='Overlay'][data-active='true'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-surface4-press);\n}\n\n.charcoal-button[data-variant='Navigation'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-surface6);\n}\n\n.charcoal-button[data-variant='Navigation']:hover:not(:disabled) {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-surface6-hover);\n}\n\n.charcoal-button[data-variant='Navigation']:active:not(:disabled),\n.charcoal-button[data-variant='Navigation'][data-active='true'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-surface6-press);\n}\n\n.charcoal-button[data-variant='Danger'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-assertive);\n}\n.charcoal-button[data-variant='Danger']:hover:not(:disabled) {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-assertive-hover);\n}\n\n.charcoal-button[data-variant='Danger']:active:not(:disabled),\n.charcoal-button[data-variant='Danger'][data-active='true'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-assertive-press);\n}\n\n.charcoal-button[data-size='S'] {\n padding: 0 16px;\n height: 32px;\n}\n\n.charcoal-button[data-full-width='true'] {\n width: 100%;\n}\n"],"mappings":";AAAA;AACE;AACG;AACK;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AACK;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;","names":[]}