@pagopa/io-app-design-system 3.0.0 → 3.1.0

package/lib/module/components/tooltip/styles.js

@@ -0,0 +1,43 @@
+import { StyleSheet } from 'react-native';
+import { IOColors } from '../../core';
+export const tooltipStyles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    backgroundColor: IOColors["grey-850"],
+    opacity: 0.6,
+    zIndex: 997
+  },
+  childrenContainer: {
+    position: "absolute",
+    zIndex: 1000
+  },
+  tooltipContainer: {
+    position: "absolute",
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    backgroundColor: IOColors.white,
+    borderRadius: 8,
+    zIndex: 2000,
+    overflow: "visible"
+  },
+  arrowContainer: {
+    position: "absolute",
+    display: 'flex',
+    zIndex: 3000
+  },
+  closeIcon: {
+    position: 'absolute',
+    right: 8,
+    top: 9 // It's been used `9` instead of `8` to fix accessibility focus order. In this way title is read before close icon.
+  }
+});
+
+export const getChildrenPosition = childrenCoords => ({
+  top: childrenCoords.y,
+  left: childrenCoords.x,
+  width: childrenCoords.width,
+  height: childrenCoords.height
+});
+//# sourceMappingURL=styles.js.map

package/lib/module/components/tooltip/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","IOColors","tooltipStyles","create","overlay","position","width","height","backgroundColor","opacity","zIndex","childrenContainer","tooltipContainer","paddingHorizontal","paddingVertical","white","borderRadius","overflow","arrowContainer","display","closeIcon","right","top","getChildrenPosition","childrenCoords","y","left","x"],"sourceRoot":"../../../../src","sources":["components/tooltip/styles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,YAAY;AAGrC,OAAO,MAAMC,aAAa,GAAGF,UAAU,CAACG,MAAM,CAAC;EAC7CC,OAAO,EAAE;IACPC,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,eAAe,EAAEP,QAAQ,CAAC,UAAU,CAAC;IACrCQ,OAAO,EAAE,GAAG;IACZC,MAAM,EAAE;EACV,CAAC;EACDC,iBAAiB,EAAE;IACjBN,QAAQ,EAAE,UAAU;IACpBK,MAAM,EAAE;EACV,CAAC;EACDE,gBAAgB,EAAE;IAChBP,QAAQ,EAAE,UAAU;IACpBQ,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE,EAAE;IACnBN,eAAe,EAAEP,QAAQ,CAACc,KAAK;IAC/BC,YAAY,EAAE,CAAC;IACfN,MAAM,EAAE,IAAI;IACZO,QAAQ,EAAE;EACZ,CAAC;EACDC,cAAc,EAAE;IACdb,QAAQ,EAAE,UAAU;IACpBc,OAAO,EAAE,MAAM;IACfT,MAAM,EAAE;EACV,CAAC;EACDU,SAAS,EAAE;IACTf,QAAQ,EAAE,UAAU;IACpBgB,KAAK,EAAE,CAAC;IACRC,GAAG,EAAE,CAAC,CAAC;EACT;AACF,CAAC,CAAC;;AAEF,OAAO,MAAMC,mBAAmB,GAAIC,cAA8B,KAAM;EACtEF,GAAG,EAAEE,cAAc,CAACC,CAAC;EACrBC,IAAI,EAAEF,cAAc,CAACG,CAAC;EACtBrB,KAAK,EAAEkB,cAAc,CAAClB,KAAK;EAC3BC,MAAM,EAAEiB,cAAc,CAACjB;AACzB,CAAC,CAAC"}

package/lib/module/components/tooltip/utils/index.js

@@ -0,0 +1,163 @@
+import { IOVisualCostants } from '../../../core';
+export const ARROW_WIDTH = 24;
+export const ARROW_HEIGHT = 14;
+export const EMPTY_SPACE = 8;
+const DEFAULT_INSETS = {
+  top: 0,
+  bottom: 0,
+  left: IOVisualCostants.appMarginDefault,
+  right: IOVisualCostants.appMarginDefault
+};
+
+/**
+ * @param displayInsets custom display insets
+ * @returns An `object` based on `DEFAULT_INSETS` and `displayInsets`
+ */
+export const getDisplayInsets = displayInsets => ({
+  ...DEFAULT_INSETS,
+  ...displayInsets
+});
+
+/**
+ * 
+ * @param placement The `Tooltip` placement
+ * @returns The `Arrow` box `width` and `height` based on `placement` value
+ */
+export const getArrowBoxByPlacement = placement => {
+  switch (placement) {
+    case 'left':
+    case 'right':
+      return {
+        width: ARROW_HEIGHT,
+        height: ARROW_WIDTH
+      };
+    default:
+      return {
+        height: ARROW_HEIGHT,
+        width: ARROW_WIDTH
+      };
+  }
+};
+
+/**
+ * A utility function to calculate the `Tooltip` coordinates and dimensions
+ * @param placement The `Tooltip` placement in relation of its children
+ * @param childrenCoords The measures in screen of the `Tooltip` children
+ * @param displayInsets The active display insets
+ * @param screenDimensions The dimensions of the device screen
+ * @returns The `Tooltip` coordinates
+ */
+export const getTooltipCoords = (placement, childrenCoords, displayInsets, screenDimensions) => {
+  const {
+    width: screenWidth,
+    height: screenHeight
+  } = screenDimensions;
+  switch (placement) {
+    case "top":
+      return {
+        bottom: screenHeight - childrenCoords.y + ARROW_HEIGHT + EMPTY_SPACE,
+        left: displayInsets.left,
+        width: screenWidth - displayInsets.left - displayInsets.right
+      };
+    case "bottom":
+      return {
+        top: childrenCoords.y + childrenCoords.height + ARROW_HEIGHT + EMPTY_SPACE,
+        left: displayInsets.left,
+        width: screenWidth - displayInsets.left - displayInsets.right
+      };
+    case "left":
+      return {
+        top: childrenCoords.y,
+        left: displayInsets.left,
+        width: screenWidth - (screenWidth - childrenCoords.x) - ARROW_HEIGHT - displayInsets.left - EMPTY_SPACE
+      };
+    case "right":
+      const elementSize = childrenCoords.width + childrenCoords.x + ARROW_HEIGHT + EMPTY_SPACE;
+      return {
+        top: childrenCoords.y,
+        left: elementSize,
+        width: screenWidth - (elementSize + displayInsets.right)
+      };
+    // TODO: provide a default center position in case of Tooltip without children
+    default:
+      return {};
+  }
+};
+
+/**
+ * A utility function to calculate the `Tooltip`'s `Arrow` coordinates
+ * @param placement The `Arrow` placement in relation of the `Tooltip` children
+ * @param childrenCoords The measures in screen of the `Tooltip` children
+ * @param screenDimensions The active display insets
+ * @returns The `Tooltip`'s Arrow coordinates
+ */
+export const getArrowCoords = (placement, childrenCoords, screenDimensions) => {
+  const {
+    width: screenWidth,
+    height: screenHeight
+  } = screenDimensions;
+  switch (placement) {
+    case "top":
+      return {
+        bottom: screenHeight - childrenCoords.y + EMPTY_SPACE,
+        left: childrenCoords.x + childrenCoords.width / 2 - ARROW_WIDTH / 2
+      };
+    case "bottom":
+      return {
+        top: childrenCoords.y + childrenCoords.height + EMPTY_SPACE,
+        left: childrenCoords.x + childrenCoords.width / 2 - ARROW_WIDTH / 2
+      };
+    case "left":
+      return {
+        top: childrenCoords.y,
+        left: screenWidth - (screenWidth - childrenCoords.x) - ARROW_HEIGHT - EMPTY_SPACE - 1 // FIXME -> This `-1` is necessary because of the Svg size doesn't match the box size
+      };
+
+    case "right":
+      return {
+        top: childrenCoords.y,
+        left: childrenCoords.width + childrenCoords.x + EMPTY_SPACE
+      };
+    default:
+      // TODO: provide a default center position in case of Tooltip without children
+      return {};
+  }
+};
+
+/**
+ * A utility function to calculate the `Tooltip` vertical alignment
+ * @param placement The `Tooltip` placement in relation of its children
+ * @param childrenHeight The `Tooltip`'s children height
+ * @param tooltipHeight The `Tooltip`'s height
+ * @returns If placement is `left` or `right` it returns the vertical tranlsation to align the `Tooltip` center with its `children` center, 
+ * otherwise `null` is returned
+ */
+export const getTooltipVerticalAlignment = (placement, childrenHeight, tooltipHeight) => {
+  if ((placement === "left" || placement === "right") && tooltipHeight) {
+    return {
+      transform: [{
+        translateY: -tooltipHeight / 2 + childrenHeight / 2
+      }]
+    };
+  }
+  return null;
+};
+
+/**
+ * A utility function to calculate the `Arrow` vertical alignment
+ * @param placement The `Tooltip` placement in relation of its children
+ * @param childrenHeight The `Tooltip`'s children height
+*/
+export const getArrowVerticalAlignment = (placement, childrenHeight) => {
+  if (placement === "left" || placement === "right") {
+    return {
+      transform: [{
+        translateY: -ARROW_WIDTH / 2 + childrenHeight / 2
+      }]
+    };
+  }
+  return null;
+};
+export const isDefined = v => v !== undefined;
+export const isNotZero = v => v !== 0;
+//# sourceMappingURL=index.js.map

package/lib/module/components/tooltip/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["IOVisualCostants","ARROW_WIDTH","ARROW_HEIGHT","EMPTY_SPACE","DEFAULT_INSETS","top","bottom","left","appMarginDefault","right","getDisplayInsets","displayInsets","getArrowBoxByPlacement","placement","width","height","getTooltipCoords","childrenCoords","screenDimensions","screenWidth","screenHeight","y","x","elementSize","getArrowCoords","getTooltipVerticalAlignment","childrenHeight","tooltipHeight","transform","translateY","getArrowVerticalAlignment","isDefined","v","undefined","isNotZero"],"sourceRoot":"../../../../../src","sources":["components/tooltip/utils/index.ts"],"mappings":"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"}

package/lib/module/components/tooltip/utils/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/lib/module/components/tooltip/utils/types.js.map

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

package/lib/typescript/components/codeInput/CodeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/codeInput/CodeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAQlD,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC5B,CAAC;AA8BF,eAAO,MAAM,SAAS,0DAMnB,cAAc,sBA+ChB,CAAC"}
+{"version":3,"file":"CodeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/codeInput/CodeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAQnD,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC5B,CAAC;AA+BF,eAAO,MAAM,SAAS,0DAMnB,cAAc,sBAqEhB,CAAC"}

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

@@ -30,5 +30,6 @@ export * from "./tag";
 export * from "./textInput";
 export * from "./searchInput";
 export * from "./toast";
+export * from "./tooltip";
 export * from "./typography";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}

package/lib/typescript/components/layout/HeaderSecondLevel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderSecondLevel.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/HeaderSecondLevel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,QAAQ,EAAE,EACf,WAAW,EACX,WAAW,EASZ,MAAM,yBAAyB,CAAC;AAejC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAI/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,KAAK,YAAY,GAAG;IAClB,cAAc,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACpC,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,uBAAuB,GACxB;IACE,wBAAwB,EAAE,IAAI,CAAC;IAC/B,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;CAC/C,GACD;IACE,wBAAwB,CAAC,EAAE,KAAK,CAAC;IACjC,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC;AAEN,KAAK,SAAS,GACV;IACE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GACD;IACE,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,sBAAsB,CAAC,EAAE,KAAK,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,KAAK,WAAW,GAAG,UAAU,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IAEd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC,CAAC;AAEH,UAAU,IAAK,SAAQ,WAAW;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED,UAAU,SAAU,SAAQ,WAAW;IACrC,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,EAAE,iBAAiB,CAAC;IAC/B,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED,UAAU,UAAW,SAAQ,WAAW;IACtC,IAAI,EAAE,YAAY,CAAC;IACnB,WAAW,EAAE,iBAAiB,CAAC;IAC/B,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED,UAAU,YAAa,SAAQ,WAAW;IACxC,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,EAAE,iBAAiB,CAAC;IAC/B,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,EAAE,iBAAiB,CAAC;CAChC;AAED,MAAM,MAAM,iBAAiB,GAAG,SAAS,GACvC,uBAAuB,GACvB,CAAC,IAAI,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC;AAoBjD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,kOAiB3B,iBAAiB,sBA6LnB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"HeaderSecondLevel.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/HeaderSecondLevel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,QAAQ,EAAE,EACf,WAAW,EACX,WAAW,EASZ,MAAM,yBAAyB,CAAC;AAejC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAI/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,KAAK,YAAY,GAAG;IAClB,cAAc,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACpC,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,uBAAuB,GACxB;IACE,wBAAwB,EAAE,IAAI,CAAC;IAC/B,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;CAC/C,GACD;IACE,wBAAwB,CAAC,EAAE,KAAK,CAAC;IACjC,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC;AAEN,KAAK,SAAS,GACV;IACE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GACD;IACE,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,sBAAsB,CAAC,EAAE,KAAK,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,KAAK,WAAW,GAAG,UAAU,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IAEd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC,CAAC;AAEH,UAAU,IAAK,SAAQ,WAAW;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED,UAAU,SAAU,SAAQ,WAAW;IACrC,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,EAAE,iBAAiB,CAAC;IAC/B,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED,UAAU,UAAW,SAAQ,WAAW;IACtC,IAAI,EAAE,YAAY,CAAC;IACnB,WAAW,EAAE,iBAAiB,CAAC;IAC/B,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED,UAAU,YAAa,SAAQ,WAAW;IACxC,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,EAAE,iBAAiB,CAAC;IAC/B,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,EAAE,iBAAiB,CAAC;CAChC;AAED,MAAM,MAAM,iBAAiB,GAAG,SAAS,GACvC,uBAAuB,GACvB,CAAC,IAAI,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC;AAoBjD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,kOAiB3B,iBAAiB,sBA0LnB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/typescript/components/tooltip/Arrows.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare const LeftArrow: ({ color }: {
+    color?: string;
+}) => React.JSX.Element;
+export declare const RightArrow: ({ color }: {
+    color?: string;
+}) => React.JSX.Element;
+export declare const BottomArrow: ({ color }: {
+    color?: string;
+}) => React.JSX.Element;
+export declare const TopArrow: ({ color }: {
+    color?: string;
+}) => React.JSX.Element;
+//# sourceMappingURL=Arrows.d.ts.map

package/lib/typescript/components/tooltip/Arrows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arrows.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/Arrows.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,SAAS,cAAgC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,sBAOvE,CAAC;AACF,eAAO,MAAM,UAAU,cAAgC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,sBAOxE,CAAC;AACF,eAAO,MAAM,WAAW,cAAgC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,sBAOzE,CAAC;AACF,eAAO,MAAM,QAAQ,cAAgC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,sBAOtE,CAAC"}

package/lib/typescript/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,64 @@
+import { PropsWithChildren, ReactElement } from "react";
+import { DisplayInsets, Placement } from "./utils/types";
+type CommonProps = {
+    /**
+     * The title text displayed at the top of the tooltip.
+     */
+    title: string;
+    /**
+     * The tooltip text content.
+     */
+    content: string;
+    /**
+     * Controls the visibility of the tooltip.
+     */
+    isVisible: boolean;
+    /**
+     * Initial tooltip position; can be 'top', 'bottom', 'left', or 'right'.
+     * @default top
+     */
+    placement?: Placement;
+    /**
+     * Insets for adjusting tooltip position within screen boundaries.
+     * @default {}
+     */
+    displayInsets?: Partial<DisplayInsets>;
+    /**
+     * Accessibility label for the close icon button.
+     */
+    closeIconAccessibilityLabel: string;
+    /**
+     * Determines whether interactions with the tooltip's children are allowed when `isVisible` is set to true.
+     * @default false
+     */
+    childrenInteractionsEnabled?: boolean;
+    /**
+     *  Callback function triggered when the tooltip is closed.
+     */
+    onClose: () => void;
+};
+type CloseWithTapOnBackground = {
+    /**
+     * Allows closing the tooltip by tapping outside of it.
+     */
+    allowCloseOnBackgroundTap: true;
+    /**
+     * Accessibility label for the tooltip background mask.
+     */
+    backgroundAccessibilityLabel: string;
+};
+type CloseWithBackgroundTapDisabled = {
+    allowCloseOnBackgroundTap?: false;
+};
+type Props = CommonProps & (CloseWithTapOnBackground | CloseWithBackgroundTapDisabled);
+/**
+ * Tooltip component that displays a contextual tooltip around its children.
+ * The tooltip position is controlled by the `placement` prop and can adjust
+ * dynamically if there is insufficient space.
+ * @param {Props} props - The component props
+ *
+ * @returns {ReactElement} A tooltip component rendered around the specified children.
+ */
+export declare const Tooltip: ({ children, title, content, placement: initialPlacement, closeIconAccessibilityLabel, isVisible, displayInsets, allowCloseOnBackgroundTap, childrenInteractionsEnabled, onClose }: PropsWithChildren<Props>) => ReactElement;
+export {};
+//# sourceMappingURL=Tooltip.d.ts.map

package/lib/typescript/components/tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAc,EAGZ,iBAAiB,EAKjB,YAAY,EACb,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAEL,aAAa,EACb,SAAS,EAEV,MAAM,eAAe,CAAC;AAmBvB,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;OAEG;IACH,2BAA2B,EAAE,MAAM,CAAC;IACpC;;;OAGG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AACF,KAAK,wBAAwB,GAAG;IAC9B;;OAEG;IACH,yBAAyB,EAAE,IAAI,CAAC;IAChC;;OAEG;IACH,4BAA4B,EAAE,MAAM,CAAC;CACtC,CAAC;AACF,KAAK,8BAA8B,GAAG;IACpC,yBAAyB,CAAC,EAAE,KAAK,CAAC;CACnC,CAAC;AACF,KAAK,KAAK,GAAG,WAAW,GAAG,CAAC,wBAAwB,GAAG,8BAA8B,CAAC,CAAC;AAEvF;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,sLAWjB,kBAAkB,KAAK,CAAC,KAAG,YAqL7B,CAAC"}

package/lib/typescript/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Tooltip";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/lib/typescript/components/tooltip/styles.d.ts

@@ -0,0 +1,41 @@
+import { ChildrenCoords } from './utils/types';
+export declare const tooltipStyles: {
+    overlay: {
+        position: "absolute";
+        width: string;
+        height: string;
+        backgroundColor: string;
+        opacity: number;
+        zIndex: number;
+    };
+    childrenContainer: {
+        position: "absolute";
+        zIndex: number;
+    };
+    tooltipContainer: {
+        position: "absolute";
+        paddingHorizontal: number;
+        paddingVertical: number;
+        backgroundColor: string;
+        borderRadius: number;
+        zIndex: number;
+        overflow: "visible";
+    };
+    arrowContainer: {
+        position: "absolute";
+        display: "flex";
+        zIndex: number;
+    };
+    closeIcon: {
+        position: "absolute";
+        right: number;
+        top: number;
+    };
+};
+export declare const getChildrenPosition: (childrenCoords: ChildrenCoords) => {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/tooltip/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxB,CAAC;AAEH,eAAO,MAAM,mBAAmB,mBAAoB,cAAc;;;;;CAKhE,CAAC"}

package/lib/typescript/components/tooltip/utils/index.d.ts

@@ -0,0 +1,89 @@
+import { ScaledSize } from 'react-native';
+import { ChildrenCoords, DisplayInsets, Placement } from './types';
+export declare const ARROW_WIDTH = 24;
+export declare const ARROW_HEIGHT = 14;
+export declare const EMPTY_SPACE = 8;
+/**
+ * @param displayInsets custom display insets
+ * @returns An `object` based on `DEFAULT_INSETS` and `displayInsets`
+ */
+export declare const getDisplayInsets: (displayInsets: Partial<DisplayInsets>) => DisplayInsets;
+/**
+ *
+ * @param placement The `Tooltip` placement
+ * @returns The `Arrow` box `width` and `height` based on `placement` value
+ */
+export declare const getArrowBoxByPlacement: (placement: Placement) => {
+    width: number;
+    height: number;
+};
+/**
+ * A utility function to calculate the `Tooltip` coordinates and dimensions
+ * @param placement The `Tooltip` placement in relation of its children
+ * @param childrenCoords The measures in screen of the `Tooltip` children
+ * @param displayInsets The active display insets
+ * @param screenDimensions The dimensions of the device screen
+ * @returns The `Tooltip` coordinates
+ */
+export declare const getTooltipCoords: (placement: Placement, childrenCoords: ChildrenCoords, displayInsets: DisplayInsets, screenDimensions: ScaledSize) => {
+    bottom: number;
+    left: number;
+    width: number;
+    top?: undefined;
+} | {
+    top: number;
+    left: number;
+    width: number;
+    bottom?: undefined;
+} | {
+    bottom?: undefined;
+    left?: undefined;
+    width?: undefined;
+    top?: undefined;
+};
+/**
+ * A utility function to calculate the `Tooltip`'s `Arrow` coordinates
+ * @param placement The `Arrow` placement in relation of the `Tooltip` children
+ * @param childrenCoords The measures in screen of the `Tooltip` children
+ * @param screenDimensions The active display insets
+ * @returns The `Tooltip`'s Arrow coordinates
+ */
+export declare const getArrowCoords: (placement: Placement, childrenCoords: ChildrenCoords, screenDimensions: ScaledSize) => {
+    bottom: number;
+    left: number;
+    top?: undefined;
+} | {
+    top: number;
+    left: number;
+    bottom?: undefined;
+} | {
+    bottom?: undefined;
+    left?: undefined;
+    top?: undefined;
+};
+/**
+ * A utility function to calculate the `Tooltip` vertical alignment
+ * @param placement The `Tooltip` placement in relation of its children
+ * @param childrenHeight The `Tooltip`'s children height
+ * @param tooltipHeight The `Tooltip`'s height
+ * @returns If placement is `left` or `right` it returns the vertical tranlsation to align the `Tooltip` center with its `children` center,
+ * otherwise `null` is returned
+ */
+export declare const getTooltipVerticalAlignment: (placement: Placement, childrenHeight: number, tooltipHeight?: number) => {
+    transform: {
+        translateY: number;
+    }[];
+} | null;
+/**
+ * A utility function to calculate the `Arrow` vertical alignment
+ * @param placement The `Tooltip` placement in relation of its children
+ * @param childrenHeight The `Tooltip`'s children height
+*/
+export declare const getArrowVerticalAlignment: (placement: Placement, childrenHeight: number) => {
+    transform: {
+        translateY: number;
+    }[];
+} | null;
+export declare const isDefined: <T>(v: T) => boolean;
+export declare const isNotZero: (v: number) => boolean;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/tooltip/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tooltip/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEnE,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,WAAW,IAAI,CAAC;AAQ7B;;;GAGG;AACH,eAAO,MAAM,gBAAgB,kBACZ,QAAQ,aAAa,CAAC,KACpC,aAA0D,CAAC;AAE9D;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,cAAe,SAAS;;;CAc1D,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,cAChB,SAAS,kBACJ,cAAc,iBACf,aAAa,oBACV,UAAU;;;;;;;;;;;;;;;CAsC7B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,cACd,SAAS,kBACJ,cAAc,oBACZ,UAAU;;;;;;;;;;;;CA6B7B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,2BAA2B,cAAe,SAAS,kBAAkB,MAAM,kBAAkB,MAAM;;;;QAY/G,CAAC;AAEF;;;;EAIE;AACF,eAAO,MAAM,yBAAyB,cAAe,SAAS,kBAAkB,MAAM;;;;QAYrF,CAAC;AAEF,eAAO,MAAM,SAAS,SAAU,CAAC,YAAoB,CAAC;AACtD,eAAO,MAAM,SAAS,MAAO,MAAM,YAAY,CAAC"}

package/lib/typescript/components/tooltip/utils/types.d.ts

@@ -0,0 +1,10 @@
+export type DisplayInsets = Record<Placement, number>;
+export type Placement = "top" | "bottom" | "left" | "right";
+export type ChildrenCoords = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type TooltipLayout = ChildrenCoords;
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/components/tooltip/utils/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/tooltip/utils/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5D,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AACF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/codeInput/CodeInput.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useMemo } from "react";
-import { StyleSheet, View } from "react-native";
+import React, { useEffect, useState } from "react";
+import { ColorValue, StyleSheet, View } from "react-native";
 import Animated from "react-native-reanimated";
-import { IOColors, IOStyles } from "../../core";
+import { hexToRgba, IOColors, useIOThemeContext } from "../../core";
 import { triggerHaptic } from "../../functions";
 import { useErrorShakeAnimation } from "../../utils/hooks/useErrorShakeAnimation";
 import { HStack } from "../stack";
@@ -20,28 +20,29 @@ const styles = StyleSheet.create({
   dotShape: {
     width: DOT_SIZE,
     height: DOT_SIZE,
-    borderRadius: 8,
+    borderRadius: DOT_SIZE / 2,
     borderWidth: 2
-  },
-  dotEmpty: {
-    borderColor: IOColors["grey-650"]
-  },
-  wrapper: {
-    justifyContent: "center"
   }
 });
 
-const EmptyDot = () => <View style={[styles.dotShape, styles.dotEmpty]} />;
-
-const FilletDot = ({ color }: { color: IOColors }) => (
+const EmptyDot = ({ color: borderColor }: { color: ColorValue }) => (
   <View
     style={[
       styles.dotShape,
-      { backgroundColor: IOColors[color], borderColor: IOColors[color] }
+      {
+        borderColor,
+        backgroundColor: hexToRgba(borderColor, 0)
+      }
     ]}
   />
 );
 
+const FilledDot = ({ color: backgroundColor }: { color: ColorValue }) => (
+  <View
+    style={[styles.dotShape, { backgroundColor, borderColor: backgroundColor }]}
+  />
+);
+
 export const CodeInput = ({
   length,
   value,
@@ -49,19 +50,34 @@ export const CodeInput = ({
   variant = "light",
   onValidate
 }: CodeInputProps) => {
-  const [status, setStatus] = React.useState<"default" | "error">("default");
+  const [status, setStatus] = useState<"default" | "error">("default");
+  const { themeType } = useIOThemeContext();
 
   const { translate, animatedStyle, shakeAnimation } = useErrorShakeAnimation();
 
-  const fillColor = useMemo(
-    () =>
-      status === "error"
-        ? "error-600"
-        : variant === "light"
-        ? "white"
-        : "black",
-    [variant, status]
-  );
+  /* Empty Dot
+  - Right color depending on both theme and variant */
+  const emptyDotColorLightBg = IOColors["grey-650"];
+  const emptyDotColorDarkBg = hexToRgba(IOColors.white, 0.75);
+  const emptyDotColorThemeBased =
+    themeType === "light" ? emptyDotColorLightBg : emptyDotColorDarkBg;
+
+  const emptyDotColor =
+    variant === "light" ? emptyDotColorDarkBg : emptyDotColorThemeBased;
+
+  /* Filled Dot
+  - Right color depending on theme, variant and status */
+  const filledDotColorLightBg = IOColors.black;
+  const filledDotColorDarkBg = IOColors.white;
+  const filledDotColorThemeBased =
+    themeType === "light" ? filledDotColorLightBg : filledDotColorDarkBg;
+
+  const filledDotColor =
+    status === "error"
+      ? IOColors["error-600"]
+      : variant === "light"
+      ? filledDotColorDarkBg
+      : filledDotColorThemeBased;
 
   useEffect(() => {
     if (onValidate && value.length === length) {
@@ -85,13 +101,20 @@ export const CodeInput = ({
   }, [value, onValidate, length, onValueChange, translate, shakeAnimation]);
 
   return (
-    <Animated.View style={[IOStyles.row, styles.wrapper, animatedStyle]}>
+    <Animated.View
+      style={[
+        { flexDirection: "row", justifyContent: "center" },
+        animatedStyle
+      ]}
+    >
       <HStack space={DOT_SIZE}>
-        {[...Array(length)].map((_, i) => (
-          <React.Fragment key={i}>
-            {value[i] ? <FilletDot color={fillColor} /> : <EmptyDot />}
-          </React.Fragment>
-        ))}
+        {[...Array(length)].map((_, i) =>
+          value[i] ? (
+            <FilledDot key={i} color={filledDotColor} />
+          ) : (
+            <EmptyDot key={i} color={emptyDotColor} />
+          )
+        )}
       </HStack>
     </Animated.View>
   );

package/src/components/index.tsx

@@ -30,4 +30,5 @@ export * from "./tag";
 export * from "./textInput";
 export * from "./searchInput";
 export * from "./toast";
+export * from "./tooltip";
 export * from "./typography";