@korsolutions/ui 0.0.63 → 0.0.65

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

@@ -44,7 +44,9 @@ export function useSelectVariantDefault(): SelectStyles {
         },
       },
       overlay: {
-        default: {},
+        default: {
+          zIndex: 999,
+        },
         disabled: {},
       },
       content: {
@@ -55,6 +57,7 @@ export function useSelectVariantDefault(): SelectStyles {
           borderColor: colors.border,
           padding: 4,
           gap: 4,
+          zIndex: 1000,
         },
         disabled: {},
       },

package/src/hooks/use-is-react-navigation-modal.ts

@@ -0,0 +1,56 @@
+import { useEffect, useMemo } from "react";
+
+type NavigationContainerRef =
+  import("@react-navigation/native").NavigationContainerRefWithCurrent<ReactNavigation.RootParamList>;
+
+let useCachedNavigationContainerRef: (() => NavigationContainerRef) | null =
+  null;
+
+export function useInitializeNavigationContainerRef() {
+  useEffect(() => {
+    try {
+      const expoRouter = require("expo-router");
+      if (expoRouter) {
+        useCachedNavigationContainerRef = expoRouter.useNavigationContainerRef;
+        return;
+      }
+      const reactNavigation = require("@react-navigation/native");
+      if (reactNavigation) {
+        useCachedNavigationContainerRef =
+          reactNavigation.useNavigationContainerRef;
+      }
+    } catch (error) {
+      console.warn(
+        "[useIsReactNavigationModal] Failed to load navigation ref:",
+        error,
+      );
+    }
+  }, []);
+}
+
+const getIsModal = () => {
+  const useNavigationContainerRef = useCachedNavigationContainerRef;
+
+  if (!useNavigationContainerRef) {
+    return false;
+  }
+
+  const navigationRef = useNavigationContainerRef();
+  if (!navigationRef) {
+    return false;
+  }
+  const state = navigationRef.getCurrentOptions();
+  if (
+    state &&
+    "presentation" in state &&
+    typeof state.presentation === "string"
+  ) {
+    return state.presentation === "modal";
+  }
+  return false;
+};
+
+export function useIsReactNavigationModal() {
+  const isModal = useMemo(getIsModal, []);
+  return isModal;
+}

package/src/hooks/use-organized-children.tsx

@@ -6,7 +6,7 @@ import { getElementProp } from "../utils/element-utils";
 export function useOrganizedChildren(
   children: React.ReactNode,
   textStyle: StyleProp<TextStyle> | undefined,
-  iconProps: IconProps | undefined,
+  iconProps: IconProps | undefined | null,
 ): React.ReactNode {
   const organizedChildren = useMemo(() => {
     if (typeof children === "string") {

package/src/hooks/use-relative-position.ts

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import {
+  Platform,
   useWindowDimensions,
   type DisplayMetrics,
   type LayoutRectangle,
@@ -7,12 +8,17 @@ import {
 } from "react-native";
 import { usePortalOffset } from "../components/portal";
 import { useSafeAreaInsets, type SafeAreaInsets } from "../safe-area";
+import { useIsReactNavigationModal } from "./use-is-react-navigation-modal";
 
 type UseRelativePositionArgs = Omit<
   GetContentStyleArgs,
   "dimensions" | "insets"
 >;
 
+type GetContentStyleArgs = GetPositionArgs &
+  GetSidePositionArgs &
+  GetAlignPositionArgs;
+
 export function useRelativePosition({
   align,
   triggerPosition,
@@ -25,6 +31,8 @@ export function useRelativePosition({
   const insets = useSafeAreaInsets();
   const portalOffset = usePortalOffset();
 
+  const isReactNavigationModal = useIsReactNavigationModal();
+
   return useMemo(() => {
     const hasLayout =
       triggerPosition.width > 0 &&
@@ -53,7 +61,7 @@ export function useRelativePosition({
       pageY: triggerPosition.pageY - portalOffset.value.y,
     };
 
-    const style = getContentStyle({
+    const args: GetContentStyleArgs = {
       align,
       contentLayout,
       preferredSide,
@@ -62,7 +70,23 @@ export function useRelativePosition({
       insets,
       sideOffset,
       dimensions,
-    });
+    };
+
+    const sidePosition = getSidePosition(args);
+    const alignPosition = getAlignPosition(args);
+
+    const style: ViewStyle = {
+      position: "absolute",
+      ...sidePosition,
+      ...alignPosition,
+      // Temporary fix to calculate portal content relative position correctly when rendered in a React Navigation modal.
+      top: Platform.select({
+        default: sidePosition.top,
+        ios: isReactNavigationModal
+          ? sidePosition.top + insets.top
+          : sidePosition.top,
+      }),
+    };
 
     return style;
   }, [
@@ -76,6 +100,7 @@ export function useRelativePosition({
     dimensions.height,
     sideOffset,
     portalOffset,
+    isReactNavigationModal,
   ]);
 }
 
@@ -181,11 +206,13 @@ function getSidePosition({
     };
   }
 
+  let top = Math.min(
+    dimensions.height - insets.bottom - contentLayout.height,
+    positionBottom,
+  );
+
   return {
-    top: Math.min(
-      dimensions.height - insets.bottom - contentLayout.height,
-      positionBottom,
-    ),
+    top,
   };
 }
 
@@ -265,15 +292,3 @@ function getLeftPosition(
     ),
   );
 }
-
-type GetContentStyleArgs = GetPositionArgs &
-  GetSidePositionArgs &
-  GetAlignPositionArgs;
-
-function getContentStyle(args: GetContentStyleArgs): ViewStyle {
-  return {
-    position: "absolute",
-    ...getSidePosition(args),
-    ...getAlignPosition(args),
-  };
-}

package/src/index.tsx

@@ -2,6 +2,7 @@ import { AsyncAlertDialogManager } from "./components/alert-dialog/async-alert-d
 import { PortalHost } from "./components/portal";
 import { type PortalHostProps } from "./components/portal/portal.constants";
 import { ToastContainer } from "./components/toast/manager";
+import { useInitializeNavigationContainerRef } from "./hooks/use-is-react-navigation-modal";
 import { SafeAreaProvider, type SafeAreaInsets } from "./safe-area";
 import {
   ThemeProvider,
@@ -24,6 +25,9 @@ export const UIProvider = ({
   safeAreaInsets,
   components,
 }: ProviderProps) => {
+  // Temporary fix to calculate portal content relative position correctly when rendered in a React Navigation modal.
+  useInitializeNavigationContainerRef();
+
   return (
     <SafeAreaProvider insets={safeAreaInsets}>
       <ThemeProvider theme={theme} components={components}>

package/src/utils/normalize-layout.ts

@@ -25,6 +25,16 @@ export const measureLayoutPosition = (
   ref: HostInstance | null,
   callback: (layout: LayoutPosition) => void,
 ) => {
+  if (ref && "getBoundingClientRect" in ref) {
+    const rect = (ref as unknown as { getBoundingClientRect: () => DOMRect }).getBoundingClientRect();
+    callback({
+      height: isValidNumber(rect.height) ? rect.height : 0,
+      width: isValidNumber(rect.width) ? rect.width : 0,
+      pageX: isValidNumber(rect.x) ? rect.x : 0,
+      pageY: isValidNumber(rect.y) ? rect.y : 0,
+    });
+    return;
+  }
   ref?.measureInWindow((pageX, pageY, width, height) => {
     callback({
       height: isValidNumber(height) ? height : 0,

package/dist/module/components/button/components/button-label.js

@@ -1,18 +0,0 @@
-"use strict";
-
-import { calculateComposedStyles } from "../../../utils/calculate-styles.js";
-import React from "react";
-import { Text } from "react-native";
-import { useButton } from "../context.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function ButtonLabel(props) {
-  const button = useButton();
-  const calculatedStyle = calculateComposedStyles(button.styles, button.state, "label", props.style);
-  const isSelectable = button.state !== "disabled" && button.state !== "loading";
-  return /*#__PURE__*/_jsx(Text, {
-    selectable: isSelectable,
-    style: calculatedStyle,
-    children: props.children
-  });
-}
-//# sourceMappingURL=button-label.js.map

package/dist/module/components/button/components/button-label.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["calculateComposedStyles","React","Text","useButton","jsx","_jsx","ButtonLabel","props","button","calculatedStyle","styles","state","style","isSelectable","selectable","children"],"sourceRoot":"../../../../../src","sources":["components/button/components/button-label.tsx"],"mappings":";;AACA,SAASA,uBAAuB,QAAQ,oCAAiC;AACzE,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAyBC,IAAI,QAAwB,cAAc;AACnE,SAASC,SAAS,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQvC,OAAO,SAASC,WAAWA,CAACC,KAAuB,EAAE;EACnD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAE1B,MAAMM,eAAe,GAAGT,uBAAuB,CAACQ,MAAM,CAACE,MAAM,EAAEF,MAAM,CAACG,KAAK,EAAE,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC;EAElG,MAAMC,YAAY,GAAGL,MAAM,CAACG,KAAK,KAAK,UAAU,IAAIH,MAAM,CAACG,KAAK,KAAK,SAAS;EAE9E,oBACEN,IAAA,CAACH,IAAI;IAACY,UAAU,EAAED,YAAa;IAACD,KAAK,EAAEH,eAAgB;IAAAM,QAAA,EACpDR,KAAK,CAACQ;EAAQ,CACX,CAAC;AAEX","ignoreList":[]}

package/dist/module/components/button/components/button-root.js

@@ -1,60 +0,0 @@
-"use strict";
-
-import React, { useState } from "react";
-import { Pressable } from "react-native";
-import { ButtonContext } from "../context.js";
-import { ButtonVariants } from "../variants/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const calculateState = (props, isHovered) => {
-  if (props.isDisabled) {
-    return "disabled";
-  }
-  if (props.isLoading) {
-    return "loading";
-  }
-  if (isHovered) {
-    return "hovered";
-  }
-  return "default";
-};
-const cursorValue = state => {
-  switch (state) {
-    case "disabled":
-      return "not-allowed";
-    case "loading":
-      return "wait";
-    default:
-      return "pointer";
-  }
-};
-export function ButtonRoot(props) {
-  const variantStyles = ButtonVariants[props.variant ?? "default"]();
-  const [isHovered, setIsHovered] = useState(false);
-  const state = calculateState(props, isHovered);
-  const calculatedStyle = [variantStyles.root?.default, variantStyles.root?.[state], props.style];
-  const handlePress = event => {
-    if (props.isDisabled || props.isLoading) {
-      event.preventDefault();
-      return;
-    }
-    props.onPress?.(event);
-  };
-  const contextValue = {
-    state,
-    styles: variantStyles
-  };
-  return /*#__PURE__*/_jsx(ButtonContext.Provider, {
-    value: contextValue,
-    children: /*#__PURE__*/_jsx(Pressable, {
-      ...props,
-      onPress: handlePress,
-      onHoverIn: () => setIsHovered(true),
-      onHoverOut: () => setIsHovered(false),
-      disabled: props.isDisabled,
-      style: [calculatedStyle, {
-        cursor: cursorValue(state)
-      }]
-    })
-  });
-}
-//# sourceMappingURL=button-root.js.map

package/dist/module/components/button/components/button-root.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","useState","Pressable","ButtonContext","ButtonVariants","jsx","_jsx","calculateState","props","isHovered","isDisabled","isLoading","cursorValue","state","ButtonRoot","variantStyles","variant","setIsHovered","calculatedStyle","root","default","style","handlePress","event","preventDefault","onPress","contextValue","styles","Provider","value","children","onHoverIn","onHoverOut","disabled","cursor"],"sourceRoot":"../../../../../src","sources":["components/button/components/button-root.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,SAAS,QAA+E,cAAc;AAC/G,SAASC,aAAa,QAAQ,eAAY;AAE1C,SAASC,cAAc,QAAQ,sBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAY7C,MAAMC,cAAc,GAAGA,CAACC,KAAsB,EAAEC,SAAkB,KAAkB;EAClF,IAAID,KAAK,CAACE,UAAU,EAAE;IACpB,OAAO,UAAU;EACnB;EACA,IAAIF,KAAK,CAACG,SAAS,EAAE;IACnB,OAAO,SAAS;EAClB;EACA,IAAIF,SAAS,EAAE;IACb,OAAO,SAAS;EAClB;EACA,OAAO,SAAS;AAClB,CAAC;AAED,MAAMG,WAAW,GAAIC,KAAkB,IAAkB;EACvD,QAAQA,KAAK;IACX,KAAK,UAAU;MACb,OAAO,aAAa;IACtB,KAAK,SAAS;MACZ,OAAO,MAAM;IACf;MACE,OAAO,SAAS;EACpB;AACF,CAAC;AAED,OAAO,SAASC,UAAUA,CAACN,KAAsB,EAAE;EACjD,MAAMO,aAAa,GAAGX,cAAc,CAACI,KAAK,CAACQ,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC;EAClE,MAAM,CAACP,SAAS,EAAEQ,YAAY,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC;EAEjD,MAAMY,KAAK,GAAGN,cAAc,CAACC,KAAK,EAAEC,SAAS,CAAC;EAE9C,MAAMS,eAAe,GAAG,CAACH,aAAa,CAACI,IAAI,EAAEC,OAAO,EAAEL,aAAa,CAACI,IAAI,GAAGN,KAAK,CAAC,EAAEL,KAAK,CAACa,KAAK,CAAC;EAE/F,MAAMC,WAAsC,GAAIC,KAAK,IAAK;IACxD,IAAIf,KAAK,CAACE,UAAU,IAAIF,KAAK,CAACG,SAAS,EAAE;MACvCY,KAAK,CAACC,cAAc,CAAC,CAAC;MACtB;IACF;IACAhB,KAAK,CAACiB,OAAO,GAAGF,KAAK,CAAC;EACxB,CAAC;EAED,MAAMG,YAA2B,GAAG;IAAEb,KAAK;IAAEc,MAAM,EAAEZ;EAAc,CAAC;EAEpE,oBACET,IAAA,CAACH,aAAa,CAACyB,QAAQ;IAACC,KAAK,EAAEH,YAAa;IAAAI,QAAA,eAC1CxB,IAAA,CAACJ,SAAS;MAAA,GACJM,KAAK;MACTiB,OAAO,EAAEH,WAAY;MACrBS,SAAS,EAAEA,CAAA,KAAMd,YAAY,CAAC,IAAI,CAAE;MACpCe,UAAU,EAAEA,CAAA,KAAMf,YAAY,CAAC,KAAK,CAAE;MACtCgB,QAAQ,EAAEzB,KAAK,CAACE,UAAW;MAC3BW,KAAK,EAAE,CACLH,eAAe,EACf;QACEgB,MAAM,EAAEtB,WAAW,CAACC,KAAK;MAC3B,CAAC;IACD,CACH;EAAC,CACoB,CAAC;AAE7B","ignoreList":[]}

package/dist/module/components/button/components/button-spinner.js

@@ -1,15 +0,0 @@
-"use strict";
-
-import React from "react";
-import { ActivityIndicator } from "react-native";
-import { useButton } from "../context.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function ButtonSpinner(props) {
-  const button = useButton();
-  const composedStyle = [button.styles?.spinner?.default?.style, button.styles?.spinner?.[button.state]?.style, props.style];
-  return /*#__PURE__*/_jsx(ActivityIndicator, {
-    style: composedStyle,
-    color: props.color
-  });
-}
-//# sourceMappingURL=button-spinner.js.map

package/dist/module/components/button/components/button-spinner.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","ActivityIndicator","useButton","jsx","_jsx","ButtonSpinner","props","button","composedStyle","styles","spinner","default","style","state","color"],"sourceRoot":"../../../../../src","sources":["components/button/components/button-spinner.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,iBAAiB,QAAqE,cAAc;AAC7G,SAASC,SAAS,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOvC,OAAO,SAASC,aAAaA,CAACC,KAAyB,EAAE;EACvD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAC1B,MAAMM,aAAa,GAAG,CAACD,MAAM,CAACE,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAEC,KAAK,EAAEL,MAAM,CAACE,MAAM,EAAEC,OAAO,GAAGH,MAAM,CAACM,KAAK,CAAC,EAAED,KAAK,EAAEN,KAAK,CAACM,KAAK,CAAC;EAC1H,oBAAOR,IAAA,CAACH,iBAAiB;IAACW,KAAK,EAAEJ,aAAc;IAACM,KAAK,EAAER,KAAK,CAACQ;EAAM,CAAE,CAAC;AACxE","ignoreList":[]}

package/dist/module/components/button/context.js

@@ -1,12 +0,0 @@
-"use strict";
-
-import { createContext, useContext } from "react";
-export const ButtonContext = /*#__PURE__*/createContext(undefined);
-export const useButton = () => {
-  const context = useContext(ButtonContext);
-  if (!context) {
-    throw new Error("useButton must be used within a ButtonProvider");
-  }
-  return context;
-};
-//# sourceMappingURL=context.js.map

package/dist/module/components/button/context.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["createContext","useContext","ButtonContext","undefined","useButton","context","Error"],"sourceRoot":"../../../../src","sources":["components/button/context.ts"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAQjD,OAAO,MAAMC,aAAa,gBAAGF,aAAa,CAA4BG,SAAS,CAAC;AAEhF,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,OAAO,GAAGJ,UAAU,CAACC,aAAa,CAAC;EACzC,IAAI,CAACG,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,gDAAgD,CAAC;EACnE;EACA,OAAOD,OAAO;AAChB,CAAC","ignoreList":[]}

package/dist/typescript/src/components/button/components/button-label.d.ts

@@ -1,9 +0,0 @@
-import type { TextChildren } from "../../../types/element.types";
-import React from "react";
-import { type StyleProp, type TextStyle } from "react-native";
-export interface ButtonLabelProps {
-    children?: TextChildren;
-    style?: StyleProp<TextStyle>;
-}
-export declare function ButtonLabel(props: ButtonLabelProps): React.JSX.Element;
-//# sourceMappingURL=button-label.d.ts.map

package/dist/typescript/src/components/button/components/button-label.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-label.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/components/button-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAYlD"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"button-root.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/components/button-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAA+B,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGhH,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AA0BD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAmChD"}

package/dist/typescript/src/components/button/components/button-spinner.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { type ActivityIndicatorProps, type StyleProp, type ViewStyle } from "react-native";
-export interface ButtonSpinnerProps {
-    style?: StyleProp<ViewStyle>;
-    color?: ActivityIndicatorProps["color"];
-}
-export declare function ButtonSpinner(props: ButtonSpinnerProps): React.JSX.Element;
-//# sourceMappingURL=button-spinner.d.ts.map

package/dist/typescript/src/components/button/components/button-spinner.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-spinner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/components/button-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqB,KAAK,sBAAsB,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9G,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;CACzC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAItD"}

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

@@ -1,8 +0,0 @@
-import type { ButtonState, ButtonStyles } from "./types";
-export interface ButtonContext {
-    state: ButtonState;
-    styles?: ButtonStyles;
-}
-export declare const ButtonContext: import("react").Context<ButtonContext | undefined>;
-export declare const useButton: () => ButtonContext;
-//# sourceMappingURL=context.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEzD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,oDAAsD,CAAC;AAEjF,eAAO,MAAM,SAAS,qBAMrB,CAAC"}

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

@@ -1,25 +0,0 @@
-import type { TextChildren } from "../../../types/element.types";
-import { calculateComposedStyles } from "../../../utils/calculate-styles";
-import React from "react";
-import { type StyleProp, Text, type TextStyle } from "react-native";
-import { useButton } from "../context";
-
-export interface ButtonLabelProps {
-  children?: TextChildren;
-
-  style?: StyleProp<TextStyle>;
-}
-
-export function ButtonLabel(props: ButtonLabelProps) {
-  const button = useButton();
-
-  const calculatedStyle = calculateComposedStyles(button.styles, button.state, "label", props.style);
-
-  const isSelectable = button.state !== "disabled" && button.state !== "loading";
-
-  return (
-    <Text selectable={isSelectable} style={calculatedStyle}>
-      {props.children}
-    </Text>
-  );
-}

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

@@ -1,76 +0,0 @@
-import React, { useState } from "react";
-import { Pressable, type CursorValue, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
-import { ButtonContext } from "../context";
-import type { ButtonState } from "../types";
-import { ButtonVariants } from "../variants";
-
-export interface ButtonRootProps extends PressableProps {
-  variant?: keyof typeof ButtonVariants;
-  children?: React.ReactNode;
-
-  isDisabled?: boolean;
-  isLoading?: boolean;
-
-  style?: StyleProp<ViewStyle>;
-}
-
-const calculateState = (props: ButtonRootProps, isHovered: boolean): ButtonState => {
-  if (props.isDisabled) {
-    return "disabled";
-  }
-  if (props.isLoading) {
-    return "loading";
-  }
-  if (isHovered) {
-    return "hovered";
-  }
-  return "default";
-};
-
-const cursorValue = (state: ButtonState): CursorValue => {
-  switch (state) {
-    case "disabled":
-      return "not-allowed" as CursorValue;
-    case "loading":
-      return "wait" as CursorValue;
-    default:
-      return "pointer";
-  }
-};
-
-export function ButtonRoot(props: ButtonRootProps) {
-  const variantStyles = ButtonVariants[props.variant ?? "default"]();
-  const [isHovered, setIsHovered] = useState(false);
-
-  const state = calculateState(props, isHovered);
-
-  const calculatedStyle = [variantStyles.root?.default, variantStyles.root?.[state], props.style];
-
-  const handlePress: PressableProps["onPress"] = (event) => {
-    if (props.isDisabled || props.isLoading) {
-      event.preventDefault();
-      return;
-    }
-    props.onPress?.(event);
-  };
-
-  const contextValue: ButtonContext = { state, styles: variantStyles };
-
-  return (
-    <ButtonContext.Provider value={contextValue}>
-      <Pressable
-        {...props}
-        onPress={handlePress}
-        onHoverIn={() => setIsHovered(true)}
-        onHoverOut={() => setIsHovered(false)}
-        disabled={props.isDisabled}
-        style={[
-          calculatedStyle,
-          {
-            cursor: cursorValue(state),
-          },
-        ]}
-      />
-    </ButtonContext.Provider>
-  );
-}

package/src/components/button/components/button-spinner.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-import { ActivityIndicator, type ActivityIndicatorProps, type StyleProp, type ViewStyle } from "react-native";
-import { useButton } from "../context";
-
-export interface ButtonSpinnerProps {
-  style?: StyleProp<ViewStyle>;
-  color?: ActivityIndicatorProps["color"];
-}
-
-export function ButtonSpinner(props: ButtonSpinnerProps) {
-  const button = useButton();
-  const composedStyle = [button.styles?.spinner?.default?.style, button.styles?.spinner?.[button.state]?.style, props.style];
-  return <ActivityIndicator style={composedStyle} color={props.color} />;
-}

package/src/components/button/context.ts

@@ -1,17 +0,0 @@
-import { createContext, useContext } from "react";
-import type { ButtonState, ButtonStyles } from "./types";
-
-export interface ButtonContext {
-  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;
-};