@nattstack/ui 0.0.90 → 0.0.92

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 (6) hide show
  1. package/dist/components/input/input.css +0 -1
  2. package/dist/components/menu/menu-checkbox-item.js +10 -7
  3. package/dist/components/menu/menu.css +29 -42
  4. package/dist/components/otp-field/otp-field-input.css +0 -1
  5. package/dist/components/select/select-content.css +3 -3
  6. package/package.json +1 -1
package/dist/components/input/input.css CHANGED
@@ -5,7 +5,6 @@
5
5
  box-shadow: 0 0 0 1px var(--color-border) inset;
6
6
  color: var(--color-text-primary);
7
7
  cursor: text;
8
- font-family: var(--font-body);
9
8
  outline-offset: -2px;
10
9
  border-style: none;
11
10
  outline: 2px solid #0000;
package/dist/components/menu/menu-checkbox-item.js CHANGED
@@ -7,14 +7,17 @@ function MenuCheckboxItem(props) {
7
7
  const { children, className: customClassName = "", iconEnd = void 0, indicator = void 0, isChecked = void 0, isDefaultChecked = false, isDisabled = false, ...rest } = props;
8
8
  const combinedClassName = cx(MENU_CLASS_NAME.CHECKBOX_ITEM, customClassName);
9
9
  const currentIndicator = indicator ?? /* @__PURE__ */ jsx("svg", {
10
- fill: "none",
11
- height: "16",
12
- viewBox: "0 0 16 16",
13
- width: "16",
14
- children: /* @__PURE__ */ jsx("path", {
15
- d: "M3.5 8.5L6.5 11.5L12.5 4.5",
10
+ height: "14px",
11
+ viewBox: "0 0 18 18",
12
+ width: "14px",
13
+ xmlns: "http://www.w3.org/2000/svg",
14
+ children: /* @__PURE__ */ jsx("polyline", {
15
+ fill: "none",
16
+ points: "2.75 9.25 6.75 14.25 15.25 3.75",
16
17
  stroke: "currentColor",
17
- strokeWidth: "2"
18
+ strokeLinecap: "round",
19
+ strokeLinejoin: "round",
20
+ strokeWidth: "1.5"
18
21
  })
19
22
  });
20
23
  return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
package/dist/components/menu/menu.css CHANGED
@@ -1,59 +1,44 @@
1
1
  @layer components {
2
2
  .menu-module_menu_trigger_7pJHya {
3
- background-color: var(--color-gray-2);
4
- box-shadow: 0 0 0 1px var(--color-gray-4) inset;
3
+ background-color: var(--color-bg-shell-inner);
4
+ box-shadow: 0 0 0 1px var(--color-border) inset;
5
5
  color: var(--color-text-primary);
6
6
  cursor: pointer;
7
- font-family: var(--font-body);
8
- outline-color: var(--color-primary-9);
9
7
  outline-offset: 2px;
10
8
  user-select: none;
11
- background-image: linear-gradient(oklab(0% none none / 0) 50%, oklab(0% none none / .0196078) 50%);
12
- border-style: none;
13
9
  border-radius: 10px;
14
- outline-width: 0;
15
- outline-style: solid;
10
+ outline: 2px solid #0000;
16
11
  flex-shrink: 0;
17
- justify-content: safe center;
18
- align-items: safe center;
12
+ align-items: center;
19
13
  column-gap: 8px;
20
14
  width: max-content;
21
15
  height: 40px;
22
- padding: 0 14px;
16
+ padding: 0 16px;
23
17
  font-size: 14px;
24
- font-weight: 500;
25
- line-height: 1.5;
26
- transition-property: background-color, opacity, translate;
18
+ font-weight: 450;
19
+ transition-property: background-color;
27
20
  transition-duration: .15s;
28
21
  display: inline-flex;
29
22
  overflow: hidden;
30
23
  }
31
24
 
32
- .menu-module_menu_trigger_7pJHya:hover:not(:disabled), .menu-module_menu_trigger_7pJHya[data-popup-open] {
33
- background-color: var(--color-gray-3);
34
- }
35
-
36
- .menu-module_menu_trigger_7pJHya:active:not(:disabled), .menu-module_menu_trigger_7pJHya[data-pressed] {
37
- translate: 0 1px;
38
- }
39
-
40
25
  .menu-module_menu_trigger_7pJHya:disabled {
26
+ background-color: var(--color-gray-3);
41
27
  cursor: not-allowed;
42
28
  opacity: .5;
43
29
  }
44
30
 
45
31
  .menu-module_menu_trigger_7pJHya:focus-visible {
46
- outline-width: 2px;
32
+ outline-color: var(--color-primary);
47
33
  }
48
34
 
49
- .menu-module_menu_trigger_7pJHya > svg {
50
- --size-icon: 16px;
51
- height: var(--size-icon);
52
- width: var(--size-icon);
35
+ .menu-module_menu_trigger_7pJHya:hover:not(:disabled), .menu-module_menu_trigger_7pJHya[data-popup-open] {
36
+ background-color: var(--color-gray-3);
53
37
  }
54
38
 
55
- .dark .menu-module_menu_trigger_7pJHya {
56
- background-image: linear-gradient(oklab(100% 0 5.96046e-8 / .00990099) 50%, oklab(0% 0 0 / 0) 50%);
39
+ .menu-module_menu_trigger_7pJHya > svg {
40
+ width: 16px;
41
+ height: 16px;
57
42
  }
58
43
 
59
44
  .menu-module_menu_content_positioner_7pJHya {
@@ -64,9 +49,12 @@
64
49
  .menu-module_menu_content_7pJHya {
65
50
  background-color: var(--color-bg-shell-inner);
66
51
  box-shadow: 0 0 0 1px var(--color-border) inset,
67
- 0 16px 32px oklab(0% none none / .16);
52
+ 0 .5px 0 oklab(0% none none / .03),
53
+ 0 36px 15px -4px oklab(0% none none / .01),
54
+ 0 20px 12px -3px oklab(0% none none / .03),
55
+ 0 9px 9px -2px oklab(0% none none / .04),
56
+ 0 2px 5px -1px oklab(0% none none / .05);
68
57
  color: var(--color-text-primary);
69
- font-family: var(--font-body);
70
58
  max-height: min(var(--available-height), 480px);
71
59
  max-width: min(var(--available-width), 320px);
72
60
  outline-color: var(--color-primary-9);
@@ -139,13 +127,13 @@
139
127
  user-select: none;
140
128
  border-radius: 8px;
141
129
  outline: none;
142
- align-items: safe center;
130
+ flex-shrink: 0;
131
+ align-items: center;
143
132
  column-gap: 8px;
144
- min-height: 32px;
145
- padding: 0 8px;
133
+ height: 36px;
134
+ padding: 0 12px;
146
135
  font-size: 14px;
147
- font-weight: 500;
148
- line-height: 1.5;
136
+ font-weight: 450;
149
137
  text-decoration: none;
150
138
  display: flex;
151
139
  position: relative;
@@ -163,8 +151,8 @@
163
151
  .menu-module_menu_item__icon_7pJHya, .menu-module_menu_item__indicator_7pJHya {
164
152
  color: var(--color-text-secondary);
165
153
  flex-shrink: 0;
166
- justify-content: safe center;
167
- align-items: safe center;
154
+ justify-content: center;
155
+ align-items: center;
168
156
  width: 16px;
169
157
  height: 16px;
170
158
  display: flex;
@@ -194,16 +182,15 @@
194
182
 
195
183
  .menu-module_menu_group_label_7pJHya {
196
184
  color: var(--color-text-secondary);
197
- padding: 6px 8px 4px;
185
+ padding: 6px 12px 4px;
198
186
  font-size: 12px;
199
- font-weight: 600;
200
- line-height: 1.5;
187
+ font-weight: 450;
201
188
  }
202
189
 
203
190
  .menu-module_menu_separator_7pJHya {
204
191
  background-color: var(--color-border);
205
192
  flex-shrink: 0;
206
193
  height: 1px;
207
- margin: 4px;
194
+ margin: 4px 8px;
208
195
  }
209
196
  }
package/dist/components/otp-field/otp-field-input.css CHANGED
@@ -3,7 +3,6 @@
3
3
  background-color: var(--color-gray-3);
4
4
  box-shadow: 0 0 0 1px var(--color-border) inset;
5
5
  color: var(--color-text-primary);
6
- font-family: var(--font-body);
7
6
  outline-color: var(--color-outline);
8
7
  outline-offset: -2px;
9
8
  text-align: center;
package/dist/components/select/select-content.css CHANGED
@@ -13,10 +13,10 @@
13
13
  0 9px 9px -2px oklab(0% none none / .04),
14
14
  0 2px 5px -1px oklab(0% none none / .05);
15
15
  color: var(--color-text-primary);
16
- font-family: var(--font-body);
17
16
  max-height: min(var(--available-height), 480px);
18
- max-width: min(var(--available-width), 320px);
19
- min-width: max(var(--anchor-width), 180px);
17
+ max-width: var(--available-width);
18
+ min-width: max(var(--anchor-width), 240px);
19
+ width: var(--anchor-width);
20
20
  outline-color: var(--color-primary-9);
21
21
  outline-offset: -2px;
22
22
  transform-origin: var(--transform-origin);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nattstack/ui",
3
- "version": "0.0.90",
3
+ "version": "0.0.92",
4
4
  "description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
5
5
  "keywords": [
6
6
  "base-ui",