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

package/lib/chunk-Q3NP4BBO.mjs

@@ -0,0 +1,105 @@
+"use client";
+import {
+  Text_native_default
+} from "./chunk-MVQ252OA.mjs";
+import {
+  Icon_native_default
+} from "./chunk-UPP3GX33.mjs";
+import {
+  getColorStyle
+} from "./chunk-E4YRRUI3.mjs";
+
+// components/fab/Fab.native.tsx
+import * as React from "react";
+import { StyleSheet, TouchableOpacity } from "react-native";
+var Fab = React.forwardRef(({
+  children,
+  accessibilityLabel,
+  iconName,
+  extended,
+  onClick,
+  top,
+  bottom,
+  left,
+  right,
+  disabled,
+  testId
+}, ref) => {
+  const styles = StyleSheet.create({
+    button: {
+      backgroundColor: getColorStyle("MAIN" /* MAIN */),
+      justifyContent: "center",
+      alignItems: "center",
+      borderRadius: 16,
+      minHeight: 56,
+      height: "auto",
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 3 },
+      shadowOpacity: 0.2,
+      shadowRadius: 6,
+      elevation: 3,
+      position: top || bottom || left || right ? "absolute" : "relative",
+      top: top ? top : "auto",
+      right: right ? right : "auto",
+      left: left ? left : "auto",
+      bottom: bottom ? bottom : "auto",
+      width: extended ? "auto" : 60,
+      flexDirection: "row",
+      zIndex: 999
+    },
+    label: {
+      marginTop: "auto",
+      marginBottom: "auto",
+      marginLeft: 10,
+      marginRight: 16
+    },
+    icon: {
+      marginLeft: extended ? 16 : 0,
+      marginRight: extended ? 8 : 0
+    },
+    extended: {
+      height: 56
+    }
+  });
+  return /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      ref,
+      style: [styles.button, extended && styles.extended],
+      accessibilityLabel,
+      onPress: (e) => onClick == null ? void 0 : onClick(e),
+      disabled,
+      testID: testId
+    },
+    extended ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      Icon_native_default,
+      {
+        name: iconName,
+        color: "WHITE" /* WHITE */,
+        size: "medium" /* MEDIUM */,
+        align: "ALIGNED_CENTER" /* ALIGNED_CENTER */
+      }
+    ), /* @__PURE__ */ React.createElement(
+      Text_native_default,
+      {
+        style: styles.label,
+        typo: ["has-text-white" /* TEXT_WHITE */, "has-text-weight-semibold" /* TEXT_WEIGHT_SEMIBOLD */]
+      },
+      children
+    )) : /* @__PURE__ */ React.createElement(
+      Icon_native_default,
+      {
+        name: iconName,
+        color: "WHITE" /* WHITE */,
+        size: "medium" /* MEDIUM */,
+        align: "ALIGNED_CENTER" /* ALIGNED_CENTER */
+      }
+    )
+  );
+});
+Fab.displayName = "Fab" /* Fab */;
+var Fab_native_default = Fab;
+
+export {
+  Fab_native_default
+};

package/lib/{chunk-574Q5HPU.mjs → chunk-Q665G2U7.mjs}

@@ -1,10 +1,10 @@
 "use client";
+import {
+  Icon_default
+} from "./chunk-ALGX47MZ.mjs";
 import {
   Text_default
 } from "./chunk-HHE7L3CW.mjs";
-import {
-  Icon_default
-} from "./chunk-SGAZRZIK.mjs";
 import {
   has,
   is

package/lib/chunk-QE4JSIR3.mjs

@@ -0,0 +1,70 @@
+"use client";
+import {
+  has,
+  is
+} from "./chunk-SWVRRUW7.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+import {
+  getJustifyClassName
+} from "./chunk-L4UDEKQK.mjs";
+import {
+  getAlignClassName
+} from "./chunk-CD6DMMCL.mjs";
+
+// components/flex-box/FlexBox.tsx
+import clsx from "clsx";
+import React from "react";
+var generateClassNames = ({ value, getClassName }) => {
+  if (!value) return [];
+  if (typeof value === "string" || typeof value === "number") {
+    return [getClassName(value)];
+  }
+  if (typeof value === "object") {
+    const breakpoints = ["mobile", "tablet", "desktop", "widescreen", "fullhd"];
+    return breakpoints.filter((key) => key in value && value[key] !== void 0).map((key) => `${getClassName(value[key])}-${key}`);
+  }
+  return [];
+};
+var generateWrapClassNames = ({ value, getClassName }) => {
+  if (!value) return [];
+  if (typeof value === "boolean") {
+    return value ? [getClassName(true)] : [];
+  }
+  if (typeof value === "object") {
+    const breakpoints = ["mobile", "tablet", "desktop", "widescreen", "fullhd"];
+    return breakpoints.filter((key) => key in value && value[key] === true).map((key) => `${getClassName(true)}-${key}`);
+  }
+  return [];
+};
+var FlexBox = React.forwardRef(
+  ({ className, id, gap, direction, align, justify, wrap, scrollable, fullheight, mobile, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    const classes = hashClass(
+      styled,
+      clsx([
+        "flex-box",
+        ...generateClassNames({ value: direction, getClassName: (val) => is(`direction-${val}`) }),
+        ...generateClassNames({ value: align, getClassName: (val) => is(getAlignClassName(val)) }),
+        ...generateClassNames({ value: justify, getClassName: (val) => is(getJustifyClassName(val)) }),
+        ...generateClassNames({ value: gap, getClassName: (val) => has(`gap-${val}`) }),
+        ...generateWrapClassNames({ value: wrap, getClassName: (val) => is(`wrap`) }),
+        scrollable && is("scrollable"),
+        fullheight && is("fullheight"),
+        mobile && is("mobile"),
+        className
+      ])
+    );
+    return /* @__PURE__ */ React.createElement("div", { ref, id, className: classes, ...others });
+  }
+);
+FlexBox.displayName = "FlexBox" /* FlexBox */;
+var FlexBox_default = FlexBox;
+
+export {
+  FlexBox_default
+};

package/lib/chunk-QIEADZWY.mjs

@@ -0,0 +1,54 @@
+"use client";
+import {
+  View_native_default
+} from "./chunk-4GKCUICZ.mjs";
+import {
+  Text_native_default
+} from "./chunk-MVQ252OA.mjs";
+import {
+  getColorStyle
+} from "./chunk-E4YRRUI3.mjs";
+
+// components/table/tr/TableTr.native.tsx
+import React, { useState } from "react";
+import { StyleSheet, TouchableOpacity } from "react-native";
+var TableTr = React.forwardRef(({
+  children,
+  expandable,
+  expanded,
+  ...others
+}, ref) => {
+  const [isExpanded, setIsExpended] = useState(false);
+  const styles = StyleSheet.create({
+    tableTr: {
+      flexDirection: "row",
+      flex: 1
+    },
+    expendable: {
+      width: "100%",
+      backgroundColor: getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */),
+      padding: 10
+    }
+  });
+  const handleExpendedContent = () => {
+    setIsExpended(!isExpanded);
+  };
+  if (expandable) {
+    return /* @__PURE__ */ React.createElement(View_native_default, { ref }, /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        onPress: () => handleExpendedContent(),
+        style: styles.tableTr,
+        ...others
+      },
+      children
+    ), isExpanded && expanded && typeof expanded.valueOf() === "string" && /* @__PURE__ */ React.createElement(View_native_default, { style: styles.expendable }, /* @__PURE__ */ React.createElement(Text_native_default, { level: 4 /* FOUR */ }, String(expanded))), isExpanded && expanded && React.isValidElement(expanded) && /* @__PURE__ */ React.createElement(View_native_default, { style: styles.expendable }, expanded));
+  }
+  return /* @__PURE__ */ React.createElement(View_native_default, { ref, style: styles.tableTr, ...others }, children);
+});
+TableTr.displayName = "TableTr" /* TableTr */;
+var TableTr_native_default = TableTr;
+
+export {
+  TableTr_native_default
+};

package/lib/{chunk-RDBMQIDN.mjs → chunk-QLJ54D5Q.mjs}

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

package/lib/{chunk-Z6YBOKUS.mjs → chunk-QNDMUIJM.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   Tab_native_default
-} from "./chunk-LALBHUEG.mjs";
+} from "./chunk-DWZ232Q2.mjs";
 import {
   Icon_native_default
-} from "./chunk-H6FVJB5Z.mjs";
+} from "./chunk-UPP3GX33.mjs";
 import {
   getColorStyle
-} from "./chunk-VI2KFLCZ.mjs";
+} from "./chunk-E4YRRUI3.mjs";
 import {
   TabsContext
-} from "./chunk-SWFBV5TR.mjs";
+} from "./chunk-OAENQH2X.mjs";
 
 // components/tabs/tab-list/TabList.native.tsx
 import React from "react";
@@ -20,7 +20,7 @@ import {
   View
 } from "react-native";
 var TabList = React.forwardRef(({ children, ...others }, ref) => {
-  const { inverted } = React.useContext(TabsContext);
+  const { inverted, fullwidth } = React.useContext(TabsContext);
   const TabListRef = React.useRef(null);
   const paddingHorizontalTab = 12;
   const negativeGap = -35;
@@ -38,7 +38,7 @@ var TabList = React.forwardRef(({ children, ...others }, ref) => {
     arrow: { alignItems: "center", justifyContent: "center", paddingHorizontal: 2 }
   });
   const isVisibleArrowLeft = React.useMemo(() => {
-    if (!tabElms.length) return false;
+    if (!tabElms.length || !tabElms[0]) return false;
     return scrollLeft > tabElms[0].width / 2;
   }, [tabElms, scrollLeft]);
   const isVisibleArrowRight = React.useMemo(
@@ -84,13 +84,18 @@ var TabList = React.forwardRef(({ children, ...others }, ref) => {
   )), /* @__PURE__ */ React.createElement(
     ScrollView,
     {
+      scrollEnabled: fullwidth ? false : void 0,
       ref: TabListRef,
       scrollEventThrottle: 16,
       onContentSizeChange: (w) => setTabListWidth(w),
       horizontal: true,
       showsHorizontalScrollIndicator: false,
-      style: styles.tabList,
+      style: [styles.tabList, fullwidth && { flex: 1 }],
       onScroll: handleScrollList,
+      contentContainerStyle: {
+        flexGrow: fullwidth ? 1 : void 0,
+        flex: fullwidth ? 1 : void 0
+      },
       ...others
     },
     React.Children.map(children, (child, index) => {

package/lib/chunk-QNTBEAY4.mjs

@@ -0,0 +1,69 @@
+"use client";
+import {
+  item_default
+} from "./chunk-SHMAZXUA.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+import {
+  getJustifiedClassName
+} from "./chunk-L4UDEKQK.mjs";
+
+// components/segment-control/SegmentControl.tsx
+import clsx from "clsx";
+import React, { useState } from "react";
+var SegmentControl = React.forwardRef(({ className, id, onClick, children, activeIndex, align, ...others }, ref) => {
+  const { styled } = useTrilogyContext();
+  const classes = hashClass(styled, clsx("segmented-control", align && getJustifiedClassName(align), className));
+  const [activateIndex, setActivateIndex] = useState(activeIndex || 0);
+  const isActive = (index, childPropsActive) => {
+    if (typeof childPropsActive !== "undefined" && !activateIndex) {
+      return childPropsActive;
+    }
+    if (index === activateIndex) {
+      return true;
+    }
+  };
+  const toggleActive = (e, index) => {
+    setActivateIndex(index);
+    if (onClick) onClick(e);
+  };
+  React.useEffect(() => {
+    setActivateIndex(activateIndex);
+  }, [activateIndex]);
+  return /* @__PURE__ */ React.createElement("div", { ref, id, className: classes, ...others }, children && Array.isArray(children) && // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  children.map((child, index) => {
+    const props = {
+      active: Boolean(isActive(index, child.props.active)) || false,
+      disabled: child.props.disabled,
+      key: index,
+      onClick: (event) => {
+        toggleActive(event, index);
+        if (child) {
+          if (child.props.onClick) {
+            child.props.onClick(event);
+          }
+        }
+      }
+    };
+    return child && typeof child.valueOf() === "string" ? /* @__PURE__ */ React.createElement(
+      item_default,
+      {
+        disabled: props.disabled,
+        active: props.active,
+        key: props.key,
+        onClick: (e) => onClick == null ? void 0 : onClick(e)
+      },
+      child
+    ) : React.cloneElement(child, props);
+  }));
+});
+SegmentControl.displayName = "SegmentControl" /* SegmentControl */;
+var SegmentControl_default = SegmentControl;
+
+export {
+  SegmentControl_default
+};

package/lib/chunk-QOUQNN33.mjs

@@ -0,0 +1,68 @@
+"use client";
+import {
+  has,
+  is
+} from "./chunk-SWVRRUW7.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+import {
+  getJustifiedClassName
+} from "./chunk-L4UDEKQK.mjs";
+
+// components/image/Image.tsx
+import clsx from "clsx";
+import * as React from "react";
+var Image = React.forwardRef(({
+  src,
+  alt = "",
+  className,
+  id,
+  circled,
+  width,
+  height,
+  onClick,
+  radius,
+  align,
+  ...others
+}, ref) => {
+  const { styled } = useTrilogyContext();
+  const classes = hashClass(styled, clsx("image", className, align && is(getJustifiedClassName(align))));
+  const styles = {
+    image: {
+      width,
+      height
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    "figure",
+    {
+      ref,
+      id,
+      onClick: (e) => {
+        onClick == null ? void 0 : onClick(e);
+        e.stopPropagation();
+      },
+      className: classes,
+      ...others
+    },
+    /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        style: styles.image,
+        className: hashClass(styled, clsx(radius && has(`border-radius-${radius}`), circled ? is("circled") : "")),
+        src: typeof src === "string" ? src : "",
+        alt
+      }
+    )
+  );
+});
+Image.displayName = "Image" /* Image */;
+var Image_default = Image;
+
+export {
+  Image_default
+};

package/lib/{chunk-FIH3EYH2.mjs → chunk-QTEMHSK5.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   Icon_native_default
-} from "./chunk-H6FVJB5Z.mjs";
+} from "./chunk-UPP3GX33.mjs";
 import {
   getColorStyle
-} from "./chunk-VI2KFLCZ.mjs";
+} from "./chunk-E4YRRUI3.mjs";
 
 // components/link/Link.native.tsx
 import * as React from "react";

package/lib/{chunk-SYNRLOS5.mjs → chunk-R6JMSH4N.mjs}

@@ -3,17 +3,17 @@ import {
   Spacer_native_default
 } from "./chunk-54DJB6AO.mjs";
 import {
-  StatesContext
-} from "./chunk-CWIO3GEP.mjs";
+  getTypographyBoldStyle
+} from "./chunk-3LXODEBD.mjs";
 import {
   getColorStyle
-} from "./chunk-VI2KFLCZ.mjs";
+} from "./chunk-E4YRRUI3.mjs";
+import {
+  StatesContext
+} from "./chunk-CWIO3GEP.mjs";
 import {
   checkCents
 } from "./chunk-NGOFIGNH.mjs";
-import {
-  getTypographyBoldStyle
-} from "./chunk-5QUXSOHX.mjs";
 
 // components/price/Price.native.tsx
 import React, { useContext, useMemo } from "react";

package/lib/chunk-RGX6ZWXV.mjs

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

package/lib/{chunk-ZZRR7QJL.mjs → chunk-RHBTSMCQ.mjs}

@@ -12,14 +12,7 @@ import {
 // components/autocomplete/menu/AutoCompleteMenu.tsx
 import clsx from "clsx";
 import * as React from "react";
-var AutoCompleteMenu = ({
-  children,
-  className,
-  id,
-  absolute,
-  fullwidth,
-  testId
-}) => {
+var AutoCompleteMenu = ({ children, className, id, absolute, fullwidth, testId }) => {
   const { styled } = useTrilogyContext();
   return /* @__PURE__ */ React.createElement(
     "div",

package/lib/{chunk-ACSGONQB.mjs → chunk-RVE7QNTO.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   getColorStyle
-} from "./chunk-JOSZ4COK.mjs";
+} from "./chunk-7VSJ3RTI.mjs";
 
 // objects/Typography/TypographyColor/index.ts
 var TypographyColor = /* @__PURE__ */ ((TypographyColor2) => {

package/lib/{chunk-3XPLPYWH.mjs → chunk-RVU3IPAE.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   TableTr_default
-} from "./chunk-S7W4ZL46.mjs";
+} from "./chunk-COHZA3Q6.mjs";
 
 // components/table/tr/index.ts
 var tr_default = TableTr_default;

package/lib/chunk-RXGITNPE.mjs

@@ -0,0 +1,39 @@
+"use client";
+import {
+  Icon_default
+} from "./chunk-ALGX47MZ.mjs";
+import {
+  TrilogyColor,
+  getColorClassName
+} from "./chunk-7VSJ3RTI.mjs";
+import {
+  is
+} from "./chunk-SWVRRUW7.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+
+// components/list/item/ListItem.tsx
+import clsx from "clsx";
+import * as React from "react";
+var ListItem = React.forwardRef(({ className, id, children, iconName, status, testId }, ref) => {
+  const { styled } = useTrilogyContext();
+  const classes = clsx("list-item", className, status && is(getColorClassName(TrilogyColor[status])));
+  return /* @__PURE__ */ React.createElement("li", { ref, id, className: hashClass(styled, clsx(classes)), "data-testid": testId }, iconName && /* @__PURE__ */ React.createElement(
+    Icon_default,
+    {
+      className: status && clsx(is(getColorClassName(TrilogyColor[status]))),
+      name: iconName,
+      size: "small" /* SMALL */
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: hashClass(styled, clsx("list-item-content")) }, children));
+});
+ListItem.displayName = "ListItem" /* ListItem */;
+var ListItem_default = ListItem;
+
+export {
+  ListItem_default
+};

package/lib/{chunk-CYNSXZSV.mjs → chunk-RYABO2EX.mjs}

@@ -8,6 +8,7 @@ var IconName = /* @__PURE__ */ ((IconName2) => {
   IconName2["ARROW_RIGHT"] = "tri-arrow-right";
   IconName2["ARROW_UP"] = "tri-arrow-up";
   IconName2["BELL"] = "tri-bell";
+  IconName2["CALENDAR"] = "tri-calendar";
   IconName2["CHECK_CIRCLE"] = "tri-check-circle";
   IconName2["CHECK"] = "tri-check";
   IconName2["EXCLAMATION_CIRCLE"] = "tri-exclamation-circle";

package/lib/{chunk-AOXXQP4V.mjs → chunk-SFIOTEMN.mjs}

@@ -9,12 +9,10 @@ import {
 // components/modal/footer/ModalFooter.tsx
 import clsx from "clsx";
 import * as React from "react";
-var ModalFooter = React.forwardRef(
-  ({ children, className, id }, ref) => {
-    const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React.createElement("div", { ref, "data-modal-footer": "", id, className: hashClass(styled, clsx("modal-footer", className)) }, children);
-  }
-);
+var ModalFooter = React.forwardRef(({ children, className, id }, ref) => {
+  const { styled } = useTrilogyContext();
+  return /* @__PURE__ */ React.createElement("div", { ref, "data-modal-footer": "", id, className: hashClass(styled, clsx("modal-footer", className)) }, children);
+});
 ModalFooter.displayName = "ModalFooter" /* ModalFooter */;
 var ModalFooter_default = ModalFooter;
 

package/lib/chunk-SFL4T7RS.mjs

@@ -0,0 +1,84 @@
+"use client";
+import {
+  View_native_default
+} from "./chunk-4GKCUICZ.mjs";
+import {
+  Text_native_default
+} from "./chunk-MVQ252OA.mjs";
+import {
+  getColorStyle
+} from "./chunk-E4YRRUI3.mjs";
+import {
+  item_default
+} from "./chunk-SHMAZXUA.mjs";
+
+// components/segment-control/SegmentControl.native.tsx
+import React, { useState } from "react";
+import { StyleSheet } from "react-native";
+var SegmentControl = React.forwardRef(({ children, onClick, activeIndex, ...others }, ref) => {
+  const [activateIndex, setActivateIndex] = useState(activeIndex || 0);
+  const isActive = (index, childPropsActive) => {
+    if (typeof childPropsActive !== "undefined" && !activateIndex) {
+      return childPropsActive;
+    }
+    if (index === activateIndex) {
+      return true;
+    }
+  };
+  const toggleActive = (e, index) => {
+    setActivateIndex(index);
+    if (onClick) {
+      onClick(e);
+    }
+  };
+  const styles = StyleSheet.create({
+    padding: {
+      paddingLeft: 10,
+      paddingRight: 10
+    },
+    segmentedControl: {
+      flexDirection: "row",
+      width: "100%",
+      backgroundColor: getColorStyle("WHITE" /* BACKGROUND */),
+      borderRadius: 4,
+      padding: 4,
+      paddingRight: -4,
+      borderWidth: 1,
+      borderColor: getColorStyle("NEUTRAL" /* NEUTRAL */)
+    }
+  });
+  return /* @__PURE__ */ React.createElement(View_native_default, { ref, style: styles.padding }, /* @__PURE__ */ React.createElement(View_native_default, { style: styles.segmentedControl, ...others }, children && Array.isArray(children) && // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  children.map((child, index) => {
+    const props = {
+      active: Boolean(isActive(index, child.props.active)) || false,
+      disabled: child.props.disabled,
+      key: index,
+      tabIndex: index,
+      onClick: (event) => {
+        toggleActive(event, index);
+        if (child) {
+          if (child.props.onClick) {
+            child.props.onClick(event);
+          }
+        }
+      }
+    };
+    if (index < 5) {
+      return typeof child.valueOf() === "string" ? /* @__PURE__ */ React.createElement(
+        item_default,
+        {
+          disabled: props.disabled,
+          active: props.active,
+          onClick: (e) => onClick == null ? void 0 : onClick(e)
+        },
+        /* @__PURE__ */ React.createElement(Text_native_default, { level: 1 /* ONE */ }, String(child))
+      ) : React.cloneElement(child, props);
+    }
+  })));
+});
+SegmentControl.displayName = "SegmentControl" /* SegmentControl */;
+var SegmentControl_native_default = SegmentControl;
+
+export {
+  SegmentControl_native_default
+};