@korsolutions/ui 0.0.50 → 0.0.52

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

@@ -1,84 +0,0 @@
-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 placeholderTextColor = autocomplete.styles?.input?.placeholderTextColor;
-  const selectionColor = autocomplete.styles?.input?.selectionColor;
-
-  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.setInputRef(inputRef.current);
-  }, []);
-
-  return (
-    <TextInput
-      {...props}
-      ref={inputRef}
-      id={field?.id}
-      value={autocomplete.inputValue}
-      placeholder={autocomplete.placeholder}
-      placeholderTextColor={placeholderTextColor}
-      selectionColor={selectionColor}
-      onChangeText={handleChangeText}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      editable={!autocomplete.isDisabled}
-      style={StyleSheet.flatten(composedStyles)}
-    />
-  );
-});
-
-AutocompleteInput.displayName = "AutocompleteInput";

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

@@ -1,74 +0,0 @@
-import { calculateComposedStyles } from "@/utils/calculate-styles";
-import { setInnerInputValue } from "@/utils/input-utils";
-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);
-
-  const handlePress = () => {
-    autocomplete.onChange?.(props.value);
-    autocomplete.setInputValue?.("");
-    autocomplete.setIsOpen(false);
-    if (autocomplete.inputRef) {
-      setInnerInputValue(autocomplete.inputRef, props.children);
-      autocomplete.inputRef.blur();
-    } else {
-      console.warn("Input reference is not available");
-    }
-  };
-
-  useEffect(() => {
-    autocomplete.setOptions((prev) => {
-      if (prev.find((option) => option.value === props.value)) {
-        return prev;
-      }
-      return [...prev, { value: props.value, label: props.children }];
-    });
-    return () => {
-      autocomplete.setOptions((prev) => prev.filter((option) => option.value !== props.value));
-    };
-  }, [props.value, props.children]);
-
-  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

@@ -1,37 +0,0 @@
-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>;
-}
-
-export function AutocompleteOverlay(props: AutocompleteOverlayProps) {
-  const autocomplete = useAutocomplete();
-
-  const composedStyles = calculateComposedStyles(autocomplete.styles, autocomplete.state, "overlay", props.style);
-
-  const handlePress = () => {
-    props.onPress?.();
-    autocomplete.setIsOpen(false);
-    autocomplete.inputRef?.blur();
-  };
-
-  return (
-    <Pressable
-      onPress={handlePress}
-      style={[
-        StyleSheet.absoluteFill,
-        composedStyles,
-        {
-          display: autocomplete.isOpen ? "flex" : "none",
-        },
-      ]}
-    >
-      {props.children}
-    </Pressable>
-  );
-}

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

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

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

@@ -1,105 +0,0 @@
-import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "@/hooks";
-import type { TextInputRef } from "@/types/element.types";
-import { calculateComposedStyles } from "@/utils/calculate-styles";
-import { setInnerInputValue } from "@/utils/input-utils";
-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";
-
-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;
-  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 [inputRef, setInputRef] = useState<TextInputRef | null>(null);
-
-  useEffect(() => {
-    if (!inputRef) return;
-    if (props.value) {
-      const selectedOption = options.find((opt) => opt.value === props.value);
-      if (selectedOption) {
-        props.setInputValue?.(selectedOption.label);
-        setInnerInputValue(inputRef, selectedOption.label);
-      }
-    } else {
-      props.setInputValue?.("");
-      setInnerInputValue(inputRef, "");
-    }
-  }, [props.value, options, inputRef]);
-
-  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,
-        inputRef,
-        setInputRef,
-        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,
-      state,
-    ],
-  );
-
-  return (
-    <AutocompleteContext.Provider value={contextValue}>
-      <View style={composedStyles}>{props.children}</View>
-    </AutocompleteContext.Provider>
-  );
-}

package/src/primitives/autocomplete/context.ts

@@ -1,44 +0,0 @@
-import type { LayoutPosition } from "@/hooks";
-import type { TextInputRef } from "@/types/element.types";
-import React, { createContext, type Dispatch, useContext } from "react";
-import type { LayoutRectangle } from "react-native";
-import type { AutocompleteOption, AutocompleteState, AutocompleteStyles } from "./types";
-
-export interface AutocompleteContext {
-  value?: string;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-
-  inputValue?: string;
-  setInputValue?: (value: string) => void;
-
-  isOpen: boolean;
-  setIsOpen: Dispatch<React.SetStateAction<boolean>>;
-  inputPosition: LayoutPosition;
-  setInputPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
-  contentLayout: LayoutRectangle;
-  setContentLayout: Dispatch<React.SetStateAction<LayoutRectangle>>;
-
-  options: Array<AutocompleteOption>;
-  setOptions: Dispatch<React.SetStateAction<Array<AutocompleteOption>>>;
-
-  openOnFocus: boolean;
-
-  inputRef: TextInputRef | null;
-  setInputRef: Dispatch<React.SetStateAction<TextInputRef | null>>;
-
-  isDisabled: boolean;
-
-  state: AutocompleteState;
-  styles: AutocompleteStyles | null;
-}
-
-export const AutocompleteContext = createContext<AutocompleteContext | undefined>(undefined);
-
-export const useAutocomplete = () => {
-  const context = useContext(AutocompleteContext);
-  if (!context) {
-    throw new Error("useAutocomplete must be used within an AutocompleteProvider");
-  }
-  return context;
-};

package/src/primitives/autocomplete/index.ts

@@ -1,27 +0,0 @@
-export type { AutocompleteContentProps } from "./autocomplete-content";
-export type { AutocompleteEmptyProps } from "./autocomplete-empty";
-export type { AutocompleteInputProps } from "./autocomplete-input";
-export type { AutocompleteOptionProps } from "./autocomplete-option";
-export type { AutocompleteOverlayProps } from "./autocomplete-overlay";
-export type { AutocompletePortalProps } from "./autocomplete-portal";
-export type { AutocompleteRootBaseProps, AutocompleteRootProps } from "./autocomplete-root";
-export { useAutocomplete } from "./context";
-export type { AutocompleteOption, AutocompleteOptionState, AutocompleteState, AutocompleteStyles } from "./types";
-
-import { AutocompleteContent } from "./autocomplete-content";
-import { AutocompleteEmpty } from "./autocomplete-empty";
-import { AutocompleteInput } from "./autocomplete-input";
-import { AutocompleteOption } from "./autocomplete-option";
-import { AutocompleteOverlay } from "./autocomplete-overlay";
-import { AutocompletePortal } from "./autocomplete-portal";
-import { AutocompleteRoot } from "./autocomplete-root";
-
-export const AutocompletePrimitive = {
-  Root: AutocompleteRoot,
-  Input: AutocompleteInput,
-  Portal: AutocompletePortal,
-  Overlay: AutocompleteOverlay,
-  Content: AutocompleteContent,
-  Option: AutocompleteOption,
-  Empty: AutocompleteEmpty,
-};

package/src/primitives/autocomplete/types.ts

@@ -1,23 +0,0 @@
-import type { AutocompleteContentProps } from "./autocomplete-content";
-import type { AutocompleteEmptyProps } from "./autocomplete-empty";
-import type { AutocompleteInputProps } from "./autocomplete-input";
-import type { AutocompleteOptionProps } from "./autocomplete-option";
-import type { AutocompleteOverlayProps } from "./autocomplete-overlay";
-import type { AutocompleteRootProps } from "./autocomplete-root";
-
-export type AutocompleteState = "default" | "focused" | "disabled";
-export type AutocompleteOptionState = AutocompleteState | "hovered" | "selected";
-
-export interface AutocompleteStyles {
-  root?: Partial<Record<AutocompleteState, AutocompleteRootProps["style"]>>;
-  input?: Partial<Record<AutocompleteState, AutocompleteInputProps["style"]>> & Pick<AutocompleteInputProps, "placeholderTextColor" | "selectionColor">;
-  overlay?: Partial<Record<AutocompleteState, AutocompleteOverlayProps["style"]>>;
-  content?: Partial<Record<AutocompleteState, AutocompleteContentProps["style"]>>;
-  option?: Partial<Record<AutocompleteOptionState, AutocompleteOptionProps["style"]>>;
-  empty?: Partial<Record<AutocompleteState, AutocompleteEmptyProps["style"]>>;
-}
-
-export interface AutocompleteOption {
-  value: string;
-  label: string;
-}

package/src/primitives/avatar/avatar-fallback.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-import { Text, type StyleProp, type TextStyle } from "react-native";
-import { useAvatar } from "./context";
-
-export interface AvatarFallbackProps {
-  children: string;
-  style?: StyleProp<TextStyle>;
-}
-
-export function AvatarFallback(props: AvatarFallbackProps) {
-  const avatar = useAvatar();
-  const composedStyles = [avatar.styles?.fallback, props.style];
-  return <Text {...props} style={composedStyles} />;
-}

package/src/primitives/avatar/avatar-image.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { Image, type ImageSource, type ImageStyle, type StyleProp } from "react-native";
-import { useAvatar } from "./context";
-
-export interface AvatarImageProps {
-  source: ImageSource;
-  onError: () => void;
-  render?: (props: AvatarImageProps) => React.ReactNode;
-  style?: StyleProp<ImageStyle>;
-}
-
-export function AvatarImage(props: AvatarImageProps) {
-  const avatar = useAvatar();
-  const composedStyles = [avatar.styles?.image, props.style];
-  const Component = props.render ?? Image;
-  return <Component {...props} style={composedStyles} />;
-}

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

@@ -1,21 +0,0 @@
-import React from "react";
-import { type StyleProp, View, type ViewStyle } from "react-native";
-import { AvatarContext } from "./context";
-import type { AvatarStyles } from "./types";
-
-export interface AvatarRootProps {
-  children: React.ReactNode;
-  render?: (props: AvatarRootProps) => React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-  styles?: AvatarStyles;
-}
-
-export function AvatarRoot(props: AvatarRootProps) {
-  const composedStyles = [props.styles?.root, props.style];
-  const Component = props.render ?? View;
-  return (
-    <AvatarContext.Provider value={{ styles: props.styles }}>
-      <Component {...props} style={composedStyles} />
-    </AvatarContext.Provider>
-  );
-}

package/src/primitives/avatar/context.ts

@@ -1,16 +0,0 @@
-import { createContext, useContext } from "react";
-import type { AvatarStyles } from "./types";
-
-export interface AvatarContext {
-  styles?: AvatarStyles;
-}
-
-export const AvatarContext = createContext<AvatarContext | undefined>(undefined);
-
-export const useAvatar = () => {
-  const context = useContext(AvatarContext);
-  if (!context) {
-    throw new Error("useAvatarContext must be used within a AvatarProvider");
-  }
-  return context;
-};

package/src/primitives/avatar/index.ts

@@ -1,14 +0,0 @@
-import { AvatarRoot } from "./avatar-root";
-import { AvatarFallback } from "./avatar-fallback";
-import { AvatarImage } from "./avatar-image";
-
-export const AvatarPrimitive = {
-  Root: AvatarRoot,
-  Image: AvatarImage,
-  Fallback: AvatarFallback,
-};
-
-export type { AvatarRootProps } from "./avatar-root";
-export type { AvatarFallbackProps } from "./avatar-fallback";
-export type { AvatarImageProps } from "./avatar-image";
-export type { AvatarStyles } from "./types";

package/src/primitives/avatar/types.ts

@@ -1,9 +0,0 @@
-import type { AvatarFallbackProps } from "./avatar-fallback";
-import type { AvatarImageProps } from "./avatar-image";
-import type { AvatarRootProps } from "./avatar-root";
-
-export type AvatarStyles = {
-  root?: AvatarRootProps["style"];
-  image?: AvatarImageProps["style"];
-  fallback?: AvatarFallbackProps["style"];
-};

package/src/primitives/badge/badge-label.tsx

@@ -1,21 +0,0 @@
-import { calculateComposedStyles } from "@/utils/calculate-styles";
-import React from "react";
-import { type StyleProp, Text, type TextStyle } from "react-native";
-import { useBadge } from "./context";
-
-export interface BadgeLabelProps {
-  children?: string;
-
-  render?: (props: BadgeLabelProps) => React.ReactNode;
-
-  style?: StyleProp<TextStyle>;
-}
-
-export function BadgeLabel(props: BadgeLabelProps) {
-  const badge = useBadge();
-
-  const composedStyle = calculateComposedStyles(badge.styles, badge.state, "label", props.style);
-
-  const Component = props.render ?? Text;
-  return <Component {...props} style={composedStyle} />;
-}

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

@@ -1,30 +0,0 @@
-import { calculateComposedStyles } from "@/utils/calculate-styles";
-import React from "react";
-import { type StyleProp, View, type ViewStyle } from "react-native";
-import { BadgeContext } from "./context";
-import type { BadgeStyles } from "./types";
-
-export interface BadgeRootProps {
-  children?: React.ReactNode;
-
-  render?: (props: BadgeRootProps) => React.ReactNode;
-
-  style?: StyleProp<ViewStyle>;
-  styles?: BadgeStyles;
-}
-
-export function BadgeRoot(props: BadgeRootProps) {
-  const composedStyle = calculateComposedStyles(props.styles, "default", "root", props.style);
-
-  const Component = props.render ?? View;
-  return (
-    <BadgeContext.Provider
-      value={{
-        state: "default",
-        styles: props.styles,
-      }}
-    >
-      <Component {...props} style={composedStyle} />
-    </BadgeContext.Provider>
-  );
-}

package/src/primitives/badge/index.ts

@@ -1,11 +0,0 @@
-import { BadgeRoot } from "./badge-root";
-import { BadgeLabel } from "./badge-label";
-
-export const BadgePrimitive = {
-  Root: BadgeRoot,
-  Label: BadgeLabel,
-};
-
-export type { BadgeRootProps } from "./badge-root";
-export type { BadgeLabelProps } from "./badge-label";
-export type { BadgeStyles } from "./types";

package/src/primitives/badge/types.ts

@@ -1,9 +0,0 @@
-import type { BadgeLabelProps } from "./badge-label";
-import type { BadgeRootProps } from "./badge-root";
-
-export type BadgeState = "default";
-
-export interface BadgeStyles {
-  root?: Partial<Record<BadgeState, BadgeRootProps["style"]>>;
-  label?: Partial<Record<BadgeState, BadgeLabelProps["style"]>>;
-}

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

@@ -1,19 +0,0 @@
-import { createContext, useContext } from "react";
-import type { ButtonState, ButtonStyles } from "./types";
-
-export interface ButtonPrimitiveContext {
-  disabled?: boolean;
-
-  state: ButtonState;
-  styles?: ButtonStyles;
-}
-
-export const ButtonPrimitiveContext = createContext<ButtonPrimitiveContext | undefined>(undefined);
-
-export const useButtonPrimitive = () => {
-  const context = useContext(ButtonPrimitiveContext);
-  if (!context) {
-    throw new Error("useButtonPrimitive must be used within a ButtonPrimitiveProvider");
-  }
-  return context;
-};

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

@@ -1,24 +0,0 @@
-import { calculateComposedStyles } from "@/utils/calculate-styles";
-import React from "react";
-import { type StyleProp, Text, type TextStyle } from "react-native";
-import { useButtonPrimitive } from "./button-context";
-
-export interface ButtonPrimitiveLabelProps {
-  children?: string;
-
-  style?: StyleProp<TextStyle>;
-}
-
-export function ButtonLabel(props: ButtonPrimitiveLabelProps) {
-  const button = useButtonPrimitive();
-
-  const calculatedStyle = calculateComposedStyles(button.styles, button.state, "label", props.style);
-
-  const isSelectable = button.state !== "disabled" && button.state !== "loading";
-
-  return (
-    <Text selectable={isSelectable} style={calculatedStyle}>
-      {props.children}
-    </Text>
-  );
-}