@korsolutions/ui 0.0.37 → 0.0.39

package/dist/typescript/src/primitives/select/context.d.ts

@@ -1,3 +1,4 @@
+import type { LayoutPosition } from "../../hooks";
 import { type Dispatch } from "react";
 import type { LayoutRectangle } from "react-native";
 import type { SelectOption, SelectState, SelectStyles } from "./types";
@@ -7,8 +8,10 @@ export interface SelectContext {
     placeholder?: string;
     isOpen: boolean;
     setIsOpen: Dispatch<React.SetStateAction<boolean>>;
-    triggerLayout: LayoutRectangle | null;
-    setTriggerLayout: Dispatch<React.SetStateAction<LayoutRectangle | null>>;
+    triggerPosition: LayoutPosition;
+    setTriggerPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
+    contentLayout: LayoutRectangle;
+    setContentLayout: Dispatch<React.SetStateAction<LayoutRectangle>>;
     options: Array<SelectOption>;
     setOptions: Dispatch<React.SetStateAction<Array<SelectOption>>>;
     isDisabled: boolean;

package/dist/typescript/src/primitives/select/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/select/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,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,aAAa,EAAE,eAAe,GAAG,IAAI,CAAC;IACtC,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC;IACzE,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC7B,UAAU,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAEhE,UAAU,EAAE,OAAO,CAAC;IAEpB,KAAK,EAAE,WAAW,CAAC;IACnB,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,oDAAsD,CAAC;AAEjF,eAAO,MAAM,SAAS,qBAMrB,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/select/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAiB,KAAK,QAAQ,EAAc,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,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,YAAY,CAAC,CAAC;IAC7B,UAAU,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAEhE,UAAU,EAAE,OAAO,CAAC;IAEpB,KAAK,EAAE,WAAW,CAAC;IACnB,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,oDAAsD,CAAC;AAEjF,eAAO,MAAM,SAAS,qBAMrB,CAAC"}

package/dist/typescript/src/primitives/select/select-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-content.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/select/select-content.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,KAAK,CAAC,YAAY,CAAC;IAE3D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAoBtD"}
+{"version":3,"file":"select-content.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/select/select-content.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,KAAK,CAAC,YAAY,CAAC;IAE3D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBA0BtD"}

package/dist/typescript/src/primitives/select/select-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-root.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/select/select-root.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAwB,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1F,OAAO,KAAK,EAA6B,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvE,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,YAAY,CAAC;IAEhE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AASD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBA6BhD"}
+{"version":3,"file":"select-root.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/select/select-root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAwB,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1F,OAAO,KAAK,EAA6B,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvE,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,YAAY,CAAC;IAEhE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AASD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAgChD"}

package/dist/typescript/src/primitives/select/select-trigger.d.ts

@@ -1,13 +1,8 @@
 import React from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
-interface SelectTriggerInjectionProps {
-    onPress?: () => void;
-}
 export interface SelectTriggerProps {
     children?: React.ReactNode;
     style?: StyleProp<ViewStyle>;
-    render?: (props: SelectTriggerInjectionProps) => React.ReactElement;
 }
 export declare function SelectTrigger(props: SelectTriggerProps): React.JSX.Element;
-export {};
 //# sourceMappingURL=select-trigger.d.ts.map

package/dist/typescript/src/primitives/select/select-trigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-trigger.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/select/select-trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzE,UAAU,2BAA2B;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,KAAK,CAAC,YAAY,CAAC;CACrE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAmBtD"}
+{"version":3,"file":"select-trigger.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/select/select-trigger.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAa,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzE,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAsBtD"}

package/dist/typescript/src/types/element.types.d.ts

@@ -1,4 +1,11 @@
-import type { TextInput, View } from "react-native";
-export type ViewRef = React.ComponentRef<View>;
-export type TextInputRef = React.ComponentRef<TextInput>;
+import type { HostInstance } from "react-native";
+export type ViewRef = HostInstance;
+export type TextInputRef = HostInstance & {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+    isFocused: () => boolean;
+    getNativeRef: () => HostInstance;
+    setSelection: (start: number, end?: number) => void;
+};
 //# sourceMappingURL=element.types.d.ts.map

package/dist/typescript/src/types/element.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"element.types.d.ts","sourceRoot":"","sources":["../../../../src/types/element.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,OAAO,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;AAC/C,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC"}
+{"version":3,"file":"element.types.d.ts","sourceRoot":"","sources":["../../../../src/types/element.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,OAAO,GAAG,YAAY,CAAC;AACnC,MAAM,MAAM,YAAY,GAAG,YAAY,GAAG;IACxC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,YAAY,EAAE,MAAM,YAAY,CAAC;IACjC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD,CAAC"}

package/dist/typescript/src/utils/normalize-layout.d.ts

@@ -1,8 +1,10 @@
-import type { LayoutRectangle } from "react-native";
+import type { LayoutPosition } from "../hooks";
+import type { HostInstance, LayoutRectangle } from "react-native";
 export declare const normalizeLayout: (layout: LayoutRectangle) => {
     x: number;
     y: number;
     width: number;
     height: number;
 };
+export declare const measureLayoutPosition: (ref: HostInstance | null, callback: (layout: LayoutPosition) => void) => void;
 //# sourceMappingURL=normalize-layout.d.ts.map

package/dist/typescript/src/utils/normalize-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"normalize-layout.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalize-layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,eAAO,MAAM,eAAe,GAAI,QAAQ,eAAe;;;;;CAUtD,CAAC"}
+{"version":3,"file":"normalize-layout.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalize-layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAElE,eAAO,MAAM,eAAe,GAAI,QAAQ,eAAe;;;;;CAUtD,CAAC;AAUF,eAAO,MAAM,qBAAqB,GAAI,KAAK,YAAY,GAAG,IAAI,EAAE,UAAU,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,SASzG,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,20 +35,23 @@
       "types": "./dist/typescript/src/primitives/index.d.ts"
     }
   },
+  "scripts": {
+    "prepare": "./scripts/build.sh",
+    "ts-check": "tsc --noEmit"
+  },
   "devDependencies": {
+    "@react-navigation/native": "^7.1.28",
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
     "babel-plugin-module-resolver": "^5.0.2",
     "react-native-builder-bob": "^0.40.17",
-    "tsc-alias": "^1.8.16"
+    "tsc-alias": "^1.8.16",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*",
     "react-native": "*",
     "react-native-web": "*"
-  },
-  "scripts": {
-    "ts-check": "tsc --noEmit"
   }
 }

package/scripts/build.sh

@@ -1,2 +1,2 @@
-bob build
-tsc-alias -p tsconfig.json --outDir dist/typescript
+bunx bob build
+bunx tsc-alias -p tsconfig.json --outDir dist/typescript

package/src/components/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,38 @@
+import { AlertDialogPrimitive } from "@/primitives";
+import type { PressableProps } from "react-native";
+import { AlertDialogVariants } from "./variants";
+
+interface AlertDialogProps {
+  trigger: React.ReactElement<PressableProps>;
+  title: string;
+  description: string;
+  actionLabel?: string;
+  cancelLabel?: string;
+  onAction?: () => void;
+  onCancel?: () => void;
+  variant?: keyof typeof AlertDialogVariants;
+}
+
+export function AlertDialog(props: AlertDialogProps) {
+  const { title, description, actionLabel = "Continue", cancelLabel = "Cancel", onAction, onCancel, variant = "default" } = props;
+
+  const useVariantStyles = AlertDialogVariants[variant];
+  const variantStyles = useVariantStyles();
+
+  return (
+    <AlertDialogPrimitive.Root styles={variantStyles}>
+      <AlertDialogPrimitive.Trigger>{props.trigger}</AlertDialogPrimitive.Trigger>
+      <AlertDialogPrimitive.Portal>
+        <AlertDialogPrimitive.Overlay />
+        <AlertDialogPrimitive.Content>
+          <AlertDialogPrimitive.Title>{title}</AlertDialogPrimitive.Title>
+          <AlertDialogPrimitive.Description>{description}</AlertDialogPrimitive.Description>
+          <AlertDialogPrimitive.Footer>
+            <AlertDialogPrimitive.Cancel onPress={onCancel}>{cancelLabel}</AlertDialogPrimitive.Cancel>
+            <AlertDialogPrimitive.Action onPress={onAction}>{actionLabel}</AlertDialogPrimitive.Action>
+          </AlertDialogPrimitive.Footer>
+        </AlertDialogPrimitive.Content>
+      </AlertDialogPrimitive.Portal>
+    </AlertDialogPrimitive.Root>
+  );
+}

package/src/components/alert-dialog/async-alert-dialog.tsx

@@ -0,0 +1,121 @@
+import { AlertDialogPrimitive } from "@/primitives";
+import React, { useEffect, useState } from "react";
+import { useAlertDialog } from "@/primitives/alert-dialog/context";
+import { AlertDialogVariants } from "./variants";
+
+interface AsyncAlertDialogProps {
+  title: string;
+  description: string;
+  actionLabel?: string;
+  cancelLabel?: string;
+  variant?: keyof typeof AlertDialogVariants;
+}
+
+interface AsyncAlertDialogResult {
+  confirmed: boolean;
+}
+
+interface AsyncAlertDialogInstance {
+  id: string;
+  resolve: (result: AsyncAlertDialogResult) => void;
+  props: AsyncAlertDialogProps;
+}
+
+// Global state
+const dialogQueue: AsyncAlertDialogInstance[] = [];
+let currentDialog: AsyncAlertDialogInstance | null = null;
+let setCurrentDialogFn: ((dialog: AsyncAlertDialogInstance | null) => void) | null = null;
+
+// Process next dialog in queue
+function processQueue() {
+  if (currentDialog || dialogQueue.length === 0) return;
+
+  currentDialog = dialogQueue.shift()!;
+  setCurrentDialogFn?.(currentDialog);
+}
+
+// Close current dialog
+function closeDialog(confirmed: boolean) {
+  if (!currentDialog) return;
+
+  currentDialog.resolve({ confirmed });
+  currentDialog = null;
+  setCurrentDialogFn?.(null);
+
+  // Process next in queue after a small delay
+  setTimeout(processQueue, 100);
+}
+
+// Inner component that has access to the dialog context
+function AsyncAlertDialogContent({ instance }: { instance: AsyncAlertDialogInstance }) {
+  const { title, description, actionLabel = "Continue", cancelLabel = "Cancel" } = instance.props;
+  const { setIsOpen } = useAlertDialog();
+
+  const handleAction = () => closeDialog(true);
+  const handleCancel = () => closeDialog(false);
+
+  // Automatically open the dialog when mounted
+  useEffect(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+
+  return (
+    <AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Overlay onPress={handleCancel} />
+      <AlertDialogPrimitive.Content>
+        <AlertDialogPrimitive.Title>{title}</AlertDialogPrimitive.Title>
+        <AlertDialogPrimitive.Description>{description}</AlertDialogPrimitive.Description>
+        <AlertDialogPrimitive.Footer>
+          <AlertDialogPrimitive.Cancel onPress={handleCancel}>{cancelLabel}</AlertDialogPrimitive.Cancel>
+          <AlertDialogPrimitive.Action onPress={handleAction}>{actionLabel}</AlertDialogPrimitive.Action>
+        </AlertDialogPrimitive.Footer>
+      </AlertDialogPrimitive.Content>
+    </AlertDialogPrimitive.Portal>
+  );
+}
+
+// Component that renders a single dialog instance
+function AsyncAlertDialogInstance({ instance }: { instance: AsyncAlertDialogInstance }) {
+  const { variant = "default" } = instance.props;
+
+  const useVariantStyles = AlertDialogVariants[variant];
+  const variantStyles = useVariantStyles();
+
+  return (
+    <AlertDialogPrimitive.Root styles={variantStyles}>
+      <AsyncAlertDialogContent instance={instance} />
+    </AlertDialogPrimitive.Root>
+  );
+}
+
+export function AsyncAlertDialogManager() {
+  const [dialog, setDialog] = useState<AsyncAlertDialogInstance | null>(null);
+
+  useEffect(() => {
+    setCurrentDialogFn = setDialog;
+    return () => {
+      setCurrentDialogFn = null;
+    };
+  }, []);
+
+  if (!dialog) return null;
+
+  return <AsyncAlertDialogInstance instance={dialog} />;
+}
+
+function show(props: AsyncAlertDialogProps): Promise<AsyncAlertDialogResult> {
+  return new Promise((resolve) => {
+    const instance: AsyncAlertDialogInstance = {
+      id: Date.now().toString(),
+      props,
+      resolve,
+    };
+
+    dialogQueue.push(instance);
+    processQueue();
+  });
+}
+
+export const AsyncAlertDialog = {
+  show,
+};

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

@@ -0,0 +1,3 @@
+export { AlertDialog } from "./alert-dialog";
+export { AlertDialogVariants } from "./variants";
+export { AsyncAlertDialog, AsyncAlertDialogManager } from "./async-alert-dialog";

package/src/components/alert-dialog/variants/default.tsx

@@ -0,0 +1,82 @@
+import { type AlertDialogStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export const useAlertDialogVariantDefault = (): AlertDialogStyles => {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): AlertDialogStyles => ({
+      overlay: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        justifyContent: "center",
+        alignItems: "center",
+      },
+      content: {
+        backgroundColor: colors.background,
+        borderRadius: radius,
+        padding: 24,
+        maxWidth: 400,
+        width: "90%",
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 8,
+        elevation: 5,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: [{ translateX: "-50%" }, { translateY: "-50%" }],
+        borderWidth: 1,
+        borderColor: colors.border,
+      },
+      title: {
+        fontSize: fontSize * 1.25,
+        fontWeight: "600",
+        color: colors.foreground,
+        fontFamily,
+        marginBottom: 8,
+      },
+      description: {
+        fontSize,
+        color: colors.mutedForeground,
+        fontFamily,
+        lineHeight: fontSize * 1.5,
+      },
+      footer: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        gap: 12,
+        marginTop: 24,
+      },
+      cancel: {
+        paddingVertical: 10,
+        paddingHorizontal: 16,
+        borderRadius: radius,
+        borderWidth: 1,
+        borderColor: colors.border,
+        backgroundColor: colors.background,
+      },
+      cancelText: {
+        color: colors.foreground,
+        fontSize,
+        fontWeight: "500",
+        fontFamily,
+      },
+      action: {
+        paddingVertical: 10,
+        paddingHorizontal: 16,
+        borderRadius: radius,
+        backgroundColor: colors.primary,
+      },
+      actionText: {
+        color: colors.primaryForeground,
+        fontSize,
+        fontWeight: "500",
+        fontFamily,
+      },
+    })
+  );
+};

package/src/components/alert-dialog/variants/index.ts

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

package/src/components/autocomplete/autocomplete.tsx

@@ -0,0 +1,34 @@
+import { AutocompletePrimitive, type AutocompleteOption, type AutocompleteRootBaseProps } from "@/primitives";
+import React from "react";
+import { AutocompleteVariants } from "./variants";
+
+export type { AutocompleteOption };
+
+export interface AutocompleteProps extends AutocompleteRootBaseProps {
+  options: AutocompleteOption[];
+  variant?: keyof typeof AutocompleteVariants;
+  emptyMessage?: string;
+}
+
+export function Autocomplete(props: AutocompleteProps) {
+  const { options, variant = "default", emptyMessage = "No results found", ...rootProps } = props;
+  const useVariantStyles = AutocompleteVariants[variant];
+  const variantStyles = useVariantStyles();
+
+  return (
+    <AutocompletePrimitive.Root {...rootProps} styles={variantStyles}>
+      <AutocompletePrimitive.Input />
+      <AutocompletePrimitive.Portal>
+        <AutocompletePrimitive.Overlay />
+        <AutocompletePrimitive.Content>
+          {options.map((option) => (
+            <AutocompletePrimitive.Option key={option.value} value={option.value}>
+              {option.label}
+            </AutocompletePrimitive.Option>
+          ))}
+          {!options.length && <AutocompletePrimitive.Empty>{emptyMessage}</AutocompletePrimitive.Empty>}
+        </AutocompletePrimitive.Content>
+      </AutocompletePrimitive.Portal>
+    </AutocompletePrimitive.Root>
+  );
+}

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

@@ -0,0 +1,84 @@
+import { type AutocompleteStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export function useAutocompleteVariantDefault(): AutocompleteStyles {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): AutocompleteStyles => ({
+      root: {
+        default: {},
+        focused: {},
+        disabled: {},
+      },
+      input: {
+        default: {
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius,
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          height: 48,
+          fontFamily,
+          fontSize,
+          color: colors.foreground,
+          backgroundColor: colors.background,
+        },
+        focused: {
+          borderColor: colors.primary,
+        },
+        disabled: {
+          backgroundColor: colors.muted,
+          color: colors.mutedForeground,
+        },
+      },
+      overlay: {
+        default: {},
+        focused: {},
+        disabled: {},
+      },
+      content: {
+        default: {
+          backgroundColor: colors.surface,
+          borderRadius: radius,
+          borderWidth: 1,
+          borderColor: colors.border,
+          padding: 4,
+          gap: 4,
+          maxHeight: 300,
+        },
+        focused: {},
+        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",
+        },
+        focused: {},
+        disabled: {},
+      },
+    })
+  );
+}

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

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

package/src/components/index.ts

@@ -3,6 +3,7 @@ export * from "./card/card";
 export * from "./input";
 export * from "./field/field";
 export * from "./select/select";
+export * from "./autocomplete/autocomplete";
 export * from "./typography/typography";
 export * from "./link/link";
 export * from "./empty/empty";
@@ -15,3 +16,4 @@ export * from "./popover/popover";
 export * from "./calendar/calendar";
 export * from "./tabs";
 export * from "./checkbox";
+export * from "./alert-dialog";

package/src/components/input/numeric-input.tsx

@@ -1,10 +1,10 @@
 import { useNumericMask, type NumericMaskFormat } from "@/hooks/use-numeric-mask";
-import { type InputPrimitiveBaseProps } from "@/primitives";
+import { InputPrimitive, type InputPrimitiveBaseProps } from "@/primitives";
 import React, { useEffect } from "react";
-import { Input } from "./input";
+import { InputVariants } from "./variants";
 
 export interface NumericInputProps extends Omit<InputPrimitiveBaseProps, "value" | "onChange" | "keyboardType"> {
-  variant?: "default";
+  variant?: keyof typeof InputVariants;
   value?: number | null;
   onChange?: (value: number | null) => void;
   format?: NumericMaskFormat;
@@ -42,7 +42,6 @@ export function NumericInput({
     onChange,
   });
 
-  // Sync external value changes with internal state
   useEffect(() => {
     if (value !== numericMask.numericValue) {
       numericMask.setValue(value ?? null);
@@ -59,15 +58,18 @@ export function NumericInput({
     onFocus?.(e);
   };
 
+  const useVariantStyles = InputVariants[variant];
+  const variantStyles = useVariantStyles();
+
   return (
-    <Input
+    <InputPrimitive
       {...props}
-      variant={variant}
       value={numericMask.value}
       onChange={numericMask.onChangeText}
       onBlur={handleBlur}
       onFocus={handleFocus}
       keyboardType={numericMask.keyboardType}
+      styles={variantStyles}
     />
   );
 }

package/src/index.tsx

@@ -1,4 +1,5 @@
 import { ThemeProvider } from "@/themes";
+import { AsyncAlertDialogManager } from "./components/alert-dialog/async-alert-dialog";
 import { ToastContainer } from "./components/toast/toast-manager";
 import { PortalHost } from "./primitives/portal";
 import { type PortalHostProps } from "./primitives/portal/portal.constants";
@@ -15,6 +16,7 @@ export const UniversalUIProvider = ({ children, portalContainer }: ProviderProps
       <ToastContainer />
       {children}
       <PortalHost container={portalContainer} />
+      <AsyncAlertDialogManager />
     </ThemeProvider>
   );
 };

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { Pressable, Text, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+import { useAlertDialog } from "./context";
+
+export interface AlertDialogPrimitiveActionProps extends PressableProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AlertDialogAction(props: AlertDialogPrimitiveActionProps) {
+  const { children, style, onPress, ...pressableProps } = props;
+  const { styles, setIsOpen } = useAlertDialog();
+
+  const handlePress: PressableProps["onPress"] = (event) => {
+    onPress?.(event);
+    setIsOpen(false);
+  };
+
+  const calculatedStyle = [styles?.action, style];
+  const textStyle = styles?.actionText;
+
+  return (
+    <Pressable {...pressableProps} style={calculatedStyle} onPress={handlePress}>
+      <Text style={textStyle}>{children}</Text>
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { Pressable, Text, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+import { useAlertDialog } from "./context";
+
+export interface AlertDialogPrimitiveCancelProps extends PressableProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AlertDialogCancel(props: AlertDialogPrimitiveCancelProps) {
+  const { children, style, onPress, ...pressableProps } = props;
+  const { styles, setIsOpen } = useAlertDialog();
+
+  const handlePress: PressableProps["onPress"] = (event) => {
+    onPress?.(event);
+    setIsOpen(false);
+  };
+
+  const calculatedStyle = [styles?.cancel, style];
+  const textStyle = styles?.cancelText;
+
+  return (
+    <Pressable {...pressableProps} style={calculatedStyle} onPress={handlePress}>
+      <Text style={textStyle}>{children}</Text>
+    </Pressable>
+  );
+}