@trilogy-ds/react 0.0.4-esm-cjs → 0.0.5-esm-cjs

package/lib/chunk-W2QHSUSX.mjs

@@ -0,0 +1,62 @@
+import {
+  getAlignClassName
+} from "./chunk-LCCPZVJA.mjs";
+import {
+  getJustifiedClassName
+} from "./chunk-RBMXTQBU.mjs";
+import {
+  has,
+  is
+} from "./chunk-HLQ4FCCM.mjs";
+import {
+  hashClass
+} from "./chunk-XFWJ47MX.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-5VN6OIEF.mjs";
+
+// components/columns/Columns.tsx
+import clsx from "clsx";
+import React from "react";
+var Columns = React.forwardRef(
+  ({
+    className,
+    id,
+    multiline,
+    scrollable,
+    mobile,
+    gap,
+    fullBleed,
+    marginless,
+    align,
+    verticalAlign,
+    fullheight,
+    ...others
+  }, ref) => {
+    const { styled } = useTrilogyContext();
+    const classes = hashClass(
+      styled,
+      clsx(
+        "columns",
+        multiline && is("multiline"),
+        fullBleed && is("fullbleed"),
+        scrollable && is("scrollable"),
+        gap && has(`gap-${gap}`),
+        typeof gap !== "undefined" && gap === 0 && is("gapless"),
+        mobile && is("mobile"),
+        align && is(getJustifiedClassName(align)),
+        verticalAlign && is(getAlignClassName(verticalAlign)),
+        marginless && is(`marginless`),
+        fullheight && is("fullheight"),
+        className
+      )
+    );
+    return /* @__PURE__ */ React.createElement("div", { ref, id, className: classes, ...others });
+  }
+);
+Columns.displayName = "Columns" /* Columns */;
+var Columns_default = Columns;
+
+export {
+  Columns_default
+};

package/lib/chunk-WCM6IYWC.mjs

@@ -0,0 +1,21 @@
+import {
+  hashClass
+} from "./chunk-XFWJ47MX.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-5VN6OIEF.mjs";
+
+// components/table/td/TableTd.tsx
+import * as React from "react";
+import clsx from "clsx";
+var TableTd = React.forwardRef(({ className, id, rowSpan, colSpan, ...others }, ref) => {
+  const { styled } = useTrilogyContext();
+  const classes = hashClass(styled, clsx(className));
+  return /* @__PURE__ */ React.createElement("td", { ref, id, className: classes, rowSpan, colSpan, ...others });
+});
+TableTd.displayName = "TableTd" /* TableTd */;
+var TableTd_default = TableTd;
+
+export {
+  TableTd_default
+};

package/lib/chunk-WGGJ72CD.mjs

@@ -0,0 +1,51 @@
+import {
+  getBackgroundClassName
+} from "./chunk-CNJHYNT2.mjs";
+import {
+  has,
+  is
+} from "./chunk-HLQ4FCCM.mjs";
+import {
+  hashClass
+} from "./chunk-XFWJ47MX.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-5VN6OIEF.mjs";
+
+// components/section/Section.tsx
+import clsx from "clsx";
+import React from "react";
+var Section = React.forwardRef(
+  ({ className, id, skeleton, backgroundColor, backgroundSrc, inverted, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    const _className = hashClass(
+      styled,
+      clsx(
+        "section",
+        className,
+        backgroundColor && has(getBackgroundClassName(backgroundColor)),
+        backgroundSrc && has("background"),
+        inverted && is("inverted"),
+        skeleton && is("loading")
+      )
+    );
+    return /* @__PURE__ */ React.createElement(
+      "section",
+      {
+        ref,
+        id,
+        ...backgroundSrc && {
+          style: { backgroundImage: `url(${backgroundSrc})` }
+        },
+        className: _className,
+        ...others
+      }
+    );
+  }
+);
+Section.displayName = "Section" /* Section */;
+var Section_default = Section;
+
+export {
+  Section_default
+};

package/lib/chunk-WTDZ5TPD.mjs

@@ -0,0 +1,32 @@
+import {
+  hashClass
+} from "./chunk-XFWJ47MX.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-5VN6OIEF.mjs";
+
+// components/accordion/item/header/AccordionHeader.tsx
+import clsx from "clsx";
+import * as React from "react";
+var AccordionHeader = React.forwardRef(
+  ({ children, className, id, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    return /* @__PURE__ */ React.createElement(
+      "summary",
+      {
+        ref,
+        id,
+        className: hashClass(styled, clsx("accordion-header", className)),
+        role: "button",
+        ...others
+      },
+      children
+    );
+  }
+);
+AccordionHeader.displayName = "AccordionHeader" /* AccordionHeader */;
+var AccordionHeader_default = AccordionHeader;
+
+export {
+  AccordionHeader_default
+};

package/lib/chunk-WTNLKNGA.mjs

@@ -0,0 +1,24 @@
+import {
+  is
+} from "./chunk-HLQ4FCCM.mjs";
+import {
+  hashClass
+} from "./chunk-XFWJ47MX.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-5VN6OIEF.mjs";
+
+// components/timeline/Timeline.tsx
+import clsx from "clsx";
+import * as React from "react";
+var Timeline = React.forwardRef(({ className, id, horizontal, ...others }, ref) => {
+  const { styled } = useTrilogyContext();
+  const classes = hashClass(styled, clsx("timeline", horizontal && is("horizontal"), className));
+  return /* @__PURE__ */ React.createElement("div", { ref, id, className: classes, ...others });
+});
+Timeline.displayName = "Timeline" /* Timeline */;
+var Timeline_default = Timeline;
+
+export {
+  Timeline_default
+};

package/lib/chunk-WTTAI2XM.mjs

@@ -0,0 +1,96 @@
+import {
+  getVariantClassName
+} from "./chunk-RKRETAZE.mjs";
+import {
+  getStatusClassName
+} from "./chunk-4VQXIGA4.mjs";
+import {
+  Icon_default
+} from "./chunk-KWQHZ3AX.mjs";
+import {
+  has,
+  is
+} from "./chunk-HLQ4FCCM.mjs";
+import {
+  hashClass
+} from "./chunk-XFWJ47MX.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-5VN6OIEF.mjs";
+
+// components/badge/Badge.tsx
+import clsx from "clsx";
+import * as React from "react";
+var Badge = React.forwardRef(
+  ({ className, children, id, label, inverted, onClick, variant, position, status, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    const classes = hashClass(
+      styled,
+      clsx(
+        "badge",
+        inverted && is("inverted"),
+        variant && has(`background-${getVariantClassName(variant) || getStatusClassName(variant)}`),
+        position && is(position),
+        className
+      )
+    );
+    let iconName = null;
+    let iconColor = null;
+    switch (status) {
+      case "SUCCESS" /* SUCCESS */:
+        iconName = "tri-check-circle" /* CHECK_CIRCLE */;
+        iconColor = "SUCCESS" /* SUCCESS */;
+        break;
+      case "WARNING" /* WARNING */:
+        iconName = "tri-exclamation-circle" /* EXCLAMATION_CIRCLE */;
+        iconColor = "WARNING" /* WARNING */;
+        break;
+      case "ERROR" /* ERROR */:
+        iconName = "tri-times" /* TIMES_CIRCLE */;
+        iconColor = "ERROR" /* ERROR */;
+        break;
+      case "INFO" /* INFO */:
+        iconName = "tri-infos-circle" /* INFOS_CIRCLE */;
+        iconColor = "INFO" /* INFO */;
+        break;
+      default:
+        break;
+    }
+    const simpleBadge = status && iconName && iconColor ? /* @__PURE__ */ React.createElement(
+      Icon_default,
+      {
+        ref,
+        name: iconName,
+        className: clsx(position && is(position), "badge-icon"),
+        circled: true,
+        backgroundColor: "WHITE" /* BACKGROUND */,
+        color: iconColor,
+        id,
+        ...others
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        ref,
+        id,
+        className: classes,
+        onClick: (e) => {
+          onClick == null ? void 0 : onClick(e);
+          e.stopPropagation();
+        },
+        ...others
+      },
+      label
+    );
+    if (children) {
+      return /* @__PURE__ */ React.createElement("span", { className: "badge-container" }, children, simpleBadge);
+    }
+    return simpleBadge;
+  }
+);
+Badge.displayName = "Badge" /* Badge */;
+var Badge_default = Badge;
+
+export {
+  Badge_default
+};

package/lib/chunk-X4TKMQSB.mjs

@@ -0,0 +1,133 @@
+import {
+  Title_default
+} from "./chunk-UPTZJ3CI.mjs";
+import {
+  is
+} from "./chunk-HLQ4FCCM.mjs";
+import {
+  hashClass
+} from "./chunk-XFWJ47MX.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-5VN6OIEF.mjs";
+
+// components/modal/Modal.tsx
+import translation from "@trilogy-ds/locales/lib/modal";
+import clsx from "clsx";
+import React, { useCallback, useEffect, useId, useRef, useState } from "react";
+var Modal = React.forwardRef(
+  ({
+    children,
+    className,
+    id,
+    accessibilityLabel = "Close",
+    active,
+    onClose,
+    unClosable,
+    panel,
+    size,
+    hideCloseButton = false,
+    trigger,
+    title,
+    ...others
+  }, ref) => {
+    const modalContentRef = useRef(null);
+    const [display, setDisplay] = useState(active || false);
+    const { styled } = useTrilogyContext();
+    const refBtnModal = useRef(null);
+    const refModal = useRef(null);
+    const modalGeneratedId = useId();
+    const focusableElementsRef = useRef(null);
+    const currentFocusIndexRef = useRef(0);
+    const handleClose = React.useCallback(
+      (onCloseFunc, e) => {
+        if (!unClosable) {
+          setDisplay(false);
+          refBtnModal.current && refBtnModal.current.focus();
+          if (onCloseFunc) onCloseFunc(e);
+        }
+      },
+      [refBtnModal.current]
+    );
+    const classes = hashClass(
+      styled,
+      clsx("modal", display && is("active"), size && is(size), panel && is("panel"), className)
+    );
+    const onKeyDown = useCallback(
+      (e) => {
+        if (display && e.key === "Tab") {
+          e.preventDefault();
+          if (focusableElementsRef.current) {
+            const currentIndex = currentFocusIndexRef.current;
+            const offset = e.shiftKey ? -1 : 1;
+            const nextIndex = (currentIndex + offset + focusableElementsRef.current.length) % focusableElementsRef.current.length;
+            currentFocusIndexRef.current = nextIndex;
+            focusableElementsRef.current[nextIndex].focus();
+          }
+        }
+        if (!unClosable && display && e.key === "Escape") {
+          e.preventDefault();
+          setDisplay(false);
+          refBtnModal.current && refBtnModal.current.focus();
+          currentFocusIndexRef.current = 0;
+          onClose && onClose();
+        }
+      },
+      [display, focusableElementsRef, currentFocusIndexRef, refBtnModal, onClose]
+    );
+    useEffect(() => {
+      setDisplay((prev) => {
+        if (prev) {
+          refBtnModal.current && refBtnModal.current.focus();
+          currentFocusIndexRef.current = 0;
+        }
+        return active || false;
+      });
+    }, [active, currentFocusIndexRef, refBtnModal]);
+    useEffect(() => {
+      !hideCloseButton && display && focusableElementsRef.current && focusableElementsRef.current[0].focus();
+    }, [hideCloseButton, display, focusableElementsRef]);
+    useEffect(() => {
+      if (modalContentRef.current) {
+        focusableElementsRef.current = modalContentRef.current.querySelectorAll(
+          'button:not(:disabled), input:not(:disabled), a, select:not(:disabled), textarea:not(:disabled), details:not([aria-disabled="true"]) > summary'
+        );
+      }
+    }, [modalContentRef, focusableElementsRef]);
+    return /* @__PURE__ */ React.createElement("div", { onKeyDown, ref: refModal }, trigger && React.cloneElement(trigger, { ref: refBtnModal, "aria-haspopup": "dialog" }), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        id,
+        className: classes,
+        role: "dialog",
+        "aria-labelledby": modalGeneratedId,
+        "aria-modal": true,
+        onClick: (e) => {
+          var _a;
+          if (!((_a = modalContentRef == null ? void 0 : modalContentRef.current) == null ? void 0 : _a.contains(e.target))) {
+            handleClose(onClose, e);
+          }
+        },
+        ...others
+      },
+      /* @__PURE__ */ React.createElement("div", { ref: modalContentRef, className: hashClass(styled, clsx("modal-content")) }, /* @__PURE__ */ React.createElement("div", { className: hashClass(styled, clsx("modal-header")) }, !hideCloseButton && /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            handleClose(onClose, e);
+          },
+          className: hashClass(styled, clsx("modal-close", is("large"))),
+          type: "button" /* BUTTON */
+        },
+        /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("sr-only")) }, translation.accessibilityLabelButtonClose)
+      ), /* @__PURE__ */ React.createElement(Title_default, { id: modalGeneratedId, level: 3 /* THREE */, markup: "h1" /* H1 */ }, title)), children && children)
+    ));
+  }
+);
+Modal.displayName = "Modal" /* Modal */;
+var Modal_default = Modal;
+
+export {
+  Modal_default
+};

package/lib/chunk-XBBQRJAM.mjs

@@ -0,0 +1,10 @@
+import {
+  BoxHeader_default
+} from "./chunk-PD7N2H7V.mjs";
+
+// components/box/header/index.ts
+var header_default = BoxHeader_default;
+
+export {
+  header_default
+};

package/lib/chunk-XTMU2OFV.mjs

@@ -0,0 +1,55 @@
+import {
+  hashClass
+} from "./chunk-XFWJ47MX.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-5VN6OIEF.mjs";
+
+// components/accordion/item/AccordionItem.tsx
+import clsx from "clsx";
+import React from "react";
+var AccordionItem = React.forwardRef(
+  ({ open, className, children, id = React.useId(), onClick, disabled, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    const classes = hashClass(styled, clsx("accordion-item", className));
+    const ariaProps = {};
+    if (disabled) {
+      ariaProps["tabIndex"] = -1;
+      ariaProps["aria-disabled"] = true;
+    }
+    return /* @__PURE__ */ React.createElement(
+      "details",
+      {
+        open,
+        ...ariaProps,
+        "data-testid": id,
+        className: classes,
+        ref,
+        id,
+        ...others,
+        onClick: (e) => {
+          if (disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+          }
+          if (onClick && !disabled) {
+            onClick(e);
+          }
+        },
+        onKeyDown: (e) => {
+          if (disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        }
+      },
+      children
+    );
+  }
+);
+AccordionItem.displayName = "AccordionItem" /* AccordionItem */;
+var AccordionItem_default = AccordionItem;
+
+export {
+  AccordionItem_default
+};

package/lib/chunk-XWROA47B.mjs

@@ -0,0 +1,10 @@
+import {
+  TableTh_default
+} from "./chunk-6RM6FMD6.mjs";
+
+// components/table/th/index.ts
+var th_default = TableTh_default;
+
+export {
+  th_default
+};

package/lib/chunk-XWUKMXWZ.mjs

@@ -0,0 +1,40 @@
+import {
+  getBackgroundClassName
+} from "./chunk-CNJHYNT2.mjs";
+import {
+  has
+} from "./chunk-HLQ4FCCM.mjs";
+import {
+  hashClass
+} from "./chunk-XFWJ47MX.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-5VN6OIEF.mjs";
+
+// components/box/footer/BoxFooter.tsx
+import clsx from "clsx";
+import * as React from "react";
+var BoxFooter = React.forwardRef(
+  ({ className, children, backgroundColor, id, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        id,
+        className: hashClass(
+          styled,
+          clsx("box-footer", backgroundColor && has(getBackgroundClassName(backgroundColor)), className)
+        ),
+        ...others
+      },
+      children
+    );
+  }
+);
+BoxFooter.displayName = "BoxFooter" /* BoxFooter */;
+var BoxFooter_default = BoxFooter;
+
+export {
+  BoxFooter_default
+};

package/lib/chunk-YHEULX2P.mjs

@@ -0,0 +1,10 @@
+import {
+  BoxItem_default
+} from "./chunk-ENRRADYB.mjs";
+
+// components/box/item/index.ts
+var item_default = BoxItem_default;
+
+export {
+  item_default
+};