@korsolutions/ui 0.0.28 → 0.0.30

package/src/primitives/popover/context.ts

@@ -1,7 +1,7 @@
-import { createContext, Dispatch, useContext } from "react";
-import { PopoverStyles } from "./types";
-import { LayoutRectangle } from "react-native";
-import { LayoutPosition } from "@/hooks/use-relative-position";
+import type { LayoutPosition } from "@/hooks/use-relative-position";
+import { createContext, type Dispatch, useContext } from "react";
+import type { LayoutRectangle } from "react-native";
+import type { PopoverStyles } from "./types";
 
 export interface PopoverContext {
   isOpen: boolean;

package/src/primitives/popover/popover-close.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Pressable, PressableProps, StyleProp, ViewStyle } from "react-native";
+import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
 import { usePopover } from "./context";
 
 export interface PopoverCloseProps extends Omit<PressableProps, "onPress"> {

package/src/primitives/popover/popover-content.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleProp, View, ViewStyle } from "react-native";
+import { type StyleProp, View, type ViewStyle } from "react-native";
 import { usePopover } from "./context";
 import { useRelativePosition } from "@/hooks/use-relative-position";
 
@@ -33,6 +33,7 @@ export function PopoverContent(props: PopoverContentProps) {
       onLayout={(e) => {
         popover.setContentLayout(e.nativeEvent.layout);
       }}
+      pointerEvents="box-none"
       style={composedStyle}
     />
   );

package/src/primitives/popover/popover-overlay.tsx

@@ -1,10 +1,8 @@
 import React from "react";
+import { Pressable, type PressableProps, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
 import { usePopover } from "./context";
-import { Pressable, PressableProps, StyleProp, StyleSheet, ViewStyle } from "react-native";
 
 export interface PopoverOverlayProps extends Omit<PressableProps, "onPress"> {
-  children?: React.ReactNode;
-
   onPress?: () => void;
   closeOnPress?: boolean;
 
@@ -29,9 +27,8 @@ export function PopoverOverlay(props: PopoverOverlayProps) {
         }
         props.onPress?.();
       }}
+      pointerEvents="auto"
       style={composedStyle}
-    >
-      {props.children}
-    </Component>
+    />
   );
 }

package/src/primitives/popover/popover-root.tsx

@@ -1,8 +1,8 @@
+import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "@/hooks/use-relative-position";
 import React, { useState } from "react";
+import { type LayoutRectangle } from "react-native";
 import { PopoverContext } from "./context";
-import { PopoverStyles } from "./types";
-import { LayoutRectangle } from "react-native";
-import { DEFAULT_LAYOUT, DEFAULT_POSITION, LayoutPosition } from "@/hooks/use-relative-position";
+import type { PopoverStyles } from "./types";
 
 export interface PopoverRootProps {
   children?: React.ReactNode;

package/src/primitives/popover/popover-trigger.tsx

@@ -1,9 +1,10 @@
-import React, { forwardRef, RefAttributes, useImperativeHandle, useRef } from "react";
-import { PressableProps, View } from "react-native";
+import type { ViewRef } from "@/types/element.types";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import { type PressableProps } from "react-native";
 import { usePopover } from "./context";
 
 export interface PopoverTriggerProps extends PressableProps {
-  children: React.ReactElement<RefAttributes<View> & PressableProps>;
+  children: React.ReactElement<React.RefAttributes<ViewRef> & PressableProps>;
 }
 
 export interface PopoverTriggerRef {
@@ -13,7 +14,7 @@ export interface PopoverTriggerRef {
 
 export const PopoverTrigger = forwardRef<PopoverTriggerRef, PopoverTriggerProps>((props, ref) => {
   const popover = usePopover();
-  const triggerRef = useRef<View>(null);
+  const triggerRef = useRef<ViewRef>(null);
 
   const onTriggerPress = async () => {
     triggerRef.current?.measureInWindow((pageX, pageY, width, height) => {

package/src/primitives/popover/types.ts

@@ -1,5 +1,5 @@
-import { PopoverContentProps } from "./popover-content";
-import { PopoverOverlayProps } from "./popover-overlay";
+import type { PopoverContentProps } from "./popover-content";
+import type { PopoverOverlayProps } from "./popover-overlay";
 
 export interface PopoverStyles {
   overlay?: PopoverOverlayProps["style"];

package/src/primitives/portal/portal.tsx

@@ -1,7 +1,6 @@
-import { useEffect, useSyncExternalStore, useState } from "react";
+import { useEffect, useState, useSyncExternalStore } from "react";
 import { Platform, View } from "react-native";
-import { DEFAULT_PORTAL_HOST, PortalHostProps, PortalProps } from "./portal.constants";
-import { createPortal } from "react-dom";
+import { DEFAULT_PORTAL_HOST, type PortalHostProps, type PortalProps } from "./portal.constants";
 
 type PortalMap = Map<string, React.ReactNode>;
 type PortalHostMap = Map<string, PortalMap>;
@@ -101,7 +100,7 @@ function NativePortal({ name, hostName = DEFAULT_PORTAL_HOST, children }: Portal
 }
 
 function WebPortal({ name, hostName = DEFAULT_PORTAL_HOST, children }: PortalProps) {
-  const [container] = useState(() => {
+  const [] = useState(() => {
     let container = document.getElementById(hostName);
 
     if (!container) {
@@ -112,7 +111,9 @@ function WebPortal({ name, hostName = DEFAULT_PORTAL_HOST, children }: PortalPro
     return container;
   });
 
-  return <>{createPortal(children, container, name)}</>;
+  const createPortal = require("react-dom").createPortal as typeof import("react-dom").createPortal;
+
+  return <>{createPortal(children, document.body, name)}</>;
 }
 
 export const Portal = Platform.select({

package/src/primitives/select/context.ts

@@ -1,6 +1,6 @@
-import { createContext, Dispatch, useContext } from "react";
-import { SelectOption, SelectState, SelectStyles } from "./types";
-import { LayoutRectangle } from "react-native";
+import { createContext, type Dispatch, useContext } from "react";
+import type { LayoutRectangle } from "react-native";
+import type { SelectOption, SelectState, SelectStyles } from "./types";
 
 export interface SelectContext {
   value?: string;

package/src/primitives/select/select-content.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { StyleProp, View, ViewStyle } from "react-native";
 import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
 import { useSelect } from "./context";
 
 export interface SelectContentProps {

package/src/primitives/select/select-option.tsx

@@ -1,8 +1,8 @@
-import { StyleProp, Text, TextStyle } from "react-native";
 import { calculateComposedStyles } from "@/utils/calculate-styles";
-import { useSelect } from "./context";
 import { useEffect, useState } from "react";
-import { SelectOptionState, SelectState } from "./types";
+import { type StyleProp, Text, type TextStyle } from "react-native";
+import { useSelect } from "./context";
+import type { SelectOptionState, SelectState } from "./types";
 
 export interface SelectOptionProps {
   children: string;

package/src/primitives/select/select-overlay.tsx

@@ -1,7 +1,7 @@
+import { calculateComposedStyles } from "@/utils/calculate-styles";
 import React from "react";
+import { Pressable, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
 import { useSelect } from "./context";
-import { Pressable, StyleProp, StyleSheet, ViewStyle } from "react-native";
-import { calculateComposedStyles } from "@/utils/calculate-styles";
 
 export interface SelectOverlayProps {
   children?: React.ReactNode;

package/src/primitives/select/select-root.tsx

@@ -1,8 +1,8 @@
+import { calculateComposedStyles } from "@/utils/calculate-styles";
 import React, { useState } from "react";
-import { LayoutRectangle, StyleProp, View, ViewStyle } from "react-native";
+import { type LayoutRectangle, type StyleProp, View, type ViewStyle } from "react-native";
 import { SelectContext } from "./context";
-import { SelectOption, SelectState, SelectStyles } from "./types";
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import type { SelectOption, SelectState, SelectStyles } from "./types";
 
 interface SelectRootInjectedProps {
   style?: StyleProp<ViewStyle>;

package/src/primitives/select/select-trigger.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import { Pressable, StyleProp, ViewStyle } from "react-native";
-import { useSelect } from "./context";
 import { calculateComposedStyles } from "@/utils/calculate-styles";
 import { normalizeLayout } from "@/utils/normalize-layout";
+import React from "react";
+import { Pressable, type StyleProp, type ViewStyle } from "react-native";
+import { useSelect } from "./context";
 
 interface SelectTriggerInjectionProps {
   onPress?: () => void;

package/src/primitives/select/select-value.tsx

@@ -1,7 +1,7 @@
+import { calculateComposedStyles } from "@/utils/calculate-styles";
 import React from "react";
-import { StyleProp, Text, TextStyle } from "react-native";
+import { type StyleProp, Text, type TextStyle } from "react-native";
 import { useSelect } from "./context";
-import { calculateComposedStyles } from "@/utils/calculate-styles";
 
 export interface SelectValueProps {
   style?: StyleProp<TextStyle>;

package/src/primitives/select/types.ts

@@ -1,9 +1,9 @@
-import { SelectRootProps } from "./select-root";
-import { SelectTriggerProps } from "./select-trigger";
-import { SelectValueProps } from "./select-value";
-import { SelectOverlayProps } from "./select-overlay";
-import { SelectContentProps } from "./select-content";
-import { SelectOptionProps } from "./select-option";
+import type { SelectContentProps } from "./select-content";
+import type { SelectOptionProps } from "./select-option";
+import type { SelectOverlayProps } from "./select-overlay";
+import type { SelectRootProps } from "./select-root";
+import type { SelectTriggerProps } from "./select-trigger";
+import type { SelectValueProps } from "./select-value";
 
 export type SelectState = "default" | "disabled";
 export type SelectOptionState = SelectState | "hovered" | "selected";

package/src/primitives/textarea/textarea.tsx

@@ -1,6 +1,6 @@
-import { TextInput, TextInputProps } from "react-native";
-import { TextareaState, TextareaStyles } from "./types";
 import { useState } from "react";
+import { TextInput, type TextInputProps } from "react-native";
+import type { TextareaState, TextareaStyles } from "./types";
 
 export type TextareaPrimitiveBaseProps = Omit<TextInputProps, "onChange"> & {
   onChange?: TextInputProps["onChangeText"];

package/src/primitives/textarea/types.ts

@@ -1,4 +1,4 @@
-import { TextareaPrimitiveBaseProps } from "./textarea";
+import { type TextareaPrimitiveBaseProps } from "./textarea";
 
 export type TextareaState = "default" | "focused" | "disabled";
 

package/src/primitives/toast/context.ts

@@ -1,5 +1,5 @@
 import { createContext, useContext } from "react";
-import { ToastStyles } from "./types";
+import type { ToastStyles } from "./types";
 
 export interface ToastContext {
   styles?: ToastStyles;

package/src/primitives/toast/toast-description.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleProp, Text, TextStyle } from "react-native";
+import { type StyleProp, Text, type TextStyle } from "react-native";
 import { useToast } from "./context";
 
 export interface ToastDescriptionProps {

package/src/primitives/toast/toast-root.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { StyleProp, View, ViewStyle } from "react-native";
-import { ToastStyles } from "./types";
+import { type StyleProp, View, type ViewStyle } from "react-native";
 import { ToastContext } from "./context";
+import type { ToastStyles } from "./types";
 
 export interface ToastRootProps {
   children?: React.ReactNode;

package/src/primitives/toast/toast-title.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleProp, Text, TextStyle } from "react-native";
+import { type StyleProp, Text, type TextStyle } from "react-native";
 import { useToast } from "./context";
 
 export interface ToastTitleProps {

package/src/primitives/toast/types.ts

@@ -1,6 +1,6 @@
-import { ToastRootProps } from "./toast-root";
-import { ToastTitleProps } from "./toast-title";
-import { ToastDescriptionProps } from "./toast-description";
+import type { ToastDescriptionProps } from "./toast-description";
+import type { ToastRootProps } from "./toast-root";
+import type { ToastTitleProps } from "./toast-title";
 
 export interface ToastStyles {
   root?: ToastRootProps["style"];

package/src/themes/adapters/react-navigation.ts

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { Theme } from "@react-navigation/native";
+import type { Theme } from "@react-navigation/native";
 import { useTheme } from "../provider";
 import { Platform } from "react-native";
 
@@ -9,6 +9,7 @@ export function useReactNavigationTheme(): Theme {
   useEffect(() => {
     if (Platform.OS !== "web") return;
     const styles = document.createElement("style");
+    styles.id = "korsolutions-ui-react-navigation-theme";
     styles.innerHTML = `
       :root {
         --expo-router-modal-border: 1px solid ${theme.colors.border};

package/src/themes/default/colors.ts

@@ -1,4 +1,4 @@
-import { Colors } from "../types";
+import type { Colors } from "../types";
 
 export const lightColors: Colors = {
   background: "hsla(223.81, 100%, 100%, 1)",

package/src/themes/default/index.ts

@@ -1,4 +1,4 @@
-import { ThemeAssets } from "../types";
+import type { ThemeAssets } from "../types";
 import { darkColors, lightColors } from "./colors";
 
 export const defaultThemeAssets: ThemeAssets = {

package/src/themes/provider.tsx

@@ -1,7 +1,7 @@
-import { createContext, PropsWithChildren, useContext, useEffect, useState } from "react";
-import { Colors, ColorScheme, FontFamily, FontSize, LetterSpacing, Radius, ThemeName } from "./types";
-import { themes } from "./themes";
+import { createContext, type PropsWithChildren, useContext, useEffect, useState } from "react";
 import { useColorScheme } from "react-native";
+import { themes } from "./themes";
+import type { Colors, ColorScheme, FontFamily, FontSize, LetterSpacing, Radius, ThemeName } from "./types";
 
 interface ThemeContext {
   colors: Colors;
@@ -21,14 +21,14 @@ export const ThemeProvider = (props: PropsWithChildren) => {
   const [themeName, setTheme] = useState<ThemeName>("default");
 
   const systemColorScheme = useColorScheme();
-  const [colorScheme, setColorScheme] = useState<ColorScheme>(systemColorScheme ?? "light");
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(systemColorScheme === "dark" ? "dark" : "light");
 
   const themesAssets = themes[themeName];
   const colors = themesAssets.colors[colorScheme];
 
   useEffect(() => {
     if (systemColorScheme) {
-      setColorScheme(systemColorScheme);
+      setColorScheme(systemColorScheme === "dark" ? "dark" : "light");
     }
   }, [systemColorScheme]);
 

package/src/themes/themes.ts

@@ -1,5 +1,5 @@
 import { defaultThemeAssets } from "./default";
-import { ThemeAssets, ThemeName } from "./types";
+import type { ThemeAssets, ThemeName } from "./types";
 
 export const themes: Record<ThemeName, ThemeAssets> = {
   default: defaultThemeAssets,

package/src/types/element.types.ts

@@ -0,0 +1,4 @@
+import type { TextInput, View } from "react-native";
+
+export type ViewRef = React.ComponentRef<View>;
+export type TextInputRef = React.ComponentRef<TextInput>;

package/src/utils/hsla-utils.ts

@@ -1,8 +1,8 @@
 export const hslaSetAlpha = (hsla: string, alpha: number): string => {
   const parts = hsla.replace(/^hsla?\(|\s+|\)$/g, "").split(",");
-  if (parts.length < 3) {
-    throw new Error("Invalid HSLA color format");
-  }
+  if (parts[0] === undefined) throw new Error("Invalid HSLA color format");
+  if (parts[1] === undefined) throw new Error("Invalid HSLA color format");
+  if (parts[2] === undefined) throw new Error("Invalid HSLA color format");
   const h = parseInt(parts[0], 10);
   const s = parseInt(parts[1], 10);
   const l = parseInt(parts[2], 10);
@@ -11,9 +11,8 @@ export const hslaSetAlpha = (hsla: string, alpha: number): string => {
 
 export const hslaSetLightness = (hsla: string, lightness: number): string => {
   const parts = hsla.replace(/^hsla?\(|\s+|\)$/g, "").split(",");
-  if (parts.length < 3) {
-    throw new Error("Invalid HSLA color format");
-  }
+  if (parts[0] === undefined) throw new Error("Invalid HSLA color format");
+  if (parts[1] === undefined) throw new Error("Invalid HSLA color format");
   const h = parseInt(parts[0], 10);
   const s = parseInt(parts[1], 10);
   return `hsla(${h}, ${s}%, ${lightness}%, ${parts[3] ? parseFloat(parts[3]) : 1})`;
@@ -21,9 +20,7 @@ export const hslaSetLightness = (hsla: string, lightness: number): string => {
 
 export const hslaGetLightness = (hsla: string): number => {
   const parts = hsla.replace(/^hsla?\(|\s+|\)$/g, "").split(",");
-  if (parts.length < 3) {
-    throw new Error("Invalid HSLA color format");
-  }
+  if (parts[2] === undefined) throw new Error("Invalid HSLA color format");
   return parseInt(parts[2], 10);
 };
 

package/src/utils/normalize-layout.ts

@@ -1,11 +1,12 @@
-import { LayoutRectangle } from "react-native";
+import type { LayoutRectangle } from "react-native";
 export const normalizeLayout = (layout: LayoutRectangle) => {
+  const _layout = { ...layout };
   // Web layout doesn't provide x/y, but left/top
   if (!layout.y && "top" in layout && typeof layout.top === "number") {
-    layout.y = layout.top;
+    _layout.y = layout.top;
   }
   if (!layout.x && "left" in layout && typeof layout.left === "number") {
-    layout.x = layout.left;
+    _layout.x = layout.left;
   }
-  return layout;
+  return _layout;
 };

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

@@ -1,5 +1,5 @@
 import { useTheme } from "@/themes";
-import { Colors, FontFamily, FontSize, LetterSpacing, Radius } from "@/themes/types";
+import type { Colors, FontFamily, FontSize, LetterSpacing, Radius } from "@/themes/types";
 
 interface CallbackProps {
   colors: Colors;

package/tsconfig.json

@@ -1,13 +1,32 @@
 {
-  "extends": "expo/tsconfig.base",
   "compilerOptions": {
+    "customConditions": ["dev-source", "react-native", "react-native-strict-api"],
+    "allowJs": true,
+    "esModuleInterop": true,
+    "jsx": "react-native",
+    "lib": ["DOM", "ESNext"],
+    "module": "preserve",
+    "moduleDetection": "force",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "target": "ESNext",
     "strict": true,
+    "verbatimModuleSyntax": true,
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitUseStrict": false,
+    "noStrictGenericChecks": false,
+    "noUncheckedIndexedAccess": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "customConditions": ["dev-source"],
     "paths": {
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*"]
+  "exclude": ["node_modules", "dist"]
 }