@postenbring/hedwig-react 0.0.65 → 0.0.67

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 (236) hide show
  1. package/dist/_tsup-dts-rollup.d.mts +333 -178
  2. package/dist/_tsup-dts-rollup.d.ts +333 -178
  3. package/dist/accordion/index.d.mts +3 -3
  4. package/dist/accordion/index.d.ts +3 -3
  5. package/dist/accordion/index.js +8 -2
  6. package/dist/accordion/index.js.map +1 -1
  7. package/dist/accordion/index.mjs +14 -5
  8. package/dist/box/index.d.mts +1 -1
  9. package/dist/box/index.d.ts +1 -1
  10. package/dist/box/index.js +4 -2
  11. package/dist/box/index.js.map +1 -1
  12. package/dist/box/index.mjs +6 -3
  13. package/dist/card/index.d.mts +2 -2
  14. package/dist/card/index.d.ts +2 -2
  15. package/dist/card/index.js +12 -2
  16. package/dist/card/index.js.map +1 -1
  17. package/dist/card/index.mjs +14 -3
  18. package/dist/{chunk-POJTVNEO.mjs → chunk-2FXMUF6K.mjs} +2 -2
  19. package/dist/chunk-2FXMUF6K.mjs.map +1 -0
  20. package/dist/{chunk-DEVTAZKG.mjs → chunk-3KZOKDKP.mjs} +14 -3
  21. package/dist/chunk-3KZOKDKP.mjs.map +1 -0
  22. package/dist/{chunk-XFSZBILE.mjs → chunk-6NGF7FFY.mjs} +2 -2
  23. package/dist/{chunk-MUVJAMFN.mjs → chunk-B56JZJOS.mjs} +10 -8
  24. package/dist/chunk-B56JZJOS.mjs.map +1 -0
  25. package/dist/{chunk-RVJD2UZF.mjs → chunk-DFH4YKQA.mjs} +2 -2
  26. package/dist/chunk-DFH4YKQA.mjs.map +1 -0
  27. package/dist/{chunk-HXV2UMEV.mjs → chunk-DM4PJFLG.mjs} +2 -2
  28. package/dist/{chunk-HXV2UMEV.mjs.map → chunk-DM4PJFLG.mjs.map} +1 -1
  29. package/dist/{chunk-AR2NOI4U.mjs → chunk-EJ7ANN7M.mjs} +1 -1
  30. package/dist/{chunk-AR2NOI4U.mjs.map → chunk-EJ7ANN7M.mjs.map} +1 -1
  31. package/dist/chunk-F4STR6SD.mjs +18 -0
  32. package/dist/chunk-F4STR6SD.mjs.map +1 -0
  33. package/dist/{chunk-TE5M6GJB.mjs → chunk-FOZSX44S.mjs} +2 -2
  34. package/dist/{chunk-TE5M6GJB.mjs.map → chunk-FOZSX44S.mjs.map} +1 -1
  35. package/dist/chunk-G2SOAFGS.mjs +86 -0
  36. package/dist/chunk-G2SOAFGS.mjs.map +1 -0
  37. package/dist/{chunk-RLUXDZ6X.mjs → chunk-HMB4TY2F.mjs} +3 -3
  38. package/dist/{chunk-U2MRMUB2.mjs → chunk-K2HG7WRK.mjs} +2 -2
  39. package/dist/{chunk-U2MRMUB2.mjs.map → chunk-K2HG7WRK.mjs.map} +1 -1
  40. package/dist/{chunk-RK6BB3HH.mjs → chunk-KTRIVJM3.mjs} +2 -2
  41. package/dist/chunk-L4GQJETB.mjs +1 -0
  42. package/dist/chunk-NE6W2PCD.mjs +9 -0
  43. package/dist/chunk-NE6W2PCD.mjs.map +1 -0
  44. package/dist/{chunk-BZNDK3KJ.mjs → chunk-NMMFIRLZ.mjs} +1 -1
  45. package/dist/{chunk-BZNDK3KJ.mjs.map → chunk-NMMFIRLZ.mjs.map} +1 -1
  46. package/dist/{chunk-EHUVLDIZ.mjs → chunk-O32FZU7E.mjs} +11 -14
  47. package/dist/chunk-O32FZU7E.mjs.map +1 -0
  48. package/dist/{chunk-IAS3E2S3.mjs → chunk-PUESATBQ.mjs} +2 -2
  49. package/dist/chunk-QGZU7Z2W.mjs +51 -0
  50. package/dist/chunk-QGZU7Z2W.mjs.map +1 -0
  51. package/dist/{chunk-QSYU64U4.mjs → chunk-QYSLVQ4F.mjs} +2 -2
  52. package/dist/{chunk-QSYU64U4.mjs.map → chunk-QYSLVQ4F.mjs.map} +1 -1
  53. package/dist/{chunk-X7EKQZNU.mjs → chunk-RHCMBJOT.mjs} +2 -2
  54. package/dist/chunk-TDLSHJ4Z.mjs +1 -0
  55. package/dist/{chunk-SKI2APSK.mjs → chunk-TNU64NUN.mjs} +13 -7
  56. package/dist/chunk-TNU64NUN.mjs.map +1 -0
  57. package/dist/{chunk-JC6DBIFE.mjs → chunk-XE4UZBL2.mjs} +1 -1
  58. package/dist/{chunk-JC6DBIFE.mjs.map → chunk-XE4UZBL2.mjs.map} +1 -1
  59. package/dist/chunk-XFKD6EEJ.mjs +1 -0
  60. package/dist/chunk-XFKD6EEJ.mjs.map +1 -0
  61. package/dist/{chunk-LIQ3FB56.mjs → chunk-XYIY6FHW.mjs} +7 -7
  62. package/dist/{chunk-LIQ3FB56.mjs.map → chunk-XYIY6FHW.mjs.map} +1 -1
  63. package/dist/{chunk-6TI7ACBR.mjs → chunk-YC7MT6SO.mjs} +2 -2
  64. package/dist/{chunk-WCA2WPFS.mjs → chunk-ZL56N4UK.mjs} +14 -2
  65. package/dist/{chunk-WCA2WPFS.mjs.map → chunk-ZL56N4UK.mjs.map} +1 -1
  66. package/dist/{chunk-VFFIUNR6.mjs → chunk-ZRFDCZ62.mjs} +5 -5
  67. package/dist/chunk-ZRFDCZ62.mjs.map +1 -0
  68. package/dist/footer/footer.js +9 -12
  69. package/dist/footer/footer.js.map +1 -1
  70. package/dist/footer/footer.mjs +5 -5
  71. package/dist/footer/index.d.mts +3 -3
  72. package/dist/footer/index.d.ts +3 -3
  73. package/dist/footer/index.js +19 -14
  74. package/dist/footer/index.js.map +1 -1
  75. package/dist/footer/index.mjs +16 -7
  76. package/dist/form/checkbox/checkbox.js +1 -1
  77. package/dist/form/checkbox/checkbox.js.map +1 -1
  78. package/dist/form/checkbox/checkbox.mjs +2 -2
  79. package/dist/form/checkbox/index.js +1 -1
  80. package/dist/form/checkbox/index.js.map +1 -1
  81. package/dist/form/checkbox/index.mjs +2 -2
  82. package/dist/form/date-picker/date-picker.d.mts +2 -0
  83. package/dist/form/date-picker/date-picker.d.ts +2 -0
  84. package/dist/form/date-picker/date-picker.js +265 -0
  85. package/dist/form/date-picker/date-picker.js.map +1 -0
  86. package/dist/form/date-picker/date-picker.mjs +13 -0
  87. package/dist/form/date-picker/date-picker.mjs.map +1 -0
  88. package/dist/form/date-picker/index.d.mts +2 -0
  89. package/dist/form/date-picker/index.d.ts +2 -0
  90. package/dist/form/date-picker/index.js +267 -0
  91. package/dist/form/date-picker/index.js.map +1 -0
  92. package/dist/form/date-picker/index.mjs +14 -0
  93. package/dist/form/date-picker/index.mjs.map +1 -0
  94. package/dist/form/fieldset/fieldset.js +1 -1
  95. package/dist/form/fieldset/fieldset.js.map +1 -1
  96. package/dist/form/fieldset/fieldset.mjs +1 -1
  97. package/dist/form/fieldset/index.js +1 -1
  98. package/dist/form/fieldset/index.js.map +1 -1
  99. package/dist/form/fieldset/index.mjs +1 -1
  100. package/dist/form/index.d.mts +10 -8
  101. package/dist/form/index.d.ts +10 -8
  102. package/dist/form/index.js +240 -132
  103. package/dist/form/index.js.map +1 -1
  104. package/dist/form/index.mjs +20 -14
  105. package/dist/form/input/index.js +12 -6
  106. package/dist/form/input/index.js.map +1 -1
  107. package/dist/form/input/index.mjs +2 -2
  108. package/dist/form/input/input.js +12 -6
  109. package/dist/form/input/input.js.map +1 -1
  110. package/dist/form/input/input.mjs +2 -2
  111. package/dist/form/input-group/index.js +12 -6
  112. package/dist/form/input-group/index.js.map +1 -1
  113. package/dist/form/input-group/index.mjs +1 -1
  114. package/dist/form/input-group/input-group.js +12 -6
  115. package/dist/form/input-group/input-group.js.map +1 -1
  116. package/dist/form/input-group/input-group.mjs +1 -1
  117. package/dist/form/radiobutton/index.js +1 -1
  118. package/dist/form/radiobutton/index.js.map +1 -1
  119. package/dist/form/radiobutton/index.mjs +3 -3
  120. package/dist/form/radiobutton/radiobutton.js +1 -1
  121. package/dist/form/radiobutton/radiobutton.js.map +1 -1
  122. package/dist/form/radiobutton/radiobutton.mjs +3 -3
  123. package/dist/form/radiobutton/radiogroup.js +1 -1
  124. package/dist/form/radiobutton/radiogroup.js.map +1 -1
  125. package/dist/form/radiobutton/radiogroup.mjs +2 -2
  126. package/dist/form/select/index.js +12 -6
  127. package/dist/form/select/index.js.map +1 -1
  128. package/dist/form/select/index.mjs +2 -2
  129. package/dist/form/select/select.js +12 -6
  130. package/dist/form/select/select.js.map +1 -1
  131. package/dist/form/select/select.mjs +2 -2
  132. package/dist/form/textarea/index.js +12 -6
  133. package/dist/form/textarea/index.js.map +1 -1
  134. package/dist/form/textarea/index.mjs +2 -2
  135. package/dist/form/textarea/textarea.js +12 -6
  136. package/dist/form/textarea/textarea.js.map +1 -1
  137. package/dist/form/textarea/textarea.mjs +2 -2
  138. package/dist/index-no-css.d.mts +36 -28
  139. package/dist/index-no-css.d.ts +36 -28
  140. package/dist/index-no-css.js +614 -409
  141. package/dist/index-no-css.js.map +1 -1
  142. package/dist/index-no-css.mjs +130 -52
  143. package/dist/index.d.mts +36 -28
  144. package/dist/index.d.ts +36 -28
  145. package/dist/index.js +614 -409
  146. package/dist/index.js.map +1 -1
  147. package/dist/index.mjs +130 -52
  148. package/dist/index.mjs.map +1 -1
  149. package/dist/layout/index.d.mts +5 -1
  150. package/dist/layout/index.d.ts +5 -1
  151. package/dist/layout/index.js +62 -2
  152. package/dist/layout/index.js.map +1 -1
  153. package/dist/layout/index.mjs +12 -2
  154. package/dist/layout/responsive.d.mts +2 -0
  155. package/dist/layout/responsive.d.ts +2 -0
  156. package/dist/layout/responsive.js +42 -0
  157. package/dist/layout/responsive.js.map +1 -0
  158. package/dist/layout/responsive.mjs +8 -0
  159. package/dist/layout/responsive.mjs.map +1 -0
  160. package/dist/layout/spacing.d.mts +3 -0
  161. package/dist/layout/spacing.d.ts +3 -0
  162. package/dist/layout/spacing.js +33 -0
  163. package/dist/layout/spacing.js.map +1 -0
  164. package/dist/layout/spacing.mjs +8 -0
  165. package/dist/layout/spacing.mjs.map +1 -0
  166. package/dist/layout/stack/index.d.mts +4 -0
  167. package/dist/layout/stack/index.d.ts +4 -0
  168. package/dist/layout/stack/index.js +117 -0
  169. package/dist/layout/stack/index.js.map +1 -0
  170. package/dist/layout/stack/index.mjs +14 -0
  171. package/dist/layout/stack/index.mjs.map +1 -0
  172. package/dist/layout/stack/stack.d.mts +4 -0
  173. package/dist/layout/stack/stack.d.ts +4 -0
  174. package/dist/layout/stack/stack.js +115 -0
  175. package/dist/layout/stack/stack.js.map +1 -0
  176. package/dist/layout/stack/stack.mjs +14 -0
  177. package/dist/layout/stack/stack.mjs.map +1 -0
  178. package/dist/message/index.d.mts +2 -0
  179. package/dist/message/index.d.ts +2 -0
  180. package/dist/message/index.js +6 -2
  181. package/dist/message/index.js.map +1 -1
  182. package/dist/message/index.mjs +8 -3
  183. package/dist/message/message.d.mts +2 -2
  184. package/dist/message/message.d.ts +2 -2
  185. package/dist/modal/index.d.mts +2 -2
  186. package/dist/modal/index.d.ts +2 -2
  187. package/dist/modal/index.js +8 -2
  188. package/dist/modal/index.js.map +1 -1
  189. package/dist/modal/index.mjs +11 -4
  190. package/dist/modal/modal.js.map +1 -1
  191. package/dist/modal/modal.mjs +2 -2
  192. package/dist/navbar/index.d.mts +3 -3
  193. package/dist/navbar/index.d.ts +3 -3
  194. package/dist/navbar/index.js +42 -11
  195. package/dist/navbar/index.js.map +1 -1
  196. package/dist/navbar/index.mjs +13 -3
  197. package/dist/navbar/navbar-expandable-menu.js +34 -11
  198. package/dist/navbar/navbar-expandable-menu.js.map +1 -1
  199. package/dist/navbar/navbar-expandable-menu.mjs +2 -1
  200. package/dist/tabs/index.d.mts +5 -5
  201. package/dist/tabs/index.d.ts +5 -5
  202. package/dist/tabs/index.js +26 -6
  203. package/dist/tabs/index.js.map +1 -1
  204. package/dist/tabs/index.mjs +15 -5
  205. package/dist/tabs/tabs-list.d.mts +2 -2
  206. package/dist/tabs/tabs-list.d.ts +2 -2
  207. package/dist/tabs/tabs-list.js +19 -7
  208. package/dist/tabs/tabs-list.js.map +1 -1
  209. package/dist/tabs/tabs-list.mjs +6 -6
  210. package/dist/utils.d.mts +1 -0
  211. package/dist/utils.d.ts +1 -0
  212. package/dist/utils.js +13 -0
  213. package/dist/utils.js.map +1 -1
  214. package/dist/utils.mjs +3 -1
  215. package/dist/warning-banner/index.js.map +1 -1
  216. package/dist/warning-banner/index.mjs +2 -2
  217. package/dist/warning-banner/warning-banner.js.map +1 -1
  218. package/dist/warning-banner/warning-banner.mjs +2 -2
  219. package/package.json +4 -4
  220. package/dist/chunk-DEVTAZKG.mjs.map +0 -1
  221. package/dist/chunk-EHUVLDIZ.mjs.map +0 -1
  222. package/dist/chunk-MUVJAMFN.mjs.map +0 -1
  223. package/dist/chunk-OIQUYB26.mjs +0 -1
  224. package/dist/chunk-POJTVNEO.mjs.map +0 -1
  225. package/dist/chunk-RVJD2UZF.mjs.map +0 -1
  226. package/dist/chunk-SKI2APSK.mjs.map +0 -1
  227. package/dist/chunk-T24JZIQO.mjs +0 -1
  228. package/dist/chunk-VFFIUNR6.mjs.map +0 -1
  229. /package/dist/{chunk-XFSZBILE.mjs.map → chunk-6NGF7FFY.mjs.map} +0 -0
  230. /package/dist/{chunk-RLUXDZ6X.mjs.map → chunk-HMB4TY2F.mjs.map} +0 -0
  231. /package/dist/{chunk-RK6BB3HH.mjs.map → chunk-KTRIVJM3.mjs.map} +0 -0
  232. /package/dist/{chunk-OIQUYB26.mjs.map → chunk-L4GQJETB.mjs.map} +0 -0
  233. /package/dist/{chunk-IAS3E2S3.mjs.map → chunk-PUESATBQ.mjs.map} +0 -0
  234. /package/dist/{chunk-X7EKQZNU.mjs.map → chunk-RHCMBJOT.mjs.map} +0 -0
  235. /package/dist/{chunk-T24JZIQO.mjs.map → chunk-TDLSHJ4Z.mjs.map} +0 -0
  236. /package/dist/{chunk-6TI7ACBR.mjs.map → chunk-YC7MT6SO.mjs.map} +0 -0
@@ -0,0 +1,265 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __defProps = Object.defineProperties;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
7
+ var __getOwnPropNames = Object.getOwnPropertyNames;
8
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
+ var __getProtoOf = Object.getPrototypeOf;
10
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
11
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
+ var __spreadValues = (a, b) => {
14
+ for (var prop in b || (b = {}))
15
+ if (__hasOwnProp.call(b, prop))
16
+ __defNormalProp(a, prop, b[prop]);
17
+ if (__getOwnPropSymbols)
18
+ for (var prop of __getOwnPropSymbols(b)) {
19
+ if (__propIsEnum.call(b, prop))
20
+ __defNormalProp(a, prop, b[prop]);
21
+ }
22
+ return a;
23
+ };
24
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
+ var __objRest = (source, exclude) => {
26
+ var target = {};
27
+ for (var prop in source)
28
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
29
+ target[prop] = source[prop];
30
+ if (source != null && __getOwnPropSymbols)
31
+ for (var prop of __getOwnPropSymbols(source)) {
32
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
33
+ target[prop] = source[prop];
34
+ }
35
+ return target;
36
+ };
37
+ var __export = (target, all) => {
38
+ for (var name in all)
39
+ __defProp(target, name, { get: all[name], enumerable: true });
40
+ };
41
+ var __copyProps = (to, from, except, desc) => {
42
+ if (from && typeof from === "object" || typeof from === "function") {
43
+ for (let key of __getOwnPropNames(from))
44
+ if (!__hasOwnProp.call(to, key) && key !== except)
45
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
46
+ }
47
+ return to;
48
+ };
49
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
50
+ // If the importer is in node compatibility mode or this is not an ESM
51
+ // file that has been converted to a CommonJS file using a Babel-
52
+ // compatible transform (i.e. "__esModule" has not been set), then set
53
+ // "default" to the CommonJS "module.exports" for node compatibility.
54
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
55
+ mod
56
+ ));
57
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
58
+
59
+ // src/form/date-picker/date-picker.tsx
60
+ var date_picker_exports = {};
61
+ __export(date_picker_exports, {
62
+ DatePicker: () => DatePicker
63
+ });
64
+ module.exports = __toCommonJS(date_picker_exports);
65
+ var import_react3 = require("react");
66
+ var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
67
+
68
+ // src/form/input-group/input-group.tsx
69
+ var import_react = require("react");
70
+ var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
71
+
72
+ // src/form/error-message/error-message.tsx
73
+ var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
74
+ var import_jsx_runtime = require("react/jsx-runtime");
75
+ function ErrorMessage({ children, id, className }) {
76
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
77
+ "div",
78
+ {
79
+ "aria-live": "assertive",
80
+ className: (0, import_typed_classname.clsx)("hds-error-message", className),
81
+ id,
82
+ children
83
+ }
84
+ );
85
+ }
86
+
87
+ // src/form/input-group/input-group.tsx
88
+ var import_jsx_runtime2 = require("react/jsx-runtime");
89
+ var InputGroup = (0, import_react.forwardRef)(function InputGroup2(_a, ref) {
90
+ var _b = _a, {
91
+ id,
92
+ className,
93
+ style,
94
+ variant = "default",
95
+ errorMessage,
96
+ labelProps: _c = {}
97
+ } = _b, _d = _c, { className: labelClassName } = _d, labelProps = __objRest(_d, ["className"]), _e = _b, {
98
+ label,
99
+ disabled,
100
+ readOnly,
101
+ children
102
+ } = _e, rest = __objRest(_e, [
103
+ "id",
104
+ "className",
105
+ "style",
106
+ "variant",
107
+ "errorMessage",
108
+ "labelProps",
109
+ "label",
110
+ "disabled",
111
+ "readOnly",
112
+ "children"
113
+ ]);
114
+ const errorMessageId = (0, import_react.useId)();
115
+ const inputId = (0, import_react.useId)();
116
+ const renderInput = () => {
117
+ var _a2;
118
+ const inputProps = {
119
+ "aria-describedby": errorMessage ? errorMessageId : void 0,
120
+ "aria-invalid": errorMessage ? true : void 0,
121
+ id: id != null ? id : inputId,
122
+ className: (0, import_typed_classname2.clsx)("hds-input-group__input")
123
+ };
124
+ if (typeof children === "function") {
125
+ return children(inputProps);
126
+ }
127
+ const input = import_react.Children.toArray(children)[0];
128
+ if (!(0, import_react.isValidElement)(input)) {
129
+ return;
130
+ }
131
+ return (0, import_react.cloneElement)(input, __spreadProps(__spreadValues(__spreadValues({}, inputProps), input.props), {
132
+ className: `${inputProps.className} ${(_a2 = input.props.className) != null ? _a2 : ""}`
133
+ }));
134
+ };
135
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
136
+ "div",
137
+ __spreadProps(__spreadValues({
138
+ className: (0, import_typed_classname2.clsx)(
139
+ "hds-input-group",
140
+ {
141
+ [`hds-input-group--${variant}`]: variant,
142
+ "hds-input-group--error": errorMessage
143
+ },
144
+ className
145
+ ),
146
+ ref,
147
+ style
148
+ }, rest), {
149
+ children: [
150
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
151
+ "label",
152
+ __spreadProps(__spreadValues({
153
+ className: (0, import_typed_classname2.clsx)("hds-input-group__label", labelClassName)
154
+ }, labelProps), {
155
+ htmlFor: id != null ? id : inputId,
156
+ children: label
157
+ })
158
+ ),
159
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
160
+ "div",
161
+ {
162
+ className: (0, import_typed_classname2.clsx)("hds-input-group__input-wrapper"),
163
+ "data-disabled": disabled,
164
+ "data-readonly": readOnly,
165
+ children: renderInput()
166
+ }
167
+ ),
168
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
169
+ ]
170
+ })
171
+ );
172
+ });
173
+
174
+ // src/utils.ts
175
+ var React = __toESM(require("react"));
176
+ var import_react2 = require("react");
177
+ function useMergeRefs(refs) {
178
+ return React.useMemo(() => {
179
+ if (refs.every((ref) => ref === null)) {
180
+ return null;
181
+ }
182
+ return (value) => {
183
+ refs.forEach((ref) => {
184
+ if (typeof ref === "function") {
185
+ ref(value);
186
+ } else if (ref !== null) {
187
+ ref.current = value;
188
+ }
189
+ });
190
+ };
191
+ }, refs);
192
+ }
193
+
194
+ // src/form/date-picker/date-picker.tsx
195
+ var import_jsx_runtime3 = require("react/jsx-runtime");
196
+ var DatePicker = (0, import_react3.forwardRef)(function DatePicker2(_a, ref) {
197
+ var _b = _a, {
198
+ className,
199
+ variant,
200
+ errorMessage,
201
+ labelProps,
202
+ label,
203
+ id,
204
+ style,
205
+ disabled,
206
+ readOnly,
207
+ calendarButtonTitle = "\xC5pne kalender"
208
+ } = _b, rest = __objRest(_b, [
209
+ "className",
210
+ "variant",
211
+ "errorMessage",
212
+ "labelProps",
213
+ "label",
214
+ "id",
215
+ "style",
216
+ "disabled",
217
+ "readOnly",
218
+ "calendarButtonTitle"
219
+ ]);
220
+ const inputRef = (0, import_react3.useRef)(null);
221
+ const mergedRef = useMergeRefs([inputRef, ref]);
222
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
223
+ InputGroup,
224
+ {
225
+ className: (0, import_typed_classname3.clsx)("hds-date-picker", className),
226
+ disabled,
227
+ errorMessage,
228
+ id,
229
+ label,
230
+ labelProps,
231
+ readOnly,
232
+ style,
233
+ variant,
234
+ children: (inputProps) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
235
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
236
+ "input",
237
+ __spreadProps(__spreadValues(__spreadValues({}, rest), inputProps), {
238
+ disabled,
239
+ readOnly,
240
+ ref: mergedRef,
241
+ type: "date"
242
+ })
243
+ ),
244
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
245
+ "button",
246
+ {
247
+ className: (0, import_typed_classname3.clsx)("hds-date-picker__calendar-button"),
248
+ type: "button",
249
+ title: calendarButtonTitle,
250
+ onClick: () => {
251
+ var _a2;
252
+ (_a2 = inputRef.current) == null ? void 0 : _a2.showPicker();
253
+ }
254
+ }
255
+ )
256
+ ] })
257
+ }
258
+ );
259
+ });
260
+ DatePicker.displayName = "DatePicker";
261
+ // Annotate the CommonJS export names for ESM import in node:
262
+ 0 && (module.exports = {
263
+ DatePicker
264
+ });
265
+ //# sourceMappingURL=date-picker.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/form/date-picker/date-picker.tsx","../../../src/form/input-group/input-group.tsx","../../../src/form/error-message/error-message.tsx","../../../src/utils.ts"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { InputGroup, type InputGroupProps } from \"../input-group\";\nimport { useMergeRefs } from \"../../utils\";\n\nexport type DatePickerProps = Omit<\n InputGroupProps & InputHTMLAttributes<HTMLInputElement>,\n \"children\" | \"type\"\n> & {\n /**\n * Accessible title for the calendar button\n *\n * This button currently only shows in Chrome.\n *\n * @defaultValue \"Åpne kalender\"\n */\n calendarButtonTitle?: string;\n};\n\n/**\n * A basic implementation of a date picker\n *\n * This date picker is an implementation of native date picker, as you get\n * with `<input type=\"date\" />`, where the input field is dressed in Hedwig styling.\n *\n * Due to accessibility concerns you will only see the appropriate Hedwig calendar\n * icon in Chrome. Firefox will show built in icon and Safari will show no icon.\n * Not tested in Edge.\n */\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(function DatePicker(\n {\n className,\n variant,\n errorMessage,\n labelProps,\n label,\n id,\n style,\n disabled,\n readOnly,\n calendarButtonTitle = \"Åpne kalender\",\n ...rest\n },\n ref,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n const mergedRef = useMergeRefs([inputRef, ref]);\n\n return (\n <InputGroup\n className={clsx(\"hds-date-picker\", className as undefined)}\n disabled={disabled}\n errorMessage={errorMessage}\n id={id}\n label={label}\n labelProps={labelProps}\n readOnly={readOnly}\n style={style}\n variant={variant}\n >\n {(inputProps) => (\n <>\n <input\n {...rest}\n {...inputProps}\n disabled={disabled}\n readOnly={readOnly}\n ref={mergedRef}\n type=\"date\"\n />\n <button\n className={clsx(\"hds-date-picker__calendar-button\")}\n type=\"button\"\n title={calendarButtonTitle}\n onClick={() => {\n inputRef.current?.showPicker();\n }}\n />\n </>\n )}\n </InputGroup>\n );\n});\n\nDatePicker.displayName = \"DatePicker\";\n","import { useId, forwardRef, Children, isValidElement, cloneElement } from \"react\";\nimport type { LabelHTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\ninterface InputProps {\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: boolean;\n id?: string;\n className?: string;\n}\n\nexport interface InputGroupProps {\n id?: string;\n className?: string;\n style?: CSSProperties;\n variant?: \"default\" | \"white\";\n errorMessage?: ReactNode;\n labelProps?: LabelHTMLAttributes<HTMLLabelElement>;\n label: ReactNode;\n disabled?: boolean;\n readOnly?: boolean;\n /**\n * `children` must be either a single input element or a render function.\n *\n * If you use a render function, make sure you spread the input props to the appropriate element.\n */\n children: Exclude<ReactNode, Iterable<ReactNode>> | ((inputProps: InputProps) => ReactNode);\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n {\n id,\n className,\n style,\n variant = \"default\",\n errorMessage,\n labelProps: { className: labelClassName, ...labelProps } = {},\n label,\n disabled,\n readOnly,\n children,\n ...rest\n },\n ref,\n) {\n const errorMessageId = useId();\n const inputId = useId();\n\n const renderInput = () => {\n const inputProps: InputProps = {\n \"aria-describedby\": errorMessage ? errorMessageId : undefined,\n \"aria-invalid\": errorMessage ? true : undefined,\n id: id ?? inputId,\n className: clsx(\"hds-input-group__input\"),\n };\n\n if (typeof children === \"function\") {\n return children(inputProps);\n }\n\n const input: ReactNode = Children.toArray(children)[0];\n\n if (!isValidElement<InputProps>(input)) {\n return;\n }\n\n return cloneElement<InputProps>(input, {\n ...inputProps,\n ...input.props,\n className: `${inputProps.className} ${input.props.className ?? \"\"}`,\n });\n };\n\n return (\n <div\n className={clsx(\n \"hds-input-group\",\n {\n [`hds-input-group--${variant}`]: variant,\n \"hds-input-group--error\": errorMessage,\n },\n className as undefined,\n )}\n ref={ref}\n style={style}\n {...rest}\n >\n <label\n className={clsx(\"hds-input-group__label\", labelClassName as undefined)}\n {...labelProps}\n htmlFor={id ?? inputId}\n >\n {label}\n </label>\n <div\n className={clsx(\"hds-input-group__input-wrapper\")}\n data-disabled={disabled}\n data-readonly={readOnly}\n >\n {renderInput()}\n </div>\n <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n </div>\n );\n});\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { ReactNode } from \"react\";\n\nexport interface ErrorMessageProps {\n children: ReactNode;\n id: string;\n className?: string;\n}\n\nexport function ErrorMessage({ children, id, className }: ErrorMessageProps) {\n return (\n <div\n aria-live=\"assertive\"\n className={clsx(\"hds-error-message\", className as undefined)}\n id={id}\n >\n {children}\n </div>\n );\n}\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n <As extends ElementType>(\n props: {\n /** Override html element */\n as?: As;\n } & ComponentProps &\n Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n return React.useMemo(() => {\n if (refs.every((ref) => ref === null)) {\n return null;\n }\n\n return (value) => {\n refs.forEach((ref) => {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref !== null) {\n (ref as React.MutableRefObject<Instance | null>).current = value;\n }\n });\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n const [width, setWidth] = useState<number>(0);\n const [height, setHeight] = useState<number>(0);\n const handleResize = useCallback(() => {\n if (ref?.current !== null) {\n setWidth(ref?.current?.offsetWidth ?? 0);\n setHeight(ref?.current?.offsetHeight ?? 0);\n }\n }, [ref]);\n useEffect(() => {\n window.addEventListener(\"load\", handleResize);\n window.addEventListener(\"resize\", handleResize);\n return () => {\n window.removeEventListener(\"load\", handleResize);\n window.removeEventListener(\"resize\", handleResize);\n };\n }, [ref, handleResize]);\n useEffect(() => {\n handleResize();\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, []);\n return { width, height };\n}\n\nfunction subscribe() {\n // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n return () => {};\n}\n\nexport function useHydrated() {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n );\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_typed_classname","import_jsx_runtime","InputGroup","_a","import_react","import_jsx_runtime","DatePicker","_a"]}
@@ -0,0 +1,13 @@
1
+ import {
2
+ DatePicker
3
+ } from "../../chunk-G2SOAFGS.mjs";
4
+ import "../../chunk-Y5SUMFYJ.mjs";
5
+ import "../../chunk-TNU64NUN.mjs";
6
+ import "../../chunk-NSLSA7F7.mjs";
7
+ import "../../chunk-IL7576PP.mjs";
8
+ import "../../chunk-ZL56N4UK.mjs";
9
+ import "../../chunk-R4SQKVDQ.mjs";
10
+ export {
11
+ DatePicker
12
+ };
13
+ //# sourceMappingURL=date-picker.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -0,0 +1,2 @@
1
+ export { DatePicker_alias_4 as DatePicker } from '../../_tsup-dts-rollup';
2
+ export { DatePickerProps_alias_4 as DatePickerProps } from '../../_tsup-dts-rollup';
@@ -0,0 +1,2 @@
1
+ export { DatePicker_alias_4 as DatePicker } from '../../_tsup-dts-rollup';
2
+ export { DatePickerProps_alias_4 as DatePickerProps } from '../../_tsup-dts-rollup';
@@ -0,0 +1,267 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __defProps = Object.defineProperties;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
7
+ var __getOwnPropNames = Object.getOwnPropertyNames;
8
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
+ var __getProtoOf = Object.getPrototypeOf;
10
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
11
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
+ var __spreadValues = (a, b) => {
14
+ for (var prop in b || (b = {}))
15
+ if (__hasOwnProp.call(b, prop))
16
+ __defNormalProp(a, prop, b[prop]);
17
+ if (__getOwnPropSymbols)
18
+ for (var prop of __getOwnPropSymbols(b)) {
19
+ if (__propIsEnum.call(b, prop))
20
+ __defNormalProp(a, prop, b[prop]);
21
+ }
22
+ return a;
23
+ };
24
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
+ var __objRest = (source, exclude) => {
26
+ var target = {};
27
+ for (var prop in source)
28
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
29
+ target[prop] = source[prop];
30
+ if (source != null && __getOwnPropSymbols)
31
+ for (var prop of __getOwnPropSymbols(source)) {
32
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
33
+ target[prop] = source[prop];
34
+ }
35
+ return target;
36
+ };
37
+ var __export = (target, all) => {
38
+ for (var name in all)
39
+ __defProp(target, name, { get: all[name], enumerable: true });
40
+ };
41
+ var __copyProps = (to, from, except, desc) => {
42
+ if (from && typeof from === "object" || typeof from === "function") {
43
+ for (let key of __getOwnPropNames(from))
44
+ if (!__hasOwnProp.call(to, key) && key !== except)
45
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
46
+ }
47
+ return to;
48
+ };
49
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
50
+ // If the importer is in node compatibility mode or this is not an ESM
51
+ // file that has been converted to a CommonJS file using a Babel-
52
+ // compatible transform (i.e. "__esModule" has not been set), then set
53
+ // "default" to the CommonJS "module.exports" for node compatibility.
54
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
55
+ mod
56
+ ));
57
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
58
+
59
+ // src/form/date-picker/index.tsx
60
+ var date_picker_exports = {};
61
+ __export(date_picker_exports, {
62
+ DatePicker: () => DatePicker
63
+ });
64
+ module.exports = __toCommonJS(date_picker_exports);
65
+
66
+ // src/form/date-picker/date-picker.tsx
67
+ var import_react3 = require("react");
68
+ var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
69
+
70
+ // src/form/input-group/input-group.tsx
71
+ var import_react = require("react");
72
+ var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
73
+
74
+ // src/form/error-message/error-message.tsx
75
+ var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
76
+ var import_jsx_runtime = require("react/jsx-runtime");
77
+ function ErrorMessage({ children, id, className }) {
78
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
79
+ "div",
80
+ {
81
+ "aria-live": "assertive",
82
+ className: (0, import_typed_classname.clsx)("hds-error-message", className),
83
+ id,
84
+ children
85
+ }
86
+ );
87
+ }
88
+
89
+ // src/form/input-group/input-group.tsx
90
+ var import_jsx_runtime2 = require("react/jsx-runtime");
91
+ var InputGroup = (0, import_react.forwardRef)(function InputGroup2(_a, ref) {
92
+ var _b = _a, {
93
+ id,
94
+ className,
95
+ style,
96
+ variant = "default",
97
+ errorMessage,
98
+ labelProps: _c = {}
99
+ } = _b, _d = _c, { className: labelClassName } = _d, labelProps = __objRest(_d, ["className"]), _e = _b, {
100
+ label,
101
+ disabled,
102
+ readOnly,
103
+ children
104
+ } = _e, rest = __objRest(_e, [
105
+ "id",
106
+ "className",
107
+ "style",
108
+ "variant",
109
+ "errorMessage",
110
+ "labelProps",
111
+ "label",
112
+ "disabled",
113
+ "readOnly",
114
+ "children"
115
+ ]);
116
+ const errorMessageId = (0, import_react.useId)();
117
+ const inputId = (0, import_react.useId)();
118
+ const renderInput = () => {
119
+ var _a2;
120
+ const inputProps = {
121
+ "aria-describedby": errorMessage ? errorMessageId : void 0,
122
+ "aria-invalid": errorMessage ? true : void 0,
123
+ id: id != null ? id : inputId,
124
+ className: (0, import_typed_classname2.clsx)("hds-input-group__input")
125
+ };
126
+ if (typeof children === "function") {
127
+ return children(inputProps);
128
+ }
129
+ const input = import_react.Children.toArray(children)[0];
130
+ if (!(0, import_react.isValidElement)(input)) {
131
+ return;
132
+ }
133
+ return (0, import_react.cloneElement)(input, __spreadProps(__spreadValues(__spreadValues({}, inputProps), input.props), {
134
+ className: `${inputProps.className} ${(_a2 = input.props.className) != null ? _a2 : ""}`
135
+ }));
136
+ };
137
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
138
+ "div",
139
+ __spreadProps(__spreadValues({
140
+ className: (0, import_typed_classname2.clsx)(
141
+ "hds-input-group",
142
+ {
143
+ [`hds-input-group--${variant}`]: variant,
144
+ "hds-input-group--error": errorMessage
145
+ },
146
+ className
147
+ ),
148
+ ref,
149
+ style
150
+ }, rest), {
151
+ children: [
152
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
153
+ "label",
154
+ __spreadProps(__spreadValues({
155
+ className: (0, import_typed_classname2.clsx)("hds-input-group__label", labelClassName)
156
+ }, labelProps), {
157
+ htmlFor: id != null ? id : inputId,
158
+ children: label
159
+ })
160
+ ),
161
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
162
+ "div",
163
+ {
164
+ className: (0, import_typed_classname2.clsx)("hds-input-group__input-wrapper"),
165
+ "data-disabled": disabled,
166
+ "data-readonly": readOnly,
167
+ children: renderInput()
168
+ }
169
+ ),
170
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
171
+ ]
172
+ })
173
+ );
174
+ });
175
+
176
+ // src/utils.ts
177
+ var React = __toESM(require("react"));
178
+ var import_react2 = require("react");
179
+ function useMergeRefs(refs) {
180
+ return React.useMemo(() => {
181
+ if (refs.every((ref) => ref === null)) {
182
+ return null;
183
+ }
184
+ return (value) => {
185
+ refs.forEach((ref) => {
186
+ if (typeof ref === "function") {
187
+ ref(value);
188
+ } else if (ref !== null) {
189
+ ref.current = value;
190
+ }
191
+ });
192
+ };
193
+ }, refs);
194
+ }
195
+
196
+ // src/form/date-picker/date-picker.tsx
197
+ var import_jsx_runtime3 = require("react/jsx-runtime");
198
+ var DatePicker = (0, import_react3.forwardRef)(function DatePicker2(_a, ref) {
199
+ var _b = _a, {
200
+ className,
201
+ variant,
202
+ errorMessage,
203
+ labelProps,
204
+ label,
205
+ id,
206
+ style,
207
+ disabled,
208
+ readOnly,
209
+ calendarButtonTitle = "\xC5pne kalender"
210
+ } = _b, rest = __objRest(_b, [
211
+ "className",
212
+ "variant",
213
+ "errorMessage",
214
+ "labelProps",
215
+ "label",
216
+ "id",
217
+ "style",
218
+ "disabled",
219
+ "readOnly",
220
+ "calendarButtonTitle"
221
+ ]);
222
+ const inputRef = (0, import_react3.useRef)(null);
223
+ const mergedRef = useMergeRefs([inputRef, ref]);
224
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
225
+ InputGroup,
226
+ {
227
+ className: (0, import_typed_classname3.clsx)("hds-date-picker", className),
228
+ disabled,
229
+ errorMessage,
230
+ id,
231
+ label,
232
+ labelProps,
233
+ readOnly,
234
+ style,
235
+ variant,
236
+ children: (inputProps) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
237
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
238
+ "input",
239
+ __spreadProps(__spreadValues(__spreadValues({}, rest), inputProps), {
240
+ disabled,
241
+ readOnly,
242
+ ref: mergedRef,
243
+ type: "date"
244
+ })
245
+ ),
246
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
247
+ "button",
248
+ {
249
+ className: (0, import_typed_classname3.clsx)("hds-date-picker__calendar-button"),
250
+ type: "button",
251
+ title: calendarButtonTitle,
252
+ onClick: () => {
253
+ var _a2;
254
+ (_a2 = inputRef.current) == null ? void 0 : _a2.showPicker();
255
+ }
256
+ }
257
+ )
258
+ ] })
259
+ }
260
+ );
261
+ });
262
+ DatePicker.displayName = "DatePicker";
263
+ // Annotate the CommonJS export names for ESM import in node:
264
+ 0 && (module.exports = {
265
+ DatePicker
266
+ });
267
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/form/date-picker/index.tsx","../../../src/form/date-picker/date-picker.tsx","../../../src/form/input-group/input-group.tsx","../../../src/form/error-message/error-message.tsx","../../../src/utils.ts"],"sourcesContent":["export { DatePicker } from \"./date-picker\";\nexport type * from \"./date-picker\";\n","import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { InputGroup, type InputGroupProps } from \"../input-group\";\nimport { useMergeRefs } from \"../../utils\";\n\nexport type DatePickerProps = Omit<\n InputGroupProps & InputHTMLAttributes<HTMLInputElement>,\n \"children\" | \"type\"\n> & {\n /**\n * Accessible title for the calendar button\n *\n * This button currently only shows in Chrome.\n *\n * @defaultValue \"Åpne kalender\"\n */\n calendarButtonTitle?: string;\n};\n\n/**\n * A basic implementation of a date picker\n *\n * This date picker is an implementation of native date picker, as you get\n * with `<input type=\"date\" />`, where the input field is dressed in Hedwig styling.\n *\n * Due to accessibility concerns you will only see the appropriate Hedwig calendar\n * icon in Chrome. Firefox will show built in icon and Safari will show no icon.\n * Not tested in Edge.\n */\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(function DatePicker(\n {\n className,\n variant,\n errorMessage,\n labelProps,\n label,\n id,\n style,\n disabled,\n readOnly,\n calendarButtonTitle = \"Åpne kalender\",\n ...rest\n },\n ref,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n const mergedRef = useMergeRefs([inputRef, ref]);\n\n return (\n <InputGroup\n className={clsx(\"hds-date-picker\", className as undefined)}\n disabled={disabled}\n errorMessage={errorMessage}\n id={id}\n label={label}\n labelProps={labelProps}\n readOnly={readOnly}\n style={style}\n variant={variant}\n >\n {(inputProps) => (\n <>\n <input\n {...rest}\n {...inputProps}\n disabled={disabled}\n readOnly={readOnly}\n ref={mergedRef}\n type=\"date\"\n />\n <button\n className={clsx(\"hds-date-picker__calendar-button\")}\n type=\"button\"\n title={calendarButtonTitle}\n onClick={() => {\n inputRef.current?.showPicker();\n }}\n />\n </>\n )}\n </InputGroup>\n );\n});\n\nDatePicker.displayName = \"DatePicker\";\n","import { useId, forwardRef, Children, isValidElement, cloneElement } from \"react\";\nimport type { LabelHTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\ninterface InputProps {\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: boolean;\n id?: string;\n className?: string;\n}\n\nexport interface InputGroupProps {\n id?: string;\n className?: string;\n style?: CSSProperties;\n variant?: \"default\" | \"white\";\n errorMessage?: ReactNode;\n labelProps?: LabelHTMLAttributes<HTMLLabelElement>;\n label: ReactNode;\n disabled?: boolean;\n readOnly?: boolean;\n /**\n * `children` must be either a single input element or a render function.\n *\n * If you use a render function, make sure you spread the input props to the appropriate element.\n */\n children: Exclude<ReactNode, Iterable<ReactNode>> | ((inputProps: InputProps) => ReactNode);\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n {\n id,\n className,\n style,\n variant = \"default\",\n errorMessage,\n labelProps: { className: labelClassName, ...labelProps } = {},\n label,\n disabled,\n readOnly,\n children,\n ...rest\n },\n ref,\n) {\n const errorMessageId = useId();\n const inputId = useId();\n\n const renderInput = () => {\n const inputProps: InputProps = {\n \"aria-describedby\": errorMessage ? errorMessageId : undefined,\n \"aria-invalid\": errorMessage ? true : undefined,\n id: id ?? inputId,\n className: clsx(\"hds-input-group__input\"),\n };\n\n if (typeof children === \"function\") {\n return children(inputProps);\n }\n\n const input: ReactNode = Children.toArray(children)[0];\n\n if (!isValidElement<InputProps>(input)) {\n return;\n }\n\n return cloneElement<InputProps>(input, {\n ...inputProps,\n ...input.props,\n className: `${inputProps.className} ${input.props.className ?? \"\"}`,\n });\n };\n\n return (\n <div\n className={clsx(\n \"hds-input-group\",\n {\n [`hds-input-group--${variant}`]: variant,\n \"hds-input-group--error\": errorMessage,\n },\n className as undefined,\n )}\n ref={ref}\n style={style}\n {...rest}\n >\n <label\n className={clsx(\"hds-input-group__label\", labelClassName as undefined)}\n {...labelProps}\n htmlFor={id ?? inputId}\n >\n {label}\n </label>\n <div\n className={clsx(\"hds-input-group__input-wrapper\")}\n data-disabled={disabled}\n data-readonly={readOnly}\n >\n {renderInput()}\n </div>\n <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n </div>\n );\n});\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { ReactNode } from \"react\";\n\nexport interface ErrorMessageProps {\n children: ReactNode;\n id: string;\n className?: string;\n}\n\nexport function ErrorMessage({ children, id, className }: ErrorMessageProps) {\n return (\n <div\n aria-live=\"assertive\"\n className={clsx(\"hds-error-message\", className as undefined)}\n id={id}\n >\n {children}\n </div>\n );\n}\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n <As extends ElementType>(\n props: {\n /** Override html element */\n as?: As;\n } & ComponentProps &\n Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n return React.useMemo(() => {\n if (refs.every((ref) => ref === null)) {\n return null;\n }\n\n return (value) => {\n refs.forEach((ref) => {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref !== null) {\n (ref as React.MutableRefObject<Instance | null>).current = value;\n }\n });\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n const [width, setWidth] = useState<number>(0);\n const [height, setHeight] = useState<number>(0);\n const handleResize = useCallback(() => {\n if (ref?.current !== null) {\n setWidth(ref?.current?.offsetWidth ?? 0);\n setHeight(ref?.current?.offsetHeight ?? 0);\n }\n }, [ref]);\n useEffect(() => {\n window.addEventListener(\"load\", handleResize);\n window.addEventListener(\"resize\", handleResize);\n return () => {\n window.removeEventListener(\"load\", handleResize);\n window.removeEventListener(\"resize\", handleResize);\n };\n }, [ref, handleResize]);\n useEffect(() => {\n handleResize();\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, []);\n return { width, height };\n}\n\nfunction subscribe() {\n // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n return () => {};\n}\n\nexport function useHydrated() {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n );\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_typed_classname","import_jsx_runtime","InputGroup","_a","import_react","import_jsx_runtime","DatePicker","_a"]}
@@ -0,0 +1,14 @@
1
+ import "../../chunk-TDLSHJ4Z.mjs";
2
+ import {
3
+ DatePicker
4
+ } from "../../chunk-G2SOAFGS.mjs";
5
+ import "../../chunk-Y5SUMFYJ.mjs";
6
+ import "../../chunk-TNU64NUN.mjs";
7
+ import "../../chunk-NSLSA7F7.mjs";
8
+ import "../../chunk-IL7576PP.mjs";
9
+ import "../../chunk-ZL56N4UK.mjs";
10
+ import "../../chunk-R4SQKVDQ.mjs";
11
+ export {
12
+ DatePicker
13
+ };
14
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -115,7 +115,7 @@ var Fieldset = (0, import_react.forwardRef)(function Fieldset2(_a, ref) {
115
115
  children: legend
116
116
  })
117
117
  ),
118
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_typed_classname2.clsx)("hds-fieldset__input-wrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldsetContext.Provider, { value: { hasError: Boolean(errorMessage) }, children }) }),
118
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldsetContext.Provider, { value: { hasError: Boolean(errorMessage) }, children }),
119
119
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
120
120
  ]
121
121
  })
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/form/fieldset/fieldset.tsx","../../../src/form/error-message/error-message.tsx"],"sourcesContent":["import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n className?: string;\n style?: CSSProperties;\n /**\n * Providing an errorMessage will also give contained Checkboxes or Radiobuttons\n * error styling and aria to indicate invalid state.\n *\n * For Radiobuttons you are even better off using RadioGroup.\n */\n errorMessage?: ReactNode;\n legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n legend: ReactNode;\n children: ReactNode;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n {\n className,\n style,\n errorMessage,\n legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n legend,\n children,\n ...rest\n },\n ref,\n) {\n const errorMessageId = useId();\n\n return (\n <fieldset\n aria-describedby={errorMessage ? errorMessageId : undefined}\n aria-invalid={errorMessage ? true : undefined}\n className={clsx(\"hds-fieldset\", className as undefined)}\n ref={ref}\n style={style}\n {...rest}\n >\n <legend\n className={clsx(\n \"hds-fieldset__legend\",\n { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n legendClassName as undefined,\n )}\n {...legendProps}\n >\n {legend}\n </legend>\n <div className={clsx(\"hds-fieldset__input-wrapper\")}>\n <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n {children}\n </FieldsetContext.Provider>\n </div>\n <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n </fieldset>\n );\n});\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { ReactNode } from \"react\";\n\nexport interface ErrorMessageProps {\n children: ReactNode;\n id: string;\n className?: string;\n}\n\nexport function ErrorMessage({ children, id, className }: ErrorMessageProps) {\n return (\n <div\n aria-live=\"assertive\"\n className={clsx(\"hds-error-message\", className as undefined)}\n id={id}\n >\n {children}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6D;AAE7D,IAAAA,0BAAqB;;;ACFrB,6BAAqB;AAWjB;AAFG,SAAS,aAAa,EAAE,UAAU,IAAI,UAAU,GAAsB;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAW,6BAAK,qBAAqB,SAAsB;AAAA,MAC3D;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;;;ADoBI,IAAAC,sBAAA;AAnBJ,IAAM,sBAAkB,4BAAqC,EAAE,UAAU,MAAM,CAAC;AAEzE,IAAM,qBAAqB,UAAM,yBAAW,eAAe;AAE3D,IAAM,eAAW,yBAA+C,SAASC,UAC9E,IASA,KACA;AAVA,eAIe;AAAA,IAHb;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,KAA+E,CAAC;AAAA,EA7BjG,IAyBE,IAIe,SAAE,QAAM,aAAa,WAAW,WAAW,gBA7B5D,IA6BiB,IAA+D,wBAA/D,IAA+D,CAA7D,QAA8B,eAJ/C,SAKE;AAAA;AAAA,IACA;AAAA,EA/BJ,IAyBE,IAOK,iBAPL,IAOK;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,qBAAiB,oBAAM;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAkB,eAAe,iBAAiB;AAAA,MAClD,gBAAc,eAAe,OAAO;AAAA,MACpC,eAAW,8BAAK,gBAAgB,SAAsB;AAAA,MACtD;AAAA,MACA;AAAA,OACI,OANL;AAAA,MAQC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA,cACA,EAAE,CAAC,yBAAyB,UAAU,EAAE,GAAG,WAAW;AAAA,cACtD;AAAA,YACF;AAAA,aACI,cANL;AAAA,YAQE;AAAA;AAAA,QACH;AAAA,QACA,6CAAC,SAAI,eAAW,8BAAK,6BAA6B,GAChD,uDAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,QAAQ,YAAY,EAAE,GAChE,UACH,GACF;AAAA,QACA,6CAAC,gBAAa,IAAI,gBAAiB,wBAAa;AAAA;AAAA;AAAA,EAClD;AAEJ,CAAC;","names":["import_typed_classname","import_jsx_runtime","Fieldset"]}
1
+ {"version":3,"sources":["../../../src/form/fieldset/fieldset.tsx","../../../src/form/error-message/error-message.tsx"],"sourcesContent":["import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n className?: string;\n style?: CSSProperties;\n /**\n * Providing an errorMessage will also give contained Checkboxes or Radiobuttons\n * error styling and aria to indicate invalid state.\n *\n * For Radiobuttons you are even better off using RadioGroup.\n */\n errorMessage?: ReactNode;\n legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n legend: ReactNode;\n children: ReactNode;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n {\n className,\n style,\n errorMessage,\n legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n legend,\n children,\n ...rest\n },\n ref,\n) {\n const errorMessageId = useId();\n\n return (\n <fieldset\n aria-describedby={errorMessage ? errorMessageId : undefined}\n aria-invalid={errorMessage ? true : undefined}\n className={clsx(\"hds-fieldset\", className as undefined)}\n ref={ref}\n style={style}\n {...rest}\n >\n <legend\n className={clsx(\n \"hds-fieldset__legend\",\n { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n legendClassName as undefined,\n )}\n {...legendProps}\n >\n {legend}\n </legend>\n <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n {children}\n </FieldsetContext.Provider>\n <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n </fieldset>\n );\n});\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { ReactNode } from \"react\";\n\nexport interface ErrorMessageProps {\n children: ReactNode;\n id: string;\n className?: string;\n}\n\nexport function ErrorMessage({ children, id, className }: ErrorMessageProps) {\n return (\n <div\n aria-live=\"assertive\"\n className={clsx(\"hds-error-message\", className as undefined)}\n id={id}\n >\n {children}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6D;AAE7D,IAAAA,0BAAqB;;;ACFrB,6BAAqB;AAWjB;AAFG,SAAS,aAAa,EAAE,UAAU,IAAI,UAAU,GAAsB;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAW,6BAAK,qBAAqB,SAAsB;AAAA,MAC3D;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;;;ADoBI,IAAAC,sBAAA;AAnBJ,IAAM,sBAAkB,4BAAqC,EAAE,UAAU,MAAM,CAAC;AAEzE,IAAM,qBAAqB,UAAM,yBAAW,eAAe;AAE3D,IAAM,eAAW,yBAA+C,SAASC,UAC9E,IASA,KACA;AAVA,eAIe;AAAA,IAHb;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,KAA+E,CAAC;AAAA,EA7BjG,IAyBE,IAIe,SAAE,QAAM,aAAa,WAAW,WAAW,gBA7B5D,IA6BiB,IAA+D,wBAA/D,IAA+D,CAA7D,QAA8B,eAJ/C,SAKE;AAAA;AAAA,IACA;AAAA,EA/BJ,IAyBE,IAOK,iBAPL,IAOK;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,qBAAiB,oBAAM;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAkB,eAAe,iBAAiB;AAAA,MAClD,gBAAc,eAAe,OAAO;AAAA,MACpC,eAAW,8BAAK,gBAAgB,SAAsB;AAAA,MACtD;AAAA,MACA;AAAA,OACI,OANL;AAAA,MAQC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA,cACA,EAAE,CAAC,yBAAyB,UAAU,EAAE,GAAG,WAAW;AAAA,cACtD;AAAA,YACF;AAAA,aACI,cANL;AAAA,YAQE;AAAA;AAAA,QACH;AAAA,QACA,6CAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,QAAQ,YAAY,EAAE,GAChE,UACH;AAAA,QACA,6CAAC,gBAAa,IAAI,gBAAiB,wBAAa;AAAA;AAAA;AAAA,EAClD;AAEJ,CAAC;","names":["import_typed_classname","import_jsx_runtime","Fieldset"]}