@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
54 lines (52 loc) • 2.04 kB
JavaScript
import {
Box
} from "./chunk-DEABU7DB.mjs";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./chunk-YOSPWY5K.mjs";
// src/help-text/help-text.tsx
import * as Popover from "@radix-ui/react-popover";
import { clsx } from "@postenbring/hedwig-css/typed-classname";
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var HelpText = forwardRef(
(_a, ref) => {
var _b = _a, { children, className, helpText, title, side = "top", align = "start", boxProps } = _b, rest = __objRest(_b, ["children", "className", "helpText", "title", "side", "align", "boxProps"]);
return (
// NOTE: Using radix's [Popover component](https://www.radix-ui.com/primitives/docs/components/popover)
// In the future we can use the native popover api, but as of writing, though all browsers support it
// it's not far enough back to be used in production
// https://caniuse.com/mdn-html_elements_input_popovertarget
/* @__PURE__ */ jsxs(Popover.Root, { children: [
/* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
"button",
__spreadProps(__spreadValues({
ref,
className: clsx("hds-help-text-button", className),
title,
type: "button"
}, rest), {
children
})
) }),
/* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, { asChild: true, side, align, children: /* @__PURE__ */ jsxs(
Box,
__spreadProps(__spreadValues({}, boxProps), {
className: clsx("hds-help-text-box", boxProps == null ? void 0 : boxProps.className),
children: [
/* @__PURE__ */ jsx(Popover.Close, { asChild: true, children: /* @__PURE__ */ jsx(Box.CloseButton, {}) }),
helpText
]
})
) }) })
] })
);
}
);
HelpText.displayName = "HelpText";
export {
HelpText
};
//# sourceMappingURL=chunk-INDTHGWZ.mjs.map