@korsolutions/ui 0.0.84 → 0.0.86

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

@@ -13,42 +13,40 @@ export interface MenuTriggerRef {
   close: () => void;
 }
 
-export const MenuTrigger = forwardRef<MenuTriggerRef, MenuTriggerProps>(
-  (props, ref) => {
-    const menu = useMenu();
-    const triggerRef = useRef<ViewRef>(null);
+export const MenuTrigger = forwardRef<MenuTriggerRef, MenuTriggerProps>((props, ref) => {
+  const menu = useMenu();
+  const triggerRef = useRef<ViewRef>(null);
 
-    const onTriggerPress = async () => {
-      if (!menu.isOpen) {
-        measureLayoutPosition(triggerRef.current, (layout) => {
-          menu.setTriggerPosition(layout);
-          menu.setIsOpen(true);
-        });
-      } else {
-        menu.setIsOpen(false);
-      }
-    };
+  const onTriggerPress = async () => {
+    if (!menu.isOpen) {
+      measureLayoutPosition(triggerRef.current, (layout) => {
+        menu.setTriggerPosition(layout);
+        menu.setIsOpen(true);
+      });
+    } else {
+      menu.setIsOpen(false);
+    }
+  };
 
-    useImperativeHandle(ref, () => ({
-      open: () => {
-        measureLayoutPosition(triggerRef.current, (layout) => {
-          menu.setTriggerPosition(layout);
-          menu.setIsOpen(true);
-        });
-      },
-      close: () => menu.setIsOpen(false),
-    }));
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      measureLayoutPosition(triggerRef.current, (layout) => {
+        menu.setTriggerPosition(layout);
+        menu.setIsOpen(true);
+      });
+    },
+    close: () => menu.setIsOpen(false),
+  }));
 
-    return React.cloneElement(props.children, {
-      ref: triggerRef,
-      onPress: onTriggerPress,
-      role: "button",
-      accessible: true,
-      accessibilityRole: "button",
-      accessibilityState: { expanded: menu.isOpen },
-      ...props.children.props,
-    });
-  },
-);
+  return React.cloneElement(props.children, {
+    ref: triggerRef,
+    onPress: onTriggerPress,
+    role: "button",
+    accessible: true,
+    accessibilityRole: "button",
+    accessibilityState: { expanded: menu.isOpen },
+    ...props.children.props,
+  });
+});
 
 MenuTrigger.displayName = "MenuTrigger";

package/src/components/menu/context.ts

@@ -29,9 +29,9 @@ export interface MenuRadioGroupContextValue {
   onValueChange: (value: string) => void;
 }
 
-export const MenuRadioGroupContext = createContext<
-  MenuRadioGroupContextValue | undefined
->(undefined);
+export const MenuRadioGroupContext = createContext<MenuRadioGroupContextValue | undefined>(
+  undefined,
+);
 
 export const useMenuRadioGroup = () => {
   const context = useContext(MenuRadioGroupContext);

package/src/components/menu/types.ts

@@ -6,11 +6,7 @@ import type { MenuOverlayProps } from "./components/menu-overlay";
 
 export type MenuButtonState = "default" | "hovered";
 export type MenuCheckboxItemState = "default" | "hovered" | "disabled";
-export type MenuRadioItemState =
-  | "default"
-  | "hovered"
-  | "selected"
-  | "disabled";
+export type MenuRadioItemState = "default" | "hovered" | "selected" | "disabled";
 
 export interface MenuStyles {
   content?: MenuContentProps["style"];

package/src/components/phone-input/components/country-picker.tsx

@@ -25,15 +25,11 @@ export function CountryPicker() {
   const { styles, state, phoneMask, isDisabled, triggerRef } = usePhoneInput();
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
-  const [triggerPosition, setTriggerPosition] =
-    useState<LayoutPosition>(DEFAULT_POSITION);
-  const [contentLayout, setContentLayout] =
-    useState<LayoutRectangle>(DEFAULT_LAYOUT);
+  const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
+  const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
 
   const filteredCountries = searchQuery
-    ? phoneMask.countries.filter((c) =>
-        c.name.toLowerCase().includes(searchQuery.toLowerCase()),
-      )
+    ? phoneMask.countries.filter((c) => c.name.toLowerCase().includes(searchQuery.toLowerCase()))
     : phoneMask.countries;
 
   const onOpen = () => {
@@ -91,27 +87,16 @@ export function CountryPicker() {
 
   return (
     <>
-      <Pressable
-        onPress={onOpen}
-        disabled={isDisabled}
-        style={countryButtonStyles}
-      >
+      <Pressable onPress={onOpen} disabled={isDisabled} style={countryButtonStyles}>
         <Text style={countryButtonTextStyles}>
           {phoneMask.country.flag} +{phoneMask.country.dialCode}
         </Text>
       </Pressable>
       {isOpen && (
         <Portal name="phone-input-country-picker">
-          <Pressable
-            onPress={onClose}
-            style={[StyleSheet.absoluteFill, overlayStyles]}
-          />
+          <Pressable onPress={onClose} style={[StyleSheet.absoluteFill, overlayStyles]} />
           <View
-            style={[
-              positionStyle,
-              contentStyles,
-              { width: triggerPosition.width },
-            ]}
+            style={[positionStyle, contentStyles, { width: triggerPosition.width }]}
             onLayout={(e) => setContentLayout(e.nativeEvent.layout)}
             pointerEvents="box-none"
           >

package/src/components/phone-input/components/phone-input-root.tsx

@@ -2,7 +2,10 @@ import React, { useMemo, useRef, useState } from "react";
 import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
 import { COUNTRIES, type CountryCode } from "../../../data/countries";
 import { usePhoneMask } from "../../../hooks/use-phone-mask";
+import { useComponentConfig } from "../../../themes/provider";
 import type { ViewRef } from "../../../types/element.types";
+import { mergeStyles } from "../../../utils/calculate-styles";
+import type { Size } from "../../../utils/size-scale";
 import { PhoneInputContext } from "../context";
 import type { PhoneInputState } from "../types";
 import { PhoneInputVariants } from "../variants";
@@ -15,14 +18,12 @@ export interface PhoneInputRootProps {
   countryCodes?: CountryCode[];
   isDisabled?: boolean;
   variant?: keyof typeof PhoneInputVariants;
+  size?: Size;
   placeholder?: string;
   style?: StyleProp<ViewStyle>;
 }
 
-const calculateState = (
-  isDisabled: boolean,
-  isFocused: boolean,
-): PhoneInputState => {
+const calculateState = (isDisabled: boolean, isFocused: boolean): PhoneInputState => {
   if (isDisabled) return "disabled";
   if (isFocused) return "focused";
   return "default";
@@ -36,9 +37,12 @@ export function PhoneInputRoot({
   countryCodes = ["US"],
   isDisabled = false,
   variant = "default",
+  size = "md",
   style,
 }: PhoneInputRootProps) {
-  const variantStyles = PhoneInputVariants[variant]();
+  const variantStyles = PhoneInputVariants[variant](size);
+  const componentConfig = useComponentConfig("phoneInput");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
   const [isFocused, setIsFocused] = useState(false);
   const triggerRef = useRef<ViewRef>(null);
 
@@ -54,8 +58,8 @@ export function PhoneInputRoot({
   });
 
   const rootStyles = StyleSheet.flatten([
-    variantStyles.root?.default,
-    variantStyles.root?.[state],
+    mergedStyles.root?.default,
+    mergedStyles.root?.[state],
     style,
   ]);
 
@@ -69,10 +73,11 @@ export function PhoneInputRoot({
         state,
         phoneMask,
         isDisabled,
-        styles: variantStyles,
+        styles: mergedStyles,
+
         triggerRef,
       }) satisfies PhoneInputContext,
-    [variantStyles, state, phoneMask, isDisabled, value, isFocused],
+    [mergedStyles, state, phoneMask, isDisabled, value, isFocused],
   );
 
   return (

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

@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  type StyleProp,
-  StyleSheet,
-  TextInput,
-  type TextStyle,
-} from "react-native";
+import { type StyleProp, StyleSheet, TextInput, type TextStyle } from "react-native";
 import { usePhoneInput } from "../context";
 
 export interface PhoneInputProps {
@@ -12,18 +7,10 @@ export interface PhoneInputProps {
   style?: StyleProp<TextStyle>;
 }
 
-export function PhoneInput({
-  placeholder = "Enter phone number",
-  style,
-}: PhoneInputProps) {
-  const { styles, state, setIsFocused, phoneMask, isDisabled } =
-    usePhoneInput();
+export function PhoneInput({ placeholder = "Enter phone number", style }: PhoneInputProps) {
+  const { styles, state, setIsFocused, phoneMask, isDisabled } = usePhoneInput();
 
-  const inputStyles = StyleSheet.flatten([
-    styles.input?.default,
-    styles.input?.[state],
-    style,
-  ]);
+  const inputStyles = StyleSheet.flatten([styles.input?.default, styles.input?.[state], style]);
 
   return (
     <TextInput
@@ -31,9 +18,7 @@ export function PhoneInput({
       onChangeText={phoneMask.onChangeText}
       keyboardType={phoneMask.keyboardType}
       placeholder={placeholder}
-      placeholderTextColor={
-        StyleSheet.flatten(styles.countryButtonText?.disabled)?.color
-      }
+      placeholderTextColor={StyleSheet.flatten(styles.countryButtonText?.disabled)?.color}
       readOnly={isDisabled}
       onFocus={() => setIsFocused(true)}
       onBlur={() => setIsFocused(false)}

package/src/components/phone-input/context.ts

@@ -19,9 +19,7 @@ export interface PhoneInputContext {
   styles: PhoneInputStyles;
 }
 
-export const PhoneInputContext = createContext<PhoneInputContext | undefined>(
-  undefined,
-);
+export const PhoneInputContext = createContext<PhoneInputContext | undefined>(undefined);
 
 export const usePhoneInput = () => {
   const context = useContext(PhoneInputContext);

package/src/components/phone-input/types.ts

@@ -10,11 +10,7 @@ export interface PhoneInputStyles {
   input?: Partial<Record<PhoneInputState, StyleProp<TextStyle>>>;
   pickerOverlay?: Partial<Record<PhoneInputState, StyleProp<ViewStyle>>>;
   pickerContent?: Partial<Record<PhoneInputState, StyleProp<ViewStyle>>>;
-  pickerOption?: Partial<
-    Record<PhoneInputState | "selected", StyleProp<ViewStyle>>
-  >;
-  pickerOptionText?: Partial<
-    Record<PhoneInputState | "selected", StyleProp<TextStyle>>
-  >;
+  pickerOption?: Partial<Record<PhoneInputState | "selected", StyleProp<ViewStyle>>>;
+  pickerOptionText?: Partial<Record<PhoneInputState | "selected", StyleProp<TextStyle>>>;
   pickerSearch?: Partial<Record<PhoneInputState, StyleProp<TextStyle>>>;
 }

package/src/components/phone-input/variants/default.tsx

@@ -1,10 +1,13 @@
 import { Platform } from "react-native";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
 import type { PhoneInputStyles } from "../types";
 
-export function usePhoneInputVariantDefault(): PhoneInputStyles {
-  return useThemedStyles(
-    ({ colors, radius, fontFamily, fontSize }): PhoneInputStyles => ({
+export function usePhoneInputVariantDefault(size: Size): PhoneInputStyles {
+  return useThemedStyles(({ colors, radius, fontFamily, sizeScale }): PhoneInputStyles => {
+    const s = sizeScale(size);
+
+    return {
       root: {
         default: {
           flexDirection: "row",
@@ -13,7 +16,7 @@ export function usePhoneInputVariantDefault(): PhoneInputStyles {
           borderColor: colors.border,
           borderRadius: radius,
           backgroundColor: colors.surface,
-          height: 48,
+          height: s.height,
           overflow: "hidden",
           outlineWidth: 0,
         },
@@ -26,18 +29,18 @@ export function usePhoneInputVariantDefault(): PhoneInputStyles {
       },
       countryButton: {
         default: {
-          paddingHorizontal: 12,
+          paddingHorizontal: s.paddingHorizontal * 0.75,
           height: "100%",
           justifyContent: "center",
           alignItems: "center",
           flexDirection: "row",
-          gap: 4,
+          gap: s.gap * 0.5,
         },
       },
       countryButtonText: {
         default: {
           fontFamily,
-          fontSize,
+          fontSize: s.fontSize,
           color: colors.foreground,
         },
         disabled: {
@@ -55,9 +58,9 @@ export function usePhoneInputVariantDefault(): PhoneInputStyles {
       input: {
         default: {
           flex: 1,
-          paddingHorizontal: 16,
+          paddingHorizontal: s.paddingHorizontal,
           fontFamily,
-          fontSize,
+          fontSize: s.fontSize,
           color: colors.foreground,
           height: "100%",
           outlineWidth: 0,
@@ -87,12 +90,12 @@ export function usePhoneInputVariantDefault(): PhoneInputStyles {
       },
       pickerOption: {
         default: {
-          paddingVertical: 10,
-          paddingHorizontal: 12,
+          paddingVertical: s.paddingVertical * 0.75,
+          paddingHorizontal: s.paddingHorizontal * 0.75,
           borderRadius: radius / 2,
           flexDirection: "row",
           alignItems: "center",
-          gap: 8,
+          gap: s.gap,
         },
         selected: {
           backgroundColor: colors.muted,
@@ -101,7 +104,7 @@ export function usePhoneInputVariantDefault(): PhoneInputStyles {
       pickerOptionText: {
         default: {
           fontFamily,
-          fontSize,
+          fontSize: s.fontSize,
           color: colors.foreground,
         },
       },
@@ -110,15 +113,15 @@ export function usePhoneInputVariantDefault(): PhoneInputStyles {
           borderWidth: 1,
           borderColor: colors.border,
           borderRadius: radius,
-          paddingVertical: 8,
-          paddingHorizontal: 12,
+          paddingVertical: s.paddingVertical * 0.5,
+          paddingHorizontal: s.paddingHorizontal * 0.75,
           fontFamily,
-          fontSize: fontSize * 0.875,
+          fontSize: s.fontSize * 0.875,
           color: colors.foreground,
           marginBottom: 4,
           outlineWidth: 0,
         },
       },
-    }),
-  );
+    };
+  });
 }

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

@@ -1,5 +1,11 @@
 import React from "react";
-import { Pressable, type PressableProps, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
+import {
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  StyleSheet,
+  type ViewStyle,
+} from "react-native";
 import { usePopover } from "../context";
 
 export interface PopoverOverlayProps extends Omit<PressableProps, "onPress"> {

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

@@ -1,6 +1,12 @@
-import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "../../../hooks/use-relative-position";
 import React, { useState } from "react";
 import { type LayoutRectangle } from "react-native";
+import {
+  DEFAULT_LAYOUT,
+  DEFAULT_POSITION,
+  type LayoutPosition,
+} from "../../../hooks/use-relative-position";
+import { useComponentConfig } from "../../../themes/provider";
+import { mergeStyles } from "../../../utils/calculate-styles";
 import { PopoverContext } from "../context";
 import { PopoverVariants } from "../variants";
 
@@ -11,6 +17,8 @@ export interface PopoverRootProps {
 
 export function PopoverRoot(props: PopoverRootProps) {
   const variantStyles = PopoverVariants[props.variant || "default"]();
+  const componentConfig = useComponentConfig("popover");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
   const [isOpen, setIsOpen] = useState(false);
   const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
   const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
@@ -24,7 +32,7 @@ export function PopoverRoot(props: PopoverRootProps) {
         setContentLayout,
         triggerPosition,
         setTriggerPosition,
-        styles: variantStyles,
+        styles: mergedStyles,
       }}
     >
       {props.children}

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

@@ -13,10 +13,7 @@ export interface PopoverTriggerRef {
   close: () => void;
 }
 
-export const PopoverTrigger = forwardRef<
-  PopoverTriggerRef,
-  PopoverTriggerProps
->((props, ref) => {
+export const PopoverTrigger = forwardRef<PopoverTriggerRef, PopoverTriggerProps>((props, ref) => {
   const popover = usePopover();
   const triggerRef = useRef<ViewRef>(null);
 

package/src/components/portal/portal.tsx

@@ -9,11 +9,7 @@ import React, {
 import { Platform, View, type HostInstance } from "react-native";
 import { measureLayoutPosition } from "../../utils/normalize-layout";
 import { PortalOffsetContext, type PortalOffset } from "./portal-offset";
-import {
-  DEFAULT_PORTAL_HOST,
-  type PortalHostProps,
-  type PortalProps,
-} from "./portal.constants";
+import { DEFAULT_PORTAL_HOST, type PortalHostProps, type PortalProps } from "./portal.constants";
 
 type PortalMap = Map<string, React.ReactNode>;
 type PortalHostMap = Map<string, PortalMap>;
@@ -24,10 +20,7 @@ type PortalStore = {
 };
 
 const store: PortalStore = {
-  map: new Map<string, PortalMap>().set(
-    DEFAULT_PORTAL_HOST,
-    new Map<string, React.ReactNode>(),
-  ),
+  map: new Map<string, PortalMap>().set(DEFAULT_PORTAL_HOST, new Map<string, React.ReactNode>()),
   listeners: new Set(),
 };
 
@@ -46,11 +39,7 @@ function subscribe(cb: () => void) {
   };
 }
 
-function updatePortal(
-  hostName: string,
-  name: string,
-  children: React.ReactNode,
-) {
+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);
@@ -96,17 +85,12 @@ function DefaultContainer(props: React.PropsWithChildren) {
         pointerEvents: "box-none",
       }}
     >
-      <PortalOffsetContext.Provider value={offset}>
-        {props.children}
-      </PortalOffsetContext.Provider>
+      <PortalOffsetContext.Provider value={offset}>{props.children}</PortalOffsetContext.Provider>
     </View>
   );
 }
 
-export function PortalHost({
-  name = DEFAULT_PORTAL_HOST,
-  container,
-}: PortalHostProps) {
+export function PortalHost({ name = DEFAULT_PORTAL_HOST, container }: PortalHostProps) {
   const map = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   const portalMap = map.get(name) ?? new Map<string, React.ReactNode>();
   const Container = useMemo(
@@ -122,11 +106,7 @@ export function PortalHost({
   return <Container>{Array.from(portalMap.values())}</Container>;
 }
 
-export function Portal({
-  name,
-  hostName = DEFAULT_PORTAL_HOST,
-  children,
-}: PortalProps) {
+export function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }: PortalProps) {
   useEffect(() => {
     updatePortal(hostName, name, children);
   }, [hostName, name, children]);

package/src/components/progress/components/progress-indicator.tsx

@@ -14,8 +14,19 @@ export function ProgressIndicator(props: ProgressIndicatorProps) {
 
   const percentage = Math.min(Math.max((progress.value / progress.max) * 100, 0), 100);
 
-  const composedStyle = calculateComposedStyles(progress.styles, progress.state, "indicator", props.style);
+  const composedStyle = calculateComposedStyles(
+    progress.styles,
+    progress.state,
+    "indicator",
+    props.style,
+  );
 
   const Component = props.render ?? View;
-  return <Component {...props} percentage={percentage} style={[composedStyle, { width: `${percentage}%` }]} />;
+  return (
+    <Component
+      {...props}
+      percentage={percentage}
+      style={[composedStyle, { width: `${percentage}%` }]}
+    />
+  );
 }

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

@@ -1,6 +1,7 @@
-import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../../themes/provider";
+import { calculateComposedStyles, mergeStyles } from "../../../utils/calculate-styles";
 import { ProgressContext } from "../context";
 import { ProgressVariants } from "../variants";
 
@@ -19,14 +20,16 @@ export interface ProgressRootProps {
 export function ProgressRoot(props: ProgressRootProps) {
   const { value = 0, max = 100 } = props;
   const variantStyles = ProgressVariants[props.variant || "default"]();
-  const composedStyle = calculateComposedStyles(variantStyles, "default", "root", props.style);
+  const componentConfig = useComponentConfig("progress");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
+  const composedStyle = calculateComposedStyles(mergedStyles, "default", "root", props.style);
 
   const Component = props.render ?? View;
   return (
     <ProgressContext.Provider
       value={{
         state: "default",
-        styles: variantStyles,
+        styles: mergedStyles,
         value,
         max,
       }}

package/src/components/radio-group/components/radio-group-item.tsx

@@ -30,11 +30,7 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
   const itemDisabled = isDisabled ?? group.isDisabled;
   const state = calculateState(isSelected, itemDisabled, isHovered);
 
-  const composedStyle = [
-    group.styles?.item?.default,
-    group.styles?.item?.[state],
-    style,
-  ];
+  const composedStyle = [group.styles?.item?.default, group.styles?.item?.[state], style];
 
   return (
     <RadioGroupItemContext.Provider value={{ value, state, isSelected }}>

package/src/components/radio-group/components/radio-group-root.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../../themes/provider";
+import { mergeStyles } from "../../../utils/calculate-styles";
 import { RadioGroupContext } from "../context";
 import type { RadioGroupState } from "../types";
 import { RadioGroupVariants } from "../variants";
@@ -21,9 +23,11 @@ const calculateState = (isDisabled: boolean | undefined): RadioGroupState => {
 export function RadioGroupRoot(props: RadioGroupRootProps) {
   const { children, value, onChange, isDisabled, style, variant, ...viewProps } = props;
   const variantStyles = RadioGroupVariants[variant ?? "default"]();
+  const componentConfig = useComponentConfig("radioGroup");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
 
   const state = calculateState(isDisabled);
-  const composedStyle = [variantStyles.root?.default, variantStyles.root?.[state], style];
+  const composedStyle = [mergedStyles.root?.default, mergedStyles.root?.[state], style];
 
   const contextValue = React.useMemo(
     () => ({
@@ -31,9 +35,9 @@ export function RadioGroupRoot(props: RadioGroupRootProps) {
       onChange,
       isDisabled,
       state,
-      styles: variantStyles,
+      styles: mergedStyles,
     }),
-    [value, onChange, isDisabled, state, variantStyles],
+    [value, onChange, isDisabled, state, mergedStyles],
   );
 
   return (

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

@@ -33,11 +33,7 @@ export function SelectContent(props: SelectContentProps) {
   const Component = props.render ?? View;
   return (
     <Component
-      style={[
-        positionStyle,
-        composedStyles,
-        { width: select.triggerPosition.width },
-      ]}
+      style={[positionStyle, composedStyles, { width: select.triggerPosition.width }]}
       onLayout={(e) => {
         select.setContentLayout(e.nativeEvent.layout);
       }}

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

@@ -9,7 +9,11 @@ export type SelectOptionProps = {
   children?: React.ReactNode;
 };
 
-const calculateState = (selectState: SelectState, hovered: boolean, selected: boolean): SelectOptionState => {
+const calculateState = (
+  selectState: SelectState,
+  hovered: boolean,
+  selected: boolean,
+): SelectOptionState => {
   if (selectState === "disabled") {
     return "disabled";
   }

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

@@ -16,7 +16,12 @@ export interface SelectOverlayProps {
 export function SelectOverlay(props: SelectOverlayProps) {
   const select = useSelect();
 
-  const composedStyles = calculateComposedStyles(select.styles, select.state, "overlay", props.style);
+  const composedStyles = calculateComposedStyles(
+    select.styles,
+    select.state,
+    "overlay",
+    props.style,
+  );
 
   const Component = props.render ?? Pressable;
   return (