@korsolutions/ui 0.0.65 → 0.0.67

package/src/components/combobox/context.ts

@@ -0,0 +1,40 @@
+import { createContext, type Dispatch, useContext } 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 const ComboboxContext = createContext<ComboboxContext | undefined>(
+  undefined,
+);
+
+export const useCombobox = () => {
+  const context = useContext(ComboboxContext);
+  if (!context) {
+    throw new Error("useCombobox must be used within a ComboboxProvider");
+  }
+  return context;
+};

package/src/components/combobox/index.ts

@@ -0,0 +1,26 @@
+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 const Combobox = {
+  Root: ComboboxRoot,
+  Trigger: ComboboxTrigger,
+  Portal: ComboboxPortal,
+  Overlay: ComboboxOverlay,
+  Content: ComboboxContent,
+  Option: ComboboxOption,
+  Empty: 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";

package/src/components/combobox/types.ts

@@ -0,0 +1,23 @@
+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[];
+}

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

@@ -0,0 +1,102 @@
+import { Platform } from "react-native";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import { type ComboboxStyles } from "../types";
+
+export function useComboboxVariantDefault(): ComboboxStyles {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): ComboboxStyles => ({
+      root: {
+        default: {},
+        disabled: {},
+      },
+      trigger: {
+        default: {
+          placeholderTextColor: colors.mutedForeground,
+          editable: true,
+          style: {
+            borderWidth: 1,
+            borderColor: colors.border,
+            borderRadius: radius,
+            backgroundColor: colors.surface,
+            justifyContent: "center",
+            paddingVertical: 4,
+            paddingHorizontal: 16,
+            minHeight: 48,
+            fontFamily,
+            fontSize,
+            color: colors.foreground,
+            outlineWidth: 0,
+            pointerEvents: "auto",
+            ...Platform.select({
+              web: {
+                outline: "none",
+              },
+            }),
+          },
+        },
+        focused: {
+          style: {
+            borderColor: colors.primary,
+          },
+        },
+        disabled: {
+          editable: false,
+          style: {
+            backgroundColor: colors.muted,
+            color: colors.mutedForeground,
+            pointerEvents: "none",
+          },
+        },
+      },
+      overlay: {
+        default: {
+          zIndex: 999,
+        },
+        disabled: {},
+      },
+      content: {
+        default: {
+          backgroundColor: colors.surface,
+          borderRadius: radius,
+          borderWidth: 1,
+          borderColor: colors.border,
+          padding: 4,
+          gap: 4,
+          zIndex: 1000,
+          maxHeight: 256,
+        },
+        disabled: {},
+      },
+      option: {
+        default: {
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          fontFamily,
+          fontSize,
+          color: colors.foreground,
+          borderRadius: radius / 2,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+        selected: {
+          backgroundColor: colors.muted,
+        },
+        hovered: {
+          backgroundColor: colors.muted,
+        },
+      },
+      empty: {
+        default: {
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          fontFamily,
+          fontSize,
+          color: colors.mutedForeground,
+          textAlign: "center",
+        },
+        disabled: {},
+      },
+    }),
+  );
+}

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

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

package/src/components/index.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";