@korsolutions/ui 0.0.87 → 0.0.89

package/src/components/combobox/components/combobox-root.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import {
   type LayoutRectangle,
   type StyleProp,
@@ -45,20 +45,19 @@ export function ComboboxRoot(props: ComboboxRootProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
   const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
-  const [inputValue, setInputValueInternal] = useState("");
+  const [inputValue, setInputValue] = useState("");
 
   const onInputChangeRef = useRef(props.onInputChange);
   onInputChangeRef.current = props.onInputChange;
 
-  const setInputValue: React.Dispatch<React.SetStateAction<string>> = useCallback((action) => {
-    setInputValueInternal((prev) => {
-      const next = typeof action === "function" ? action(prev) : action;
-      if (next !== prev) {
-        onInputChangeRef.current?.(next);
-      }
-      return next;
-    });
-  }, []);
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    onInputChangeRef.current?.(inputValue);
+  }, [inputValue]);
 
   const state = calculateState(props);
   const composedStyles = StyleSheet.flatten([

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

@@ -27,6 +27,7 @@ export function useComboboxVariantDefault(size: Size): ComboboxStyles {
             minHeight: s.height,
             fontFamily,
             fontSize: s.fontSize,
+            lineHeight: s.lineHeight,
             color: colors.foreground,
             outlineWidth: 0,
             pointerEvents: "auto",
@@ -76,6 +77,7 @@ export function useComboboxVariantDefault(size: Size): ComboboxStyles {
           paddingHorizontal: s.paddingHorizontal,
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           color: colors.foreground,
           borderRadius: radius / 2,
         },
@@ -95,6 +97,7 @@ export function useComboboxVariantDefault(size: Size): ComboboxStyles {
           paddingHorizontal: s.paddingHorizontal,
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           color: colors.mutedForeground,
           textAlign: "center",
         },

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

@@ -20,6 +20,7 @@ export function useEmptyVariantDefault(): EmptyStyles {
       title: {
         fontFamily: fontFamily,
         fontSize: fontSize,
+        lineHeight: Math.round(fontSize * 1.25),
         color: colors.foreground,
         textAlign: "center",
         fontWeight: "600",
@@ -27,6 +28,7 @@ export function useEmptyVariantDefault(): EmptyStyles {
       description: {
         fontFamily: fontFamily,
         fontSize: fontSize * 0.875,
+        lineHeight: Math.round(fontSize * 0.875 * 1.25),
         color: colors.mutedForeground,
         textAlign: "center",
       },

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

@@ -11,17 +11,20 @@ export const useFieldVariantDefault = (): FieldStyles => {
       label: {
         fontFamily,
         fontSize: fontSize * 0.875,
+        lineHeight: Math.round(fontSize * 0.875 * 1.25),
         fontWeight: "600",
         color: colors.foreground,
       },
       description: {
         fontFamily,
         fontSize: fontSize * 0.875,
+        lineHeight: Math.round(fontSize * 0.875 * 1.25),
         color: colors.mutedForeground,
       },
       error: {
         fontFamily,
         fontSize: fontSize * 0.875,
+        lineHeight: Math.round(fontSize * 0.875 * 1.25),
         color: colors.danger,
       },
     }),

package/src/components/icon/icon.tsx

@@ -15,7 +15,6 @@ export const Icon: React.FC<PropsWithRequiredRender<IconProps>> = ({
     ...variantProps,
     ...props,
     style: [variantProps.style, props.style],
-    absoluteStrokeWidth: props.absoluteStrokeWidth ?? true,
   };
 
   return <Component {...composedProps} />;

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

@@ -19,9 +19,11 @@ export function useInputVariantDefault(size: Size): InputStyles {
           paddingHorizontal: s.paddingHorizontal,
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           height: s.height,
           color: colors.foreground,
           outlineWidth: 0,
+          paddingVertical: 0,
           ...Platform.select({
             default: {},
             web: {

package/src/components/input/variants/secondary.tsx

@@ -19,9 +19,11 @@ export function useInputVariantSecondary(size: Size): InputStyles {
           paddingHorizontal: s.paddingHorizontal,
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           height: s.height,
           color: colors.foreground,
           outlineWidth: 0,
+          paddingVertical: 0,
           ...Platform.select({
             default: {},
             web: {

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

@@ -6,6 +6,7 @@ export function useLinkVariantDefault(): TextStyle {
     ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => ({
       color: colors.primary,
       fontSize,
+      lineHeight: Math.round(fontSize * 1.25),
       fontFamily,
       textDecorationLine: "underline",
       letterSpacing,

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

@@ -32,6 +32,7 @@ export const useMenuVariantDefault = (): MenuStyles => {
       itemText: {
         fontFamily: fontFamily,
         fontSize: fontSize,
+        lineHeight: Math.round(fontSize * 1.25),
         color: colors.foreground,
       },
       itemIcon: {
@@ -43,6 +44,7 @@ export const useMenuVariantDefault = (): MenuStyles => {
         paddingHorizontal: 16,
         fontFamily: fontFamily,
         fontSize: fontSize * 0.75,
+        lineHeight: Math.round(fontSize * 0.75 * 1.25),
         fontWeight: "600",
         color: colors.mutedForeground,
       },
@@ -89,6 +91,7 @@ export const useMenuVariantDefault = (): MenuStyles => {
       },
       shortcut: {
         fontSize: fontSize * 0.75,
+        lineHeight: Math.round(fontSize * 0.75 * 1.25),
         fontFamily: fontFamily,
         color: colors.mutedForeground,
       },

package/src/components/phone-input/variants/default.tsx

@@ -41,6 +41,7 @@ export function usePhoneInputVariantDefault(size: Size): PhoneInputStyles {
         default: {
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           color: colors.foreground,
         },
         disabled: {
@@ -61,9 +62,11 @@ export function usePhoneInputVariantDefault(size: Size): PhoneInputStyles {
           paddingHorizontal: s.paddingHorizontal,
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           color: colors.foreground,
           height: "100%",
           outlineWidth: 0,
+          paddingVertical: 0,
           ...Platform.select({
             default: {},
             web: {
@@ -105,6 +108,7 @@ export function usePhoneInputVariantDefault(size: Size): PhoneInputStyles {
         default: {
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           color: colors.foreground,
         },
       },
@@ -117,9 +121,16 @@ export function usePhoneInputVariantDefault(size: Size): PhoneInputStyles {
           paddingHorizontal: s.paddingHorizontal * 0.75,
           fontFamily,
           fontSize: s.fontSize * 0.875,
+          lineHeight: Math.round(s.fontSize * 0.875 * 1.25),
           color: colors.foreground,
           marginBottom: 4,
           outlineWidth: 0,
+          ...Platform.select({
+            android: {
+              textAlignVertical: "center",
+            },
+            default: {},
+          }),
         },
       },
     };

package/src/components/portal/portal.web.tsx

@@ -6,6 +6,20 @@ export function PortalHost() {
   return <></>;
 }
 
+/**
+ * Prevent scroll-lock libraries (e.g. react-remove-scroll used by Radix/Vaul
+ * modals) from blocking scroll events inside the portal. These libraries
+ * register document-level wheel/touchmove listeners that call
+ * preventDefault() on events originating outside their managed "shards".
+ * Stopping propagation at the portal container keeps those handlers from
+ * firing while still allowing native scroll within the portal content.
+ */
+function preventScrollLock(container: HTMLElement) {
+  const stop = (e: Event) => e.stopPropagation();
+  container.addEventListener("wheel", stop);
+  container.addEventListener("touchmove", stop);
+}
+
 export function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }: PortalProps) {
   const [container] = useState(() => {
     let container = document.getElementById(hostName);
@@ -15,6 +29,7 @@ export function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }: Porta
       container.id = hostName;
       container.style.pointerEvents = "auto";
       document.body.appendChild(container);
+      preventScrollLock(container);
     }
     return container;
   });

package/src/components/radio-group/variants/default.tsx

@@ -55,6 +55,7 @@ export const useRadioGroupVariantDefault = (): RadioGroupStyles => {
         default: {
           color: colors.foreground,
           fontSize,
+          lineHeight: Math.round(fontSize * 1.25),
           fontFamily,
           fontWeight: "500",
         },
@@ -66,6 +67,7 @@ export const useRadioGroupVariantDefault = (): RadioGroupStyles => {
         default: {
           color: colors.mutedForeground,
           fontSize: fontSize * 0.875,
+          lineHeight: Math.round(fontSize * 0.875 * 1.25),
           fontFamily,
           marginTop: 2,
         },

package/src/components/radio-group/variants/outlined.tsx

@@ -67,6 +67,7 @@ export const useRadioGroupVariantOutlined = (): RadioGroupStyles => {
         default: {
           color: colors.foreground,
           fontSize,
+          lineHeight: Math.round(fontSize * 1.25),
           fontFamily,
           fontWeight: "500",
         },
@@ -78,6 +79,7 @@ export const useRadioGroupVariantOutlined = (): RadioGroupStyles => {
         default: {
           color: colors.mutedForeground,
           fontSize: fontSize * 0.875,
+          lineHeight: Math.round(fontSize * 0.875 * 1.25),
           fontFamily,
           marginTop: 2,
         },

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

@@ -29,6 +29,7 @@ export function useSelectVariantDefault(size: Size): SelectStyles {
         default: {
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           color: colors.foreground,
         },
         disabled: {
@@ -39,6 +40,7 @@ export function useSelectVariantDefault(size: Size): SelectStyles {
         default: {
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           color: colors.mutedForeground,
         },
         disabled: {
@@ -69,6 +71,7 @@ export function useSelectVariantDefault(size: Size): SelectStyles {
           paddingHorizontal: s.paddingHorizontal,
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           color: colors.foreground,
           borderRadius: radius / 2,
         },

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

@@ -33,6 +33,7 @@ export function useSidebarVariantDefault(): SidebarStyles {
       groupLabel: {
         fontFamily,
         fontSize: fontSize * 0.75,
+        lineHeight: Math.round(fontSize * 0.75 * 1.25),
         fontWeight: "500",
         color: colors.mutedForeground,
         paddingHorizontal: spacing,

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

@@ -39,6 +39,7 @@ export const useTabsVariantDefault = (): TabsStyles => {
         default: {
           color: colors.mutedForeground,
           fontSize,
+          lineHeight: Math.round(fontSize * 1.25),
           fontFamily,
           fontWeight: "500",
         },

package/src/components/tabs/variants/line.tsx

@@ -33,6 +33,7 @@ export const useTabsVariantLine = (): TabsStyles => {
         default: {
           color: colors.mutedForeground,
           fontSize,
+          lineHeight: Math.round(fontSize * 1.25),
           fontFamily,
           fontWeight: "500",
         },

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

@@ -24,6 +24,7 @@ export function useTextareaVariantDefault(): TextareaStyles {
           }),
           fontFamily,
           fontSize,
+          lineHeight: Math.round(fontSize * 1.25),
           minHeight: 120,
           textAlignVertical: "top",
           color: colors.foreground,

package/src/components/toast/components/toast-icon.tsx

@@ -13,5 +13,5 @@ export function ToastIcon({ render: Component, ...props }: PropsWithRequiredRend
     style: [toast.styles?.icon?.style, props.style],
   };
 
-  return <Component absoluteStrokeWidth {...composedProps} />;
+  return <Component {...composedProps} />;
 }

package/src/components/toast/variants/danger.tsx

@@ -5,7 +5,7 @@ export const useToastVariantDanger = (): ToastStyles => {
   return useThemedStyles(
     ({ colors, radius, fontFamily, fontSize }): ToastStyles => ({
       root: {
-        backgroundColor: colors.danger,
+        backgroundColor: colors.surface,
         borderWidth: 1,
         borderColor: colors.danger,
         borderRadius: radius,
@@ -20,23 +20,24 @@ export const useToastVariantDanger = (): ToastStyles => {
         gap: 4,
       },
       icon: {
-        color: colors.foreground,
+        color: colors.danger,
         size: 16,
         style: {
           marginTop: 2,
         },
       },
       title: {
-        color: colors.foreground,
+        color: colors.danger,
         fontSize: fontSize,
+        lineHeight: Math.round(fontSize * 1.25),
         fontWeight: "600",
         fontFamily,
       },
       description: {
-        color: colors.foreground,
+        color: colors.mutedForeground,
         fontSize: fontSize * 0.875,
+        lineHeight: Math.round(fontSize * 0.875 * 1.25),
         fontFamily,
-        opacity: 0.9,
       },
     }),
   );

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

@@ -29,12 +29,14 @@ export const useToastVariantDefault = (): ToastStyles => {
       title: {
         color: colors.foreground,
         fontSize: fontSize,
+        lineHeight: Math.round(fontSize * 1.25),
         fontWeight: "600",
         fontFamily,
       },
       description: {
         color: colors.mutedForeground,
         fontSize: fontSize * 0.875,
+        lineHeight: Math.round(fontSize * 0.875 * 1.25),
         fontFamily,
       },
     }),

package/src/components/toast/variants/success.tsx

@@ -5,7 +5,7 @@ export const useToastVariantSuccess = (): ToastStyles => {
   return useThemedStyles(
     ({ colors, radius, fontFamily, fontSize }): ToastStyles => ({
       root: {
-        backgroundColor: colors.success,
+        backgroundColor: colors.surface,
         borderWidth: 1,
         borderColor: colors.success,
         borderRadius: radius,
@@ -20,23 +20,24 @@ export const useToastVariantSuccess = (): ToastStyles => {
         gap: 4,
       },
       icon: {
-        color: colors.foreground,
+        color: colors.success,
         size: 16,
         style: {
           marginTop: 2,
         },
       },
       title: {
-        color: colors.foreground,
+        color: colors.success,
         fontSize: fontSize,
+        lineHeight: Math.round(fontSize * 1.25),
         fontWeight: "600",
         fontFamily,
       },
       description: {
-        color: colors.foreground,
+        color: colors.mutedForeground,
         fontSize: fontSize * 0.875,
+        lineHeight: Math.round(fontSize * 0.875 * 1.25),
         fontFamily,
-        opacity: 0.9,
       },
     }),
   );

package/src/components/typography/typography.tsx

@@ -1,15 +1,18 @@
 import React from "react";
 import { Text as RnText, StyleSheet, type TextProps as RnTextProps } from "react-native";
+import type { Size } from "../../utils/size-scale";
 import { TypographyVariants } from "./variants";
 
 export interface TypographyProps extends RnTextProps {
   variant?: keyof typeof TypographyVariants;
+  size?: Size;
 }
 
 export function Typography(props: TypographyProps) {
-  const variantStyles = TypographyVariants[props.variant ?? "body-md"]();
+  const { variant = "body", size = "md", ...rest } = props;
+  const variantStyles = TypographyVariants[variant](size);
 
   const combinedStyles = StyleSheet.flatten([variantStyles, props.style]);
 
-  return <RnText {...props} style={combinedStyles} />;
+  return <RnText {...rest} style={combinedStyles} />;
 }

package/src/components/typography/variants/body.tsx

@@ -0,0 +1,26 @@
+import { type TextStyle } from "react-native";
+import type { Size } from "../../../utils/size-scale";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+
+const bodyScale: Record<Size, number> = {
+  sm: 0.875,
+  md: 1,
+  lg: 1.25,
+};
+
+export function useTextVariantBody(size: Size): TextStyle {
+  return useThemedStyles(
+    ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => {
+      const scale = bodyScale[size];
+      const scaledFontSize = fontSize * scale;
+      const lineHeight = Math.round(scaledFontSize * 1.25);
+      return {
+        color: colors.foreground,
+        fontSize: scaledFontSize,
+        lineHeight,
+        fontFamily,
+        letterSpacing,
+      };
+    },
+  );
+}

package/src/components/typography/variants/heading.tsx

@@ -0,0 +1,27 @@
+import { type TextStyle } from "react-native";
+import type { Size } from "../../../utils/size-scale";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+
+const headingScale: Record<Size, number> = {
+  sm: 1,
+  md: 1.25,
+  lg: 1.5,
+};
+
+export function useTextVariantHeading(size: Size): TextStyle {
+  return useThemedStyles(
+    ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => {
+      const scale = headingScale[size];
+      const scaledFontSize = fontSize * scale;
+      const lineHeight = Math.round(scaledFontSize * 1.25);
+      return {
+        color: colors.foreground,
+        fontSize: scaledFontSize,
+        lineHeight,
+        fontFamily,
+        letterSpacing,
+        fontWeight: "600",
+      };
+    },
+  );
+}

package/src/components/typography/variants/index.ts

@@ -1,15 +1,7 @@
-import { useTextVariantBodyLg } from "./body-lg";
-import { useTextVariantBodyMd } from "./body-md";
-import { useTextVariantBodySm } from "./body-sm";
-import { useTextVariantHeadingLg } from "./heading-lg";
-import { useTextVariantHeadingMd } from "./heading-md";
-import { useTextVariantHeadingSm } from "./heading-sm";
+import { useTextVariantBody } from "./body";
+import { useTextVariantHeading } from "./heading";
 
 export const TypographyVariants = {
-  ["body-sm"]: useTextVariantBodySm,
-  ["body-md"]: useTextVariantBodyMd,
-  ["body-lg"]: useTextVariantBodyLg,
-  ["heading-sm"]: useTextVariantHeadingSm,
-  ["heading-md"]: useTextVariantHeadingMd,
-  ["heading-lg"]: useTextVariantHeadingLg,
+  body: useTextVariantBody,
+  heading: useTextVariantHeading,
 };

package/src/hooks/use-keyboard-height.ts

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+import { Keyboard, Platform } from "react-native";
+
+function getCurrentKeyboardHeight(): number {
+  if (Platform.OS === "web") return 0;
+  return Keyboard.metrics()?.height ?? 0;
+}
+
+/**
+ * Tracks the current software keyboard height on native platforms.
+ * Returns 0 when the keyboard is hidden or on web.
+ *
+ * Initializes with the current keyboard height so it works correctly
+ * even when the keyboard is already visible at mount time.
+ */
+export function useKeyboardHeight(): number {
+  const [keyboardHeight, setKeyboardHeight] = useState(getCurrentKeyboardHeight);
+
+  useEffect(() => {
+    if (Platform.OS === "web") return;
+
+    const showEvent =
+      Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent =
+      Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+
+    const showSubscription = Keyboard.addListener(showEvent, (e) => {
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+
+    const hideSubscription = Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0);
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  return keyboardHeight;
+}

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

@@ -9,6 +9,7 @@ import {
 import { usePortalOffset } from "../components/portal";
 import { useSafeAreaInsets, type SafeAreaInsets } from "../safe-area";
 import { useIsReactNavigationModal } from "./use-is-react-navigation-modal";
+import { useKeyboardHeight } from "./use-keyboard-height";
 
 type UseRelativePositionArgs = Omit<GetContentStyleArgs, "dimensions" | "insets">;
 
@@ -25,9 +26,20 @@ export function useRelativePosition({
   const dimensions = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const portalOffset = usePortalOffset();
+  const keyboardHeight = useKeyboardHeight();
 
   const isReactNavigationModal = useIsReactNavigationModal();
 
+  // When the keyboard is visible, treat its top edge as the effective
+  // bottom boundary so menus/popovers don't render behind it.
+  const effectiveInsets: SafeAreaInsets = useMemo(
+    () => ({
+      ...insets,
+      bottom: Math.max(insets.bottom, keyboardHeight),
+    }),
+    [insets, keyboardHeight],
+  );
+
   return useMemo(() => {
     const hasLayout =
       triggerPosition.width > 0 &&
@@ -61,7 +73,7 @@ export function useRelativePosition({
       preferredSide,
       triggerPosition: adjustedTriggerPosition,
       alignOffset,
-      insets,
+      insets: effectiveInsets,
       sideOffset,
       dimensions,
     };
@@ -76,7 +88,9 @@ export function useRelativePosition({
       // Temporary fix to calculate portal content relative position correctly when rendered in a React Navigation modal.
       top: Platform.select({
         default: sidePosition.top,
-        ios: isReactNavigationModal ? sidePosition.top + insets.top : sidePosition.top,
+        ios: isReactNavigationModal
+          ? sidePosition.top + effectiveInsets.top
+          : sidePosition.top,
       }),
     };
 
@@ -85,7 +99,7 @@ export function useRelativePosition({
     align,
     preferredSide,
     alignOffset,
-    insets,
+    effectiveInsets,
     triggerPosition,
     contentLayout,
     dimensions.width,