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

package/lib/chunk-3PZ7FJRR.mjs

@@ -0,0 +1,59 @@
+"use client";
+import {
+  ListContext
+} from "./chunk-UBR5KHS6.mjs";
+import {
+  Text_native_default
+} from "./chunk-RPXUKVT4.mjs";
+import {
+  Icon_native_default
+} from "./chunk-STJ5TNSE.mjs";
+import {
+  getColorStyle
+} from "./chunk-VI2KFLCZ.mjs";
+
+// components/list/item/ListItem.native.tsx
+import React, { useContext, useEffect, useId, useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+var ListItem = React.forwardRef(
+  ({ children, status, iconName }, ref) => {
+    const id = useId();
+    const { ordered, chilIndexes, setChildIndexes, divider } = useContext(ListContext);
+    const isLastItem = chilIndexes[chilIndexes.length - 1] === id;
+    useEffect(() => {
+      setChildIndexes((prev) => [...prev, id]);
+    }, [id]);
+    const styles = StyleSheet.create({
+      text: {
+        paddingHorizontal: 16
+      },
+      content: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: iconName ? 8 : 2,
+        borderBottomWidth: divider && !isLastItem ? 1 : 0,
+        borderBottomColor: getColorStyle("NEUTRAL" /* NEUTRAL */)
+      },
+      disc: {
+        alignSelf: "center",
+        width: 4,
+        height: 4,
+        backgroundColor: getColorStyle("MAIN" /* MAIN */),
+        borderRadius: 4
+      }
+    });
+    const getComponent = useMemo(() => {
+      if (typeof children === "object") return /* @__PURE__ */ React.createElement(View, { style: styles.text }, children);
+      if (["string", "number"].includes(typeof children)) {
+        return /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.text, level: 1 /* ONE */ }, children);
+      }
+    }, [children]);
+    return /* @__PURE__ */ React.createElement(View, { ref, style: [styles.content] }, ordered && !iconName && /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Text_native_default, { typo: ["has-text-weight-semibold" /* TEXT_WEIGHT_SEMIBOLD */] }, chilIndexes.indexOf(id) + 1, ".")), !iconName && !ordered && /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(View, { style: styles.disc })), iconName && /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Icon_native_default, { size: "small", name: iconName, color: status })), /* @__PURE__ */ React.createElement(View, null, getComponent));
+  }
+);
+ListItem.displayName = "ListItem" /* ListItem */;
+var ListItem_native_default = ListItem;
+
+export {
+  ListItem_native_default
+};

package/lib/chunk-3QGXHXMA.mjs

@@ -0,0 +1,20 @@
+"use client";
+
+// components/rows/row/Row.native.tsx
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+var Row = React.forwardRef(({ children, narrow, ...others }, ref) => {
+  const styles = StyleSheet.create({
+    row: {
+      flexGrow: narrow && 0 || 1,
+      flexShrink: 1
+    }
+  });
+  return /* @__PURE__ */ React.createElement(View, { ref, style: styles.row, ...others }, children);
+});
+Row.displayName = "Row" /* Row */;
+var Row_native_default = Row;
+
+export {
+  Row_native_default
+};

package/lib/chunk-3S7HTH5Y.mjs

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

package/lib/chunk-3SDJGR37.mjs

@@ -0,0 +1,34 @@
+"use client";
+
+// components/timeline/Timeline.native.tsx
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+var TimelineHeightContext = React.createContext({
+  height: 0,
+  setHeight: () => void 0
+});
+var Timeline = React.forwardRef(({ children }, ref) => {
+  const styles = StyleSheet.create({
+    container: {
+      flexDirection: "column"
+    }
+  });
+  const [height, setHeight] = React.useState(0);
+  return /* @__PURE__ */ React.createElement(
+    TimelineHeightContext.Provider,
+    {
+      value: {
+        height,
+        setHeight
+      }
+    },
+    /* @__PURE__ */ React.createElement(View, { ref, style: styles.container }, children)
+  );
+});
+Timeline.displayName = "Timeline" /* Timeline */;
+var Timeline_native_default = Timeline;
+
+export {
+  TimelineHeightContext,
+  Timeline_native_default
+};

package/lib/chunk-3U2THTWL.mjs

@@ -0,0 +1,47 @@
+"use client";
+import {
+  TimelineItemContext
+} from "./chunk-JDN37IEF.mjs";
+import {
+  Link_native_default
+} from "./chunk-5BJSQK4M.mjs";
+import {
+  AutoLayout_native_default
+} from "./chunk-GNSLOYT2.mjs";
+import {
+  Text_native_default
+} from "./chunk-RPXUKVT4.mjs";
+
+// components/timeline/content/TimelineContent.native.tsx
+import React, { useContext } from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+var TimelineContent = React.forwardRef(
+  ({ content, heading, linkLabel, linkTo, children }, ref) => {
+    const timelineContextValues = useContext(TimelineItemContext);
+    const styles = StyleSheet.create({
+      container: {
+        flex: 6,
+        marginBottom: 8,
+        marginLeft: 4
+      },
+      heading: {
+        marginBottom: 4,
+        marginTop: 8
+      },
+      content: {
+        fontWeight: timelineContextValues.active ? "600" : "400",
+        marginBottom: 4
+      },
+      link: {
+        marginTop: 6
+      }
+    });
+    return children ? /* @__PURE__ */ React.createElement(View, { ref, style: styles.container }, /* @__PURE__ */ React.createElement(AutoLayout_native_default, null, children)) : /* @__PURE__ */ React.createElement(View, { ref, style: styles.container }, !!heading && /* @__PURE__ */ React.createElement(Text_native_default, { level: 3 /* THREE */, style: styles.heading, typo: "has-text-main" /* TEXT_MAIN */ }, heading), !!content && /* @__PURE__ */ React.createElement(Text_native_default, { level: 2 /* TWO */, style: styles.content }, content), linkLabel && linkTo && /* @__PURE__ */ React.createElement(TouchableOpacity, { testID: "click-id" }, /* @__PURE__ */ React.createElement(View, { style: styles.link }, /* @__PURE__ */ React.createElement(Link_native_default, { to: linkTo }, linkLabel))));
+  }
+);
+TimelineContent.displayName = "TimelineContent" /* TimelineContent */;
+var TimelineContent_native_default = TimelineContent;
+
+export {
+  TimelineContent_native_default
+};

package/lib/chunk-3VCBG5R7.mjs

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

package/lib/chunk-3WFGK5PF.mjs

@@ -0,0 +1,26 @@
+"use client";
+import {
+  ColumnsGapValue
+} from "./chunk-KUF5FQNN.mjs";
+
+// components/rows/Rows.native.tsx
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+var Rows = React.forwardRef(({ children, gap, ...others }, ref) => {
+  const realGap = typeof gap === "undefined" && 16 || ColumnsGapValue[gap];
+  const styles = StyleSheet.create({
+    rows: {
+      display: "flex",
+      flexDirection: "column",
+      flex: 1,
+      gap: realGap
+    }
+  });
+  return /* @__PURE__ */ React.createElement(View, { ref, style: styles.rows, ...others }, children);
+});
+Rows.displayName = "Rows" /* Rows */;
+var Rows_native_default = Rows;
+
+export {
+  Rows_native_default
+};

package/lib/chunk-3XMSRU64.mjs

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

package/lib/chunk-3XPLPYWH.mjs

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

package/lib/chunk-44R46MG5.mjs

@@ -0,0 +1,87 @@
+"use client";
+import {
+  CircularProgress,
+  require_prop_types
+} from "./chunk-E4XP6M6C.mjs";
+import {
+  __toESM
+} from "./chunk-QIPGVLHJ.mjs";
+
+// components/progress/radial/react-native-circular-progress/AnimatedCircularProgress.tsx
+var import_prop_types = __toESM(require_prop_types());
+import * as React from "react";
+import { Animated, Easing } from "react-native";
+var AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);
+var AnimatedCircularProgress = class extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      fillAnimation: new Animated.Value(props.prefill)
+    };
+    if (props.onFillChange) {
+      this.state.fillAnimation.addListener(({ value }) => props.onFillChange(value));
+    }
+  }
+  componentDidMount() {
+    this.animate();
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.fill !== this.props.fill) {
+      this.animate();
+    }
+  }
+  reAnimate(prefill, toVal, dur, ease) {
+    this.setState(
+      {
+        fillAnimation: new Animated.Value(prefill)
+      },
+      () => this.animate(toVal, dur, ease)
+    );
+  }
+  animate(toVal, dur, ease) {
+    const toValue = toVal >= 0 ? toVal : this.props.fill;
+    const duration = dur || this.props.duration;
+    const easing = ease || this.props.easing;
+    const { useNativeDriver } = this.props;
+    const anim = Animated.timing(this.state.fillAnimation, {
+      useNativeDriver,
+      toValue,
+      easing,
+      duration
+    });
+    anim.start(this.props.onAnimationComplete);
+    return anim;
+  }
+  animateColor() {
+    if (!this.props.tintColorSecondary) {
+      return this.props.tintColor;
+    }
+    const tintAnimation = this.state.fillAnimation.interpolate({
+      inputRange: [0, 100],
+      outputRange: [this.props.tintColor, this.props.tintColorSecondary]
+    });
+    return tintAnimation;
+  }
+  render() {
+    const { fill, prefill, ...other } = this.props;
+    return /* @__PURE__ */ React.createElement(AnimatedProgress, { ...other, fill: this.state.fillAnimation, tintColor: this.animateColor() });
+  }
+};
+AnimatedCircularProgress.propTypes = {
+  ...CircularProgress.propTypes,
+  prefill: import_prop_types.default.number,
+  duration: import_prop_types.default.number,
+  easing: import_prop_types.default.func,
+  onAnimationComplete: import_prop_types.default.func,
+  useNativeDriver: import_prop_types.default.bool
+};
+AnimatedCircularProgress.defaultProps = {
+  duration: 500,
+  easing: Easing.out(Easing.ease),
+  prefill: 0,
+  useNativeDriver: false
+};
+
+export {
+  AnimatedCircularProgress
+};

package/lib/chunk-46VZBMKF.mjs

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

package/lib/chunk-4CI5XVQS.mjs

@@ -0,0 +1,11 @@
+"use client";
+import {
+  Row_native_default
+} from "./chunk-3QGXHXMA.mjs";
+
+// components/rows/row/index.native.ts
+var index_native_default = Row_native_default;
+
+export {
+  index_native_default
+};

package/lib/chunk-4EH7JSDJ.mjs

@@ -0,0 +1,19 @@
+"use client";
+
+// components/box/table-container/BoxTableContainer.native.tsx
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+var boxTableContainer = React.forwardRef(
+  ({ children, ...others }, ref) => {
+    const styles = StyleSheet.create({
+      boxTableContainer: {}
+    });
+    return /* @__PURE__ */ React.createElement(View, { ref, style: [styles.boxTableContainer], ...others }, children);
+  }
+);
+boxTableContainer.displayName = "BoxTableContainer" /* BoxTableContainer */;
+var BoxTableContainer_native_default = boxTableContainer;
+
+export {
+  BoxTableContainer_native_default
+};

package/lib/chunk-4FLKEX5Q.mjs

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

package/lib/chunk-4K5SE35T.mjs

@@ -0,0 +1,72 @@
+"use client";
+import {
+  is
+} from "./chunk-SWVRRUW7.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+import {
+  getAlignClassName
+} from "./chunk-HV6TXVFA.mjs";
+
+// components/columns/column/Column.tsx
+import clsx from "clsx";
+import React from "react";
+var Column = React.forwardRef(
+  ({
+    className,
+    id,
+    size,
+    mobileSize,
+    tabletSize,
+    touchSize,
+    desktopSize,
+    widescreenSize,
+    fullhdSize,
+    offset,
+    mobileOffset,
+    tabletOffset,
+    touchOffset,
+    desktopOffset,
+    widescreenOffset,
+    fullhdOffset,
+    narrow,
+    verticalAlign,
+    ...others
+  }, ref) => {
+    const { styled } = useTrilogyContext();
+    const classes = hashClass(
+      styled,
+      clsx(
+        "column",
+        size && is(`${size}`),
+        mobileSize && is(`${mobileSize}-mobile`),
+        tabletSize && is(`${tabletSize}-tablet`),
+        touchSize && is(`${touchSize}-tablet`),
+        desktopSize && is(`${desktopSize}-desktop`),
+        widescreenSize && is(`${widescreenSize}-widescreen`),
+        fullhdSize && is(`${fullhdSize}-fullhd`),
+        offset && is(`offset-${offset}`),
+        mobileOffset && is(`offset-${mobileOffset}-mobile`),
+        tabletOffset && is(`offset-${tabletOffset}-tablet`),
+        touchOffset && is(`offset-${touchOffset}-tablet`),
+        desktopOffset && is(`offset-${desktopOffset}-desktop`),
+        widescreenOffset && is(`offset-${widescreenOffset}-widescreen`),
+        fullhdOffset && is(`offset-${fullhdOffset}-fullhd`),
+        narrow && is("narrow"),
+        verticalAlign && is(getAlignClassName(verticalAlign)),
+        className
+      )
+    );
+    return /* @__PURE__ */ React.createElement("div", { ref, id, className: classes, ...others });
+  }
+);
+Column.displayName = "Column" /* Column */;
+var Column_default = Column;
+
+export {
+  Column_default
+};

package/lib/chunk-4K6XP3WN.mjs

@@ -0,0 +1,54 @@
+"use client";
+import {
+  getBackgroundClassName
+} from "./chunk-WC3ULY5W.mjs";
+import {
+  has,
+  is
+} from "./chunk-SWVRRUW7.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+
+// components/hero/Hero.tsx
+import clsx from "clsx";
+import React from "react";
+var Hero = React.forwardRef(
+  ({ children, backgroundColor, backgroundSrc, inverted, className, id, onClick, overlap, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    const classes = hashClass(
+      styled,
+      clsx(
+        "hero",
+        backgroundColor && has(getBackgroundClassName(backgroundColor)),
+        backgroundSrc && has("background"),
+        inverted && is("inverted") || is("base"),
+        overlap && is("overlapped"),
+        className
+      )
+    );
+    return /* @__PURE__ */ React.createElement(
+      "section",
+      {
+        ref,
+        id,
+        onClick: onClick && onClick,
+        className: classes,
+        ...backgroundSrc && {
+          style: { backgroundImage: `url(${backgroundSrc})` }
+        },
+        ...others
+      },
+      /* @__PURE__ */ React.createElement("div", { className: hashClass(styled, clsx("hero-body")) }, children)
+    );
+  }
+);
+Hero.displayName = "Hero" /* Hero */;
+var Hero_default = Hero;
+
+export {
+  Hero_default
+};

package/lib/chunk-4N5AAXBQ.mjs

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

package/lib/chunk-4NONUZBG.mjs

@@ -0,0 +1,47 @@
+"use client";
+import {
+  ModalContext
+} from "./chunk-JLQUIKZX.mjs";
+import {
+  getColorStyle
+} from "./chunk-VI2KFLCZ.mjs";
+import {
+  isIOS
+} from "./chunk-R6PFY5VS.mjs";
+
+// components/modal/body/ModalBody.native.tsx
+import * as React from "react";
+import { ScrollView, View } from "react-native";
+var ModalBody = React.forwardRef(({ children, ...others }, ref) => {
+  const { handleOnScroll, scrollViewRef, isFooter } = React.useContext(ModalContext);
+  return /* @__PURE__ */ React.createElement(
+    ScrollView,
+    {
+      ref: scrollViewRef,
+      scrollEventThrottle: 16,
+      onScroll: handleOnScroll,
+      showsVerticalScrollIndicator: false
+    },
+    /* @__PURE__ */ React.createElement(
+      View,
+      {
+        ref,
+        style: [
+          {
+            backgroundColor: getColorStyle("WHITE" /* BACKGROUND */),
+            paddingTop: 8,
+            paddingBottom: isFooter ? 8 : isIOS ? 40 : 16
+          }
+        ],
+        ...others
+      },
+      children
+    )
+  );
+});
+ModalBody.displayName = "ModalBody" /* ModalBody */;
+var ModalBody_native_default = ModalBody;
+
+export {
+  ModalBody_native_default
+};

package/lib/chunk-4OOJ4CIA.mjs

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

package/lib/chunk-4RI36UHJ.mjs

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

package/lib/chunk-4SALNTSX.mjs

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

package/lib/chunk-4UHBBNZ7.mjs

@@ -0,0 +1,60 @@
+"use client";
+
+// components/icon/IconEnum.ts
+var IconSize = /* @__PURE__ */ ((IconSize2) => {
+  IconSize2["SMALL"] = "small";
+  IconSize2["MEDIUM"] = "medium";
+  IconSize2["LARGE"] = "large";
+  IconSize2["HUGE"] = "huge";
+  IconSize2["SMALLER"] = "smaller";
+  return IconSize2;
+})(IconSize || {});
+var IconStatus = /* @__PURE__ */ ((IconStatus2) => {
+  IconStatus2["SUCCESS"] = "SUCCESS";
+  IconStatus2["ERROR"] = "ERROR";
+  IconStatus2["WARNING"] = "WARNING";
+  IconStatus2["INFO"] = "INFO";
+  IconStatus2["WHITE"] = "WHITE";
+  return IconStatus2;
+})(IconStatus || {});
+var IconColor = /* @__PURE__ */ ((IconColor2) => {
+  IconColor2["SUCCESS"] = "SUCCESS";
+  IconColor2["ERROR"] = "ERROR";
+  IconColor2["INFO"] = "INFO";
+  IconColor2["WARNING"] = "WARNING";
+  IconColor2["MAIN"] = "MAIN";
+  IconColor2["BACKGROUND"] = "BACKGROUND";
+  IconColor2["ACCENT"] = "ACCENT";
+  IconColor2["NEUTRAL"] = "NEUTRAL";
+  IconColor2["WHITE"] = "WHITE";
+  IconColor2["GREY"] = "NEUTRAL";
+  return IconColor2;
+})(IconColor || {});
+var IconPosition = /* @__PURE__ */ ((IconPosition2) => {
+  IconPosition2["UP"] = "up";
+  IconPosition2["DOWN"] = "down";
+  IconPosition2["LEFT"] = "left";
+  IconPosition2["RIGHT"] = "right";
+  return IconPosition2;
+})(IconPosition || {});
+var TextIconMarkup = /* @__PURE__ */ ((TextIconMarkup2) => {
+  TextIconMarkup2["DIV"] = "div";
+  TextIconMarkup2["A"] = "a";
+  TextIconMarkup2["P"] = "p";
+  TextIconMarkup2["SPAN"] = "span";
+  return TextIconMarkup2;
+})(TextIconMarkup || {});
+var IconStatusPosition = /* @__PURE__ */ ((IconStatusPosition2) => {
+  IconStatusPosition2["TOP"] = "top";
+  IconStatusPosition2["BOTTOM"] = "bottom";
+  return IconStatusPosition2;
+})(IconStatusPosition || {});
+
+export {
+  IconSize,
+  IconStatus,
+  IconColor,
+  IconPosition,
+  TextIconMarkup,
+  IconStatusPosition
+};

package/lib/chunk-4XHACXUM.mjs

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

package/lib/chunk-4XLHP4FT.mjs

@@ -0,0 +1,30 @@
+"use client";
+import {
+  tab_panel_default
+} from "./chunk-TTMI7WFG.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+
+// components/tabs/tab-panels/TabPanels.tsx
+import clsx from "clsx";
+import React from "react";
+var TabPanels = React.forwardRef(
+  ({ children, className, id, testId, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    const classes = hashClass(styled, clsx("tab-panels", className));
+    return /* @__PURE__ */ React.createElement("div", { ref, id, "data-testid": testId, className: classes, ...others }, React.Children.map(children, (child, index) => {
+      if (!React.isValidElement(child)) return false;
+      return /* @__PURE__ */ React.createElement(tab_panel_default, { ...child.props, index });
+    }));
+  }
+);
+TabPanels.displayName = "TabPanels" /* TabPanels */;
+var TabPanels_default = TabPanels;
+
+export {
+  TabPanels_default
+};

package/lib/chunk-4ZJQXF2V.mjs

@@ -0,0 +1,20 @@
+"use client";
+
+// components/text/TextEnum.ts
+var TextLevels = /* @__PURE__ */ ((TextLevels2) => {
+  TextLevels2[TextLevels2["ONE"] = 1] = "ONE";
+  TextLevels2[TextLevels2["TWO"] = 2] = "TWO";
+  TextLevels2[TextLevels2["THREE"] = 3] = "THREE";
+  TextLevels2[TextLevels2["FOUR"] = 4] = "FOUR";
+  return TextLevels2;
+})(TextLevels || {});
+var TextMarkup = /* @__PURE__ */ ((TextMarkup2) => {
+  TextMarkup2["P"] = "p";
+  TextMarkup2["SPAN"] = "span";
+  return TextMarkup2;
+})(TextMarkup || {});
+
+export {
+  TextLevels,
+  TextMarkup
+};

package/lib/chunk-54DJB6AO.mjs

@@ -0,0 +1,20 @@
+"use client";
+
+// components/spacer/Spacer.native.tsx
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+var Spacer = React.forwardRef(({ size, horizontal }, ref) => {
+  const styles = StyleSheet.create({
+    spacer: {
+      marginLeft: horizontal && parseInt(size.toString()) || 0,
+      marginTop: !horizontal && parseInt(size.toString()) || 0
+    }
+  });
+  return /* @__PURE__ */ React.createElement(View, { ref, style: styles.spacer });
+});
+Spacer.displayName = "Spacer" /* Spacer */;
+var Spacer_native_default = Spacer;
+
+export {
+  Spacer_native_default
+};

package/lib/chunk-56PSJEFR.mjs

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