@trilogy-ds/react 0.0.17-esm-cjs → 0.0.18-esm-cjs

package/lib/chunk-NMYQHE6C.mjs

@@ -0,0 +1,109 @@
+"use client";
+import {
+  Icon_default
+} from "./chunk-ALGX47MZ.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-NRNJCOJP.mjs

@@ -0,0 +1,73 @@
+"use client";
+import {
+  Icon_default
+} from "./chunk-ALGX47MZ.mjs";
+import {
+  is
+} from "./chunk-SWVRRUW7.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+
+// components/fab/Fab.tsx
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+var Fab = React.forwardRef(({
+  children,
+  extended,
+  iconName,
+  accessibilityLabel,
+  onClick,
+  className,
+  id,
+  fixed = true,
+  top,
+  bottom,
+  left,
+  right,
+  disabled,
+  ...others
+}, ref) => {
+  const { styled } = useTrilogyContext();
+  const [isExtended, setIsExtended] = useState(extended || false);
+  useEffect(() => {
+    setIsExtended(extended || false);
+  }, [isExtended]);
+  const positionStyle = top || bottom || left || right ? {
+    position: fixed ? "fixed" : "absolute",
+    top: top != null ? top : "auto",
+    bottom: bottom != null ? bottom : "auto",
+    left: left != null ? left : "auto",
+    right: right != null ? right : "auto"
+  } : {
+    position: "relative"
+  };
+  const _className = hashClass(styled, clsx("fab", extended && is("extended"), className));
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ref,
+      id,
+      disabled,
+      "aria-label": accessibilityLabel,
+      onClick: (e) => {
+        onClick == null ? void 0 : onClick(e);
+        e.stopPropagation();
+      },
+      style: { ...positionStyle },
+      ...others,
+      className: _className
+    },
+    /* @__PURE__ */ React.createElement(Icon_default, { name: iconName }),
+    children
+  );
+});
+Fab.displayName = "Fab" /* Fab */;
+var Fab_default = Fab;
+
+export {
+  Fab_default
+};

package/lib/chunk-NRTMJLXK.mjs

@@ -0,0 +1,111 @@
+"use client";
+import {
+  ColumnsContext
+} from "./chunk-LOROW3UU.mjs";
+import {
+  ColumnsGapValue
+} from "./chunk-KUF5FQNN.mjs";
+import {
+  getAlignStyle
+} from "./chunk-CD6DMMCL.mjs";
+
+// components/columns/Columns.native.tsx
+import React, { useState } from "react";
+import { Dimensions, ScrollView, StyleSheet, View } from "react-native";
+var staticStyles = StyleSheet.create({
+  centered: {
+    justifyContent: "center"
+  },
+  multiline: {
+    flexWrap: "wrap"
+  },
+  mobile: {
+    flexDirection: "column"
+  }
+});
+var Columns = React.forwardRef(
+  ({ children, align, gap, verticalAlign, fullBleed, scrollable, multiline, fullheight, ...others }, ref) => {
+    const [width, setWidth] = useState(0);
+    const [enlarge, setEnlarge] = useState(0);
+    const onLayoutHandler = React.useCallback(
+      (event) => {
+        if (!width) {
+          const { width: width2 } = event.nativeEvent.layout;
+          if (fullBleed) {
+            setEnlarge((Dimensions.get("screen").width - width2) / 2);
+          }
+          setWidth(width2);
+        }
+      },
+      [fullBleed, width]
+    );
+    const realGap = React.useMemo(() => typeof gap === "undefined" && 16 || ColumnsGapValue[gap], [gap]);
+    const dynamicStyles = React.useMemo(
+      () => ({
+        columns: {
+          width: fullBleed && width ? width + enlarge * 2 : "100%",
+          marginHorizontal: -enlarge,
+          paddingHorizontal: enlarge,
+          flexDirection: "row",
+          gap: realGap,
+          height: fullheight ? "100%" : "auto"
+        },
+        verticalAlign: {
+          alignItems: getAlignStyle(verticalAlign)
+        },
+        scrollContainer: {
+          paddingHorizontal: enlarge,
+          gap: realGap
+        }
+      }),
+      [fullBleed, width, enlarge, realGap, fullheight, verticalAlign]
+    );
+    const contextValue = React.useMemo(
+      () => ({
+        width,
+        realGap,
+        scrollable: scrollable || false,
+        childrensLength: React.Children.count(children)
+      }),
+      [width, realGap, scrollable, children]
+    );
+    return /* @__PURE__ */ React.createElement(ColumnsContext.Provider, { value: contextValue }, !scrollable && /* @__PURE__ */ React.createElement(
+      View,
+      {
+        ref,
+        onLayout: onLayoutHandler,
+        style: [
+          dynamicStyles.columns,
+          multiline && staticStyles.multiline,
+          align === "ALIGNED_CENTER" /* ALIGNED_CENTER */ && staticStyles.centered,
+          verticalAlign && dynamicStyles.verticalAlign
+        ],
+        ...others
+      },
+      children
+    ), scrollable && /* @__PURE__ */ React.createElement(
+      View,
+      {
+        onLayout: onLayoutHandler,
+        style: {
+          marginHorizontal: -enlarge
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        ScrollView,
+        {
+          horizontal: true,
+          contentContainerStyle: dynamicStyles.scrollContainer,
+          showsHorizontalScrollIndicator: false
+        },
+        children
+      )
+    ));
+  }
+);
+Columns.displayName = "Columns" /* Columns */;
+var Columns_native_default = Columns;
+
+export {
+  Columns_native_default
+};

package/lib/chunk-NUSFBDBA.mjs

@@ -0,0 +1,43 @@
+"use client";
+import {
+  index_native_default
+} from "./chunk-7EU3FOC4.mjs";
+import {
+  SpacingMatrixMode
+} from "./chunk-DU46N4OG.mjs";
+import {
+  Text_native_default
+} from "./chunk-MVQ252OA.mjs";
+import {
+  isRequiredChild
+} from "./chunk-TFRD43SL.mjs";
+import {
+  SpacerSize
+} from "./chunk-IJCGAWJK.mjs";
+
+// components/checkbox/list/CheckboxList.native.tsx
+import * as React from "react";
+import { StyleSheet } from "react-native";
+var { THREE, TWO } = SpacerSize;
+var { INSERT_SPACE_BETWEEN } = SpacingMatrixMode;
+var SPACING_MATRIX = [
+  [INSERT_SPACE_BETWEEN, "Checkbox", "Divider", TWO],
+  [INSERT_SPACE_BETWEEN, "Divider", "Checkbox", TWO],
+  [INSERT_SPACE_BETWEEN, "Checkbox", "Checkbox", THREE]
+];
+var CheckboxList = React.forwardRef(
+  ({ children, label }, ref) => {
+    const styles = StyleSheet.create({
+      label: {
+        marginBottom: 8
+      }
+    });
+    return /* @__PURE__ */ React.createElement(index_native_default, { ...{ autolayout: SPACING_MATRIX } }, label && /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.label }, label, " ", isRequiredChild(children) && /* @__PURE__ */ React.createElement(Text_native_default, { typo: "has-text-error" /* TEXT_ERROR */ }, "*")), children);
+  }
+);
+CheckboxList.displayName = "CheckboxList" /* CheckboxList */;
+var CheckboxList_native_default = CheckboxList;
+
+export {
+  CheckboxList_native_default
+};

package/lib/{chunk-TH32WIIV.mjs → chunk-NWBGCS6B.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-T7LVKIVR.mjs";
 import {
   Icon_default
-} from "./chunk-SGAZRZIK.mjs";
+} from "./chunk-ALGX47MZ.mjs";
 import {
   is
 } from "./chunk-SWVRRUW7.mjs";

package/lib/chunk-O32SL32C.mjs

@@ -0,0 +1,66 @@
+"use client";
+import {
+  getStatusStyle
+} from "./chunk-MB55ARZ7.mjs";
+import {
+  getColorStyle
+} from "./chunk-E4YRRUI3.mjs";
+import {
+  isIOS
+} from "./chunk-R6PFY5VS.mjs";
+
+// components/switch/Switch.native.tsx
+import React, { useEffect, useState } from "react";
+import { StyleSheet, Switch as SwitchNative } from "react-native";
+var Switch = React.forwardRef(({
+  id = React.useId(),
+  checked,
+  onChange,
+  status,
+  disabled,
+  readonly,
+  name
+}, ref) => {
+  const [_checked, setChecked] = useState(checked || false);
+  useEffect(() => {
+    if (!readonly) {
+      setChecked(checked || false);
+    }
+  }, [checked, readonly]);
+  const backgroundColorOff = getColorStyle("NEUTRAL" /* NEUTRAL */);
+  const backgroundColorDisabled = getColorStyle("DISABLED" /* DISABLED */);
+  const thumbColor = getColorStyle("WHITE" /* BACKGROUND */);
+  const styles = StyleSheet.create({
+    switchIos: {
+      transform: [{ scaleX: 0.7 }, { scaleY: 0.7 }]
+    }
+  });
+  return /* @__PURE__ */ React.createElement(
+    SwitchNative,
+    {
+      ref,
+      testID: "switch-id",
+      style: isIOS ? styles.switchIos : {},
+      trackColor: {
+        false: disabled ? backgroundColorDisabled : backgroundColorOff,
+        true: disabled ? backgroundColorDisabled : getStatusStyle(status).color
+      },
+      thumbColor,
+      ios_backgroundColor: disabled ? backgroundColorDisabled : backgroundColorOff,
+      onValueChange: (state) => {
+        if (onChange) {
+          onChange({ switchState: state, switchName: name || "" });
+        }
+      },
+      nativeID: name ? `${name}_${id}` : id,
+      disabled,
+      value: _checked
+    }
+  );
+});
+Switch.displayName = "Switch" /* Switch */;
+var Switch_native_default = Switch;
+
+export {
+  Switch_native_default
+};

package/lib/{chunk-4K6XP3WN.mjs → chunk-O72JHAKF.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   getBackgroundClassName
-} from "./chunk-WC3ULY5W.mjs";
+} from "./chunk-XXKEMYTB.mjs";
 import {
   has,
   is

package/lib/{chunk-SWFBV5TR.mjs → chunk-OAENQH2X.mjs}

@@ -7,7 +7,8 @@ var TabsContext = React.createContext({
   inverted: false,
   setActiveIndex: () => 0,
   setInverted: () => false,
-  small: false
+  small: false,
+  fullwidth: false
 });
 
 export {

package/lib/chunk-OUYOYTXI.mjs

@@ -0,0 +1,50 @@
+"use client";
+import {
+  getBackgroundClassName
+} from "./chunk-XXKEMYTB.mjs";
+import {
+  has,
+  is
+} from "./chunk-SWVRRUW7.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.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-P3RZGE6X.mjs

@@ -0,0 +1,39 @@
+"use client";
+import {
+  Icon_default
+} from "./chunk-ALGX47MZ.mjs";
+import {
+  is
+} from "./chunk-SWVRRUW7.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+
+// components/stepper/step/Step.tsx
+import clsx from "clsx";
+import React from "react";
+var Step = React.forwardRef(({ className, id, active, current, done, label, iconName, error, ...others }, ref) => {
+  const { styled } = useTrilogyContext();
+  const classesStepLabel = hashClass(styled, clsx("step-label"));
+  const classes = hashClass(
+    styled,
+    clsx(
+      "stepper-item",
+      active && is("active"),
+      current && is("current"),
+      done && is("done"),
+      error && is("error"),
+      className
+    )
+  );
+  return /* @__PURE__ */ React.createElement("div", { ref, id, className: classes, "data-label": label, ...others }, /* @__PURE__ */ React.createElement("div", { className: classesStepLabel }, label, !done && iconName && /* @__PURE__ */ React.createElement(Icon_default, { name: iconName && iconName, className: "step-icon", size: "medium" /* MEDIUM */ })));
+});
+Step.displayName = "Step" /* Step */;
+var Step_default = Step;
+
+export {
+  Step_default
+};

package/lib/chunk-P7P7S4GM.mjs

@@ -0,0 +1,70 @@
+"use client";
+import {
+  Sticker_default
+} from "./chunk-VDIATO4X.mjs";
+import {
+  Icon_default
+} from "./chunk-ALGX47MZ.mjs";
+import {
+  is
+} from "./chunk-SWVRRUW7.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+
+// components/radio/tiles/tile/RadioTile.tsx
+import clsx from "clsx";
+import React from "react";
+var RadioTile = React.forwardRef(({
+  checked,
+  className,
+  disabled,
+  readonly,
+  id = React.useId(),
+  label,
+  onChange,
+  name,
+  value,
+  description,
+  icon,
+  horizontal,
+  required,
+  sticker,
+  stickerVariant = "ACCENT" /* ACCENT */,
+  ...others
+}, ref) => {
+  const { styled } = useTrilogyContext();
+  return /* @__PURE__ */ React.createElement("div", { ref, className: hashClass(styled, clsx("radio-tile", horizontal && is("horizontal"), className)) }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "radio",
+      readOnly: readonly,
+      id,
+      disabled,
+      name,
+      value,
+      checked,
+      required,
+      onChange: (e) => {
+        if (onChange && !disabled && !readonly) {
+          onChange({
+            radioId: e.target.id,
+            radioValue: e.target.value,
+            radioName: e.target.name,
+            radioChecked: e.target.checked
+          });
+        }
+      },
+      ...others
+    }
+  ), /* @__PURE__ */ React.createElement("label", { htmlFor: id, className: hashClass(styled, clsx("radio-label")) }, icon && /* @__PURE__ */ React.createElement(Icon_default, { name: icon, size: "medium" /* MEDIUM */ }), horizontal ? /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("radio-title")) }, label), description && /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("radio-description")) }, description)) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("radio-title")) }, label), description && /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("radio-description")) }, description))), sticker && /* @__PURE__ */ React.createElement(Sticker_default, { label: sticker, variant: stickerVariant, className: "radio-sticker", small: true }));
+});
+RadioTile.displayName = "RadioTile" /* RadioTile */;
+var RadioTile_default = RadioTile;
+
+export {
+  RadioTile_default
+};

package/lib/chunk-PGXASAXX.mjs

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

package/lib/{chunk-2QI25H4L.mjs → chunk-POCUFCQC.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   Text_native_default
-} from "./chunk-2AL4D3MJ.mjs";
+} from "./chunk-MVQ252OA.mjs";
 import {
   getColorStyle
-} from "./chunk-VI2KFLCZ.mjs";
+} from "./chunk-E4YRRUI3.mjs";
 
 // components/range/Range.native.tsx
 import MultiSlider from "@ptomasroos/react-native-multi-slider";