@korsolutions/ui 0.0.37 → 0.0.39

package/src/primitives/alert-dialog/alert-dialog-content.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { useAlertDialog } from "./context";
+
+export interface AlertDialogPrimitiveContentProps extends ViewProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AlertDialogContent(props: AlertDialogPrimitiveContentProps) {
+  const { children, style, ...viewProps } = props;
+  const { styles } = useAlertDialog();
+
+  const calculatedStyle = [styles?.content, style];
+
+  return (
+    <View {...viewProps} style={calculatedStyle}>
+      {children}
+    </View>
+  );
+}

package/src/primitives/alert-dialog/alert-dialog-description.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
+import { useAlertDialog } from "./context";
+
+export interface AlertDialogPrimitiveDescriptionProps extends TextProps {
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function AlertDialogDescription(props: AlertDialogPrimitiveDescriptionProps) {
+  const { children, style, ...textProps } = props;
+  const { styles } = useAlertDialog();
+
+  const calculatedStyle = [styles?.description, style];
+
+  return (
+    <Text {...textProps} style={calculatedStyle}>
+      {children}
+    </Text>
+  );
+}

package/src/primitives/alert-dialog/alert-dialog-footer.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { useAlertDialog } from "./context";
+
+export interface AlertDialogPrimitiveFooterProps extends ViewProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AlertDialogFooter(props: AlertDialogPrimitiveFooterProps) {
+  const { children, style, ...viewProps } = props;
+  const { styles } = useAlertDialog();
+
+  const calculatedStyle = [styles?.footer, style];
+
+  return (
+    <View {...viewProps} style={calculatedStyle}>
+      {children}
+    </View>
+  );
+}

package/src/primitives/alert-dialog/alert-dialog-overlay.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+import { useAlertDialog } from "./context";
+
+export interface AlertDialogPrimitiveOverlayProps extends PressableProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AlertDialogOverlay(props: AlertDialogPrimitiveOverlayProps) {
+  const { style, ...pressableProps } = props;
+  const { styles, setIsOpen } = useAlertDialog();
+
+  const calculatedStyle = [styles?.overlay, style];
+
+  return (
+    <Pressable
+      {...pressableProps}
+      style={calculatedStyle}
+      onPress={() => setIsOpen(false)}
+      accessible={true}
+      accessibilityRole="button"
+      accessibilityLabel="Close alert dialog"
+    />
+  );
+}

package/src/primitives/alert-dialog/alert-dialog-portal.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Portal } from "../portal";
+import { AlertDialogPrimitiveContext, useAlertDialog } from "./context";
+
+interface AlertDialogPortalProps {
+  children: React.ReactNode;
+}
+
+export function AlertDialogPortal(props: AlertDialogPortalProps) {
+  const alertDialog = useAlertDialog();
+
+  if (!alertDialog.isOpen) {
+    return null;
+  }
+  return (
+    <Portal name="alert-dialog-content">
+      <AlertDialogPrimitiveContext.Provider value={alertDialog}>{props.children}</AlertDialogPrimitiveContext.Provider>
+    </Portal>
+  );
+}

package/src/primitives/alert-dialog/alert-dialog-root.tsx

@@ -0,0 +1,25 @@
+import React, { useMemo, useState } from "react";
+import { AlertDialogPrimitiveContext } from "./context";
+import type { AlertDialogStyles } from "./types";
+
+export interface AlertDialogPrimitiveRootProps {
+  children: React.ReactNode;
+
+  styles?: AlertDialogStyles;
+}
+
+export function AlertDialogRoot(props: AlertDialogPrimitiveRootProps) {
+  const { children, styles } = props;
+  const [isOpen, setIsOpen] = useState(false);
+
+  const contextValue = useMemo(
+    () => ({
+      isOpen,
+      setIsOpen,
+      styles,
+    }),
+    [isOpen, styles]
+  );
+
+  return <AlertDialogPrimitiveContext.Provider value={contextValue}>{children}</AlertDialogPrimitiveContext.Provider>;
+}

package/src/primitives/alert-dialog/alert-dialog-title.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
+import { useAlertDialog } from "./context";
+
+export interface AlertDialogPrimitiveTitleProps extends TextProps {
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function AlertDialogTitle(props: AlertDialogPrimitiveTitleProps) {
+  const { children, style, ...textProps } = props;
+  const { styles } = useAlertDialog();
+
+  const calculatedStyle = [styles?.title, style];
+
+  return (
+    <Text {...textProps} style={calculatedStyle}>
+      {children}
+    </Text>
+  );
+}

package/src/primitives/alert-dialog/alert-dialog-trigger.tsx

@@ -0,0 +1,27 @@
+import type { ViewRef } from "@/types/element.types";
+import React from "react";
+import { type PressableProps } from "react-native";
+import { useAlertDialog } from "./context";
+
+export interface AlertDialogPrimitiveTriggerProps extends PressableProps {
+  children: React.ReactElement<React.RefAttributes<ViewRef> & PressableProps>;
+}
+
+export function AlertDialogTrigger(props: AlertDialogPrimitiveTriggerProps): React.ReactElement {
+  const { onPress } = props;
+  const { isOpen, setIsOpen } = useAlertDialog();
+
+  const handlePress: PressableProps["onPress"] = (event) => {
+    onPress?.(event);
+    setIsOpen(true);
+  };
+
+  return React.cloneElement(props.children, {
+    onPress: handlePress,
+    role: "button",
+    accessible: true,
+    accessibilityRole: "button",
+    accessibilityState: { expanded: isOpen },
+    ...props.children.props,
+  });
+}

package/src/primitives/alert-dialog/context.ts

@@ -0,0 +1,18 @@
+import React, { createContext, useContext, type Dispatch } from "react";
+import type { AlertDialogStyles } from "./types";
+
+export interface AlertDialogPrimitiveContextValue {
+  isOpen: boolean;
+  setIsOpen: Dispatch<React.SetStateAction<boolean>>;
+  styles?: AlertDialogStyles;
+}
+
+export const AlertDialogPrimitiveContext = createContext<AlertDialogPrimitiveContextValue | null>(null);
+
+export const useAlertDialog = () => {
+  const context = useContext(AlertDialogPrimitiveContext);
+  if (!context) {
+    throw new Error("AlertDialog compound components must be used within AlertDialogPrimitive.Root");
+  }
+  return context;
+};

package/src/primitives/alert-dialog/index.ts

@@ -0,0 +1,34 @@
+import { AlertDialogAction } from "./alert-dialog-action";
+import { AlertDialogCancel } from "./alert-dialog-cancel";
+import { AlertDialogContent } from "./alert-dialog-content";
+import { AlertDialogDescription } from "./alert-dialog-description";
+import { AlertDialogFooter } from "./alert-dialog-footer";
+import { AlertDialogOverlay } from "./alert-dialog-overlay";
+import { AlertDialogPortal } from "./alert-dialog-portal";
+import { AlertDialogRoot } from "./alert-dialog-root";
+import { AlertDialogTitle } from "./alert-dialog-title";
+import { AlertDialogTrigger } from "./alert-dialog-trigger";
+
+export const AlertDialogPrimitive = {
+  Root: AlertDialogRoot,
+  Trigger: AlertDialogTrigger,
+  Portal: AlertDialogPortal,
+  Overlay: AlertDialogOverlay,
+  Content: AlertDialogContent,
+  Title: AlertDialogTitle,
+  Description: AlertDialogDescription,
+  Footer: AlertDialogFooter,
+  Action: AlertDialogAction,
+  Cancel: AlertDialogCancel,
+};
+
+export type { AlertDialogPrimitiveActionProps } from "./alert-dialog-action";
+export type { AlertDialogPrimitiveCancelProps } from "./alert-dialog-cancel";
+export type { AlertDialogPrimitiveContentProps } from "./alert-dialog-content";
+export type { AlertDialogPrimitiveDescriptionProps } from "./alert-dialog-description";
+export type { AlertDialogPrimitiveFooterProps } from "./alert-dialog-footer";
+export type { AlertDialogPrimitiveOverlayProps } from "./alert-dialog-overlay";
+export type { AlertDialogPrimitiveRootProps } from "./alert-dialog-root";
+export type { AlertDialogPrimitiveTitleProps } from "./alert-dialog-title";
+export type { AlertDialogPrimitiveTriggerProps } from "./alert-dialog-trigger";
+export * from "./types";

package/src/primitives/alert-dialog/types.ts

@@ -0,0 +1,13 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+
+export interface AlertDialogStyles {
+  overlay?: StyleProp<ViewStyle>;
+  content?: StyleProp<ViewStyle>;
+  title?: StyleProp<TextStyle>;
+  description?: StyleProp<TextStyle>;
+  footer?: StyleProp<ViewStyle>;
+  action?: StyleProp<ViewStyle>;
+  actionText?: StyleProp<TextStyle>;
+  cancel?: StyleProp<ViewStyle>;
+  cancelText?: StyleProp<TextStyle>;
+}

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

@@ -0,0 +1,38 @@
+import { useRelativePosition } from "@/hooks/use-relative-position";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React from "react";
+import { ScrollView, type StyleProp, type ViewStyle } from "react-native";
+import { useAutocomplete } from "./context";
+
+export interface AutocompleteContentProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AutocompleteContent(props: AutocompleteContentProps) {
+  const autocomplete = useAutocomplete();
+  const composedStyles = calculateComposedStyles(autocomplete.styles, autocomplete.state, "content", props.style);
+
+  const positionStyle = useRelativePosition({
+    align: "start",
+    avoidCollisions: true,
+    triggerPosition: autocomplete.inputPosition,
+    contentLayout: autocomplete.contentLayout,
+    alignOffset: 0,
+    side: "bottom",
+    sideOffset: 0,
+  });
+
+  return (
+    <ScrollView
+      style={[positionStyle, composedStyles, { width: autocomplete.inputPosition.width }]}
+      onLayout={(e) => {
+        autocomplete.setContentLayout(e.nativeEvent.layout);
+      }}
+      pointerEvents="box-none"
+      keyboardShouldPersistTaps="handled"
+    >
+      {props.children}
+    </ScrollView>
+  );
+}

package/src/primitives/autocomplete/autocomplete-empty.tsx

@@ -0,0 +1,19 @@
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React from "react";
+import { type StyleProp, Text, type TextStyle } from "react-native";
+import { useAutocomplete } from "./context";
+
+export interface AutocompleteEmptyProps {
+  children?: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+  render?: (props: AutocompleteEmptyProps) => React.ReactElement;
+}
+
+export function AutocompleteEmpty(props: AutocompleteEmptyProps) {
+  const autocomplete = useAutocomplete();
+
+  const composedStyles = calculateComposedStyles(autocomplete.styles, autocomplete.state, "empty", props.style);
+
+  const Component = props.render ?? Text;
+  return <Component style={composedStyles}>{props.children}</Component>;
+}

package/src/primitives/autocomplete/autocomplete-input.tsx

@@ -0,0 +1,85 @@
+import type { TextInputRef } from "@/types/element.types";
+import { measureLayoutPosition } from "@/utils/normalize-layout";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { StyleSheet, TextInput, type StyleProp, type TextInputProps, type TextStyle } from "react-native";
+import { useFieldOptional } from "../field/context";
+import { useAutocomplete } from "./context";
+
+export interface AutocompleteInputProps extends Omit<TextInputProps, "onChange" | "value"> {
+  style?: StyleProp<TextStyle>;
+}
+
+export const AutocompleteInput = forwardRef<TextInputRef, AutocompleteInputProps>((props, ref) => {
+  const autocomplete = useAutocomplete();
+  const field = useFieldOptional();
+  const inputRef = useRef<TextInputRef>(null);
+  const blurTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+  const composedStyles = [autocomplete.styles?.input?.default, autocomplete.styles?.input?.[autocomplete.state], props.style];
+
+  const handleFocus: TextInputProps["onFocus"] = (e) => {
+    // Clear any pending blur timeout
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
+    }
+
+    // Measure layout position and open dropdown
+    if (autocomplete.openOnFocus && !autocomplete.isDisabled) {
+      measureLayoutPosition(inputRef.current, (layout) => {
+        autocomplete.setInputPosition(layout);
+        autocomplete.setIsOpen(true);
+      });
+    }
+
+    props.onFocus?.(e);
+  };
+
+  const handleBlur: TextInputProps["onBlur"] = (e) => {
+    blurTimeoutRef.current = setTimeout(() => {
+      autocomplete.setIsOpen(false);
+    }, 150);
+
+    props.onBlur?.(e);
+  };
+
+  const handleChangeText = (text: string) => {
+    autocomplete.setInputValue?.(text);
+
+    // Open dropdown when typing
+    if (!autocomplete.isOpen && text.trim() && autocomplete.openOnFocus) {
+      measureLayoutPosition(inputRef.current, (layout) => {
+        autocomplete.setInputPosition(layout);
+        autocomplete.setIsOpen(true);
+      });
+    }
+
+    props.onChangeText?.(text);
+  };
+
+  useImperativeHandle(ref, () => inputRef.current!);
+  useEffect(() => {
+    autocomplete.setBlurInput(() => () => {
+      inputRef.current?.blur();
+    });
+    autocomplete.setInputDisplayValueSetter(() => (v: string) => {
+      inputRef.current?.setNativeProps({ text: v });
+    });
+  }, []);
+
+  return (
+    <TextInput
+      {...props}
+      ref={inputRef}
+      id={field?.id}
+      value={autocomplete.inputValue}
+      placeholder={autocomplete.placeholder}
+      onChangeText={handleChangeText}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      editable={!autocomplete.isDisabled}
+      style={StyleSheet.flatten(composedStyles)}
+    />
+  );
+});
+
+AutocompleteInput.displayName = "AutocompleteInput";

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

@@ -0,0 +1,66 @@
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { useEffect, useState } from "react";
+import { type StyleProp, Text, type TextStyle } from "react-native";
+import { useAutocomplete } from "./context";
+import type { AutocompleteOptionState, AutocompleteState } from "./types";
+
+export interface AutocompleteOptionProps {
+  children: string;
+  value: string;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  render?: (props: AutocompleteOptionProps) => React.ReactElement;
+  style?: StyleProp<TextStyle>;
+}
+
+const calculateState = (autocompleteState: AutocompleteState, hovered: boolean, selected: boolean): AutocompleteOptionState => {
+  if (autocompleteState === "disabled") {
+    return "disabled";
+  }
+  if (selected) {
+    return "selected";
+  }
+  if (hovered) {
+    return "hovered";
+  }
+  return "default";
+};
+
+export function AutocompleteOption(props: AutocompleteOptionProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const autocomplete = useAutocomplete();
+  const isSelected = autocomplete.value === props.value;
+
+  const optionState = calculateState(autocomplete.state, isHovered, isSelected);
+  const composedStyles = calculateComposedStyles(autocomplete.styles, optionState, "option", props.style);
+
+  useEffect(() => {
+    autocomplete.setOptions((prev) => {
+      if (prev.find((option) => option.value === props.value)) {
+        return prev;
+      }
+      return [...prev, { value: props.value, label: props.children }];
+    });
+  }, [props.value, props.children]);
+
+  const handlePress = () => {
+    autocomplete.onChange?.(props.value);
+    autocomplete.setInputValue?.("");
+    autocomplete.setInputDisplayValue(props.children);
+    autocomplete.setIsOpen(false);
+    autocomplete.blurInput();
+  };
+
+  const Component = props.render ?? Text;
+  return (
+    <Component
+      value={props.value}
+      onPress={handlePress}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={composedStyles}
+    >
+      {props.children}
+    </Component>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React from "react";
+import { Pressable, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
+import { useAutocomplete } from "./context";
+
+export interface AutocompleteOverlayProps {
+  children?: React.ReactNode;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  render?: (props: AutocompleteOverlayProps) => React.ReactElement;
+}
+
+export function AutocompleteOverlay(props: AutocompleteOverlayProps) {
+  const autocomplete = useAutocomplete();
+
+  const composedStyles = calculateComposedStyles(autocomplete.styles, autocomplete.state, "overlay", props.style);
+
+  const Component = props.render ?? Pressable;
+  return (
+    <Component
+      onPress={() => {
+        autocomplete.setIsOpen(false);
+      }}
+      style={[StyleSheet.absoluteFill, composedStyles]}
+    >
+      {props.children}
+    </Component>
+  );
+}

package/src/primitives/autocomplete/autocomplete-portal.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from "react";
+import { Portal } from "../portal";
+import { useAutocomplete, AutocompleteContext } from "./context";
+
+export interface AutocompletePortalProps {
+  children?: React.ReactNode;
+}
+
+export function AutocompletePortal(props: AutocompletePortalProps) {
+  const autocomplete = useAutocomplete();
+
+  useEffect(() => {
+    return () => {
+      autocomplete.setOptions([]);
+    };
+  }, []);
+
+  if (!autocomplete.isOpen) {
+    return null;
+  }
+
+  return (
+    <Portal name="autocomplete-portal">
+      <AutocompleteContext.Provider value={autocomplete}>{props.children}</AutocompleteContext.Provider>
+    </Portal>
+  );
+}

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

@@ -0,0 +1,111 @@
+import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "@/hooks";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React, { useEffect, useMemo, useState } from "react";
+import { type LayoutRectangle, type StyleProp, View, type ViewStyle } from "react-native";
+import { AutocompleteContext } from "./context";
+import type { AutocompleteOption, AutocompleteState, AutocompleteStyles } from "./types";
+
+interface AutocompleteRootInjectedProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface AutocompleteRootBaseProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  inputValue?: string;
+  setInputValue?: (value: string) => void;
+  placeholder?: string;
+  isDisabled?: boolean;
+  openOnFocus?: boolean;
+}
+
+export interface AutocompleteRootProps extends AutocompleteRootBaseProps {
+  children?: React.ReactNode;
+  render?: (props: AutocompleteRootInjectedProps) => React.ReactElement;
+  styles?: AutocompleteStyles;
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (props: AutocompleteRootProps, isFocused: boolean): AutocompleteState => {
+  if (props.isDisabled) {
+    return "disabled";
+  }
+  if (isFocused) {
+    return "focused";
+  }
+  return "default";
+};
+
+export function AutocompleteRoot(props: AutocompleteRootProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
+  const [inputPosition, setInputPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
+  const [options, setOptions] = useState<Array<AutocompleteOption>>([]);
+  const [blurInput, setBlurInput] = useState<() => void>(() => () => {});
+  const [setInputDisplayValue, setInputDisplayValueSetter] = useState<(value: string) => void>(() => () => {});
+
+  useEffect(() => {
+    if (props.value) {
+      const selectedOption = options.find((opt) => opt.value === props.value);
+      if (selectedOption) {
+        props.setInputValue?.(selectedOption.label);
+      }
+    } else {
+      props.setInputValue?.("");
+    }
+  }, [props.value, options]);
+
+  const state = calculateState(props, isOpen);
+  const composedStyles = calculateComposedStyles(props.styles, state, "root", props.style);
+
+  const contextValue = useMemo(
+    () =>
+      ({
+        value: props.value,
+        onChange: props.onChange,
+        placeholder: props.placeholder,
+        inputValue: props.inputValue,
+        setInputValue: props.setInputValue,
+        isOpen,
+        setIsOpen,
+        inputPosition,
+        setInputPosition,
+        contentLayout,
+        setContentLayout,
+        options,
+        setOptions,
+        openOnFocus: props.openOnFocus ?? true,
+        blurInput,
+        setBlurInput,
+        setInputDisplayValue,
+        setInputDisplayValueSetter,
+        state,
+        isDisabled: props.isDisabled ?? false,
+        styles: props.styles ?? null,
+      }) satisfies AutocompleteContext,
+    [
+      props.value,
+      props.onChange,
+      props.placeholder,
+      props.openOnFocus,
+      props.isDisabled,
+      props.styles,
+      props.inputValue,
+      props.setInputValue,
+      isOpen,
+      inputPosition,
+      contentLayout,
+      options,
+      blurInput,
+      setInputDisplayValue,
+      state,
+    ],
+  );
+
+  const Component = props.render ?? View;
+  return (
+    <AutocompleteContext.Provider value={contextValue}>
+      <Component style={composedStyles}>{props.children}</Component>
+    </AutocompleteContext.Provider>
+  );
+}