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

package/lib/components/columns/Columns.native.js

@@ -40,12 +40,13 @@ var ColumnsGapValue = [0, 4, 8, 12, 16, 24, 32, 40, 48, 54, 62];
 
 // components/columns/context/index.tsx
 var import_react = __toESM(require("react"));
-var ColumnsContext = import_react.default.createContext({
+var defaultContextValue = {
   scrollable: false,
   width: 0,
   realGap: 16,
   childrensLength: 1
-});
+};
+var ColumnsContext = import_react.default.createContext(defaultContextValue);
 
 // objects/facets/Alignable/index.ts
 var getAlignStyle = (alignType) => {
@@ -64,6 +65,17 @@ var getAlignStyle = (alignType) => {
 // components/columns/Columns.native.tsx
 var import_react2 = __toESM(require("react"));
 var import_react_native = require("react-native");
+var staticStyles = import_react_native.StyleSheet.create({
+  centered: {
+    justifyContent: "center"
+  },
+  multiline: {
+    flexWrap: "wrap"
+  },
+  mobile: {
+    flexDirection: "column"
+  }
+});
 var Columns = import_react2.default.forwardRef(
   ({ children, align, gap, verticalAlign, fullBleed, scrollable, multiline, fullheight, ...others }, ref) => {
     const [width, setWidth] = (0, import_react2.useState)(0);
@@ -81,76 +93,67 @@ var Columns = import_react2.default.forwardRef(
       [fullBleed, width]
     );
     const realGap = import_react2.default.useMemo(() => typeof gap === "undefined" && 16 || ColumnsGapValue[gap], [gap]);
-    const styles = import_react_native.StyleSheet.create({
-      columns: {
-        width: fullBleed && width ? width + enlarge * 2 : "100%",
-        marginHorizontal: -enlarge,
-        paddingHorizontal: enlarge,
-        flexDirection: "row",
-        gap: realGap,
-        height: fullheight ? "100%" : "auto"
-      },
-      centered: {
-        justifyContent: "center"
-      },
-      verticalAlign: {
-        alignItems: getAlignStyle(verticalAlign)
-      },
-      multiline: {
-        flexWrap: "wrap"
-      },
-      scrollContainer: {
-        paddingHorizontal: enlarge,
-        gap: realGap
+    const dynamicStyles = import_react2.default.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 = import_react2.default.useMemo(
+      () => ({
+        width,
+        realGap,
+        scrollable: scrollable || false,
+        childrensLength: import_react2.default.Children.count(children)
+      }),
+      [width, realGap, scrollable, children]
+    );
+    return /* @__PURE__ */ import_react2.default.createElement(ColumnsContext.Provider, { value: contextValue }, !scrollable && /* @__PURE__ */ import_react2.default.createElement(
+      import_react_native.View,
+      {
+        ref,
+        onLayout: onLayoutHandler,
+        style: [
+          dynamicStyles.columns,
+          multiline && staticStyles.multiline,
+          align === "ALIGNED_CENTER" /* ALIGNED_CENTER */ && staticStyles.centered,
+          verticalAlign && dynamicStyles.verticalAlign
+        ],
+        ...others
       },
-      mobile: {
-        flexDirection: "column"
-      }
-    });
-    return /* @__PURE__ */ import_react2.default.createElement(
-      ColumnsContext.Provider,
+      children
+    ), scrollable && /* @__PURE__ */ import_react2.default.createElement(
+      import_react_native.View,
       {
-        value: {
-          width,
-          realGap,
-          scrollable: scrollable || false,
-          childrensLength: import_react2.default.Children.count(children)
+        onLayout: onLayoutHandler,
+        style: {
+          marginHorizontal: -enlarge
         }
       },
-      !scrollable && /* @__PURE__ */ import_react2.default.createElement(
-        import_react_native.View,
+      /* @__PURE__ */ import_react2.default.createElement(
+        import_react_native.ScrollView,
         {
-          ref,
-          onLayout: onLayoutHandler,
-          style: [
-            styles.columns,
-            multiline && styles.multiline,
-            align === "ALIGNED_CENTER" /* ALIGNED_CENTER */ && styles.centered,
-            verticalAlign && styles.verticalAlign
-          ],
-          ...others
+          horizontal: true,
+          contentContainerStyle: dynamicStyles.scrollContainer,
+          showsHorizontalScrollIndicator: false
         },
         children
-      ),
-      scrollable && /* @__PURE__ */ import_react2.default.createElement(
-        import_react_native.View,
-        {
-          onLayout: onLayoutHandler,
-          style: {
-            marginHorizontal: -enlarge
-          }
-        },
-        /* @__PURE__ */ import_react2.default.createElement(
-          import_react_native.ScrollView,
-          {
-            horizontal: true,
-            contentContainerStyle: styles.scrollContainer,
-            showsHorizontalScrollIndicator: false
-          },
-          children
-        )
       )
-    );
+    ));
   }
 );
 Columns.displayName = "Columns" /* Columns */;

package/lib/components/columns/Columns.native.mjs

@@ -1,11 +1,11 @@
 "use client";
 import {
   Columns_native_default
-} from "../../chunk-5RU72DNI.mjs";
-import "../../chunk-JZ3SSSRS.mjs";
+} from "../../chunk-NRTMJLXK.mjs";
+import "../../chunk-LOROW3UU.mjs";
 import "../../chunk-KUF5FQNN.mjs";
-import "../../chunk-HV6TXVFA.mjs";
-import "../../chunk-NTS75UVH.mjs";
+import "../../chunk-CD6DMMCL.mjs";
+import "../../chunk-VDLM4YQP.mjs";
 import "../../chunk-QIPGVLHJ.mjs";
 export {
   Columns_native_default as default

package/lib/components/columns/ColumnsProps.d.mts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GapSize } from '../../components/columns/ColumnsTypes';
 import { AlignableProps } from '../../objects/facets/Alignable';
 import { CommonProps } from '../../objects/facets/CommonProps';

package/lib/components/columns/ColumnsProps.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GapSize } from '../../components/columns/ColumnsTypes';
 import { AlignableProps } from '../../objects/facets/Alignable';
 import { CommonProps } from '../../objects/facets/CommonProps';

package/lib/components/columns/column/Column.js

@@ -76,6 +76,8 @@ var getAlignClassName = (alignType) => {
       return "aligned-end";
     case "STRETCH":
       return "aligned-stretch";
+    case "ALIGNED_STRETCH":
+      return "aligned-stretch";
     default:
       return "aligned-start";
   }

package/lib/components/columns/column/Column.mjs

@@ -1,12 +1,12 @@
 "use client";
 import {
   Column_default
-} from "../../../chunk-4K5SE35T.mjs";
+} from "../../../chunk-ZX64XZS4.mjs";
 import "../../../chunk-SWVRRUW7.mjs";
 import "../../../chunk-UFMRE754.mjs";
 import "../../../chunk-ZB4OWTDD.mjs";
-import "../../../chunk-HV6TXVFA.mjs";
-import "../../../chunk-NTS75UVH.mjs";
+import "../../../chunk-CD6DMMCL.mjs";
+import "../../../chunk-VDLM4YQP.mjs";
 import "../../../chunk-QIPGVLHJ.mjs";
 export {
   Column_default as default

package/lib/components/columns/column/Column.native.d.mts

@@ -2,8 +2,11 @@ import { ColumnProps } from '../../../components/columns/column/ColumnProps';
 import React from 'react';
 import { View } from 'react-native';
 /**
- * Columns Item Component - Columns Child
+ * Column Component - Columns Child
  * @param children {React.ReactNode}
+ * @param narrow {boolean} Makes the column only as wide as its content.
+ * @param size {number} Size of the column based on a 12-column grid system.
+ * @param verticalAlign { 'top' | 'bottom' | 'center' } Vertical alignment of the column content.
  */
-declare const Column: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<View>>;
+declare const Column: React.MemoExoticComponent<React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<View>>>;
 export default Column;

package/lib/components/columns/column/Column.native.d.ts

@@ -2,8 +2,11 @@ import { ColumnProps } from '../../../components/columns/column/ColumnProps';
 import React from 'react';
 import { View } from 'react-native';
 /**
- * Columns Item Component - Columns Child
+ * Column Component - Columns Child
  * @param children {React.ReactNode}
+ * @param narrow {boolean} Makes the column only as wide as its content.
+ * @param size {number} Size of the column based on a 12-column grid system.
+ * @param verticalAlign { 'top' | 'bottom' | 'center' } Vertical alignment of the column content.
  */
-declare const Column: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<View>>;
+declare const Column: React.MemoExoticComponent<React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<View>>>;
 export default Column;

package/lib/components/columns/column/Column.native.js

@@ -37,12 +37,13 @@ module.exports = __toCommonJS(Column_native_exports);
 
 // components/columns/context/index.tsx
 var import_react = __toESM(require("react"));
-var ColumnsContext = import_react.default.createContext({
+var defaultContextValue = {
   scrollable: false,
   width: 0,
   realGap: 16,
   childrensLength: 1
-});
+};
+var ColumnsContext = import_react.default.createContext(defaultContextValue);
 
 // context/providerTheme/index.native.tsx
 var import_react2 = __toESM(require("react"));
@@ -52,11 +53,11 @@ var defaultTheme = {
   colors,
   fontFamily: { regular: "poppins-regular", medium: "poppins-medium", bold: "poppins-semibold" }
 };
-var defaultContextValue = {
+var defaultContextValue2 = {
   theme: defaultTheme,
   setTheme: () => void 0
 };
-var TrilogyThemeContext = import_react2.default.createContext(defaultContextValue);
+var TrilogyThemeContext = import_react2.default.createContext(defaultContextValue2);
 
 // objects/facets/Color/index.native.tsx
 var import_react3 = require("react");
@@ -65,6 +66,7 @@ var colors = {
   ["MAIN" /* MAIN */]: ["#3d5d7e", "main", "white"],
   ["MAIN_FADE" /* MAIN_FADE */]: ["#BBC6CD", "main-fade", "white"],
   ["ACCENT" /* ACCENT */]: ["#da641b", "accent", "white"],
+  ["ACCENT_FADE" /* ACCENT_FADE */]: ["#faebe3", "accent-fade", "white"],
   ["FONT" /* FONT */]: ["#3d5d7e", "main", "white"],
   ["FONT_PLACEHOLDER" /* FONT_PLACEHOLDER */]: ["#687a87", "font-placeholder", "white"],
   ["SUCCESS" /* SUCCESS */]: ["#007B52", "success", "white"],
@@ -176,6 +178,12 @@ var Icon = import_react5.default.forwardRef(
       icon: {
         transform: isIOS ? stretched && [{ skewX: "20deg" }] || [{ skewX: "0deg" }] : []
       },
+      iconContainer: {
+        alignItems: "center",
+        justifyContent: "center",
+        width: defaultSize,
+        height: defaultSize
+      },
       stretched: {
         justifyContent: "center",
         alignItems: "center",
@@ -230,7 +238,7 @@ var Icon = import_react5.default.forwardRef(
           }
         ));
       } else {
-        iconView = /* @__PURE__ */ import_react5.default.createElement(import_react_native2.View, { ...others }, /* @__PURE__ */ import_react5.default.createElement(
+        iconView = /* @__PURE__ */ import_react5.default.createElement(import_react_native2.View, { style: styles.iconContainer, ...others }, /* @__PURE__ */ import_react5.default.createElement(
           import_css.WithLocalSvg,
           {
             style: [styles.icon, style],
@@ -265,57 +273,52 @@ var STATUS_COLORS = {
   DEFAULT: { color: "MAIN" /* MAIN */, backgroundColor: "MAIN_FADE" /* MAIN_FADE */ }
 };
 
-// context/providerTheme/index.tsx
-var import_react6 = __toESM(require("react"));
-var defaultTheme2 = {
-  icons: {},
-  colors: {},
-  fontFamily: {}
-};
-var defaultContextValue2 = {
-  theme: defaultTheme2,
-  setTheme: () => void 0
-};
-var TrilogyThemeContext2 = import_react6.default.createContext(defaultContextValue2);
-
-// objects/Typography/TypographyBold/index.tsx
-var import_react7 = require("react");
+// objects/Typography/TypographyBold/index.native.tsx
+var import_react6 = require("react");
 
 // components/columns/column/Column.native.tsx
-var import_react8 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_react_native3 = require("react-native");
-var Column = import_react8.default.forwardRef(
-  ({ children, narrow, size, verticalAlign, ...others }, ref) => {
-    const { width, realGap, scrollable, childrensLength } = import_react8.default.useContext(ColumnsContext);
-    const scrollableStyle = import_react8.default.useMemo(
-      () => ({
-        width: size ? size / 12 * width - realGap * ((childrensLength - 1) / childrensLength) : narrow ? "auto" : width - 2 * realGap
-      }),
-      [size, narrow, width, realGap, childrensLength]
-    );
-    const noScrollableStyle = import_react8.default.useMemo(
-      () => ({
-        flex: narrow ? 0 : 1,
-        flexGrow: size || narrow ? 0 : 1,
-        flexShrink: narrow ? 1 : 0,
-        flexBasis: size ? size / 12 * width - realGap * ((childrensLength - 1) / childrensLength) : "auto"
-      }),
-      [size, narrow, width, realGap, childrensLength]
-    );
-    return /* @__PURE__ */ import_react8.default.createElement(
-      import_react_native3.View,
-      {
-        ref,
-        style: [
-          scrollable && scrollableStyle,
-          !scrollable && noScrollableStyle,
-          { justifyContent: getAlignStyle(verticalAlign) }
-        ],
-        ...others
-      },
-      children
-    );
-  }
+var Column = import_react7.default.memo(
+  import_react7.default.forwardRef(
+    ({ children, narrow, size, verticalAlign, ...others }, ref) => {
+      const { width, realGap, scrollable, childrensLength } = import_react7.default.useContext(ColumnsContext);
+      const calculatedWidth = import_react7.default.useMemo(
+        () => size ? size / 12 * width - realGap * ((childrensLength - 1) / childrensLength) : null,
+        [size, width, realGap, childrensLength]
+      );
+      const scrollableStyle = import_react7.default.useMemo(
+        () => ({
+          width: calculatedWidth || (narrow ? "auto" : width - 2 * realGap)
+        }),
+        [calculatedWidth, narrow, width, realGap]
+      );
+      const noScrollableStyle = import_react7.default.useMemo(
+        () => ({
+          flex: narrow ? 0 : 1,
+          flexGrow: size || narrow ? 0 : 1,
+          flexShrink: narrow ? 1 : 0,
+          flexBasis: calculatedWidth || "auto"
+        }),
+        [narrow, size, calculatedWidth]
+      );
+      const justifyContentStyle = import_react7.default.useMemo(
+        () => ({
+          justifyContent: getAlignStyle(verticalAlign)
+        }),
+        [verticalAlign]
+      );
+      return /* @__PURE__ */ import_react7.default.createElement(
+        import_react_native3.View,
+        {
+          ref,
+          style: [scrollable && scrollableStyle, !scrollable && noScrollableStyle, justifyContentStyle],
+          ...others
+        },
+        children
+      );
+    }
+  )
 );
 Column.displayName = "Column" /* Column */;
 var Column_native_default = Column;

package/lib/components/columns/column/Column.native.mjs

@@ -1,21 +1,23 @@
 "use client";
 import {
   Column_native_default
-} from "../../../chunk-UV7KNMPY.mjs";
-import "../../../chunk-JZ3SSSRS.mjs";
+} from "../../../chunk-ZNF2AXYR.mjs";
+import "../../../chunk-LOROW3UU.mjs";
 import "../../../chunk-7M6BHGK7.mjs";
 import "../../../chunk-VNWHCGCD.mjs";
-import "../../../chunk-SJ5DUOZ6.mjs";
+import "../../../chunk-X67AAUB2.mjs";
 import "../../../chunk-TFNM3EBG.mjs";
-import "../../../chunk-MKOK7VNZ.mjs";
+import "../../../chunk-YKUYXBXK.mjs";
 import "../../../chunk-ZEJDFWMP.mjs";
-import "../../../chunk-KNRXLZZP.mjs";
+import "../../../chunk-MB55ARZ7.mjs";
 import "../../../chunk-D5HHHZDS.mjs";
-import "../../../chunk-2CYVOYRM.mjs";
+import "../../../chunk-3LXODEBD.mjs";
+import "../../../chunk-WVL5S3CD.mjs";
 import "../../../chunk-7L5452RP.mjs";
-import "../../../chunk-H6FVJB5Z.mjs";
+import "../../../chunk-2K2TD7FH.mjs";
+import "../../../chunk-UPP3GX33.mjs";
+import "../../../chunk-E4YRRUI3.mjs";
 import "../../../chunk-CWIO3GEP.mjs";
-import "../../../chunk-VI2KFLCZ.mjs";
 import "../../../chunk-R6PFY5VS.mjs";
 import "../../../chunk-RXBVZD3M.mjs";
 import "../../../chunk-A2ASOVUR.mjs";
@@ -38,20 +40,17 @@ import "../../../chunk-XIQL4ZTN.mjs";
 import "../../../chunk-UUXUTBLZ.mjs";
 import "../../../chunk-QOEJLTZN.mjs";
 import "../../../chunk-B6WC6WS2.mjs";
-import "../../../chunk-K2VWHGPL.mjs";
+import "../../../chunk-MAX3RSBG.mjs";
 import "../../../chunk-6BTWLQPI.mjs";
 import "../../../chunk-G6BHSMLA.mjs";
 import "../../../chunk-THOTRBD4.mjs";
 import "../../../chunk-ATW7ITPH.mjs";
 import "../../../chunk-IGMJNGTZ.mjs";
-import "../../../chunk-5QUXSOHX.mjs";
 import "../../../chunk-L4UDEKQK.mjs";
-import "../../../chunk-P372ZF3A.mjs";
-import "../../../chunk-HV6TXVFA.mjs";
-import "../../../chunk-CYNSXZSV.mjs";
-import "../../../chunk-YK5HPRX4.mjs";
+import "../../../chunk-CD6DMMCL.mjs";
+import "../../../chunk-RYABO2EX.mjs";
 import "../../../chunk-4UHBBNZ7.mjs";
-import "../../../chunk-NTS75UVH.mjs";
+import "../../../chunk-VDLM4YQP.mjs";
 import "../../../chunk-QIPGVLHJ.mjs";
 export {
   Column_native_default as default

package/lib/components/columns/column/ColumnProps.d.mts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ColumnsSize } from '../../../components/columns/ColumnsTypes';
 import { AlignableProps } from '../../../objects/facets/Alignable';
 import { CommonProps } from '../../../objects/facets/CommonProps';

package/lib/components/columns/column/ColumnProps.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ColumnsSize } from '../../../components/columns/ColumnsTypes';
 import { AlignableProps } from '../../../objects/facets/Alignable';
 import { CommonProps } from '../../../objects/facets/CommonProps';

package/lib/components/columns/column/ColumnPropsDefaults.js

@@ -17,8 +17,8 @@ export default {
     "type": "string",
     "values": [
       "undefined",
-      "1",
       "2",
+      "1",
       "3",
       "4",
       "5",
@@ -35,8 +35,8 @@ export default {
     "type": "string",
     "values": [
       "undefined",
-      "1",
       "2",
+      "1",
       "3",
       "4",
       "5",
@@ -53,8 +53,8 @@ export default {
     "type": "string",
     "values": [
       "undefined",
-      "1",
       "2",
+      "1",
       "3",
       "4",
       "5",
@@ -71,8 +71,8 @@ export default {
     "type": "string",
     "values": [
       "undefined",
-      "1",
       "2",
+      "1",
       "3",
       "4",
       "5",
@@ -89,8 +89,8 @@ export default {
     "type": "string",
     "values": [
       "undefined",
-      "1",
       "2",
+      "1",
       "3",
       "4",
       "5",
@@ -107,8 +107,8 @@ export default {
     "type": "string",
     "values": [
       "undefined",
-      "1",
       "2",
+      "1",
       "3",
       "4",
       "5",
@@ -125,8 +125,8 @@ export default {
     "type": "string",
     "values": [
       "undefined",
-      "1",
       "2",
+      "1",
       "3",
       "4",
       "5",
@@ -143,8 +143,8 @@ export default {
     "type": "string",
     "values": [
       "undefined",
-      "1",
       "2",
+      "1",
       "3",
       "4",
       "5",
@@ -161,8 +161,8 @@ export default {
     "type": "string",
     "values": [
       "undefined",
-      "1",
       "2",
+      "1",
       "3",
       "4",
       "5",
@@ -179,8 +179,8 @@ export default {
     "type": "string",
     "values": [
       "undefined",
-      "1",
       "2",
+      "1",
       "3",
       "4",
       "5",
@@ -197,8 +197,8 @@ export default {
     "type": "string",
     "values": [
       "undefined",
-      "1",
       "2",
+      "1",
       "3",
       "4",
       "5",
@@ -215,8 +215,8 @@ export default {
     "type": "string",
     "values": [
       "undefined",
-      "1",
       "2",
+      "1",
       "3",
       "4",
       "5",
@@ -233,8 +233,8 @@ export default {
     "type": "string",
     "values": [
       "undefined",
-      "1",
       "2",
+      "1",
       "3",
       "4",
       "5",
@@ -251,8 +251,8 @@ export default {
     "type": "string",
     "values": [
       "undefined",
-      "1",
       "2",
+      "1",
       "3",
       "4",
       "5",

package/lib/components/columns/column/index.js

@@ -76,6 +76,8 @@ var getAlignClassName = (alignType) => {
       return "aligned-end";
     case "STRETCH":
       return "aligned-stretch";
+    case "ALIGNED_STRETCH":
+      return "aligned-stretch";
     default:
       return "aligned-start";
   }

package/lib/components/columns/column/index.mjs

@@ -1,13 +1,13 @@
 "use client";
 import {
   column_default
-} from "../../../chunk-2CRZJ26O.mjs";
-import "../../../chunk-4K5SE35T.mjs";
+} from "../../../chunk-6RNUF4LV.mjs";
+import "../../../chunk-ZX64XZS4.mjs";
 import "../../../chunk-SWVRRUW7.mjs";
 import "../../../chunk-UFMRE754.mjs";
 import "../../../chunk-ZB4OWTDD.mjs";
-import "../../../chunk-HV6TXVFA.mjs";
-import "../../../chunk-NTS75UVH.mjs";
+import "../../../chunk-CD6DMMCL.mjs";
+import "../../../chunk-VDLM4YQP.mjs";
 import "../../../chunk-QIPGVLHJ.mjs";
 export {
   column_default as default