@korsolutions/ui 0.0.1

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@korsolutions/ui",
+  "version": "0.0.1",
+  "private": false,
+  "main": "index.ts",
+  "types": "index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {
+    "ts-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-reanimated": "4.x",
+    "react-native-web": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.3"
+  }
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from "./primitives/provider";
+
+export * from "./primitives/field";
+export * from "./primitives/input";
+export * from "./primitives/button";
+export * from "./primitives/select";

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

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

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { StyleProp, Text, TextStyle } from "react-native";
+import { useButton } from "./button-context";
+
+export interface ButtonLabelProps {
+  children?: string;
+
+  render?: (props: this) => React.ReactElement;
+
+  style?: StyleProp<TextStyle>;
+}
+
+export function ButtonLabel(props: ButtonLabelProps) {
+  const button = useButton();
+  const calculatedStyle = [button.styles?.label?.default, button.styles?.label?.[button.state], props.style];
+
+  const Component = props.render ?? Text;
+  return <Component style={calculatedStyle}>{props.children}</Component>;
+}

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { Pressable, StyleProp, ViewStyle } from "react-native";
+import { ButtonStyles, ButtonState } from "./types";
+import { ButtonContext } from "./button-context";
+
+export interface ButtonRootProps {
+  children?: React.ReactNode;
+
+  onPress?: () => void;
+
+  disabled?: boolean;
+
+  style?: StyleProp<ViewStyle>;
+  styles?: ButtonStyles;
+
+  render?: (props: this) => React.ReactElement;
+}
+
+const calculateState = (props: ButtonRootProps): ButtonState => {
+  if (props.disabled) {
+    return "disabled";
+  }
+  return "default";
+};
+
+export function ButtonRoot(props: ButtonRootProps) {
+  const state = calculateState(props);
+
+  const calculatedStyle = [props.styles?.root?.default, props.styles?.root?.[state], props.style];
+
+  const Container = props.render ?? Pressable;
+  return (
+    <ButtonContext.Provider value={{ disabled: props.disabled, state, styles: props.styles }}>
+      <Container {...props} style={calculatedStyle} />
+    </ButtonContext.Provider>
+  );
+}

package/src/primitives/button/index.ts

@@ -0,0 +1,11 @@
+import { ButtonRoot } from "./button-root";
+import { ButtonLabel } from "./button-label";
+
+export const Button = {
+  Root: ButtonRoot,
+  Label: ButtonLabel,
+};
+
+export type { ButtonRootProps } from "./button-root";
+export type { ButtonLabelProps } from "./button-label";
+export * from "./types";

package/src/primitives/button/types.ts

@@ -0,0 +1,9 @@
+import { ButtonRootProps } from "./button-root";
+import { ButtonLabelProps } from "./button-label";
+
+export type ButtonState = "default" | "disabled";
+
+export interface ButtonStyles {
+  root?: Partial<Record<ButtonState, ButtonRootProps["style"]>>;
+  label?: Partial<Record<ButtonState, ButtonLabelProps["style"]>>;
+}

package/src/primitives/field/context.ts

@@ -0,0 +1,30 @@
+import { createContext, useContext } from "react";
+import { FieldState, FieldStyles } from "./types";
+
+export interface FieldContext {
+  value: string | null;
+  onChange?: (value: string) => void;
+
+  focused: boolean;
+  setFocused: React.Dispatch<React.SetStateAction<boolean>>;
+
+  hovered: boolean;
+  setHovered: React.Dispatch<React.SetStateAction<boolean>>;
+
+  disabled?: boolean;
+  required?: boolean;
+  error?: string | null;
+
+  state: FieldState;
+  styles?: FieldStyles<unknown>;
+}
+
+export const FieldContext = createContext<FieldContext | undefined>(undefined);
+
+export const useField = () => {
+  const context = useContext(FieldContext);
+  if (!context) {
+    throw new Error("useField must be used within a FieldProvider");
+  }
+  return context;
+};

package/src/primitives/field/field-control.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { useField } from "./context";
+import { StyleProp, TextStyle } from "react-native";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+
+interface FieldControlInjectedProps<Style> {
+  value?: string;
+  onChange?: (value: string) => void;
+
+  onFocus?: () => void;
+  onBlur?: () => void;
+
+  style?: StyleProp<Style>;
+}
+
+export interface FieldControlProps<Style = TextStyle> {
+  style?: StyleProp<Style>;
+  render: (props: FieldControlInjectedProps<Style>) => React.ReactElement;
+}
+
+export function FieldControl<Style = TextStyle>(props: FieldControlProps<Style>) {
+  const { value, onChange, setFocused, ...field } = useField();
+
+  const calculatedStyle = calculateComposedStyles(field.styles, field.state, "control", props.style) as StyleProp<Style>;
+
+  const Component = props.render;
+  return <Component value={value} onChange={onChange} onBlur={() => setFocused(false)} onFocus={() => setFocused(true)} style={calculatedStyle} />;
+}

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { useField } from "./context";
+import Animated from "react-native-reanimated";
+
+export interface FieldLabelProps {
+  children: string;
+  style?: React.ComponentProps<typeof Animated.Text>["style"];
+  render?: (props: FieldLabelProps) => React.ReactNode;
+}
+
+export function FieldLabel(props: FieldLabelProps) {
+  const field = useField();
+  const calculatedStyle = [field.styles?.label?.default, field.styles?.label?.[field.state], props.style];
+
+  return props.render ? props.render(props) : <Animated.Text style={calculatedStyle}>{props.children}</Animated.Text>;
+}

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

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { Pressable, StyleProp, View, ViewStyle } from "react-native";
+import { FieldContext } from "./context";
+import { FieldState, FieldStyles } from "./types";
+
+export interface FieldRootProps {
+  value?: string | null;
+  onChange?: (value: string) => void;
+
+  required?: boolean;
+  disabled?: boolean;
+  error?: string | null;
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+
+  styles?: FieldStyles<unknown>;
+}
+
+const calculateState = (props: FieldRootProps, focused: boolean, hovered: boolean): FieldState => {
+  if (props.disabled) {
+    return "disabled";
+  }
+  if (props.error) {
+    return "error";
+  }
+  if (focused) {
+    return "focused";
+  }
+  if (hovered) {
+    return "hovered";
+  }
+
+  return "default";
+};
+
+export function FieldRoot(props: FieldRootProps) {
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+
+  const state = calculateState(props, focused, hovered);
+
+  const calculatedStyle = [props.styles?.root?.default, props.styles?.root?.[state], props.style];
+
+  return (
+    <FieldContext.Provider
+      value={{
+        value: props.value ?? null,
+        onChange: props.onChange,
+
+        focused,
+        setFocused,
+
+        hovered,
+        setHovered,
+
+        required: props.required,
+        disabled: props.disabled,
+        error: props.error ?? null,
+
+        state: state,
+        styles: props.styles,
+      }}
+    >
+      <Pressable onHoverIn={() => setHovered(true)} onHoverOut={() => setHovered(false)} style={calculatedStyle}>
+        {props.children}
+      </Pressable>
+    </FieldContext.Provider>
+  );
+}

package/src/primitives/field/index.ts

@@ -0,0 +1,14 @@
+import { FieldRoot } from "./field-root";
+import { FieldLabel } from "./field-label";
+import { FieldControl } from "./field-control";
+
+export const Field = {
+  Root: FieldRoot,
+  Label: FieldLabel,
+  Control: FieldControl,
+};
+
+export type { FieldRootProps } from "./field-root";
+export type { FieldLabelProps } from "./field-label";
+export type { FieldControlProps } from "./field-control";
+export * from "./types";

package/src/primitives/field/types.ts

@@ -0,0 +1,10 @@
+import { FieldLabelProps } from "./field-label";
+import { FieldRootProps } from "./field-root";
+
+export type FieldState = "default" | "disabled" | "error" | "focused" | "hovered";
+
+export interface FieldStyles<TControlStyle> {
+  root?: Partial<Record<FieldState, FieldRootProps["style"]>>;
+  label?: Partial<Record<FieldState, FieldLabelProps["style"]>>;
+  control?: Partial<Record<FieldState, TControlStyle>>;
+}

package/src/primitives/input/index.ts

@@ -0,0 +1 @@
+export * from "./input";

package/src/primitives/input/input.tsx

@@ -0,0 +1,16 @@
+import { TextInput, TextInputProps } from "react-native";
+
+export interface InputProps {
+  defaultValue?: TextInputProps["defaultValue"];
+  value?: TextInputProps["value"];
+  onChange?: TextInputProps["onChangeText"];
+
+  onFocus?: TextInputProps["onFocus"];
+  onBlur?: TextInputProps["onBlur"];
+
+  style?: TextInputProps["style"];
+}
+
+export function Input(props: InputProps) {
+  return <TextInput {...props} onChange={undefined} onChangeText={props.onChange} />;
+}

package/src/primitives/portal/index.ts

@@ -0,0 +1 @@
+export * from "./portal";

package/src/primitives/portal/portal.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Platform, type View, type ViewStyle } from "react-native";
+
+const DEFAULT_PORTAL_HOST = "KOR_NATIVE_DEFAULT_HOST_NAME";
+
+type PortalMap = Map<string, React.ReactNode>;
+type PortalHostMap = Map<string, PortalMap>;
+
+type PortalStore = {
+  map: PortalHostMap;
+  listeners: Set<() => void>;
+};
+
+const store: PortalStore = {
+  map: new Map<string, PortalMap>().set(DEFAULT_PORTAL_HOST, new Map<string, React.ReactNode>()),
+  listeners: new Set(),
+};
+
+function emit() {
+  for (const cb of store.listeners) cb();
+}
+
+function getSnapshot() {
+  return store.map;
+}
+
+function subscribe(cb: () => void) {
+  store.listeners.add(cb);
+  return () => {
+    store.listeners.delete(cb);
+  };
+}
+
+function updatePortal(hostName: string, name: string, children: React.ReactNode) {
+  const next = new Map(store.map);
+  const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
+  portal.set(name, children);
+  next.set(hostName, portal);
+  store.map = next;
+  emit();
+}
+
+function removePortal(hostName: string, name: string) {
+  const next = new Map(store.map);
+  const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
+  portal.delete(name);
+  next.set(hostName, portal);
+  store.map = next;
+  emit();
+}
+
+export function PortalHost({ name = DEFAULT_PORTAL_HOST }: { name?: string }) {
+  const map = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const portalMap = map.get(name) ?? new Map<string, React.ReactNode>();
+  if (portalMap.size === 0) return null;
+  return <>{Array.from(portalMap.values())}</>;
+}
+
+export function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }: { name: string; hostName?: string; children: React.ReactNode }) {
+  useEffect(() => {
+    updatePortal(hostName, name, children);
+  }, [hostName, name, children]);
+
+  useEffect(() => {
+    return () => {
+      removePortal(hostName, name);
+    };
+  }, [hostName, name]);
+
+  return null;
+}
+
+const ROOT: ViewStyle = {
+  flex: 1,
+};
+
+export function useModalPortalRoot() {
+  const ref = useRef<View>(null);
+  const [offset, setSideOffSet] = useState(0);
+
+  const onLayout = useCallback(() => {
+    if (Platform.OS === "web") return;
+    ref.current?.measure((_x, _y, _width, _height, _pageX, pageY) => {
+      setSideOffSet(-pageY);
+    });
+  }, []);
+
+  return {
+    ref,
+    offset,
+    onLayout,
+    style: ROOT,
+  };
+}

package/src/primitives/provider.tsx

@@ -0,0 +1,10 @@
+import { PortalHost } from "./portal";
+
+export const UniversalUIProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      {children}
+      <PortalHost />
+    </>
+  );
+};

package/src/primitives/select/context.ts

@@ -0,0 +1,31 @@
+import { createContext, Dispatch, useContext } from "react";
+import { SelectOption, SelectState, SelectStyles } from "./types";
+import { LayoutRectangle } from "react-native";
+
+export interface SelectContext {
+  value: string | null;
+  onChange?: (value: string) => void;
+  placeholder: string | null;
+
+  isOpen: boolean;
+  setIsOpen: Dispatch<React.SetStateAction<boolean>>;
+  triggerLayout: LayoutRectangle | null;
+  setTriggerLayout: Dispatch<React.SetStateAction<LayoutRectangle | null>>;
+  options: Array<SelectOption>;
+  setOptions: Dispatch<React.SetStateAction<Array<SelectOption>>>;
+
+  disabled: boolean;
+
+  state: SelectState;
+  styles: SelectStyles | null;
+}
+
+export const SelectContext = createContext<SelectContext | undefined>(undefined);
+
+export const useSelect = () => {
+  const context = useContext(SelectContext);
+  if (!context) {
+    throw new Error("useSelect must be used within a SelectProvider");
+  }
+  return context;
+};

package/src/primitives/select/index.ts

@@ -0,0 +1,26 @@
+import { SelectRoot } from "./select-root";
+import { SelectTrigger } from "./select-trigger";
+import { SelectValue } from "./select-value";
+import { SelectPortal } from "./select-portal";
+import { SelectOverlay } from "./select-overlay";
+import { SelectContent } from "./select-content";
+import { SelectOption } from "./select-option";
+
+export const Select = {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Portal: SelectPortal,
+  Overlay: SelectOverlay,
+  Content: SelectContent,
+  Option: SelectOption,
+};
+
+export type { SelectRootProps } from "./select-root";
+export type { SelectTriggerProps } from "./select-trigger";
+export type { SelectValueProps } from "./select-value";
+export type { SelectPortalProps } from "./select-portal";
+export type { SelectOverlayProps } from "./select-overlay";
+export type { SelectContentProps } from "./select-content";
+export type { SelectOptionProps } from "./select-option";
+export type { SelectStyles } from "./types";

package/src/primitives/select/select-content.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { useSelect } from "./context";
+
+export interface SelectContentProps {
+  children?: React.ReactNode;
+
+  render?: (props: SelectContentProps) => React.ReactElement;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SelectContent(props: SelectContentProps) {
+  const select = useSelect();
+  const composedStyles = calculateComposedStyles(select.styles, select.state, "content", props.style);
+
+  const Component = props.render ?? View;
+  return (
+    <Component
+      style={[
+        composedStyles,
+        {
+          position: "absolute",
+          top: select.triggerLayout?.y! + select.triggerLayout?.height!,
+          left: select.triggerLayout?.x!,
+          width: select.triggerLayout?.width!,
+        },
+      ]}
+    >
+      {props.children}
+    </Component>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { StyleProp, Text, TextStyle } from "react-native";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { useSelect } from "./context";
+import { useEffect } from "react";
+
+export interface SelectOptionProps {
+  children: string;
+  value: string;
+
+  style?: StyleProp<TextStyle>;
+
+  render?: (props: SelectOptionProps) => React.ReactElement;
+}
+
+export function SelectOption(props: SelectOptionProps) {
+  const select = useSelect();
+  const composedStyles = calculateComposedStyles(select.styles, select.state, "option", props.style);
+
+  useEffect(() => {
+    select.setOptions((prev) => {
+      if (prev.find((option) => option.value === props.value)) {
+        return prev;
+      }
+      return [...prev, { value: props.value, label: props.children }];
+    });
+  }, [props.value, props.children]);
+
+  const Component = props.render ?? Text;
+  return (
+    <Component
+      value={props.value}
+      onPress={() => {
+        select.onChange?.(props.value);
+        select.setIsOpen(false);
+      }}
+      style={composedStyles}
+    >
+      {props.children}
+    </Component>
+  );
+}

package/src/primitives/select/select-overlay.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { useSelect } from "./context";
+import { Pressable, StyleProp, StyleSheet, ViewStyle } from "react-native";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+
+export interface SelectOverlayProps {
+  children?: React.ReactNode;
+
+  onPress?: () => void;
+
+  style?: StyleProp<ViewStyle>;
+
+  render?: (props: SelectOverlayProps) => React.ReactElement;
+}
+
+export function SelectOverlay(props: SelectOverlayProps) {
+  const select = useSelect();
+
+  const composedStyles = calculateComposedStyles(select.styles, select.state, "overlay", props.style);
+
+  const Component = props.render ?? Pressable;
+  return (
+    <Component
+      onPress={() => {
+        select.setIsOpen(false);
+      }}
+      style={[StyleSheet.absoluteFill, composedStyles]}
+    >
+      {props.children}
+    </Component>
+  );
+}

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

@@ -0,0 +1,27 @@
+import React, { useEffect } from "react";
+import { Portal } from "../portal";
+import { useSelect, SelectContext } from "./context";
+
+export interface SelectPortalProps {
+  children?: React.ReactNode;
+}
+
+export function SelectPortal(props: SelectPortalProps) {
+  const select = useSelect();
+
+  useEffect(() => {
+    return () => {
+      select.setOptions([]);
+    };
+  }, []);
+
+  if (!select.isOpen) {
+    return null;
+  }
+
+  return (
+    <Portal name="select-portal">
+      <SelectContext.Provider value={select}>{props.children}</SelectContext.Provider>
+    </Portal>
+  );
+}

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

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { LayoutRectangle, StyleProp, View, ViewStyle } from "react-native";
+import { SelectContext } from "./context";
+import { SelectOption, SelectState, SelectStyles } from "./types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+
+export interface SelectRootProps {
+  children?: React.ReactNode;
+
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+
+  disabled?: boolean;
+
+  render?: (props: SelectRootProps) => React.ReactElement;
+
+  styles?: SelectStyles;
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (props: SelectRootProps): SelectState => {
+  if (props.disabled) {
+    return "disabled";
+  }
+  return "default";
+};
+
+export function SelectRoot(props: SelectRootProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [triggerLayout, setTriggerLayout] = useState<LayoutRectangle | null>(null);
+  const [options, setOptions] = useState<Array<SelectOption>>([]);
+
+  const state = calculateState(props);
+  const composedStyles = calculateComposedStyles(props.styles, state, "root", props.style);
+
+  const Component = props.render ?? View;
+  return (
+    <SelectContext.Provider
+      value={{
+        value: props.value ?? null,
+        onChange: props.onChange,
+        placeholder: props.placeholder ?? null,
+        isOpen,
+        setIsOpen,
+        triggerLayout,
+        setTriggerLayout,
+        options,
+        setOptions,
+        state,
+        disabled: props.disabled ?? false,
+        styles: props.styles ?? null,
+      }}
+    >
+      <Component style={composedStyles}>{props.children}</Component>
+    </SelectContext.Provider>
+  );
+}

package/src/primitives/select/select-trigger.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Pressable, StyleProp, ViewStyle } from "react-native";
+import { useSelect } from "./context";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { normalizeLayout } from "../../utils/normalize-layout";
+
+interface SelectTriggerInjectionProps {
+  onPress?: () => void;
+}
+
+export interface SelectTriggerProps {
+  children?: React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+
+  render?: (props: SelectTriggerInjectionProps) => React.ReactElement;
+}
+
+export function SelectTrigger(props: SelectTriggerProps) {
+  const select = useSelect();
+  const composedStyles = calculateComposedStyles(select.styles, select.state, "trigger", props.style);
+  const Component = props.render ?? Pressable;
+  return (
+    <Component
+      onPress={() => {
+        select.setIsOpen((prev) => !prev);
+      }}
+      onLayout={(e) => {
+        const layout = normalizeLayout(e.nativeEvent.layout);
+        select.setTriggerLayout(layout);
+      }}
+      style={composedStyles}
+    >
+      {props.children}
+    </Component>
+  );
+}

package/src/primitives/select/select-value.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { StyleProp, Text, TextStyle } from "react-native";
+import { useSelect } from "./context";
+
+export interface SelectValueProps {
+  style?: StyleProp<TextStyle>;
+
+  render?: (props: SelectValueProps) => React.ReactElement;
+}
+
+export function SelectValue(props: SelectValueProps) {
+  const select = useSelect();
+
+  const selectedOption = select.options.find((option) => option.value === select.value);
+
+  const Component = props.render ?? Text;
+  return <Component style={props.style}>{selectedOption?.label ?? select.placeholder}</Component>;
+}

package/src/primitives/select/types.ts

@@ -0,0 +1,22 @@
+import { SelectRootProps } from "./select-root";
+import { SelectTriggerProps } from "./select-trigger";
+import { SelectValueProps } from "./select-value";
+import { SelectOverlayProps } from "./select-overlay";
+import { SelectContentProps } from "./select-content";
+import { SelectOptionProps } from "./select-option";
+
+export type SelectState = "default" | "disabled";
+
+export interface SelectStyles {
+  root?: Partial<Record<SelectState, SelectRootProps["style"]>>;
+  trigger?: Partial<Record<SelectState, SelectTriggerProps["style"]>>;
+  value?: Partial<Record<SelectState, SelectValueProps["style"]>>;
+  overlay?: Partial<Record<SelectState, SelectOverlayProps["style"]>>;
+  content?: Partial<Record<SelectState, SelectContentProps["style"]>>;
+  option?: Partial<Record<SelectState, SelectOptionProps["style"]>>;
+}
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}

package/src/utils/calculate-styles.ts

@@ -0,0 +1,19 @@
+export const calculateComposedStyles = <TStyle, State extends string | "default", Component extends string>(
+  styles: Partial<Record<Component, Partial<Record<State, TStyle>>>> | null = {},
+  state: State,
+  component: Component,
+  style?: TStyle
+): TStyle[] => {
+  const result: TStyle[] = [];
+  const componentStyles = styles?.[component];
+  if (componentStyles && "default" in componentStyles && componentStyles["default"]) {
+    result.push(componentStyles["default"] as TStyle);
+  }
+  if (componentStyles?.[state]) {
+    result.push(componentStyles[state]);
+  }
+  if (style) {
+    result.push(style);
+  }
+  return result;
+};

package/src/utils/normalize-layout.ts

@@ -0,0 +1,11 @@
+import { LayoutRectangle } from "react-native";
+export const normalizeLayout = (layout: LayoutRectangle) => {
+  // Web layout doesn't provide x/y, but left/top
+  if (!layout.y && "top" in layout && typeof layout.top === "number") {
+    layout.y = layout.top;
+  }
+  if (!layout.x && "left" in layout && typeof layout.left === "number") {
+    layout.x = layout.left;
+  }
+  return layout;
+};

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "expo/tsconfig.base",
+  "include": ["src/**/*"]
+}