@korsolutions/ui 0.0.19 → 0.0.21

package/src/hooks/use-numeric-mask.ts

@@ -0,0 +1,202 @@
+import { useState, useCallback } from "react";
+
+export type NumericMaskFormat = "currency" | "decimal" | "integer" | "percentage";
+
+export interface UseNumericMaskOptions {
+  format?: NumericMaskFormat;
+  locale?: string;
+  currency?: string;
+  precision?: number;
+  min?: number;
+  max?: number;
+  allowNegative?: boolean;
+  onChange?: (value: number | null) => void;
+}
+
+export interface UseNumericMaskReturn {
+  value: string;
+  numericValue: number | null;
+  onChangeText: (text: string) => void;
+  onBlur: () => void;
+  onFocus: () => void;
+  keyboardType: "numeric" | "decimal-pad" | "number-pad";
+  setValue: (value: number | null) => void;
+}
+
+export function useNumericMask({
+  format = "decimal",
+  locale = "en-US",
+  currency = "USD",
+  precision = 2,
+  min,
+  max,
+  allowNegative = true,
+  onChange,
+}: UseNumericMaskOptions = {}): UseNumericMaskReturn {
+  const [numericValue, setNumericValue] = useState<number | null>(null);
+  const [displayValue, setDisplayValue] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+
+  // Determine actual precision based on format
+  const effectivePrecision = format === "integer" ? 0 : precision;
+
+  const formatValue = useCallback(
+    (num: number | null): string => {
+      if (num === null || isNaN(num)) return "";
+
+      switch (format) {
+        case "currency":
+          return new Intl.NumberFormat(locale, {
+            style: "currency",
+            currency,
+            minimumFractionDigits: effectivePrecision,
+            maximumFractionDigits: effectivePrecision,
+          }).format(num);
+
+        case "percentage":
+          return new Intl.NumberFormat(locale, {
+            style: "percent",
+            minimumFractionDigits: effectivePrecision,
+            maximumFractionDigits: effectivePrecision,
+          }).format(num / 100);
+
+        case "integer":
+          return new Intl.NumberFormat(locale, {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+          }).format(num);
+
+        case "decimal":
+        default:
+          return new Intl.NumberFormat(locale, {
+            minimumFractionDigits: effectivePrecision,
+            maximumFractionDigits: effectivePrecision,
+          }).format(num);
+      }
+    },
+    [format, locale, currency, effectivePrecision]
+  );
+
+  const parseValue = useCallback(
+    (text: string): number | null => {
+      // Remove currency symbols, spaces, thousand separators, and percentage signs
+      let cleaned = text.replace(/[^\d.-]/g, "");
+
+      // Handle negative sign
+      if (!allowNegative) {
+        cleaned = cleaned.replace(/-/g, "");
+      }
+
+      const parsed = parseFloat(cleaned);
+
+      if (isNaN(parsed) || cleaned === "" || cleaned === "-") return null;
+
+      // Apply min/max constraints
+      let constrained = parsed;
+      if (min !== undefined && constrained < min) constrained = min;
+      if (max !== undefined && constrained > max) constrained = max;
+
+      return constrained;
+    },
+    [min, max, allowNegative]
+  );
+
+  const handleChangeText = useCallback(
+    (text: string) => {
+      // When focused, validate input before allowing it
+      if (isFocused) {
+        // Remove formatting characters to get raw input
+        let cleaned = text.replace(/[^\d.-]/g, "");
+
+        // Validate negative sign
+        if (!allowNegative && cleaned.includes("-")) {
+          return;
+        }
+
+        // Ensure negative sign is only at the start
+        if (allowNegative) {
+          const negativeCount = (cleaned.match(/-/g) || []).length;
+          if (negativeCount > 1 || (cleaned.includes("-") && cleaned.indexOf("-") !== 0)) {
+            return;
+          }
+        }
+
+        // Check decimal precision (skip for integer format)
+        if (effectivePrecision >= 0) {
+          const decimalIndex = cleaned.indexOf(".");
+          if (decimalIndex !== -1) {
+            const decimalPart = cleaned.substring(decimalIndex + 1);
+
+            // Prevent typing more decimals than allowed precision
+            if (decimalPart.length > effectivePrecision) {
+              return;
+            }
+          }
+
+          // Prevent multiple decimal points
+          const decimalCount = (cleaned.match(/\./g) || []).length;
+          if (decimalCount > 1) {
+            return;
+          }
+
+          // Prevent decimal point for integer format
+          if (format === "integer" && cleaned.includes(".")) {
+            return;
+          }
+        }
+      }
+
+      setDisplayValue(text);
+      const value = parseValue(text);
+      setNumericValue(value);
+      onChange?.(value);
+    },
+    [parseValue, onChange, isFocused, effectivePrecision, allowNegative, format]
+  );
+
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+    if (numericValue !== null) {
+      setDisplayValue(formatValue(numericValue));
+    } else {
+      setDisplayValue("");
+    }
+  }, [numericValue, formatValue]);
+
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+    if (numericValue !== null) {
+      setDisplayValue(numericValue.toString());
+    }
+  }, [numericValue]);
+
+  const setValue = useCallback(
+    (value: number | null) => {
+      setNumericValue(value);
+      if (value !== null) {
+        if (isFocused) {
+          setDisplayValue(value.toString());
+        } else {
+          setDisplayValue(formatValue(value));
+        }
+      } else {
+        setDisplayValue("");
+      }
+      onChange?.(value);
+    },
+    [isFocused, formatValue, onChange]
+  );
+
+  // Determine keyboard type based on format
+  const keyboardType = format === "integer" ? (allowNegative ? ("numeric" as const) : ("number-pad" as const)) : ("decimal-pad" as const);
+
+  return {
+    value: displayValue,
+    numericValue,
+    onChangeText: handleChangeText,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    keyboardType,
+    setValue,
+  };
+}

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

@@ -0,0 +1,188 @@
+import * as React from "react";
+import { useWindowDimensions, type LayoutRectangle, type ScaledSize } from "react-native";
+
+interface Insets {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}
+
+type UseRelativePositionArgs = Omit<GetContentStyleArgs, "triggerPosition" | "contentLayout" | "dimensions"> & {
+  triggerPosition: LayoutPosition | null;
+  contentLayout: LayoutRectangle | null;
+};
+
+export function useRelativePosition({
+  align,
+  avoidCollisions,
+  triggerPosition,
+  contentLayout,
+  alignOffset,
+  insets,
+  sideOffset,
+  side,
+}: UseRelativePositionArgs) {
+  const dimensions = useWindowDimensions();
+
+  return React.useMemo(() => {
+    if (!triggerPosition || !contentLayout) {
+      return {
+        position: "absolute",
+        opacity: 0,
+        top: dimensions.height,
+        zIndex: -9999999,
+      } as const;
+    }
+    return getContentStyle({
+      align,
+      avoidCollisions,
+      contentLayout,
+      side,
+      triggerPosition,
+      alignOffset,
+      insets,
+      sideOffset,
+      dimensions,
+    });
+  }, [align, avoidCollisions, side, alignOffset, insets, triggerPosition, contentLayout, dimensions.width, dimensions.height]);
+}
+
+export interface LayoutPosition {
+  pageY: number;
+  pageX: number;
+  width: number;
+  height: number;
+}
+
+interface GetPositionArgs {
+  dimensions: ScaledSize;
+  avoidCollisions: boolean;
+  triggerPosition: LayoutPosition;
+  contentLayout: LayoutRectangle;
+  insets?: Insets;
+}
+
+interface GetSidePositionArgs extends GetPositionArgs {
+  side: "top" | "bottom";
+  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 };
+
+function getSidePosition({ side, triggerPosition, contentLayout, sideOffset, insets, avoidCollisions, 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;
+
+  if (!avoidCollisions) {
+    return {
+      top: side === "top" ? positionTop : positionBottom,
+    };
+  }
+
+  if (side === "top") {
+    return {
+      top: Math.min(Math.max(insetTop, positionTop), dimensions.height - insetBottom - contentLayout.height),
+    };
+  }
+
+  return {
+    top: Math.min(dimensions.height - insetBottom - contentLayout.height, positionBottom),
+  };
+}
+
+interface GetAlignPositionArgs extends GetPositionArgs {
+  align: "start" | "center" | "end";
+  alignOffset: number;
+}
+
+function getAlignPosition({ align, avoidCollisions, 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);
+
+  if (avoidCollisions) {
+    const doesCollide = left < insetLeft || left + contentWidth > dimensions.width - insetRight;
+    if (doesCollide) {
+      const spaceLeft = left - insetLeft;
+      const spaceRight = dimensions.width - insetRight - (left + contentWidth);
+
+      if (spaceLeft > spaceRight && spaceLeft >= contentWidth) {
+        left = insetLeft;
+      } else if (spaceRight >= contentWidth) {
+        left = dimensions.width - insetRight - contentWidth;
+      } else {
+        const centeredPosition = Math.max(insetLeft, (dimensions.width - contentWidth - insetRight) / 2);
+        left = centeredPosition;
+      }
+    }
+  }
+
+  return { left, maxWidth: maxContentWidth };
+}
+
+function getLeftPosition(
+  align: "start" | "center" | "end",
+  triggerPageX: number,
+  triggerWidth: number,
+  contentWidth: number,
+  alignOffset: number,
+  insetLeft: number,
+  insetRight: number,
+  dimensions: ScaledSize
+) {
+  let left = 0;
+  if (align === "start") {
+    left = triggerPageX;
+  }
+  if (align === "center") {
+    left = triggerPageX + triggerWidth / 2 - contentWidth / 2;
+  }
+  if (align === "end") {
+    left = triggerPageX + triggerWidth - contentWidth;
+  }
+  return Math.max(insetLeft, Math.min(left + alignOffset, dimensions.width - contentWidth - insetRight));
+}
+
+type GetContentStyleArgs = GetPositionArgs & GetSidePositionArgs & GetAlignPositionArgs;
+
+function getContentStyle({
+  align,
+  avoidCollisions,
+  contentLayout,
+  side,
+  triggerPosition,
+  alignOffset,
+  insets,
+  sideOffset,
+  dimensions,
+}: GetContentStyleArgs) {
+  return Object.assign(
+    { position: "absolute" } as const,
+    getSidePosition({
+      side,
+      triggerPosition,
+      contentLayout,
+      sideOffset,
+      insets,
+      avoidCollisions,
+      dimensions,
+    }),
+    getAlignPosition({
+      align,
+      avoidCollisions,
+      triggerPosition,
+      contentLayout,
+      alignOffset,
+      insets,
+      dimensions,
+    })
+  );
+}

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

@@ -1,13 +1,11 @@
 import React, { useState } from "react";
-import { Pressable, StyleProp, ViewStyle } from "react-native";
+import { Pressable, PressableProps, StyleProp, ViewStyle } from "react-native";
 import { ButtonStyles, ButtonState } from "./types";
 import { ButtonPrimitiveContext } from "./button-context";
 
-export interface ButtonPrimitiveRootProps {
+export interface ButtonPrimitiveRootProps extends PressableProps {
   children?: React.ReactNode;
 
-  onPress?: () => void;
-
   isDisabled?: boolean;
   isLoading?: boolean;
 

package/src/primitives/dropdown-menu/context.ts

@@ -0,0 +1,25 @@
+import { createContext, Dispatch, useContext } from "react";
+import { LayoutRectangle } from "react-native";
+import { DropdownMenuStyles } from "./types";
+import { LayoutPosition } from "@/hooks/use-relative-position";
+
+export interface DropdownMenuContext {
+  isOpen: boolean;
+  setIsOpen: Dispatch<React.SetStateAction<boolean>>;
+  triggerPosition: LayoutPosition;
+  setTriggerPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
+  contentLayout: LayoutRectangle;
+  setContentLayout: Dispatch<React.SetStateAction<LayoutRectangle>>;
+
+  styles?: DropdownMenuStyles;
+}
+
+export const DropdownMenuContext = createContext<DropdownMenuContext | undefined>(undefined);
+
+export const useDropdownMenu = () => {
+  const context = useContext(DropdownMenuContext);
+  if (!context) {
+    throw new Error("useDropdownMenu must be used within a DropdownMenuRoot");
+  }
+  return context;
+};

package/src/primitives/dropdown-menu/dropdown-menu-button.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import { StyleProp, Text, TextStyle } from "react-native";
+import { useDropdownMenu } from "./context";
+import { DropdownMenuButtonState } from "./types";
+
+export interface DropdownMenuButtonProps {
+  children?: string;
+  onPress?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+
+  render?: (props: DropdownMenuButtonProps) => React.ReactElement;
+
+  style?: StyleProp<TextStyle>;
+}
+
+const calculateState = (isHovered: boolean): DropdownMenuButtonState => {
+  if (isHovered) {
+    return "hovered";
+  }
+  return "default";
+};
+
+export function DropdownMenuButton(props: DropdownMenuButtonProps) {
+  const menu = useDropdownMenu();
+  const [isHovered, setIsHovered] = useState(false);
+  const state = calculateState(isHovered);
+  const composedStyle = [menu.styles?.button?.default, menu.styles?.button?.[state], props.style];
+
+  const handlePress = () => {
+    props.onPress?.();
+    menu.setIsOpen((prev) => !prev);
+  };
+
+  const Component = props.render ?? Text;
+  return (
+    <Component
+      {...props}
+      onPress={handlePress}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={composedStyle}
+    >
+      {props.children}
+    </Component>
+  );
+}

package/src/primitives/dropdown-menu/dropdown-menu-content.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { useDropdownMenu } from "./context";
+import { useRelativePosition } from "@/hooks/use-relative-position";
+
+export interface DropdownMenuContentProps {
+  children?: React.ReactNode;
+
+  render?: (props: DropdownMenuContentProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function DropdownMenuContent(props: DropdownMenuContentProps) {
+  const menu = useDropdownMenu();
+
+  const positionStyle = useRelativePosition({
+    align: "start",
+    avoidCollisions: true,
+    triggerPosition: menu.triggerPosition,
+    contentLayout: menu.contentLayout,
+    alignOffset: 0,
+    side: "bottom",
+    sideOffset: 0,
+  });
+
+  const composedStyle = [positionStyle, menu.styles?.content, props.style];
+
+  const Component = props.render ?? View;
+  return (
+    <Component
+      {...props}
+      onLayout={(e) => {
+        menu.setContentLayout(e.nativeEvent.layout);
+      }}
+      style={composedStyle}
+    />
+  );
+}

package/src/primitives/dropdown-menu/dropdown-menu-divider.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { useDropdownMenu } from "./context";
+
+export interface DropdownMenuDividerProps {
+  render?: (props: DropdownMenuDividerProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function DropdownMenuDivider(props: DropdownMenuDividerProps) {
+  const menu = useDropdownMenu();
+
+  const composedStyle = [menu.styles?.divider, props.style];
+
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyle} />;
+}

package/src/primitives/dropdown-menu/dropdown-menu-overlay.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useDropdownMenu } from "./context";
+import { Pressable, StyleProp, StyleSheet, ViewStyle } from "react-native";
+
+export interface DropdownMenuOverlayProps {
+  children?: React.ReactNode;
+
+  render?: (props: DropdownMenuOverlayProps) => React.ReactElement;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function DropdownMenuOverlay(props: DropdownMenuOverlayProps) {
+  const menu = useDropdownMenu();
+
+  const composedStyle = [StyleSheet.absoluteFill, menu.styles?.overlay, props.style];
+
+  const Component = props.render ?? Pressable;
+  return (
+    <Component
+      onPress={() => {
+        menu.setIsOpen(false);
+      }}
+      style={composedStyle}
+    >
+      {props.children}
+    </Component>
+  );
+}

package/src/primitives/dropdown-menu/dropdown-menu-portal.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Portal } from "../portal";
+import { useDropdownMenu, DropdownMenuContext } from "./context";
+
+export interface DropdownMenuPortalProps {
+  children?: React.ReactNode;
+}
+
+export function DropdownMenuPortal(props: DropdownMenuPortalProps) {
+  const menu = useDropdownMenu();
+
+  if (!menu.isOpen) {
+    return null;
+  }
+
+  return (
+    <Portal name="dropdown-menu-portal">
+      <DropdownMenuContext.Provider value={menu}>{props.children}</DropdownMenuContext.Provider>
+    </Portal>
+  );
+}

package/src/primitives/dropdown-menu/dropdown-menu-root.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import { LayoutRectangle } from "react-native";
+import { DropdownMenuStyles } from "./types";
+import { DropdownMenuContext } from "./context";
+import { DEFAULT_LAYOUT, DEFAULT_POSITION, LayoutPosition } from "@/hooks/use-relative-position";
+
+export interface DropdownMenuRootProps {
+  children?: React.ReactNode;
+
+  render?: (props: DropdownMenuRootProps) => React.ReactNode;
+
+  styles?: DropdownMenuStyles;
+}
+
+export function DropdownMenuRoot(props: DropdownMenuRootProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
+  const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
+
+  return (
+    <DropdownMenuContext.Provider
+      value={{
+        isOpen,
+        setIsOpen,
+        triggerPosition,
+        setTriggerPosition,
+        contentLayout,
+        setContentLayout,
+        styles: props.styles,
+      }}
+    >
+      {props.children}
+    </DropdownMenuContext.Provider>
+  );
+}

package/src/primitives/dropdown-menu/dropdown-menu-trigger.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef, RefAttributes, useImperativeHandle, useRef } from "react";
+import { PressableProps, View } from "react-native";
+import { useDropdownMenu } from "./context";
+
+export interface DropdownMenuTriggerProps extends PressableProps {
+  children: React.ReactElement<RefAttributes<View> & PressableProps>;
+}
+
+export interface DropdownMenuTriggerRef {
+  open: () => void;
+  close: () => void;
+}
+
+export const DropdownMenuTrigger = forwardRef<DropdownMenuTriggerRef, DropdownMenuTriggerProps>((props, ref) => {
+  const dropdownMenu = useDropdownMenu();
+  const triggerRef = useRef<View>(null);
+
+  const onTriggerPress = async () => {
+    triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+      dropdownMenu.setTriggerPosition({
+        height,
+        width,
+        pageX,
+        pageY,
+      });
+    });
+
+    dropdownMenu.setIsOpen((prev) => !prev);
+  };
+
+  useImperativeHandle(ref, () => ({
+    open: () => dropdownMenu.setIsOpen(true),
+    close: () => dropdownMenu.setIsOpen(false),
+  }));
+
+  return React.cloneElement(props.children, {
+    ref: triggerRef,
+    onPress: onTriggerPress,
+    role: "button",
+    accessible: true,
+    accessibilityRole: "button",
+    accessibilityState: { expanded: dropdownMenu.isOpen },
+    ...props.children.props,
+  });
+});
+
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";