@trilogy-ds/react 0.0.4-beta-v4 → 0.0.4-esm-cjs

package/lib/components/divider/Divider.native.js

@@ -1,75 +1,385 @@
-import { __assign, __read, __rest } from "tslib";
-import * as React from "react";
-import { StyleSheet, View } from "react-native";
-import { Icon, IconColor } from "../../components/icon";
-import { Text } from "../../components/text";
-import { getColorStyle, TrilogyColor } from "../../objects";
-import { ComponentName } from "../../components/enumsComponentsName";
-/**
- * Divider Native Component
- * @param content {string} Add text content for Divider
- * @param unboxed {boolean} Full-width separator in another component
- * @param marginless {boolean} delete margin
- * @param iconName {IconName} Custom icon for Divider
- * @param color {TrilogyColor} Border color of Divider
- * @param others
- */
-var Divider = function (_a) {
-    var content = _a.content, unboxed = _a.unboxed, marginless = _a.marginless, iconName = _a.iconName, inverted = _a.inverted, others = __rest(_a, ["content", "unboxed", "marginless", "iconName", "inverted"]);
-    var _b = __read(React.useState(0), 2), textWidth = _b[0], setTextWidth = _b[1];
-    var _c = __read(React.useState(0), 2), containerWidth = _c[0], setContainerWidth = _c[1];
-    var dividerColor = getColorStyle(TrilogyColor.NEUTRAL);
-    var 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: "".concat(((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(TrilogyColor.MAIN_FADE),
-        },
-    });
-    var ContentDivider = React.useMemo(function () {
-        if (content)
-            return React.createElement(Text, { style: styles.textContent }, content);
-        if (iconName && !content)
-            return (React.createElement(Icon, { name: iconName, color: IconColor.MAIN, testId: 'icon-id' }));
-    }, [content, iconName]);
-    if (content || iconName) {
-        return (React.createElement(View, { style: styles.container, onLayout: function (event) {
-                setContainerWidth(event.nativeEvent.layout.width);
-            } },
-            React.createElement(View, __assign({ style: styles.dividerContent }, others)),
-            React.createElement(View, { style: styles.content, onLayout: function (event) {
-                    setTextWidth(event.nativeEvent.layout.width);
-                } }, ContentDivider),
-            React.createElement(View, __assign({ style: styles.dividerContent }, others))));
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
     }
-    return React.createElement(View, __assign({ style: styles.divider }, others));
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// components/divider/Divider.native.tsx
+var Divider_native_exports = {};
+__export(Divider_native_exports, {
+  default: () => Divider_native_default
+});
+module.exports = __toCommonJS(Divider_native_exports);
+
+// context/index.tsx
+var React = __toESM(require("react"));
+var TrilogyContext = React.createContext({
+  styled: false,
+  setStyled: () => void 0
+});
+var useTrilogyContext = () => {
+  const context = React.useContext(TrilogyContext);
+  if (context === void 0) {
+    throw new Error("useTrilogyContext must be used within a TrilogyProvider");
+  }
+  return context;
+};
+
+// helpers/hashClassesHelpers/index.tsx
+var hashClass = (addHash = false, classes) => {
+  const { hash, styled } = useTrilogyContext();
+  if (classes.trim().length < 1) return "";
+  if (styled) {
+    return classes.split(" ").map((classe) => classe = `${classe}_${hash}`).join(" ");
+  }
+  return classes;
+};
+
+// helpers/device/index.ts
+var Device = /* @__PURE__ */ ((Device2) => {
+  Device2["Browser"] = "browser";
+  Device2["Server"] = "server";
+  Device2["Native"] = "native";
+  return Device2;
+})(Device || {});
+var { Browser, Server, Native } = Device;
+var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+var canUseNative = typeof navigator != "undefined" && navigator.product == "ReactNative";
+var device = canUseNative ? Native : canUseDOM ? Browser : Server;
+var SSRObjectDefined = {
+  isBrowser: device === Browser,
+  isServer: device === Server,
+  isNative: device === Native,
+  device,
+  canUseWorkers: typeof Worker !== "undefined",
+  canUseEventListeners: device === Browser && !!window.addEventListener,
+  canUseViewport: device === Browser && !!window.screen
 };
-Divider.displayName = ComponentName.Divider;
-export default Divider;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGl2aWRlci5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2RpdmlkZXIvRGl2aWRlci5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUMvQyxPQUFPLEVBQUUsSUFBSSxFQUFFLFNBQVMsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ25ELE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUV4QyxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUN2RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFFaEU7Ozs7Ozs7O0dBUUc7QUFDSCxJQUFNLE9BQU8sR0FBRyxVQUFDLEVBT0Y7SUFOYixJQUFBLE9BQU8sYUFBQSxFQUNQLE9BQU8sYUFBQSxFQUNQLFVBQVUsZ0JBQUEsRUFDVixRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDTCxNQUFNLGNBTk0sNERBT2hCLENBRFU7SUFFSCxJQUFBLEtBQUEsT0FBNEIsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBQSxFQUE1QyxTQUFTLFFBQUEsRUFBRSxZQUFZLFFBQXFCLENBQUE7SUFDN0MsSUFBQSxLQUFBLE9BQXNDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUEsRUFBdEQsY0FBYyxRQUFBLEVBQUUsaUJBQWlCLFFBQXFCLENBQUE7SUFDN0QsSUFBTSxZQUFZLEdBQUcsYUFBYSxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsQ0FBQTtJQUV4RCxJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLE9BQU8sRUFBRTtZQUNQLFlBQVksRUFBRSxFQUFFO1lBQ2hC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
+var assign = (...args) => Object.assign({}, ...args);
+var values = (obj) => Object.values(obj);
+var toArrayObject = () => assign((values(SSRObjectDefined), SSRObjectDefined));
+var SSRObject = toArrayObject();
+
+// context/providerTheme/index.tsx
+var import_react = __toESM(require("react"));
+var defaultTheme = {
+  icons: {},
+  colors: {},
+  fontFamily: {}
+};
+var defaultContextValue = {
+  theme: defaultTheme,
+  setTheme: () => void 0
+};
+var TrilogyThemeContext = import_react.default.createContext(defaultContextValue);
+
+// objects/facets/Color/index.tsx
+var import_react2 = require("react");
+var colors = {
+  ["WHITE" /* BACKGROUND */]: ["#fff", "white", "main"],
+  ["MAIN" /* MAIN */]: ["#3d5d7e", "main", "white"],
+  ["MAIN_FADE" /* MAIN_FADE */]: ["#BBC6CD", "main-fade", "white"],
+  ["ACCENT" /* ACCENT */]: ["#da641b", "accent", "white"],
+  ["FONT" /* FONT */]: ["#3d5d7e", "main", "white"],
+  ["FONT_PLACEHOLDER" /* FONT_PLACEHOLDER */]: ["#687a87", "font-placeholder", "white"],
+  ["SUCCESS" /* SUCCESS */]: ["#007B52", "success", "white"],
+  ["SUCCESS_FADE" /* SUCCESS_FADE */]: ["#cae8ca", "success-fade", "white"],
+  ["INFO" /* INFO */]: ["#1A688A", "info", "white"],
+  ["INFO_FADE" /* INFO_FADE */]: ["#c8dbec", "info-fade", "white"],
+  ["WARNING" /* WARNING */]: ["#FFBB33", "warning", "white"],
+  ["WARNING_FADE" /* WARNING_FADE */]: ["#ecdbc6", "warning-fade", "white"],
+  ["ERROR" /* ERROR */]: ["#D42D02", "error", "white"],
+  ["ERROR_FADE" /* ERROR_FADE */]: ["#eecccc", "error-fade", "white"],
+  ["DISABLED" /* DISABLED */]: ["#646464", "disabled", "white"],
+  ["DISABLED_FADE" /* DISABLED_FADE */]: ["#D1D1D1", "disabled-fade", "white"],
+  ["NEUTRAL" /* NEUTRAL */]: ["#707070", "grey", "white"],
+  ["NEUTRAL_FADE" /* NEUTRAL_FADE */]: ["#F4F4F4", "grey-fade", "white"],
+  ["STROKE" /* STROKE */]: ["#BBC1CE", "stroke", "white"]
+};
+var getColorClassName = (trilogyColor) => {
+  const color = colors[trilogyColor];
+  return color[1];
+};
+var getColorStyle = (trilogyColor) => {
+  if (typeof navigator !== "undefined" && navigator.userAgent === void 0) {
+    const { theme } = (0, import_react2.useContext)(TrilogyThemeContext);
+    const colorsStyle = (theme == null ? void 0 : theme.colors) || colors;
+    const colorArray = colorsStyle[trilogyColor] || colorsStyle.default;
+    if (trilogyColor === "transparent") return "transparent";
+    if (!trilogyColor || !colors[trilogyColor]) {
+      return colorsStyle.default;
+    }
+    return colorArray[0];
+  } else {
+    if (trilogyColor === "transparent") return "transparent";
+    return colors[trilogyColor][0] || colors["MAIN" /* MAIN */][0];
+  }
+};
+
+// objects/atoms/Background/index.ts
+var getBackgroundClassName = (backgroundType) => {
+  return `background-${getColorClassName(backgroundType)}`;
+};
+
+// objects/facets/Justifiable/index.ts
+var getJustifySelfClassName = (justifyContent) => {
+  switch (justifyContent) {
+    case "ALIGNED_CENTER":
+      return "justified-self-center";
+    case "ALIGNED_START":
+      return "justified-self-start";
+    case "ALIGNED_END":
+      return "justified-selfend";
+    default:
+      return "justified-selfstart";
+  }
+};
+
+// services/classify/index.ts
+function classify(prefix) {
+  return (classname) => classname !== "" ? `${prefix}-${classname.toLowerCase()}` : "";
+}
+var is = classify("is");
+var has = classify("has");
+
+// components/icon/Icon.tsx
+var import_clsx = __toESM(require("clsx"));
+var React3 = __toESM(require("react"));
+var Icon = React3.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, id, size, name, circled, stretched, color, backgroundColor, onClick, skeleton, align } = _b, others = __objRest(_b, ["className", "id", "size", "name", "circled", "stretched", "color", "backgroundColor", "onClick", "skeleton", "align"]);
+    const { styled } = useTrilogyContext();
+    const background = backgroundColor && has(getBackgroundClassName(backgroundColor)) || circled && has(getBackgroundClassName("MAIN" /* MAIN */)) || "";
+    const classes = hashClass(
+      styled,
+      (0, import_clsx.default)(
+        "icon",
+        stretched && is("stretched"),
+        size && is(size),
+        circled && is("circled"),
+        circled && !color && has("text-white"),
+        color && is(`${getColorClassName(color)}`),
+        skeleton && is("loading"),
+        align && (0, import_clsx.default)(is("flex"), is(getJustifySelfClassName(align))),
+        background,
+        className
+      )
+    );
+    return /* @__PURE__ */ React3.createElement("span", __spreadProps(__spreadValues({ id, onClick: onClick && onClick, className: classes }, others), { ref }), /* @__PURE__ */ React3.createElement("i", { className: hashClass(styled, (0, import_clsx.default)(name)), "aria-hidden": "true" }));
+  }
+);
+Icon.displayName = "Icon" /* Icon */;
+var Icon_default = Icon;
+
+// components/text/Text.tsx
+var React4 = __toESM(require("react"));
+var import_clsx2 = __toESM(require("clsx"));
+
+// components/text/TextEnum.ts
+var TextMarkup = /* @__PURE__ */ ((TextMarkup2) => {
+  TextMarkup2["P"] = "p";
+  TextMarkup2["SPAN"] = "span";
+  return TextMarkup2;
+})(TextMarkup || {});
+
+// components/text/Text.tsx
+var Text = React4.forwardRef((_a, ref) => {
+  var _b = _a, {
+    level,
+    markup,
+    children,
+    className,
+    id,
+    typo,
+    inverted,
+    skeleton,
+    accessibilityLabel,
+    marginless,
+    numberOfLines
+  } = _b, others = __objRest(_b, [
+    "level",
+    "markup",
+    "children",
+    "className",
+    "id",
+    "typo",
+    "inverted",
+    "skeleton",
+    "accessibilityLabel",
+    "marginless",
+    "numberOfLines"
+  ]);
+  const { styled } = useTrilogyContext();
+  const levelText = () => {
+    if (level) {
+      switch (level) {
+        case 1 /* ONE */:
+          return is("level-1");
+        case 2 /* TWO */:
+          return is("level-2");
+        case 3 /* THREE */:
+          return is("level-3");
+        case 4 /* FOUR */:
+          return is("level-4");
+        default:
+          return is(`level-${level}`);
+      }
+    }
+  };
+  const classes = hashClass(
+    styled,
+    (0, import_clsx2.default)(
+      "text",
+      level && levelText(),
+      inverted && is("inverted"),
+      typo,
+      skeleton && is("loading"),
+      marginless && is("marginless"),
+      numberOfLines && is("text-ellipsis"),
+      className
+    )
+  );
+  const isCorrectMarkup = (stringMarkup) => {
+    if (stringMarkup in TextMarkup || Object.values(TextMarkup).includes(stringMarkup)) return true;
+  };
+  const Tag = markup && isCorrectMarkup(markup) ? markup : "p";
+  return /* @__PURE__ */ React4.createElement(
+    Tag,
+    __spreadValues({
+      ref,
+      id,
+      style: numberOfLines ? { WebkitLineClamp: numberOfLines } : {},
+      "aria-label": accessibilityLabel,
+      className: classes
+    }, others),
+    children
+  );
+});
+Text.displayName = "Text" /* Text */;
+var Text_default = Text;
+
+// components/divider/Divider.native.tsx
+var React5 = __toESM(require("react"));
+var import_react_native = require("react-native");
+var Divider = React5.forwardRef((_a, ref) => {
+  var _b = _a, { content, unboxed, marginless, iconName } = _b, others = __objRest(_b, ["content", "unboxed", "marginless", "iconName"]);
+  const [textWidth, setTextWidth] = React5.useState(0);
+  const [containerWidth, setContainerWidth] = React5.useState(0);
+  const dividerColor = getColorStyle("NEUTRAL" /* NEUTRAL */);
+  const styles = import_react_native.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 = React5.useMemo(() => {
+    if (content) return /* @__PURE__ */ React5.createElement(Text_default, { style: styles.textContent }, content);
+    if (iconName && !content) return /* @__PURE__ */ React5.createElement(Icon_default, { name: iconName, color: "MAIN" /* MAIN */, testId: "icon-id" });
+  }, [content, iconName]);
+  if (content || iconName) {
+    return /* @__PURE__ */ React5.createElement(
+      import_react_native.View,
+      {
+        ref,
+        style: styles.container,
+        onLayout: (event) => {
+          setContainerWidth(event.nativeEvent.layout.width);
+        }
+      },
+      /* @__PURE__ */ React5.createElement(import_react_native.View, __spreadValues({ style: styles.dividerContent }, others)),
+      /* @__PURE__ */ React5.createElement(
+        import_react_native.View,
+        {
+          style: styles.content,
+          onLayout: (event) => {
+            setTextWidth(event.nativeEvent.layout.width);
+          }
+        },
+        ContentDivider
+      ),
+      /* @__PURE__ */ React5.createElement(import_react_native.View, __spreadValues({ style: styles.dividerContent }, others))
+    );
+  }
+  return /* @__PURE__ */ React5.createElement(import_react_native.View, __spreadValues({ style: styles.divider }, others));
+});
+Divider.displayName = "Divider" /* Divider */;
+var Divider_native_default = Divider;

package/lib/components/divider/Divider.native.mjs

@@ -0,0 +1,106 @@
+import "../../chunk-7V4Z4X42.mjs";
+import {
+  Text_default
+} from "../../chunk-S3NVF5RX.mjs";
+import "../../chunk-CERCYDMJ.mjs";
+import {
+  Icon_default
+} from "../../chunk-6F4GWAQR.mjs";
+import "../../chunk-B52A3BFQ.mjs";
+import "../../chunk-RBMXTQBU.mjs";
+import "../../chunk-CNJHYNT2.mjs";
+import {
+  getColorStyle
+} from "../../chunk-EJ2APB7I.mjs";
+import "../../chunk-SEWWK5HV.mjs";
+import "../../chunk-U3F6V3KT.mjs";
+import "../../chunk-37LDCDVM.mjs";
+import "../../chunk-UDTBRLJ5.mjs";
+import "../../chunk-OADZ62IM.mjs";
+import "../../chunk-HLQ4FCCM.mjs";
+import "../../chunk-XFWJ47MX.mjs";
+import "../../chunk-YZRO54LX.mjs";
+import "../../chunk-4YIM7SBN.mjs";
+import "../../chunk-EJOKG5F4.mjs";
+import "../../chunk-5VN6OIEF.mjs";
+import {
+  __objRest,
+  __spreadValues
+} from "../../chunk-4VQ23W74.mjs";
+
+// components/divider/Divider.native.tsx
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+var Divider = React.forwardRef((_a, ref) => {
+  var _b = _a, { content, unboxed, marginless, iconName } = _b, others = __objRest(_b, ["content", "unboxed", "marginless", "iconName"]);
+  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_default, { style: styles.textContent }, content);
+    if (iconName && !content) return /* @__PURE__ */ React.createElement(Icon_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, __spreadValues({ style: styles.dividerContent }, others)),
+      /* @__PURE__ */ React.createElement(
+        View,
+        {
+          style: styles.content,
+          onLayout: (event) => {
+            setTextWidth(event.nativeEvent.layout.width);
+          }
+        },
+        ContentDivider
+      ),
+      /* @__PURE__ */ React.createElement(View, __spreadValues({ style: styles.dividerContent }, others))
+    );
+  }
+  return /* @__PURE__ */ React.createElement(View, __spreadValues({ style: styles.divider }, others));
+});
+Divider.displayName = "Divider" /* Divider */;
+var Divider_native_default = Divider;
+export {
+  Divider_native_default as default
+};

package/lib/components/divider/DividerProps.d.mts

@@ -0,0 +1,15 @@
+import { IconName, IconNameValues } from '../../components/icon';
+import { Marginless } from '../../objects/index';
+import { View } from 'react-native';
+import { CommonProps } from '../../objects/facets/CommonProps';
+/**
+ * Divider Interface
+ */
+export interface DividerProps extends Marginless, CommonProps {
+    content?: string;
+    unboxed?: boolean;
+    iconName?: IconNameValues | IconName;
+    inverted?: boolean;
+}
+export type DividerRef = HTMLDivElement;
+export type DividerNativeRef = View;

package/lib/components/divider/DividerProps.d.ts

@@ -1,5 +1,6 @@
-import { Marginless } from '../../objects';
 import { IconName, IconNameValues } from '../../components/icon';
+import { Marginless } from '../../objects/index';
+import { View } from 'react-native';
 import { CommonProps } from '../../objects/facets/CommonProps';
 /**
  * Divider Interface
@@ -10,3 +11,5 @@ export interface DividerProps extends Marginless, CommonProps {
     iconName?: IconNameValues | IconName;
     inverted?: boolean;
 }
+export type DividerRef = HTMLDivElement;
+export type DividerNativeRef = View;

package/lib/components/divider/DividerProps.js

@@ -1,2 +1,18 @@
-export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGl2aWRlclByb3BzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9kaXZpZGVyL0RpdmlkZXJQcm9wcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// components/divider/DividerProps.ts
+var DividerProps_exports = {};
+module.exports = __toCommonJS(DividerProps_exports);

package/lib/components/divider/DividerProps.mjs

@@ -0,0 +1 @@
+import "../../chunk-UYIT3QLR.mjs";

package/lib/components/divider/index.d.mts

@@ -0,0 +1,3 @@
+import Divider from './Divider';
+export * from './DividerProps';
+export { Divider };

package/lib/components/divider/index.d.ts

@@ -1,2 +1,3 @@
 import Divider from './Divider';
+export * from './DividerProps';
 export { Divider };