@trilogy-ds/react 0.0.7-beta-v4 → 0.0.8-esm-cjs

package/lib/chunk-YCOSCIBC.mjs

@@ -0,0 +1,103 @@
+"use client";
+import {
+  Icon_default
+} from "./chunk-Y3J6NXB4.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+
+// components/pagination/Pagination.tsx
+import clsx from "clsx";
+import React, { useEffect, useRef, useState } from "react";
+var Pagination = React.forwardRef(
+  ({ className, id, length, defaultPage = 1, onClick, href, ...others }, ref) => {
+    const [currentPage, setCurrentPage] = useState(defaultPage);
+    const { styled } = useTrilogyContext();
+    const classes = hashClass(styled, clsx("pagination", className));
+    const prevCurrentPage = useRef(currentPage);
+    const pager = React.useMemo(() => {
+      let startPage = 1;
+      let endPage = 5;
+      if (length <= 5) {
+        startPage = 1;
+        endPage = length;
+      } else {
+        if (currentPage <= 3) {
+          startPage = 1;
+          endPage = 4;
+        } else if (currentPage + 3 >= length) {
+          startPage = length - 3;
+          endPage = length;
+        } else {
+          startPage = currentPage - 1;
+          endPage = currentPage + 1;
+        }
+      }
+      const pages = [...Array(endPage + 1 - startPage).keys()].map((i) => startPage + i);
+      return {
+        currentPage,
+        length,
+        endPage,
+        pages
+      };
+    }, [currentPage, length]);
+    useEffect(() => {
+      if (onClick && prevCurrentPage.current !== pager.currentPage) {
+        onClick(pager);
+      }
+      setCurrentPage(pager.currentPage);
+      prevCurrentPage.current = pager.currentPage;
+    }, [pager.currentPage]);
+    useEffect(() => {
+      setCurrentPage(defaultPage);
+    }, [defaultPage]);
+    return /* @__PURE__ */ React.createElement("nav", { ref, id, className: classes, ...others }, /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        className: hashClass(styled, clsx("pagination-previous")),
+        ...currentPage === 1 ? { "aria-disabled": true } : {},
+        onClick: () => {
+          if (currentPage !== 1) {
+            setCurrentPage(currentPage - 1);
+          }
+        },
+        href: href == null ? void 0 : href(currentPage - 1)
+      },
+      /* @__PURE__ */ React.createElement(Icon_default, { name: "tri-arrow-left" /* ARROW_LEFT */ })
+    ), /* @__PURE__ */ React.createElement("ul", { className: hashClass(styled, clsx("pagination-list")) }, !pager.pages.includes(1) && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("pagination-ellipsis")) }, "\u2026")), pager.pages.map((pageNumber) => /* @__PURE__ */ React.createElement("li", { key: pageNumber }, /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        className: hashClass(styled, clsx("pagination-link")),
+        ...currentPage === pageNumber ? { "aria-current": true } : {},
+        "aria-label": `Aller \xE0 la page ${pageNumber}`,
+        onClick: () => {
+          setCurrentPage(pageNumber);
+        },
+        href: href == null ? void 0 : href(pageNumber)
+      },
+      pageNumber
+    ))), !pager.pages.includes(length) && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("pagination-ellipsis")) }, "\u2026"))), /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        className: hashClass(styled, clsx("pagination-next")),
+        ...currentPage === Math.max(length) ? { "aria-disabled": true } : {},
+        onClick: () => {
+          if (currentPage !== Math.max(length)) {
+            setCurrentPage(currentPage + 1);
+          }
+        },
+        href: href == null ? void 0 : href(currentPage + 1)
+      },
+      /* @__PURE__ */ React.createElement(Icon_default, { name: "tri-arrow-right" /* ARROW_RIGHT */ })
+    ));
+  }
+);
+Pagination.displayName = "Pagination" /* Pagination */;
+var Pagination_default = Pagination;
+
+export {
+  Pagination_default
+};

package/lib/chunk-YEEOZ3WL.mjs

@@ -0,0 +1,46 @@
+"use client";
+import {
+  getAlignClassName
+} from "./chunk-HV6TXVFA.mjs";
+import {
+  is
+} from "./chunk-SWVRRUW7.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+
+// components/flex-box/flex-item/FlexItem.tsx
+import clsx from "clsx";
+import React from "react";
+var FlexItem = React.forwardRef(
+  ({ className, id, size, narrow, verticalAlign, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    const isNumber = typeof size === "number";
+    const classes = hashClass(
+      styled,
+      clsx(
+        "flex-item",
+        size && isNumber && is(`${size}`),
+        size && !isNumber && (size == null ? void 0 : size.desktop) && is(`${size.desktop}-desktop`),
+        size && !isNumber && (size == null ? void 0 : size.mobile) && is(`${size.mobile}-mobile`),
+        size && !isNumber && (size == null ? void 0 : size.tablet) && is(`${size.tablet}-tablet`),
+        size && !isNumber && (size == null ? void 0 : size.touch) && is(`${size.touch}-touch`),
+        size && !isNumber && (size == null ? void 0 : size.wideScreen) && is(`${size.wideScreen}-widescreen`),
+        size && !isNumber && (size == null ? void 0 : size.fullHd) && is(`${size.fullHd}-fullhd`),
+        narrow && is("narrow"),
+        verticalAlign && is(getAlignClassName(verticalAlign)),
+        className
+      )
+    );
+    return /* @__PURE__ */ React.createElement("div", { ref, id, className: classes, ...others });
+  }
+);
+FlexItem.displayName = "FlexItem" /* FlexItem */;
+var FlexItem_default = FlexItem;
+
+export {
+  FlexItem_default
+};

package/lib/chunk-YGJ6UOVJ.mjs

@@ -0,0 +1,251 @@
+"use client";
+import {
+  InputGauge_default
+} from "./chunk-ENYSW63F.mjs";
+import {
+  Text_default
+} from "./chunk-GRUJ62D7.mjs";
+import {
+  Icon_default
+} from "./chunk-Y3J6NXB4.mjs";
+import {
+  has,
+  is
+} from "./chunk-SWVRRUW7.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+
+// components/input/Input.tsx
+import translation from "@trilogy-ds/locales/lib/input";
+import clsx from "clsx";
+import React, { useCallback, useEffect, useId, useState } from "react";
+var Input = React.forwardRef(
+  ({
+    forceControl,
+    label,
+    sample,
+    className,
+    id = React.useId(),
+    disabled,
+    onChange,
+    onKeyPress,
+    onKeyUp,
+    onIconClick,
+    onClick,
+    onFocus,
+    onBlur,
+    patternValidator,
+    onMouseEnter,
+    onMouseLeave,
+    name,
+    placeholder,
+    type = "text" /* TEXT */,
+    defaultValue,
+    value,
+    loading,
+    focused,
+    status,
+    help,
+    onStatusChange,
+    customValidator,
+    onSubmit,
+    minLength,
+    maxLength,
+    accessibilityLabel,
+    autoCompleteType,
+    iconNameLeft,
+    iconNameRight,
+    securityGauge,
+    validationRules,
+    required,
+    readOnly,
+    ...others
+  }, ref) => {
+    const { styled } = useTrilogyContext();
+    const idHelp = useId();
+    const idSample = useId();
+    const inputIcon = /* @__PURE__ */ new Map();
+    inputIcon.set("success" /* SUCCESS */, "tri-check-circle" /* CHECK_CIRCLE */);
+    inputIcon.set("warning" /* WARNING */, "tri-exclamation-circle" /* EXCLAMATION_CIRCLE */);
+    inputIcon.set("error" /* ERROR */, "tri-exclamation-circle" /* EXCLAMATION_CIRCLE */);
+    const [_value, setValue] = useState(defaultValue != null ? defaultValue : "");
+    const [isFocused, setIsFocused] = useState(focused != null ? focused : false);
+    const [isDirty, setIsDirty] = useState(false);
+    const [isTouched, setIsTouched] = useState(false);
+    const [localStatus, setLocalStatus] = useState(status || "default" /* DEFAULT */);
+    const [inputType, setInputType] = useState(type);
+    const [isShowPwd, setIsShowPwd] = useState(false);
+    const helpClasses = clsx("help", localStatus && is(localStatus));
+    const loader = hashClass(styled, clsx(is("searching")));
+    const inputLabelClasses = hashClass(styled, "input-label");
+    const iconTimesClasses = hashClass(styled, clsx(is("justified-self")));
+    const srOnlyClasses = hashClass(styled, clsx("sr-only"));
+    const classes = hashClass(styled, clsx("input", localStatus && is(localStatus)));
+    const wrapperClasses = hashClass(
+      styled,
+      clsx("field", className, type === "password" /* PASSWORD */ && securityGauge && has("gauge"))
+    );
+    const hasIcon = iconNameLeft || iconNameRight;
+    const controlClasses = hashClass(
+      styled,
+      clsx("control", {
+        [has("icons-right")]: hasIcon != null ? hasIcon : iconNameRight || type === "password" /* PASSWORD */,
+        [has("icons-left")]: iconNameLeft || type === "search" /* SEARCH */
+      })
+    );
+    const onPressKey = useCallback((e) => {
+      const target = e.target;
+      return {
+        inputName: target.name,
+        inputValue: target.value,
+        inputKeyCode: e.keyCode,
+        target,
+        event: e,
+        preventDefault: () => e.preventDefault()
+      };
+    }, []);
+    const IconWrapper = useCallback(
+      ({ className: className2, name: name2, color, closeIconSearch, onPress, srOnly, showPassword }) => {
+        const Markup = showPassword ? "button" : "div";
+        return /* @__PURE__ */ React.createElement(
+          Markup,
+          {
+            ...showPassword && { "data-show-pwd": true, type: "button" },
+            onClick: (e) => {
+              onPress && onPress();
+              if (onIconClick) {
+                onIconClick({ inputName: name2 != null ? name2 : "", inputValue: _value, target: e.target });
+              }
+            }
+          },
+          /* @__PURE__ */ React.createElement(Icon_default, { className: className2, name: name2, size: "small" /* SMALL */, color }),
+          _value && _value.length > 0 && closeIconSearch && /* @__PURE__ */ React.createElement(
+            Icon_default,
+            {
+              onClick: () => setValue(""),
+              className: iconTimesClasses,
+              name: "tri-times" /* TIMES_CIRCLE */,
+              size: "small" /* SMALL */
+            }
+          ),
+          showPassword && srOnly && /* @__PURE__ */ React.createElement("span", { className: srOnlyClasses }, srOnly)
+        );
+      },
+      [_value, styled]
+    );
+    const validator = !customValidator && patternValidator ? (value2) => patternValidator.test(value2) ? "success" /* SUCCESS */ : "error" /* ERROR */ : customValidator;
+    useEffect(() => {
+      var _a;
+      setValue((_a = value != null ? value : defaultValue) != null ? _a : "");
+    }, [value, defaultValue]);
+    useEffect(() => {
+      setIsFocused(focused != null ? focused : false);
+    }, [focused]);
+    useEffect(() => {
+      if (isFocused) setIsDirty(true);
+      else if (isDirty) setIsTouched(true);
+    }, [isFocused, isDirty]);
+    useEffect(() => {
+      if (!validator || !isTouched) return;
+      setLocalStatus(validator(_value));
+    }, [isFocused, isTouched]);
+    useEffect(() => {
+      setLocalStatus(status || "default" /* DEFAULT */);
+    }, [status]);
+    useEffect(() => {
+      if (onStatusChange) onStatusChange(localStatus);
+    }, [localStatus]);
+    return /* @__PURE__ */ React.createElement("div", { className: wrapperClasses, "data-has-gauge": securityGauge ? true : void 0 }, label && /* @__PURE__ */ React.createElement("label", { className: inputLabelClasses, htmlFor: id }, label, " ", required && /* @__PURE__ */ React.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ React.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */, id: idSample }, sample), /* @__PURE__ */ React.createElement("div", { className: controlClasses }, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        "aria-describedby": `${idHelp} ${idSample}`,
+        id,
+        required,
+        readOnly,
+        ...others,
+        "aria-label": !label ? accessibilityLabel : void 0,
+        type: inputType,
+        className: classes,
+        value,
+        defaultValue,
+        name,
+        onSubmit,
+        ref,
+        disabled,
+        minLength,
+        maxLength,
+        autoComplete: autoCompleteType,
+        onKeyUp: (e) => onKeyUp && onKeyUp(onPressKey(e)),
+        onKeyPress: (e) => onKeyPress && onKeyPress(onPressKey(e)),
+        onMouseEnter: (e) => onMouseEnter == null ? void 0 : onMouseEnter(e),
+        onMouseLeave: (e) => onMouseLeave == null ? void 0 : onMouseLeave(e),
+        placeholder,
+        onClick: (e) => {
+          const target = e.target;
+          if (onClick) {
+            onClick({
+              inputName: target.name,
+              inputValue: target.value,
+              target
+            });
+          }
+        },
+        onChange: (e) => {
+          if (inputType !== "date" /* DATE */ && inputType !== "datetime-local" /* DATETIME_LOCAL */ && inputType !== "number" /* NUMBER */ && inputType !== "email" /* EMAIL */) {
+            const caret = e.target.selectionStart;
+            const element = e.target;
+            window.requestAnimationFrame(() => {
+              element.selectionStart = caret;
+              element.selectionEnd = caret;
+            });
+          }
+          if (!forceControl) setValue(e.target.value);
+          if (onChange) {
+            onChange({
+              inputName: e.target.name,
+              inputValue: e.target.value,
+              inputSelectionStart: e.target.selectionStart,
+              target: e.target,
+              event: e
+            });
+          }
+        },
+        onFocus: (e) => {
+          onFocus == null ? void 0 : onFocus(e);
+          setIsFocused(true);
+        },
+        onBlur: (e) => {
+          onBlur == null ? void 0 : onBlur(e);
+          setIsFocused(false);
+        }
+      }
+    ), hasIcon && !localStatus && !loading && iconNameLeft && /* @__PURE__ */ React.createElement(IconWrapper, { name: iconNameLeft }), (iconNameLeft || type === "search" /* SEARCH */) && /* @__PURE__ */ React.createElement(IconWrapper, { className: "icon-left", name: iconNameLeft || "tri-search" /* SEARCH */ }), iconNameRight && !loading && type !== "password" /* PASSWORD */ && /* @__PURE__ */ React.createElement(IconWrapper, { className: "icon-right", name: iconNameRight }), !loading && type === "password" /* PASSWORD */ && /* @__PURE__ */ React.createElement(
+      IconWrapper,
+      {
+        showPassword: true,
+        srOnly: !isShowPwd ? translation.showPassword : translation.hidePassword,
+        className: "icon-right",
+        name: isShowPwd ? "tri-eye-slash" /* EYE_SLASH */ : "tri-eye" /* EYE */,
+        onPress: () => {
+          if (inputType === "password" /* PASSWORD */) {
+            setInputType("text" /* TEXT */);
+            setIsShowPwd(true);
+          } else {
+            setInputType("password" /* PASSWORD */);
+            setIsShowPwd(false);
+          }
+        }
+      }
+    ), loading && /* @__PURE__ */ React.createElement("span", { className: loader })), help && /* @__PURE__ */ React.createElement(Text_default, { className: helpClasses, id: idHelp }, help), securityGauge && type === "password" /* PASSWORD */ && /* @__PURE__ */ React.createElement(InputGauge_default, { validationRules, styled, inputValue: _value }));
+  }
+);
+Input.displayName = "Input" /* Input */;
+var Input_default = Input;
+
+export {
+  Input_default
+};

package/lib/chunk-YHR4DUL2.mjs

@@ -0,0 +1,97 @@
+"use client";
+import {
+  getVariantClassName
+} from "./chunk-JA5LYEG4.mjs";
+import {
+  getStatusClassName
+} from "./chunk-AD63JH53.mjs";
+import {
+  Icon_default
+} from "./chunk-Y3J6NXB4.mjs";
+import {
+  has,
+  is
+} from "./chunk-SWVRRUW7.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.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-YKBYBMP2.mjs

@@ -0,0 +1,11 @@
+"use client";
+import {
+  ToasterContext_default
+} from "./chunk-E67M3CKQ.mjs";
+
+// components/alert/context/index.ts
+var context_default = ToasterContext_default;
+
+export {
+  context_default
+};

package/lib/chunk-YPTOVHF6.mjs

@@ -0,0 +1 @@
+"use client";

package/lib/chunk-YYWCL3GN.mjs

@@ -0,0 +1 @@
+"use client";

package/lib/chunk-Z2FS6QWP.mjs

@@ -0,0 +1,49 @@
+"use client";
+import {
+  SpacerSize
+} from "./chunk-IJCGAWJK.mjs";
+import {
+  SpacingMatrixMode
+} from "./chunk-D76JOUBK.mjs";
+
+// components/autolayout/DefaultSpacingMatrix.ts
+var { FOUR, THREE, TWO, ONE } = SpacerSize;
+var { INSERT_SPACE_BETWEEN } = SpacingMatrixMode;
+var DEFAULT_SPACING_MATRIX = [
+  [INSERT_SPACE_BETWEEN, "Accordion", "default", FOUR],
+  [INSERT_SPACE_BETWEEN, "Card", "default", FOUR],
+  [INSERT_SPACE_BETWEEN, "Box", "default", FOUR],
+  [INSERT_SPACE_BETWEEN, "Table", "default", FOUR],
+  [INSERT_SPACE_BETWEEN, "List", "default", FOUR],
+  [INSERT_SPACE_BETWEEN, "Timeline", "default", FOUR],
+  [INSERT_SPACE_BETWEEN, "Stepper", "default", FOUR],
+  [INSERT_SPACE_BETWEEN, "Pagination", "default", FOUR],
+  [INSERT_SPACE_BETWEEN, "SegmentControl", "default", FOUR],
+  [INSERT_SPACE_BETWEEN, "Tabs", "default", FOUR],
+  [INSERT_SPACE_BETWEEN, "Range", "default", FOUR],
+  [INSERT_SPACE_BETWEEN, "Price", "default", TWO],
+  [INSERT_SPACE_BETWEEN, "Button", "default", FOUR],
+  [INSERT_SPACE_BETWEEN, "Countdown", "default", THREE],
+  [INSERT_SPACE_BETWEEN, "Chips", "default", THREE],
+  [INSERT_SPACE_BETWEEN, "Text", "default", TWO],
+  [INSERT_SPACE_BETWEEN, "Title", "default", THREE],
+  [INSERT_SPACE_BETWEEN, "Progress", "default", TWO],
+  [INSERT_SPACE_BETWEEN, "ProgressRadial", "default", TWO],
+  [INSERT_SPACE_BETWEEN, "Radio", "default", THREE],
+  [INSERT_SPACE_BETWEEN, "Checkbox", "default", TWO],
+  [INSERT_SPACE_BETWEEN, "CheckboxTiles", "default", THREE],
+  [INSERT_SPACE_BETWEEN, "Switch", "default", THREE],
+  [INSERT_SPACE_BETWEEN, "Radio", "default", FOUR],
+  [INSERT_SPACE_BETWEEN, "Checkbox", "default", FOUR],
+  [INSERT_SPACE_BETWEEN, "Input", "default", FOUR],
+  [INSERT_SPACE_BETWEEN, "Textarea", "default", FOUR],
+  [INSERT_SPACE_BETWEEN, "Select", "default", FOUR],
+  [INSERT_SPACE_BETWEEN, "Link", "default", TWO],
+  [INSERT_SPACE_BETWEEN, "Sticker", "default", TWO],
+  [INSERT_SPACE_BETWEEN, "Tag", "default", TWO]
+];
+
+export {
+  INSERT_SPACE_BETWEEN,
+  DEFAULT_SPACING_MATRIX
+};