@postenbring/hedwig-react 0.0.64 → 0.0.65
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.
- package/dist/_tsup-dts-rollup.d.mts +171 -19
- package/dist/_tsup-dts-rollup.d.ts +171 -19
- package/dist/accordion/accordion-content.js +5 -9
- package/dist/accordion/accordion-content.js.map +1 -1
- package/dist/accordion/accordion-content.mjs +1 -1
- package/dist/accordion/accordion-header.js +6 -9
- package/dist/accordion/accordion-header.js.map +1 -1
- package/dist/accordion/accordion-header.mjs +1 -1
- package/dist/accordion/accordion-item.js +2 -7
- package/dist/accordion/accordion-item.js.map +1 -1
- package/dist/accordion/accordion-item.mjs +1 -1
- package/dist/accordion/index.js +13 -25
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +4 -4
- package/dist/{chunk-SAGJ5W7M.mjs → chunk-62F4I3MQ.mjs} +3 -8
- package/dist/{chunk-SAGJ5W7M.mjs.map → chunk-62F4I3MQ.mjs.map} +1 -1
- package/dist/{chunk-BYDSISQZ.mjs → chunk-A47QULAK.mjs} +2 -2
- package/dist/{chunk-BYDSISQZ.mjs.map → chunk-A47QULAK.mjs.map} +1 -1
- package/dist/{chunk-2E6XPNPX.mjs → chunk-DEVTAZKG.mjs} +8 -6
- package/dist/chunk-DEVTAZKG.mjs.map +1 -0
- package/dist/chunk-EHUVLDIZ.mjs +121 -0
- package/dist/chunk-EHUVLDIZ.mjs.map +1 -0
- package/dist/{chunk-KRGKVH5J.mjs → chunk-GUB3UCXO.mjs} +6 -10
- package/dist/chunk-GUB3UCXO.mjs.map +1 -0
- package/dist/{chunk-37WVYY6X.mjs → chunk-HXV2UMEV.mjs} +6 -3
- package/dist/chunk-HXV2UMEV.mjs.map +1 -0
- package/dist/chunk-KQITCS3U.mjs +18 -0
- package/dist/chunk-KQITCS3U.mjs.map +1 -0
- package/dist/{chunk-DJRMXOCP.mjs → chunk-LIQ3FB56.mjs} +8 -8
- package/dist/chunk-MUVJAMFN.mjs +104 -0
- package/dist/chunk-MUVJAMFN.mjs.map +1 -0
- package/dist/{chunk-WGVZWX5L.mjs → chunk-RLUXDZ6X.mjs} +14 -4
- package/dist/chunk-RLUXDZ6X.mjs.map +1 -0
- package/dist/{chunk-H3VGHTDC.mjs → chunk-TE5M6GJB.mjs} +2 -2
- package/dist/chunk-TE5M6GJB.mjs.map +1 -0
- package/dist/chunk-U2MRMUB2.mjs +19 -0
- package/dist/chunk-U2MRMUB2.mjs.map +1 -0
- package/dist/{chunk-EJADADIY.mjs → chunk-UWTGHSWT.mjs} +6 -9
- package/dist/chunk-UWTGHSWT.mjs.map +1 -0
- package/dist/{chunk-5MDJP43L.mjs → chunk-VFFIUNR6.mjs} +7 -7
- package/dist/chunk-X7EKQZNU.mjs +76 -0
- package/dist/chunk-X7EKQZNU.mjs.map +1 -0
- package/dist/{chunk-V4NGUB4I.mjs → chunk-XFSZBILE.mjs} +2 -2
- package/dist/chunk-XFSZBILE.mjs.map +1 -0
- package/dist/{chunk-MBBFU4IR.mjs → chunk-XVFQWVHO.mjs} +3 -9
- package/dist/{chunk-MBBFU4IR.mjs.map → chunk-XVFQWVHO.mjs.map} +1 -1
- package/dist/chunk-YWNVB7TY.mjs +1 -0
- package/dist/{chunk-FT5CX2W5.mjs → chunk-YXHXRUFX.mjs} +7 -10
- package/dist/chunk-YXHXRUFX.mjs.map +1 -0
- package/dist/footer/footer.d.mts +7 -0
- package/dist/footer/footer.d.ts +7 -0
- package/dist/footer/footer.js +404 -0
- package/dist/footer/footer.js.map +1 -0
- package/dist/footer/footer.mjs +26 -0
- package/dist/footer/footer.mjs.map +1 -0
- package/dist/footer/index.d.mts +7 -0
- package/dist/footer/index.d.ts +7 -0
- package/dist/footer/index.js +405 -0
- package/dist/footer/index.js.map +1 -0
- package/dist/footer/index.mjs +19 -0
- package/dist/footer/index.mjs.map +1 -0
- package/dist/form/checkbox/checkbox.js +122 -24
- package/dist/form/checkbox/checkbox.js.map +1 -1
- package/dist/form/checkbox/checkbox.mjs +5 -1
- package/dist/form/checkbox/index.js +122 -24
- package/dist/form/checkbox/index.js.map +1 -1
- package/dist/form/checkbox/index.mjs +5 -1
- package/dist/form/fieldset/fieldset.d.mts +1 -0
- package/dist/form/fieldset/fieldset.d.ts +1 -0
- package/dist/form/fieldset/fieldset.js +7 -3
- package/dist/form/fieldset/fieldset.js.map +1 -1
- package/dist/form/fieldset/fieldset.mjs +5 -3
- package/dist/form/fieldset/index.d.mts +1 -0
- package/dist/form/fieldset/index.d.ts +1 -0
- package/dist/form/fieldset/index.js +7 -3
- package/dist/form/fieldset/index.js.map +1 -1
- package/dist/form/fieldset/index.mjs +5 -3
- package/dist/form/index.d.mts +2 -1
- package/dist/form/index.d.ts +2 -1
- package/dist/form/index.js +68 -27
- package/dist/form/index.js.map +1 -1
- package/dist/form/index.mjs +17 -13
- package/dist/form/radiobutton/index.d.mts +1 -1
- package/dist/form/radiobutton/index.d.ts +1 -1
- package/dist/form/radiobutton/index.js +17 -8
- package/dist/form/radiobutton/index.js.map +1 -1
- package/dist/form/radiobutton/index.mjs +7 -5
- package/dist/form/radiobutton/radiobutton.js +13 -6
- package/dist/form/radiobutton/radiobutton.js.map +1 -1
- package/dist/form/radiobutton/radiobutton.mjs +3 -3
- package/dist/form/radiobutton/radiogroup.js +2 -1
- package/dist/form/radiobutton/radiogroup.js.map +1 -1
- package/dist/form/radiobutton/radiogroup.mjs +2 -2
- package/dist/index-no-css.d.mts +10 -1
- package/dist/index-no-css.d.ts +10 -1
- package/dist/index-no-css.js +468 -307
- package/dist/index-no-css.js.map +1 -1
- package/dist/index-no-css.mjs +58 -46
- package/dist/index.d.mts +10 -1
- package/dist/index.d.ts +10 -1
- package/dist/index.js +468 -307
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +58 -46
- package/dist/index.mjs.map +1 -1
- package/dist/navbar/index.d.mts +1 -0
- package/dist/navbar/index.d.ts +1 -0
- package/dist/navbar/index.js +10 -7
- package/dist/navbar/index.js.map +1 -1
- package/dist/navbar/index.mjs +7 -4
- package/dist/navbar/navbar-expandable-menu.d.mts +1 -0
- package/dist/navbar/navbar-expandable-menu.d.ts +1 -0
- package/dist/navbar/navbar-expandable-menu.js +10 -7
- package/dist/navbar/navbar-expandable-menu.js.map +1 -1
- package/dist/navbar/navbar-expandable-menu.mjs +5 -3
- package/dist/skeleton/index.js +1 -1
- package/dist/skeleton/index.js.map +1 -1
- package/dist/skeleton/index.mjs +1 -1
- package/dist/skeleton/skeleton.js +1 -1
- package/dist/skeleton/skeleton.js.map +1 -1
- package/dist/skeleton/skeleton.mjs +1 -1
- package/dist/tabs/context.d.mts +1 -0
- package/dist/tabs/context.d.ts +1 -0
- package/dist/tabs/context.js +13 -8
- package/dist/tabs/context.js.map +1 -1
- package/dist/tabs/context.mjs +5 -3
- package/dist/tabs/index.js +46 -28
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +5 -5
- package/dist/tabs/tabs-content.js +11 -11
- package/dist/tabs/tabs-content.js.map +1 -1
- package/dist/tabs/tabs-content.mjs +2 -2
- package/dist/tabs/tabs-list.js +43 -16
- package/dist/tabs/tabs-list.js.map +1 -1
- package/dist/tabs/tabs-list.mjs +2 -2
- package/dist/tabs/tabs.js +2 -14
- package/dist/tabs/tabs.js.map +1 -1
- package/dist/tabs/tabs.mjs +2 -2
- package/package.json +3 -3
- package/dist/chunk-2E6XPNPX.mjs.map +0 -1
- package/dist/chunk-33JD5XDW.mjs +0 -14
- package/dist/chunk-33JD5XDW.mjs.map +0 -1
- package/dist/chunk-37WVYY6X.mjs.map +0 -1
- package/dist/chunk-EJADADIY.mjs.map +0 -1
- package/dist/chunk-FT5CX2W5.mjs.map +0 -1
- package/dist/chunk-H3VGHTDC.mjs.map +0 -1
- package/dist/chunk-H4GIHEB2.mjs +0 -1
- package/dist/chunk-KRGKVH5J.mjs.map +0 -1
- package/dist/chunk-PXHYOQPB.mjs +0 -42
- package/dist/chunk-PXHYOQPB.mjs.map +0 -1
- package/dist/chunk-V4NGUB4I.mjs.map +0 -1
- package/dist/chunk-WGVZWX5L.mjs.map +0 -1
- package/dist/chunk-XVZ44NGD.mjs +0 -80
- package/dist/chunk-XVZ44NGD.mjs.map +0 -1
- /package/dist/{chunk-DJRMXOCP.mjs.map → chunk-LIQ3FB56.mjs.map} +0 -0
- /package/dist/{chunk-5MDJP43L.mjs.map → chunk-VFFIUNR6.mjs.map} +0 -0
- /package/dist/{chunk-H4GIHEB2.mjs.map → chunk-YWNVB7TY.mjs.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/form/checkbox/checkbox.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"sources":["../../../src/form/checkbox/checkbox.tsx","../../../src/form/error-message/error-message.tsx","../../../src/form/fieldset/fieldset.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\nimport { useFieldsetContext } from \"../fieldset\";\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"defaultValue\"> & {\n children: ReactNode;\n variant?: \"plain\" | \"bounding-box\";\n title?: string;\n} & (\n | {\n /**\n * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.\n *\n * Normally you don't need this, as you should wrap your Checkboxes in the Fieldset component.\n * When providing an errorMessage to Fieldset, all contained Checkboxes will get correct hasError state.\n *\n * You can use this when your checkbox is part of a non-HDS fieldset which shows an error message.\n */\n hasError?: boolean;\n errorMessage?: never;\n }\n | {\n hasError?: never;\n /**\n * Set an error message to add error styling, and display the error message.\n * The component will take care of aria to connect the error message to the checkbox.\n *\n * Use this when your checkbox is standalone (not part of a fieldset).\n */\n errorMessage?: ReactNode;\n }\n );\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n variant = \"plain\",\n hasError: hasErrorProp,\n errorMessage,\n title,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const errorMessageId = useId();\n const { hasError: hasFieldsetError } = useFieldsetContext();\n const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;\n\n return (\n <div className={clsx(\"hds-checkbox-wrapper\")}>\n <div\n className={clsx(\n \"hds-checkbox\",\n {\n [`hds-checkbox--${variant}`]: variant === \"bounding-box\",\n \"hds-checkbox--error\": hasError,\n },\n className as undefined,\n )}\n >\n <label>\n <input\n {...rest}\n aria-invalid={hasError ? true : undefined}\n aria-describedby={errorMessage ? errorMessageId : undefined}\n ref={ref}\n type=\"checkbox\"\n />\n <span aria-hidden className=\"hds-checkbox__checkmark\" />\n {title ? <p className=\"hds-checkbox__title\">{title}</p> : children}\n </label>\n {title ? children : null}\n </div>\n {errorMessage ? <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage> : null}\n </div>\n );\n },\n);\nCheckbox.displayName = \"Checkbox\";\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 { 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"],"mappings":"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","names":["import_react","import_typed_classname","import_typed_classname","import_jsx_runtime","Fieldset","import_jsx_runtime"]}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Checkbox
|
|
3
|
-
} from "../../chunk-
|
|
3
|
+
} from "../../chunk-X7EKQZNU.mjs";
|
|
4
|
+
import "../../chunk-LMF3QGSF.mjs";
|
|
5
|
+
import "../../chunk-HXV2UMEV.mjs";
|
|
6
|
+
import "../../chunk-NSLSA7F7.mjs";
|
|
7
|
+
import "../../chunk-IL7576PP.mjs";
|
|
4
8
|
import "../../chunk-R4SQKVDQ.mjs";
|
|
5
9
|
export {
|
|
6
10
|
Checkbox
|
|
@@ -54,33 +54,131 @@ __export(checkbox_exports, {
|
|
|
54
54
|
module.exports = __toCommonJS(checkbox_exports);
|
|
55
55
|
|
|
56
56
|
// src/form/checkbox/checkbox.tsx
|
|
57
|
-
var
|
|
57
|
+
var import_react2 = require("react");
|
|
58
|
+
var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
|
|
59
|
+
|
|
60
|
+
// src/form/error-message/error-message.tsx
|
|
58
61
|
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
59
62
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
60
|
-
|
|
61
|
-
(
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
"
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
63
|
+
function ErrorMessage({ children, id, className }) {
|
|
64
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
65
|
+
"div",
|
|
66
|
+
{
|
|
67
|
+
"aria-live": "assertive",
|
|
68
|
+
className: (0, import_typed_classname.clsx)("hds-error-message", className),
|
|
69
|
+
id,
|
|
70
|
+
children
|
|
71
|
+
}
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// src/form/fieldset/fieldset.tsx
|
|
76
|
+
var import_react = require("react");
|
|
77
|
+
var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
|
|
78
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
79
|
+
var FieldsetContext = (0, import_react.createContext)({ hasError: false });
|
|
80
|
+
var useFieldsetContext = () => (0, import_react.useContext)(FieldsetContext);
|
|
81
|
+
var Fieldset = (0, import_react.forwardRef)(function Fieldset2(_a, ref) {
|
|
82
|
+
var _b = _a, {
|
|
83
|
+
className,
|
|
84
|
+
style,
|
|
85
|
+
errorMessage,
|
|
86
|
+
legendProps: _c = {}
|
|
87
|
+
} = _b, _d = _c, { size: legendSize = "default", className: legendClassName } = _d, legendProps = __objRest(_d, ["size", "className"]), _e = _b, {
|
|
88
|
+
legend,
|
|
89
|
+
children
|
|
90
|
+
} = _e, rest = __objRest(_e, [
|
|
91
|
+
"className",
|
|
92
|
+
"style",
|
|
93
|
+
"errorMessage",
|
|
94
|
+
"legendProps",
|
|
95
|
+
"legend",
|
|
96
|
+
"children"
|
|
97
|
+
]);
|
|
98
|
+
const errorMessageId = (0, import_react.useId)();
|
|
99
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
100
|
+
"fieldset",
|
|
101
|
+
__spreadProps(__spreadValues({
|
|
102
|
+
"aria-describedby": errorMessage ? errorMessageId : void 0,
|
|
103
|
+
"aria-invalid": errorMessage ? true : void 0,
|
|
104
|
+
className: (0, import_typed_classname2.clsx)("hds-fieldset", className),
|
|
105
|
+
ref,
|
|
106
|
+
style
|
|
107
|
+
}, rest), {
|
|
108
|
+
children: [
|
|
109
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
110
|
+
"legend",
|
|
111
|
+
__spreadProps(__spreadValues({
|
|
112
|
+
className: (0, import_typed_classname2.clsx)(
|
|
113
|
+
"hds-fieldset__legend",
|
|
114
|
+
{ [`hds-fieldset__legend--${legendSize}`]: legendSize },
|
|
115
|
+
legendClassName
|
|
116
|
+
)
|
|
117
|
+
}, legendProps), {
|
|
118
|
+
children: legend
|
|
119
|
+
})
|
|
73
120
|
),
|
|
74
|
-
children:
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
121
|
+
/* @__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 }) }),
|
|
122
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
|
|
123
|
+
]
|
|
124
|
+
})
|
|
125
|
+
);
|
|
126
|
+
});
|
|
127
|
+
|
|
128
|
+
// src/form/checkbox/checkbox.tsx
|
|
129
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
130
|
+
var Checkbox = (0, import_react2.forwardRef)(
|
|
131
|
+
(_a, ref) => {
|
|
132
|
+
var _b = _a, {
|
|
133
|
+
variant = "plain",
|
|
134
|
+
hasError: hasErrorProp,
|
|
135
|
+
errorMessage,
|
|
136
|
+
title,
|
|
137
|
+
children,
|
|
138
|
+
className
|
|
139
|
+
} = _b, rest = __objRest(_b, [
|
|
140
|
+
"variant",
|
|
141
|
+
"hasError",
|
|
142
|
+
"errorMessage",
|
|
143
|
+
"title",
|
|
144
|
+
"children",
|
|
145
|
+
"className"
|
|
146
|
+
]);
|
|
147
|
+
const errorMessageId = (0, import_react2.useId)();
|
|
148
|
+
const { hasError: hasFieldsetError } = useFieldsetContext();
|
|
149
|
+
const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;
|
|
150
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_typed_classname3.clsx)("hds-checkbox-wrapper"), children: [
|
|
151
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
152
|
+
"div",
|
|
153
|
+
{
|
|
154
|
+
className: (0, import_typed_classname3.clsx)(
|
|
155
|
+
"hds-checkbox",
|
|
156
|
+
{
|
|
157
|
+
[`hds-checkbox--${variant}`]: variant === "bounding-box",
|
|
158
|
+
"hds-checkbox--error": hasError
|
|
159
|
+
},
|
|
160
|
+
className
|
|
161
|
+
),
|
|
162
|
+
children: [
|
|
163
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { children: [
|
|
164
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
165
|
+
"input",
|
|
166
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
167
|
+
"aria-invalid": hasError ? true : void 0,
|
|
168
|
+
"aria-describedby": errorMessage ? errorMessageId : void 0,
|
|
169
|
+
ref,
|
|
170
|
+
type: "checkbox"
|
|
171
|
+
})
|
|
172
|
+
),
|
|
173
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": true, className: "hds-checkbox__checkmark" }),
|
|
174
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "hds-checkbox__title", children: title }) : children
|
|
175
|
+
] }),
|
|
176
|
+
title ? children : null
|
|
177
|
+
]
|
|
178
|
+
}
|
|
179
|
+
),
|
|
180
|
+
errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage }) : null
|
|
181
|
+
] });
|
|
84
182
|
}
|
|
85
183
|
);
|
|
86
184
|
Checkbox.displayName = "Checkbox";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/form/checkbox/index.tsx","../../../src/form/checkbox/checkbox.tsx"],"sourcesContent":["export { Checkbox } from \"./checkbox\";\nexport type * from \"./checkbox\";\n","import
|
|
1
|
+
{"version":3,"sources":["../../../src/form/checkbox/index.tsx","../../../src/form/checkbox/checkbox.tsx","../../../src/form/error-message/error-message.tsx","../../../src/form/fieldset/fieldset.tsx"],"sourcesContent":["export { Checkbox } from \"./checkbox\";\nexport type * from \"./checkbox\";\n","import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\nimport { useFieldsetContext } from \"../fieldset\";\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"defaultValue\"> & {\n children: ReactNode;\n variant?: \"plain\" | \"bounding-box\";\n title?: string;\n} & (\n | {\n /**\n * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.\n *\n * Normally you don't need this, as you should wrap your Checkboxes in the Fieldset component.\n * When providing an errorMessage to Fieldset, all contained Checkboxes will get correct hasError state.\n *\n * You can use this when your checkbox is part of a non-HDS fieldset which shows an error message.\n */\n hasError?: boolean;\n errorMessage?: never;\n }\n | {\n hasError?: never;\n /**\n * Set an error message to add error styling, and display the error message.\n * The component will take care of aria to connect the error message to the checkbox.\n *\n * Use this when your checkbox is standalone (not part of a fieldset).\n */\n errorMessage?: ReactNode;\n }\n );\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n variant = \"plain\",\n hasError: hasErrorProp,\n errorMessage,\n title,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const errorMessageId = useId();\n const { hasError: hasFieldsetError } = useFieldsetContext();\n const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;\n\n return (\n <div className={clsx(\"hds-checkbox-wrapper\")}>\n <div\n className={clsx(\n \"hds-checkbox\",\n {\n [`hds-checkbox--${variant}`]: variant === \"bounding-box\",\n \"hds-checkbox--error\": hasError,\n },\n className as undefined,\n )}\n >\n <label>\n <input\n {...rest}\n aria-invalid={hasError ? true : undefined}\n aria-describedby={errorMessage ? errorMessageId : undefined}\n ref={ref}\n type=\"checkbox\"\n />\n <span aria-hidden className=\"hds-checkbox__checkmark\" />\n {title ? <p className=\"hds-checkbox__title\">{title}</p> : children}\n </label>\n {title ? children : null}\n </div>\n {errorMessage ? <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage> : null}\n </div>\n );\n },\n);\nCheckbox.displayName = \"Checkbox\";\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 { 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"],"mappings":"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","names":["import_react","import_typed_classname","import_typed_classname","import_jsx_runtime","Fieldset","import_jsx_runtime"]}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import "../../chunk-YJOOSTJC.mjs";
|
|
2
2
|
import {
|
|
3
3
|
Checkbox
|
|
4
|
-
} from "../../chunk-
|
|
4
|
+
} from "../../chunk-X7EKQZNU.mjs";
|
|
5
|
+
import "../../chunk-LMF3QGSF.mjs";
|
|
6
|
+
import "../../chunk-HXV2UMEV.mjs";
|
|
7
|
+
import "../../chunk-NSLSA7F7.mjs";
|
|
8
|
+
import "../../chunk-IL7576PP.mjs";
|
|
5
9
|
import "../../chunk-R4SQKVDQ.mjs";
|
|
6
10
|
export {
|
|
7
11
|
Checkbox
|
|
@@ -49,7 +49,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
49
49
|
// src/form/fieldset/fieldset.tsx
|
|
50
50
|
var fieldset_exports = {};
|
|
51
51
|
__export(fieldset_exports, {
|
|
52
|
-
Fieldset: () => Fieldset
|
|
52
|
+
Fieldset: () => Fieldset,
|
|
53
|
+
useFieldsetContext: () => useFieldsetContext
|
|
53
54
|
});
|
|
54
55
|
module.exports = __toCommonJS(fieldset_exports);
|
|
55
56
|
var import_react = require("react");
|
|
@@ -72,6 +73,8 @@ function ErrorMessage({ children, id, className }) {
|
|
|
72
73
|
|
|
73
74
|
// src/form/fieldset/fieldset.tsx
|
|
74
75
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
76
|
+
var FieldsetContext = (0, import_react.createContext)({ hasError: false });
|
|
77
|
+
var useFieldsetContext = () => (0, import_react.useContext)(FieldsetContext);
|
|
75
78
|
var Fieldset = (0, import_react.forwardRef)(function Fieldset2(_a, ref) {
|
|
76
79
|
var _b = _a, {
|
|
77
80
|
className,
|
|
@@ -112,7 +115,7 @@ var Fieldset = (0, import_react.forwardRef)(function Fieldset2(_a, ref) {
|
|
|
112
115
|
children: legend
|
|
113
116
|
})
|
|
114
117
|
),
|
|
115
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_typed_classname2.clsx)("hds-fieldset__input-wrapper"), children }),
|
|
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 }) }),
|
|
116
119
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
|
|
117
120
|
]
|
|
118
121
|
})
|
|
@@ -120,6 +123,7 @@ var Fieldset = (0, import_react.forwardRef)(function Fieldset2(_a, ref) {
|
|
|
120
123
|
});
|
|
121
124
|
// Annotate the CommonJS export names for ESM import in node:
|
|
122
125
|
0 && (module.exports = {
|
|
123
|
-
Fieldset
|
|
126
|
+
Fieldset,
|
|
127
|
+
useFieldsetContext
|
|
124
128
|
});
|
|
125
129
|
//# sourceMappingURL=fieldset.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/form/fieldset/fieldset.tsx","../../../src/form/error-message/error-message.tsx"],"sourcesContent":["import { useId, forwardRef } 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 errorMessage?: ReactNode;\n legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n legend: ReactNode;\n children: ReactNode;\n}\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\")}
|
|
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,10 +1,12 @@
|
|
|
1
1
|
import {
|
|
2
|
-
Fieldset
|
|
3
|
-
|
|
2
|
+
Fieldset,
|
|
3
|
+
useFieldsetContext
|
|
4
|
+
} from "../../chunk-HXV2UMEV.mjs";
|
|
4
5
|
import "../../chunk-NSLSA7F7.mjs";
|
|
5
6
|
import "../../chunk-IL7576PP.mjs";
|
|
6
7
|
import "../../chunk-R4SQKVDQ.mjs";
|
|
7
8
|
export {
|
|
8
|
-
Fieldset
|
|
9
|
+
Fieldset,
|
|
10
|
+
useFieldsetContext
|
|
9
11
|
};
|
|
10
12
|
//# sourceMappingURL=fieldset.mjs.map
|
|
@@ -49,7 +49,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
49
49
|
// src/form/fieldset/index.tsx
|
|
50
50
|
var fieldset_exports = {};
|
|
51
51
|
__export(fieldset_exports, {
|
|
52
|
-
Fieldset: () => Fieldset
|
|
52
|
+
Fieldset: () => Fieldset,
|
|
53
|
+
useFieldsetContext: () => useFieldsetContext
|
|
53
54
|
});
|
|
54
55
|
module.exports = __toCommonJS(fieldset_exports);
|
|
55
56
|
|
|
@@ -74,6 +75,8 @@ function ErrorMessage({ children, id, className }) {
|
|
|
74
75
|
|
|
75
76
|
// src/form/fieldset/fieldset.tsx
|
|
76
77
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
78
|
+
var FieldsetContext = (0, import_react.createContext)({ hasError: false });
|
|
79
|
+
var useFieldsetContext = () => (0, import_react.useContext)(FieldsetContext);
|
|
77
80
|
var Fieldset = (0, import_react.forwardRef)(function Fieldset2(_a, ref) {
|
|
78
81
|
var _b = _a, {
|
|
79
82
|
className,
|
|
@@ -114,7 +117,7 @@ var Fieldset = (0, import_react.forwardRef)(function Fieldset2(_a, ref) {
|
|
|
114
117
|
children: legend
|
|
115
118
|
})
|
|
116
119
|
),
|
|
117
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_typed_classname2.clsx)("hds-fieldset__input-wrapper"), children }),
|
|
120
|
+
/* @__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
121
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
|
|
119
122
|
]
|
|
120
123
|
})
|
|
@@ -122,6 +125,7 @@ var Fieldset = (0, import_react.forwardRef)(function Fieldset2(_a, ref) {
|
|
|
122
125
|
});
|
|
123
126
|
// Annotate the CommonJS export names for ESM import in node:
|
|
124
127
|
0 && (module.exports = {
|
|
125
|
-
Fieldset
|
|
128
|
+
Fieldset,
|
|
129
|
+
useFieldsetContext
|
|
126
130
|
});
|
|
127
131
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/form/fieldset/index.tsx","../../../src/form/fieldset/fieldset.tsx","../../../src/form/error-message/error-message.tsx"],"sourcesContent":["export { Fieldset } from \"./fieldset\";\nexport type * from \"./fieldset\";\n","import { useId, forwardRef } 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 errorMessage?: ReactNode;\n legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n legend: ReactNode;\n children: ReactNode;\n}\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\")}
|
|
1
|
+
{"version":3,"sources":["../../../src/form/fieldset/index.tsx","../../../src/form/fieldset/fieldset.tsx","../../../src/form/error-message/error-message.tsx"],"sourcesContent":["export { Fieldset, useFieldsetContext } from \"./fieldset\";\nexport type * from \"./fieldset\";\n","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;;;ACAA,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,11 +1,13 @@
|
|
|
1
1
|
import "../../chunk-LMF3QGSF.mjs";
|
|
2
2
|
import {
|
|
3
|
-
Fieldset
|
|
4
|
-
|
|
3
|
+
Fieldset,
|
|
4
|
+
useFieldsetContext
|
|
5
|
+
} from "../../chunk-HXV2UMEV.mjs";
|
|
5
6
|
import "../../chunk-NSLSA7F7.mjs";
|
|
6
7
|
import "../../chunk-IL7576PP.mjs";
|
|
7
8
|
import "../../chunk-R4SQKVDQ.mjs";
|
|
8
9
|
export {
|
|
9
|
-
Fieldset
|
|
10
|
+
Fieldset,
|
|
11
|
+
useFieldsetContext
|
|
10
12
|
};
|
|
11
13
|
//# sourceMappingURL=index.mjs.map
|
package/dist/form/index.d.mts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { Fieldset_alias_2 as Fieldset } from '../_tsup-dts-rollup';
|
|
2
|
+
export { useFieldsetContext_alias_2 as useFieldsetContext } from '../_tsup-dts-rollup';
|
|
2
3
|
export { FieldsetProps_alias_2 as FieldsetProps } from '../_tsup-dts-rollup';
|
|
3
4
|
export { Input_alias_2 as Input } from '../_tsup-dts-rollup';
|
|
4
5
|
export { InputProps_alias_2 as InputProps } from '../_tsup-dts-rollup';
|
|
@@ -10,8 +11,8 @@ export { Checkbox_alias_2 as Checkbox } from '../_tsup-dts-rollup';
|
|
|
10
11
|
export { CheckboxProps_alias_2 as CheckboxProps } from '../_tsup-dts-rollup';
|
|
11
12
|
export { Radiobutton_alias_2 as Radiobutton } from '../_tsup-dts-rollup';
|
|
12
13
|
export { RadioGroup_alias_2 as RadioGroup } from '../_tsup-dts-rollup';
|
|
14
|
+
export { useRadioGroupContext_alias_2 as useRadioGroupContext } from '../_tsup-dts-rollup';
|
|
13
15
|
export { RadiobuttonProps_alias_2 as RadiobuttonProps } from '../_tsup-dts-rollup';
|
|
14
16
|
export { RadioGroupProps_alias_2 as RadioGroupProps } from '../_tsup-dts-rollup';
|
|
15
|
-
export { useRadioGroupContext_alias_2 as useRadioGroupContext } from '../_tsup-dts-rollup';
|
|
16
17
|
export { ErrorMessage_alias_2 as ErrorMessage } from '../_tsup-dts-rollup';
|
|
17
18
|
export { ErrorMessageProps_alias_2 as ErrorMessageProps } from '../_tsup-dts-rollup';
|
package/dist/form/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { Fieldset_alias_2 as Fieldset } from '../_tsup-dts-rollup';
|
|
2
|
+
export { useFieldsetContext_alias_2 as useFieldsetContext } from '../_tsup-dts-rollup';
|
|
2
3
|
export { FieldsetProps_alias_2 as FieldsetProps } from '../_tsup-dts-rollup';
|
|
3
4
|
export { Input_alias_2 as Input } from '../_tsup-dts-rollup';
|
|
4
5
|
export { InputProps_alias_2 as InputProps } from '../_tsup-dts-rollup';
|
|
@@ -10,8 +11,8 @@ export { Checkbox_alias_2 as Checkbox } from '../_tsup-dts-rollup';
|
|
|
10
11
|
export { CheckboxProps_alias_2 as CheckboxProps } from '../_tsup-dts-rollup';
|
|
11
12
|
export { Radiobutton_alias_2 as Radiobutton } from '../_tsup-dts-rollup';
|
|
12
13
|
export { RadioGroup_alias_2 as RadioGroup } from '../_tsup-dts-rollup';
|
|
14
|
+
export { useRadioGroupContext_alias_2 as useRadioGroupContext } from '../_tsup-dts-rollup';
|
|
13
15
|
export { RadiobuttonProps_alias_2 as RadiobuttonProps } from '../_tsup-dts-rollup';
|
|
14
16
|
export { RadioGroupProps_alias_2 as RadioGroupProps } from '../_tsup-dts-rollup';
|
|
15
|
-
export { useRadioGroupContext_alias_2 as useRadioGroupContext } from '../_tsup-dts-rollup';
|
|
16
17
|
export { ErrorMessage_alias_2 as ErrorMessage } from '../_tsup-dts-rollup';
|
|
17
18
|
export { ErrorMessageProps_alias_2 as ErrorMessageProps } from '../_tsup-dts-rollup';
|
package/dist/form/index.js
CHANGED
|
@@ -56,7 +56,9 @@ __export(form_exports, {
|
|
|
56
56
|
RadioGroup: () => RadioGroup,
|
|
57
57
|
Radiobutton: () => Radiobutton,
|
|
58
58
|
Select: () => Select,
|
|
59
|
-
Textarea: () => Textarea
|
|
59
|
+
Textarea: () => Textarea,
|
|
60
|
+
useFieldsetContext: () => useFieldsetContext,
|
|
61
|
+
useRadioGroupContext: () => useRadioGroupContext
|
|
60
62
|
});
|
|
61
63
|
module.exports = __toCommonJS(form_exports);
|
|
62
64
|
|
|
@@ -81,6 +83,8 @@ function ErrorMessage({ children, id, className }) {
|
|
|
81
83
|
|
|
82
84
|
// src/form/fieldset/fieldset.tsx
|
|
83
85
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
86
|
+
var FieldsetContext = (0, import_react.createContext)({ hasError: false });
|
|
87
|
+
var useFieldsetContext = () => (0, import_react.useContext)(FieldsetContext);
|
|
84
88
|
var Fieldset = (0, import_react.forwardRef)(function Fieldset2(_a, ref) {
|
|
85
89
|
var _b = _a, {
|
|
86
90
|
className,
|
|
@@ -121,7 +125,7 @@ var Fieldset = (0, import_react.forwardRef)(function Fieldset2(_a, ref) {
|
|
|
121
125
|
children: legend
|
|
122
126
|
})
|
|
123
127
|
),
|
|
124
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_typed_classname2.clsx)("hds-fieldset__input-wrapper"), children }),
|
|
128
|
+
/* @__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 }) }),
|
|
125
129
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
|
|
126
130
|
]
|
|
127
131
|
})
|
|
@@ -290,28 +294,56 @@ var import_typed_classname7 = require("@postenbring/hedwig-css/typed-classname")
|
|
|
290
294
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
291
295
|
var Checkbox = (0, import_react6.forwardRef)(
|
|
292
296
|
(_a, ref) => {
|
|
293
|
-
var _b = _a, {
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
297
|
+
var _b = _a, {
|
|
298
|
+
variant = "plain",
|
|
299
|
+
hasError: hasErrorProp,
|
|
300
|
+
errorMessage,
|
|
301
|
+
title,
|
|
302
|
+
children,
|
|
303
|
+
className
|
|
304
|
+
} = _b, rest = __objRest(_b, [
|
|
305
|
+
"variant",
|
|
306
|
+
"hasError",
|
|
307
|
+
"errorMessage",
|
|
308
|
+
"title",
|
|
309
|
+
"children",
|
|
310
|
+
"className"
|
|
311
|
+
]);
|
|
312
|
+
const errorMessageId = (0, import_react6.useId)();
|
|
313
|
+
const { hasError: hasFieldsetError } = useFieldsetContext();
|
|
314
|
+
const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;
|
|
315
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_typed_classname7.clsx)("hds-checkbox-wrapper"), children: [
|
|
316
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
317
|
+
"div",
|
|
318
|
+
{
|
|
319
|
+
className: (0, import_typed_classname7.clsx)(
|
|
320
|
+
"hds-checkbox",
|
|
321
|
+
{
|
|
322
|
+
[`hds-checkbox--${variant}`]: variant === "bounding-box",
|
|
323
|
+
"hds-checkbox--error": hasError
|
|
324
|
+
},
|
|
325
|
+
className
|
|
326
|
+
),
|
|
327
|
+
children: [
|
|
328
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { children: [
|
|
329
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
330
|
+
"input",
|
|
331
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
332
|
+
"aria-invalid": hasError ? true : void 0,
|
|
333
|
+
"aria-describedby": errorMessage ? errorMessageId : void 0,
|
|
334
|
+
ref,
|
|
335
|
+
type: "checkbox"
|
|
336
|
+
})
|
|
337
|
+
),
|
|
338
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": true, className: "hds-checkbox__checkmark" }),
|
|
339
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "hds-checkbox__title", children: title }) : children
|
|
340
|
+
] }),
|
|
341
|
+
title ? children : null
|
|
342
|
+
]
|
|
343
|
+
}
|
|
344
|
+
),
|
|
345
|
+
errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage }) : null
|
|
346
|
+
] });
|
|
315
347
|
}
|
|
316
348
|
);
|
|
317
349
|
Checkbox.displayName = "Checkbox";
|
|
@@ -368,8 +400,15 @@ var Radiobutton = (0, import_react8.forwardRef)(
|
|
|
368
400
|
"children",
|
|
369
401
|
"className"
|
|
370
402
|
]);
|
|
371
|
-
const _a2 = useRadioGroupContext(), {
|
|
372
|
-
|
|
403
|
+
const _a2 = useRadioGroupContext(), {
|
|
404
|
+
value: selectedValue,
|
|
405
|
+
hasError: hasRadioGroupError
|
|
406
|
+
} = _a2, context = __objRest(_a2, [
|
|
407
|
+
"value",
|
|
408
|
+
"hasError"
|
|
409
|
+
]);
|
|
410
|
+
const { hasError: hasFieldsetError } = useFieldsetContext();
|
|
411
|
+
const hasError = hasFieldsetError || hasRadioGroupError || hasErrorProp;
|
|
373
412
|
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
374
413
|
"div",
|
|
375
414
|
{
|
|
@@ -411,6 +450,8 @@ Radiobutton.displayName = "Radiobutton";
|
|
|
411
450
|
RadioGroup,
|
|
412
451
|
Radiobutton,
|
|
413
452
|
Select,
|
|
414
|
-
Textarea
|
|
453
|
+
Textarea,
|
|
454
|
+
useFieldsetContext,
|
|
455
|
+
useRadioGroupContext
|
|
415
456
|
});
|
|
416
457
|
//# sourceMappingURL=index.js.map
|