@nattui/react-components 0.0.26 → 0.0.28

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.d.ts +2 -0
  2. package/dist/index.js +5 -1
  3. package/dist/{input.module-RQOR3OFH.module.css → input.module-IR2FFKFD.module.css} +14 -4
  4. package/package.json +31 -31
package/dist/index.d.ts CHANGED
@@ -54,8 +54,10 @@ declare const BUTTON_CLASS_NAME: {
54
54
  interface InputProps extends Omit<ComponentProps<"input">, "aria-pressed" | "disabled" | "readOnly" | "required"> {
55
55
  isActive?: boolean;
56
56
  isDisabled?: boolean;
57
+ isInvalid?: boolean;
57
58
  isReadOnly?: boolean;
58
59
  isRequired?: boolean;
60
+ isValid?: boolean;
59
61
  size?: 32 | 36 | 40 | 44;
60
62
  }
61
63
  declare function Input(props: InputProps): JSX.Element;
package/dist/index.js CHANGED
@@ -129,15 +129,17 @@ var BUTTON_CLASS_NAME = {
129
129
  };
130
130
 
131
131
  // src/input.tsx
132
- import styles4 from "./input.module-RQOR3OFH.module.css";
132
+ import styles4 from "./input.module-IR2FFKFD.module.css";
133
133
  import { jsx as jsx4 } from "react/jsx-runtime";
134
134
  function Input(props) {
135
135
  const {
136
136
  className: customClassName = "",
137
137
  isActive = false,
138
138
  isDisabled = false,
139
+ isInvalid = void 0,
139
140
  isReadOnly = false,
140
141
  isRequired = false,
142
+ isValid = void 0,
141
143
  size = 40,
142
144
  type = "text",
143
145
  ...rest
@@ -154,6 +156,8 @@ function Input(props) {
154
156
  {
155
157
  "aria-pressed": isActive,
156
158
  className: combinedClassName,
159
+ "data-is-invalid": isInvalid,
160
+ "data-is-valid": isValid,
157
161
  disabled: isDisabled,
158
162
  readOnly: isReadOnly,
159
163
  required: isRequired,
package/dist/{input.module-RQOR3OFH.module.css → input.module-IR2FFKFD.module.css} RENAMED
@@ -2,6 +2,7 @@
2
2
  /* Base */
3
3
  /* ===================================================== */
4
4
  .input {
5
+ flex-shrink: 0;
5
6
  width: 100%;
6
7
  height: var(--size);
7
8
  padding: 0 12px;
@@ -13,10 +14,10 @@
13
14
  text-decoration: none;
14
15
  appearance: none;
15
16
  cursor: text;
16
- outline-width: 0;
17
+ outline-width: 2px;
17
18
  outline-style: solid;
18
- outline-color: var(--color-primary-9, #e93d82);
19
- outline-offset: 2px;
19
+ outline-color: transparent;
20
+ outline-offset: -2px;
20
21
  background-color: var(--color-gray-1, #fcfcfc);
21
22
  border-color: var(--color-gray-5, #e0e0e0);
22
23
  border-style: solid;
@@ -56,8 +57,17 @@
56
57
  box-shadow: 0 1px transparent;
57
58
  }
58
59
 
60
+ .input[data-is-valid="true"] {
61
+ outline-color: #30a46c;
62
+ }
63
+
64
+ .input[data-is-invalid="true"] {
65
+ outline-color: #e5484d;
66
+ }
67
+
68
+ /* Focus overrides valid and invalid */
59
69
  .input:focus-visible {
60
- outline-width: 2px;
70
+ outline-color: var(--color-primary-9, #e93d82);
61
71
  }
62
72
 
63
73
  /* ===================================================== */
package/package.json CHANGED
@@ -1,50 +1,50 @@
1
1
  {
2
- "name": "@nattui/react-components",
3
- "version": "0.0.26",
4
- "description": "A collection of reusable React components built with TypeScript and CSS Modules",
5
- "keywords": [
6
- "components",
7
- "react",
8
- "ui"
9
- ],
10
- "homepage": "https://github.com/nattui/react-components#readme",
2
+ "author": "Natt Nguyen <hello@natt.sh> (https://natt.sh)",
11
3
  "bugs": {
12
4
  "url": "https://github.com/nattui/react-components/issues"
13
5
  },
14
- "repository": {
15
- "type": "git",
16
- "url": "git+https://github.com/nattui/react-components.git"
6
+ "description": "A collection of reusable React components built with TypeScript and CSS Modules",
7
+ "devDependencies": {
8
+ "@types/react": "catalog:",
9
+ "tsup": "8.5.1",
10
+ "typescript": "catalog:"
17
11
  },
18
- "author": "Natt Nguyen <hello@natt.sh> (https://natt.sh)",
19
- "type": "module",
20
12
  "exports": {
21
13
  ".": {
22
- "types": "./dist/index.d.ts",
23
- "import": "./dist/index.js"
14
+ "import": "./dist/index.js",
15
+ "types": "./dist/index.d.ts"
24
16
  }
25
17
  },
26
- "main": "./dist/index.js",
27
- "module": "./dist/index.js",
28
- "types": "./dist/index.d.ts",
29
18
  "files": [
30
19
  "dist"
31
20
  ],
32
- "scripts": {
33
- "build": "tsup",
34
- "check:type": "tsc",
35
- "dev": "tsup --watch",
36
- "prepublishOnly": "pnpm run build"
37
- },
38
- "devDependencies": {
39
- "@types/react": "catalog:",
40
- "tsup": "^8.5.0",
41
- "typescript": "catalog:"
42
- },
21
+ "homepage": "https://github.com/nattui/react-components#readme",
22
+ "keywords": [
23
+ "components",
24
+ "react",
25
+ "ui"
26
+ ],
27
+ "main": "./dist/index.js",
28
+ "module": "./dist/index.js",
29
+ "name": "@nattui/react-components",
43
30
  "peerDependencies": {
44
31
  "react": "^18.0.0 || ^19.0.0",
45
32
  "react-dom": "^18.0.0 || ^19.0.0"
46
33
  },
47
34
  "publishConfig": {
48
35
  "access": "public"
49
- }
36
+ },
37
+ "repository": {
38
+ "type": "git",
39
+ "url": "git+https://github.com/nattui/react-components.git"
40
+ },
41
+ "scripts": {
42
+ "build": "tsup",
43
+ "check:type": "tsc",
44
+ "dev": "tsup --watch",
45
+ "prepublishOnly": "pnpm run build"
46
+ },
47
+ "type": "module",
48
+ "types": "./dist/index.d.ts",
49
+ "version": "0.0.28"
50
50
  }