@launchpad-ui/filter 0.4.60 → 0.5.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 (4) hide show
  1. package/dist/index.es.js +12 -12
  2. package/dist/index.js +12 -12
  3. package/dist/style.css +47 -42
  4. package/package.json +7 -7
package/dist/index.es.js CHANGED
@@ -8,18 +8,18 @@ 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_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";
11
+ const filter = "_filter_1vct5_14";
12
+ const buttonContainer = "_buttonContainer_1vct5_18";
13
+ const button = "_button_1vct5_18";
14
+ const appliedButton = "_appliedButton_1vct5_37";
15
+ const name = "_name_1vct5_68";
16
+ const appliedName = "_appliedName_1vct5_73";
17
+ const description = "_description_1vct5_77";
18
+ const appliedDescription = "_appliedDescription_1vct5_83";
19
+ const clear = "_clear_1vct5_91";
20
+ const isClearable = "_isClearable_1vct5_96";
21
+ const clearTooltip = "_clearTooltip_1vct5_121";
22
+ const filterClearButton = "_filterClearButton_1vct5_127";
23
23
  const styles = {
24
24
  filter,
25
25
  buttonContainer,
package/dist/index.js CHANGED
@@ -10,18 +10,18 @@ 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_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";
13
+ const filter = "_filter_1vct5_14";
14
+ const buttonContainer = "_buttonContainer_1vct5_18";
15
+ const button = "_button_1vct5_18";
16
+ const appliedButton = "_appliedButton_1vct5_37";
17
+ const name = "_name_1vct5_68";
18
+ const appliedName = "_appliedName_1vct5_73";
19
+ const description = "_description_1vct5_77";
20
+ const appliedDescription = "_appliedDescription_1vct5_83";
21
+ const clear = "_clear_1vct5_91";
22
+ const isClearable = "_isClearable_1vct5_96";
23
+ const clearTooltip = "_clearTooltip_1vct5_121";
24
+ const filterClearButton = "_filterClearButton_1vct5_127";
25
25
  const styles = {
26
26
  filter,
27
27
  buttonContainer,
package/dist/style.css CHANGED
@@ -1,15 +1,28 @@
1
- ._filter_1f7xm_1 {
1
+ :root,
2
+ [data-theme='default'] {
3
+ --lp-component-filter-color-bg-clearable: rgba(0, 0, 0, 0.15);
4
+ --lp-component-filter-color-bg-clearable-focus: rgba(0, 0, 0, 0.2);
5
+ --lp-component-filter-color-border-clearable-focus: var(--lp-color-gray-800);
6
+ }
7
+
8
+ [data-theme='dark'] {
9
+ --lp-component-filter-color-bg-clearable: rgba(248, 248, 248, 0.15);
10
+ --lp-component-filter-color-bg-clearable-focus: rgba(248, 248, 248, 0.2);
11
+ --lp-component-filter-color-border-clearable-focus: var(--lp-color-gray-500);
12
+ }
13
+
14
+ ._filter_1vct5_14 {
2
15
  font-family: var(--lp-font-family-base);
3
16
  }
4
17
 
5
- ._buttonContainer_1f7xm_5 {
18
+ ._buttonContainer_1vct5_18 {
6
19
  cursor: pointer;
7
20
  display: inline-flex;
8
21
  align-items: center;
9
22
  position: relative;
10
23
  }
11
24
 
12
- ._button_1f7xm_5 {
25
+ ._button_1vct5_18 {
13
26
  border-radius: var(--lp-border-radius-medium);
14
27
  padding-top: 0;
15
28
  padding-bottom: 0;
@@ -21,7 +34,7 @@
21
34
  background-color: var(--lp-color-bg-interactive-secondary);
22
35
  }
23
36
 
24
- ._appliedButton_1f7xm_24 {
37
+ ._appliedButton_1vct5_37 {
25
38
  color: var(--lp-color-text-ui-primary);
26
39
  height: 2rem;
27
40
  background-color: var(--lp-color-bg-interactive-secondary-hover);
@@ -30,8 +43,8 @@
30
43
  display: flex;
31
44
  }
32
45
 
33
- ._button_1f7xm_5,
34
- ._appliedButton_1f7xm_24 {
46
+ ._button_1vct5_18,
47
+ ._appliedButton_1vct5_37 {
35
48
  font-family: inherit;
36
49
  font-size: 1.3rem;
37
50
  cursor: pointer;
@@ -40,34 +53,34 @@
40
53
  border-color: transparent;
41
54
  }
42
55
 
43
- ._button_1f7xm_5:hover, ._appliedButton_1f7xm_24:hover {
56
+ ._button_1vct5_18:hover, ._appliedButton_1vct5_37:hover {
44
57
  background-color: var(--lp-color-bg-interactive-secondary-hover);
45
58
  border-color: var(--lp-color-border-interactive-secondary-hover);
46
59
  }
47
60
 
48
- ._button_1f7xm_5:focus-visible, ._appliedButton_1f7xm_24:focus-visible {
61
+ ._button_1vct5_18:focus-visible, ._appliedButton_1vct5_37:focus-visible {
49
62
  outline: none;
50
63
  border-color: var(--lp-color-border-interactive-secondary-focus);
51
64
  box-shadow: 0 0 0 2px var(--lp-color-bg-ui-primary),
52
65
  0 0 0 4px var(--lp-color-shadow-interactive-focus);
53
66
  }
54
67
 
55
- ._name_1f7xm_55 {
68
+ ._name_1vct5_68 {
56
69
  margin-right: 0.5rem;
57
70
  font-weight: var(--lp-font-weight-medium);
58
71
  }
59
72
 
60
- ._appliedName_1f7xm_60 {
73
+ ._appliedName_1vct5_73 {
61
74
  margin-right: 0.3rem;
62
75
  }
63
76
 
64
- ._description_1f7xm_64 {
77
+ ._description_1vct5_77 {
65
78
  color: var(--lp-color-text-ui-primary);
66
79
  font-weight: var(--lp-font-weight-medium);
67
80
  }
68
81
 
69
- ._description_1f7xm_64,
70
- ._appliedDescription_1f7xm_70 {
82
+ ._description_1vct5_77,
83
+ ._appliedDescription_1vct5_83 {
71
84
  margin-right: 0.5rem;
72
85
  max-width: 16rem;
73
86
  overflow: hidden;
@@ -75,52 +88,44 @@
75
88
  white-space: nowrap;
76
89
  }
77
90
 
78
- ._clear_1f7xm_78 {
91
+ ._clear_1vct5_91 {
79
92
  cursor: pointer;
80
93
  padding: 0.3rem;
81
94
  }
82
95
 
83
- ._button_1f7xm_5._isClearable_1f7xm_83 {
84
- background-color: rgba(0, 0, 0, 0.15);
96
+ ._button_1vct5_18._isClearable_1vct5_96 {
85
97
  padding-right: 3.1rem;
98
+ background-color: rgba(0, 0, 0, 0.15);
99
+ background-color: var(--lp-component-filter-color-bg-clearable);
86
100
  }
87
101
 
88
- ._button_1f7xm_5._isClearable_1f7xm_83:focus,
89
- ._button_1f7xm_5._isClearable_1f7xm_83:hover,
90
- ._button_1f7xm_5._isClearable_1f7xm_83:active {
102
+ ._button_1vct5_18._isClearable_1vct5_96:focus,
103
+ ._button_1vct5_18._isClearable_1vct5_96:hover,
104
+ ._button_1vct5_18._isClearable_1vct5_96:active {
91
105
  background-color: rgba(0, 0, 0, 0.2);
106
+ background-color: var(--lp-component-filter-color-bg-clearable-focus);
92
107
  border-color: var(--lp-color-gray-800);
108
+ border-color: var(--lp-component-filter-color-border-clearable-focus);
93
109
  }
94
110
 
95
- :root[data-theme='dark'] ._button_1f7xm_5._isClearable_1f7xm_83 {
96
- background-color: rgba(248, 248, 248, 0.15);
97
- }
98
-
99
- :root[data-theme='dark'] ._button_1f7xm_5._isClearable_1f7xm_83:focus,
100
- :root[data-theme='dark'] ._button_1f7xm_5._isClearable_1f7xm_83:hover,
101
- :root[data-theme='dark'] ._button_1f7xm_5._isClearable_1f7xm_83:active {
102
- background-color: rgba(248, 248, 248, 0.2);
103
- border-color: var(--lp-color-gray-500);
104
- }
105
-
106
- ._button_1f7xm_5:hover:not(._isClearable_1f7xm_83),
107
- ._button_1f7xm_5:focus:not(._isClearable_1f7xm_83),
108
- [data-state='open'] ._button_1f7xm_5:not(._isClearable_1f7xm_83) {
111
+ ._button_1vct5_18:hover:not(._isClearable_1vct5_96),
112
+ ._button_1vct5_18:focus:not(._isClearable_1vct5_96),
113
+ [data-state='open'] ._button_1vct5_18:not(._isClearable_1vct5_96) {
109
114
  background-color: var(--lp-color-bg-interactive-secondary-hover);
110
115
  border-color: var(--lp-color-border-interactive-secondary-hover);
111
116
  }
112
117
 
113
- ._button_1f7xm_5:focus:not(:focus-visible):not(._isClearable_1f7xm_83):hover {
118
+ ._button_1vct5_18:focus:not(:focus-visible):not(._isClearable_1vct5_96):hover {
114
119
  background-color: var(--lp-color-bg-interactive-secondary-hover);
115
120
  }
116
121
 
117
- ._clearTooltip_1f7xm_119 {
122
+ ._clearTooltip_1vct5_121 {
118
123
  line-height: 1;
119
124
  position: absolute;
120
125
  right: 0.7rem;
121
126
  }
122
127
 
123
- ._filterClearButton_1f7xm_125 {
128
+ ._filterClearButton_1vct5_127 {
124
129
  -webkit-text-decoration: none;
125
130
  text-decoration: none;
126
131
  color: var(--lp-color-text-interactive-destructive);
@@ -131,26 +136,26 @@
131
136
  border-bottom: 1px solid var(--lp-color-border-interactive-secondary);
132
137
  }
133
138
 
134
- ._filterClearButton_1f7xm_125:active,
135
- ._filterClearButton_1f7xm_125:focus,
136
- ._filterClearButton_1f7xm_125:hover {
139
+ ._filterClearButton_1vct5_127:active,
140
+ ._filterClearButton_1vct5_127:focus,
141
+ ._filterClearButton_1vct5_127:hover {
137
142
  outline: none;
138
143
  box-shadow: none;
139
144
  box-shadow: initial;
140
145
  color: var(--lp-color-text-interactive-destructive);
141
146
  }
142
147
 
143
- ._filterClearButton_1f7xm_125:active {
148
+ ._filterClearButton_1vct5_127:active {
144
149
  border-bottom-color: var(--lp-color-border-interactive-secondary-active);
145
150
  background-color: var(--lp-color-bg-interactive-secondary-active);
146
151
  }
147
152
 
148
- ._filterClearButton_1f7xm_125:focus {
153
+ ._filterClearButton_1vct5_127:focus {
149
154
  border-bottom-color: var(--lp-color-border-interactive-secondary-focus);
150
155
  background-color: var(--lp-color-bg-interactive-secondary-focus);
151
156
  }
152
157
 
153
- ._filterClearButton_1f7xm_125:hover {
158
+ ._filterClearButton_1vct5_127:hover {
154
159
  border-bottom-color: var(--lp-color-border-interactive-secondary-hover);
155
160
  background-color: var(--lp-color-bg-interactive-secondary-hover);
156
161
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchpad-ui/filter",
3
- "version": "0.4.60",
3
+ "version": "0.5.0",
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.32",
32
- "@launchpad-ui/dropdown": "~0.6.30",
33
- "@launchpad-ui/icons": "~0.7.1",
34
- "@launchpad-ui/menu": "~0.7.5",
35
- "@launchpad-ui/tokens": "~0.4.10",
36
- "@launchpad-ui/tooltip": "~0.6.38"
31
+ "@launchpad-ui/button": "~0.8.0",
32
+ "@launchpad-ui/dropdown": "~0.6.31",
33
+ "@launchpad-ui/icons": "~0.7.2",
34
+ "@launchpad-ui/menu": "~0.7.6",
35
+ "@launchpad-ui/tokens": "~0.5.0",
36
+ "@launchpad-ui/tooltip": "~0.7.0"
37
37
  },
38
38
  "peerDependencies": {
39
39
  "react": "18.2.0",