@korsolutions/ui 0.0.64 → 0.0.66

package/src/components/button/button.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import {
+  ActivityIndicator,
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  StyleSheet,
+  type ViewStyle,
+} from "react-native";
+import { useOrganizedChildren } from "../../hooks/use-organized-children";
+import type { ButtonState } from "./types";
+import { ButtonVariants } from "./variants";
+
+export interface ButtonProps extends PressableProps {
+  variant?: keyof typeof ButtonVariants;
+  children?: React.ReactNode;
+
+  isDisabled?: boolean;
+  isLoading?: boolean;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (
+  props: ButtonProps,
+  isHovered: boolean,
+): ButtonState => {
+  if (props.isDisabled) return "disabled";
+  if (props.isLoading) return "loading";
+  if (isHovered) return "hovered";
+  return "default";
+};
+
+export function Button(props: ButtonProps) {
+  const variantStyles = ButtonVariants[props.variant ?? "default"]();
+  const [isHovered, setIsHovered] = useState(false);
+
+  const state = calculateState(props, isHovered);
+
+  const textStyle = StyleSheet.flatten([
+    variantStyles.text?.default,
+    variantStyles.text?.[state],
+  ]);
+  const iconProps = StyleSheet.flatten([
+    variantStyles.icon?.default,
+    variantStyles.icon?.[state],
+  ]);
+
+  const organizedChildren = useOrganizedChildren(
+    props.children,
+    textStyle,
+    iconProps,
+  );
+
+  const handlePress: PressableProps["onPress"] = (event) => {
+    if (props.isDisabled || props.isLoading) {
+      event.preventDefault();
+      return;
+    }
+    props.onPress?.(event);
+  };
+
+  const spinnerProps = {
+    ...variantStyles.spinner?.[state],
+    ...variantStyles.spinner?.default,
+  };
+
+  return (
+    <Pressable
+      {...props}
+      onPress={handlePress}
+      onHoverIn={() => setIsHovered(true)}
+      onHoverOut={() => setIsHovered(false)}
+      disabled={props.isDisabled}
+      style={[
+        variantStyles.root?.default,
+        variantStyles.root?.[state],
+        props.style,
+      ]}
+    >
+      {organizedChildren}
+      {props.isLoading && <ActivityIndicator {...spinnerProps} />}
+    </Pressable>
+  );
+}

package/src/components/button/index.ts

@@ -1,14 +1,2 @@
-import { ButtonLabel } from "./components/button-label";
-import { ButtonRoot } from "./components/button-root";
-import { ButtonSpinner } from "./components/button-spinner";
-
-export const Button = {
-  Root: ButtonRoot,
-  Label: ButtonLabel,
-  Spinner: ButtonSpinner,
-};
-
-export type { ButtonLabelProps } from "./components/button-label";
-export type { ButtonRootProps } from "./components/button-root";
-export type { ButtonSpinnerProps } from "./components/button-spinner";
+export { Button, type ButtonProps } from "./button";
 export type { ButtonStyles } from "./types";

package/src/components/button/types.ts

@@ -1,11 +1,15 @@
-import type { ButtonLabelProps } from "./components/button-label";
-import type { ButtonRootProps } from "./components/button-root";
-import type { ButtonSpinnerProps } from "./components/button-spinner";
+import type {
+  ActivityIndicatorProps,
+  TextStyle,
+  ViewStyle,
+} from "react-native";
+import type { IconProps } from "../icon";
 
 export type ButtonState = "default" | "disabled" | "loading" | "hovered";
 
 export interface ButtonStyles {
-  root?: Partial<Record<ButtonState, ButtonRootProps["style"]>>;
-  label?: Partial<Record<ButtonState, ButtonLabelProps["style"]>>;
-  spinner?: Partial<Record<ButtonState, ButtonSpinnerProps>>;
+  root?: Partial<Record<ButtonState, ViewStyle>>;
+  text?: Partial<Record<ButtonState, TextStyle>>;
+  icon?: Partial<Record<ButtonState, IconProps>>;
+  spinner?: Partial<Record<ButtonState, ActivityIndicatorProps>>;
 }

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

@@ -1,6 +1,7 @@
-import { type ButtonStyles } from "../..";
+import type { CursorValue } from "react-native";
 import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { ButtonStyles } from "../types";
 
 export const useButtonVariantDefault = (): ButtonStyles => {
   return useThemedStyles(
@@ -17,32 +18,37 @@ export const useButtonVariantDefault = (): ButtonStyles => {
           backgroundColor: colors.primary,
           borderWidth: 1,
           borderColor: colors.border,
+          cursor: "pointer",
         },
         disabled: {
           opacity: 0.5,
+          cursor: "not-allowed" as CursorValue,
         },
         loading: {
           opacity: 0.5,
+          cursor: "wait" as CursorValue,
         },
         hovered: {
           backgroundColor: hslaSetRelativeLightness(colors.primary, -10),
         },
       },
-      label: {
+      text: {
         default: {
           color: colors.primaryForeground,
           fontSize,
           fontFamily,
         },
-        disabled: {},
-        loading: {},
+      },
+      icon: {
+        default: {
+          color: colors.primaryForeground,
+          size: fontSize,
+        },
       },
       spinner: {
         default: {
           color: colors.primaryForeground,
         },
-        disabled: {},
-        loading: {},
       },
     }),
   );

package/src/components/button/variants/ghost.tsx

@@ -1,6 +1,7 @@
-import { type ButtonStyles } from "../..";
+import type { CursorValue } from "react-native";
 import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { ButtonStyles } from "../types";
 
 export const useButtonVariantGhost = (): ButtonStyles => {
   return useThemedStyles(
@@ -15,18 +16,21 @@ export const useButtonVariantGhost = (): ButtonStyles => {
           alignItems: "center",
           justifyContent: "center",
           backgroundColor: "transparent",
+          cursor: "pointer",
         },
         disabled: {
           opacity: 0.5,
+          cursor: "not-allowed" as CursorValue,
         },
         loading: {
           opacity: 0.5,
+          cursor: "wait" as CursorValue,
         },
         hovered: {
           backgroundColor: hslaSetRelativeLightness(colors.secondary, -1),
         },
       },
-      label: {
+      text: {
         default: {
           color: colors.foreground,
           fontSize,
@@ -39,6 +43,18 @@ export const useButtonVariantGhost = (): ButtonStyles => {
           color: colors.mutedForeground,
         },
       },
+      icon: {
+        default: {
+          color: colors.foreground,
+          size: fontSize,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+        loading: {
+          color: colors.mutedForeground,
+        },
+      },
       spinner: {
         default: {
           color: colors.foreground,

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

@@ -1,6 +1,7 @@
-import { type ButtonStyles } from "../..";
+import type { CursorValue } from "react-native";
 import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { ButtonStyles } from "../types";
 
 export const useButtonVariantSecondary = (): ButtonStyles => {
   return useThemedStyles(
@@ -17,18 +18,21 @@ export const useButtonVariantSecondary = (): ButtonStyles => {
           borderWidth: 1,
           borderColor: colors.border,
           backgroundColor: colors.secondary,
+          cursor: "pointer",
         },
         disabled: {
           opacity: 0.5,
+          cursor: "not-allowed" as CursorValue,
         },
         loading: {
           opacity: 0.5,
+          cursor: "wait" as CursorValue,
         },
         hovered: {
           backgroundColor: hslaSetRelativeLightness(colors.secondary, -1),
         },
       },
-      label: {
+      text: {
         default: {
           color: colors.secondaryForeground,
           fontSize,
@@ -41,6 +45,18 @@ export const useButtonVariantSecondary = (): ButtonStyles => {
           color: colors.mutedForeground,
         },
       },
+      icon: {
+        default: {
+          color: colors.secondaryForeground,
+          size: fontSize,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+        loading: {
+          color: colors.mutedForeground,
+        },
+      },
       spinner: {
         default: {
           color: colors.secondaryForeground,

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

@@ -0,0 +1,51 @@
+import React from "react";
+import {
+  ScrollView,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { useRelativePosition } from "../../../hooks/use-relative-position";
+import { useCombobox } from "../context";
+
+export interface ComboboxContentProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ComboboxContent(props: ComboboxContentProps) {
+  const combobox = useCombobox();
+  const composedStyles = StyleSheet.flatten([
+    combobox.styles?.content?.default,
+    combobox.styles?.content?.[combobox.state],
+    props.style,
+  ]);
+
+  const flatStyles = StyleSheet.flatten(composedStyles);
+
+  const positionStyle = useRelativePosition({
+    align: "start",
+    triggerPosition: combobox.triggerPosition,
+    contentLayout: combobox.contentLayout,
+    alignOffset: 0,
+    preferredSide: "bottom",
+    sideOffset: 2,
+  });
+
+  return (
+    <ScrollView
+      style={[
+        positionStyle,
+        flatStyles,
+        { width: combobox.triggerPosition.width },
+      ]}
+      onLayout={(e) => {
+        combobox.setContentLayout(e.nativeEvent.layout);
+      }}
+      keyboardShouldPersistTaps="handled"
+      nestedScrollEnabled
+    >
+      {props.children}
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { Text } from "react-native";
+import { calculateComposedStyles } from "../../../utils/calculate-styles";
+import { useCombobox } from "../context";
+
+export interface ComboboxEmptyProps {
+  children?: React.ReactNode;
+}
+
+export function ComboboxEmpty(props: ComboboxEmptyProps) {
+  const combobox = useCombobox();
+
+  const hasVisibleOptions = combobox.options.some((option) =>
+    combobox.filter(option.value, combobox.searchQuery),
+  );
+
+  if (hasVisibleOptions) {
+    return null;
+  }
+
+  const composedStyles = calculateComposedStyles(
+    combobox.styles,
+    combobox.state,
+    "empty",
+  );
+
+  return <Text style={composedStyles}>{props.children}</Text>;
+}

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

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from "react";
+import { Pressable, StyleSheet, Text } from "react-native";
+import { useCombobox } from "../context";
+import type { ComboboxOptionState, ComboboxState } from "../types";
+
+export type ComboboxOptionProps = {
+  value: string;
+  label?: string;
+  children?: React.ReactNode;
+};
+
+const calculateState = (
+  comboboxState: ComboboxState,
+  hovered: boolean,
+  selected: boolean,
+): ComboboxOptionState => {
+  if (comboboxState === "disabled") {
+    return "disabled";
+  }
+  if (selected) {
+    return "selected";
+  }
+  if (hovered) {
+    return "hovered";
+  }
+  return "default";
+};
+
+export function ComboboxOption(
+  props: ComboboxOptionProps,
+): React.ReactElement | null {
+  const [isHovered, setIsHovered] = useState(false);
+  const combobox = useCombobox();
+  const isSelected = combobox.value === props.value;
+
+  const optionState = calculateState(combobox.state, isHovered, isSelected);
+  const composedStyles = StyleSheet.flatten([
+    combobox.styles?.option?.default,
+    combobox.styles?.option?.[optionState],
+  ]);
+
+  useEffect(() => {
+    combobox.setOptions((prev) => {
+      if (prev.find((option) => option.value === props.value)) {
+        return prev;
+      }
+      return [
+        ...prev,
+        {
+          value: props.value,
+          label: props.label ?? props.children,
+        },
+      ];
+    });
+  }, [props.value, props.label, props.children]);
+
+  if (!combobox.filter(props.value, combobox.searchQuery)) {
+    return null;
+  }
+
+  const Component = typeof props.children === "string" ? Text : Pressable;
+
+  return (
+    <Component
+      onPress={() => {
+        combobox.onChange?.(props.value);
+        combobox.setIsOpen(false);
+        combobox.setSearchQuery("");
+      }}
+      onPointerEnter={() => {
+        setIsHovered(true);
+      }}
+      onPointerLeave={() => {
+        setIsHovered(false);
+      }}
+      style={composedStyles}
+    >
+      {props.children}
+    </Component>
+  );
+}

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

@@ -0,0 +1,36 @@
+import React from "react";
+import {
+  Pressable,
+  type StyleProp,
+  StyleSheet,
+  type ViewStyle,
+} from "react-native";
+import { useCombobox } from "../context";
+
+export interface ComboboxOverlayProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ComboboxOverlay(props: ComboboxOverlayProps) {
+  const combobox = useCombobox();
+
+  const composedStyles = StyleSheet.flatten([
+    combobox.styles?.overlay?.default,
+    combobox.styles?.overlay?.[combobox.state],
+    props.style,
+  ]);
+
+  return (
+    <Pressable
+      onPress={() => {
+        combobox.setIsOpen(false);
+        combobox.setSearchQuery("");
+      }}
+      pointerEvents="auto"
+      style={[StyleSheet.absoluteFill, composedStyles]}
+    >
+      {props.children}
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { View } from "react-native";
+import { Portal } from "../../portal";
+import { ComboboxContext, useCombobox } from "../context";
+
+export interface ComboboxPortalProps {
+  children?: React.ReactNode;
+}
+
+export function ComboboxPortal(props: ComboboxPortalProps) {
+  const combobox = useCombobox();
+
+  if (!combobox.isOpen) {
+    return (
+      <View
+        style={{ display: "none" }}
+        aria-hidden
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+      >
+        {props.children}
+      </View>
+    );
+  }
+
+  return (
+    <Portal name="combobox-portal">
+      <ComboboxContext.Provider value={combobox}>
+        {props.children}
+      </ComboboxContext.Provider>
+    </Portal>
+  );
+}

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

@@ -0,0 +1,152 @@
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import {
+  type LayoutRectangle,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from "react-native";
+import {
+  DEFAULT_LAYOUT,
+  DEFAULT_POSITION,
+  type LayoutPosition,
+} from "../../../hooks";
+import { ComboboxContext } from "../context";
+import type { ComboboxOption, ComboboxState } from "../types";
+import { ComboboxVariants } from "../variants";
+
+export interface ComboboxRootProps {
+  variant?: keyof typeof ComboboxVariants;
+
+  value?: string;
+  onChange?: (value: string) => void;
+
+  /** Called when the search input text changes. Use for async/remote filtering. */
+  onSearchChange?: (query: string) => void;
+
+  /** Custom filter function. Receives option value and search query, returns whether to show the option.
+   * Default: case-insensitive match against option label/keywords.
+   * For async/remote filtering, pass `() => true` to show all options. */
+  filter?: (value: string, query: string) => boolean;
+
+  isDisabled?: boolean;
+
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (props: ComboboxRootProps): ComboboxState => {
+  if (props.isDisabled) {
+    return "disabled";
+  }
+  return "default";
+};
+
+const defaultFilter = (
+  value: string,
+  query: string,
+  options: Array<ComboboxOption>,
+): boolean => {
+  if (!query) return true;
+  const lowerQuery = query.toLowerCase();
+  const option = options.find((o) => o.value === value);
+  if (!option) return true;
+
+  if (option.keywords) {
+    return option.keywords.some((kw) => kw.toLowerCase().includes(lowerQuery));
+  }
+
+  if (typeof option.label === "string") {
+    return option.label.toLowerCase().includes(lowerQuery);
+  }
+
+  return true;
+};
+
+export function ComboboxRoot(props: ComboboxRootProps) {
+  const variantStyles = ComboboxVariants[props.variant ?? "default"]();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [contentLayout, setContentLayout] =
+    useState<LayoutRectangle>(DEFAULT_LAYOUT);
+  const [triggerPosition, setTriggerPosition] =
+    useState<LayoutPosition>(DEFAULT_POSITION);
+  const [options, setOptions] = useState<Array<ComboboxOption>>([]);
+  const [searchQuery, setSearchQueryInternal] = useState("");
+
+  const onSearchChangeRef = useRef(props.onSearchChange);
+  onSearchChangeRef.current = props.onSearchChange;
+
+  const setSearchQuery: React.Dispatch<React.SetStateAction<string>> =
+    useCallback((action) => {
+      setSearchQueryInternal((prev) => {
+        const next = typeof action === "function" ? action(prev) : action;
+        if (next !== prev) {
+          onSearchChangeRef.current?.(next);
+        }
+        return next;
+      });
+    }, []);
+
+  const filterRef = useRef(props.filter);
+  filterRef.current = props.filter;
+
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+
+  const filter = useCallback(
+    (value: string, query: string) =>
+      filterRef.current
+        ? filterRef.current(value, query)
+        : defaultFilter(value, query, optionsRef.current),
+    [],
+  );
+
+  const state = calculateState(props);
+  const composedStyles = StyleSheet.flatten([
+    variantStyles?.root?.default,
+    variantStyles?.root?.[state],
+    props.style,
+  ]);
+
+  const contextValue: ComboboxContext = useMemo(
+    () => ({
+      value: props.value,
+      onChange: props.onChange,
+      isOpen,
+      setIsOpen,
+      triggerPosition,
+      setTriggerPosition,
+      contentLayout,
+      setContentLayout,
+      options,
+      setOptions,
+      searchQuery,
+      setSearchQuery,
+      filter,
+      state,
+      isDisabled: props.isDisabled ?? false,
+      styles: variantStyles,
+    }),
+    [
+      props.value,
+      props.onChange,
+      isOpen,
+      triggerPosition,
+      contentLayout,
+      options,
+      searchQuery,
+      setSearchQuery,
+      filter,
+      state,
+      props.isDisabled,
+      variantStyles,
+    ],
+  );
+
+  return (
+    <ComboboxContext.Provider value={contextValue}>
+      <View style={composedStyles}>{props.children}</View>
+    </ComboboxContext.Provider>
+  );
+}