@korsolutions/ui 0.0.65 → 0.0.66

package/dist/typescript/src/components/combobox/components/combobox-root.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+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>;
+}
+export declare function ComboboxRoot(props: ComboboxRootProps): React.JSX.Element;
+//# sourceMappingURL=combobox-root.d.ts.map

package/dist/typescript/src/components/combobox/components/combobox-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-root.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/components/combobox-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAEL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAQtB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IAExC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,iFAAiF;IACjF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzC;;4EAEwE;IACxE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAEnD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AA8BD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAsFpD"}

package/dist/typescript/src/components/combobox/components/combobox-trigger.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface ComboboxTriggerProps {
+    placeholder?: string;
+}
+export declare function ComboboxTrigger(props: ComboboxTriggerProps): React.JSX.Element;
+//# sourceMappingURL=combobox-trigger.d.ts.map

package/dist/typescript/src/components/combobox/components/combobox-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-trigger.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/components/combobox-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAOjD,MAAM,WAAW,oBAAoB;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAWD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBA2E1D"}

package/dist/typescript/src/components/combobox/context.d.ts

@@ -0,0 +1,25 @@
+import { type Dispatch } from "react";
+import type { LayoutRectangle } from "react-native";
+import type { LayoutPosition } from "../../hooks";
+import type { ComboboxOption, ComboboxState, ComboboxStyles } from "./types";
+export interface ComboboxContext {
+    value?: string;
+    onChange?: (value: string) => void;
+    isOpen: boolean;
+    setIsOpen: Dispatch<React.SetStateAction<boolean>>;
+    triggerPosition: LayoutPosition;
+    setTriggerPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
+    contentLayout: LayoutRectangle;
+    setContentLayout: Dispatch<React.SetStateAction<LayoutRectangle>>;
+    options: Array<ComboboxOption>;
+    setOptions: Dispatch<React.SetStateAction<Array<ComboboxOption>>>;
+    searchQuery: string;
+    setSearchQuery: Dispatch<React.SetStateAction<string>>;
+    filter: (value: string, query: string) => boolean;
+    isDisabled: boolean;
+    state: ComboboxState;
+    styles: ComboboxStyles;
+}
+export declare const ComboboxContext: import("react").Context<ComboboxContext | undefined>;
+export declare const useCombobox: () => ComboboxContext;
+//# sourceMappingURL=context.d.ts.map

package/dist/typescript/src/components/combobox/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/components/combobox/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,QAAQ,EAAc,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7E,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,eAAe,EAAE,cAAc,CAAC;IAChC,kBAAkB,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;IACnE,aAAa,EAAE,eAAe,CAAC;IAC/B,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IAClE,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAC/B,UAAU,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAElE,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAEvD,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAElD,UAAU,EAAE,OAAO,CAAC;IAEpB,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,sDAE3B,CAAC;AAEF,eAAO,MAAM,WAAW,uBAMvB,CAAC"}

package/dist/typescript/src/components/combobox/index.d.ts

@@ -0,0 +1,25 @@
+import { ComboboxContent } from "./components/combobox-content";
+import { ComboboxEmpty } from "./components/combobox-empty";
+import { ComboboxOption } from "./components/combobox-option";
+import { ComboboxOverlay } from "./components/combobox-overlay";
+import { ComboboxPortal } from "./components/combobox-portal";
+import { ComboboxRoot } from "./components/combobox-root";
+import { ComboboxTrigger } from "./components/combobox-trigger";
+export declare const Combobox: {
+    Root: typeof ComboboxRoot;
+    Trigger: typeof ComboboxTrigger;
+    Portal: typeof ComboboxPortal;
+    Overlay: typeof ComboboxOverlay;
+    Content: typeof ComboboxContent;
+    Option: typeof ComboboxOption;
+    Empty: typeof ComboboxEmpty;
+};
+export type { ComboboxContentProps } from "./components/combobox-content";
+export type { ComboboxEmptyProps } from "./components/combobox-empty";
+export type { ComboboxOptionProps } from "./components/combobox-option";
+export type { ComboboxOverlayProps } from "./components/combobox-overlay";
+export type { ComboboxPortalProps } from "./components/combobox-portal";
+export type { ComboboxRootProps } from "./components/combobox-root";
+export type { ComboboxTriggerProps } from "./components/combobox-trigger";
+export type { ComboboxStyles } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/components/combobox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,eAAO,MAAM,QAAQ;;;;;;;;CAQpB,CAAC;AAEF,YAAY,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAC1E,YAAY,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACtE,YAAY,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,YAAY,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAC1E,YAAY,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAC1E,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}

package/dist/typescript/src/components/combobox/types.d.ts

@@ -0,0 +1,21 @@
+import type { TextInputProps, TextStyle } from "react-native";
+import type { ComboboxContentProps } from "./components/combobox-content";
+import type { ComboboxOverlayProps } from "./components/combobox-overlay";
+import type { ComboboxRootProps } from "./components/combobox-root";
+export type ComboboxState = "default" | "disabled";
+export type ComboboxTriggerState = ComboboxState | "focused";
+export type ComboboxOptionState = ComboboxState | "hovered" | "selected";
+export interface ComboboxStyles {
+    root?: Partial<Record<ComboboxState, ComboboxRootProps["style"]>>;
+    trigger?: Partial<Record<ComboboxTriggerState, TextInputProps>>;
+    overlay?: Partial<Record<ComboboxState, ComboboxOverlayProps["style"]>>;
+    content?: Partial<Record<ComboboxState, ComboboxContentProps["style"]>>;
+    option?: Partial<Record<ComboboxOptionState, TextStyle>>;
+    empty?: Partial<Record<ComboboxState, TextStyle>>;
+}
+export interface ComboboxOption {
+    value: string;
+    label: React.ReactNode;
+    keywords?: string[];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/typescript/src/components/combobox/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/combobox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;AACnD,MAAM,MAAM,oBAAoB,GAAG,aAAa,GAAG,SAAS,CAAC;AAC7D,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;AAEzE,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,oBAAoB,EAAE,cAAc,CAAC,CAAC,CAAC;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC,CAAC;IACzD,KAAK,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC;CACnD;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB"}

package/dist/typescript/src/components/combobox/variants/default.d.ts

@@ -0,0 +1,3 @@
+import { type ComboboxStyles } from "../types";
+export declare function useComboboxVariantDefault(): ComboboxStyles;
+//# sourceMappingURL=default.d.ts.map

package/dist/typescript/src/components/combobox/variants/default.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/variants/default.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,wBAAgB,yBAAyB,IAAI,cAAc,CAiG1D"}

package/dist/typescript/src/components/combobox/variants/index.d.ts

@@ -0,0 +1,5 @@
+import { useComboboxVariantDefault } from "./default";
+export declare const ComboboxVariants: {
+    default: typeof useComboboxVariantDefault;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/components/combobox/variants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/variants/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,WAAW,CAAC;AAEtD,eAAO,MAAM,gBAAgB;;CAE5B,CAAC"}

package/dist/typescript/src/components/index.d.ts

@@ -5,6 +5,7 @@ export * from "./badge";
 export * from "./button";
 export * from "./calendar";
 export * from "./card";
+export * from "./combobox";
 export * from "./checkbox";
 export * from "./empty";
 export * from "./field";

package/dist/typescript/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.65",
+  "version": "0.0.66",
   "license": "MIT",
   "repository": {
     "type": "git",

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>
+  );
+}

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

@@ -0,0 +1,96 @@
+import React, { useEffect, useRef } from "react";
+import { StyleSheet, TextInput, type TextInputProps } from "react-native";
+import type { TextInputRef } from "../../../types/element.types";
+import { measureLayoutPosition } from "../../../utils/normalize-layout";
+import { useCombobox } from "../context";
+import type { ComboboxTriggerState } from "../types";
+
+export interface ComboboxTriggerProps {
+  placeholder?: string;
+}
+
+const calculateState = (
+  isDisabled: boolean,
+  isOpen: boolean,
+): ComboboxTriggerState => {
+  if (isDisabled) return "disabled";
+  if (isOpen) return "focused";
+  return "default";
+};
+
+export function ComboboxTrigger(props: ComboboxTriggerProps) {
+  const combobox = useCombobox();
+  const triggerRef = useRef<TextInputRef>(null);
+
+  const triggerState = calculateState(combobox.isDisabled, combobox.isOpen);
+  const selectedOption = combobox.options.find(
+    (option) => option.value === combobox.value,
+  );
+
+  const displayValue = combobox.isOpen
+    ? combobox.searchQuery
+    : selectedOption
+      ? typeof selectedOption.label === "string"
+        ? selectedOption.label
+        : selectedOption.value
+      : "";
+
+  const open = () => {
+    if (combobox.isDisabled) return;
+    combobox.setSearchQuery("");
+    requestAnimationFrame(() => {
+      measureLayoutPosition(triggerRef.current, (layout) => {
+        combobox.setTriggerPosition(layout);
+        combobox.setIsOpen(true);
+      });
+    });
+  };
+
+  useEffect(() => {
+    triggerRef.current?.setNativeProps({ text: displayValue });
+  }, [displayValue]);
+
+  useEffect(() => {
+    if (!combobox.isOpen) {
+      triggerRef.current?.blur();
+    }
+  }, [combobox.isOpen]);
+
+  const triggerStyles = combobox.styles?.trigger;
+  const composedProps: TextInputProps = {
+    ...triggerStyles?.default,
+    ...triggerStyles?.[triggerState],
+    ...props,
+    style: StyleSheet.flatten([
+      triggerStyles?.default?.style,
+      triggerStyles?.[triggerState]?.style,
+    ]),
+  };
+
+  const composedStyle = StyleSheet.flatten([
+    triggerStyles?.default?.style,
+    triggerStyles?.[triggerState]?.style,
+  ]);
+
+  return (
+    <TextInput
+      {...composedProps}
+      ref={triggerRef}
+      value={undefined}
+      onChange={undefined}
+      onChangeText={(text) => {
+        if (combobox.isDisabled) return;
+        combobox.setSearchQuery(text);
+        if (!combobox.isOpen) {
+          open();
+        }
+      }}
+      onFocus={() => {
+        if (!combobox.isOpen) {
+          open();
+        }
+      }}
+      style={composedStyle}
+    />
+  );
+}