@trilogy-ds/react 0.0.9-beta-v4 → 0.0.11-esm-cjs

package/lib/chunk-SLTXO73P.mjs

@@ -0,0 +1,89 @@
+"use client";
+import {
+  FlexBoxContext
+} from "./chunk-7OJ5USHM.mjs";
+import {
+  ColumnsGapValue
+} from "./chunk-KUF5FQNN.mjs";
+import {
+  getJustifyStyle
+} from "./chunk-L4UDEKQK.mjs";
+import {
+  getAlignStyle
+} from "./chunk-HV6TXVFA.mjs";
+
+// components/flex-box/FlexBox.native.tsx
+import React, { useState } from "react";
+import { Dimensions, ScrollView, StyleSheet, View } from "react-native";
+var FlexBox = React.forwardRef(
+  ({ id, gap, direction = "row", align, justify, scrollable, fullBleed, children, fullheight, ...others }, ref) => {
+    const [width, setWidth] = useState(0);
+    const [enlarge, setEnlarge] = useState(0);
+    const isValueDirection = typeof direction === "string";
+    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 gapIndex = gap && typeof gap === "number" && gap || gap && (gap == null ? void 0 : gap.mobile) || 0;
+    const realGap = React.useMemo(() => typeof gap === "undefined" ? 8 : ColumnsGapValue[gapIndex], [gap]);
+    const styles = StyleSheet.create({
+      columns: {
+        flexDirection: !isValueDirection ? direction == null ? void 0 : direction.mobile : direction,
+        gap: realGap,
+        alignItems: getAlignStyle(align),
+        justifyContent: getJustifyStyle(justify),
+        width: fullBleed && width ? width + enlarge * 2 : "100%",
+        marginHorizontal: -enlarge,
+        paddingHorizontal: enlarge,
+        height: fullheight ? "100%" : "auto"
+      },
+      columnsScrollable: {
+        paddingHorizontal: enlarge,
+        gap: realGap
+      }
+    });
+    return /* @__PURE__ */ React.createElement(
+      FlexBoxContext.Provider,
+      {
+        value: {
+          width,
+          realGap,
+          scrollable: scrollable || false,
+          childrenLength: React.Children.count(children)
+        }
+      },
+      !scrollable && /* @__PURE__ */ React.createElement(View, { id, ref, onLayout: onLayoutHandler, style: [styles.columns], ...others }, children),
+      scrollable && /* @__PURE__ */ React.createElement(
+        View,
+        {
+          id,
+          onLayout: onLayoutHandler,
+          style: {
+            marginHorizontal: -enlarge
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          ScrollView,
+          {
+            horizontal: true,
+            contentContainerStyle: styles.columnsScrollable,
+            showsHorizontalScrollIndicator: false
+          },
+          children
+        )
+      )
+    );
+  }
+);
+FlexBox.displayName = "FlexBox" /* FlexBox */;
+var FlexBox_native_default = FlexBox;
+
+export {
+  FlexBox_native_default
+};

package/lib/chunk-SPRPRRPP.mjs

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

package/lib/chunk-STJ5TNSE.mjs

@@ -0,0 +1,129 @@
+"use client";
+import {
+  TrilogyThemeContext,
+  getColorStyle
+} from "./chunk-VI2KFLCZ.mjs";
+import {
+  StatesContext
+} from "./chunk-CWIO3GEP.mjs";
+import {
+  isAndroid,
+  isIOS
+} from "./chunk-R6PFY5VS.mjs";
+import {
+  getAlignStyle
+} from "./chunk-HV6TXVFA.mjs";
+
+// components/icon/Icon.native.tsx
+import React, { useContext } from "react";
+import ContentLoader, { Circle } from "react-content-loader/native";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+import { WithLocalSvg } from "react-native-svg/css";
+var Icon = React.forwardRef(
+  ({ size, name, circled, stretched, color, backgroundColor, onClick, align, skeleton, testId, ...others }, ref) => {
+    const {
+      theme: { icons }
+    } = useContext(TrilogyThemeContext);
+    const statesContext = useContext(StatesContext);
+    const style = {};
+    const defaultSize = size === "huge" /* HUGE */ && 66 || size === "large" /* LARGE */ && 44 || size === "medium" /* MEDIUM */ && 30 || size === "small" /* SMALL */ && 20 || size === "smaller" /* SMALLER */ && 16 || 20;
+    const iconColor = color && getColorStyle(color) || statesContext.inverted && getColorStyle("WHITE" /* BACKGROUND */) || getColorStyle("MAIN" /* MAIN */);
+    const background = backgroundColor && getColorStyle(backgroundColor) || circled && getColorStyle("MAIN" /* MAIN */) || "";
+    const iconSkeletonRadius = size === "huge" /* HUGE */ && 50 || size === "large" /* LARGE */ && 35 || size === "medium" /* MEDIUM */ && 25 || size === "small" /* SMALL */ && 15 || size === "smaller" /* SMALLER */ && 10 || 15;
+    const circledWidth = size === "huge" /* HUGE */ && 99 || size === "large" /* LARGE */ && 66 || size === "medium" /* MEDIUM */ && 48 || size === "small" /* SMALL */ && 32 || size === "smaller" /* SMALLER */ && 38 || 32;
+    const styles = StyleSheet.create({
+      rootView: {
+        alignSelf: getAlignStyle(align)
+      },
+      iconCircled: {
+        alignSelf: "center",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      icon: {
+        transform: isIOS ? stretched && [{ skewX: "20deg" }] || [{ skewX: "0deg" }] : []
+      },
+      stretched: {
+        justifyContent: "center",
+        alignItems: "center",
+        width: circledWidth + 15,
+        height: circledWidth,
+        backgroundColor: iconColor,
+        borderTopRightRadius: 10,
+        transform: isIOS ? stretched && [{ skewX: "-20deg" }] || [{ skewX: "0deg" }] : []
+      },
+      skeleton: {
+        width: circledWidth,
+        height: circledWidth,
+        borderRadius: iconSkeletonRadius,
+        backgroundColor: getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */),
+        overflow: "hidden"
+      },
+      circled: {
+        width: circledWidth,
+        height: circledWidth,
+        borderRadius: circledWidth,
+        backgroundColor: background,
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    });
+    const IconSkeleton = () => /* @__PURE__ */ React.createElement(ContentLoader, { style: styles.skeleton, ...others }, /* @__PURE__ */ React.createElement(View, { style: { opacity: 0 } }), isAndroid && /* @__PURE__ */ React.createElement(View, null, size === "huge" /* HUGE */ && /* @__PURE__ */ React.createElement(Circle, { cx: "50", cy: "50", r: "50" }) || size === "large" /* LARGE */ && /* @__PURE__ */ React.createElement(Circle, { cx: "33", cy: "33", r: "33" }) || size === "medium" /* MEDIUM */ && /* @__PURE__ */ React.createElement(Circle, { cx: "23", cy: "23", r: "23" }) || size === "small" /* SMALL */ && /* @__PURE__ */ React.createElement(Circle, { cx: "15", cy: "15", r: "15" }) || /* @__PURE__ */ React.createElement(Circle, { cx: "15", cy: "15", r: "15" })));
+    if (skeleton) {
+      return /* @__PURE__ */ React.createElement(IconSkeleton, null);
+    }
+    let iconView = /* @__PURE__ */ React.createElement(View, null);
+    if (name && icons) {
+      if (stretched && !circled) {
+        iconView = /* @__PURE__ */ React.createElement(View, { style: styles.stretched, testID: `${testId}-stretched` }, /* @__PURE__ */ React.createElement(
+          WithLocalSvg,
+          {
+            style: [styles.iconCircled, styles.icon],
+            asset: icons[name.toString().replace("tri-picto-", "").replace("tri-", "")],
+            width: defaultSize,
+            height: defaultSize,
+            color: getColorStyle("WHITE" /* BACKGROUND */)
+          }
+        ));
+      } else if (circled) {
+        iconView = /* @__PURE__ */ React.createElement(View, { style: styles.circled, testID: `${testId}-circled` }, /* @__PURE__ */ React.createElement(
+          WithLocalSvg,
+          {
+            style: [styles.iconCircled, styles.icon],
+            asset: icons[name.toString().replace("tri-picto-", "").replace("tri-", "")],
+            width: defaultSize,
+            height: defaultSize,
+            color: iconColor
+          }
+        ));
+      } else {
+        iconView = /* @__PURE__ */ React.createElement(View, { ...others }, /* @__PURE__ */ React.createElement(
+          WithLocalSvg,
+          {
+            style: [styles.icon, style],
+            asset: icons[name.toString().replace("tri-picto-", "").replace("tri-", "")],
+            width: defaultSize,
+            height: defaultSize,
+            color: iconColor
+          }
+        ));
+      }
+    }
+    return onClick ? /* @__PURE__ */ React.createElement(View, { style: styles.rootView, testID: testId, ref }, /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        style: { width: "100%" },
+        onPress: onClick,
+        activeOpacity: 0.85,
+        testID: `${testId}-pressable`
+      },
+      iconView
+    )) : /* @__PURE__ */ React.createElement(View, { style: styles.rootView, testID: testId, ref }, iconView);
+  }
+);
+Icon.displayName = "Icon" /* Icon */;
+var Icon_native_default = Icon;
+
+export {
+  Icon_native_default
+};

package/lib/chunk-SUNBSFL4.mjs

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

package/lib/chunk-SWCJ5OOQ.mjs

@@ -0,0 +1,21 @@
+"use client";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+
+// components/progress/radial/item/ProgressRadialtem.tsx
+import clsx from "clsx";
+import * as React from "react";
+var ProgressRadialItem = ({ color, className, id }) => {
+  const { styled } = useTrilogyContext();
+  const classes = hashClass(styled, clsx(`progress-circle-slice progress-circle-background-${color}`, className));
+  return /* @__PURE__ */ React.createElement("div", { id, className: classes });
+};
+var ProgressRadialtem_default = ProgressRadialItem;
+
+export {
+  ProgressRadialtem_default
+};

package/lib/chunk-SWFBV5TR.mjs

@@ -0,0 +1,15 @@
+"use client";
+
+// components/tabs/context/index.tsx
+import React from "react";
+var TabsContext = React.createContext({
+  activeIndex: 0,
+  inverted: false,
+  setActiveIndex: () => 0,
+  setInverted: () => false,
+  small: false
+});
+
+export {
+  TabsContext
+};

package/lib/chunk-SWVRRUW7.mjs

@@ -0,0 +1,24 @@
+"use client";
+
+// services/classify/index.ts
+function getStatusBackground(status, defaultBg) {
+  if (!status && !defaultBg) {
+    return "";
+  }
+  if (defaultBg) {
+    return has(`bg-${defaultBg}`);
+  }
+  return has(`bg-${status.toLowerCase()}`);
+}
+function classify(prefix) {
+  return (classname) => classname !== "" ? `${prefix}-${classname.toLowerCase()}` : "";
+}
+var is = classify("is");
+var has = classify("has");
+
+export {
+  getStatusBackground,
+  classify,
+  is,
+  has
+};

package/lib/chunk-SZJMEVMK.mjs

@@ -0,0 +1,147 @@
+"use client";
+import {
+  SelectContext
+} from "./chunk-T7LVKIVR.mjs";
+import {
+  Input_default
+} from "./chunk-GDOGTFV3.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.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-T4P4VEOQ.mjs

@@ -0,0 +1,34 @@
+"use client";
+
+// components/image/Image.native.tsx
+import * as React from "react";
+import { Image as ImageNative, StyleSheet, TouchableOpacity, View } from "react-native";
+var Image = React.forwardRef(({ src, alt = "", circled, width, height, onClick, ...others }, ref) => {
+  const styles = StyleSheet.create({
+    image: {
+      width: width ? width : "100%",
+      height: height ? height : "100%",
+      borderRadius: circled ? 100 : 0,
+      overflow: circled ? "hidden" : "visible",
+      resizeMode: "contain"
+    }
+  });
+  const image = /* @__PURE__ */ React.createElement(
+    ImageNative,
+    {
+      ref,
+      style: styles.image,
+      accessibilityLabel: alt,
+      source: typeof src === "number" ? src : { uri: src },
+      ...others,
+      alt
+    }
+  );
+  return onClick ? /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, image)) : image;
+});
+Image.displayName = "Image" /* Image */;
+var Image_native_default = Image;
+
+export {
+  Image_native_default
+};

package/lib/chunk-T7LVKIVR.mjs

@@ -0,0 +1,16 @@
+"use client";
+
+// components/select/context/index.tsx
+import React from "react";
+var SelectContext = React.createContext({
+  selectedOptionValues: [],
+  multiple: false,
+  custom: false,
+  isVisibleOptions: false,
+  setIsVisibleOptions: () => false,
+  setSelectedOptionValues: () => []
+});
+
+export {
+  SelectContext
+};

package/lib/chunk-TB5FNQJR.mjs

@@ -0,0 +1,87 @@
+"use client";
+import {
+  TitleMarkup
+} from "./chunk-GVBMUMGT.mjs";
+import {
+  is
+} from "./chunk-SWVRRUW7.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+
+// components/title/Title.tsx
+import clsx from "clsx";
+import React from "react";
+var getTitleLevel = (level) => {
+  if (level) {
+    switch (level) {
+      case 1 /* ONE */:
+        return is(`level-1`);
+      case 2 /* TWO */:
+        return is(`level-2`);
+      case 3 /* THREE */:
+        return is(`level-3`);
+      case 4 /* FOUR */:
+        return is(`level-4`);
+      case 5 /* FIVE */:
+        return is(`level-5`);
+      case 6 /* SIX */:
+        return is(`level-6`);
+      default:
+        return is(`level-${level}`);
+    }
+  }
+};
+var isCorrectMarkup = (stringMarkup) => {
+  return stringMarkup in TitleMarkup || Object.values(TitleMarkup).includes(stringMarkup);
+};
+var Title = React.forwardRef(
+  ({
+    level = 1 /* ONE */,
+    markup,
+    children,
+    className,
+    id,
+    typo,
+    skeleton,
+    inverted,
+    onClick,
+    accessibilityLabel,
+    subtitle,
+    overline,
+    marginless,
+    ...others
+  }, ref) => {
+    const { styled } = useTrilogyContext();
+    const classes = hashClass(
+      styled,
+      clsx(
+        "title",
+        level && getTitleLevel(level),
+        typo,
+        skeleton && is("loading"),
+        inverted && is("inverted"),
+        marginless && is("marginless"),
+        className
+      )
+    );
+    const subtitleClasses = hashClass(styled, clsx("subtitle", typo, className));
+    const overlineClasses = hashClass(styled, clsx("overline", typo, className));
+    const Tag = markup && isCorrectMarkup(markup) ? markup : "p";
+    const getClassname = () => {
+      if (subtitle) return subtitleClasses;
+      if (overline) return overlineClasses;
+      return classes;
+    };
+    return /* @__PURE__ */ React.createElement(Tag, { ref, id, "aria-label": accessibilityLabel, onClick, className: getClassname(), ...others }, children);
+  }
+);
+Title.displayName = "Title" /* Title */;
+var Title_default = Title;
+
+export {
+  Title_default
+};

package/lib/chunk-TBFT5WCF.mjs

@@ -0,0 +1,30 @@
+"use client";
+import {
+  TabsContext
+} from "./chunk-SWFBV5TR.mjs";
+import {
+  is
+} from "./chunk-SWVRRUW7.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+
+// components/tabs/tab-panels/tab-panel/TabPanel.tsx
+import clsx from "clsx";
+import React from "react";
+var TabPanel = React.forwardRef(({ children, className, testId, ...others }, ref) => {
+  const { styled } = useTrilogyContext();
+  const { index, ...props } = others;
+  const { activeIndex } = React.useContext(TabsContext);
+  const classes = hashClass(styled, clsx("tab-panel", index === activeIndex && is("active"), className));
+  return /* @__PURE__ */ React.createElement("div", { ref, "data-testid": testId, className: classes, ...props }, children);
+});
+TabPanel.displayName = "TabPanel" /* TabPanel */;
+var TabPanel_default = TabPanel;
+
+export {
+  TabPanel_default
+};