@postenbring/hedwig-react 0.0.71 → 0.0.72

package/dist/help-text/index.js

@@ -0,0 +1,188 @@
+"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/help-text/index.ts
+var help_text_exports = {};
+__export(help_text_exports, {
+  HelpText: () => HelpText
+});
+module.exports = __toCommonJS(help_text_exports);
+
+// src/help-text/help-text.tsx
+var Popover = __toESM(require("@radix-ui/react-popover"));
+var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
+var import_react2 = require("react");
+
+// src/box/box.tsx
+var import_react = require("react");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Box = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      as: Component = "div",
+      variant,
+      closeable = false,
+      onClose: onCloseProp,
+      closed: closedProp,
+      closeButtonProps,
+      children,
+      className
+    } = _b, rest = __objRest(_b, [
+      "as",
+      "variant",
+      "closeable",
+      "onClose",
+      "closed",
+      "closeButtonProps",
+      "children",
+      "className"
+    ]);
+    const [closedState, setClosedState] = (0, import_react.useState)(false);
+    const onClose = (0, import_react.useCallback)(() => {
+      if (onCloseProp) {
+        const result = onCloseProp();
+        if (result === true) {
+          setClosedState(true);
+        }
+      } else {
+        setClosedState(true);
+      }
+    }, []);
+    const closed = closedProp != null ? closedProp : closedState;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname.clsx)(
+          "hds-box",
+          variant && `hds-box--${variant}`,
+          { "hds-box--closed": closed },
+          className
+        ),
+        ref
+      }, rest), {
+        children: [
+          closeable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
+          children
+        ]
+      })
+    );
+  }
+);
+Box.displayName = "Box";
+var BoxCloseButton = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      __spreadValues({
+        className: (0, import_typed_classname.clsx)("hds-box__close-button", className),
+        ref,
+        type: "button"
+      }, rest)
+    );
+  }
+);
+BoxCloseButton.displayName = "Box.CloseButton";
+
+// src/box/index.tsx
+var BoxComponent = Box;
+BoxComponent.CloseButton = BoxCloseButton;
+
+// src/help-text/help-text.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var HelpText = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className, word, title, side = "top", align = "start", boxProps } = _b, rest = __objRest(_b, ["children", "className", "word", "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__ */ (0, import_jsx_runtime2.jsxs)(Popover.Root, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          __spreadProps(__spreadValues({
+            ref,
+            className: (0, import_typed_classname2.clsx)("hds-help-text-button", className),
+            title,
+            type: "button"
+          }, rest), {
+            children: word
+          })
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Popover.Content, { asChild: true, side, align, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          BoxComponent,
+          __spreadProps(__spreadValues({}, boxProps), {
+            className: (0, import_typed_classname2.clsx)("hds-help-text-box", boxProps == null ? void 0 : boxProps.className),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BoxComponent.CloseButton, {}) }),
+              children
+            ]
+          })
+        ) }) })
+      ] })
+    );
+  }
+);
+HelpText.displayName = "HelpText";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HelpText
+});
+//# sourceMappingURL=index.js.map

package/dist/help-text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/help-text/index.ts","../../src/help-text/help-text.tsx","../../src/box/box.tsx","../../src/box/index.tsx"],"sourcesContent":["export { HelpText } from \"./help-text\";\nexport type * from \"./help-text\";\n","import * as Popover from \"@radix-ui/react-popover\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Box } from \"../box\";\n\ninterface HelpTextProps extends React.HTMLAttributes<HTMLButtonElement> {\n  className?: string;\n\n  /**\n   * The content of the help text\n   */\n  children: React.ReactNode;\n\n  /**\n   * The word that should be clickable to show the help text\n   */\n  word?: React.ReactNode;\n\n  /**\n   * The title of the help text. Used by screen readers and if the user hover over the help text\n   */\n  title?: string;\n\n  /**\n   * Props for the `Box` that contains the help text\n   */\n  boxProps?: React.ComponentProps<typeof Box>;\n\n  /**\n   * The side of the trigger the popover should be attached to\n   *\n   * default is `top`\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\n  /**\n   * The alignment of the popover content\n   *\n   * default is `start`\n   */\n  align?: \"center\" | \"end\" | \"start\";\n}\n\n/**\n * Show a help text for a word or phrase when clicked\n *\n * Useful for providing explanations for domain-specific terms or acronyms\n */\nexport const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(\n  ({ children, className, word, title, side = \"top\", align = \"start\", boxProps, ...rest }, ref) => {\n    return (\n      // NOTE: Using radix's [Popover component](https://www.radix-ui.com/primitives/docs/components/popover)\n      // In the future we can use the native popover api, but as of writing, though all browsers support it\n      // it's not far enough back to be used in production\n      // https://caniuse.com/mdn-html_elements_input_popovertarget\n      <Popover.Root>\n        <Popover.Trigger asChild>\n          <button\n            ref={ref}\n            className={clsx(\"hds-help-text-button\", className as undefined)}\n            title={title}\n            type=\"button\"\n            {...rest}\n          >\n            {word}\n          </button>\n        </Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Content asChild side={side} align={align}>\n            <Box\n              {...boxProps}\n              className={clsx(\"hds-help-text-box\", boxProps?.className as undefined)}\n            >\n              <Popover.Close asChild>\n                <Box.CloseButton />\n              </Popover.Close>\n              {children}\n            </Box>\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover.Root>\n    );\n  },\n);\nHelpText.displayName = \"HelpText\";\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n  children?: React.ReactNode;\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n","import { Box, BoxCloseButton } from \"./box\";\n\nconst BoxComponent = Box as typeof Box & {\n  CloseButton: typeof BoxCloseButton;\n};\nBoxComponent.CloseButton = BoxCloseButton;\n\nexport { BoxComponent as Box, BoxCloseButton };\n\nexport type * from \"./box\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,cAAyB;AACzB,IAAAA,0BAAqB;AACrB,IAAAC,gBAA2B;;;ACF3B,mBAAkD;AAClD,6BAAqB;AAmEf;AA9BC,IAAM,UAAsD;AAAA,EACjE,CACE,IAWA,QACG;AAZH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,IAhDN,IAwCI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,UAAM,cAAU,0BAAY,MAAM;AAChC,UAAI,aAAa;AACf,cAAM,SAAS,YAAY;AAC3B,YAAI,WAAW,MAAM;AACnB,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF,OAAO;AACL,uBAAe,IAAI;AAAA,MACrB;AAAA,IAEF,GAAG,CAAC,CAAC;AACL,UAAM,SAAS,kCAAc;AAE7B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,WAAW,YAAY,OAAO;AAAA,UAC9B,EAAE,mBAAmB,OAAO;AAAA,UAC5B;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA,sBAAY,4CAAC,iCAAe,SAAS,WAAa,iBAAkB,IAAK;AAAA,UACzE;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,IAAI,cAAc;AAGX,IAAM,qBAAiB;AAAA,EAC5B,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YAxFL,IAwFG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,yBAAyB,SAAsB;AAAA,QAC/D;AAAA,QACA,MAAK;AAAA,SACD;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;;;ACjG7B,IAAM,eAAe;AAGrB,aAAa,cAAc;;;AFoDjB,IAAAC,sBAAA;AATH,IAAM,eAAW;AAAA,EACtB,CAAC,IAAwF,QAAQ;AAAhG,iBAAE,YAAU,WAAW,MAAM,OAAO,OAAO,OAAO,QAAQ,SAAS,SAjDtE,IAiDG,IAAgF,iBAAhF,IAAgF,CAA9E,YAAU,aAAW,QAAM,SAAO,QAAc,SAAiB;AAClE;AAAA;AAAA;AAAA;AAAA;AAAA,MAKE,8CAAS,cAAR,EACC;AAAA,qDAAS,iBAAR,EAAgB,SAAO,MACtB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAW,8BAAK,wBAAwB,SAAsB;AAAA,YAC9D;AAAA,YACA,MAAK;AAAA,aACD,OALL;AAAA,YAOE;AAAA;AAAA,QACH,GACF;AAAA,QACA,6CAAS,gBAAR,EACC,uDAAS,iBAAR,EAAgB,SAAO,MAAC,MAAY,OACnC;AAAA,UAAC;AAAA,2CACK,WADL;AAAA,YAEC,eAAW,8BAAK,qBAAqB,qCAAU,SAAsB;AAAA,YAErE;AAAA,2DAAS,eAAR,EAAc,SAAO,MACpB,uDAAC,aAAI,aAAJ,EAAgB,GACnB;AAAA,cACC;AAAA;AAAA;AAAA,QACH,GACF,GACF;AAAA,SACF;AAAA;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":["import_typed_classname","import_react","import_jsx_runtime"]}

package/dist/help-text/index.mjs

@@ -0,0 +1,11 @@
+import "../chunk-CFAH2LID.mjs";
+import {
+  HelpText
+} from "../chunk-E5O6ID3L.mjs";
+import "../chunk-NMMFIRLZ.mjs";
+import "../chunk-EGXM575K.mjs";
+import "../chunk-R4SQKVDQ.mjs";
+export {
+  HelpText
+};
+//# sourceMappingURL=index.mjs.map

package/dist/help-text/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/index-no-css.d.mts

@@ -63,6 +63,7 @@ export { FooterLinkSections } from './_tsup-dts-rollup';
 export { FooterLinkSection } from './_tsup-dts-rollup';
 export { FooterProps } from './_tsup-dts-rollup';
 export { FooterButtonLinkProps } from './_tsup-dts-rollup';
+export { HelpText } from './_tsup-dts-rollup';
 export { ContainerProps } from './_tsup-dts-rollup';
 export { Container } from './_tsup-dts-rollup';
 export { Grid } from './_tsup-dts-rollup';
@@ -105,6 +106,7 @@ export { SkeletonProps } from './_tsup-dts-rollup';
 export { StepIndicator } from './_tsup-dts-rollup';
 export { StyledHtml } from './_tsup-dts-rollup';
 export { StyledHtmlProps } from './_tsup-dts-rollup';
+export { Table } from './_tsup-dts-rollup';
 export { Tabs } from './_tsup-dts-rollup';
 export { TabsList } from './_tsup-dts-rollup';
 export { TabsTab } from './_tsup-dts-rollup';

package/dist/index-no-css.d.ts

@@ -63,6 +63,7 @@ export { FooterLinkSections } from './_tsup-dts-rollup';
 export { FooterLinkSection } from './_tsup-dts-rollup';
 export { FooterProps } from './_tsup-dts-rollup';
 export { FooterButtonLinkProps } from './_tsup-dts-rollup';
+export { HelpText } from './_tsup-dts-rollup';
 export { ContainerProps } from './_tsup-dts-rollup';
 export { Container } from './_tsup-dts-rollup';
 export { Grid } from './_tsup-dts-rollup';
@@ -105,6 +106,7 @@ export { SkeletonProps } from './_tsup-dts-rollup';
 export { StepIndicator } from './_tsup-dts-rollup';
 export { StyledHtml } from './_tsup-dts-rollup';
 export { StyledHtmlProps } from './_tsup-dts-rollup';
+export { Table } from './_tsup-dts-rollup';
 export { Tabs } from './_tsup-dts-rollup';
 export { TabsList } from './_tsup-dts-rollup';
 export { TabsTab } from './_tsup-dts-rollup';