@trilogy-ds/react 0.0.5-beta-v4 → 0.0.5-esm-cjs

package/lib/chunk-KXT7CAOK.mjs

@@ -0,0 +1,11 @@
+// components/styleComponent/mangled/styleComponentMangled.tsx
+import "@trilogy-ds/styles/dist/default/trilogy-mangled.css";
+import React from "react";
+var StyleComponentMangled = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+};
+var styleComponentMangled_default = StyleComponentMangled;
+
+export {
+  styleComponentMangled_default
+};

package/lib/chunk-KZBJENQE.mjs

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

package/lib/chunk-LCCPZVJA.mjs

@@ -0,0 +1,54 @@
+// objects/facets/Alignable/index.ts
+var Alignable = /* @__PURE__ */ ((Alignable2) => {
+  Alignable2["ALIGNED_CENTER"] = "ALIGNED_CENTER";
+  Alignable2["ALIGNED_START"] = "ALIGNED_START";
+  Alignable2["ALIGNED_END"] = "ALIGNED_END";
+  Alignable2["ALIGNED_STRETCH"] = "ALIGNED_STRETCH";
+  return Alignable2;
+})(Alignable || {});
+var Align = /* @__PURE__ */ ((Align2) => {
+  Align2["CENTER"] = "CENTER";
+  Align2["START"] = "START";
+  Align2["END"] = "END";
+  Align2["STRETCH"] = "STRETCH";
+  return Align2;
+})(Align || {});
+var getAlignClassName = (alignType) => {
+  switch (alignType) {
+    case "ALIGNED_CENTER":
+      return "aligned-center";
+    case "CENTER":
+      return "aligned-center";
+    case "ALIGNED_START":
+      return "aligned-start";
+    case "START":
+      return "aligned-start";
+    case "ALIGNED_END":
+      return "aligned-end";
+    case "END":
+      return "aligned-end";
+    case "STRETCH":
+      return "aligned-stretch";
+    default:
+      return "aligned-start";
+  }
+};
+var getAlignStyle = (alignType) => {
+  switch (alignType) {
+    case "ALIGNED_CENTER":
+      return "center";
+    case "ALIGNED_START":
+      return "flex-start";
+    case "ALIGNED_END":
+      return "flex-end";
+    default:
+      return "flex-start";
+  }
+};
+
+export {
+  Alignable,
+  Align,
+  getAlignClassName,
+  getAlignStyle
+};

package/lib/chunk-LCOSP37I.mjs

@@ -0,0 +1,46 @@
+import {
+  TrilogyThemeContext
+} from "./chunk-SEWWK5HV.mjs";
+
+// objects/Typography/TypographyBold/index.tsx
+import { useContext } from "react";
+var TypographyBold = /* @__PURE__ */ ((TypographyBold2) => {
+  TypographyBold2["TEXT_WEIGHT_NORMAL"] = "has-text-weight-normal";
+  TypographyBold2["TEXT_WEIGHT_MEDIUM"] = "has-text-weight-medium";
+  TypographyBold2["TEXT_WEIGHT_SEMIBOLD"] = "has-text-weight-semibold";
+  TypographyBold2["TEXT_WEIGHT_BOLD"] = "has-text-weight-bold";
+  return TypographyBold2;
+})(TypographyBold || {});
+var getTypographyBoldClassName = (typographyBoldType) => {
+  switch (typographyBoldType) {
+    case "TEXT_WEIGHT_NORMAL":
+      return "has-text-weight-normal";
+    case "TEXT_WEIGHT_MEDIUM":
+      return "has-text-weight-medium";
+    case "TEXT_WEIGHT_SEMIBOLD":
+      return "has-text-weight-semibold";
+    default:
+      return null;
+  }
+};
+var getTypographyBoldStyle = (typo) => {
+  var _a, _b, _c, _d;
+  const { theme } = useContext(TrilogyThemeContext);
+  const currentTypo = Array.isArray(typo) ? typo : [typo];
+  switch (true) {
+    case (typo && currentTypo.includes("has-text-weight-medium" /* TEXT_WEIGHT_MEDIUM */)):
+      return ((_a = theme == null ? void 0 : theme.fontFamily) == null ? void 0 : _a.medium) || "poppins-medium";
+    case (typo && currentTypo.includes("has-text-weight-semibold" /* TEXT_WEIGHT_SEMIBOLD */)):
+      return ((_b = theme == null ? void 0 : theme.fontFamily) == null ? void 0 : _b.bold) || "poppins-semibold";
+    case (typo && currentTypo.includes("has-text-weight-bold" /* TEXT_WEIGHT_BOLD */)):
+      return ((_c = theme == null ? void 0 : theme.fontFamily) == null ? void 0 : _c.speak) || "poppins-semibold";
+    default:
+      return ((_d = theme == null ? void 0 : theme.fontFamily) == null ? void 0 : _d.regular) || "poppins-regular";
+  }
+};
+
+export {
+  TypographyBold,
+  getTypographyBoldClassName,
+  getTypographyBoldStyle
+};

package/lib/chunk-LHGRXMTD.mjs

@@ -0,0 +1,71 @@
+import {
+  getAlignClassName
+} from "./chunk-LCCPZVJA.mjs";
+import {
+  is
+} from "./chunk-HLQ4FCCM.mjs";
+import {
+  hashClass
+} from "./chunk-XFWJ47MX.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-5VN6OIEF.mjs";
+
+// components/columns/column/Column.tsx
+import clsx from "clsx";
+import React from "react";
+var Column = React.forwardRef(
+  ({
+    className,
+    id,
+    size,
+    mobileSize,
+    tabletSize,
+    touchSize,
+    desktopSize,
+    widescreenSize,
+    fullhdSize,
+    offset,
+    mobileOffset,
+    tabletOffset,
+    touchOffset,
+    desktopOffset,
+    widescreenOffset,
+    fullhdOffset,
+    narrow,
+    verticalAlign,
+    ...others
+  }, ref) => {
+    const { styled } = useTrilogyContext();
+    const classes = hashClass(
+      styled,
+      clsx(
+        "column",
+        size && is(`${size}`),
+        mobileSize && is(`${mobileSize}-mobile`),
+        tabletSize && is(`${tabletSize}-tablet`),
+        touchSize && is(`${touchSize}-tablet`),
+        desktopSize && is(`${desktopSize}-desktop`),
+        widescreenSize && is(`${widescreenSize}-widescreen`),
+        fullhdSize && is(`${fullhdSize}-fullhd`),
+        offset && is(`offset-${offset}`),
+        mobileOffset && is(`offset-${mobileOffset}-mobile`),
+        tabletOffset && is(`offset-${tabletOffset}-tablet`),
+        touchOffset && is(`offset-${touchOffset}-tablet`),
+        desktopOffset && is(`offset-${desktopOffset}-desktop`),
+        widescreenOffset && is(`offset-${widescreenOffset}-widescreen`),
+        fullhdOffset && is(`offset-${fullhdOffset}-fullhd`),
+        narrow && is("narrow"),
+        verticalAlign && is(getAlignClassName(verticalAlign)),
+        className
+      )
+    );
+    return /* @__PURE__ */ React.createElement("div", { ref, id, className: classes, ...others });
+  }
+);
+Column.displayName = "Column" /* Column */;
+var Column_default = Column;
+
+export {
+  Column_default
+};

package/lib/chunk-LKRCOARV.mjs

@@ -0,0 +1,10 @@
+import {
+  ProgressRadial_default
+} from "./chunk-AKUHXWCA.mjs";
+
+// components/progress/radial/index.ts
+var radial_default = ProgressRadial_default;
+
+export {
+  radial_default
+};

package/lib/chunk-LVUB73GT.mjs

@@ -0,0 +1,25 @@
+// components/view/ViewProps.ts
+var ViewMarkup = /* @__PURE__ */ ((ViewMarkup2) => {
+  ViewMarkup2["BUTTON"] = "button";
+  ViewMarkup2["INPUT"] = "input";
+  ViewMarkup2["A"] = "a";
+  ViewMarkup2["SPAN"] = "span";
+  ViewMarkup2["DIV"] = "div";
+  ViewMarkup2["P"] = "p";
+  ViewMarkup2["UL"] = "ul";
+  ViewMarkup2["LI"] = "li";
+  ViewMarkup2["LABEL"] = "label";
+  ViewMarkup2["MAIN"] = "main";
+  ViewMarkup2["SUMMARY"] = "summary";
+  ViewMarkup2["DETAILS"] = "details";
+  ViewMarkup2["OL"] = "ol";
+  ViewMarkup2["DL"] = "dl";
+  ViewMarkup2["DT"] = "dt";
+  ViewMarkup2["DD"] = "dd";
+  ViewMarkup2["DIALOG"] = "dialog";
+  return ViewMarkup2;
+})(ViewMarkup || {});
+
+export {
+  ViewMarkup
+};

package/lib/chunk-LXERI22G.mjs

@@ -0,0 +1,10 @@
+import {
+  SelectOption_default
+} from "./chunk-NAPM7RV5.mjs";
+
+// components/select/option/index.ts
+var option_default = SelectOption_default;
+
+export {
+  option_default
+};

package/lib/chunk-M3G5NNL6.mjs

@@ -0,0 +1,38 @@
+import {
+  getBackgroundClassName
+} from "./chunk-CNJHYNT2.mjs";
+import {
+  getColorClassName
+} from "./chunk-EJ2APB7I.mjs";
+import {
+  has,
+  is
+} from "./chunk-HLQ4FCCM.mjs";
+import {
+  hashClass
+} from "./chunk-XFWJ47MX.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-5VN6OIEF.mjs";
+
+// components/table/body/TableBody.tsx
+import * as React from "react";
+import clsx from "clsx";
+var TableBody = React.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
+  const { styled } = useTrilogyContext();
+  const classes = hashClass(
+    styled,
+    clsx(
+      className,
+      backgroundColor && has(getBackgroundClassName(backgroundColor)),
+      color && is(getColorClassName(color))
+    )
+  );
+  return /* @__PURE__ */ React.createElement("tbody", { ref, id, className: classes, ...others });
+});
+TableBody.displayName = "TableBody" /* TableBody */;
+var TableBody_default = TableBody;
+
+export {
+  TableBody_default
+};

package/lib/chunk-M3ZW34AK.mjs

@@ -0,0 +1,146 @@
+import {
+  SelectContext
+} from "./chunk-ELV7XGSB.mjs";
+import {
+  Input_default
+} from "./chunk-ZEPZOL74.mjs";
+import {
+  hashClass
+} from "./chunk-XFWJ47MX.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-5VN6OIEF.mjs";
+
+// components/select/web/SelectDynamic.tsx
+import clsx from "clsx";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+var OPTION_SIZE = 48;
+var SelectDynamic = React.forwardRef(
+  ({
+    onChange,
+    disabled,
+    onFocus,
+    onBlur,
+    children,
+    selected,
+    name,
+    id,
+    label,
+    iconName,
+    multiple,
+    className,
+    status,
+    placeholder,
+    required,
+    custom,
+    help,
+    sample,
+    ...others
+  }, ref) => {
+    const { styled } = useTrilogyContext();
+    const { setIsVisibleOptions, isVisibleOptions, selectedOptionValues } = useContext(SelectContext);
+    const containerRef = useRef(null);
+    const [openUpward, setOpenUpward] = useState(false);
+    const optionsListSize = useRef(0);
+    const [dropdownStyles, setDropdownStyles] = useState({});
+    const selectClasses = hashClass(styled, clsx("select", className));
+    const optionsClasses = hashClass(styled, clsx("select-options", openUpward && "select-options-top"));
+    const portalClasses = hashClass(styled, "select-trilogy_modal_open");
+    const onClickInput = () => {
+      if (containerRef.current && optionsListSize.current) {
+        const { top, bottom } = containerRef.current.getBoundingClientRect();
+        const windowHeight = window.innerHeight;
+        const spaceBelow = windowHeight - bottom;
+        const padding = 10;
+        const maxHeightBelow = spaceBelow - padding;
+        const maxHeightAbove = top - padding;
+        const openUpward2 = maxHeightBelow < optionsListSize.current && maxHeightAbove > maxHeightBelow;
+        setOpenUpward(openUpward2);
+        setDropdownStyles({
+          maxHeight: openUpward2 ? `${maxHeightAbove}px` : `${maxHeightBelow}px`,
+          overflowY: "auto"
+        });
+      }
+      setIsVisibleOptions((prev) => !prev);
+    };
+    const onCloseOptions = () => setIsVisibleOptions(false);
+    const onKeyPressInput = (keyCode) => {
+      setIsVisibleOptions((prev) => {
+        if (keyCode === 27) return false;
+        if (keyCode === 13) return !prev;
+        return prev;
+      });
+    };
+    const options = useMemo(() => {
+      var _a;
+      return (_a = React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return false;
+        return {
+          label: child.props.children || child.props.label,
+          value: child.props.value
+        };
+      })) == null ? void 0 : _a.filter((option) => option);
+    }, []);
+    const labelsSelected = useMemo(() => {
+      return selectedOptionValues.map((selectedOption) => {
+        const elm = options == null ? void 0 : options.find((opt) => opt.value === selectedOption);
+        return elm == null ? void 0 : elm.label;
+      });
+    }, [selectedOptionValues, options]);
+    useEffect(() => {
+      const childrenCount = React.Children.count(children);
+      if (childrenCount > 0) {
+        optionsListSize.current = childrenCount * OPTION_SIZE;
+      }
+    }, [children]);
+    return /* @__PURE__ */ React.createElement("div", { className: selectClasses, ref: containerRef, ...others }, /* @__PURE__ */ React.createElement(
+      Input_default,
+      {
+        sample,
+        help,
+        required,
+        status,
+        ref,
+        value: labelsSelected == null ? void 0 : labelsSelected.join(", "),
+        name,
+        disabled,
+        label,
+        placeholder,
+        onFocus,
+        iconNameLeft: iconName,
+        onBlur,
+        onClick: onClickInput,
+        className: isVisibleOptions ? "focus" : void 0,
+        onKeyPress: (e) => {
+          e.preventDefault();
+        },
+        onKeyUp: (e) => {
+          e.preventDefault();
+          onKeyPressInput(e.inputKeyCode);
+        },
+        ...{ readOnly: true, id, role: "combobox" }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "ul",
+      {
+        role: "listbox",
+        className: optionsClasses,
+        style: {
+          display: isVisibleOptions ? "block" : "none",
+          ...dropdownStyles
+        }
+      },
+      children
+    ), isVisibleOptions && ReactDOM.createPortal(
+      /* @__PURE__ */ React.createElement("div", { role: "presentation", className: portalClasses, onClick: onCloseOptions }),
+      document.body
+    ));
+  }
+);
+SelectDynamic.displayName = "Select" /* Select */;
+var SelectDynamic_default = SelectDynamic;
+
+export {
+  SelectDynamic_default
+};

package/lib/chunk-MIIK56FU.mjs

@@ -0,0 +1,10 @@
+import {
+  BoxFooter_default
+} from "./chunk-XWUKMXWZ.mjs";
+
+// components/box/footer/index.ts
+var footer_default = BoxFooter_default;
+
+export {
+  footer_default
+};

package/lib/chunk-MKGYBOHP.mjs

@@ -0,0 +1,33 @@
+// components/modal/ModalEnum.ts
+var ModalMarkup = /* @__PURE__ */ ((ModalMarkup2) => {
+  ModalMarkup2["H1"] = "h1";
+  ModalMarkup2["H2"] = "h2";
+  ModalMarkup2["H3"] = "h3";
+  ModalMarkup2["H4"] = "h4";
+  ModalMarkup2["H5"] = "h5";
+  ModalMarkup2["H6"] = "h6";
+  ModalMarkup2["P"] = "p";
+  ModalMarkup2["SPAN"] = "span";
+  ModalMarkup2["DIV"] = "div";
+  ModalMarkup2["BUTTON"] = "button";
+  ModalMarkup2["A"] = "a";
+  return ModalMarkup2;
+})(ModalMarkup || {});
+var ModalCtaMarkup = /* @__PURE__ */ ((ModalCtaMarkup2) => {
+  ModalCtaMarkup2["BUTTON"] = "button";
+  ModalCtaMarkup2["DIV"] = "div";
+  ModalCtaMarkup2["A"] = "a";
+  return ModalCtaMarkup2;
+})(ModalCtaMarkup || {});
+var ModalSize = /* @__PURE__ */ ((ModalSize2) => {
+  ModalSize2["SMALL"] = "small";
+  ModalSize2["MEDIUM"] = "medium";
+  ModalSize2["LARGE"] = "large";
+  return ModalSize2;
+})(ModalSize || {});
+
+export {
+  ModalMarkup,
+  ModalCtaMarkup,
+  ModalSize
+};

package/lib/chunk-MRE6UV7B.mjs

@@ -0,0 +1,52 @@
+import {
+  isRequiredChild
+} from "./chunk-YRF7YX6X.mjs";
+import {
+  getJustifiedClassName
+} from "./chunk-RBMXTQBU.mjs";
+import {
+  is
+} from "./chunk-HLQ4FCCM.mjs";
+import {
+  hashClass
+} from "./chunk-XFWJ47MX.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-5VN6OIEF.mjs";
+
+// components/radio/list/RadioList.tsx
+import clsx from "clsx";
+import * as React from "react";
+var RadioList = React.forwardRef(
+  ({ className, id, align, horizontalMobile, verticalDesktop, accessibilityLabelledBy, children, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        id,
+        role: "radiogroup",
+        "aria-labelledby": accessibilityLabelledBy,
+        "aria-required": isRequiredChild(children) ? "true" : void 0,
+        className: hashClass(
+          styled,
+          clsx(
+            "radios",
+            className,
+            align && is(getJustifiedClassName(align)),
+            horizontalMobile && is("horizontal-mobile"),
+            verticalDesktop && is("vertical-desktop")
+          )
+        ),
+        ...others
+      },
+      children
+    );
+  }
+);
+RadioList.displayName = "RadioList" /* RadioList */;
+var RadioList_default = RadioList;
+
+export {
+  RadioList_default
+};

package/lib/chunk-MUFBFVMR.mjs

@@ -0,0 +1,41 @@
+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/divider/Divider.tsx
+import clsx from "clsx";
+import React from "react";
+var Divider = React.forwardRef(
+  ({ className, id, unboxed, content, marginless, iconName, inverted, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    const classes = hashClass(
+      styled,
+      clsx(
+        "divider",
+        unboxed && is("unboxed"),
+        marginless && is("marginless"),
+        className,
+        inverted && is("inverted"),
+        iconName && has("icon")
+      )
+    );
+    const contentClasses = hashClass(styled, clsx("divider-content"));
+    return /* @__PURE__ */ React.createElement("div", { ref, id, "data-testid": "separator", className: classes, ...others }, /* @__PURE__ */ React.createElement("p", { className: contentClasses }, iconName && !content && /* @__PURE__ */ React.createElement(Icon_default, { name: iconName, size: "medium" /* MEDIUM */ }), content && content));
+  }
+);
+Divider.displayName = "Divider" /* Divider */;
+var Divider_default = Divider;
+
+export {
+  Divider_default
+};

package/lib/chunk-NAPM7RV5.mjs

@@ -0,0 +1,84 @@
+import {
+  SelectContext
+} from "./chunk-ELV7XGSB.mjs";
+import {
+  Icon_default
+} from "./chunk-KWQHZ3AX.mjs";
+import {
+  is
+} from "./chunk-HLQ4FCCM.mjs";
+import {
+  hashClass
+} from "./chunk-XFWJ47MX.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-5VN6OIEF.mjs";
+
+// components/select/option/SelectOption.tsx
+import clsx from "clsx";
+import * as React from "react";
+var SelectOption = React.forwardRef(
+  ({ id, className, value = "", disabled, children, onClick, label, iconName, testId, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    const { custom, selectedOptionValues, setSelectedOptionValues, multiple, setIsVisibleOptions, onChange } = React.useContext(SelectContext);
+    const isChecked = selectedOptionValues.includes(value);
+    const selectClasses = hashClass(styled, clsx("option", isChecked && "focus", disabled && is("disabled"), className));
+    const handleClickOption = () => {
+      setSelectedOptionValues((prev) => {
+        const isInclude = prev.includes(value);
+        const newOptionsSelected = !multiple && isInclude ? [] : !multiple && !isInclude ? [value] : isInclude ? prev.filter((opt) => opt !== value) : [...prev, value];
+        if (onChange) {
+          onChange({
+            selectValue: isInclude ? void 0 : value,
+            selectName: isInclude ? void 0 : children || label,
+            selectId: isInclude ? void 0 : id,
+            name: isInclude ? void 0 : children || label,
+            selectedOptions: newOptionsSelected,
+            target: void 0
+          });
+        }
+        return newOptionsSelected;
+      });
+      if (!multiple) setIsVisibleOptions(false);
+    };
+    if (custom || multiple) {
+      return /* @__PURE__ */ React.createElement(
+        "li",
+        {
+          ref,
+          id,
+          className: selectClasses,
+          "data-selected": isChecked,
+          role: "option",
+          "aria-selected": isChecked,
+          "data-value": value,
+          onClick: !disabled ? handleClickOption : void 0,
+          ...others
+        },
+        iconName && /* @__PURE__ */ React.createElement(Icon_default, { name: iconName }),
+        label || children
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      "option",
+      {
+        ref,
+        role: "option",
+        id,
+        value,
+        disabled,
+        "aria-label": label,
+        "data-testid": testId,
+        onClick,
+        ...others
+      },
+      children || label
+    );
+  }
+);
+SelectOption.displayName = "SelectOption" /* SelectOption */;
+var SelectOption_default = SelectOption;
+
+export {
+  SelectOption_default
+};