@holmdigital/components 2.1.1 → 2.1.2

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/FormField/FormField.js +11 -8
  2. package/dist/FormField/FormField.mjs +1 -1
  3. package/dist/{chunk-PLT5CAFO.mjs → chunk-ZO5YRJQG.mjs} +11 -8
  4. package/dist/index.js +11 -8
  5. package/dist/index.mjs +4 -4
  6. package/package.json +1 -1
package/dist/FormField/FormField.js CHANGED
@@ -25,6 +25,9 @@ __export(FormField_exports, {
25
25
  module.exports = __toCommonJS(FormField_exports);
26
26
  var import_react = require("react");
27
27
  var import_jsx_runtime = require("react/jsx-runtime");
28
+ function sanitizeId(id) {
29
+ return id.replaceAll(":", "");
30
+ }
28
31
  var FormField = (0, import_react.forwardRef)(
29
32
  ({
30
33
  label,
@@ -36,7 +39,7 @@ var FormField = (0, import_react.forwardRef)(
36
39
  style,
37
40
  ...props
38
41
  }, ref) => {
39
- const generatedId = (0, import_react.useId)();
42
+ const generatedId = sanitizeId((0, import_react.useId)());
40
43
  const inputId = id || `input-${generatedId}`;
41
44
  const helpTextId = `help-${generatedId}`;
42
45
  const errorId = `error-${generatedId}`;
@@ -54,32 +57,33 @@ var FormField = (0, import_react.forwardRef)(
54
57
  const labelStyle = {
55
58
  marginBottom: "0.5rem",
56
59
  fontWeight: "600",
57
- color: "#333"
60
+ color: "#1e293b"
58
61
  };
59
62
  const inputStyle = {
60
63
  padding: "0.5rem",
61
64
  borderRadius: "4px",
62
- border: error ? "2px solid #dc3545" : "1px solid #ced4da",
65
+ border: error ? "2px solid #b91c1c" : "1px solid #94a3b8",
63
66
  fontSize: "1rem",
67
+ color: "#0f172a",
64
68
  minHeight: "44px"
65
69
  // Touch target
66
70
  };
67
71
  const errorStyle = {
68
- color: "#dc3545",
72
+ color: "#b91c1c",
69
73
  fontSize: "0.875rem",
70
74
  marginTop: "0.25rem",
71
75
  display: "flex",
72
76
  alignItems: "center"
73
77
  };
74
78
  const helpStyle = {
75
- color: "#6c757d",
79
+ color: "#475569",
76
80
  fontSize: "0.875rem",
77
81
  marginTop: "0.25rem"
78
82
  };
79
83
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: containerStyle, className, children: [
80
84
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: inputId, style: labelStyle, children: [
81
85
  label,
82
- required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { color: "#dc3545", marginLeft: "4px" }, children: "*" }),
86
+ required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { color: "#b91c1c", marginLeft: "4px" }, children: "*" }),
83
87
  required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: " (obligatoriskt)" })
84
88
  ] }),
85
89
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -87,9 +91,8 @@ var FormField = (0, import_react.forwardRef)(
87
91
  {
88
92
  ref,
89
93
  id: inputId,
90
- "aria-invalid": !!error,
94
+ "aria-invalid": error ? "true" : void 0,
91
95
  "aria-describedby": describedBy || void 0,
92
- "aria-required": required,
93
96
  required,
94
97
  style: inputStyle,
95
98
  ...props
package/dist/FormField/FormField.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  FormField
3
- } from "../chunk-PLT5CAFO.mjs";
3
+ } from "../chunk-ZO5YRJQG.mjs";
4
4
  export {
5
5
  FormField
6
6
  };
package/dist/{chunk-PLT5CAFO.mjs → chunk-ZO5YRJQG.mjs} RENAMED
@@ -1,6 +1,9 @@
1
1
  // src/FormField/FormField.tsx
2
2
  import { forwardRef, useId } from "react";
3
3
  import { jsx, jsxs } from "react/jsx-runtime";
4
+ function sanitizeId(id) {
5
+ return id.replaceAll(":", "");
6
+ }
4
7
  var FormField = forwardRef(
5
8
  ({
6
9
  label,
@@ -12,7 +15,7 @@ var FormField = forwardRef(
12
15
  style,
13
16
  ...props
14
17
  }, ref) => {
15
- const generatedId = useId();
18
+ const generatedId = sanitizeId(useId());
16
19
  const inputId = id || `input-${generatedId}`;
17
20
  const helpTextId = `help-${generatedId}`;
18
21
  const errorId = `error-${generatedId}`;
@@ -30,32 +33,33 @@ var FormField = forwardRef(
30
33
  const labelStyle = {
31
34
  marginBottom: "0.5rem",
32
35
  fontWeight: "600",
33
- color: "#333"
36
+ color: "#1e293b"
34
37
  };
35
38
  const inputStyle = {
36
39
  padding: "0.5rem",
37
40
  borderRadius: "4px",
38
- border: error ? "2px solid #dc3545" : "1px solid #ced4da",
41
+ border: error ? "2px solid #b91c1c" : "1px solid #94a3b8",
39
42
  fontSize: "1rem",
43
+ color: "#0f172a",
40
44
  minHeight: "44px"
41
45
  // Touch target
42
46
  };
43
47
  const errorStyle = {
44
- color: "#dc3545",
48
+ color: "#b91c1c",
45
49
  fontSize: "0.875rem",
46
50
  marginTop: "0.25rem",
47
51
  display: "flex",
48
52
  alignItems: "center"
49
53
  };
50
54
  const helpStyle = {
51
- color: "#6c757d",
55
+ color: "#475569",
52
56
  fontSize: "0.875rem",
53
57
  marginTop: "0.25rem"
54
58
  };
55
59
  return /* @__PURE__ */ jsxs("div", { style: containerStyle, className, children: [
56
60
  /* @__PURE__ */ jsxs("label", { htmlFor: inputId, style: labelStyle, children: [
57
61
  label,
58
- required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: "#dc3545", marginLeft: "4px" }, children: "*" }),
62
+ required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: "#b91c1c", marginLeft: "4px" }, children: "*" }),
59
63
  required && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (obligatoriskt)" })
60
64
  ] }),
61
65
  /* @__PURE__ */ jsx(
@@ -63,9 +67,8 @@ var FormField = forwardRef(
63
67
  {
64
68
  ref,
65
69
  id: inputId,
66
- "aria-invalid": !!error,
70
+ "aria-invalid": error ? "true" : void 0,
67
71
  "aria-describedby": describedBy || void 0,
68
- "aria-required": required,
69
72
  required,
70
73
  style: inputStyle,
71
74
  ...props
package/dist/index.js CHANGED
@@ -169,6 +169,9 @@ Button.displayName = "Button";
169
169
  // src/FormField/FormField.tsx
170
170
  var import_react2 = require("react");
171
171
  var import_jsx_runtime2 = require("react/jsx-runtime");
172
+ function sanitizeId(id) {
173
+ return id.replaceAll(":", "");
174
+ }
172
175
  var FormField = (0, import_react2.forwardRef)(
173
176
  ({
174
177
  label,
@@ -180,7 +183,7 @@ var FormField = (0, import_react2.forwardRef)(
180
183
  style,
181
184
  ...props
182
185
  }, ref) => {
183
- const generatedId = (0, import_react2.useId)();
186
+ const generatedId = sanitizeId((0, import_react2.useId)());
184
187
  const inputId = id || `input-${generatedId}`;
185
188
  const helpTextId = `help-${generatedId}`;
186
189
  const errorId = `error-${generatedId}`;
@@ -198,32 +201,33 @@ var FormField = (0, import_react2.forwardRef)(
198
201
  const labelStyle = {
199
202
  marginBottom: "0.5rem",
200
203
  fontWeight: "600",
201
- color: "#333"
204
+ color: "#1e293b"
202
205
  };
203
206
  const inputStyle = {
204
207
  padding: "0.5rem",
205
208
  borderRadius: "4px",
206
- border: error ? "2px solid #dc3545" : "1px solid #ced4da",
209
+ border: error ? "2px solid #b91c1c" : "1px solid #94a3b8",
207
210
  fontSize: "1rem",
211
+ color: "#0f172a",
208
212
  minHeight: "44px"
209
213
  // Touch target
210
214
  };
211
215
  const errorStyle = {
212
- color: "#dc3545",
216
+ color: "#b91c1c",
213
217
  fontSize: "0.875rem",
214
218
  marginTop: "0.25rem",
215
219
  display: "flex",
216
220
  alignItems: "center"
217
221
  };
218
222
  const helpStyle = {
219
- color: "#6c757d",
223
+ color: "#475569",
220
224
  fontSize: "0.875rem",
221
225
  marginTop: "0.25rem"
222
226
  };
223
227
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: containerStyle, className, children: [
224
228
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { htmlFor: inputId, style: labelStyle, children: [
225
229
  label,
226
- required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", style: { color: "#dc3545", marginLeft: "4px" }, children: "*" }),
230
+ required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", style: { color: "#b91c1c", marginLeft: "4px" }, children: "*" }),
227
231
  required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "sr-only", children: " (obligatoriskt)" })
228
232
  ] }),
229
233
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -231,9 +235,8 @@ var FormField = (0, import_react2.forwardRef)(
231
235
  {
232
236
  ref,
233
237
  id: inputId,
234
- "aria-invalid": !!error,
238
+ "aria-invalid": error ? "true" : void 0,
235
239
  "aria-describedby": describedBy || void 0,
236
- "aria-required": required,
237
240
  required,
238
241
  style: inputStyle,
239
242
  ...props
package/dist/index.mjs CHANGED
@@ -34,7 +34,7 @@ import {
34
34
  } from "./chunk-P2IXX552.mjs";
35
35
  import {
36
36
  FormField
37
- } from "./chunk-PLT5CAFO.mjs";
37
+ } from "./chunk-ZO5YRJQG.mjs";
38
38
  import {
39
39
  Heading
40
40
  } from "./chunk-2RP6SWY7.mjs";
@@ -62,12 +62,12 @@ import {
62
62
  import {
63
63
  Checkbox
64
64
  } from "./chunk-NOE5QKC2.mjs";
65
- import {
66
- Card
67
- } from "./chunk-NECEXNCF.mjs";
68
65
  import {
69
66
  Combobox
70
67
  } from "./chunk-OMSIXECN.mjs";
68
+ import {
69
+ Card
70
+ } from "./chunk-NECEXNCF.mjs";
71
71
  import {
72
72
  DataTable
73
73
  } from "./chunk-HSUDZAQ6.mjs";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@holmdigital/components",
3
3
  "author": "Holm Digital AB",
4
- "version": "2.1.1",
4
+ "version": "2.1.2",
5
5
  "private": false,
6
6
  "publishConfig": {
7
7
  "access": "public"