@korsolutions/ui 0.0.26 → 0.0.28

package/dist/components/index.mjs

@@ -1,5 +1,5 @@
-import { i as useThemedStyles, r as ToastComponent, t as ToastAPI } from "../toast-manager-Bn8NB8Ie.mjs";
-import { a as TextareaPrimitive, c as AvatarPrimitive, d as SelectPrimitive, f as ButtonPrimitive, i as DropdownMenuPrimitive, l as EmptyPrimitive, m as FieldPrimitive, n as PopoverPrimitive, o as BadgePrimitive, p as InputPrimitive, r as usePopover, t as CalendarPrimitive, u as CardPrimitive } from "../primitives-CB1VBoeH.mjs";
+import { i as useThemedStyles, r as ToastComponent, t as ToastAPI } from "../toast-manager-q0YV3t3j.mjs";
+import { a as TextareaPrimitive, c as AvatarPrimitive, d as SelectPrimitive, f as ButtonPrimitive, i as DropdownMenuPrimitive, l as EmptyPrimitive, m as FieldPrimitive, n as PopoverPrimitive, o as BadgePrimitive, p as InputPrimitive, r as usePopover, t as CalendarPrimitive, u as CardPrimitive } from "../primitives-8eataXpJ.mjs";
 import "../use-relative-position-BTKEyT1F.mjs";
 import { t as useNumericMask } from "../use-numeric-mask-BQlz1Pus.mjs";
 import React, { forwardRef, useEffect, useState } from "react";
@@ -777,7 +777,10 @@ function DropdownMenu(props) {
 //#region src/components/popover/variants/default.tsx
 const usePopoverVariantDefault = () => {
 	return useThemedStyles(({ colors, radius }) => ({
-		overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
+		overlay: {
+			backgroundColor: "rgba(0, 0, 0, 0.5)",
+			zIndex: 999
+		},
 		content: {
 			backgroundColor: colors.surface,
 			borderRadius: radius,

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import { n as PortalHostProps } from "./portal.constants-ClRV24_C.mjs";
 import * as react4 from "react";
+import { Theme } from "@react-navigation/native";
 
 //#region src/themes/types.d.ts
 type ThemeName = "default";
@@ -25,6 +26,13 @@ type Radius = number;
 type FontFamily = string;
 type LetterSpacing = number;
 type FontSize = number;
+interface ThemeAssets {
+  colors: Record<ColorScheme, Colors>;
+  radius: Radius;
+  fontFamily: FontFamily;
+  letterSpacing: LetterSpacing;
+  fontSize: FontSize;
+}
 //#endregion
 //#region src/themes/provider.d.ts
 interface ThemeContext {
@@ -41,6 +49,9 @@ interface ThemeContext {
 declare const ThemeContext: react4.Context<ThemeContext | null>;
 declare const useTheme: () => ThemeContext;
 //#endregion
+//#region src/themes/adapters/react-navigation.d.ts
+declare function useReactNavigationTheme(): Theme;
+//#endregion
 //#region src/index.d.ts
 interface ProviderProps {
   children: React.ReactNode;
@@ -51,4 +62,4 @@ declare const UniversalUIProvider: ({
   portalContainer
 }: ProviderProps) => react4.JSX.Element;
 //#endregion
-export { ProviderProps, UniversalUIProvider, useTheme };
+export { ColorScheme, Colors, FontFamily, FontSize, LetterSpacing, ProviderProps, Radius, ThemeAssets, ThemeName, UniversalUIProvider, useReactNavigationTheme, useTheme };

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { a as ThemeProvider, n as ToastContainer, o as useTheme } from "./toast-manager-Bn8NB8Ie.mjs";
-import { g as PortalHost } from "./primitives-CB1VBoeH.mjs";
+import { a as useReactNavigationTheme, n as ToastContainer, o as ThemeProvider, s as useTheme } from "./toast-manager-q0YV3t3j.mjs";
+import { g as PortalHost } from "./primitives-8eataXpJ.mjs";
 import "./use-relative-position-BTKEyT1F.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -13,4 +13,4 @@ const UniversalUIProvider = ({ children, portalContainer }) => {
 };
 
 //#endregion
-export { UniversalUIProvider, useTheme };
+export { UniversalUIProvider, useReactNavigationTheme, useTheme };

package/dist/primitives/index.mjs

@@ -1,4 +1,4 @@
-import { _ as DEFAULT_PORTAL_HOST, a as TextareaPrimitive, c as AvatarPrimitive, d as SelectPrimitive, f as ButtonPrimitive, g as PortalHost, h as Portal, i as DropdownMenuPrimitive, l as EmptyPrimitive, m as FieldPrimitive, n as PopoverPrimitive, o as BadgePrimitive, p as InputPrimitive, r as usePopover, s as ToastPrimitive, t as CalendarPrimitive, u as CardPrimitive } from "../primitives-CB1VBoeH.mjs";
+import { _ as DEFAULT_PORTAL_HOST, a as TextareaPrimitive, c as AvatarPrimitive, d as SelectPrimitive, f as ButtonPrimitive, g as PortalHost, h as Portal, i as DropdownMenuPrimitive, l as EmptyPrimitive, m as FieldPrimitive, n as PopoverPrimitive, o as BadgePrimitive, p as InputPrimitive, r as usePopover, s as ToastPrimitive, t as CalendarPrimitive, u as CardPrimitive } from "../primitives-8eataXpJ.mjs";
 import "../use-relative-position-BTKEyT1F.mjs";
 
 export { AvatarPrimitive, BadgePrimitive, ButtonPrimitive, CalendarPrimitive, CardPrimitive, DEFAULT_PORTAL_HOST, DropdownMenuPrimitive, EmptyPrimitive, FieldPrimitive, InputPrimitive, PopoverPrimitive, Portal, PortalHost, SelectPrimitive, TextareaPrimitive, ToastPrimitive, usePopover };

package/dist/{primitives-CB1VBoeH.mjs → primitives-8eataXpJ.mjs}

@@ -1002,7 +1002,7 @@ const PopoverTrigger = forwardRef((props, ref) => {
 	const popover = usePopover();
 	const triggerRef = useRef(null);
 	const onTriggerPress = async () => {
-		triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+		triggerRef.current?.measureInWindow((pageX, pageY, width, height) => {
 			popover.setTriggerPosition({
 				height,
 				width,

package/dist/{toast-manager-Bn8NB8Ie.mjs → toast-manager-q0YV3t3j.mjs}

@@ -1,6 +1,6 @@
-import { h as Portal, s as ToastPrimitive } from "./primitives-CB1VBoeH.mjs";
+import { h as Portal, s as ToastPrimitive } from "./primitives-8eataXpJ.mjs";
 import React, { createContext, useContext, useEffect, useState, useSyncExternalStore } from "react";
-import { StyleSheet, View, useColorScheme } from "react-native";
+import { Platform, StyleSheet, View, useColorScheme } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/themes/default/colors.ts
@@ -87,6 +87,54 @@ const useTheme = () => {
 	return context;
 };
 
+//#endregion
+//#region src/themes/adapters/react-navigation.ts
+function useReactNavigationTheme() {
+	const theme = useTheme();
+	useEffect(() => {
+		if (Platform.OS !== "web") return;
+		const styles = document.createElement("style");
+		styles.innerHTML = `
+      :root {
+        --expo-router-modal-border: 1px solid ${theme.colors.border};
+      }
+    `;
+		document.head.appendChild(styles);
+		return () => {
+			document.head.removeChild(styles);
+		};
+	}, [theme.colors.border]);
+	return {
+		dark: theme.colorScheme === "dark",
+		colors: {
+			background: theme.colors.background,
+			border: theme.colors.border,
+			primary: theme.colors.primary,
+			card: theme.colors.surface,
+			text: theme.colors.foreground,
+			notification: theme.colors.danger
+		},
+		fonts: {
+			heavy: {
+				fontFamily: theme.fontFamily,
+				fontWeight: "800"
+			},
+			bold: {
+				fontFamily: theme.fontFamily,
+				fontWeight: "700"
+			},
+			medium: {
+				fontFamily: theme.fontFamily,
+				fontWeight: "500"
+			},
+			regular: {
+				fontFamily: theme.fontFamily,
+				fontWeight: "400"
+			}
+		}
+	};
+}
+
 //#endregion
 //#region src/utils/use-themed-styles.ts
 const useThemedStyles = (callback) => {
@@ -270,4 +318,4 @@ const s = StyleSheet.create({ wrapper: {
 } });
 
 //#endregion
-export { ThemeProvider as a, useThemedStyles as i, ToastContainer as n, useTheme as o, ToastComponent as r, ToastAPI as t };
+export { useReactNavigationTheme as a, useThemedStyles as i, ToastContainer as n, ThemeProvider as o, ToastComponent as r, useTheme as s, ToastAPI as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "license": "MIT",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",

package/src/components/popover/variants/default.tsx

@@ -6,6 +6,7 @@ export const usePopoverVariantDefault = (): PopoverStyles => {
     ({ colors, radius }): PopoverStyles => ({
       overlay: {
         backgroundColor: "rgba(0, 0, 0, 0.5)",
+        zIndex: 999,
       },
       content: {
         backgroundColor: colors.surface,

package/src/index.tsx

@@ -19,4 +19,6 @@ export const UniversalUIProvider = ({ children, portalContainer }: ProviderProps
   );
 };
 
-export { useTheme } from "./themes";
+export { useTheme } from "./themes/provider";
+export * from "./themes/adapters";
+export * from "./themes/types";

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

@@ -16,7 +16,7 @@ export const PopoverTrigger = forwardRef<PopoverTriggerRef, PopoverTriggerProps>
   const triggerRef = useRef<View>(null);
 
   const onTriggerPress = async () => {
-    triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+    triggerRef.current?.measureInWindow((pageX, pageY, width, height) => {
       popover.setTriggerPosition({
         height,
         width,

package/src/themes/adapters/index.ts

@@ -0,0 +1 @@
+export * from "./react-navigation";

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

@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+import { Theme } from "@react-navigation/native";
+import { useTheme } from "../provider";
+import { Platform } from "react-native";
+
+export function useReactNavigationTheme(): Theme {
+  const theme = useTheme();
+
+  useEffect(() => {
+    if (Platform.OS !== "web") return;
+    const styles = document.createElement("style");
+    styles.innerHTML = `
+      :root {
+        --expo-router-modal-border: 1px solid ${theme.colors.border};
+      }
+    `;
+    document.head.appendChild(styles);
+    return () => {
+      document.head.removeChild(styles);
+    };
+  }, [theme.colors.border]);
+
+  return {
+    dark: theme.colorScheme === "dark",
+    colors: {
+      background: theme.colors.background,
+      border: theme.colors.border,
+      primary: theme.colors.primary,
+      card: theme.colors.surface,
+      text: theme.colors.foreground,
+      notification: theme.colors.danger,
+    },
+    fonts: {
+      heavy: {
+        fontFamily: theme.fontFamily,
+        fontWeight: "800",
+      },
+      bold: {
+        fontFamily: theme.fontFamily,
+        fontWeight: "700",
+      },
+      medium: {
+        fontFamily: theme.fontFamily,
+        fontWeight: "500",
+      },
+      regular: {
+        fontFamily: theme.fontFamily,
+        fontWeight: "400",
+      },
+    },
+  };
+}

package/src/themes/index.ts

@@ -1,2 +1,3 @@
 export * from "./provider";
 export * from "./types";
+export * from "./adapters/react-navigation";