@nattstack/ui 0.0.23 → 0.0.24

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.
@@ -8,7 +8,7 @@
8
8
  cursor: pointer;
9
9
  display: flex;
10
10
  flex-shrink: 0;
11
- font-family: var(--font-body, sans-serif);
11
+ font-family: var(--font-body);
12
12
  font-size: 14px;
13
13
  font-weight: 500;
14
14
  height: var(--size-button);
@@ -15,7 +15,7 @@ function normalizeWhitespace(value) {
15
15
  }
16
16
 
17
17
  // src/components/button/button.tsx
18
- import styles2 from "./button.module-EPV4DMZK.module.css";
18
+ import styles2 from "./button.module-UJI7Y25W.module.css";
19
19
  import { jsx as jsx2, jsxs } from "react/jsx-runtime";
20
20
  function Button(props) {
21
21
  const {
@@ -298,7 +298,7 @@ function DialogResponsiveTrigger(props) {
298
298
  }
299
299
 
300
300
  // src/components/input/input.tsx
301
- import styles9 from "./input.module-BM53EV65.module.css";
301
+ import styles9 from "./input.module-H5TWAPFX.module.css";
302
302
  import { jsx as jsx10 } from "react/jsx-runtime";
303
303
  function Input(props) {
304
304
  const {
@@ -714,7 +714,7 @@ var TABS_PANEL_CLASS_NAME = {
714
714
  };
715
715
 
716
716
  // src/components/textarea/textarea.tsx
717
- import inputStyles from "./input.module-BM53EV65.module.css";
717
+ import inputStyles from "./input.module-H5TWAPFX.module.css";
718
718
  import styles25 from "./textarea.module-LK25MKCZ.module.css";
719
719
  import { jsx as jsx25 } from "react/jsx-runtime";
720
720
  function Textarea(props) {
@@ -2,26 +2,24 @@
2
2
  /* Base */
3
3
  /* ===================================================== */
4
4
  .input {
5
- width: 100%;
6
- min-height: var(--height);
7
- padding: 0 12px;
8
- font-family: var(--font-body, sans-serif);
5
+ appearance: none;
6
+ background-color: var(--color-bg-primary);
7
+ border-style: none;
8
+ box-shadow: 0 0 0 1px var(--color-border) inset;
9
+ color: var(--color-text-primary);
10
+ cursor: text;
11
+ font-family: var(--font-body);
9
12
  font-size: 14px;
10
13
  font-weight: 500;
11
14
  line-height: 1.5;
12
- color: var(--color-gray-12);
13
- text-decoration: none;
14
- appearance: none;
15
- cursor: text;
16
- outline-width: 2px;
17
- outline-style: solid;
18
15
  outline-color: transparent;
19
16
  outline-offset: -2px;
20
- background-color: var(--color-bg-primary);
21
- border-style: none;
22
- box-shadow: 0 0 0 1px var(--color-gray-4) inset;
17
+ outline-style: solid;
18
+ outline-width: 2px;
19
+ text-decoration: none;
23
20
  transition-duration: 150ms;
24
21
  transition-property: box-shadow, opacity;
22
+ width: 100%;
25
23
  }
26
24
 
27
25
  .input::placeholder {
@@ -51,7 +49,7 @@
51
49
 
52
50
  /* Focus overrides valid and invalid */
53
51
  .input:focus-visible {
54
- outline-color: var(--color-primary-9);
52
+ outline-color: var(--color-outline);
55
53
  }
56
54
 
57
55
  /* ===================================================== */
@@ -69,26 +67,31 @@
69
67
  /* Size */
70
68
  /* ===================================================== */
71
69
  .input__size_32 {
72
- --height: 32px;
73
70
  border-radius: 8px;
71
+ min-height: 32px;
72
+ padding: 0 8px;
74
73
  }
75
74
 
76
75
  .input__size_36 {
77
- --height: 36px;
78
76
  border-radius: 10px;
77
+ min-height: 36px;
78
+ padding: 0 10px;
79
79
  }
80
80
 
81
81
  .input__size_40 {
82
- --height: 40px;
83
82
  border-radius: 12px;
83
+ min-height: 40px;
84
+ padding: 0 12px;
84
85
  }
85
86
 
86
87
  .input__size_44 {
87
- --height: 44px;
88
88
  border-radius: 14px;
89
+ min-height: 44px;
90
+ padding: 0 14px;
89
91
  }
90
92
 
91
93
  .input__size_48 {
92
- --height: 48px;
93
94
  border-radius: 16px;
95
+ min-height: 48px;
96
+ padding: 0 16px;
94
97
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nattstack/ui",
3
- "version": "0.0.23",
3
+ "version": "0.0.24",
4
4
  "description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
5
5
  "keywords": [
6
6
  "base-ui",