@korsolutions/ui 0.0.19 → 0.0.21

package/dist/use-relative-position-BTKEyT1F.mjs

@@ -0,0 +1,106 @@
+import * as React$1 from "react";
+import { useWindowDimensions } from "react-native";
+
+//#region src/hooks/use-relative-position.ts
+function useRelativePosition({ align, avoidCollisions, triggerPosition, contentLayout, alignOffset, insets, sideOffset, side }) {
+	const dimensions = useWindowDimensions();
+	return React$1.useMemo(() => {
+		if (!triggerPosition || !contentLayout) return {
+			position: "absolute",
+			opacity: 0,
+			top: dimensions.height,
+			zIndex: -9999999
+		};
+		return getContentStyle({
+			align,
+			avoidCollisions,
+			contentLayout,
+			side,
+			triggerPosition,
+			alignOffset,
+			insets,
+			sideOffset,
+			dimensions
+		});
+	}, [
+		align,
+		avoidCollisions,
+		side,
+		alignOffset,
+		insets,
+		triggerPosition,
+		contentLayout,
+		dimensions.width,
+		dimensions.height
+	]);
+}
+const DEFAULT_LAYOUT = {
+	x: 0,
+	y: 0,
+	width: 0,
+	height: 0
+};
+const DEFAULT_POSITION = {
+	height: 0,
+	width: 0,
+	pageX: 0,
+	pageY: 0
+};
+function getSidePosition({ side, triggerPosition, contentLayout, sideOffset, insets, avoidCollisions, dimensions }) {
+	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) };
+}
+function getAlignPosition({ align, avoidCollisions, contentLayout, triggerPosition, alignOffset, insets, dimensions }) {
+	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) {
+		if (left < insetLeft || left + contentWidth > dimensions.width - insetRight) {
+			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 left = Math.max(insetLeft, (dimensions.width - contentWidth - insetRight) / 2);
+		}
+	}
+	return {
+		left,
+		maxWidth: maxContentWidth
+	};
+}
+function getLeftPosition(align, triggerPageX, triggerWidth, contentWidth, alignOffset, insetLeft, insetRight, dimensions) {
+	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));
+}
+function getContentStyle({ align, avoidCollisions, contentLayout, side, triggerPosition, alignOffset, insets, sideOffset, dimensions }) {
+	return Object.assign({ position: "absolute" }, getSidePosition({
+		side,
+		triggerPosition,
+		contentLayout,
+		sideOffset,
+		insets,
+		avoidCollisions,
+		dimensions
+	}), getAlignPosition({
+		align,
+		avoidCollisions,
+		triggerPosition,
+		contentLayout,
+		alignOffset,
+		insets,
+		dimensions
+	}));
+}
+
+//#endregion
+export { DEFAULT_POSITION as n, useRelativePosition as r, DEFAULT_LAYOUT as t };

package/dist/use-relative-position-DBzhrBU7.d.mts

@@ -0,0 +1,61 @@
+import { LayoutRectangle, ScaledSize } from "react-native";
+
+//#region src/hooks/use-relative-position.d.ts
+interface Insets {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}
+type UseRelativePositionArgs = Omit<GetContentStyleArgs, "triggerPosition" | "contentLayout" | "dimensions"> & {
+  triggerPosition: LayoutPosition | null;
+  contentLayout: LayoutRectangle | null;
+};
+declare function useRelativePosition({
+  align,
+  avoidCollisions,
+  triggerPosition,
+  contentLayout,
+  alignOffset,
+  insets,
+  sideOffset,
+  side
+}: UseRelativePositionArgs): ({
+  readonly position: "absolute";
+} & {
+  top: number;
+} & {
+  left: number;
+  maxWidth: number;
+}) | {
+  readonly position: "absolute";
+  readonly opacity: 0;
+  readonly top: number;
+  readonly zIndex: -9999999;
+};
+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;
+}
+declare const DEFAULT_LAYOUT: LayoutRectangle;
+declare const DEFAULT_POSITION: LayoutPosition;
+interface GetAlignPositionArgs extends GetPositionArgs {
+  align: "start" | "center" | "end";
+  alignOffset: number;
+}
+type GetContentStyleArgs = GetPositionArgs & GetSidePositionArgs & GetAlignPositionArgs;
+//#endregion
+export { useRelativePosition as i, DEFAULT_POSITION as n, LayoutPosition as r, DEFAULT_LAYOUT as t };

package/package.json

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

package/src/components/button/button.tsx

@@ -1,10 +1,12 @@
 import React from "react";
-import { ButtonPrimitive } from "@/primitives";
+import { ButtonPrimitive, ButtonPrimitiveRootProps } from "@/primitives";
 import { ButtonVariants } from "./variants";
 
 interface ButtonProps {
-  onPress?: () => void;
   children?: string;
+
+  onPress?: ButtonPrimitiveRootProps["onPress"];
+  onLayout?: ButtonPrimitiveRootProps["onLayout"];
   isDisabled?: boolean;
   isLoading?: boolean;
 
@@ -12,11 +14,12 @@ interface ButtonProps {
 }
 
 export function Button(props: ButtonProps) {
-  const useVariantStyles = props.variant ? ButtonVariants[props.variant] : ButtonVariants["default"];
+  const { children, variant = "default", ...rootProps } = props;
+  const useVariantStyles = ButtonVariants[variant];
   const variantStyles = useVariantStyles();
 
   return (
-    <ButtonPrimitive.Root onPress={props.onPress} isDisabled={props.isDisabled} isLoading={props.isLoading} styles={variantStyles}>
+    <ButtonPrimitive.Root {...rootProps} styles={variantStyles}>
       {props.isLoading && <ButtonPrimitive.Spinner />}
       <ButtonPrimitive.Label>{props.children}</ButtonPrimitive.Label>
     </ButtonPrimitive.Root>

package/src/components/dropdown-menu/dropdown-menu.tsx

@@ -0,0 +1,49 @@
+import { DropdownMenuPrimitive } from "@/primitives";
+import React from "react";
+import { DropdownMenuVariants } from "./variants";
+import { PressableProps } from "react-native";
+
+type DropdownMenuOption =
+  | {
+      type: "button";
+      label: string;
+      onPress: () => void;
+    }
+  | {
+      type: "divider";
+    };
+
+interface DropdownMenuProps {
+  trigger: React.ReactElement<PressableProps>;
+  options: DropdownMenuOption[];
+
+  variant?: keyof typeof DropdownMenuVariants;
+}
+
+export function DropdownMenu(props: DropdownMenuProps) {
+  const useVariantStyles = DropdownMenuVariants[props.variant || "default"];
+  const styles = useVariantStyles();
+
+  return (
+    <DropdownMenuPrimitive.Root styles={styles}>
+      <DropdownMenuPrimitive.Trigger>{props.trigger}</DropdownMenuPrimitive.Trigger>
+      <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.Overlay>
+          <DropdownMenuPrimitive.Content>
+            {props.options.map((option) => {
+              if (option.type === "button") {
+                return (
+                  <DropdownMenuPrimitive.Button onPress={option.onPress} key={option.label}>
+                    {option.label}
+                  </DropdownMenuPrimitive.Button>
+                );
+              } else if (option.type === "divider") {
+                return <DropdownMenuPrimitive.Divider key={Math.random().toString()} />;
+              }
+            })}
+          </DropdownMenuPrimitive.Content>
+        </DropdownMenuPrimitive.Overlay>
+      </DropdownMenuPrimitive.Portal>
+    </DropdownMenuPrimitive.Root>
+  );
+}

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

@@ -0,0 +1,40 @@
+import { DropdownMenuStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export const useDropdownMenuVariantDefault = (): DropdownMenuStyles => {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): DropdownMenuStyles => ({
+      overlay: {
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+      },
+      content: {
+        overflow: "hidden",
+        backgroundColor: colors.surface,
+        borderRadius: radius,
+        borderWidth: 1,
+        borderColor: colors.border,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.15,
+        shadowRadius: 12,
+        elevation: 8,
+      },
+      button: {
+        default: {
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          fontFamily: fontFamily,
+          fontSize: fontSize,
+          color: colors.foreground,
+        },
+        hovered: {
+          backgroundColor: colors.muted,
+        },
+      },
+      divider: {
+        height: 1,
+        backgroundColor: colors.border,
+      },
+    })
+  );
+};

package/src/components/dropdown-menu/variants/index.ts

@@ -0,0 +1,5 @@
+import { useDropdownMenuVariantDefault } from "./default";
+
+export const DropdownMenuVariants = {
+  default: useDropdownMenuVariantDefault,
+};

package/src/components/index.ts

@@ -1,6 +1,6 @@
 export * from "./button/button";
 export * from "./card/card";
-export * from "./input/input";
+export * from "./input";
 export * from "./field/field";
 export * from "./select/select";
 export * from "./typography/typography";
@@ -10,3 +10,5 @@ export * from "./avatar/avatar";
 export * from "./toast/index";
 export * from "./badge/badge";
 export * from "./textarea/textarea";
+export * from "./dropdown-menu/dropdown-menu";
+export * from "./popover/popover";

package/src/components/input/index.ts

@@ -0,0 +1,2 @@
+export * from "./input";
+export * from "./numeric-input";

package/src/components/input/numeric-input.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect } from "react";
+import { Input } from "./input";
+import { InputPrimitiveBaseProps } from "@/primitives";
+import { useNumericMask, NumericMaskFormat } from "@/hooks/use-numeric-mask";
+
+export interface NumericInputProps extends Omit<InputPrimitiveBaseProps, "value" | "onChange" | "keyboardType"> {
+  variant?: "default";
+  value?: number | null;
+  onChange?: (value: number | null) => void;
+  format?: NumericMaskFormat;
+  locale?: string;
+  currency?: string;
+  precision?: number;
+  min?: number;
+  max?: number;
+  allowNegative?: boolean;
+}
+
+export function NumericInput({
+  value,
+  onChange,
+  format = "decimal",
+  locale = "en-US",
+  currency = "USD",
+  precision = 2,
+  min,
+  max,
+  allowNegative = true,
+  variant = "default",
+  onBlur,
+  onFocus,
+  ...props
+}: NumericInputProps) {
+  const numericMask = useNumericMask({
+    format,
+    locale,
+    currency,
+    precision,
+    min,
+    max,
+    allowNegative,
+    onChange,
+  });
+
+  // Sync external value changes with internal state
+  useEffect(() => {
+    if (value !== numericMask.numericValue) {
+      numericMask.setValue(value ?? null);
+    }
+  }, [value]);
+
+  const handleBlur = (e: any) => {
+    numericMask.onBlur();
+    onBlur?.(e);
+  };
+
+  const handleFocus = (e: any) => {
+    numericMask.onFocus();
+    onFocus?.(e);
+  };
+
+  return (
+    <Input
+      {...props}
+      variant={variant}
+      value={numericMask.value}
+      onChange={numericMask.onChangeText}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      keyboardType={numericMask.keyboardType}
+    />
+  );
+}

package/src/components/popover/popover.tsx

@@ -0,0 +1,51 @@
+import { PopoverPrimitive, usePopover } from "@/primitives";
+import React, { forwardRef } from "react";
+import { PopoverVariants } from "./variants";
+import type { PopoverTriggerRef } from "@/primitives";
+import { PressableProps } from "react-native";
+
+interface PopoverChildrenProps {
+  close: () => void;
+}
+
+export interface PopoverProps {
+  children: ((props: PopoverChildrenProps) => React.ReactNode) | React.ReactNode;
+  trigger: React.ReactElement<PressableProps>;
+  closeOnOverlayPress?: boolean;
+
+  variant?: keyof typeof PopoverVariants;
+}
+
+const PopoverContentComponent = (props: { children: PopoverProps["children"] }) => {
+  const popover = usePopover();
+  if (typeof props.children === "function") {
+    return (
+      <PopoverPrimitive.Content>
+        {props.children({
+          close: () => popover.setIsOpen(false),
+        })}
+      </PopoverPrimitive.Content>
+    );
+  }
+  return <PopoverPrimitive.Content>{props.children}</PopoverPrimitive.Content>;
+};
+
+const PopoverComponent = forwardRef<PopoverTriggerRef, PopoverProps>((props, ref) => {
+  const useVariantStyles = PopoverVariants[props.variant || "default"];
+  const styles = useVariantStyles();
+
+  return (
+    <PopoverPrimitive.Root styles={styles}>
+      <PopoverPrimitive.Trigger ref={ref}>{props.trigger}</PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Overlay closeOnPress={props.closeOnOverlayPress}>
+          <PopoverContentComponent>{props.children}</PopoverContentComponent>
+        </PopoverPrimitive.Overlay>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+});
+
+PopoverComponent.displayName = "Popover";
+
+export const Popover = PopoverComponent;

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

@@ -0,0 +1,26 @@
+import { PopoverStyles } from "@/primitives/popover/types";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export const usePopoverVariantDefault = (): PopoverStyles => {
+  return useThemedStyles(
+    ({ colors, radius }): PopoverStyles => ({
+      overlay: {
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+      },
+      content: {
+        backgroundColor: colors.surface,
+        borderRadius: radius,
+        borderWidth: 1,
+        borderColor: colors.border,
+        padding: 16,
+        minWidth: 280,
+        maxWidth: 320,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.15,
+        shadowRadius: 12,
+        elevation: 8,
+      },
+    })
+  );
+};

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

@@ -0,0 +1,5 @@
+import { usePopoverVariantDefault } from "./default";
+
+export const PopoverVariants = {
+  default: usePopoverVariantDefault,
+};

package/src/hooks/index.ts

@@ -1 +1,4 @@
-export * from "./useScreenSize";
+export * from "./use-screen-size";
+export * from "./use-currency-mask";
+export * from "./use-numeric-mask";
+export * from "./use-relative-position";

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

@@ -0,0 +1,141 @@
+import { useState, useCallback } from "react";
+
+export interface UseCurrencyMaskOptions {
+  locale?: string;
+  currency?: string;
+  precision?: number;
+  min?: number;
+  max?: number;
+  onValueChange?: (value: number | null) => void;
+}
+
+export interface UseCurrencyMaskReturn {
+  value: string;
+  numericValue: number | null;
+  onChangeText: (text: string) => void;
+  onBlur: () => void;
+  onFocus: () => void;
+  keyboardType: "decimal-pad";
+  setValue: (value: number | null) => void;
+}
+
+export function useCurrencyMask({
+  locale = "en-US",
+  currency = "USD",
+  precision = 2,
+  min,
+  max,
+  onValueChange,
+}: UseCurrencyMaskOptions = {}): UseCurrencyMaskReturn {
+  const [numericValue, setNumericValue] = useState<number | null>(null);
+  const [displayValue, setDisplayValue] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+
+  const formatCurrency = useCallback(
+    (num: number | null): string => {
+      if (num === null || isNaN(num)) return "";
+
+      return new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency,
+        minimumFractionDigits: precision,
+        maximumFractionDigits: precision,
+      }).format(num);
+    },
+    [locale, currency, precision]
+  );
+
+  const parseCurrency = useCallback(
+    (text: string): number | null => {
+      // Remove currency symbols, spaces, and thousand separators
+      const cleaned = text.replace(/[^\d.-]/g, "");
+      const parsed = parseFloat(cleaned);
+
+      if (isNaN(parsed) || 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]
+  );
+
+  const handleChangeText = useCallback(
+    (text: string) => {
+      // When focused, validate decimal precision before allowing input
+      if (isFocused) {
+        // Remove currency symbols and thousand separators to get raw input
+        const cleaned = text.replace(/[^\d.-]/g, "");
+
+        // Check if input has a decimal point
+        const decimalIndex = cleaned.indexOf(".");
+        if (decimalIndex !== -1) {
+          const decimalPart = cleaned.substring(decimalIndex + 1);
+
+          // Prevent typing more decimals than allowed precision
+          if (decimalPart.length > precision) {
+            return; // Don't update state if exceeds precision
+          }
+        }
+
+        // Also prevent multiple decimal points
+        const decimalCount = (cleaned.match(/\./g) || []).length;
+        if (decimalCount > 1) {
+          return;
+        }
+      }
+
+      setDisplayValue(text);
+      const value = parseCurrency(text);
+      setNumericValue(value);
+      onValueChange?.(value);
+    },
+    [parseCurrency, onValueChange, isFocused, precision]
+  );
+
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+    if (numericValue !== null) {
+      setDisplayValue(formatCurrency(numericValue));
+    } else {
+      setDisplayValue("");
+    }
+  }, [numericValue, formatCurrency]);
+
+  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(formatCurrency(value));
+        }
+      } else {
+        setDisplayValue("");
+      }
+      onValueChange?.(value);
+    },
+    [isFocused, formatCurrency, onValueChange]
+  );
+
+  return {
+    value: displayValue,
+    numericValue,
+    onChangeText: handleChangeText,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    keyboardType: "decimal-pad",
+    setValue,
+  };
+}