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

package/lib/{chunk-VUPZKCZM.mjs → chunk-XP4NKGQY.mjs}

@@ -1,10 +1,10 @@
 "use client";
+import {
+  Text_default
+} from "./chunk-HHE7L3CW.mjs";
 import {
   checkCents
 } from "./chunk-NGOFIGNH.mjs";
-import {
-  Text_default
-} from "./chunk-GRUJ62D7.mjs";
 import {
   has,
   is

package/lib/chunk-XPCXYBYT.mjs

@@ -0,0 +1,29 @@
+"use client";
+import {
+  index_native_default
+} from "./chunk-PBPNVWL2.mjs";
+import {
+  SpacingMatrixMode
+} from "./chunk-DU46N4OG.mjs";
+import {
+  SpacerSize
+} from "./chunk-IJCGAWJK.mjs";
+
+// components/checkbox/list/CheckboxList.native.tsx
+import * as React from "react";
+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 }, ref) => {
+  return /* @__PURE__ */ React.createElement(index_native_default, { ...{ autolayout: SPACING_MATRIX, children } });
+});
+CheckboxList.displayName = "CheckboxList" /* CheckboxList */;
+var CheckboxList_native_default = CheckboxList;
+
+export {
+  CheckboxList_native_default
+};

package/lib/{chunk-Q6MLZROD.mjs → chunk-XS7CR5NW.mjs}

@@ -1,19 +1,19 @@
 "use client";
 import {
   option_default
-} from "./chunk-MWNATFOH.mjs";
+} from "./chunk-I2BTIELF.mjs";
 import {
   SelectDynamic_default
-} from "./chunk-6SECJDLH.mjs";
+} from "./chunk-SZJMEVMK.mjs";
 import {
   SelectContext
 } from "./chunk-T7LVKIVR.mjs";
 import {
   Text_default
-} from "./chunk-GRUJ62D7.mjs";
+} from "./chunk-HHE7L3CW.mjs";
 import {
   Icon_default
-} from "./chunk-Y3J6NXB4.mjs";
+} from "./chunk-SGAZRZIK.mjs";
 import {
   is
 } from "./chunk-SWVRRUW7.mjs";

package/lib/chunk-XY6EUXMK.mjs

@@ -0,0 +1,117 @@
+"use client";
+import {
+  Sticker_native_default
+} from "./chunk-NXCRO4B2.mjs";
+import {
+  Text_native_default
+} from "./chunk-RPXUKVT4.mjs";
+import {
+  Icon_native_default
+} from "./chunk-STJ5TNSE.mjs";
+import {
+  getColorStyle
+} from "./chunk-VI2KFLCZ.mjs";
+
+// components/radio/tiles/tile/RadioTile.native.tsx
+import React, { useCallback, useMemo, useState } from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+var RadioTile = React.forwardRef(
+  ({
+    checked,
+    disabled,
+    id = React.useId(),
+    label,
+    onChange,
+    name,
+    value,
+    description,
+    icon,
+    horizontal,
+    readonly,
+    sticker,
+    stickerVariant = "ACCENT" /* ACCENT */,
+    ...others
+  }, ref) => {
+    const [stickerHeight, setStickerHeight] = useState(0);
+    const styles = StyleSheet.create({
+      container: {
+        flexDirection: horizontal ? "row" : "column",
+        width: horizontal ? "100%" : void 0,
+        borderWidth: checked ? 2 : 1,
+        alignItems: "center",
+        gap: 12 /* THREE */,
+        borderRadius: 6,
+        padding: !checked ? 16 /* FOUR */ : 16 /* FOUR */ - 1,
+        maxWidth: horizontal ? void 0 : "50%",
+        backgroundColor: getColorStyle(disabled ? "DISABLED_FADE" /* DISABLED_FADE */ : "WHITE" /* BACKGROUND */),
+        borderColor: getColorStyle(
+          disabled ? "DISABLED" /* DISABLED */ : checked ? "MAIN" /* MAIN */ : "STROKE" /* STROKE */
+        )
+      },
+      icon: {
+        width: "auto"
+      },
+      content: {
+        width: "auto",
+        gap: 4 /* ONE */,
+        flex: 1
+      },
+      sticker: {
+        position: "absolute",
+        top: checked ? -stickerHeight / 2 - 1 : -stickerHeight / 2,
+        right: checked ? 15 : 16
+      }
+    });
+    const typoTitle = useMemo(() => {
+      const typos = ["has-text-weight-semibold" /* TEXT_WEIGHT_SEMIBOLD */];
+      if (!horizontal) typos.push("has-text-centered" /* TEXT_CENTERED */);
+      if (disabled) typos.push("has-text-disabled" /* TEXT_DISABLED */);
+      return typos;
+    }, [disabled, horizontal]);
+    const typoText = useMemo(() => {
+      const typos = [];
+      if (!horizontal) typos.push("has-text-centered" /* TEXT_CENTERED */);
+      if (disabled) typos.push("has-text-disabled" /* TEXT_DISABLED */);
+      return typos;
+    }, [horizontal, disabled]);
+    const handleChange = useCallback(() => {
+      if (onChange && !readonly && !disabled)
+        onChange({
+          radioValue: value || "",
+          radioName: name || "",
+          radioChecked: true,
+          radioId: id
+        });
+    }, [value, name, id, disabled, readonly, onChange]);
+    return /* @__PURE__ */ React.createElement(TouchableOpacity, { ref, disabled, style: [styles.container], onPress: handleChange, ...others }, /* @__PURE__ */ React.createElement(InputRadio, { checked, disabled }), sticker && /* @__PURE__ */ React.createElement(View, { style: styles.sticker, onLayout: (e) => setStickerHeight(e.nativeEvent.layout.height) }, /* @__PURE__ */ React.createElement(Sticker_native_default, { label: sticker, variant: stickerVariant, className: "radio-sticker", small: true })), icon && /* @__PURE__ */ React.createElement(View, { style: [styles.icon] }, /* @__PURE__ */ React.createElement(Icon_native_default, { size: "small" /* SMALL */, name: icon })), /* @__PURE__ */ React.createElement(View, { style: [styles.content] }, label && /* @__PURE__ */ React.createElement(Text_native_default, { level: 1 /* ONE */, typo: typoTitle }, String(label)), description && typeof description.valueOf() === "string" ? /* @__PURE__ */ React.createElement(Text_native_default, { level: 2 /* TWO */, typo: typoText }, String(description)) : description));
+  }
+);
+var InputRadio = ({ checked, disabled }) => {
+  const styles = StyleSheet.create({
+    input: {
+      marginRight: "auto",
+      width: 18,
+      height: 18,
+      borderWidth: 1,
+      borderRadius: 18,
+      justifyContent: "center",
+      alignItems: "center",
+      borderColor: getColorStyle(disabled ? "DISABLED" /* DISABLED */ : checked ? "MAIN" /* MAIN */ : "STROKE" /* STROKE */)
+    },
+    inputRadio: {
+      width: 12,
+      height: 12,
+      borderRadius: 12,
+      backgroundColor: getColorStyle(
+        disabled && checked ? "DISABLED" /* DISABLED */ : disabled && !checked ? "DISABLED_FADE" /* DISABLED_FADE */ : checked ? "MAIN" /* MAIN */ : "WHITE" /* BACKGROUND */
+      )
+    }
+  });
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.input] }, /* @__PURE__ */ React.createElement(View, { style: [styles.inputRadio] }));
+};
+RadioTile.displayName = "RadioTile" /* RadioTile */;
+var RadioTile_native_default = RadioTile;
+
+export {
+  RadioTile_native_default
+};

package/lib/{chunk-2KUCOY5Z.mjs → chunk-XZF6TES3.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   BoxHeader_default
-} from "./chunk-F7YNM3BY.mjs";
+} from "./chunk-FSTU72UW.mjs";
 
 // components/box/header/index.ts
 var header_default = BoxHeader_default;

package/lib/chunk-Y3EHTJD4.mjs

@@ -0,0 +1,62 @@
+"use client";
+import {
+  Text_native_default
+} from "./chunk-RPXUKVT4.mjs";
+import {
+  getColorStyle
+} from "./chunk-VI2KFLCZ.mjs";
+
+// components/radio/Radio.native.tsx
+import React from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+var Radio = React.forwardRef(
+  ({ id = React.useId(), checked, name, onChange, disabled, readonly, label, value }, ref) => {
+    const styles = StyleSheet.create({
+      container: {
+        flexDirection: "row",
+        alignItems: "center"
+      },
+      radio: {
+        alignItems: "center",
+        justifyContent: "center",
+        borderColor: getColorStyle(
+          disabled ? "DISABLED" /* DISABLED */ : checked ? "MAIN" /* MAIN */ : "STROKE" /* STROKE */
+        ),
+        borderWidth: 1,
+        width: 18,
+        height: 18,
+        borderRadius: 10,
+        marginRight: 10
+      },
+      icon: {
+        borderRadius: 12,
+        width: 12,
+        height: 12,
+        backgroundColor: getColorStyle("MAIN" /* MAIN */)
+      },
+      label: {
+        paddingTop: 2,
+        color: disabled && getColorStyle("DISABLED" /* DISABLED */) || checked && getColorStyle("MAIN" /* MAIN */) || getColorStyle("MAIN" /* MAIN */)
+      }
+    });
+    const handleClick = (value2) => {
+      if (!readonly) {
+        if (onChange) {
+          onChange({
+            radioId: id,
+            radioValue: value2,
+            radioName: name || "",
+            radioChecked: true
+          });
+        }
+      }
+    };
+    return /* @__PURE__ */ React.createElement(TouchableOpacity, { ref, disabled, style: styles.container, onPress: () => handleClick(value != null ? value : "") }, /* @__PURE__ */ React.createElement(View, { style: styles.radio, testID: id }, checked && /* @__PURE__ */ React.createElement(View, { style: styles.icon })), label && typeof label.valueOf() === "string" ? /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.label }, String(label)) : label);
+  }
+);
+Radio.displayName = "Radio" /* Radio */;
+var Radio_native_default = Radio;
+
+export {
+  Radio_native_default
+};

package/lib/chunk-Y4ZMPV3Q.mjs

@@ -0,0 +1,58 @@
+"use client";
+import {
+  TimelineItemContext
+} from "./chunk-JDN37IEF.mjs";
+import {
+  TimelineHeightContext
+} from "./chunk-3SDJGR37.mjs";
+import {
+  Icon_native_default
+} from "./chunk-STJ5TNSE.mjs";
+import {
+  getColorStyle
+} from "./chunk-VI2KFLCZ.mjs";
+
+// components/timeline/marker/TimelineMarker.native.tsx
+import React, { useContext } from "react";
+import { StyleSheet, View } from "react-native";
+var TimelineMarker = React.forwardRef(
+  ({ iconName }, ref) => {
+    const { active, done, cancel } = useContext(TimelineItemContext);
+    const { height } = useContext(TimelineHeightContext);
+    const styles = StyleSheet.create({
+      marker: {
+        flex: 1,
+        alignSelf: "flex-start",
+        flexDirection: "column"
+      },
+      divider: {
+        top: 8 /* TWO */,
+        height: height ? height - 48 : 74,
+        borderStyle: "solid",
+        borderLeftWidth: 2,
+        marginLeft: "auto",
+        marginRight: "auto",
+        borderColor: active && getColorStyle("MAIN" /* MAIN */) || cancel && getColorStyle("NEUTRAL" /* NEUTRAL */) || done && getColorStyle("MAIN" /* MAIN */) || getColorStyle("NEUTRAL" /* NEUTRAL */)
+      },
+      icon: {
+        alignSelf: "center"
+      }
+    });
+    return /* @__PURE__ */ React.createElement(View, { ref, style: styles.marker }, /* @__PURE__ */ React.createElement(View, { style: styles.icon }, /* @__PURE__ */ React.createElement(
+      Icon_native_default,
+      {
+        name: iconName,
+        circled: true,
+        color: active && "WHITE" /* BACKGROUND */ || cancel && "NEUTRAL_FADE" /* NEUTRAL_FADE */ || done && "WHITE" /* BACKGROUND */ || "WHITE" /* BACKGROUND */,
+        backgroundColor: active && "MAIN" /* MAIN */ || cancel && "NEUTRAL" /* NEUTRAL */ || done && "MAIN" /* MAIN */ || "NEUTRAL" /* NEUTRAL */,
+        size: "small" /* SMALL */
+      }
+    )), /* @__PURE__ */ React.createElement(View, { style: styles.divider }));
+  }
+);
+TimelineMarker.displayName = "TimelineMarker" /* TimelineMarker */;
+var TimelineMarker_native_default = TimelineMarker;
+
+export {
+  TimelineMarker_native_default
+};

package/lib/{chunk-NZOGEIN3.mjs → chunk-YIOEE4WJ.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-Y3J6NXB4.mjs";
+} from "./chunk-SGAZRZIK.mjs";
 import {
   getColorClassName
 } from "./chunk-JOSZ4COK.mjs";

package/lib/chunk-YK5HPRX4.mjs

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

package/lib/chunk-YKDJ5C7W.mjs

@@ -0,0 +1,28 @@
+"use client";
+import {
+  getAlignStyle
+} from "./chunk-HV6TXVFA.mjs";
+
+// components/checkbox/tiles/CheckboxTiles.native.tsx
+import React from "react";
+import { StyleSheet, View } from "react-native";
+var CheckboxTiles = React.forwardRef(
+  ({ children, align, verticalAlign, ...others }, ref) => {
+    const styles = StyleSheet.create({
+      container: {
+        justifyContent: getAlignStyle(align),
+        alignItems: verticalAlign && getAlignStyle(verticalAlign) || align && getAlignStyle(align),
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: 8 /* TWO */
+      }
+    });
+    return /* @__PURE__ */ React.createElement(View, { ref, style: styles.container, ...others }, children);
+  }
+);
+CheckboxTiles.displayName = "CheckboxTiles" /* CheckboxTiles */;
+var CheckboxTiles_native_default = CheckboxTiles;
+
+export {
+  CheckboxTiles_native_default
+};

package/lib/{chunk-QJTQDNQQ.mjs → chunk-YLNTACMP.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   TimelineMarker_default
-} from "./chunk-ZVEPBI5K.mjs";
+} from "./chunk-6NWZNU3P.mjs";
 
 // components/timeline/marker/index.ts
 var marker_default = TimelineMarker_default;

package/lib/chunk-YODEPF5J.mjs

@@ -0,0 +1,139 @@
+"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/pagination/Pagination.native.tsx
+import React, { useEffect, useRef, useState } from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+var Pagination = React.forwardRef(
+  ({ length, defaultPage = 1, onClick, ...others }, ref) => {
+    const [currentPage, setCurrentPage] = useState(defaultPage);
+    const [arrayPage] = useState(Array.from(Array(length + 1).keys()));
+    const prevCurrentPage = useRef(currentPage);
+    const [pager, setPager] = useState({
+      currentPage,
+      length,
+      endPage: length + 1,
+      pages: arrayPage
+    });
+    useEffect(() => {
+      let startPage = 1;
+      let endPage = 5;
+      if (length <= 5) {
+        startPage = 1;
+        endPage = length;
+      } else {
+        if (currentPage <= 3) {
+          startPage = 1;
+          endPage = 5;
+        } else if (currentPage + 3 >= length) {
+          startPage = length - 4;
+          endPage = length;
+        } else {
+          startPage = currentPage - 2;
+          endPage = currentPage + 2;
+        }
+      }
+      const pages = [...Array(endPage + 1 - startPage).keys()].map((i) => startPage + i);
+      setPager({
+        currentPage,
+        length,
+        endPage,
+        pages
+      });
+    }, [currentPage, length]);
+    useEffect(() => {
+      if (onClick && prevCurrentPage.current !== currentPage) {
+        onClick(pager);
+      }
+    }, [currentPage]);
+    const styles = StyleSheet.create({
+      container: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-around"
+      },
+      text: {
+        color: getColorStyle("FONT" /* FONT */),
+        alignSelf: "center",
+        lineHeight: 0
+      },
+      textCurrent: {
+        color: getColorStyle("WHITE" /* BACKGROUND */),
+        alignSelf: "center",
+        lineHeight: 0
+      },
+      rounded: {
+        backgroundColor: getColorStyle("MAIN" /* MAIN */),
+        width: 26,
+        height: 26,
+        borderRadius: 26,
+        justifyContent: "center"
+      },
+      textContainer: {
+        backgroundColor: getColorStyle("WHITE" /* BACKGROUND */),
+        width: 26,
+        height: 26,
+        borderRadius: 26,
+        justifyContent: "center"
+      },
+      currentPage: {
+        color: getColorStyle("MAIN" /* MAIN */)
+      },
+      dotsLeft: {
+        color: getColorStyle("WHITE" /* BACKGROUND */),
+        marginRight: 12
+      },
+      dotsRight: {
+        color: getColorStyle("WHITE" /* BACKGROUND */),
+        marginRight: -12
+      }
+    });
+    return /* @__PURE__ */ React.createElement(View, { ref, style: styles.container, ...others }, /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        onPress: () => {
+          if (currentPage !== 1) {
+            setCurrentPage(currentPage - 1);
+            prevCurrentPage.current = currentPage - 1;
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(Icon_native_default, { name: "tri-arrow-left" /* ARROW_LEFT */, size: "small" /* SMALL */, color: "MAIN" /* MAIN */ })
+    ), /* @__PURE__ */ React.createElement(View, { style: { flexDirection: "row", alignItems: "center" } }, !pager.pages.includes(1) && /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.dotsLeft }, "\u2026")), pager.pages.map((pageNumber) => /* @__PURE__ */ React.createElement(View, { key: pageNumber }, /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        style: currentPage === pageNumber ? styles.rounded : styles.textContainer,
+        onPress: () => {
+          setCurrentPage(pageNumber);
+          prevCurrentPage.current = pageNumber;
+        }
+      },
+      /* @__PURE__ */ React.createElement(Text_native_default, { style: currentPage === pageNumber ? styles.textCurrent : styles.text }, pageNumber)
+    ))), !pager.pages.includes(length) && /* @__PURE__ */ React.createElement(View, { style: { marginRight: 15 } }, /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.dotsRight }, "\u2026"))), /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        onPress: () => {
+          if (currentPage !== Math.max(length)) {
+            setCurrentPage(currentPage + 1);
+            prevCurrentPage.current = currentPage + 1;
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(Icon_native_default, { name: "tri-arrow-right" /* ARROW_RIGHT */, size: "small" /* SMALL */, color: "MAIN" /* MAIN */ })
+    ));
+  }
+);
+Pagination.displayName = "Pagination" /* Pagination */;
+var Pagination_native_default = Pagination;
+
+export {
+  Pagination_native_default
+};

package/lib/chunk-YS4SPJEP.mjs

@@ -0,0 +1,129 @@
+"use client";
+import {
+  Tab_native_default
+} from "./chunk-AZ5GLGL2.mjs";
+import {
+  Icon_native_default
+} from "./chunk-STJ5TNSE.mjs";
+import {
+  getColorStyle
+} from "./chunk-VI2KFLCZ.mjs";
+import {
+  TabsContext
+} from "./chunk-SWFBV5TR.mjs";
+
+// components/tabs/tab-list/TabList.native.tsx
+import React from "react";
+import {
+  ScrollView,
+  StyleSheet,
+  View
+} from "react-native";
+var TabList = React.forwardRef(({ children, ...others }, ref) => {
+  const { inverted } = React.useContext(TabsContext);
+  const TabListRef = React.useRef(null);
+  const paddingHorizontalTab = 12;
+  const negativeGap = -35;
+  const [tabsWidth, setTabsWidth] = React.useState(0);
+  const [tabListWidth, setTabListWidth] = React.useState(0);
+  const [scrollLeft, setScrollLeft] = React.useState(0);
+  const [tabFocused, setTabFocused] = React.useState(0);
+  const [tabElms, setTabElms] = React.useState([]);
+  React.useImperativeHandle(ref, () => TabListRef.current);
+  const styles = StyleSheet.create({
+    tabList: {
+      flexDirection: "row",
+      backgroundColor: getColorStyle(inverted ? "MAIN" /* MAIN */ : "transparent")
+    },
+    arrow: { alignItems: "center", justifyContent: "center", paddingHorizontal: 2 }
+  });
+  const isVisibleArrowLeft = React.useMemo(() => {
+    if (!tabElms.length) return false;
+    return scrollLeft > tabElms[0].width / 2;
+  }, [tabElms, scrollLeft]);
+  const isVisibleArrowRight = React.useMemo(
+    () => tabListWidth - tabsWidth - scrollLeft > negativeGap,
+    [tabListWidth, tabsWidth, scrollLeft]
+  );
+  const handleScrollList = React.useCallback(
+    (e) => {
+      const scrollLeft2 = e.nativeEvent.contentOffset.x;
+      const scrollPosition = tabElms.findIndex(
+        (tab) => scrollLeft2 >= tab.x - paddingHorizontalTab && scrollLeft2 <= tab.x + tab.width - paddingHorizontalTab
+      );
+      setTabFocused(scrollPosition);
+      setScrollLeft(scrollLeft2);
+    },
+    [tabElms]
+  );
+  const scrollWithArrow = React.useCallback(
+    (direction) => {
+      var _a;
+      if (tabElms.length) {
+        const nextTab = tabFocused + direction;
+        const nextPosition = tabElms[nextTab === -1 ? 0 : nextTab];
+        nextPosition && ((_a = TabListRef.current) == null ? void 0 : _a.scrollTo({ x: nextPosition.x + 1, animated: true }));
+      }
+    },
+    [tabFocused, TabListRef, tabElms]
+  );
+  const onClickPrev = React.useCallback(() => {
+    isVisibleArrowLeft && scrollWithArrow(-1);
+  }, [scrollWithArrow, isVisibleArrowLeft]);
+  const onClickNext = React.useCallback(() => {
+    isVisibleArrowRight && scrollWithArrow(1);
+  }, [scrollWithArrow, isVisibleArrowRight]);
+  return /* @__PURE__ */ React.createElement(View, { style: { flexDirection: "row" }, onLayout: (e) => setTabsWidth(e.nativeEvent.layout.width) }, tabListWidth > tabsWidth && /* @__PURE__ */ React.createElement(View, { style: styles.arrow }, /* @__PURE__ */ React.createElement(
+    Icon_native_default,
+    {
+      name: "tri-arrow-left",
+      align: "ALIGNED_CENTER",
+      color: isVisibleArrowLeft ? void 0 : "transparent",
+      onClick: onClickPrev
+    }
+  )), /* @__PURE__ */ React.createElement(
+    ScrollView,
+    {
+      ref: TabListRef,
+      scrollEventThrottle: 16,
+      onContentSizeChange: (w) => setTabListWidth(w),
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      style: styles.tabList,
+      onScroll: handleScrollList,
+      ...others
+    },
+    React.Children.map(children, (child, index) => {
+      if (!React.isValidElement(child)) return false;
+      return /* @__PURE__ */ React.createElement(
+        Tab_native_default,
+        {
+          onLayout: (e) => {
+            e.persist();
+            setTabElms((prev) => {
+              const updatedArray = [...prev];
+              updatedArray[index] = e.nativeEvent.layout;
+              return updatedArray;
+            });
+          },
+          index,
+          ...child.props
+        }
+      );
+    })
+  ), tabListWidth > tabsWidth && /* @__PURE__ */ React.createElement(View, { style: styles.arrow }, /* @__PURE__ */ React.createElement(
+    Icon_native_default,
+    {
+      name: "tri-arrow-right",
+      align: "ALIGNED_CENTER",
+      color: isVisibleArrowRight ? void 0 : "transparent",
+      onClick: onClickNext
+    }
+  )));
+});
+TabList.displayName = "TabList" /* TabList */;
+var TabList_native_default = TabList;
+
+export {
+  TabList_native_default
+};

package/lib/chunk-Z2UZIL6D.mjs

@@ -0,0 +1,30 @@
+"use client";
+
+// components/progress/item/ProgressItem.native.tsx
+import React, { useEffect, useRef } from "react";
+import { Animated } from "react-native";
+var ProgressItem = React.forwardRef(
+  ({ children, percent, style, ...others }, ref) => {
+    const animation = useRef(new Animated.Value(0)).current;
+    const styles = style;
+    useEffect(() => {
+      percent && Animated.timing(animation, {
+        toValue: percent,
+        duration: 1e3,
+        useNativeDriver: false
+      }).start();
+    }, [animation, percent, style]);
+    const width = animation.interpolate({
+      inputRange: [0, 100],
+      outputRange: ["0%", "100%"],
+      extrapolate: "clamp"
+    });
+    return /* @__PURE__ */ React.createElement(Animated.View, { ...others, style: [{ width }, ...styles], ref }, children);
+  }
+);
+ProgressItem.displayName = "ProgressItem" /* ProgressItem */;
+var ProgressItem_native_default = ProgressItem;
+
+export {
+  ProgressItem_native_default
+};

package/lib/chunk-Z4E57WZW.mjs

@@ -0,0 +1,11 @@
+"use client";
+import {
+  ListItem_native_default
+} from "./chunk-3PZ7FJRR.mjs";
+
+// components/list/item/index.native.ts
+var index_native_default = ListItem_native_default;
+
+export {
+  index_native_default
+};