@kivid/native-components 1.0.0-alpha.2 → 1.0.0-alpha.21

package/dist/module/components/Tooltip/components/Content/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+import { View } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
+import { TooltipPointerOffsetEnum, TooltipVariantEnum } from "../../enum/index.js";
+import { contentVariants, pointerVariants } from "../../assets/class-variant.js";
+import { SealVariantEnum } from "../../../Seal/enums/index.js";
+import { Seal } from "../../../Seal/index.js";
+import Typography from "../../../Typography/index.js";
+import { SizeEnum } from "../../../../enums/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Content(props) {
+  const {
+    message,
+    variant = TooltipVariantEnum.TRIGGER,
+    className,
+    isVisible,
+    translateX,
+    pointerOffset,
+    pointerClassName,
+    containerClassName,
+    onLayout
+  } = props;
+  const pointerStyle = pointerVariants({
+    variant
+  });
+  const contentStyle = contentVariants({
+    variant
+  });
+  const mergedContainerClassName = merge("absolute top-full mt-[9px] z-50 self-center", containerClassName);
+  function renderContent() {
+    if (variant === TooltipVariantEnum.ERROR) {
+      return /*#__PURE__*/_jsxs(View, {
+        className: "flex flex-row items-center gap-2",
+        children: [/*#__PURE__*/_jsx(Seal, {
+          variant: SealVariantEnum.ERROR,
+          size: SizeEnum.SMALL
+        }), typeof message === "string" ? /*#__PURE__*/_jsx(Typography, {
+          className: "text-blackberry-500",
+          variant: "body_small",
+          weight: "600",
+          children: message
+        }) : message]
+      });
+    }
+    return typeof message === "string" ? /*#__PURE__*/_jsx(Typography, {
+      className: "text-chia-900",
+      variant: "body_small",
+      weight: "600",
+      children: message
+    }) : message;
+  }
+  if (!isVisible) return null;
+  const mappedPointerPosition = {
+    [TooltipPointerOffsetEnum.LEFT]: "flex-start",
+    [TooltipPointerOffsetEnum.RIGHT]: "flex-end",
+    [TooltipPointerOffsetEnum.CENTER]: "center"
+  };
+  return /*#__PURE__*/_jsx(View, {
+    className: mergedContainerClassName,
+    style: {
+      transform: [{
+        translateX: translateX ?? 0
+      }]
+    },
+    onLayout: onLayout,
+    children: /*#__PURE__*/_jsxs(View, {
+      className: merge(contentStyle, className),
+      children: [renderContent(), /*#__PURE__*/_jsx(View, {
+        className: merge(pointerStyle, pointerClassName),
+        style: {
+          alignSelf: mappedPointerPosition[pointerOffset ?? TooltipPointerOffsetEnum.CENTER]
+        }
+      })]
+    })
+  });
+}
+//# sourceMappingURL=index.js.map

package/dist/module/components/Tooltip/components/Content/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","merge","TooltipPointerOffsetEnum","TooltipVariantEnum","contentVariants","pointerVariants","SealVariantEnum","Seal","Typography","SizeEnum","jsx","_jsx","jsxs","_jsxs","Content","props","message","variant","TRIGGER","className","isVisible","translateX","pointerOffset","pointerClassName","containerClassName","onLayout","pointerStyle","contentStyle","mergedContainerClassName","renderContent","ERROR","children","size","SMALL","weight","mappedPointerPosition","LEFT","RIGHT","CENTER","style","transform","alignSelf"],"sourceRoot":"../../../../../../src","sources":["components/Tooltip/components/Content/index.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AACnC,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,wBAAwB,EAAEC,kBAAkB,QAAQ,qBAAY;AACzE,SAASC,eAAe,EAAEC,eAAe,QAAQ,+BAA4B;AAC7E,SAASC,eAAe,QAAQ,8BAAqB;AACrD,SAASC,IAAI,QAAQ,wBAAe;AACpC,OAAOC,UAAU,MAAM,8BAAqB;AAC5C,SAASC,QAAQ,QAAQ,4BAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE7C,OAAO,SAASC,OAAOA,CAACC,KAAmB,EAAE;EAC3C,MAAM;IACJC,OAAO;IACPC,OAAO,GAAGd,kBAAkB,CAACe,OAAO;IACpCC,SAAS;IACTC,SAAS;IACTC,UAAU;IACVC,aAAa;IACbC,gBAAgB;IAChBC,kBAAkB;IAClBC;EACF,CAAC,GAAGV,KAAK;EAET,MAAMW,YAAY,GAAGrB,eAAe,CAAC;IAAEY;EAAQ,CAAC,CAAC;EACjD,MAAMU,YAAY,GAAGvB,eAAe,CAAC;IAAEa;EAAQ,CAAC,CAAC;EACjD,MAAMW,wBAAwB,GAAG3B,KAAK,CACpC,6CAA6C,EAC7CuB,kBACF,CAAC;EAED,SAASK,aAAaA,CAAA,EAAG;IACvB,IAAIZ,OAAO,KAAKd,kBAAkB,CAAC2B,KAAK,EAAE;MACxC,oBACEjB,KAAA,CAACb,IAAI;QAACmB,SAAS,EAAC,kCAAkC;QAAAY,QAAA,gBAChDpB,IAAA,CAACJ,IAAI;UAACU,OAAO,EAAEX,eAAe,CAACwB,KAAM;UAACE,IAAI,EAAEvB,QAAQ,CAACwB;QAAM,CAAE,CAAC,EAC7D,OAAOjB,OAAO,KAAK,QAAQ,gBAC1BL,IAAA,CAACH,UAAU;UACTW,SAAS,EAAC,qBAAqB;UAC/BF,OAAO,EAAC,YAAY;UACpBiB,MAAM,EAAC,KAAK;UAAAH,QAAA,EAEXf;QAAO,CACE,CAAC,GAEbA,OACD;MAAA,CACG,CAAC;IAEX;IAEA,OAAO,OAAOA,OAAO,KAAK,QAAQ,gBAChCL,IAAA,CAACH,UAAU;MAACW,SAAS,EAAC,eAAe;MAACF,OAAO,EAAC,YAAY;MAACiB,MAAM,EAAC,KAAK;MAAAH,QAAA,EACpEf;IAAO,CACE,CAAC,GAEbA,OACD;EACH;EAEA,IAAI,CAACI,SAAS,EAAE,OAAO,IAAI;EAE3B,MAAMe,qBAGL,GAAG;IACF,CAACjC,wBAAwB,CAACkC,IAAI,GAAG,YAAY;IAC7C,CAAClC,wBAAwB,CAACmC,KAAK,GAAG,UAAU;IAC5C,CAACnC,wBAAwB,CAACoC,MAAM,GAAG;EACrC,CAAC;EAED,oBACE3B,IAAA,CAACX,IAAI;IACHmB,SAAS,EAAES,wBAAyB;IACpCW,KAAK,EAAE;MACLC,SAAS,EAAE,CAAC;QAAEnB,UAAU,EAAEA,UAAU,IAAI;MAAE,CAAC;IAC7C,CAAE;IACFI,QAAQ,EAAEA,QAAS;IAAAM,QAAA,eAEnBlB,KAAA,CAACb,IAAI;MAACmB,SAAS,EAAElB,KAAK,CAAC0B,YAAY,EAAER,SAAS,CAAE;MAAAY,QAAA,GAC7CF,aAAa,CAAC,CAAC,eAChBlB,IAAA,CAACX,IAAI;QACHmB,SAAS,EAAElB,KAAK,CAACyB,YAAY,EAAEH,gBAAgB,CAAE;QACjDgB,KAAK,EAAE;UACLE,SAAS,EACPN,qBAAqB,CACnBb,aAAa,IAAIpB,wBAAwB,CAACoC,MAAM;QAEtD;MAAE,CACH,CAAC;IAAA,CACE;EAAC,CACH,CAAC;AAEX","ignoreList":[]}

package/dist/module/components/Tooltip/components/Content/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/dist/module/components/Tooltip/components/Content/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../../src","sources":["components/Tooltip/components/Content/types.ts"],"mappings":"","ignoreList":[]}

package/dist/module/components/Tooltip/components/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export * from "./Content/index.js";
+//# sourceMappingURL=index.js.map

package/dist/module/components/Tooltip/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/Tooltip/components/index.ts"],"mappings":";;AAAA,cAAc,oBAAW","ignoreList":[]}

package/dist/module/components/Tooltip/enum/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+export let TooltipVariantEnum = /*#__PURE__*/function (TooltipVariantEnum) {
+  TooltipVariantEnum["ERROR"] = "error";
+  TooltipVariantEnum["TRIGGER"] = "trigger";
+  return TooltipVariantEnum;
+}({});
+export let TooltipPointerOffsetEnum = /*#__PURE__*/function (TooltipPointerOffsetEnum) {
+  TooltipPointerOffsetEnum["LEFT"] = "left";
+  TooltipPointerOffsetEnum["CENTER"] = "center";
+  TooltipPointerOffsetEnum["RIGHT"] = "right";
+  return TooltipPointerOffsetEnum;
+}({});
+//# sourceMappingURL=index.js.map

package/dist/module/components/Tooltip/enum/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TooltipVariantEnum","TooltipPointerOffsetEnum"],"sourceRoot":"../../../../../src","sources":["components/Tooltip/enum/index.ts"],"mappings":";;AAAA,WAAYA,kBAAkB,0BAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAA,OAAlBA,kBAAkB;AAAA;AAK9B,WAAYC,wBAAwB,0BAAxBA,wBAAwB;EAAxBA,wBAAwB;EAAxBA,wBAAwB;EAAxBA,wBAAwB;EAAA,OAAxBA,wBAAwB;AAAA","ignoreList":[]}

package/dist/module/components/Tooltip/hooks/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export * from "./tooltip-position.js";
+//# sourceMappingURL=index.js.map

package/dist/module/components/Tooltip/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/Tooltip/hooks/index.ts"],"mappings":";;AAAA,cAAc,uBAAoB","ignoreList":[]}

package/dist/module/components/Tooltip/hooks/tooltip-position.js

@@ -0,0 +1,62 @@
+"use strict";
+
+import { useState, useCallback, useMemo } from "react";
+import { Dimensions } from "react-native";
+import { TooltipPointerOffsetEnum } from "../enum/index.js";
+export function useTooltipPosition() {
+  const [triggerLayout, setTriggerLayout] = useState(null);
+  const [tooltipLayout, setTooltipLayout] = useState(null);
+  const screenWidth = Dimensions.get("window").width;
+  const onTriggerLayout = useCallback(event => {
+    setTriggerLayout(event.nativeEvent.layout);
+  }, []);
+  const onTooltipLayout = useCallback(event => {
+    setTooltipLayout(event.nativeEvent.layout);
+  }, []);
+  const pointerOffset = useMemo(() => {
+    if (!triggerLayout || !tooltipLayout) return TooltipPointerOffsetEnum.CENTER;
+    const elementPositionX = triggerLayout.x;
+    const tooltipPositionXAxis = elementPositionX + tooltipLayout.width;
+    if (elementPositionX === 0) {
+      return TooltipPointerOffsetEnum.LEFT;
+    }
+    if (tooltipPositionXAxis > screenWidth) {
+      return TooltipPointerOffsetEnum.RIGHT;
+    }
+    return TooltipPointerOffsetEnum.CENTER;
+  }, [triggerLayout, tooltipLayout]);
+  const calculateAdjustedPosition = useCallback(() => {
+    if (!triggerLayout || !tooltipLayout) {
+      return {
+        translateX: 0
+      };
+    }
+    const elementPositionX = triggerLayout.x;
+    const tooltipPositionXAxis = elementPositionX + tooltipLayout.width;
+    if (elementPositionX === 0) {
+      return {
+        translateX: -tooltipLayout.x
+      };
+    }
+    if (tooltipPositionXAxis > screenWidth) {
+      return {
+        translateX: tooltipLayout.x
+      };
+    }
+    return {
+      translateX: 0
+    };
+  }, [triggerLayout, tooltipLayout, screenWidth]);
+  return {
+    positionData: {
+      triggerLayout,
+      tooltipLayout,
+      screenWidth,
+      adjustedPosition: calculateAdjustedPosition(),
+      pointerOffset
+    },
+    onTriggerLayout,
+    onTooltipLayout
+  };
+}
+//# sourceMappingURL=tooltip-position.js.map

package/dist/module/components/Tooltip/hooks/tooltip-position.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","useCallback","useMemo","Dimensions","TooltipPointerOffsetEnum","useTooltipPosition","triggerLayout","setTriggerLayout","tooltipLayout","setTooltipLayout","screenWidth","get","width","onTriggerLayout","event","nativeEvent","layout","onTooltipLayout","pointerOffset","CENTER","elementPositionX","x","tooltipPositionXAxis","LEFT","RIGHT","calculateAdjustedPosition","translateX","positionData","adjustedPosition"],"sourceRoot":"../../../../../src","sources":["components/Tooltip/hooks/tooltip-position.ts"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACtD,SAASC,UAAU,QAA4C,cAAc;AAC7E,SAASC,wBAAwB,QAAQ,kBAAS;AAYlD,OAAO,SAASC,kBAAkBA,CAAA,EAIhC;EACA,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGP,QAAQ,CAChD,IACF,CAAC;EACD,MAAM,CAACQ,aAAa,EAAEC,gBAAgB,CAAC,GAAGT,QAAQ,CAChD,IACF,CAAC;EAED,MAAMU,WAAW,GAAGP,UAAU,CAACQ,GAAG,CAAC,QAAQ,CAAC,CAACC,KAAK;EAElD,MAAMC,eAAe,GAAGZ,WAAW,CAAEa,KAAwB,IAAK;IAChEP,gBAAgB,CAACO,KAAK,CAACC,WAAW,CAACC,MAAM,CAAC;EAC5C,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,eAAe,GAAGhB,WAAW,CAAEa,KAAwB,IAAK;IAChEL,gBAAgB,CAACK,KAAK,CAACC,WAAW,CAACC,MAAM,CAAC;EAC5C,CAAC,EAAE,EAAE,CAAC;EAEN,MAAME,aAAa,GAAGhB,OAAO,CAAC,MAAM;IAClC,IAAI,CAACI,aAAa,IAAI,CAACE,aAAa,EAClC,OAAOJ,wBAAwB,CAACe,MAAM;IAExC,MAAMC,gBAAgB,GAAGd,aAAa,CAACe,CAAC;IACxC,MAAMC,oBAAoB,GAAGF,gBAAgB,GAAGZ,aAAa,CAACI,KAAK;IAEnE,IAAIQ,gBAAgB,KAAK,CAAC,EAAE;MAC1B,OAAOhB,wBAAwB,CAACmB,IAAI;IACtC;IAEA,IAAID,oBAAoB,GAAGZ,WAAW,EAAE;MACtC,OAAON,wBAAwB,CAACoB,KAAK;IACvC;IAEA,OAAOpB,wBAAwB,CAACe,MAAM;EACxC,CAAC,EAAE,CAACb,aAAa,EAAEE,aAAa,CAAC,CAAC;EAElC,MAAMiB,yBAAyB,GAAGxB,WAAW,CAAC,MAAM;IAClD,IAAI,CAACK,aAAa,IAAI,CAACE,aAAa,EAAE;MACpC,OAAO;QAAEkB,UAAU,EAAE;MAAE,CAAC;IAC1B;IAEA,MAAMN,gBAAgB,GAAGd,aAAa,CAACe,CAAC;IACxC,MAAMC,oBAAoB,GAAGF,gBAAgB,GAAGZ,aAAa,CAACI,KAAK;IAEnE,IAAIQ,gBAAgB,KAAK,CAAC,EAAE;MAC1B,OAAO;QAAEM,UAAU,EAAE,CAAClB,aAAa,CAACa;MAAE,CAAC;IACzC;IAEA,IAAIC,oBAAoB,GAAGZ,WAAW,EAAE;MACtC,OAAO;QAAEgB,UAAU,EAAElB,aAAa,CAACa;MAAE,CAAC;IACxC;IAEA,OAAO;MAAEK,UAAU,EAAE;IAAE,CAAC;EAC1B,CAAC,EAAE,CAACpB,aAAa,EAAEE,aAAa,EAAEE,WAAW,CAAC,CAAC;EAE/C,OAAO;IACLiB,YAAY,EAAE;MACZrB,aAAa;MACbE,aAAa;MACbE,WAAW;MACXkB,gBAAgB,EAAEH,yBAAyB,CAAC,CAAC;MAC7CP;IACF,CAAC;IACDL,eAAe;IACfI;EACF,CAAC;AACH","ignoreList":[]}

package/dist/module/components/Tooltip/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+import { View, Pressable } from "react-native";
+import { Content } from "./components/index.js";
+import { useTooltipPosition } from "./hooks/index.js";
+import { TooltipVariantEnum } from "./enum/index.js";
+import { useState, useCallback, cloneElement, isValidElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Tooltip(props) {
+  const {
+    children,
+    message,
+    variant = TooltipVariantEnum.TRIGGER,
+    className,
+    containerClassName,
+    pointerClassName,
+    isOpenedByVariantError,
+    onChangeVisibility
+  } = props;
+  const {
+    positionData,
+    onTriggerLayout,
+    onTooltipLayout
+  } = useTooltipPosition();
+  const [isVisible, setIsVisible] = useState(false);
+  const handleVisibilityChange = useCallback(visible => {
+    setIsVisible(visible);
+    onChangeVisibility?.(visible);
+  }, [onChangeVisibility]);
+  const handleToggleVisibility = useCallback(() => {
+    const newVisibility = !isVisible;
+    handleVisibilityChange(newVisibility);
+  }, [isVisible, handleVisibilityChange]);
+  const renderTriggerContent = () => {
+    if (variant !== TooltipVariantEnum.TRIGGER) {
+      return children;
+    }
+    if (/*#__PURE__*/isValidElement(children)) {
+      const child = children;
+      const childProps = child.props;
+      const componentType = child.type;
+      const componentName = (typeof componentType === 'function' ? componentType.displayName || componentType.name : componentType) || '';
+      const isButton = componentName === 'Button' || componentName === 'Pressable' || componentName === 'TouchableOpacity';
+      if (isButton || childProps && typeof childProps.onPress === 'function') {
+        return /*#__PURE__*/cloneElement(child, {
+          ...childProps,
+          onPress: (...args) => {
+            if (typeof childProps.onPress === 'function') {
+              childProps.onPress(...args);
+              handleToggleVisibility();
+            }
+          }
+        });
+      }
+    }
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: handleToggleVisibility,
+      children: children
+    });
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    className: "relative",
+    onLayout: onTriggerLayout,
+    children: [renderTriggerContent(), /*#__PURE__*/_jsx(Content, {
+      message: message,
+      variant: variant,
+      isVisible: variant === TooltipVariantEnum.TRIGGER ? isVisible : !!isOpenedByVariantError,
+      onLayout: onTooltipLayout,
+      translateX: positionData.adjustedPosition.translateX,
+      pointerOffset: positionData.pointerOffset,
+      className: className,
+      containerClassName: containerClassName,
+      pointerClassName: pointerClassName,
+      onChangeVisibility: handleVisibilityChange
+    })]
+  });
+}
+//# sourceMappingURL=index.js.map

package/dist/module/components/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","Pressable","Content","useTooltipPosition","TooltipVariantEnum","useState","useCallback","cloneElement","isValidElement","jsx","_jsx","jsxs","_jsxs","Tooltip","props","children","message","variant","TRIGGER","className","containerClassName","pointerClassName","isOpenedByVariantError","onChangeVisibility","positionData","onTriggerLayout","onTooltipLayout","isVisible","setIsVisible","handleVisibilityChange","visible","handleToggleVisibility","newVisibility","renderTriggerContent","child","childProps","componentType","type","componentName","displayName","name","isButton","onPress","args","onLayout","translateX","adjustedPosition","pointerOffset"],"sourceRoot":"../../../../src","sources":["components/Tooltip/index.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/components/Tooltip/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/dist/module/components/Tooltip/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/Tooltip/types.ts"],"mappings":"","ignoreList":[]}

package/dist/module/components/Typography/assets/class-variants.js

@@ -0,0 +1,55 @@
+"use strict";
+
+import { cva } from "class-variance-authority";
+import { Platform } from "react-native";
+const getWeightVariants = () => {
+  if (Platform.OS === "web") {
+    return {
+      "200": "font-[200]",
+      "300": "font-[300]",
+      "400": "font-[400]",
+      "500": "font-[500]",
+      "600": "font-[600]",
+      "700": "font-[700]",
+      "800": "font-[800]",
+      "900": "font-[900]"
+    };
+  }
+  return {
+    "200": "font-nunito-extralight",
+    "300": "font-nunito-light",
+    "400": "font-nunito-regular",
+    "500": "font-nunito-medium",
+    "600": "font-nunito-semibold",
+    "700": "font-nunito-bold",
+    "800": "font-nunito-extrabold",
+    "900": "font-nunito-black"
+  };
+};
+export const typographyVariants = cva("font-nunito-regular text-chia-900", {
+  variants: {
+    variant: {
+      label_small: "text-[12px] leading-[16px]",
+      label_medium: "text-[13.5px] leading-[18px]",
+      label_large: "text-[16px] leading-[22px]",
+      body_small: "text-[12px] leading-[16px]",
+      body_medium: "text-[13.5px] leading-[20px]",
+      body_large: "text-[16px] leading-[24px]",
+      title_small: "text-[16px] leading-[20px]",
+      title_medium: "text-[18px] leading-[22px]",
+      title_large: "text-[22px] leading-[24px]",
+      headline_small: "text-[26px] leading-[32px]",
+      headline_medium: "text-[32px] leading-[36px]",
+      headline_large: "text-[36px] leading-[40px]",
+      display_small: "text-[40px] leading-[48px]",
+      display_medium: "text-[44px] leading-[56px]",
+      display_large: "text-[56px] leading-[64px]"
+    },
+    weight: getWeightVariants()
+  },
+  defaultVariants: {
+    variant: "body_medium",
+    weight: "400"
+  }
+});
+//# sourceMappingURL=class-variants.js.map

package/dist/module/components/Typography/assets/class-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cva","Platform","getWeightVariants","OS","typographyVariants","variants","variant","label_small","label_medium","label_large","body_small","body_medium","body_large","title_small","title_medium","title_large","headline_small","headline_medium","headline_large","display_small","display_medium","display_large","weight","defaultVariants"],"sourceRoot":"../../../../../src","sources":["components/Typography/assets/class-variants.ts"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,0BAA0B;AAC9C,SAASC,QAAQ,QAAQ,cAAc;AAEvC,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EAC9B,IAAID,QAAQ,CAACE,EAAE,KAAK,KAAK,EAAE;IACzB,OAAO;MACL,KAAK,EAAE,YAAY;MACnB,KAAK,EAAE,YAAY;MACnB,KAAK,EAAE,YAAY;MACnB,KAAK,EAAE,YAAY;MACnB,KAAK,EAAE,YAAY;MACnB,KAAK,EAAE,YAAY;MACnB,KAAK,EAAE,YAAY;MACnB,KAAK,EAAE;IACT,CAAC;EACH;EAEA,OAAO;IACL,KAAK,EAAE,wBAAwB;IAC/B,KAAK,EAAE,mBAAmB;IAC1B,KAAK,EAAE,qBAAqB;IAC5B,KAAK,EAAE,oBAAoB;IAC3B,KAAK,EAAE,sBAAsB;IAC7B,KAAK,EAAE,kBAAkB;IACzB,KAAK,EAAE,uBAAuB;IAC9B,KAAK,EAAE;EACT,CAAC;AACH,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAGJ,GAAG,CAAC,mCAAmC,EAAE;EACzEK,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,WAAW,EAAE,4BAA4B;MACzCC,YAAY,EAAE,8BAA8B;MAC5CC,WAAW,EAAE,4BAA4B;MACzCC,UAAU,EAAE,4BAA4B;MACxCC,WAAW,EAAE,8BAA8B;MAC3CC,UAAU,EAAE,4BAA4B;MACxCC,WAAW,EAAE,4BAA4B;MACzCC,YAAY,EAAE,4BAA4B;MAC1CC,WAAW,EAAE,4BAA4B;MACzCC,cAAc,EAAE,4BAA4B;MAC5CC,eAAe,EAAE,4BAA4B;MAC7CC,cAAc,EAAE,4BAA4B;MAC5CC,aAAa,EAAE,4BAA4B;MAC3CC,cAAc,EAAE,4BAA4B;MAC5CC,aAAa,EAAE;IACjB,CAAC;IACDC,MAAM,EAAEpB,iBAAiB,CAAC;EAC5B,CAAC;EAEDqB,eAAe,EAAE;IACfjB,OAAO,EAAE,aAAa;IACtBgB,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/components/Typography/index.js

@@ -3,6 +3,7 @@
 import React from "react";
 import { Text } from "react-native";
 import { merge } from "@kivid/tailwind-preset";
+import { typographyVariants } from "./assets/class-variants.js";
 
 /**
  * Universal Typography component for React Native.
@@ -15,15 +16,15 @@ import { merge } from "@kivid/tailwind-preset";
  *
  * @example
  * // Display text with automatic font mapping
- * <Typography variant="text-display_large_700">Hero Title</Typography>
+ * <Typography variant="display_large" weight="700">Hero Title</Typography>
  *
  * @example
  * // Body text with medium weight
- * <Typography variant="text-body_medium_500">Content text</Typography>
+ * <Typography variant="body_medium" weight="500">Content text</Typography>
  *
  * @example
  * // With additional styling
- * <Typography variant="text-label_small_300" className="text-gray-600">
+ * <Typography variant="label_small" weight="300" className="text-gray-600">
  *   Form label
  * </Typography>
  */
@@ -31,11 +32,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const Typography = ({
   variant,
   className,
-  style,
+  weight,
   children,
   ...props
 }) => {
-  const textClassName = merge(`font-nunito`, variant, className);
+  const textClassName = merge(typographyVariants({
+    variant,
+    weight
+  }), className);
   return /*#__PURE__*/_jsx(Text, {
     className: textClassName,
     ...props,

package/dist/module/components/Typography/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","merge","jsx","_jsx","Typography","variant","className","style","children","props","textClassName","displayName"],"sourceRoot":"../../../../src","sources":["components/Typography/index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,KAAK,QAAQ,wBAAwB;;AAE9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAtBA,SAAAC,GAAA,IAAAC,IAAA;AAuBA,OAAO,MAAMC,UAAqC,GAAGA,CAAC;EACpDC,OAAO;EACPC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,aAAa,GAAGT,KAAK,CAAC,aAAa,EAAEI,OAAO,EAAEC,SAAS,CAAC;EAE9D,oBACEH,IAAA,CAACH,IAAI;IAACM,SAAS,EAAEI,aAAc;IAAA,GAAKD,KAAK;IAAAD,QAAA,EACtCA;EAAQ,CACL,CAAC;AAEX,CAAC;AAEDJ,UAAU,CAACO,WAAW,GAAG,YAAY;AACrC,eAAeP,UAAU","ignoreList":[]}
+{"version":3,"names":["React","Text","merge","typographyVariants","jsx","_jsx","Typography","variant","className","weight","children","props","textClassName","displayName"],"sourceRoot":"../../../../src","sources":["components/Typography/index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,kBAAkB,QAAQ,4BAAyB;;AAE5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAtBA,SAAAC,GAAA,IAAAC,IAAA;AAuBA,OAAO,MAAMC,UAAqC,GAAGA,CAAC;EACpDC,OAAO;EACPC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,aAAa,GAAGV,KAAK,CACzBC,kBAAkB,CAAC;IAAEI,OAAO;IAAEE;EAAO,CAAC,CAAC,EACvCD,SACF,CAAC;EAED,oBACEH,IAAA,CAACJ,IAAI;IAACO,SAAS,EAAEI,aAAc;IAAA,GAAKD,KAAK;IAAAD,QAAA,EACtCA;EAAQ,CACL,CAAC;AAEX,CAAC;AAEDJ,UAAU,CAACO,WAAW,GAAG,YAAY;AACrC,eAAeP,UAAU","ignoreList":[]}

package/dist/module/components/index.js

@@ -1,14 +1,42 @@
 "use strict";
 
+export * from "./Avatar/index.js";
 export * from "./Button/index.js";
+export * from "./ChatBubble/index.js";
 export * from "./Chip/index.js";
+export * from "./Chip/enums/index.js";
+export * from "./Chip/types.js";
 export * from "./InformationStatus/index.js";
-export * from "./InputCheckbox/index.js";
-export * from "./InputOTP/index.js";
+export * from "./InformationStatus/enums.js";
+export * from "./CheckboxInput/index.js";
+export * from "./CheckboxInput/enums/index.js";
+export * from "./OtpInput/index.js";
+export * from "./OtpInput/enums/index.js";
+export * from "./MessageInput/index.js";
 export * from "./HighlightedText/index.js";
 export * from "./LoadingDots/index.js";
+export * from "./LoadingDots/types.js";
 export * from "./Seal/index.js";
+export * from "./Seal/enums/index.js";
 export * from "./Title/index.js";
 export * from "./Toggle/index.js";
+export * from "./Toggle/enums/index.js";
 export * from "./Typography/index.js";
+export * from "./Toast/index.js";
+export * from "./Toast/enums/index.js";
+export * from "./Tooltip/index.js";
+export * from "./ListButton/index.js";
+export * from "./ListButton/enums/index.js";
+export * from "./TextInput/index.js";
+export * from "./TextInput/enums.js";
+export * from "./SelectButton/index.js";
+export * from "./SelectButton/enums/index.js";
+export * from "./RadioInput/index.js";
+export * from "./RadioInput/enums/index.js";
+export * from "./IconButton/index.js";
+export * from "./IconButton/enums.js";
+export * from "./PasswordInput/index.js";
+export * from "./PageIndicators/index.js";
+export * from "./ActionButton/index.js";
+export * from "./MessageInput/index.js";
 //# sourceMappingURL=index.js.map

package/dist/module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,8BAAqB;AACnC,cAAc,0BAAiB;AAC/B,cAAc,qBAAY;AAC1B,cAAc,4BAAmB;AACjC,cAAc,wBAAe;AAC7B,cAAc,iBAAQ;AACtB,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,uBAAc","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,mBAAU;AACxB,cAAc,mBAAU;AAGxB,cAAc,uBAAc;AAI5B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,iBAAc;AAE5B,cAAc,8BAAqB;AACnC,cAAc,8BAA2B;AAGzC,cAAc,0BAAiB;AAC/B,cAAc,gCAAuB;AAGrC,cAAc,qBAAY;AAC1B,cAAc,2BAAkB;AAGhC,cAAc,yBAAgB;AAG9B,cAAc,4BAAmB;AAGjC,cAAc,wBAAe;AAC7B,cAAc,wBAAqB;AAEnC,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAG5B,cAAc,kBAAS;AAGvB,cAAc,mBAAU;AACxB,cAAc,yBAAgB;AAG9B,cAAc,uBAAc;AAG5B,cAAc,kBAAS;AACvB,cAAc,wBAAe;AAG7B,cAAc,oBAAW;AAGzB,cAAc,uBAAc;AAC5B,cAAc,6BAAoB;AAGlC,cAAc,sBAAa;AAC3B,cAAc,sBAAmB;AAGjC,cAAc,yBAAgB;AAC9B,cAAc,+BAAsB;AAGpC,cAAc,uBAAc;AAC5B,cAAc,6BAAoB;AAGlC,cAAc,uBAAc;AAC5B,cAAc,uBAAoB;AAGlC,cAAc,0BAAiB;AAG/B,cAAc,2BAAkB;AAGhC,cAAc,yBAAgB;AAG9B,cAAc,yBAAgB","ignoreList":[]}

package/dist/module/enums/corners.js

@@ -0,0 +1,10 @@
+"use strict";
+
+export let CornersEnum = /*#__PURE__*/function (CornersEnum) {
+  CornersEnum["SMALL"] = "small";
+  CornersEnum["MEDIUM"] = "medium";
+  CornersEnum["LARGE"] = "large";
+  CornersEnum["XLARGE"] = "xlarge";
+  return CornersEnum;
+}({});
+//# sourceMappingURL=corners.js.map

package/dist/module/enums/corners.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CornersEnum"],"sourceRoot":"../../../src","sources":["enums/corners.ts"],"mappings":";;AAAA,WAAYA,WAAW,0BAAXA,WAAW;EAAXA,WAAW;EAAXA,WAAW;EAAXA,WAAW;EAAXA,WAAW;EAAA,OAAXA,WAAW;AAAA","ignoreList":[]}

package/dist/module/enums/font-weight.js

@@ -0,0 +1,14 @@
+"use strict";
+
+export let FontWeightEnum = /*#__PURE__*/function (FontWeightEnum) {
+  FontWeightEnum["LIGHT"] = "100";
+  FontWeightEnum["THIN"] = "200";
+  FontWeightEnum["REGULAR"] = "400";
+  FontWeightEnum["MEDIUM"] = "500";
+  FontWeightEnum["SEMIBOLD"] = "600";
+  FontWeightEnum["BOLD"] = "700";
+  FontWeightEnum["EXTRA_BOLD"] = "800";
+  FontWeightEnum["BLACK"] = "900";
+  return FontWeightEnum;
+}({});
+//# sourceMappingURL=font-weight.js.map

package/dist/module/enums/font-weight.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FontWeightEnum"],"sourceRoot":"../../../src","sources":["enums/font-weight.ts"],"mappings":";;AAAA,WAAYA,cAAc,0BAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA","ignoreList":[]}

package/dist/module/enums/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+export * from "./corners.js";
+export * from "./font-weight.js";
+export * from "./size.js";
+export * from "./state-variant.js";
+//# sourceMappingURL=index.js.map

package/dist/module/enums/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["enums/index.ts"],"mappings":";;AAAA,cAAc,cAAW;AACzB,cAAc,kBAAe;AAC7B,cAAc,WAAQ;AACtB,cAAc,oBAAiB","ignoreList":[]}

package/dist/module/enums/size.js

@@ -0,0 +1,14 @@
+"use strict";
+
+export let SizeEnum = /*#__PURE__*/function (SizeEnum) {
+  SizeEnum["XXSMALL"] = "xxsmall";
+  SizeEnum["XSMALL"] = "xsmall";
+  SizeEnum["SMALL"] = "small";
+  SizeEnum["MEDIUM"] = "medium";
+  SizeEnum["LARGE"] = "large";
+  SizeEnum["XLARGE"] = "xlarge";
+  SizeEnum["XXLARGE"] = "xxlarge";
+  SizeEnum["XXXLARGE"] = "xxxlarge";
+  return SizeEnum;
+}({});
+//# sourceMappingURL=size.js.map

package/dist/module/enums/size.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SizeEnum"],"sourceRoot":"../../../src","sources":["enums/size.ts"],"mappings":";;AAAA,WAAYA,QAAQ,0BAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAAA,OAARA,QAAQ;AAAA","ignoreList":[]}

package/dist/module/enums/state-variant.js

@@ -0,0 +1,11 @@
+"use strict";
+
+export let StateVariantEnum = /*#__PURE__*/function (StateVariantEnum) {
+  StateVariantEnum["SUCCESS"] = "success";
+  StateVariantEnum["ERROR"] = "error";
+  StateVariantEnum["WARNING"] = "warning";
+  StateVariantEnum["ADD"] = "add";
+  StateVariantEnum["CUSTOM"] = "custom";
+  return StateVariantEnum;
+}({});
+//# sourceMappingURL=state-variant.js.map

package/dist/module/enums/state-variant.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StateVariantEnum"],"sourceRoot":"../../../src","sources":["enums/state-variant.ts"],"mappings":";;AAAA,WAAYA,gBAAgB,0BAAhBA,gBAAgB;EAAhBA,gBAAgB;EAAhBA,gBAAgB;EAAhBA,gBAAgB;EAAhBA,gBAAgB;EAAhBA,gBAAgB;EAAA,OAAhBA,gBAAgB;AAAA","ignoreList":[]}

package/dist/module/iconography/Icons/index.js

@@ -2,18 +2,25 @@
 
 import * as IconsNative from "@kivid/icons/native";
 import React, { useMemo, useState } from "react";
-import { Alert, FlatList, Pressable, SafeAreaView, Text, TextInput, View } from "react-native";
+import { Alert, FlatList, Pressable, Text, TextInput, View } from "react-native";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Icons(props) {
   const {
     size = 24,
-    color = "currentColor"
+    color: initialColor = "currentColor"
   } = props;
   const icons = Object.entries(IconsNative).map(([name, IconComponent]) => ({
     name,
     component: IconComponent
   }));
   const [searchTerm, setSearchTerm] = useState("");
+  const [color, setColor] = useState(initialColor);
+  const availableColors = ["currentColor", "#000000", "#FF0000", "#00FF00", "#0000FF", "#FF00FF", "#FFA500", "#800080"];
+  function handleColorChange() {
+    const currentIndex = availableColors.indexOf(color);
+    const nextIndex = (currentIndex + 1) % availableColors.length;
+    setColor(availableColors[nextIndex]);
+  }
   const iconsFiltered = useMemo(() => {
     const sorted = [...icons].sort((a, b) => a.name.localeCompare(b.name));
     return sorted.filter(icon => icon.name.toLowerCase().includes(searchTerm.toLowerCase()));
@@ -23,23 +30,50 @@ export function Icons(props) {
     const component = `<${name} size={${size}} ${isCurrentColor ? "" : `color="${color}"`} />`;
     Alert.alert(`Ícone selecionado: ${component}`);
   }
-  return /*#__PURE__*/_jsxs(SafeAreaView, {
+  return /*#__PURE__*/_jsxs(View, {
     className: "m-16",
-    children: [/*#__PURE__*/_jsx(TextInput, {
-      placeholder: "Pesquisar \xEDcones...",
-      placeholderTextColor: "#98A3A3",
+    children: [/*#__PURE__*/_jsxs(View, {
       style: {
-        width: "100%",
-        height: 40,
-        marginBottom: 16,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: "#98A3A3",
-        paddingHorizontal: 12,
-        fontSize: 16
+        flexDirection: "row",
+        gap: 8,
+        marginBottom: 16
       },
-      onChangeText: setSearchTerm,
-      value: searchTerm
+      children: [/*#__PURE__*/_jsx(TextInput, {
+        placeholder: "Pesquisar \xEDcones...",
+        placeholderTextColor: "#98A3A3",
+        style: {
+          flex: 1,
+          height: 40,
+          borderRadius: 8,
+          borderWidth: 1,
+          borderColor: "#98A3A3",
+          paddingHorizontal: 12,
+          fontSize: 16
+        },
+        onChangeText: setSearchTerm,
+        value: searchTerm
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: handleColorChange,
+        style: {
+          height: 40,
+          paddingHorizontal: 16,
+          borderRadius: 8,
+          borderWidth: 1,
+          borderColor: "#98A3A3",
+          backgroundColor: color === "currentColor" ? "#F0F0F0" : color,
+          justifyContent: "center",
+          alignItems: "center",
+          minWidth: 100
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: {
+            fontSize: 14,
+            fontWeight: "600",
+            color: color === "currentColor" ? "#000000" : "#FFFFFF"
+          },
+          children: "Color"
+        })
+      })]
     }), /*#__PURE__*/_jsx(FlatList, {
       data: iconsFiltered,
       keyExtractor: ({