@trilogy-ds/react 0.0.9-esm-cjs → 0.0.12-esm-cjs

package/lib/chunk-N6JUMMJ7.mjs

@@ -0,0 +1,19 @@
+"use client";
+
+// components/accordion/item/body/AccordionBody.native.tsx
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+var AccordionBody = React.forwardRef(
+  ({ children, ...others }, ref) => {
+    const styles = StyleSheet.create({
+      accordionBody: {}
+    });
+    return /* @__PURE__ */ React.createElement(View, { ref, style: [styles.accordionBody], ...others }, children);
+  }
+);
+AccordionBody.displayName = "AccordionBody" /* AccordionBody */;
+var AccordionBody_native_default = AccordionBody;
+
+export {
+  AccordionBody_native_default
+};

package/lib/chunk-ND7E2T3G.mjs

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

package/lib/chunk-NXCRO4B2.mjs

@@ -0,0 +1,66 @@
+"use client";
+import {
+  Text_native_default
+} from "./chunk-RPXUKVT4.mjs";
+import {
+  getVariantStyle
+} from "./chunk-MKOK7VNZ.mjs";
+import {
+  Icon_native_default
+} from "./chunk-STJ5TNSE.mjs";
+import {
+  getColorStyle
+} from "./chunk-VI2KFLCZ.mjs";
+import {
+  isIOS
+} from "./chunk-R6PFY5VS.mjs";
+
+// components/sticker/Sticker.native.tsx
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+var Sticker = React.forwardRef(
+  ({ variant, small, outlined, label, iconName, accessibilityLabel, ...others }, ref) => {
+    const defaultColor = getColorStyle("MAIN" /* MAIN */);
+    const styles = StyleSheet.create({
+      sticker: {
+        flexDirection: "row",
+        justifyContent: "center",
+        paddingTop: small ? 3 : 7,
+        paddingBottom: small ? 3 : 7,
+        paddingLeft: small ? 8 : 16,
+        paddingRight: small ? 8 : 16,
+        alignSelf: "flex-start",
+        borderWidth: outlined ? 2 : 0,
+        borderColor: outlined && defaultColor || "transparent",
+        backgroundColor: outlined && "white" || variant && getVariantStyle(variant) || defaultColor,
+        borderTopLeftRadius: !small && 24 || small && 16 || 0,
+        borderTopRightRadius: small && 16 || 24,
+        borderBottomLeftRadius: !small && 24 || small && 16 || 0,
+        borderBottomRightRadius: !small && 24 || small && 16 || 0,
+        marginTop: 0,
+        fontSize: small ? 12 : 16,
+        top: 0,
+        alignItems: "center",
+        textAlign: "center"
+      },
+      text: {
+        lineHeight: !small && 20 || 15,
+        textAlign: "center",
+        color: outlined && defaultColor || getColorStyle("WHITE" /* BACKGROUND */),
+        justifyContent: "center",
+        alignSelf: "center",
+        fontSize: !small && 16 || 12,
+        transform: isIOS ? [{ skewX: "0deg" }] : [],
+        marginLeft: iconName && small && 4 || iconName && !small && 5 || 0,
+        marginTop: 1
+      }
+    });
+    return /* @__PURE__ */ React.createElement(View, { ref, style: styles.sticker, accessibilityLabel, ...others }, iconName && /* @__PURE__ */ React.createElement(Icon_native_default, { color: "WHITE" /* BACKGROUND */, size: small ? "smaller" /* SMALLER */ : "small" /* SMALL */, name: iconName }), label && /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.text, typo: ["has-text-weight-semibold" /* TEXT_WEIGHT_SEMIBOLD */] }, label));
+  }
+);
+Sticker.displayName = "Sticker" /* Sticker */;
+var Sticker_native_default = Sticker;
+
+export {
+  Sticker_native_default
+};

package/lib/chunk-O2QP75YD.mjs

@@ -0,0 +1,37 @@
+"use client";
+import {
+  getColorStyle
+} from "./chunk-VI2KFLCZ.mjs";
+
+// components/section/Section.native.tsx
+import * as React from "react";
+import { ImageBackground, StyleSheet, View } from "react-native";
+var Section = React.forwardRef(
+  ({ backgroundColor, backgroundSrc, children, style, ...others }, ref) => {
+    const colorBgc = getColorStyle("WHITE" /* BACKGROUND */);
+    const styles = StyleSheet.create({
+      container: {
+        backgroundColor: backgroundSrc ? void 0 : backgroundColor ? getColorStyle(backgroundColor) : colorBgc,
+        paddingVertical: 32,
+        paddingHorizontal: 24
+      }
+    });
+    if (backgroundSrc) {
+      return /* @__PURE__ */ React.createElement(
+        ImageBackground,
+        {
+          resizeMode: "cover",
+          source: typeof backgroundSrc === "number" ? backgroundSrc : { uri: backgroundSrc }
+        },
+        /* @__PURE__ */ React.createElement(View, { ref, style: [styles.container, style], ...others }, children)
+      );
+    }
+    return /* @__PURE__ */ React.createElement(View, { ref, style: [styles.container, style], ...others }, children);
+  }
+);
+Section.displayName = "Section" /* Section */;
+var Section_native_default = Section;
+
+export {
+  Section_native_default
+};

package/lib/chunk-O5CT6DIR.mjs

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

package/lib/chunk-OJE7QMVW.mjs

@@ -0,0 +1,106 @@
+"use client";
+import {
+  ModalContext
+} from "./chunk-JLQUIKZX.mjs";
+import {
+  Title_native_default
+} from "./chunk-JM27ZQM7.mjs";
+import {
+  Column_native_default
+} from "./chunk-UV7KNMPY.mjs";
+import {
+  Columns_native_default
+} from "./chunk-5RU72DNI.mjs";
+import {
+  Icon_native_default
+} from "./chunk-STJ5TNSE.mjs";
+import {
+  getColorStyle
+} from "./chunk-VI2KFLCZ.mjs";
+import {
+  isAndroid
+} from "./chunk-R6PFY5VS.mjs";
+
+// components/modal/Modal.native.tsx
+import React, { useEffect, useRef, useState } from "react";
+import {
+  Dimensions,
+  StyleSheet,
+  TouchableOpacity,
+  View
+} from "react-native";
+import ModalRN from "react-native-modal";
+var Modal = React.forwardRef(
+  ({
+    children,
+    active = false,
+    onClose,
+    onModalHide,
+    hideCloseButton = false,
+    unClosable = false,
+    trigger,
+    title,
+    ...others
+  }, ref) => {
+    const scrollViewRef = useRef(null);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const [visible, setVisible] = useState(active || false);
+    const [isFooter, setIsFooter] = useState(active || false);
+    const handleOnScroll = (event) => {
+      setScrollOffset(event.nativeEvent.contentOffset.y);
+    };
+    const handleScrollTo = (p) => {
+      if (scrollViewRef.current) scrollViewRef.current.scrollTo(p);
+    };
+    const handleClose = (e) => {
+      if (onClose) onClose(e);
+      setVisible(false);
+    };
+    useEffect(() => {
+      setVisible(active);
+    }, [active]);
+    return /* @__PURE__ */ React.createElement(ModalContext.Provider, { value: { scrollViewRef, handleOnScroll, isFooter, setIsFooter } }, trigger, /* @__PURE__ */ React.createElement(
+      ModalRN,
+      {
+        isVisible: visible,
+        onBackdropPress: () => handleClose({}),
+        onSwipeComplete: handleClose,
+        swipeDirection: unClosable ? void 0 : ["down"],
+        scrollTo: handleScrollTo,
+        scrollOffset,
+        scrollOffsetMax: 100,
+        propagateSwipe: true,
+        style: [styles.modal],
+        onModalHide,
+        ...others
+      },
+      /* @__PURE__ */ React.createElement(View, { ref, style: [styles.body, { backgroundColor: getColorStyle("WHITE" /* BACKGROUND */) }] }, /* @__PURE__ */ React.createElement(View, { style: { paddingVertical: !title && hideCloseButton ? 8 : 16 } }, /* @__PURE__ */ React.createElement(Columns_native_default, { verticalAlign: "ALIGNED_CENTER" /* ALIGNED_CENTER */ }, /* @__PURE__ */ React.createElement(Column_native_default, null, /* @__PURE__ */ React.createElement(Title_native_default, { level: 4 }, title)), !hideCloseButton && /* @__PURE__ */ React.createElement(Column_native_default, { narrow: true }, /* @__PURE__ */ React.createElement(TouchableOpacity, { onPress: handleClose }, /* @__PURE__ */ React.createElement(Icon_native_default, { name: "tri-times" /* TIMES */, size: "medium" /* MEDIUM */, color: "MAIN" /* MAIN */ }))))), children)
+    ));
+  }
+);
+Modal.displayName = "Modal" /* Modal */;
+var Modal_native_default = Modal;
+var styles = StyleSheet.create({
+  modal: {
+    justifyContent: "flex-end",
+    margin: 0
+  },
+  body: {
+    paddingHorizontal: 16,
+    maxHeight: isAndroid ? Dimensions.get("screen").height / 1.15 : Dimensions.get("screen").height / 1.1,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6
+  }
+});
+
+export {
+  Modal_native_default
+};

package/lib/chunk-OVD2WBG7.mjs

@@ -0,0 +1,119 @@
+"use client";
+import {
+  getColorStyle
+} from "./chunk-VI2KFLCZ.mjs";
+import {
+  isAndroid,
+  isIOS
+} from "./chunk-R6PFY5VS.mjs";
+
+// components/scroll-view/ScrollView.native.tsx
+import * as React from "react";
+import { RefreshControl, ScrollView as ScrollViewNative, StyleSheet, View } from "react-native";
+var ScrollView = React.forwardRef(
+  ({
+    children,
+    footer,
+    bounce,
+    centerContent,
+    refresh,
+    onRefresh,
+    refreshControlColor,
+    id,
+    scrollDirection,
+    ...others
+  }, ref) => {
+    const [refreshing, setRefreshing] = React.useState(false);
+    const wait = (timeout) => {
+      return new Promise((resolve) => setTimeout(resolve, timeout));
+    };
+    const onRefreshing = React.useCallback(() => {
+      setRefreshing(true);
+      wait(2e3).then(() => setRefreshing(false));
+    }, []);
+    const styles = StyleSheet.create({
+      stickyContent: {
+        flexGrow: 1,
+        justifyContent: "space-between",
+        flexDirection: "column"
+      }
+    });
+    if (footer) {
+      return /* @__PURE__ */ React.createElement(
+        ScrollViewNative,
+        {
+          horizontal: scrollDirection === "HORIZONTAL" /* HORIZONTAL */,
+          testID: id,
+          showsVerticalScrollIndicator: false,
+          contentContainerStyle: styles.stickyContent,
+          bounces: bounce && isIOS && true,
+          overScrollMode: bounce && isAndroid && "always" || "never",
+          ...refresh && {
+            refreshControl: /* @__PURE__ */ React.createElement(
+              RefreshControl,
+              {
+                tintColor: refreshControlColor && getColorStyle(refreshControlColor),
+                colors: refreshControlColor && [getColorStyle(refreshControlColor)],
+                refreshing,
+                onRefresh: () => {
+                  onRefreshing();
+                  if (onRefresh) {
+                    onRefresh();
+                  }
+                }
+              }
+            )
+          },
+          ...others
+        },
+        /* @__PURE__ */ React.createElement(
+          View,
+          {
+            style: {
+              flex: 1,
+              justifyContent: centerContent ? "center" : "flex-start"
+            }
+          },
+          children
+        ),
+        /* @__PURE__ */ React.createElement(View, { style: { justifyContent: "flex-end" } }, footer)
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      ScrollViewNative,
+      {
+        horizontal: scrollDirection === "HORIZONTAL" /* HORIZONTAL */,
+        testID: id,
+        contentContainerStyle: { flexGrow: 1 },
+        ref,
+        showsVerticalScrollIndicator: false,
+        bounces: bounce && isIOS && true,
+        overScrollMode: bounce && isAndroid && "always" || "never",
+        ...refresh && {
+          refreshControl: /* @__PURE__ */ React.createElement(
+            RefreshControl,
+            {
+              tintColor: refreshControlColor && getColorStyle(refreshControlColor),
+              colors: refreshControlColor && [getColorStyle(refreshControlColor)],
+              refreshing,
+              onRefresh: () => {
+                onRefreshing();
+                if (onRefresh) {
+                  onRefresh();
+                }
+              }
+            }
+          )
+        },
+        ...others
+      },
+      centerContent ? /* @__PURE__ */ React.createElement(View, { style: { flex: 1, justifyContent: "center" } }, children) : children
+    );
+  }
+);
+ScrollView.displayName = "ScrollView" /* ScrollView */;
+var ScrollView_native_default = ScrollView;
+
+export {
+  ScrollView_native_default
+};

package/lib/chunk-P74YNW6V.mjs

@@ -0,0 +1,53 @@
+"use client";
+import {
+  CardContext
+} from "./chunk-MDAPUQYL.mjs";
+
+// components/card/image/CardImage.native.tsx
+import React, { useContext, useEffect, useState } from "react";
+import { Image, StyleSheet, TouchableOpacity, View } from "react-native";
+var CardImage = React.forwardRef(
+  ({ src, size, alt, onClick, contain, ...others }, ref) => {
+    const { horizontal } = useContext(CardContext);
+    const maxSize = horizontal ? "50%" : "100%";
+    const [ratio, setRatio] = useState(1);
+    const styles = StyleSheet.create({
+      cardImage: {
+        width: size ? `${size}0%` : maxSize,
+        aspectRatio: horizontal ? void 0 : ratio,
+        resizeMode: contain ? "contain" : "cover",
+        alignSelf: contain ? "flex-end" : "auto",
+        marginBottom: 0,
+        height: horizontal ? "auto" : void 0
+      }
+    });
+    useEffect(() => {
+      if (!horizontal) {
+        typeof src === "string" ? Image.getSize(
+          src,
+          (w, h) => {
+            h && setRatio(w / h);
+          },
+          () => setRatio(1)
+        ) : setRatio(1);
+      }
+    }, [src, horizontal]);
+    const image = /* @__PURE__ */ React.createElement(
+      Image,
+      {
+        ref,
+        accessibilityLabel: alt,
+        style: styles.cardImage,
+        source: typeof src === "number" ? src : { uri: src },
+        ...others
+      }
+    );
+    return onClick ? /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, image)) : image;
+  }
+);
+CardImage.displayName = "CardImage" /* CardImage */;
+var CardImage_native_default = CardImage;
+
+export {
+  CardImage_native_default
+};

package/lib/chunk-PBCERB3A.mjs

@@ -0,0 +1,90 @@
+"use client";
+import {
+  getColorStyle
+} from "./chunk-VI2KFLCZ.mjs";
+
+// components/popover/Popover.native.tsx
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+var Popover = React.forwardRef(
+  ({ children, active = false, direction }, ref) => {
+    const styles = StyleSheet.create({
+      container: {
+        alignItems: "center"
+      },
+      popover: {
+        minWidth: 50,
+        minHeight: 30,
+        backgroundColor: getColorStyle("MAIN" /* MAIN */),
+        borderRadius: 6,
+        justifyContent: "center",
+        padding: 5
+      },
+      arrow: {
+        width: 10,
+        height: 10
+      },
+      arrowBottom: {
+        borderTopColor: getColorStyle("MAIN" /* MAIN */),
+        borderTopWidth: 10,
+        borderLeftWidth: 10,
+        borderRightWidth: 10,
+        borderLeftColor: "transparent",
+        borderRightColor: "transparent"
+      },
+      arrowTop: {
+        borderBottomColor: getColorStyle("MAIN" /* MAIN */),
+        borderBottomWidth: 10,
+        borderLeftWidth: 10,
+        borderRightWidth: 10,
+        borderLeftColor: "transparent",
+        borderRightColor: "transparent"
+      },
+      arrowLeft: {
+        borderTopWidth: 8,
+        borderBottomWidth: 8,
+        borderLeftWidth: 0,
+        borderRightWidth: 8,
+        borderTopColor: "transparent",
+        borderBottomColor: "transparent",
+        borderLeftColor: "transparent",
+        borderRightColor: getColorStyle("MAIN" /* MAIN */)
+      },
+      arrowRight: {
+        borderTopWidth: 8,
+        borderBottomWidth: 8,
+        borderLeftWidth: 8,
+        borderRightWidth: 0,
+        borderTopColor: "transparent",
+        borderBottomColor: "transparent",
+        borderLeftColor: getColorStyle("MAIN" /* MAIN */),
+        borderRightColor: "transparent"
+      }
+    });
+    if (active && (direction === "left" /* LEFT */ || direction === "right" /* RIGHT */)) {
+      return /* @__PURE__ */ React.createElement(
+        View,
+        {
+          ref,
+          style: {
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center"
+          }
+        },
+        direction === "right" /* RIGHT */ && /* @__PURE__ */ React.createElement(React.Fragment, null, children, /* @__PURE__ */ React.createElement(View, { style: active ? [styles.arrow, styles.arrowLeft] : {} })),
+        direction === "left" /* LEFT */ && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: active ? [styles.arrow, styles.arrowRight] : {} }), children)
+      );
+    }
+    if (active && (direction === "bottom" /* BOTTOM */ || !direction)) {
+      return /* @__PURE__ */ React.createElement(View, { ref }, direction === "bottom" /* BOTTOM */ && /* @__PURE__ */ React.createElement(View, null, children), /* @__PURE__ */ React.createElement(View, { style: styles.container }, direction === "bottom" /* BOTTOM */ && /* @__PURE__ */ React.createElement(View, { style: active ? [styles.arrow, styles.arrowTop] : {} }), !direction && /* @__PURE__ */ React.createElement(View, { style: active ? [styles.arrow, styles.arrowBottom] : {} })), !direction && /* @__PURE__ */ React.createElement(View, null, children));
+    }
+    return /* @__PURE__ */ React.createElement(View, { ref }, children);
+  }
+);
+Popover.displayName = "Popover" /* Popover */;
+var Popover_native_default = Popover;
+
+export {
+  Popover_native_default
+};

package/lib/chunk-PBPNVWL2.mjs

@@ -0,0 +1,21 @@
+"use client";
+import {
+  AutoLayout_native_default
+} from "./chunk-GNSLOYT2.mjs";
+
+// components/autolayout/AutoLayoutWrapper/index.native.tsx
+import * as React from "react";
+var AutoLayoutWrapper = ({ autolayout = true, children }) => {
+  if (autolayout === true) {
+    return /* @__PURE__ */ React.createElement(AutoLayout_native_default, null, children);
+  } else if (autolayout) {
+    return /* @__PURE__ */ React.createElement(AutoLayout_native_default, { matrix: autolayout }, children);
+  } else {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  }
+};
+var index_native_default = AutoLayoutWrapper;
+
+export {
+  index_native_default
+};

package/lib/{chunk-WJ3XZJY6.mjs → chunk-PI7PXVVC.mjs}

@@ -1,9 +1,9 @@
 "use client";
 import {
   AutoLayout_default
-} from "./chunk-MEC5UMTH.mjs";
+} from "./chunk-A6JKPX5Y.mjs";
 
-// components/autolayout/AutoLayoutWrapper.tsx
+// components/autolayout/AutoLayoutWrapper/index.tsx
 import * as React from "react";
 var AutoLayoutWrapper = ({ autolayout = true, children }) => {
   if (autolayout === true) {

package/lib/chunk-PRKV4KLO.mjs

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

package/lib/chunk-PS5EJY7K.mjs

@@ -0,0 +1,89 @@
+"use client";
+import {
+  Text_native_default
+} from "./chunk-RPXUKVT4.mjs";
+import {
+  Icon_native_default
+} from "./chunk-STJ5TNSE.mjs";
+import {
+  getColorStyle
+} from "./chunk-VI2KFLCZ.mjs";
+
+// components/divider/Divider.native.tsx
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+var Divider = React.forwardRef(
+  ({ content, unboxed, marginless, iconName, ...others }, ref) => {
+    const [textWidth, setTextWidth] = React.useState(0);
+    const [containerWidth, setContainerWidth] = React.useState(0);
+    const dividerColor = getColorStyle("NEUTRAL" /* NEUTRAL */);
+    const styles = StyleSheet.create({
+      divider: {
+        marginBottom: 16,
+        marginTop: 16,
+        borderBottomColor: dividerColor,
+        borderBottomWidth: 1,
+        width: "100%",
+        alignSelf: (unboxed || marginless) && "stretch" || "auto"
+      },
+      dividerContent: {
+        borderBottomColor: dividerColor,
+        borderBottomWidth: 1,
+        alignSelf: "center",
+        justifyContent: "center",
+        width: `${(containerWidth - (textWidth + 16)) / 2 / containerWidth * 100}%`
+      },
+      container: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        maxWidth: "100%"
+      },
+      content: {
+        justifyContent: "center",
+        backgroundColor: "transparent",
+        borderRadius: iconName ? 50 : 0,
+        padding: iconName ? 6 : 0
+      },
+      textContent: {
+        textAlign: "center",
+        color: getColorStyle("MAIN" /* MAIN */)
+      }
+    });
+    const ContentDivider = React.useMemo(() => {
+      if (content) return /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.textContent }, content);
+      if (iconName && !content) return /* @__PURE__ */ React.createElement(Icon_native_default, { name: iconName, color: "MAIN" /* MAIN */, testId: "icon-id" });
+    }, [content, iconName]);
+    if (content || iconName) {
+      return /* @__PURE__ */ React.createElement(
+        View,
+        {
+          ref,
+          style: styles.container,
+          onLayout: (event) => {
+            setContainerWidth(event.nativeEvent.layout.width);
+          }
+        },
+        /* @__PURE__ */ React.createElement(View, { style: styles.dividerContent, ...others }),
+        /* @__PURE__ */ React.createElement(
+          View,
+          {
+            style: styles.content,
+            onLayout: (event) => {
+              setTextWidth(event.nativeEvent.layout.width);
+            }
+          },
+          ContentDivider
+        ),
+        /* @__PURE__ */ React.createElement(View, { style: styles.dividerContent, ...others })
+      );
+    }
+    return /* @__PURE__ */ React.createElement(View, { style: styles.divider, ...others });
+  }
+);
+Divider.displayName = "Divider" /* Divider */;
+var Divider_native_default = Divider;
+
+export {
+  Divider_native_default
+};

package/lib/{chunk-DJTJXEJ5.mjs → chunk-PTHFF3G5.mjs}

@@ -1,13 +1,13 @@
 "use client";
+import {
+  Text_default
+} from "./chunk-HHE7L3CW.mjs";
 import {
   TabsContext
 } from "./chunk-SWFBV5TR.mjs";
-import {
-  Text_default
-} from "./chunk-GRUJ62D7.mjs";
 import {
   Icon_default
-} from "./chunk-Y3J6NXB4.mjs";
+} from "./chunk-SGAZRZIK.mjs";
 import {
   hashClass
 } from "./chunk-UFMRE754.mjs";

package/lib/chunk-QDGYSO73.mjs

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

package/lib/chunk-QI5TZFVP.mjs

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

package/lib/chunk-QIAPR2H5.mjs

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