@korsolutions/ui 0.0.52 → 0.0.53

package/src/hooks/use-relative-position.ts

@@ -1,8 +1,16 @@
-import type { SafeAreaInsets } from "@/safe-area";
 import { useMemo } from "react";
-import { useWindowDimensions, type DisplayMetrics, type LayoutRectangle, type ViewStyle } from "react-native";
+import {
+  useWindowDimensions,
+  type DisplayMetrics,
+  type LayoutRectangle,
+  type ViewStyle,
+} from "react-native";
+import type { SafeAreaInsets } from "../safe-area";
 
-type UseRelativePositionArgs = Omit<GetContentStyleArgs, "triggerPosition" | "contentLayout" | "dimensions"> & {
+type UseRelativePositionArgs = Omit<
+  GetContentStyleArgs,
+  "triggerPosition" | "contentLayout" | "dimensions"
+> & {
   triggerPosition: LayoutPosition | null;
   contentLayout: LayoutRectangle | null;
 };
@@ -40,7 +48,17 @@ export function useRelativePosition({
     });
 
     return style;
-  }, [align, preferredSide, alignOffset, insets, triggerPosition, contentLayout, dimensions.width, dimensions.height, sideOffset]);
+  }, [
+    align,
+    preferredSide,
+    alignOffset,
+    insets,
+    triggerPosition,
+    contentLayout,
+    dimensions.width,
+    dimensions.height,
+    sideOffset,
+  ]);
 }
 
 export interface LayoutPosition {
@@ -62,8 +80,18 @@ interface GetSidePositionArgs extends GetPositionArgs {
   sideOffset: number;
 }
 
-export const DEFAULT_LAYOUT: LayoutRectangle = { x: 0, y: 0, width: 0, height: 0 };
-export const DEFAULT_POSITION: LayoutPosition = { height: 0, width: 0, pageX: 0, pageY: 0 };
+export const DEFAULT_LAYOUT: LayoutRectangle = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+};
+export const DEFAULT_POSITION: LayoutPosition = {
+  height: 0,
+  width: 0,
+  pageX: 0,
+  pageY: 0,
+};
 
 interface GetSideArgs {
   preferredSide: "top" | "bottom";
@@ -75,7 +103,15 @@ interface GetSideArgs {
   dimensions: DisplayMetrics;
 }
 
-function getSide({ preferredSide, insetTop, insetBottom, positionTop, positionBottom, contentLayout, dimensions }: GetSideArgs) {
+function getSide({
+  preferredSide,
+  insetTop,
+  insetBottom,
+  positionTop,
+  positionBottom,
+  contentLayout,
+  dimensions,
+}: GetSideArgs) {
   if (preferredSide === "bottom") {
     const spaceBelow = dimensions.height - insetBottom - positionBottom;
     if (spaceBelow >= contentLayout.height) {
@@ -98,11 +134,20 @@ function getSide({ preferredSide, insetTop, insetBottom, positionTop, positionBo
   return "top";
 }
 
-function getSidePosition({ preferredSide, triggerPosition, contentLayout, sideOffset, insets, dimensions }: GetSidePositionArgs) {
+function getSidePosition({
+  preferredSide,
+  triggerPosition,
+  contentLayout,
+  sideOffset,
+  insets,
+  dimensions,
+}: GetSidePositionArgs) {
   const insetTop = insets?.top ?? 0;
   const insetBottom = insets?.bottom ?? 0;
-  const positionTop = triggerPosition?.pageY - sideOffset - contentLayout.height;
-  const positionBottom = triggerPosition.pageY + triggerPosition.height + sideOffset;
+  const positionTop =
+    triggerPosition?.pageY - sideOffset - contentLayout.height;
+  const positionBottom =
+    triggerPosition.pageY + triggerPosition.height + sideOffset;
 
   const side = getSide({
     preferredSide,
@@ -116,12 +161,18 @@ function getSidePosition({ preferredSide, triggerPosition, contentLayout, sideOf
 
   if (side === "top") {
     return {
-      top: Math.min(Math.max(insetTop, positionTop), dimensions.height - insetBottom - contentLayout.height),
+      top: Math.min(
+        Math.max(insetTop, positionTop),
+        dimensions.height - insetBottom - contentLayout.height,
+      ),
     };
   }
 
   return {
-    top: Math.min(dimensions.height - insetBottom - contentLayout.height, positionBottom),
+    top: Math.min(
+      dimensions.height - insetBottom - contentLayout.height,
+      positionBottom,
+    ),
   };
 }
 
@@ -130,16 +181,33 @@ interface GetAlignPositionArgs extends GetPositionArgs {
   alignOffset: number;
 }
 
-function getAlignPosition({ align, contentLayout, triggerPosition, alignOffset, insets, dimensions }: GetAlignPositionArgs) {
+function getAlignPosition({
+  align,
+  contentLayout,
+  triggerPosition,
+  alignOffset,
+  insets,
+  dimensions,
+}: GetAlignPositionArgs) {
   const insetLeft = insets?.left ?? 0;
   const insetRight = insets?.right ?? 0;
   const maxContentWidth = dimensions.width - insetLeft - insetRight;
 
   const contentWidth = Math.min(contentLayout.width, maxContentWidth);
 
-  let left = getLeftPosition(align, triggerPosition.pageX, triggerPosition.width, contentWidth, alignOffset, insetLeft, insetRight, dimensions);
+  let left = getLeftPosition(
+    align,
+    triggerPosition.pageX,
+    triggerPosition.width,
+    contentWidth,
+    alignOffset,
+    insetLeft,
+    insetRight,
+    dimensions,
+  );
 
-  const doesCollide = left < insetLeft || left + contentWidth > dimensions.width - insetRight;
+  const doesCollide =
+    left < insetLeft || left + contentWidth > dimensions.width - insetRight;
   if (doesCollide) {
     const spaceLeft = left - insetLeft;
     const spaceRight = dimensions.width - insetRight - (left + contentWidth);
@@ -149,7 +217,10 @@ function getAlignPosition({ align, contentLayout, triggerPosition, alignOffset,
     } else if (spaceRight >= contentWidth) {
       left = dimensions.width - insetRight - contentWidth;
     } else {
-      const centeredPosition = Math.max(insetLeft, (dimensions.width - contentWidth - insetRight) / 2);
+      const centeredPosition = Math.max(
+        insetLeft,
+        (dimensions.width - contentWidth - insetRight) / 2,
+      );
       left = centeredPosition;
     }
   }
@@ -177,10 +248,15 @@ function getLeftPosition(
   if (align === "end") {
     left = triggerPageX + triggerWidth - contentWidth;
   }
-  return Math.max(insetLeft, Math.min(left + alignOffset, dimensions.width - contentWidth - insetRight));
+  return Math.max(
+    insetLeft,
+    Math.min(left + alignOffset, dimensions.width - contentWidth - insetRight),
+  );
 }
 
-type GetContentStyleArgs = GetPositionArgs & GetSidePositionArgs & GetAlignPositionArgs;
+type GetContentStyleArgs = GetPositionArgs &
+  GetSidePositionArgs &
+  GetAlignPositionArgs;
 
 function getContentStyle(args: GetContentStyleArgs): ViewStyle {
   return {

package/src/index.tsx

@@ -1,9 +1,9 @@
-import { SafeAreaProvider, type SafeAreaInsets } from "@/safe-area";
-import { ThemeProvider, type ThemeProviderProps } from "@/themes";
 import { AsyncAlertDialogManager } from "./components/alert-dialog/async-alert-dialog";
 import { PortalHost } from "./components/portal";
 import { type PortalHostProps } from "./components/portal/portal.constants";
 import { ToastContainer } from "./components/toast/manager";
+import { SafeAreaProvider, type SafeAreaInsets } from "./safe-area";
+import { ThemeProvider, type ThemeProviderProps } from "./themes";
 
 export interface ProviderProps {
   children: React.ReactNode;
@@ -12,7 +12,12 @@ export interface ProviderProps {
   safeAreaInsets?: SafeAreaInsets;
 }
 
-export const UIProvider = ({ children, portalContainer, theme, safeAreaInsets }: ProviderProps) => {
+export const UIProvider = ({
+  children,
+  portalContainer,
+  theme,
+  safeAreaInsets,
+}: ProviderProps) => {
   return (
     <SafeAreaProvider insets={safeAreaInsets}>
       <ThemeProvider theme={theme}>

package/src/themes/provider.tsx

@@ -1,8 +1,22 @@
-import type { DeepPartial } from "@/types/util.types";
-import { createContext, type PropsWithChildren, useContext, useEffect, useState } from "react";
+import {
+  createContext,
+  type PropsWithChildren,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { useColorScheme } from "react-native";
+import type { DeepPartial } from "../types/util.types";
 import { defaultThemeAssets } from "./default";
-import type { Colors, ColorScheme, FontFamily, FontSize, LetterSpacing, Radius, ThemeAssets } from "./types";
+import type {
+  Colors,
+  ColorScheme,
+  FontFamily,
+  FontSize,
+  LetterSpacing,
+  Radius,
+  ThemeAssets,
+} from "./types";
 import { mergeThemeAssets } from "./utils";
 
 interface ThemeContext {
@@ -25,9 +39,13 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
   const { children, theme } = props;
 
   const systemColorScheme = useColorScheme();
-  const [colorScheme, setColorScheme] = useState<ColorScheme>(systemColorScheme === "dark" ? "dark" : "light");
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(
+    systemColorScheme === "dark" ? "dark" : "light",
+  );
 
-  const themeAssets = theme ? mergeThemeAssets(defaultThemeAssets, theme) : defaultThemeAssets;
+  const themeAssets = theme
+    ? mergeThemeAssets(defaultThemeAssets, theme)
+    : defaultThemeAssets;
 
   const colors = themeAssets.colors[colorScheme];
 

package/src/themes/utils.ts

@@ -1,7 +1,10 @@
-import type { DeepPartial } from "@/types/util.types";
+import type { DeepPartial } from "../types/util.types";
 import type { ThemeAssets } from "./types";
 
-export function mergeThemeAssets(base: ThemeAssets, override: DeepPartial<ThemeAssets>): ThemeAssets {
+export function mergeThemeAssets(
+  base: ThemeAssets,
+  override: DeepPartial<ThemeAssets>,
+): ThemeAssets {
   return {
     colors: {
       light: { ...base.colors.light, ...override.colors?.light },

package/src/utils/input-utils.ts

@@ -1,7 +1,10 @@
-import type { TextInputRef } from "@/types/element.types";
 import { Platform } from "react-native";
+import type { TextInputRef } from "../types/element.types";
 
-export function setInnerInputValue(element: HTMLInputElement | TextInputRef, value: string) {
+export function setInnerInputValue(
+  element: HTMLInputElement | TextInputRef,
+  value: string,
+) {
   if (Platform.OS === "web") {
     (element as HTMLInputElement).value = value;
   } else {

package/src/utils/normalize-layout.ts

@@ -1,5 +1,5 @@
-import type { LayoutPosition } from "@/hooks";
 import type { HostInstance, LayoutRectangle } from "react-native";
+import type { LayoutPosition } from "../hooks";
 
 export const normalizeLayout = (layout: LayoutRectangle) => {
   const _layout = { ...layout };
@@ -21,7 +21,10 @@ const isValidNumber = (value: unknown): value is number => {
   return isValid;
 };
 
-export const measureLayoutPosition = (ref: HostInstance | null, callback: (layout: LayoutPosition) => void) => {
+export const measureLayoutPosition = (
+  ref: HostInstance | null,
+  callback: (layout: LayoutPosition) => void,
+) => {
   ref?.measureInWindow((pageX, pageY, width, height) => {
     callback({
       height: isValidNumber(height) ? height : 0,

package/src/utils/use-themed-styles.ts

@@ -1,5 +1,11 @@
-import { useTheme } from "@/themes";
-import type { Colors, FontFamily, FontSize, LetterSpacing, Radius } from "@/themes/types";
+import { useTheme } from "../themes";
+import type {
+  Colors,
+  FontFamily,
+  FontSize,
+  LetterSpacing,
+  Radius,
+} from "../themes/types";
 
 interface CallbackProps {
   colors: Colors;
@@ -9,7 +15,9 @@ interface CallbackProps {
   fontSize: FontSize;
 }
 
-export const useThemedStyles = <T>(callback: (props: CallbackProps) => T): T => {
+export const useThemedStyles = <T>(
+  callback: (props: CallbackProps) => T,
+): T => {
   const theme = useTheme();
   return callback({
     colors: theme.colors,

package/tsconfig.json

@@ -1,10 +1,17 @@
 {
   "compilerOptions": {
-    "customConditions": ["dev-source", "react-native", "react-native-strict-api"],
+    "customConditions": [
+      "dev-source",
+      "react-native",
+      "react-native-strict-api"
+    ],
     "allowJs": true,
     "esModuleInterop": true,
     "jsx": "react-native",
-    "lib": ["DOM", "ESNext"],
+    "lib": [
+      "DOM",
+      "ESNext"
+    ],
     "module": "preserve",
     "moduleDetection": "force",
     "moduleResolution": "bundler",
@@ -24,9 +31,9 @@
     "noUncheckedIndexedAccess": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "paths": {
-      "@/*": ["./src/*"]
-    }
   },
-  "exclude": ["node_modules", "dist"]
-}
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}