@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
1,330 lines (1,298 loc) • 119 kB
JavaScript
"use strict";
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/index.ts
var index_exports = {};
__export(index_exports, {
Accordion: () => Accordion,
AccordionContent: () => AccordionContent,
AccordionHeader: () => AccordionHeader,
AccordionItem: () => AccordionItem,
Alert: () => Alert,
AlertDescription: () => AlertDescription,
AlertTitle: () => AlertTitle,
AutoAnimateHeight: () => AutoAnimateHeight,
Badge: () => Badge,
Blockquote: () => Blockquote,
Box: () => Box,
BoxCloseButton: () => BoxCloseButton,
Breadcrumbs: () => Breadcrumbs,
Button: () => Button,
ButtonList: () => ButtonList,
Card: () => Card,
CardBody: () => CardBody,
CardBodyAction: () => CardBodyAction,
CardBodyActionArrow: () => CardBodyActionArrow,
CardBodyDescription: () => CardBodyDescription,
CardBodyHeader: () => CardBodyHeader,
CardBodyHeaderOverline: () => CardBodyHeaderOverline,
CardBodyHeaderTitle: () => CardBodyHeaderTitle,
CardMedia: () => CardMedia,
CardMediaImg: () => CardMediaImg,
Checkbox: () => Checkbox,
Container: () => Container,
DatePicker: () => DatePicker,
DescriptionList: () => DescriptionList,
ErrorMessage: () => ErrorMessage,
ErrorSummary: () => ErrorSummary,
Fieldset: () => Fieldset,
FieldsetDescription: () => FieldsetDescription,
FieldsetLegend: () => FieldsetLegend,
Figure: () => Figure,
Footer: () => Footer,
FooterButtonLink: () => FooterButtonLink,
FooterLinkSection: () => FooterLinkSection,
FooterLinkSections: () => FooterLinkSections,
FooterLogo: () => FooterLogo,
Grid: () => Grid,
GridItem: () => GridItem,
HStack: () => HStack,
HelpText: () => HelpText,
Input: () => Input,
Link: () => Link,
LinkList: () => LinkList,
Message: () => Message,
MessageDescription: () => MessageDescription,
MessageTitle: () => MessageTitle,
Modal: () => Modal,
ModalContent: () => ModalContent,
ModalFooter: () => ModalFooter,
ModalHeader: () => ModalHeader,
Navbar: () => Navbar,
NavbarButtonItem: () => NavbarButtonItem,
NavbarExpandableMenu: () => NavbarExpandableMenu,
NavbarExpandableMenuContent: () => NavbarExpandableMenuContent,
NavbarExpandableMenuTrigger: () => NavbarExpandableMenuTrigger,
NavbarItem: () => NavbarItem,
NavbarItemIcon: () => NavbarItemIcon,
NavbarLinkItem: () => NavbarLinkItem,
NavbarLogo: () => NavbarLogo,
NavbarLogoAndServiceText: () => NavbarLogoAndServiceText,
NavbarNavigation: () => NavbarNavigation,
OrderedList: () => OrderedList,
RadioButton: () => RadioButton,
RadioGroup: () => RadioGroup,
SearchWrapper: () => SearchWrapper,
Select: () => Select,
ShowMoreButton: () => ShowMoreButton,
Skeleton: () => Skeleton,
Spinner: () => Spinner,
Stack: () => Stack,
StepIndicator: () => StepIndicator,
StyledHtml: () => StyledHtml,
Table: () => Table,
Tabs: () => Tabs,
TabsContent: () => TabsContent,
TabsContents: () => TabsContents,
TabsList: () => TabsList,
TabsTab: () => TabsTab,
Text: () => Text,
Textarea: () => Textarea,
UnorderedList: () => UnorderedList,
VStack: () => VStack,
ValidationMessage: () => ValidationMessage,
WarningBanner: () => WarningBanner,
focusTrap: () => focusTrap,
getValidationMessageValue: () => getValidationMessageValue,
inertPropValue: () => inertPropValue,
useFieldsetContext: () => useFieldsetContext,
useHydrated: () => useHydrated,
useMergeRefs: () => useMergeRefs,
useNavbarExpendableMenuContext: () => useNavbarExpendableMenuContext,
useRadioGroupContext: () => useRadioGroupContext,
useResize: () => useResize
});
module.exports = __toCommonJS(index_exports);
// src/accordion/accordion.tsx
var import_react7 = require("react");
var import_typed_classname4 = require("@postenbring/hedwig-css/typed-classname");
// src/accordion/accordion-item.tsx
var import_react2 = require("react");
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
// src/accordion/context.ts
var import_react = require("react");
var AccordionItemContext = (0, import_react.createContext)(null);
// src/accordion/accordion-item.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var AccordionItem = (0, import_react2.forwardRef)(
(_a, ref) => {
var _b = _a, { children, defaultOpen, open: outerOpen, onOpenChange, className } = _b, rest = __objRest(_b, ["children", "defaultOpen", "open", "onOpenChange", "className"]);
const contentId = (0, import_react2.useId)();
const [innerOpen, setInnerOpen] = (0, import_react2.useState)(defaultOpen != null ? defaultOpen : false);
const open = outerOpen != null ? outerOpen : innerOpen;
const handleOpen = () => {
if (outerOpen !== void 0) {
onOpenChange && onOpenChange(!open);
} else {
setInnerOpen(!open);
}
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
__spreadProps(__spreadValues({}, rest), {
"data-state": open ? "open" : "closed",
className: (0, import_typed_classname.clsx)("hds-accordion-item", className),
ref,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionItemContext.Provider, { value: { contentId, open, setOpen: handleOpen }, children })
})
);
}
);
AccordionItem.displayName = "Accordion.Item";
// src/accordion/accordion-header.tsx
var import_react3 = require("react");
var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
var import_jsx_runtime2 = require("react/jsx-runtime");
var AccordionHeader = (0, import_react3.forwardRef)(
(_a, ref) => {
var _b = _a, { children, className, onClick } = _b, rest = __objRest(_b, ["children", "className", "onClick"]);
const context = (0, import_react3.useContext)(AccordionItemContext);
if (context === null) {
return null;
}
const expandOrCollapse = (e) => {
context.setOpen(!context.open);
onClick == null ? void 0 : onClick(e);
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"button",
__spreadProps(__spreadValues({}, rest), {
"aria-expanded": context.open,
"aria-controls": context.contentId,
"data-state": context.open ? "open" : "closed",
className: (0, import_typed_classname2.clsx)("hds-accordion-item-header", className),
onClick: expandOrCollapse,
ref,
type: "button",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children })
})
);
}
);
AccordionHeader.displayName = "Accordion.Header";
// src/accordion/accordion-content.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_react4 = 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 useResize(ref) {
const [width, setWidth] = (0, import_react4.useState)(0);
const [height, setHeight] = (0, import_react4.useState)(0);
const handleResize = (0, import_react4.useCallback)(() => {
var _a, _b, _c, _d;
if ((ref == null ? void 0 : ref.current) !== null) {
setWidth((_b = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.offsetWidth) != null ? _b : 0);
setHeight((_d = (_c = ref == null ? void 0 : ref.current) == null ? void 0 : _c.offsetHeight) != null ? _d : 0);
}
}, [ref]);
(0, import_react4.useEffect)(() => {
window.addEventListener("load", handleResize);
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("load", handleResize);
window.removeEventListener("resize", handleResize);
};
}, [ref, handleResize]);
(0, import_react4.useEffect)(() => {
handleResize();
}, []);
return { width, height };
}
function subscribe() {
return () => {
};
}
function useHydrated() {
return React.useSyncExternalStore(
subscribe,
() => true,
() => false
);
}
function getValidationMessageValue(validationMessage, errorMessage) {
if (validationMessage) {
if (typeof validationMessage === "object" && "value" in validationMessage) {
return validationMessage.value;
}
return validationMessage;
}
return errorMessage;
}
function focusTrap(element) {
var _a, _b;
if (element === document.body) return () => {
};
let inertElements = [];
for (let el = element; el; el = el.parentElement) {
if (el === document.body) break;
for (const sibling of (_b = (_a = el.parentElement) == null ? void 0 : _a.children) != null ? _b : []) {
if (sibling === el) continue;
if (!(sibling instanceof HTMLElement)) continue;
if (sibling.hasAttribute("inert")) continue;
sibling.setAttribute("inert", "true");
inertElements.push(sibling);
}
}
return () => {
releaseFocusTrap(inertElements);
inertElements = [];
};
}
function releaseFocusTrap(inertElements) {
for (const el of inertElements) {
el.removeAttribute("inert");
}
}
var inertBooleanSupported = Number(import_react4.version.split(".")[0]) >= 19;
var inertPropValue = inertBooleanSupported ? (x) => x : (x) => x ? "" : void 0;
// src/utils/auto-animate-height.tsx
var import_react5 = require("react");
var import_jsx_runtime3 = require("react/jsx-runtime");
var AutoAnimateHeight = (0, import_react5.forwardRef)(
(_a, ref) => {
var _b = _a, {
children,
style,
animationDuration = "quick",
animationEasing = "normal",
onTransitionEnd
} = _b, rest = __objRest(_b, [
"children",
"style",
"animationDuration",
"animationEasing",
"onTransitionEnd"
]);
var _a2, _b2;
const rootRef = (0, import_react5.useRef)(null);
const mergedRef = useMergeRefs([rootRef, ref]);
const measurementRef = (0, import_react5.useRef)(null);
const [height, setHeight] = (0, import_react5.useState)(
void 0
);
const [clonedChildren, setClonedChildren] = (0, import_react5.useState)(
() => (0, import_react5.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children }), {})
);
(0, import_react5.useEffect)(() => {
var _a3;
if (!rootRef.current) return;
if (!measurementRef.current) return;
if (document.body.scrollHeight === 0) return;
const currentMeasurement = measurementRef.current;
const { height: newHeight } = currentMeasurement.getBoundingClientRect();
let previouslyObservedHeight = newHeight;
const resizeObserver = new ResizeObserver(() => {
const { height: resizedHeight } = currentMeasurement.getBoundingClientRect();
if (resizedHeight === previouslyObservedHeight) return;
previouslyObservedHeight = resizedHeight;
setHeight({ height: resizedHeight, shouldAnimate: false });
});
resizeObserver.observe(currentMeasurement);
setHeight({ height: newHeight, shouldAnimate: true });
const nextClonedChildren = (0, import_react5.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children }), {});
if (newHeight >= ((_a3 = height == null ? void 0 : height.height) != null ? _a3 : 0)) {
setClonedChildren(nextClonedChildren);
return () => {
resizeObserver.disconnect();
};
}
const currentRoot = rootRef.current;
function onTransitionEndHandler(e) {
if (e.propertyName !== "height") return;
setClonedChildren(nextClonedChildren);
}
currentRoot.addEventListener("transitionend", onTransitionEndHandler);
return () => {
resizeObserver.disconnect();
currentRoot.removeEventListener("transitionend", onTransitionEndHandler);
};
}, [children]);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
"div",
__spreadProps(__spreadValues({
ref: mergedRef,
onTransitionEnd,
style: __spreadValues({
position: "relative",
overflow: "hidden",
height: (_b2 = height == null ? void 0 : height.height) != null ? _b2 : (_a2 = measurementRef.current) == null ? void 0 : _a2.getBoundingClientRect().height,
transitionProperty: (height == null ? void 0 : height.shouldAnimate) ? "height" : "none",
transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,
transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,
willChange: "height"
}, style)
}, rest), {
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"div",
{
"aria-hidden": true,
ref: measurementRef,
style: {
position: "absolute",
visibility: "hidden",
pointerEvents: "none"
},
children
}
),
clonedChildren
]
})
);
}
);
AutoAnimateHeight.displayName = "AutoAnimateHeight";
// src/accordion/accordion-content.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var AccordionContent = (0, import_react6.forwardRef)(
(_a, ref) => {
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
const context = (0, import_react6.useContext)(AccordionItemContext);
if (context === null) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"div",
__spreadProps(__spreadValues(__spreadProps(__spreadValues({
id: context.contentId,
"data-state": context.open ? "open" : "closed"
}, { inert: inertPropValue(!context.open) }), {
className: (0, import_typed_classname3.clsx)("hds-accordion-item-content", className),
ref
}), rest), {
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_typed_classname3.clsx)("hds-accordion-item-content-inner"), children })
})
);
}
);
AccordionContent.displayName = "Accordion.Content";
// src/accordion/accordion.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var Accordion = (0, import_react7.forwardRef)(
(_a, ref) => {
var _b = _a, { children, className, indent = true } = _b, rest = __objRest(_b, ["children", "className", "indent"]);
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"div",
__spreadProps(__spreadValues({}, rest), {
className: (0, import_typed_classname4.clsx)(
"hds-accordion",
!indent && "hds-accordion--no-indent",
className
),
ref,
children
})
);
}
);
Accordion.displayName = "Accordion";
Accordion.Item = AccordionItem;
Accordion.Header = AccordionHeader;
Accordion.Content = AccordionContent;
// src/alert/alert.tsx
var import_react9 = require("react");
var import_typed_classname6 = require("@postenbring/hedwig-css/typed-classname");
var import_react_slot2 = require("@radix-ui/react-slot");
// src/box/box.tsx
var import_react8 = require("react");
var import_typed_classname5 = require("@postenbring/hedwig-css/typed-classname");
var import_react_slot = require("@radix-ui/react-slot");
var import_jsx_runtime6 = require("react/jsx-runtime");
function CloseIcon() {
return /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.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_react8.forwardRef)(
(_a, ref) => {
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"button",
__spreadProps(__spreadValues({
className: (0, import_typed_classname5.clsx)("hds-box__close-button", className),
ref,
type: "button"
}, rest), {
children: /* @__PURE__ */ (0, import_jsx_runtime6.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_react8.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_react8.useState)(false);
const onClose = (0, import_react8.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_runtime6.jsxs)(
Component,
__spreadProps(__spreadValues({
"data-color": resolvedColor,
className: (0, import_typed_classname5.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_runtime6.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_slot.Slottable, { children })
]
})
);
}
);
Box.displayName = "Box";
Box.CloseButton = BoxCloseButton;
// src/alert/alert.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var AlertTitle = (0, import_react9.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
const Component = asChild ? import_react_slot2.Slot : "div";
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Component, __spreadValues({ className: (0, import_typed_classname6.clsx)("hds-alert__title", className), ref }, rest));
}
);
AlertTitle.displayName = "Alert.Title";
var AlertDescription = (0, import_react9.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
const Component = asChild ? import_react_slot2.Slot : "div";
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
Component,
__spreadValues({
className: (0, import_typed_classname6.clsx)("hds-alert__description", className),
ref
}, rest)
);
}
);
AlertDescription.displayName = "Alert.Description";
var allowedColors = ["neutral", "info", "success", "warning", "error", void 0];
function isValidDataColor(value) {
return allowedColors.includes(value);
}
var Alert = (0, import_react9.forwardRef)(
(_a, ref) => {
var _b = _a, { children, className, "data-color": color = void 0, icon, iconClassName } = _b, rest = __objRest(_b, ["children", "className", "data-color", "icon", "iconClassName"]);
const _a2 = rest, { variant } = _a2, boxProps = __objRest(_a2, ["variant"]);
const resolvedColor = color != null ? color : variant;
const validColor = isValidDataColor(resolvedColor) ? resolvedColor : void 0;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
Box,
__spreadProps(__spreadValues({
"data-color": validColor,
className: (0, import_typed_classname6.clsx)(`hds-alert`, className),
ref
}, boxProps), {
children: [
validColor === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_typed_classname6.clsx)("hds-alert--neutral__icon", iconClassName), children: icon }),
children
]
})
);
}
);
Alert.displayName = "Alert";
Alert.Title = AlertTitle;
Alert.Description = AlertDescription;
// src/badge/badge.tsx
var import_typed_classname7 = require("@postenbring/hedwig-css/typed-classname");
var import_react_slot3 = require("@radix-ui/react-slot");
var import_react10 = require("react");
var import_jsx_runtime8 = require("react/jsx-runtime");
var Badge = (0, import_react10.forwardRef)(
(_a, ref) => {
var _b = _a, {
"data-color": color = "",
children,
asChild,
variant = "",
size = "small",
className
} = _b, rest = __objRest(_b, [
"data-color",
"children",
"asChild",
"variant",
"size",
"className"
]);
const Component = asChild ? import_react_slot3.Slot : "span";
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
Component,
__spreadProps(__spreadValues(__spreadProps(__spreadValues({}, variant === "warning" || variant === "lighter" || variant === "darker" ? { "data-color-scheme": "light" } : {}), {
"data-color": color,
ref,
className: (0, import_typed_classname7.clsx)(
"hds-badge",
`hds-badge--${size}`,
{ "hds-badge--lighter": variant === "lighter" },
{ "hds-badge--darker": variant === "darker" },
{ "hds-badge--white": variant === "white" },
className
)
}), rest), {
children
})
);
}
);
Badge.displayName = "Badge";
// src/blockquote/blockquote.tsx
var import_typed_classname8 = require("@postenbring/hedwig-css/typed-classname");
var import_react_slot4 = require("@radix-ui/react-slot");
var import_react11 = require("react");
var import_jsx_runtime9 = require("react/jsx-runtime");
var Blockquote = (0, import_react11.forwardRef)(
(_a, ref) => {
var _b = _a, { children, asChild, className, variant } = _b, rest = __objRest(_b, ["children", "asChild", "className", "variant"]);
const Component = asChild ? import_react_slot4.Slot : "blockquote";
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Component,
__spreadProps(__spreadValues({
ref,
className: (0, import_typed_classname8.clsx)(
"hds-blockquote",
variant === "norwegian" && `hds-blockquote--norwegian`,
className
)
}, rest), {
children
})
);
}
);
Blockquote.displayName = "Blockquote";
// src/breadcrumbs/breadcrumbs.tsx
var import_react12 = require("react");
var import_typed_classname9 = require("@postenbring/hedwig-css/typed-classname");
var import_jsx_runtime10 = require("react/jsx-runtime");
var Breadcrumbs = (0, import_react12.forwardRef)(
(_a, ref) => {
var _b = _a, { olProps, children } = _b, rest = __objRest(_b, ["olProps", "children"]);
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("nav", __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ol", __spreadProps(__spreadValues({}, olProps), { className: (0, import_typed_classname9.clsx)("hds-breadcrumbs", olProps == null ? void 0 : olProps.className), children })) }));
}
);
Breadcrumbs.displayName = "Breadcrumbs";
// src/button/button.tsx
var import_react13 = require("react");
var import_typed_classname10 = require("@postenbring/hedwig-css/typed-classname");
var import_react_slot5 = require("@radix-ui/react-slot");
var import_jsx_runtime11 = require("react/jsx-runtime");
var Button = (0, import_react13.forwardRef)(
(_a, ref) => {
var _b = _a, {
asChild,
children,
variant = "primary",
size = "large",
fullWidth = false,
icon = false,
className
} = _b, rest = __objRest(_b, [
"asChild",
"children",
"variant",
"size",
"fullWidth",
"icon",
"className"
]);
const Component = asChild ? import_react_slot5.Slot : "button";
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
Component,
__spreadProps(__spreadValues({
className: (0, import_typed_classname10.clsx)(
"hds-button",
`hds-button--${size}`,
`hds-button--${variant}`,
{
"hds-button--full": fullWidth === true,
"hds-button--mobile-full": fullWidth === "mobile",
"hds-button--only-icon": icon === true,
"hds-button--leading-icon": icon === "leading",
"hds-button--trailing-icon": icon === "trailing"
},
className
),
ref
}, rest), {
children
})
);
}
);
Button.displayName = "Button";
// src/button-list/button-list.tsx
var import_react14 = require("react");
var import_typed_classname11 = require("@postenbring/hedwig-css/typed-classname");
var import_jsx_runtime12 = require("react/jsx-runtime");
var ButtonList = (0, import_react14.forwardRef)(
(_a, ref) => {
var _b = _a, { variant = "default", className, children } = _b, rest = __objRest(_b, ["variant", "className", "children"]);
const Component = "div";
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
Component,
__spreadProps(__spreadValues({
className: (0, import_typed_classname11.clsx)("hds-button-list", `hds-button-list--${variant}`, className),
ref
}, rest), {
children
})
);
}
);
ButtonList.displayName = "ButtonList";
// src/card/card.tsx
var import_react15 = require("react");
var import_typed_classname12 = require("@postenbring/hedwig-css/typed-classname");
var import_react_slot6 = require("@radix-ui/react-slot");
var import_jsx_runtime13 = require("react/jsx-runtime");
var CardMedia = (0, import_react15.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
const Component = asChild ? import_react_slot6.Slot : "div";
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname12.clsx)("hds-card__media", className), ref, children }));
}
);
CardMedia.displayName = "Card.Media";
var CardMediaImg = (0, import_react15.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, variant, className } = _b, rest = __objRest(_b, ["asChild", "variant", "className"]);
const Component = asChild ? import_react_slot6.Slot : "img";
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
Component,
__spreadProps(__spreadValues({}, rest), {
className: (0, import_typed_classname12.clsx)(
"hds-card__media__img",
{ "hds-card__img__crop": variant === "crop" },
className
),
ref
})
);
}
);
CardMediaImg.displayName = "Card.MediaImg";
var CardBody = (0, import_react15.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
const Component = asChild ? import_react_slot6.Slot : "div";
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname12.clsx)("hds-card__body", className), ref, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_typed_classname12.clsx)("hds-card__centerbody", className), children }) }));
}
);
CardBody.displayName = "Card.Body";
var CardBodyHeader = (0, import_react15.forwardRef)((_a, ref) => {
var _b = _a, { as: Tag, asChild, className, children } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children"]);
const Component = asChild ? import_react_slot6.Slot : Tag;
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
Component,
__spreadProps(__spreadValues({}, rest), {
className: (0, import_typed_classname12.clsx)("hds-card__body-header", className),
ref,
children
})
);
});
CardBodyHeader.displayName = "Card.BodyHeader";
var CardBodyHeaderOverline = (0, import_react15.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
const Component = asChild ? import_react_slot6.Slot : "span";
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
Component,
__spreadProps(__spreadValues({}, rest), {
className: (0, import_typed_classname12.clsx)("hds-card__body-header-overline", className),
ref,
children
})
);
}
);
CardBodyHeaderOverline.displayName = "Card.BodyHeaderOverline";
var CardBodyHeaderTitle = (0, import_react15.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
const Component = asChild ? import_react_slot6.Slot : "div";
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
Component,
__spreadProps(__spreadValues({}, rest), {
className: (0, import_typed_classname12.clsx)("hds-card__body-header-title", className),
ref,
children
})
);
}
);
CardBodyHeaderTitle.displayName = "Card.BodyHeaderTitle";
var CardBodyDescription = (0, import_react15.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
const Component = asChild ? import_react_slot6.Slot : "p";
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
Component,
__spreadProps(__spreadValues({}, rest), {
className: (0, import_typed_classname12.clsx)("hds-card__body-description", className),
ref,
children
})
);
}
);
CardBodyDescription.displayName = "Card.BodyDescription";
var CardBodyAction = (0, import_react15.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
const Component = asChild ? import_react_slot6.Slot : "div";
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
Component,
__spreadProps(__spreadValues({}, rest), {
className: (0, import_typed_classname12.clsx)("hds-card__body-action", className),
ref,
children
})
);
}
);
CardBodyAction.displayName = "Card.BodyAction";
var CardBodyActionRow = (0, import_react15.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
const Component = asChild ? import_react_slot6.Slot : "div";
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
Component,
__spreadProps(__spreadValues({}, rest), {
className: (0, import_typed_classname12.clsx)("hds-card__body-action-row", className),
ref,
children
})
);
}
);
CardBodyActionRow.displayName = "Card.BodyActionRow";
var CardBodyActionArrow = (0, import_react15.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, className, direction } = _b, rest = __objRest(_b, ["asChild", "className", "direction"]);
const Component = asChild ? import_react_slot6.Slot : "span";
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
Component,
__spreadProps(__spreadValues({}, rest), {
className: (0, import_typed_classname12.clsx)(
"hds-card__body-action-arrow",
{ "hds-card__body-action-arrow-up-right": direction === "up-right" },
className
),
ref
})
);
}
);
CardBodyActionArrow.displayName = "Card.BodyActionArrow";
var convertDeprecatedColor = (color) => {
switch (color) {
case "lighter-brand":
return { theme: "default" };
case "light-grey-fill":
return { theme: "base", dataColor: "neutral" };
case "white":
return { theme: "default", dataColor: "neutral" };
case "dark":
return { theme: "base" };
case "darker":
return { theme: "tinted", dataColorScheme: "dark" };
default:
return {};
}
};
var Card = (0, import_react15.forwardRef)(
(_a, ref) => {
var _b = _a, {
as: Tag = "section",
asChild,
className,
children,
variant = "slim",
"data-color": dataColorAttr,
theme = "default",
color,
imagePosition
} = _b, rest = __objRest(_b, [
"as",
"asChild",
"className",
"children",
"variant",
"data-color",
"theme",
"color",
"imagePosition"
]);
const Component = asChild ? import_react_slot6.Slot : Tag;
const {
theme: themeFromDeprecated,
dataColor: dataColorFromDeprecated,
dataColorScheme: dataColorSchemeFromDeprecated
} = convertDeprecatedColor(color != null ? color : variant === "focus" ? "darker" : void 0);
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
Component,
__spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, rest), dataColorAttr ? { "data-color": dataColorAttr } : {}), dataColorFromDeprecated ? { "data-color": dataColorFromDeprecated } : {}), dataColorSchemeFromDeprecated ? { "data-color-scheme": dataColorSchemeFromDeprecated } : {}), {
className: (0, import_typed_classname12.clsx)(
"hds-card",
{ "hds-card--full-width": variant === "full-width" },
{ "hds-card--miniature": variant === "miniature" },
{ "hds-card--focus": variant === "focus" },
// @deprecated
{ "hds-card--slim": variant === "slim" },
{ "hds-card--theme-default": (themeFromDeprecated != null ? themeFromDeprecated : theme) === "default" },
{ "hds-card--theme-tinted": (themeFromDeprecated != null ? themeFromDeprecated : theme) === "tinted" },
{ "hds-card--theme-base": (themeFromDeprecated != null ? themeFromDeprecated : theme) === "base" },
{ "hds-card--image-position-right": imagePosition === "right" },
className
),
ref,
children: variant === "full-width" || variant === "focus" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_typed_classname12.clsx)("hds-card__layoutwrapper", className), children }) : children
})
);
}
);
Card.displayName = "Card";
Card.Media = CardMedia;
Card.MediaImg = CardMediaImg;
Card.Body = CardBody;
Card.BodyHeader = CardBodyHeader;
Card.BodyHeaderOverline = CardBodyHeaderOverline;
Card.BodyHeaderTitle = CardBodyHeaderTitle;
Card.BodyDescription = CardBodyDescription;
Card.BodyAction = CardBodyAction;
Card.BodyActionRow = CardBodyActionRow;
Card.BodyActionArrow = CardBodyActionArrow;
// src/description-list/description-list.tsx
var import_react16 = require("react");
var import_typed_classname13 = require("@postenbring/hedwig-css/typed-classname");
var import_jsx_runtime14 = require("react/jsx-runtime");
var DescriptionList = (0, import_react16.forwardRef)(
(_a, ref) => {
var _b = _a, { variant = "vertical", className } = _b, rest = __objRest(_b, ["variant", "className"]);
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
"dl",
__spreadValues({
ref,
className: (0, import_typed_classname13.clsx)(
"hds-description-list",
{
"hds-description-list--horizontal": variant === "horizontal"
},
className
)
}, rest)
);
}
);
DescriptionList.displayName = "DescriptionList";
// src/figure/figure.tsx
var import_typed_classname14 = require("@postenbring/hedwig-css/typed-classname");
var import_react_slot7 = require("@radix-ui/react-slot");
var import_react17 = require("react");
var import_jsx_runtime15 = require("react/jsx-runtime");
var Figure = (0, import_react17.forwardRef)(
(_a, ref) => {
var _b = _a, { children, asChild, className } = _b, rest = __objRest(_b, ["children", "asChild", "className"]);
const Component = asChild ? import_react_slot7.Slot : "figure";
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Component, __spreadProps(__spreadValues({ ref, className: (0, import_typed_classname14.clsx)("hds-figure", className) }, rest), { children }));
}
);
Figure.displayName = "Figure";
// src/form/checkbox/checkbox.tsx
var import_react23 = require("react");
var import_typed_classname18 = require("@postenbring/hedwig-css/typed-classname");
// src/form/validation-message/validation-message.tsx
var import_typed_classname15 = require("@postenbring/hedwig-css/typed-classname");
var import_react18 = require("react");
var import_jsx_runtime16 = require("react/jsx-runtime");
var ValidationMessage = (0, import_react18.forwardRef)(
(_a, ref) => {
var _b = _a, { children, id, className } = _b, rest = __objRest(_b, ["children", "id", "className"]);
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
"div",
__spreadProps(__spreadValues({
"aria-live": "polite",
className: (0, import_typed_classname15.clsx)("hds-validation-message", className),
id,
ref
}, rest), {
children
})
);
}
);
ValidationMessage.displayName = "ValidationMessage";
// src/form/error-message/error-message.tsx
var import_react19 = require("react");
var import_jsx_runtime17 = require("react/jsx-runtime");
var ErrorMessage = (0, import_react19.forwardRef)(
(_a, ref) => {
var _b = _a, { children, id, className } = _b, rest = __objRest(_b, ["children", "id", "className"]);
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ValidationMessage, __spreadProps(__spreadValues({ id, "data-color": "error", className }, rest), { ref, children }));
}
);
ErrorMessage.displayName = "ErrorMessage";
// src/form/fieldset/fieldset.tsx
var import_react22 = require("react");
var import_typed_classname17 = require("@postenbring/hedwig-css/typed-classname");
// src/form/fieldset/fieldset-description.tsx
var import_react20 = require("react");
var import_jsx_runtime18 = require("react/jsx-runtime");
var FieldsetDescription = (0, import_react20.forwardRef)(
function FieldsetDescription2(rest, ref) {
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", __spreadValues({ className: "hds-fieldset__description", ref }, rest));
}
);
// src/form/fieldset/fieldset-legend.tsx
var import_react21 = require("react");
var import_typed_classname16 = require("@postenbring/hedwig-css/typed-classname");
var import_jsx_runtime19 = require("react/jsx-runtime");
var FieldsetLegend = (0, import_react21.forwardRef)(
function FieldsetLegend2(_a, ref) {
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
"legend",
__spreadValues({
className: (0, import_typed_classname16.clsx)("hds-fieldset__legend", className),
ref
}, rest)
);
}
);
FieldsetLegend.displayName = "Fieldset.Legend";
// src/form/fieldset/fieldset.tsx
var import_jsx_runtime20 = require("react/jsx-runtime");
var FieldsetContext = (0, import_react22.createContext)({
hasError: false,
size: ""
});
var useFieldsetContext = () => (0, import_react22.useContext)(FieldsetContext);
var Fieldset = (0, import_react22.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_react22.useId)();
const validationColor = errorMessage ? "error" : dataColor;
const validationMessageValue = getValidationMessageValue(validationMessage, errorMessage);
const childArray = import_react22.Children.toArray(children);
const legendChild = childArray.find(
(child) => (0, import_react22.isValidElement)(child) && child.type === FieldsetLegend
);
const contentChildren = legendChild ? childArray.filter((child) => child !== legendChild) : childArray;
let renderedLegend = null;
if (legendChild) {
renderedLegend = (0, import_react22.cloneElement)(legendChild, __spreadProps(__spreadValues(__spreadValues({}, legendProps), legendChild.props), {
className: (0, import_typed_classname17.clsx)(
legendProps == null ? void 0 : legendProps.className,
legendChild.props.className
)
}));
} else if (legend !== void 0) {
renderedLegend = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FieldsetLegend, __spreadProps(__spreadValues({}, legendProps), { children: legend }));
}
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
"fieldset",
__spreadProps(__spreadValues({
"aria-describedby": validationMessageValue ? validationMessageId : void 0,
"aria-invalid": errorMessage ? true : void 0,
className: (0, import_typed_classname17.clsx)("hds-fieldset", { [`hds-fieldset--${size}`]: size }, className),
"data-color": validationColor,
ref,
style
}, rest), {
children: [
renderedLegend,
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FieldsetContext.Provider, { value: { hasError: Boolean(errorMessage), size }, children: contentChildren }),
/* @__PURE__ */ (0, import_jsx_runtime20.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_runtime21 = require("react/jsx-runtime");
var Checkbox = (0, import_react23.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_react23.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_runtime21.jsxs)(
"div",
{
className: (0, import_typed_classname18.clsx)("hds-checkbox-wrapper", {
"hds-checkbox-wrapper--small": effectiveSize === "small"
}),
children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
"div",
{
className: (0, import_typed_classname18.clsx)(
"hds-checkbox",
{
[`hds-checkbox--${variant}`]: variant === "bounding-box"
},
className
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
"input",
__spreadValues({
"aria-invalid": hasError ? true : void 0,
"aria-describedby": validationMessageValue ? validationMessageId : void 0,
ref,
type: "checkbox"
}, rest)
),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "aria-hidden": true, className: "hds-checkbox__checkmark" }),
title ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "hds-checkbox__title", children: title }) : children
] }),
title ? children : null
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
ValidationMessage,
__spreadProps(__spreadValues({
id: validationMessageId
}, validationMessageProps != null ? validationMessageProps : errorMessageProps), {
children: validationMessageValue
})
)
]
}
);
}
);
Checkbox.displayName = "Checkbox";
// src/form/date-picker/date-picker.tsx
var import_react25 = require("react");
var import_typed_classname20 = require("@postenbring/hedwig-css/typed-classname");
// src/form/input-group/input-group.tsx
var import_react24 = require("react");
var import_typed_classname19 = require("@postenbring/hedwig-css/typed-classname");
var import_jsx_runtime22 = require("react/jsx-runtime");
var InputGroup = (0, import_react24.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_react24.useId)();
const inputId = (0, import_react24.useId)();
const validationColor = errorMessage ? "error" : dataColor;
const validationMessageValue = getValidationMessageValue(validationMessage, errorMessage);
const renderInput = () => {
var _a2;
const inputProps = {
"aria-describedby": validationMessage