@launchpad-ui/filter 0.4.44 → 0.4.46

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.
package/dist/index.es.js CHANGED
@@ -8,24 +8,24 @@ import { Button, IconButton } from "@launchpad-ui/button";
8
8
  import { Menu, MenuSearch, MenuDivider, MenuItem } from "@launchpad-ui/menu";
9
9
  import { Tooltip } from "@launchpad-ui/tooltip";
10
10
  import { VisuallyHidden } from "@react-aria/visually-hidden";
11
- const filter = "_filter_1rh9a_1";
12
- const buttonContainer = "_buttonContainer_1rh9a_5";
13
- const button = "_button_1rh9a_5";
14
- const appliedButton = "_appliedButton_1rh9a_24";
15
- const name = "_name_1rh9a_55";
16
- const appliedName = "_appliedName_1rh9a_60";
17
- const description = "_description_1rh9a_64";
18
- const appliedDescription = "_appliedDescription_1rh9a_70";
19
- const clear = "_clear_1rh9a_78";
20
- const isClearable = "_isClearable_1rh9a_83";
21
- const clearTooltip = "_clearTooltip_1rh9a_115";
22
- const filterClearButton = "_filterClearButton_1rh9a_121";
11
+ const filter = "_filter_1f7xm_1";
12
+ const buttonContainer = "_buttonContainer_1f7xm_5";
13
+ const button = "_button_1f7xm_5";
14
+ const appliedButton = "_appliedButton_1f7xm_24";
15
+ const name = "_name_1f7xm_55";
16
+ const appliedName = "_appliedName_1f7xm_60";
17
+ const description = "_description_1f7xm_64";
18
+ const appliedDescription = "_appliedDescription_1f7xm_70";
19
+ const clear = "_clear_1f7xm_78";
20
+ const isClearable = "_isClearable_1f7xm_83";
21
+ const clearTooltip = "_clearTooltip_1f7xm_119";
22
+ const filterClearButton = "_filterClearButton_1f7xm_125";
23
23
  const styles = {
24
24
  filter,
25
25
  buttonContainer,
26
26
  button,
27
27
  appliedButton,
28
- "focus-visible": "_focus-visible_1rh9a_1",
28
+ "focus-visible": "_focus-visible_1f7xm_1",
29
29
  name,
30
30
  appliedName,
31
31
  description,
package/dist/index.js CHANGED
@@ -10,24 +10,24 @@ const button$1 = require("@launchpad-ui/button");
10
10
  const menu = require("@launchpad-ui/menu");
11
11
  const tooltip = require("@launchpad-ui/tooltip");
12
12
  const visuallyHidden = require("@react-aria/visually-hidden");
13
- const filter = "_filter_1rh9a_1";
14
- const buttonContainer = "_buttonContainer_1rh9a_5";
15
- const button = "_button_1rh9a_5";
16
- const appliedButton = "_appliedButton_1rh9a_24";
17
- const name = "_name_1rh9a_55";
18
- const appliedName = "_appliedName_1rh9a_60";
19
- const description = "_description_1rh9a_64";
20
- const appliedDescription = "_appliedDescription_1rh9a_70";
21
- const clear = "_clear_1rh9a_78";
22
- const isClearable = "_isClearable_1rh9a_83";
23
- const clearTooltip = "_clearTooltip_1rh9a_115";
24
- const filterClearButton = "_filterClearButton_1rh9a_121";
13
+ const filter = "_filter_1f7xm_1";
14
+ const buttonContainer = "_buttonContainer_1f7xm_5";
15
+ const button = "_button_1f7xm_5";
16
+ const appliedButton = "_appliedButton_1f7xm_24";
17
+ const name = "_name_1f7xm_55";
18
+ const appliedName = "_appliedName_1f7xm_60";
19
+ const description = "_description_1f7xm_64";
20
+ const appliedDescription = "_appliedDescription_1f7xm_70";
21
+ const clear = "_clear_1f7xm_78";
22
+ const isClearable = "_isClearable_1f7xm_83";
23
+ const clearTooltip = "_clearTooltip_1f7xm_119";
24
+ const filterClearButton = "_filterClearButton_1f7xm_125";
25
25
  const styles = {
26
26
  filter,
27
27
  buttonContainer,
28
28
  button,
29
29
  appliedButton,
30
- "focus-visible": "_focus-visible_1rh9a_1",
30
+ "focus-visible": "_focus-visible_1f7xm_1",
31
31
  name,
32
32
  appliedName,
33
33
  description,
package/dist/style.css CHANGED
@@ -1,15 +1,15 @@
1
- ._filter_1rh9a_1 {
1
+ ._filter_1f7xm_1 {
2
2
  font-family: var(--lp-font-family-base);
3
3
  }
4
4
 
5
- ._buttonContainer_1rh9a_5 {
5
+ ._buttonContainer_1f7xm_5 {
6
6
  cursor: pointer;
7
7
  display: inline-flex;
8
8
  align-items: center;
9
9
  position: relative;
10
10
  }
11
11
 
12
- ._button_1rh9a_5 {
12
+ ._button_1f7xm_5 {
13
13
  border-radius: var(--lp-border-radius-medium);
14
14
  padding-top: 0;
15
15
  padding-bottom: 0;
@@ -21,7 +21,7 @@
21
21
  background-color: var(--lp-color-bg-interactive-secondary);
22
22
  }
23
23
 
24
- ._appliedButton_1rh9a_24 {
24
+ ._appliedButton_1f7xm_24 {
25
25
  color: var(--lp-color-text-ui-primary);
26
26
  height: 2rem;
27
27
  background-color: var(--lp-color-bg-interactive-secondary-hover);
@@ -30,8 +30,8 @@
30
30
  display: flex;
31
31
  }
32
32
 
33
- ._button_1rh9a_5,
34
- ._appliedButton_1rh9a_24 {
33
+ ._button_1f7xm_5,
34
+ ._appliedButton_1f7xm_24 {
35
35
  font-family: inherit;
36
36
  font-size: 1.3rem;
37
37
  cursor: pointer;
@@ -40,41 +40,41 @@
40
40
  border-color: transparent;
41
41
  }
42
42
 
43
- ._button_1rh9a_5:hover, ._appliedButton_1rh9a_24:hover {
43
+ ._button_1f7xm_5:hover, ._appliedButton_1f7xm_24:hover {
44
44
  background-color: var(--lp-color-bg-interactive-secondary-hover);
45
45
  border-color: var(--lp-color-border-interactive-secondary-hover);
46
46
  }
47
47
 
48
- ._button_1rh9a_5._focus-visible_1rh9a_1, ._appliedButton_1rh9a_24._focus-visible_1rh9a_1 {
49
- box-shadow: 0 0 0 2px var(--lp-color-shadow-interactive-primary),
50
- 0 0 0 4px var(--lp-color-shadow-interactive-focus);
51
- border-color: var(--lp-color-border-interactive-secondary-focus);
48
+ ._button_1f7xm_5._focus-visible_1f7xm_1, ._appliedButton_1f7xm_24._focus-visible_1f7xm_1 {
52
49
  outline: none;
50
+ border-color: var(--lp-color-border-interactive-secondary-focus);
51
+ box-shadow: 0 0 0 2px var(--lp-color-bg-ui-primary),
52
+ 0 0 0 4px var(--lp-color-shadow-interactive-focus);
53
53
  }
54
54
 
55
- ._button_1rh9a_5:focus-visible, ._appliedButton_1rh9a_24:focus-visible {
56
- box-shadow: 0 0 0 2px var(--lp-color-shadow-interactive-primary),
57
- 0 0 0 4px var(--lp-color-shadow-interactive-focus);
58
- border-color: var(--lp-color-border-interactive-secondary-focus);
55
+ ._button_1f7xm_5:focus-visible, ._appliedButton_1f7xm_24:focus-visible {
59
56
  outline: none;
57
+ border-color: var(--lp-color-border-interactive-secondary-focus);
58
+ box-shadow: 0 0 0 2px var(--lp-color-bg-ui-primary),
59
+ 0 0 0 4px var(--lp-color-shadow-interactive-focus);
60
60
  }
61
61
 
62
- ._name_1rh9a_55 {
62
+ ._name_1f7xm_55 {
63
63
  margin-right: 0.5rem;
64
64
  font-weight: var(--lp-font-weight-medium);
65
65
  }
66
66
 
67
- ._appliedName_1rh9a_60 {
67
+ ._appliedName_1f7xm_60 {
68
68
  margin-right: 0.3rem;
69
69
  }
70
70
 
71
- ._description_1rh9a_64 {
71
+ ._description_1f7xm_64 {
72
72
  color: var(--lp-color-text-ui-primary);
73
73
  font-weight: var(--lp-font-weight-medium);
74
74
  }
75
75
 
76
- ._description_1rh9a_64,
77
- ._appliedDescription_1rh9a_70 {
76
+ ._description_1f7xm_64,
77
+ ._appliedDescription_1f7xm_70 {
78
78
  margin-right: 0.5rem;
79
79
  max-width: 16rem;
80
80
  overflow: hidden;
@@ -82,72 +82,56 @@
82
82
  white-space: nowrap;
83
83
  }
84
84
 
85
- ._clear_1rh9a_78 {
85
+ ._clear_1f7xm_78 {
86
86
  cursor: pointer;
87
87
  padding: 0.3rem;
88
88
  }
89
89
 
90
- ._button_1rh9a_5._isClearable_1rh9a_83 {
91
- background-color: var(--lp-color-blue-200);
90
+ ._button_1f7xm_5._isClearable_1f7xm_83 {
91
+ background-color: rgba(0, 0, 0, 0.15);
92
92
  padding-right: 3.1rem;
93
93
  }
94
94
 
95
- ._button_1rh9a_5._isClearable_1rh9a_83:focus,
96
- ._button_1rh9a_5._isClearable_1rh9a_83:hover,
97
- ._button_1rh9a_5._isClearable_1rh9a_83:active {
98
- background-color: var(--lp-color-blue-300);
95
+ ._button_1f7xm_5._isClearable_1f7xm_83:focus,
96
+ ._button_1f7xm_5._isClearable_1f7xm_83:hover,
97
+ ._button_1f7xm_5._isClearable_1f7xm_83:active {
98
+ background-color: rgba(0, 0, 0, 0.2);
99
+ border-color: var(--lp-color-gray-800);
99
100
  }
100
101
 
101
- ._button_1rh9a_5._isClearable_1rh9a_83:focus:not(._focus-visible_1rh9a_1) {
102
- background-color: transparent;
103
- background-color: initial;
104
- }
105
-
106
- ._button_1rh9a_5._isClearable_1rh9a_83:focus:not(._focus-visible_1rh9a_1) {
107
- background-color: transparent;
108
- background-color: initial;
109
- }
110
-
111
- ._button_1rh9a_5._isClearable_1rh9a_83:focus:not(._focus-visible_1rh9a_1) {
112
- background-color: transparent;
113
- background-color: initial;
114
- }
115
-
116
- ._button_1rh9a_5._isClearable_1rh9a_83:focus:not(:focus-visible) {
117
- background-color: transparent;
118
- background-color: initial;
119
- }
120
-
121
- ._button_1rh9a_5._isClearable_1rh9a_83:focus:not(._focus-visible_1rh9a_1):hover {
122
- background-color: var(--lp-color-blue-300);
102
+ :root[data-theme='dark'] ._button_1f7xm_5._isClearable_1f7xm_83 {
103
+ background-color: rgba(248, 248, 248, 0.15);
123
104
  }
124
105
 
125
- ._button_1rh9a_5._isClearable_1rh9a_83:focus:not(:focus-visible):hover {
126
- background-color: var(--lp-color-blue-300);
127
- }
106
+ :root[data-theme='dark'] ._button_1f7xm_5._isClearable_1f7xm_83:focus,
107
+ :root[data-theme='dark'] ._button_1f7xm_5._isClearable_1f7xm_83:hover,
108
+ :root[data-theme='dark'] ._button_1f7xm_5._isClearable_1f7xm_83:active {
109
+ background-color: rgba(248, 248, 248, 0.2);
110
+ border-color: var(--lp-color-gray-500);
111
+ }
128
112
 
129
- ._button_1rh9a_5:hover:not(._isClearable_1rh9a_83),
130
- ._button_1rh9a_5:focus:not(._isClearable_1rh9a_83),
131
- [data-state='open'] ._button_1rh9a_5:not(._isClearable_1rh9a_83) {
113
+ ._button_1f7xm_5:hover:not(._isClearable_1f7xm_83),
114
+ ._button_1f7xm_5:focus:not(._isClearable_1f7xm_83),
115
+ [data-state='open'] ._button_1f7xm_5:not(._isClearable_1f7xm_83) {
132
116
  background-color: var(--lp-color-bg-interactive-secondary-hover);
133
117
  border-color: var(--lp-color-border-interactive-secondary-hover);
134
118
  }
135
119
 
136
- ._button_1rh9a_5:focus:not(._focus-visible_1rh9a_1):not(._isClearable_1rh9a_83):hover {
120
+ ._button_1f7xm_5:focus:not(._focus-visible_1f7xm_1):not(._isClearable_1f7xm_83):hover {
137
121
  background-color: var(--lp-color-bg-interactive-secondary-hover);
138
122
  }
139
123
 
140
- ._button_1rh9a_5:focus:not(:focus-visible):not(._isClearable_1rh9a_83):hover {
124
+ ._button_1f7xm_5:focus:not(:focus-visible):not(._isClearable_1f7xm_83):hover {
141
125
  background-color: var(--lp-color-bg-interactive-secondary-hover);
142
126
  }
143
127
 
144
- ._clearTooltip_1rh9a_115 {
128
+ ._clearTooltip_1f7xm_119 {
145
129
  line-height: 1;
146
130
  position: absolute;
147
131
  right: 0.7rem;
148
132
  }
149
133
 
150
- ._filterClearButton_1rh9a_121 {
134
+ ._filterClearButton_1f7xm_125 {
151
135
  text-decoration: none;
152
136
  color: var(--lp-color-text-interactive-destructive);
153
137
  font-size: 1.3rem;
@@ -157,69 +141,26 @@
157
141
  border-bottom: 1px solid var(--lp-color-border-interactive-secondary);
158
142
  }
159
143
 
160
- ._filterClearButton_1rh9a_121:active,
161
- ._filterClearButton_1rh9a_121:focus,
162
- ._filterClearButton_1rh9a_121:hover {
144
+ ._filterClearButton_1f7xm_125:active,
145
+ ._filterClearButton_1f7xm_125:focus,
146
+ ._filterClearButton_1f7xm_125:hover {
163
147
  outline: none;
164
148
  box-shadow: none;
165
149
  box-shadow: initial;
166
150
  color: var(--lp-color-text-interactive-destructive);
167
151
  }
168
152
 
169
- ._filterClearButton_1rh9a_121:active {
153
+ ._filterClearButton_1f7xm_125:active {
170
154
  border-bottom-color: var(--lp-color-border-interactive-secondary-active);
171
155
  background-color: var(--lp-color-bg-interactive-secondary-active);
172
156
  }
173
157
 
174
- ._filterClearButton_1rh9a_121:focus {
158
+ ._filterClearButton_1f7xm_125:focus {
175
159
  border-bottom-color: var(--lp-color-border-interactive-secondary-focus);
176
160
  background-color: var(--lp-color-bg-interactive-secondary-focus);
177
161
  }
178
162
 
179
- ._filterClearButton_1rh9a_121:hover {
163
+ ._filterClearButton_1f7xm_125:hover {
180
164
  border-bottom-color: var(--lp-color-border-interactive-secondary-hover);
181
165
  background-color: var(--lp-color-bg-interactive-secondary-hover);
182
166
  }
183
-
184
- /* stylelint-disable-next-line no-descending-specificity */
185
-
186
- :root[data-theme='dark'] ._button_1rh9a_5._isClearable_1rh9a_83 {
187
- background-color: var(--lp-color-cyan-900);
188
- border-color: var(--lp-color-cyan-900);
189
- padding-right: 3.1rem;
190
- }
191
-
192
- :root[data-theme='dark'] ._button_1rh9a_5._isClearable_1rh9a_83:focus,
193
- :root[data-theme='dark'] ._button_1rh9a_5._isClearable_1rh9a_83:hover,
194
- :root[data-theme='dark'] ._button_1rh9a_5._isClearable_1rh9a_83:active {
195
- background-color: var(--lp-color-cyan-800);
196
- border-color: var(--lp-color-cyan-800);
197
- }
198
-
199
- :root[data-theme='dark'] ._button_1rh9a_5._isClearable_1rh9a_83:focus:not(._focus-visible_1rh9a_1) {
200
- background-color: transparent;
201
- background-color: initial;
202
- }
203
-
204
- :root[data-theme='dark'] ._button_1rh9a_5._isClearable_1rh9a_83:focus:not(._focus-visible_1rh9a_1) {
205
- background-color: transparent;
206
- background-color: initial;
207
- }
208
-
209
- :root[data-theme='dark'] ._button_1rh9a_5._isClearable_1rh9a_83:focus:not(._focus-visible_1rh9a_1) {
210
- background-color: transparent;
211
- background-color: initial;
212
- }
213
-
214
- :root[data-theme='dark'] ._button_1rh9a_5._isClearable_1rh9a_83:focus:not(:focus-visible) {
215
- background-color: transparent;
216
- background-color: initial;
217
- }
218
-
219
- :root[data-theme='dark'] ._button_1rh9a_5._isClearable_1rh9a_83:focus:not(._focus-visible_1rh9a_1):hover {
220
- background-color: var(--lp-color-cyan-900);
221
- }
222
-
223
- :root[data-theme='dark'] ._button_1rh9a_5._isClearable_1rh9a_83:focus:not(:focus-visible):hover {
224
- background-color: var(--lp-color-cyan-900);
225
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchpad-ui/filter",
3
- "version": "0.4.44",
3
+ "version": "0.4.46",
4
4
  "status": "beta",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -28,12 +28,12 @@
28
28
  "dependencies": {
29
29
  "@react-aria/visually-hidden": "3.6.0",
30
30
  "classix": "2.1.17",
31
- "@launchpad-ui/button": "~0.7.22",
32
- "@launchpad-ui/dropdown": "~0.6.18",
33
- "@launchpad-ui/icons": "~0.6.14",
34
- "@launchpad-ui/menu": "~0.6.41",
35
- "@launchpad-ui/tokens": "~0.4.7",
36
- "@launchpad-ui/tooltip": "~0.6.33"
31
+ "@launchpad-ui/button": "~0.7.23",
32
+ "@launchpad-ui/dropdown": "~0.6.20",
33
+ "@launchpad-ui/icons": "~0.6.15",
34
+ "@launchpad-ui/menu": "~0.6.43",
35
+ "@launchpad-ui/tokens": "~0.4.8",
36
+ "@launchpad-ui/tooltip": "~0.6.35"
37
37
  },
38
38
  "peerDependencies": {
39
39
  "react": "18.2.0",