@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
1,069 lines (1,043 loc) • 36.6 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/form/index.tsx
var form_exports = {};
__export(form_exports, {
Checkbox: () => Checkbox,
DatePicker: () => DatePicker,
ErrorMessage: () => ErrorMessage,
ErrorSummary: () => ErrorSummary,
Fieldset: () => Fieldset,
FieldsetDescription: () => FieldsetDescription,
FieldsetLegend: () => FieldsetLegend,
Input: () => Input,
RadioButton: () => RadioButton,
RadioGroup: () => RadioGroup,
SearchWrapper: () => SearchWrapper,
Select: () => Select,
Textarea: () => Textarea,
ValidationMessage: () => ValidationMessage,
useFieldsetContext: () => useFieldsetContext,
useRadioGroupContext: () => useRadioGroupContext
});
module.exports = __toCommonJS(form_exports);
// src/form/checkbox/checkbox.tsx
var import_react7 = require("react");
var import_typed_classname4 = require("@postenbring/hedwig-css/typed-classname");
// src/form/validation-message/validation-message.tsx
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var ValidationMessage = (0, import_react.forwardRef)(
(_a, ref) => {
var _b = _a, { children, id, className } = _b, rest = __objRest(_b, ["children", "id", "className"]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
__spreadProps(__spreadValues({
"aria-live": "polite",
className: (0, import_typed_classname.clsx)("hds-validation-message", className),
id,
ref
}, rest), {
children
})
);
}
);
ValidationMessage.displayName = "ValidationMessage";
// src/form/error-message/error-message.tsx
var import_react2 = require("react");
var import_jsx_runtime2 = require("react/jsx-runtime");
var ErrorMessage = (0, import_react2.forwardRef)(
(_a, ref) => {
var _b = _a, { children, id, className } = _b, rest = __objRest(_b, ["children", "id", "className"]);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ValidationMessage, __spreadProps(__spreadValues({ id, "data-color": "error", className }, rest), { ref, children }));
}
);
ErrorMessage.displayName = "ErrorMessage";
// src/form/fieldset/fieldset.tsx
var import_react6 = require("react");
var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
// src/utils/utils.ts
var React = __toESM(require("react"));
var import_react3 = require("react");
function useMergeRefs(refs) {
return React.useMemo(() => {
if (refs.every((ref) => ref === null)) {
return null;
}
return (value) => {
refs.forEach((ref) => {
if (typeof ref === "function") {
ref(value);
} else if (ref !== null) {
ref.current = value;
}
});
};
}, refs);
}
function getValidationMessageValue(validationMessage, errorMessage) {
if (validationMessage) {
if (typeof validationMessage === "object" && "value" in validationMessage) {
return validationMessage.value;
}
return validationMessage;
}
return errorMessage;
}
var inertBooleanSupported = Number(import_react3.version.split(".")[0]) >= 19;
// src/form/fieldset/fieldset-description.tsx
var import_react4 = require("react");
var import_jsx_runtime3 = require("react/jsx-runtime");
var FieldsetDescription = (0, import_react4.forwardRef)(
function FieldsetDescription2(rest, ref) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", __spreadValues({ className: "hds-fieldset__description", ref }, rest));
}
);
// src/form/fieldset/fieldset-legend.tsx
var import_react5 = require("react");
var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
var import_jsx_runtime4 = require("react/jsx-runtime");
var FieldsetLegend = (0, import_react5.forwardRef)(
function FieldsetLegend2(_a, ref) {
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"legend",
__spreadValues({
className: (0, import_typed_classname2.clsx)("hds-fieldset__legend", className),
ref
}, rest)
);
}
);
FieldsetLegend.displayName = "Fieldset.Legend";
// src/form/fieldset/fieldset.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var FieldsetContext = (0, import_react6.createContext)({
hasError: false,
size: ""
});
var useFieldsetContext = () => (0, import_react6.useContext)(FieldsetContext);
var Fieldset = (0, import_react6.forwardRef)(function Fieldset2(_a, ref) {
var _b = _a, {
className,
style,
"data-color": dataColor = void 0,
validationMessage,
validationMessageProps,
errorMessage,
errorMessageProps,
legendProps,
legend,
size = "",
children
} = _b, rest = __objRest(_b, [
"className",
"style",
"data-color",
"validationMessage",
"validationMessageProps",
"errorMessage",
"errorMessageProps",
"legendProps",
"legend",
"size",
"children"
]);
const validationMessageId = (0, import_react6.useId)();
const validationColor = errorMessage ? "error" : dataColor;
const validationMessageValue = getValidationMessageValue(validationMessage, errorMessage);
const childArray = import_react6.Children.toArray(children);
const legendChild = childArray.find(
(child) => (0, import_react6.isValidElement)(child) && child.type === FieldsetLegend
);
const contentChildren = legendChild ? childArray.filter((child) => child !== legendChild) : childArray;
let renderedLegend = null;
if (legendChild) {
renderedLegend = (0, import_react6.cloneElement)(legendChild, __spreadProps(__spreadValues(__spreadValues({}, legendProps), legendChild.props), {
className: (0, import_typed_classname3.clsx)(
legendProps == null ? void 0 : legendProps.className,
legendChild.props.className
)
}));
} else if (legend !== void 0) {
renderedLegend = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FieldsetLegend, __spreadProps(__spreadValues({}, legendProps), { children: legend }));
}
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
"fieldset",
__spreadProps(__spreadValues({
"aria-describedby": validationMessageValue ? validationMessageId : void 0,
"aria-invalid": errorMessage ? true : void 0,
className: (0, import_typed_classname3.clsx)("hds-fieldset", { [`hds-fieldset--${size}`]: size }, className),
"data-color": validationColor,
ref,
style
}, rest), {
children: [
renderedLegend,
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FieldsetContext.Provider, { value: { hasError: Boolean(errorMessage), size }, children: contentChildren }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
ValidationMessage,
__spreadProps(__spreadValues({
id: validationMessageId
}, validationMessageProps != null ? validationMessageProps : errorMessageProps), {
children: validationMessageValue
})
)
]
})
);
});
Fieldset.Description = FieldsetDescription;
Fieldset.Legend = FieldsetLegend;
// src/form/checkbox/checkbox.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var Checkbox = (0, import_react7.forwardRef)(
(_a, ref) => {
var _b = _a, {
variant = "plain",
hasError: hasErrorProp,
validationMessage,
validationMessageProps,
errorMessage,
errorMessageProps,
title,
children,
className,
size = ""
} = _b, rest = __objRest(_b, [
"variant",
"hasError",
"validationMessage",
"validationMessageProps",
"errorMessage",
"errorMessageProps",
"title",
"children",
"className",
"size"
]);
const validationMessageId = (0, import_react7.useId)();
const { hasError: hasFieldsetError, size: fieldsetSize } = useFieldsetContext();
const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;
const effectiveSize = size || fieldsetSize;
const validationMessageValue = getValidationMessageValue(validationMessage, errorMessage);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
"div",
{
className: (0, import_typed_classname4.clsx)("hds-checkbox-wrapper", {
"hds-checkbox-wrapper--small": effectiveSize === "small"
}),
children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
"div",
{
className: (0, import_typed_classname4.clsx)(
"hds-checkbox",
{
[`hds-checkbox--${variant}`]: variant === "bounding-box"
},
className
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"input",
__spreadValues({
"aria-invalid": hasError ? true : void 0,
"aria-describedby": validationMessageValue ? validationMessageId : void 0,
ref,
type: "checkbox"
}, rest)
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": true, className: "hds-checkbox__checkmark" }),
title ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "hds-checkbox__title", children: title }) : children
] }),
title ? children : null
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
ValidationMessage,
__spreadProps(__spreadValues({
id: validationMessageId
}, validationMessageProps != null ? validationMessageProps : errorMessageProps), {
children: validationMessageValue
})
)
]
}
);
}
);
Checkbox.displayName = "Checkbox";
// src/form/date-picker/date-picker.tsx
var import_react9 = require("react");
var import_typed_classname6 = require("@postenbring/hedwig-css/typed-classname");
// src/form/input-group/input-group.tsx
var import_react8 = require("react");
var import_typed_classname5 = require("@postenbring/hedwig-css/typed-classname");
var import_jsx_runtime7 = require("react/jsx-runtime");
var InputGroup = (0, import_react8.forwardRef)(function InputGroup2(_a, ref) {
var _b = _a, {
id,
className,
style,
"data-color": dataColor = void 0,
size = "large",
validationMessage,
validationMessageProps,
errorMessage,
errorMessageProps,
labelProps: _c = {}
} = _b, _d = _c, { className: labelClassName } = _d, labelProps = __objRest(_d, ["className"]), _e = _b, {
label,
disabled,
readOnly,
children
} = _e, rest = __objRest(_e, [
"id",
"className",
"style",
"data-color",
"size",
"validationMessage",
"validationMessageProps",
"errorMessage",
"errorMessageProps",
"labelProps",
"label",
"disabled",
"readOnly",
"children"
]);
const validationMessageId = (0, import_react8.useId)();
const inputId = (0, import_react8.useId)();
const validationColor = errorMessage ? "error" : dataColor;
const validationMessageValue = getValidationMessageValue(validationMessage, errorMessage);
const renderInput = () => {
var _a2;
const inputProps = {
"aria-describedby": validationMessage ? validationMessageId : void 0,
"aria-invalid": errorMessage ? true : void 0,
id: id != null ? id : inputId,
className: (0, import_typed_classname5.clsx)("hds-input-group__input")
};
if (typeof children === "function") {
return children(inputProps);
}
const input = import_react8.Children.toArray(children)[0];
if (!(0, import_react8.isValidElement)(input)) {
return;
}
return (0, import_react8.cloneElement)(input, __spreadProps(__spreadValues(__spreadValues({}, inputProps), input.props), {
className: `${inputProps.className} ${(_a2 = input.props.className) != null ? _a2 : ""}`
}));
};
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
"div",
__spreadProps(__spreadValues({
className: (0, import_typed_classname5.clsx)(
"hds-input-group",
{
[`hds-input-group--${size}`]: size
},
className
),
ref,
style,
"data-color": validationColor
}, rest), {
children: [
label !== null && label !== void 0 && label !== false && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"label",
__spreadProps(__spreadValues({
className: (0, import_typed_classname5.clsx)("hds-input-group__label", labelClassName)
}, labelProps), {
htmlFor: id != null ? id : inputId,
children: label
})
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"div",
{
className: (0, import_typed_classname5.clsx)("hds-input-group__input-wrapper"),
"data-disabled": disabled,
"data-readonly": readOnly,
children: renderInput()
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
ValidationMessage,
__spreadProps(__spreadValues({
id: validationMessageId
}, validationMessageProps != null ? validationMessageProps : errorMessageProps), {
children: validationMessageValue
})
)
]
})
);
});
// src/form/date-picker/date-picker.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var DatePicker = (0, import_react9.forwardRef)(function DatePicker2(_a, ref) {
var _b = _a, {
className,
size,
validationMessage,
validationMessageProps,
errorMessage,
labelProps,
label,
id,
style,
disabled,
readOnly,
"data-color": dataColor,
calendarButtonTitle = "\xC5pne kalender"
} = _b, rest = __objRest(_b, [
"className",
"size",
"validationMessage",
"validationMessageProps",
"errorMessage",
"labelProps",
"label",
"id",
"style",
"disabled",
"readOnly",
"data-color",
"calendarButtonTitle"
]);
const inputRef = (0, import_react9.useRef)(null);
const mergedRef = useMergeRefs([inputRef, ref]);
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
InputGroup,
{
className: (0, import_typed_classname6.clsx)("hds-date-picker", className),
disabled,
validationMessage,
validationMessageProps,
errorMessage,
id,
label,
labelProps,
readOnly,
style,
size,
"data-color": dataColor,
children: (inputProps) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"input",
__spreadValues(__spreadProps(__spreadValues({}, inputProps), {
disabled,
readOnly,
ref: mergedRef,
type: "date"
}), rest)
),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"button",
{
className: (0, import_typed_classname6.clsx)("hds-date-picker__calendar-button"),
type: "button",
title: calendarButtonTitle,
onClick: () => {
var _a2;
(_a2 = inputRef.current) == null ? void 0 : _a2.showPicker();
}
}
)
] })
}
);
});
DatePicker.displayName = "DatePicker";
// src/form/error-summary/error-summary.tsx
var import_react13 = require("react");
var import_typed_classname10 = require("@postenbring/hedwig-css/typed-classname");
var import_react_slot3 = require("@radix-ui/react-slot");
// src/box/box.tsx
var import_react10 = require("react");
var import_typed_classname7 = require("@postenbring/hedwig-css/typed-classname");
var import_react_slot = require("@radix-ui/react-slot");
var import_jsx_runtime9 = require("react/jsx-runtime");
function CloseIcon() {
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, viewBox: "0 0 32 32", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"path",
{
d: "M17.5469 16.3333L22.375 11.5521L23.3594 10.5677C23.5 10.4271 23.5 10.1927 23.3594 10.0052L22.3281 8.97394C22.1406 8.83331 21.9062 8.83331 21.7656 8.97394L16 14.7864L10.1875 8.97394C10.0469 8.83331 9.8125 8.83331 9.625 8.97394L8.59375 10.0052C8.45312 10.1927 8.45312 10.4271 8.59375 10.5677L14.4062 16.3333L8.59375 22.1458C8.45312 22.2864 8.45312 22.5208 8.59375 22.7083L9.625 23.7396C9.8125 23.8802 10.0469 23.8802 10.1875 23.7396L16 17.9271L20.7812 22.7552L21.7656 23.7396C21.9062 23.8802 22.1406 23.8802 22.3281 23.7396L23.3594 22.7083C23.5 22.5208 23.5 22.2864 23.3594 22.1458L17.5469 16.3333Z",
fill: "currentColor"
}
) });
}
var BoxCloseButton = (0, import_react10.forwardRef)(
(_a, ref) => {
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"button",
__spreadProps(__spreadValues({
className: (0, import_typed_classname7.clsx)("hds-box__close-button", className),
ref,
type: "button"
}, rest), {
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseIcon, {})
})
);
}
);
BoxCloseButton.displayName = "Box.CloseButton";
var convertVariantToColor = (variant) => {
switch (variant) {
case "lighter":
return "";
case "white":
return "";
case "warning":
return "warning";
default:
return "neutral";
}
};
var Box = (0, import_react10.forwardRef)(
(_a, ref) => {
var _b = _a, {
"data-color": color = "",
asChild,
variant,
closeable = false,
onClose: onCloseProp,
closed: closedProp,
closeButtonProps,
children,
className
} = _b, rest = __objRest(_b, [
"data-color",
"asChild",
"variant",
"closeable",
"onClose",
"closed",
"closeButtonProps",
"children",
"className"
]);
const [closedState, setClosedState] = (0, import_react10.useState)(false);
const onClose = (0, import_react10.useCallback)(() => {
if (onCloseProp) {
const result = onCloseProp();
if (result === true) {
setClosedState(true);
}
} else {
setClosedState(true);
}
}, []);
const closed = closedProp != null ? closedProp : closedState;
const Component = asChild ? import_react_slot.Slot : "div";
const resolvedColor = color && color !== "" ? color : convertVariantToColor(variant);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
Component,
__spreadProps(__spreadValues({
"data-color": resolvedColor,
className: (0, import_typed_classname7.clsx)(
"hds-box",
{ "hds-box--lighter": variant === "lighter" },
{ "hds-box--white": variant === "white" },
{ "hds-box--closed": closed },
className
),
ref
}, rest), {
children: [
closeable ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_slot.Slottable, { children })
]
})
);
}
);
Box.displayName = "Box";
Box.CloseButton = BoxCloseButton;
// src/list/list.tsx
var import_react11 = require("react");
var import_typed_classname8 = require("@postenbring/hedwig-css/typed-classname");
var import_jsx_runtime10 = require("react/jsx-runtime");
var UnorderedList = (0, import_react11.forwardRef)(
(_a, ref) => {
var _b = _a, { size = "default", className } = _b, rest = __objRest(_b, ["size", "className"]);
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"ul",
__spreadValues({
ref,
className: (0, import_typed_classname8.clsx)(
"hds-list",
size !== "default" && `hds-list--${size}`,
className
)
}, rest)
);
}
);
UnorderedList.displayName = "UnorderedList";
var OrderedList = (0, import_react11.forwardRef)(
(_a, ref) => {
var _b = _a, { size = "medium", className } = _b, rest = __objRest(_b, ["size", "className"]);
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"ol",
__spreadValues({
ref,
className: (0, import_typed_classname8.clsx)(
"hds-list",
size !== "default" && `hds-list--${size}`,
className
)
}, rest)
);
}
);
OrderedList.displayName = "OrderedList";
// src/link/link.tsx
var React2 = require("react");
var import_typed_classname9 = require("@postenbring/hedwig-css/typed-classname");
var import_react12 = require("react");
var import_react_slot2 = require("@radix-ui/react-slot");
var import_jsx_runtime11 = require("react/jsx-runtime");
var Link = (0, import_react12.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, children, variant = "underline", size = "default", icon, className } = _b, rest = __objRest(_b, ["asChild", "children", "variant", "size", "icon", "className"]);
const Component = asChild ? import_react_slot2.Slot : "a";
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
Component,
__spreadProps(__spreadValues({
className: (0, import_typed_classname9.clsx)(
"hds-link",
variant !== "underline" && `hds-link--${variant}`,
size !== "default" && `hds-link--${size}`,
{ "hds-link--trailing-icon": icon === "trailing" },
{ "hds-link--leading-icon": icon === "leading" },
className
),
ref
}, rest), {
children
})
);
}
);
Link.displayName = "Link";
// src/form/error-summary/focus.ts
function focusWithLegendOrLabelInViewport(id) {
var _a;
const input = document.getElementById(id);
if (!input) {
return false;
}
const legendOrLabel = (_a = maybeLegendForInput(input)) != null ? _a : labelForInput(input);
if (!legendOrLabel) {
return false;
}
legendOrLabel.scrollIntoView();
input.focus({ preventScroll: true });
return true;
}
function maybeLegendForInput(input) {
const fieldset = input.closest("fieldset");
if (!fieldset) {
return null;
}
const legend = fieldset.querySelector("legend");
if (!legend) {
return null;
}
if (input instanceof HTMLInputElement && (input.type === "checkbox" || input.type === "radio")) {
return legend;
}
const legendTop = legend.getBoundingClientRect().top;
const inputRect = input.getBoundingClientRect();
if (inputRect.height && window.innerHeight) {
const inputBottom = inputRect.top + inputRect.height;
if (inputBottom - legendTop < window.innerHeight / 2) {
return legend;
}
}
}
function labelForInput(input) {
var _a;
return (_a = document.querySelector(`label[for='${input.getAttribute("id")}']`)) != null ? _a : input.closest("label");
}
// src/form/error-summary/error-summary.tsx
var import_jsx_runtime12 = require("react/jsx-runtime");
var ErrorSummaryHeading = (0, import_react13.forwardRef)((_a, ref) => {
var _b = _a, { asChild, children, as: Tag, autoFocus = true } = _b, rest = __objRest(_b, ["asChild", "children", "as", "autoFocus"]);
const focusRef = (0, import_react13.useRef)(null);
const mergedRef = useMergeRefs([focusRef, ref]);
const Component = asChild ? import_react_slot3.Slot : Tag;
(0, import_react13.useEffect)(() => {
setTimeout(() => {
if (focusRef.current && autoFocus) {
focusRef.current.focus();
}
});
}, []);
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname10.clsx)(`hds-error-summary__title`), ref: mergedRef, tabIndex: -1 }, rest), { children }));
});
ErrorSummaryHeading.displayName = "ErrorSummary.Heading";
var ErrorSummaryList = (0, import_react13.forwardRef)(
(_a, ref) => {
var _b = _a, { children, size = "small" } = _b, rest = __objRest(_b, ["children", "size"]);
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(UnorderedList, __spreadProps(__spreadValues({ size, ref }, rest), { children }));
}
);
ErrorSummaryList.displayName = "ErrorSummary.List";
var ErrorSummaryItem = (0, import_react13.forwardRef)(
(_a, ref) => {
var _b = _a, { children, href, linkProps } = _b, rest = __objRest(_b, ["children", "href", "linkProps"]);
function onClick(e) {
var _a2;
(_a2 = linkProps == null ? void 0 : linkProps.onClick) == null ? void 0 : _a2.call(linkProps, e);
if (focusWithLegendOrLabelInViewport(href.replace("#", ""))) {
e.preventDefault();
}
}
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", __spreadProps(__spreadValues({ className: (0, import_typed_classname10.clsx)(`hds-error-summary__list-item`), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Link, __spreadProps(__spreadValues({ size: "small", href, variant: "solid" }, linkProps), { onClick, children })) }));
}
);
ErrorSummaryItem.displayName = "ErrorSummary.Item";
var ErrorSummary = (0, import_react13.forwardRef)(
(_a, ref) => {
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
Box,
__spreadProps(__spreadValues({
"data-color": "error",
ref
}, rest), {
className: (0, import_typed_classname10.clsx)(`hds-error-summary`, className),
children
})
);
}
);
ErrorSummary.displayName = "ErrorSummary";
ErrorSummary.Heading = ErrorSummaryHeading;
ErrorSummary.List = ErrorSummaryList;
ErrorSummary.Item = ErrorSummaryItem;
// src/form/input/input.tsx
var import_react14 = require("react");
var import_typed_classname11 = require("@postenbring/hedwig-css/typed-classname");
var import_jsx_runtime13 = require("react/jsx-runtime");
var Input = (0, import_react14.forwardRef)(
(_a, ref) => {
var _b = _a, {
className,
size,
validationMessage,
errorMessage,
labelProps,
label,
id,
style,
disabled,
readOnly,
"data-color": dataColor
} = _b, rest = __objRest(_b, [
"className",
"size",
"validationMessage",
"errorMessage",
"labelProps",
"label",
"id",
"style",
"disabled",
"readOnly",
"data-color"
]);
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
InputGroup,
{
className: (0, import_typed_classname11.clsx)("hds-input", className),
disabled,
validationMessage,
errorMessage,
id,
label,
labelProps,
readOnly,
style,
size,
"data-color": dataColor,
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", __spreadValues({ disabled, readOnly, ref }, rest))
}
);
}
);
Input.displayName = "Input";
// src/form/radio-button/radio-button.tsx
var import_react16 = require("react");
var import_typed_classname12 = require("@postenbring/hedwig-css/typed-classname");
// src/form/radio-button/radio-group.tsx
var import_react15 = require("react");
var import_jsx_runtime14 = require("react/jsx-runtime");
var RadioGroupContext = (0, import_react15.createContext)({
name: void 0,
onChange: () => void 0,
size: void 0
});
var useRadioGroupContext = () => (0, import_react15.useContext)(RadioGroupContext);
var RadioGroup = (0, import_react15.forwardRef)(function RadioGroup2(_a, ref) {
var _b = _a, { name, value, onChange, children, size } = _b, rest = __objRest(_b, ["name", "value", "onChange", "children", "size"]);
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RadioGroupContext.Provider, { value: { name, value, onChange, size }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Fieldset, __spreadProps(__spreadValues({ size }, rest), { ref, children })) });
});
RadioGroup.Description = FieldsetDescription;
RadioGroup.Legend = FieldsetLegend;
RadioGroup.displayName = "RadioGroup";
// src/form/radio-button/radio-button.tsx
var import_jsx_runtime15 = require("react/jsx-runtime");
var isChecked = ({
checked,
selectedValue,
value
}) => {
if (typeof checked !== "undefined") return checked;
if (typeof selectedValue !== "undefined") return value === selectedValue;
return void 0;
};
var RadioButton = (0, import_react16.forwardRef)(
(_a, ref) => {
var _b = _a, { checked, value, variant = "plain", title, children, className, size = "" } = _b, rest = __objRest(_b, ["checked", "value", "variant", "title", "children", "className", "size"]);
const _a2 = useRadioGroupContext(), { value: selectedValue, size: groupSize } = _a2, context = __objRest(_a2, ["value", "size"]);
const effectiveSize = size || groupSize;
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
"div",
{
className: (0, import_typed_classname12.clsx)(
"hds-radio-button",
{
[`hds-radio-button--${variant}`]: variant === "bounding-box",
[`hds-radio-button--${effectiveSize}`]: effectiveSize === "small"
},
className
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
"input",
__spreadProps(__spreadValues(__spreadValues({}, context), rest), {
checked: isChecked({ checked, selectedValue, value }),
value,
ref,
type: "radio"
})
),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": true, className: "hds-radio-button__checkmark" }),
title ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "hds-radio-button__title", children: title }) : children
] }),
title ? children : null
]
}
);
}
);
RadioButton.displayName = "RadioButton";
// src/form/search-wrapper/search-wrapper.tsx
var import_react17 = require("react");
var import_typed_classname13 = require("@postenbring/hedwig-css/typed-classname");
var import_jsx_runtime16 = require("react/jsx-runtime");
var SearchWrapper = (0, import_react17.forwardRef)(function SearchWrapper2(_a, ref) {
var _b = _a, { id, className, style, children } = _b, rest = __objRest(_b, ["id", "className", "style", "children"]);
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
"div",
__spreadProps(__spreadValues({
id,
className: (0, import_typed_classname13.clsx)("hds-search-wrapper", className),
ref,
style
}, rest), {
children
})
);
});
SearchWrapper.displayName = "SearchWrapper";
// src/form/select/select.tsx
var import_react18 = require("react");
var import_typed_classname14 = require("@postenbring/hedwig-css/typed-classname");
var import_jsx_runtime17 = require("react/jsx-runtime");
var Select = (0, import_react18.forwardRef)(function Select2(_a, ref) {
var _b = _a, {
className,
size,
validationMessage,
validationMessageProps,
errorMessage,
labelProps,
label,
id,
style,
disabled,
"data-color": dataColor,
children
} = _b, rest = __objRest(_b, [
"className",
"size",
"validationMessage",
"validationMessageProps",
"errorMessage",
"labelProps",
"label",
"id",
"style",
"disabled",
"data-color",
"children"
]);
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
InputGroup,
{
className: (0, import_typed_classname14.clsx)("hds-select", className),
disabled,
validationMessage,
validationMessageProps,
errorMessage,
id,
label,
labelProps,
style,
size,
"data-color": dataColor,
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("select", __spreadProps(__spreadValues({ disabled, ref }, rest), { children }))
}
);
});
Select.displayName = "Select";
// src/form/textarea/textarea.tsx
var import_react19 = require("react");
var import_typed_classname15 = require("@postenbring/hedwig-css/typed-classname");
var import_jsx_runtime18 = require("react/jsx-runtime");
var Textarea = (0, import_react19.forwardRef)(function Textarea2(_a, ref) {
var _b = _a, {
className,
size,
validationMessage,
validationMessageProps,
errorMessage,
labelProps,
label,
id,
style,
disabled,
readOnly,
"data-color": dataColor
} = _b, rest = __objRest(_b, [
"className",
"size",
"validationMessage",
"validationMessageProps",
"errorMessage",
"labelProps",
"label",
"id",
"style",
"disabled",
"readOnly",
"data-color"
]);
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
InputGroup,
{
className: (0, import_typed_classname15.clsx)("hds-textarea", className),
disabled,
validationMessage,
validationMessageProps,
errorMessage,
id,
label,
labelProps,
readOnly,
style,
size,
"data-color": dataColor,
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("textarea", __spreadValues({ disabled, readOnly, ref }, rest))
}
);
});
Textarea.displayName = "Textarea";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Checkbox,
DatePicker,
ErrorMessage,
ErrorSummary,
Fieldset,
FieldsetDescription,
FieldsetLegend,
Input,
RadioButton,
RadioGroup,
SearchWrapper,
Select,
Textarea,
ValidationMessage,
useFieldsetContext,
useRadioGroupContext
});
//# sourceMappingURL=index.js.map