@korsolutions/ui 0.0.93 → 0.0.94

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

@@ -1,7 +1,6 @@
 import React from "react";
-import { type StyleProp, View, type ViewStyle } from "react-native";
+import { type StyleProp, StyleSheet, View, type ViewStyle } from "react-native";
 import { useRelativePosition } from "../../../hooks/use-relative-position";
-import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import { useSelect } from "../context";
 
 export interface SelectContentProps {
@@ -14,12 +13,12 @@ export interface SelectContentProps {
 
 export function SelectContent(props: SelectContentProps) {
   const select = useSelect();
-  const composedStyles = calculateComposedStyles(
-    select.styles,
-    select.state,
-    "content",
+
+  const composedStyles = StyleSheet.flatten([
+    select.styles?.content?.default,
+    select.styles?.content?.[select.state],
     props.style,
-  );
+  ]);
 
   const positionStyle = useRelativePosition({
     align: "start",

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Pressable, StyleSheet, type PressableProps } from "react-native";
 import type { ElementChildren } from "../../../types/element.types";
+import { extractPressableStyles } from "../../../utils/calculate-styles";
 import { useSelect } from "../context";
 import type { SelectOptionState, SelectState } from "../types";
 
@@ -33,7 +34,7 @@ export function SelectOption(props: SelectOptionProps): React.ReactElement {
   const isSelected = select.value === props.value;
 
   const optionState = calculateState(select.state, isHovered, isSelected);
-  const optionStyles = select.styles?.option;
+
   useEffect(() => {
     select.setOptions((prev) => {
       if (prev.find((option) => option.value === props.value)) {
@@ -57,9 +58,9 @@ export function SelectOption(props: SelectOptionProps): React.ReactElement {
       onPointerLeave={handlePointerLeave}
       style={(styleProps) =>
         StyleSheet.flatten([
-          optionStyles?.default,
-          optionStyles?.[optionState],
-          typeof props.style === "function" ? props.style(styleProps) : props.style,
+          extractPressableStyles(select.styles?.option?.default, styleProps),
+          extractPressableStyles(select.styles?.option?.[optionState], styleProps),
+          extractPressableStyles(props.style, styleProps),
         ])
       }
     >

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

@@ -1,4 +1,3 @@
-import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React from "react";
 import { Pressable, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
 import { useSelect } from "../context";
@@ -16,12 +15,12 @@ export interface SelectOverlayProps {
 export function SelectOverlay(props: SelectOverlayProps) {
   const select = useSelect();
 
-  const composedStyles = calculateComposedStyles(
-    select.styles,
-    select.state,
-    "overlay",
+  const composedStyles = StyleSheet.flatten([
+    select.styles?.overlay?.default,
+    select.styles?.overlay?.[select.state],
     props.style,
-  );
+    StyleSheet.absoluteFill,
+  ]);
 
   const Component = props.render ?? Pressable;
   return (
@@ -30,7 +29,7 @@ export function SelectOverlay(props: SelectOverlayProps) {
         select.setIsOpen(false);
       }}
       pointerEvents="auto"
-      style={[StyleSheet.absoluteFill, composedStyles]}
+      style={composedStyles}
     >
       {props.children}
     </Component>

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

@@ -1,8 +1,14 @@
 import React, { useState } from "react";
-import { type LayoutRectangle, type StyleProp, View, type ViewStyle } from "react-native";
+import {
+  type LayoutRectangle,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from "react-native";
 import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "../../../hooks";
 import { useComponentConfig } from "../../../themes/provider";
-import { calculateComposedStyles, mergeStyles } from "../../../utils/calculate-styles";
+import { mergeStyles } from "../../../utils/calculate-styles";
 import type { Size } from "../../../utils/size-scale";
 import { SelectContext } from "../context";
 import type { SelectOption, SelectState } from "../types";
@@ -48,7 +54,12 @@ export function SelectRoot(props: SelectRootProps) {
   const [options, setOptions] = useState<Array<SelectOption>>([]);
 
   const state = calculateState(props);
-  const composedStyles = calculateComposedStyles(mergedStyles, state, "root", props.style);
+
+  const composedStyles = StyleSheet.flatten([
+    mergedStyles?.root?.default,
+    mergedStyles?.root?.[state],
+    props.style,
+  ]);
 
   const Component = props.render ?? View;
   return (

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

@@ -1,32 +1,26 @@
 import React, { useRef } from "react";
 import {
   Pressable,
+  StyleSheet,
   Text,
+  type PressableProps,
   type StyleProp,
-  type TextStyle,
-  type ViewStyle,
+  type TextStyle
 } from "react-native";
 import type { ViewRef } from "../../../types/element.types";
-import { calculateComposedStyles } from "../../../utils/calculate-styles";
+import { extractPressableStyles } from "../../../utils/calculate-styles";
 import { measureLayoutPosition } from "../../../utils/normalize-layout";
 import { useSelect } from "../context";
 
 export interface SelectTriggerProps {
   placeholder?: string;
-  style?: StyleProp<ViewStyle>;
+  style?: PressableProps["style"];
 }
 
 export function SelectTrigger(props: SelectTriggerProps) {
   const select = useSelect();
   const triggerRef = useRef<ViewRef>(null);
 
-  const composedStyles = calculateComposedStyles(
-    select.styles,
-    select.state,
-    "trigger",
-    props.style,
-  );
-
   const onTriggerPress = () => {
     if (!select.isOpen) {
       measureLayoutPosition(triggerRef.current, (layout) => {
@@ -43,7 +37,13 @@ export function SelectTrigger(props: SelectTriggerProps) {
       ref={triggerRef}
       onPress={onTriggerPress}
       disabled={select.isDisabled}
-      style={composedStyles}
+      style={(styleProp) =>
+        StyleSheet.flatten([
+          extractPressableStyles(select.styles?.trigger?.default, styleProp),
+          extractPressableStyles(select.styles?.trigger?.[select.state], styleProp),
+          extractPressableStyles(props.style, styleProp),
+        ])
+      }
     >
       <SelectValue placeholder={props.placeholder} />
     </Pressable>

package/src/components/select/types.ts

@@ -1,5 +1,5 @@
-import type { TextStyle } from "react-native";
 import type { SelectContentProps } from "./components/select-content";
+import type { SelectOptionProps } from "./components/select-option";
 import type { SelectOverlayProps } from "./components/select-overlay";
 import type { SelectRootProps } from "./components/select-root";
 import type { SelectTriggerProps, SelectValueProps } from "./components/select-trigger";
@@ -14,7 +14,7 @@ export interface SelectStyles {
   placeholder?: Partial<Record<SelectState, SelectValueProps["style"]>>;
   overlay?: Partial<Record<SelectState, SelectOverlayProps["style"]>>;
   content?: Partial<Record<SelectState, SelectContentProps["style"]>>;
-  option?: Partial<Record<SelectOptionState, TextStyle>>;
+  option?: Partial<Record<SelectOptionState, SelectOptionProps["style"]>>;
 }
 
 export interface SelectOption {

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

@@ -71,15 +71,10 @@ export function useSelectVariantDefault(size: Size): SelectStyles {
         default: {
           paddingVertical: s.paddingVertical,
           paddingHorizontal: s.paddingHorizontal,
-          fontFamily,
-          fontSize: s.fontSize,
-          lineHeight: s.lineHeight,
-          color: colors.foreground,
           borderRadius: radius / 2,
           cursor: "pointer",
         },
         disabled: {
-          color: colors.mutedForeground,
           cursor: "not-allowed" as CursorValue,
         },
         selected: {

package/src/utils/calculate-styles.ts

@@ -1,4 +1,9 @@
-import { StyleSheet } from "react-native";
+import {
+  StyleSheet,
+  type PressableProps,
+  type PressableStateCallbackType,
+  type ViewStyle,
+} from "react-native";
 
 export const calculateComposedStyles = <
   TStyle,
@@ -57,3 +62,13 @@ export const mergeStyles = <TStyle extends Record<string, any>>(
   }
   return returnStyles;
 };
+
+export const extractPressableStyles = (
+  style: PressableProps["style"],
+  props: PressableStateCallbackType,
+): ViewStyle => {
+  if (typeof style === "function") {
+    return style(props) as ViewStyle;
+  }
+  return style as ViewStyle;
+};