@launchpad-ui/filter 0.4.33 → 0.4.34

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 (4) hide show
  1. package/dist/index.es.js +13 -13
  2. package/dist/index.js +13 -13
  3. package/dist/style.css +67 -52
  4. package/package.json +7 -7
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_9quhv_1";
12
- const buttonContainer = "_buttonContainer_9quhv_5";
13
- const button = "_button_9quhv_5";
14
- const appliedButton = "_appliedButton_9quhv_24";
15
- const name = "_name_9quhv_55";
16
- const appliedName = "_appliedName_9quhv_60";
17
- const description = "_description_9quhv_64";
18
- const appliedDescription = "_appliedDescription_9quhv_70";
19
- const clear = "_clear_9quhv_78";
20
- const isClearable = "_isClearable_9quhv_87";
21
- const clearTooltip = "_clearTooltip_9quhv_119";
22
- const filterClearButton = "_filterClearButton_9quhv_125";
11
+ const filter = "_filter_8q50m_1";
12
+ const buttonContainer = "_buttonContainer_8q50m_5";
13
+ const button = "_button_8q50m_5";
14
+ const appliedButton = "_appliedButton_8q50m_24";
15
+ const name = "_name_8q50m_55";
16
+ const appliedName = "_appliedName_8q50m_60";
17
+ const description = "_description_8q50m_64";
18
+ const appliedDescription = "_appliedDescription_8q50m_70";
19
+ const clear = "_clear_8q50m_78";
20
+ const isClearable = "_isClearable_8q50m_87";
21
+ const clearTooltip = "_clearTooltip_8q50m_119";
22
+ const filterClearButton = "_filterClearButton_8q50m_125";
23
23
  const styles = {
24
24
  filter,
25
25
  buttonContainer,
26
26
  button,
27
27
  appliedButton,
28
- "focus-visible": "_focus-visible_9quhv_1",
28
+ "focus-visible": "_focus-visible_8q50m_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_9quhv_1";
14
- const buttonContainer = "_buttonContainer_9quhv_5";
15
- const button = "_button_9quhv_5";
16
- const appliedButton = "_appliedButton_9quhv_24";
17
- const name = "_name_9quhv_55";
18
- const appliedName = "_appliedName_9quhv_60";
19
- const description = "_description_9quhv_64";
20
- const appliedDescription = "_appliedDescription_9quhv_70";
21
- const clear = "_clear_9quhv_78";
22
- const isClearable = "_isClearable_9quhv_87";
23
- const clearTooltip = "_clearTooltip_9quhv_119";
24
- const filterClearButton = "_filterClearButton_9quhv_125";
13
+ const filter = "_filter_8q50m_1";
14
+ const buttonContainer = "_buttonContainer_8q50m_5";
15
+ const button = "_button_8q50m_5";
16
+ const appliedButton = "_appliedButton_8q50m_24";
17
+ const name = "_name_8q50m_55";
18
+ const appliedName = "_appliedName_8q50m_60";
19
+ const description = "_description_8q50m_64";
20
+ const appliedDescription = "_appliedDescription_8q50m_70";
21
+ const clear = "_clear_8q50m_78";
22
+ const isClearable = "_isClearable_8q50m_87";
23
+ const clearTooltip = "_clearTooltip_8q50m_119";
24
+ const filterClearButton = "_filterClearButton_8q50m_125";
25
25
  const styles = {
26
26
  filter,
27
27
  buttonContainer,
28
28
  button,
29
29
  appliedButton,
30
- "focus-visible": "_focus-visible_9quhv_1",
30
+ "focus-visible": "_focus-visible_8q50m_1",
31
31
  name,
32
32
  appliedName,
33
33
  description,
package/dist/style.css CHANGED
@@ -1,16 +1,16 @@
1
- ._filter_9quhv_1 {
1
+ ._filter_8q50m_1 {
2
2
  font-family: var(--lp-font-family-base);
3
3
  }
4
4
 
5
- ._buttonContainer_9quhv_5 {
5
+ ._buttonContainer_8q50m_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_9quhv_5 {
13
- border-radius: var(--lp-border-radius);
12
+ ._button_8q50m_5 {
13
+ border-radius: var(--lp-border-radius-medium);
14
14
  padding-top: 0;
15
15
  padding-bottom: 0;
16
16
  line-height: 3.2rem;
@@ -21,7 +21,7 @@
21
21
  background-color: var(--lp-color-bg-interactive-secondary);
22
22
  }
23
23
 
24
- ._appliedButton_9quhv_24 {
24
+ ._appliedButton_8q50m_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,51 +30,51 @@
30
30
  display: flex;
31
31
  }
32
32
 
33
- ._button_9quhv_5,
34
- ._appliedButton_9quhv_24 {
33
+ ._button_8q50m_5,
34
+ ._appliedButton_8q50m_24 {
35
35
  font-family: inherit;
36
36
  font-size: 1.3rem;
37
37
  cursor: pointer;
38
38
  border-width: var(--lp-border-width-200);
39
39
  border-style: solid;
40
- border-color: var(--lp-color-white);
40
+ border-color: transparent;
41
41
  }
42
42
 
43
- ._button_9quhv_5:hover, ._appliedButton_9quhv_24:hover {
43
+ ._button_8q50m_5:hover, ._appliedButton_8q50m_24:hover {
44
44
  background-color: var(--lp-color-bg-interactive-secondary-hover);
45
- border-color: var(--lp-color-border-ui-primary);
45
+ border-color: var(--lp-color-border-interactive-secondary-hover);
46
46
  }
47
47
 
48
- ._button_9quhv_5._focus-visible_9quhv_1, ._appliedButton_9quhv_24._focus-visible_9quhv_1 {
48
+ ._button_8q50m_5._focus-visible_8q50m_1, ._appliedButton_8q50m_24._focus-visible_8q50m_1 {
49
49
  box-shadow: 0 0 0 2px var(--lp-color-shadow-interactive-primary),
50
50
  0 0 0 4px var(--lp-color-shadow-interactive-focus);
51
- border-color: var(--lp-color-border-ui-primary);
51
+ border-color: var(--lp-color-border-interactive-secondary-focus);
52
52
  outline: none;
53
53
  }
54
54
 
55
- ._button_9quhv_5:focus-visible, ._appliedButton_9quhv_24:focus-visible {
55
+ ._button_8q50m_5:focus-visible, ._appliedButton_8q50m_24:focus-visible {
56
56
  box-shadow: 0 0 0 2px var(--lp-color-shadow-interactive-primary),
57
57
  0 0 0 4px var(--lp-color-shadow-interactive-focus);
58
- border-color: var(--lp-color-border-ui-primary);
58
+ border-color: var(--lp-color-border-interactive-secondary-focus);
59
59
  outline: none;
60
60
  }
61
61
 
62
- ._name_9quhv_55 {
62
+ ._name_8q50m_55 {
63
63
  margin-right: 0.5rem;
64
64
  font-weight: var(--lp-font-weight-medium);
65
65
  }
66
66
 
67
- ._appliedName_9quhv_60 {
67
+ ._appliedName_8q50m_60 {
68
68
  margin-right: 0.3rem;
69
69
  }
70
70
 
71
- ._description_9quhv_64 {
71
+ ._description_8q50m_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_9quhv_64,
77
- ._appliedDescription_9quhv_70 {
76
+ ._description_8q50m_64,
77
+ ._appliedDescription_8q50m_70 {
78
78
  margin-right: 0.5rem;
79
79
  max-width: 16rem;
80
80
  overflow: hidden;
@@ -82,7 +82,7 @@
82
82
  white-space: nowrap;
83
83
  }
84
84
 
85
- ._clear_9quhv_78 {
85
+ ._clear_8q50m_78 {
86
86
  cursor: pointer;
87
87
  padding: 0.3rem;
88
88
  }
@@ -91,124 +91,139 @@
91
91
  border: 1px solid var(--lp-color-gray-600);
92
92
  }
93
93
 
94
- ._button_9quhv_5._isClearable_9quhv_87 {
94
+ ._button_8q50m_5._isClearable_8q50m_87 {
95
95
  background-color: var(--lp-color-blue-200);
96
96
  padding-right: 3.1rem;
97
97
  }
98
98
 
99
- ._button_9quhv_5._isClearable_9quhv_87:focus,
100
- ._button_9quhv_5._isClearable_9quhv_87:hover,
101
- ._button_9quhv_5._isClearable_9quhv_87:active {
99
+ ._button_8q50m_5._isClearable_8q50m_87:focus,
100
+ ._button_8q50m_5._isClearable_8q50m_87:hover,
101
+ ._button_8q50m_5._isClearable_8q50m_87:active {
102
102
  background-color: var(--lp-color-blue-300);
103
103
  }
104
104
 
105
- ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
105
+ ._button_8q50m_5._isClearable_8q50m_87:focus:not(._focus-visible_8q50m_1) {
106
106
  background-color: transparent;
107
107
  background-color: initial;
108
108
  }
109
109
 
110
- ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
110
+ ._button_8q50m_5._isClearable_8q50m_87:focus:not(._focus-visible_8q50m_1) {
111
111
  background-color: transparent;
112
112
  background-color: initial;
113
113
  }
114
114
 
115
- ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
115
+ ._button_8q50m_5._isClearable_8q50m_87:focus:not(._focus-visible_8q50m_1) {
116
116
  background-color: transparent;
117
117
  background-color: initial;
118
118
  }
119
119
 
120
- ._button_9quhv_5._isClearable_9quhv_87:focus:not(:focus-visible) {
120
+ ._button_8q50m_5._isClearable_8q50m_87:focus:not(:focus-visible) {
121
121
  background-color: transparent;
122
122
  background-color: initial;
123
123
  }
124
124
 
125
- ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1):hover {
125
+ ._button_8q50m_5._isClearable_8q50m_87:focus:not(._focus-visible_8q50m_1):hover {
126
126
  background-color: var(--lp-color-blue-300);
127
127
  }
128
128
 
129
- ._button_9quhv_5._isClearable_9quhv_87:focus:not(:focus-visible):hover {
129
+ ._button_8q50m_5._isClearable_8q50m_87:focus:not(:focus-visible):hover {
130
130
  background-color: var(--lp-color-blue-300);
131
131
  }
132
132
 
133
- ._button_9quhv_5:hover:not(._isClearable_9quhv_87),
134
- ._button_9quhv_5:focus:not(._isClearable_9quhv_87),
135
- [data-state='open'] ._button_9quhv_5:not(._isClearable_9quhv_87) {
133
+ ._button_8q50m_5:hover:not(._isClearable_8q50m_87),
134
+ ._button_8q50m_5:focus:not(._isClearable_8q50m_87),
135
+ [data-state='open'] ._button_8q50m_5:not(._isClearable_8q50m_87) {
136
136
  background-color: var(--lp-color-bg-interactive-secondary-hover);
137
137
  border-color: var(--lp-color-border-interactive-secondary-hover);
138
138
  }
139
139
 
140
- ._button_9quhv_5:focus:not(._focus-visible_9quhv_1):not(._isClearable_9quhv_87):hover {
140
+ ._button_8q50m_5:focus:not(._focus-visible_8q50m_1):not(._isClearable_8q50m_87):hover {
141
141
  background-color: var(--lp-color-bg-interactive-secondary-hover);
142
142
  }
143
143
 
144
- ._button_9quhv_5:focus:not(:focus-visible):not(._isClearable_9quhv_87):hover {
144
+ ._button_8q50m_5:focus:not(:focus-visible):not(._isClearable_8q50m_87):hover {
145
145
  background-color: var(--lp-color-bg-interactive-secondary-hover);
146
146
  }
147
147
 
148
- ._clearTooltip_9quhv_119 {
148
+ ._clearTooltip_8q50m_119 {
149
149
  line-height: 1;
150
150
  position: absolute;
151
151
  right: 0.7rem;
152
152
  }
153
153
 
154
- ._filterClearButton_9quhv_125 {
154
+ ._filterClearButton_8q50m_125 {
155
155
  text-decoration: none;
156
156
  color: var(--lp-color-text-interactive-destructive);
157
157
  font-size: 1.3rem;
158
158
  font-weight: var(--lp-font-weight-medium);
159
159
  padding: 1rem;
160
160
  width: 100%;
161
- border-bottom: 1px solid var(--lp-color-border-ui-primary);
161
+ border-bottom: 1px solid var(--lp-color-border-interactive-secondary);
162
162
  }
163
163
 
164
- ._filterClearButton_9quhv_125:active,
165
- ._filterClearButton_9quhv_125:focus,
166
- ._filterClearButton_9quhv_125:hover {
164
+ ._filterClearButton_8q50m_125:active,
165
+ ._filterClearButton_8q50m_125:focus,
166
+ ._filterClearButton_8q50m_125:hover {
167
167
  outline: none;
168
168
  box-shadow: none;
169
169
  box-shadow: initial;
170
170
  color: var(--lp-color-text-interactive-destructive);
171
- border-bottom-color: var(--lp-color-border-ui-primary);
171
+ }
172
+
173
+ ._filterClearButton_8q50m_125:active {
174
+ border-bottom-color: var(--lp-color-border-interactive-secondary-active);
175
+ background-color: var(--lp-color-bg-interactive-secondary-active);
176
+ }
177
+
178
+ ._filterClearButton_8q50m_125:focus {
179
+ border-bottom-color: var(--lp-color-border-interactive-secondary-focus);
180
+ background-color: var(--lp-color-bg-interactive-secondary-focus);
181
+ }
182
+
183
+ ._filterClearButton_8q50m_125:hover {
184
+ border-bottom-color: var(--lp-color-border-interactive-secondary-hover);
172
185
  background-color: var(--lp-color-bg-interactive-secondary-hover);
173
186
  }
174
187
 
175
188
  /* stylelint-disable-next-line no-descending-specificity */
176
189
 
177
- :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87 {
190
+ :root[data-theme='dark'] ._button_8q50m_5._isClearable_8q50m_87 {
178
191
  background-color: var(--lp-color-cyan-900);
192
+ border-color: var(--lp-color-cyan-900);
179
193
  padding-right: 3.1rem;
180
194
  }
181
195
 
182
- :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus,
183
- :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:hover,
184
- :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:active {
196
+ :root[data-theme='dark'] ._button_8q50m_5._isClearable_8q50m_87:focus,
197
+ :root[data-theme='dark'] ._button_8q50m_5._isClearable_8q50m_87:hover,
198
+ :root[data-theme='dark'] ._button_8q50m_5._isClearable_8q50m_87:active {
185
199
  background-color: var(--lp-color-cyan-800);
200
+ border-color: var(--lp-color-cyan-800);
186
201
  }
187
202
 
188
- :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
203
+ :root[data-theme='dark'] ._button_8q50m_5._isClearable_8q50m_87:focus:not(._focus-visible_8q50m_1) {
189
204
  background-color: transparent;
190
205
  background-color: initial;
191
206
  }
192
207
 
193
- :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
208
+ :root[data-theme='dark'] ._button_8q50m_5._isClearable_8q50m_87:focus:not(._focus-visible_8q50m_1) {
194
209
  background-color: transparent;
195
210
  background-color: initial;
196
211
  }
197
212
 
198
- :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
213
+ :root[data-theme='dark'] ._button_8q50m_5._isClearable_8q50m_87:focus:not(._focus-visible_8q50m_1) {
199
214
  background-color: transparent;
200
215
  background-color: initial;
201
216
  }
202
217
 
203
- :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(:focus-visible) {
218
+ :root[data-theme='dark'] ._button_8q50m_5._isClearable_8q50m_87:focus:not(:focus-visible) {
204
219
  background-color: transparent;
205
220
  background-color: initial;
206
221
  }
207
222
 
208
- :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1):hover {
223
+ :root[data-theme='dark'] ._button_8q50m_5._isClearable_8q50m_87:focus:not(._focus-visible_8q50m_1):hover {
209
224
  background-color: var(--lp-color-cyan-900);
210
225
  }
211
226
 
212
- :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(:focus-visible):hover {
227
+ :root[data-theme='dark'] ._button_8q50m_5._isClearable_8q50m_87:focus:not(:focus-visible):hover {
213
228
  background-color: var(--lp-color-cyan-900);
214
229
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchpad-ui/filter",
3
- "version": "0.4.33",
3
+ "version": "0.4.34",
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.13",
31
- "@launchpad-ui/button": "~0.7.12",
32
- "@launchpad-ui/dropdown": "~0.6.8",
33
- "@launchpad-ui/icons": "~0.6.5",
34
- "@launchpad-ui/menu": "~0.6.32",
35
- "@launchpad-ui/tokens": "~0.3.2",
36
- "@launchpad-ui/tooltip": "~0.6.24"
31
+ "@launchpad-ui/button": "~0.7.13",
32
+ "@launchpad-ui/dropdown": "~0.6.9",
33
+ "@launchpad-ui/icons": "~0.6.6",
34
+ "@launchpad-ui/menu": "~0.6.33",
35
+ "@launchpad-ui/tokens": "~0.4.0",
36
+ "@launchpad-ui/tooltip": "~0.6.25"
37
37
  },
38
38
  "peerDependencies": {
39
39
  "react": "^18.0.0",