@korsolutions/ui 0.0.58 → 0.0.59

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { Text, type StyleProp, type TextStyle } from "react-native";
+import { useMenu } from "../context";
+
+export interface MenuLabelProps {
+  children: string;
+  render?: (props: MenuLabelProps) => React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function MenuLabel(props: MenuLabelProps) {
+  const menu = useMenu();
+  const composedStyle = [menu.styles?.label, props.style];
+
+  const Component = props.render ?? Text;
+  return (
+    <Component {...props} style={composedStyle}>
+      {props.children}
+    </Component>
+  );
+}

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

@@ -1,5 +1,10 @@
 import React from "react";
-import { Pressable, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
+import {
+  Pressable,
+  type StyleProp,
+  StyleSheet,
+  type ViewStyle,
+} from "react-native";
 import { useMenu } from "../context";
 
 export interface MenuOverlayProps {
@@ -13,7 +18,11 @@ export interface MenuOverlayProps {
 export function MenuOverlay(props: MenuOverlayProps) {
   const menu = useMenu();
 
-  const composedStyle = [StyleSheet.absoluteFill, menu.styles?.overlay, props.style];
+  const composedStyle = StyleSheet.flatten([
+    StyleSheet.absoluteFill,
+    menu.styles?.overlay,
+    props.style,
+  ]);
 
   const Component = props.render ?? Pressable;
   return (

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

@@ -0,0 +1,35 @@
+import React, { useMemo } from "react";
+import { View, type StyleProp, type ViewStyle } from "react-native";
+import { MenuRadioGroupContext, useMenu } from "../context";
+
+export interface MenuRadioGroupProps {
+  children?: React.ReactNode;
+  value: string;
+  onValueChange: (value: string) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function MenuRadioGroup(props: MenuRadioGroupProps) {
+  const menu = useMenu();
+  const composedStyle = [menu.styles?.radioGroup, props.style];
+
+  const contextValue = useMemo(
+    () => ({
+      value: props.value,
+      onValueChange: props.onValueChange,
+    }),
+    [props.value, props.onValueChange],
+  );
+
+  return (
+    <MenuRadioGroupContext.Provider value={contextValue}>
+      <View
+        accessibilityRole="radiogroup"
+        role="radiogroup"
+        style={composedStyle}
+      >
+        {props.children}
+      </View>
+    </MenuRadioGroupContext.Provider>
+  );
+}

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

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import { Pressable, View, type StyleProp, type ViewStyle } from "react-native";
+import { useMenu, useMenuRadioGroup } from "../context";
+import type { MenuRadioItemState } from "../types";
+import { useOrganizedChildren } from "../use-organized-children";
+
+export interface MenuRadioItemProps {
+  children: React.ReactNode;
+  value: string;
+  disabled?: boolean;
+  closeOnPress?: boolean;
+  render?: (props: MenuRadioItemProps) => React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (
+  isHovered: boolean,
+  isSelected: boolean,
+  disabled?: boolean,
+): MenuRadioItemState => {
+  if (disabled) return "disabled";
+  if (isSelected) return "selected";
+  if (isHovered) return "hovered";
+  return "default";
+};
+
+export function MenuRadioItem(props: MenuRadioItemProps) {
+  const menu = useMenu();
+  const radioGroup = useMenuRadioGroup();
+  const [isHovered, setIsHovered] = useState(false);
+  const isSelected = radioGroup.value === props.value;
+  const state = calculateState(isHovered, isSelected, props.disabled);
+
+  const composedStyle = [
+    menu.styles?.radioItem?.default,
+    menu.styles?.radioItem?.[state],
+    props.style,
+  ];
+
+  const indicatorStyle = [
+    menu.styles?.radioIndicator?.default,
+    isSelected ? menu.styles?.radioIndicator?.selected : undefined,
+  ];
+
+  const handlePress = () => {
+    if (props.disabled) return;
+    radioGroup.onValueChange(props.value);
+    if (props.closeOnPress) {
+      menu.setIsOpen(false);
+    }
+  };
+
+  const organizedChildren = useOrganizedChildren(props.children);
+
+  if (props.render) {
+    return (
+      <>
+        {props.render({
+          ...props,
+          children: organizedChildren,
+        })}
+      </>
+    );
+  }
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      onPointerEnter={() => setIsHovered(true)}
+      onPointerLeave={() => setIsHovered(false)}
+      disabled={props.disabled}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: isSelected, disabled: props.disabled }}
+      style={composedStyle}
+    >
+      {organizedChildren}
+      <View style={indicatorStyle} />
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { View, type StyleProp, type ViewStyle } from "react-native";
+import { useMenu } from "../context";
+
+export interface MenuSeparatorProps {
+  render?: (props: MenuSeparatorProps) => React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function MenuSeparator(props: MenuSeparatorProps) {
+  const menu = useMenu();
+  const composedStyle = [menu.styles?.separator, props.style];
+
+  const Component = props.render ?? View;
+  return (
+    <Component
+      {...props}
+      role="separator"
+      style={composedStyle}
+    />
+  );
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { Text, type StyleProp, type TextStyle } from "react-native";
+import { useMenu } from "../context";
+
+export interface MenuShortcutProps {
+  children: string;
+  render?: (props: MenuShortcutProps) => React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function MenuShortcut(props: MenuShortcutProps) {
+  const menu = useMenu();
+  const composedStyle = [menu.styles?.shortcut, props.style];
+
+  const Component = props.render ?? Text;
+  return (
+    <Component {...props} style={composedStyle}>
+      {props.children}
+    </Component>
+  );
+}

package/src/components/menu/context.ts

@@ -1,6 +1,6 @@
-import type { LayoutPosition } from "../../hooks/use-relative-position";
 import { createContext, type Dispatch, useContext } from "react";
 import type { LayoutRectangle } from "react-native";
+import type { LayoutPosition } from "../../hooks/use-relative-position";
 import type { MenuStyles } from "./types";
 
 export interface MenuContext {
@@ -23,3 +23,20 @@ export const useMenu = () => {
   }
   return context;
 };
+
+export interface MenuRadioGroupContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+export const MenuRadioGroupContext = createContext<
+  MenuRadioGroupContextValue | undefined
+>(undefined);
+
+export const useMenuRadioGroup = () => {
+  const context = useContext(MenuRadioGroupContext);
+  if (!context) {
+    throw new Error("useMenuRadioGroup must be used within a Menu.RadioGroup");
+  }
+  return context;
+};

package/src/components/menu/index.ts

@@ -1,8 +1,15 @@
+import { MenuCheckboxItem } from "./components/menu-checkbox-item";
 import { MenuContent } from "./components/menu-content";
+import { MenuGroup } from "./components/menu-group";
 import { MenuItem } from "./components/menu-item";
+import { MenuLabel } from "./components/menu-label";
 import { MenuOverlay } from "./components/menu-overlay";
 import { MenuPortal } from "./components/menu-portal";
+import { MenuRadioGroup } from "./components/menu-radio-group";
+import { MenuRadioItem } from "./components/menu-radio-item";
 import { MenuRoot } from "./components/menu-root";
+import { MenuSeparator } from "./components/menu-separator";
+import { MenuShortcut } from "./components/menu-shortcut";
 import { MenuTrigger } from "./components/menu-trigger";
 
 export const Menu = {
@@ -12,12 +19,26 @@ export const Menu = {
   Overlay: MenuOverlay,
   Content: MenuContent,
   Item: MenuItem,
+  Group: MenuGroup,
+  Label: MenuLabel,
+  Separator: MenuSeparator,
+  CheckboxItem: MenuCheckboxItem,
+  RadioGroup: MenuRadioGroup,
+  RadioItem: MenuRadioItem,
+  Shortcut: MenuShortcut,
 };
 
+export type { MenuCheckboxItemProps } from "./components/menu-checkbox-item";
 export type { MenuContentProps } from "./components/menu-content";
+export type { MenuGroupProps } from "./components/menu-group";
 export type { MenuItemProps } from "./components/menu-item";
+export type { MenuLabelProps } from "./components/menu-label";
 export type { MenuOverlayProps } from "./components/menu-overlay";
 export type { MenuPortalProps } from "./components/menu-portal";
+export type { MenuRadioGroupProps } from "./components/menu-radio-group";
+export type { MenuRadioItemProps } from "./components/menu-radio-item";
 export type { MenuRootProps } from "./components/menu-root";
+export type { MenuSeparatorProps } from "./components/menu-separator";
+export type { MenuShortcutProps } from "./components/menu-shortcut";
 export type { MenuTriggerProps } from "./components/menu-trigger";
 export type { MenuStyles } from "./types";

package/src/components/menu/types.ts

@@ -1,11 +1,34 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { SvgProps } from "../../types/props.types";
 import type { MenuContentProps } from "./components/menu-content";
-import type { MenuItemProps } from "./components/menu-item";
 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 MenuRadioIndicatorState = "default" | "selected";
 
 export interface MenuStyles {
   content?: MenuContentProps["style"];
-  item?: Partial<Record<MenuButtonState, MenuItemProps["style"]>>;
+  item?: Partial<Record<MenuButtonState, StyleProp<ViewStyle>>>;
+  itemText?: StyleProp<TextStyle>;
+  itemIcon?: SvgProps;
   overlay?: MenuOverlayProps["style"];
+
+  group?: StyleProp<ViewStyle>;
+  label?: StyleProp<TextStyle>;
+  separator?: StyleProp<ViewStyle>;
+  checkboxItem?: Partial<Record<MenuCheckboxItemState, StyleProp<ViewStyle>>>;
+  checkboxIndicator?: StyleProp<TextStyle>;
+  radioGroup?: StyleProp<ViewStyle>;
+  radioItem?: Partial<Record<MenuRadioItemState, StyleProp<ViewStyle>>>;
+  radioIndicator?: Partial<
+    Record<MenuRadioIndicatorState, StyleProp<ViewStyle>>
+  >;
+  shortcut?: StyleProp<TextStyle>;
 }

package/src/components/menu/use-organized-children.tsx

@@ -0,0 +1,38 @@
+import React, { useMemo } from "react";
+import { Text } from "react-native";
+import { getElementProp } from "../../utils/element-utils";
+import { Icon } from "../icon";
+import { useMenu } from "./context";
+
+export function useOrganizedChildren(children: React.ReactNode) {
+  const menu = useMenu();
+
+  const organizedChildren = useMemo(() => {
+    if (typeof children === "string") {
+      return <Text style={menu.styles?.itemText}>{children}</Text>;
+    }
+    if (Array.isArray(children)) {
+      return children.map((child, index) => {
+        if (typeof child === "string") {
+          return (
+            <Text key={index} style={menu.styles?.itemText}>
+              {child}
+            </Text>
+          );
+        } else if (React.isValidElement(child) && child.type === Icon) {
+          return React.cloneElement(child as React.ReactElement<any>, {
+            key: child.key,
+            ...menu.styles?.itemIcon,
+            style: [
+              menu.styles?.itemIcon?.style,
+              getElementProp(child, "style"),
+            ],
+          });
+        }
+        return child;
+      });
+    }
+    return children;
+  }, [children, menu.styles?.itemIcon]);
+  return organizedChildren;
+}

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

@@ -4,9 +4,7 @@ import { useThemedStyles } from "../../../utils/use-themed-styles";
 export const useMenuVariantDefault = (): MenuStyles => {
   return useThemedStyles(
     ({ colors, radius, fontFamily, fontSize }): MenuStyles => ({
-      overlay: {
-        backgroundColor: "rgba(0, 0, 0, 0.5)",
-      },
+      overlay: {},
       content: {
         overflow: "hidden",
         backgroundColor: colors.surface,
@@ -21,16 +19,94 @@ export const useMenuVariantDefault = (): MenuStyles => {
       },
       item: {
         default: {
+          flexDirection: "row",
+          alignItems: "center",
           paddingVertical: 12,
           paddingHorizontal: 16,
-          fontFamily: fontFamily,
-          fontSize: fontSize,
-          color: colors.foreground,
+          gap: 8,
         },
         hovered: {
           backgroundColor: colors.muted,
         },
       },
+      itemText: {
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        color: colors.foreground,
+      },
+      itemIcon: {
+        color: colors.foreground,
+        size: fontSize * 1.25,
+      },
+      label: {
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+        fontFamily: fontFamily,
+        fontSize: fontSize * 0.75,
+        fontWeight: "600",
+        color: colors.mutedForeground,
+      },
+      separator: {
+        height: 1,
+        backgroundColor: colors.border,
+        marginVertical: 4,
+        marginHorizontal: 8,
+      },
+      checkboxItem: {
+        default: {
+          flexDirection: "row",
+          alignItems: "center",
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          gap: 8,
+        },
+        hovered: {
+          backgroundColor: colors.muted,
+        },
+        disabled: {
+          opacity: 0.5,
+        },
+      },
+      checkboxIndicator: {
+        fontSize: fontSize * 0.75,
+        fontWeight: "bold",
+        color: colors.foreground,
+        width: fontSize,
+        textAlign: "center",
+        marginLeft: "auto",
+      },
+      radioItem: {
+        default: {
+          flexDirection: "row",
+          alignItems: "center",
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          gap: 8,
+        },
+        hovered: {
+          backgroundColor: colors.muted,
+        },
+        disabled: {
+          opacity: 0.5,
+        },
+      },
+      radioIndicator: {
+        default: {
+          width: 8,
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: "transparent",
+          marginLeft: "auto",
+        },
+        selected: {
+          backgroundColor: colors.foreground,
+        },
+      },
+      shortcut: {
+        fontSize: fontSize * 0.75,
+        fontFamily: fontFamily,
+        color: colors.mutedForeground,
+      },
     }),
   );
 };

package/src/components/portal/portal.tsx

@@ -1,6 +1,10 @@
 import { useEffect, useSyncExternalStore } from "react";
 import { Platform, View } from "react-native";
-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>;
@@ -11,7 +15,10 @@ 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(),
 };
 
@@ -30,7 +37,11 @@ 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);
@@ -48,7 +59,10 @@ function removePortal(hostName: string, name: string) {
   emit();
 }
 
-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>();
   if (portalMap.size === 0) return null;
@@ -75,7 +89,11 @@ export function PortalHost({ name = DEFAULT_PORTAL_HOST, container }: 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/themes/provider.tsx

@@ -7,7 +7,7 @@ import {
 } from "react";
 import { useColorScheme } from "react-native";
 import type { ToastVariants } from "../components/toast/variants";
-import type { SvgProps } from "../types/props.types";
+import type { IconComponent } from "../types/element.types";
 import type { DeepPartial } from "../types/util.types";
 import { defaultThemeAssets } from "./default";
 import type {
@@ -34,9 +34,7 @@ interface ThemeContext {
 
 export interface ComponentsConfig {
   toast?: {
-    icons?: Partial<
-      Record<keyof typeof ToastVariants, (props: SvgProps) => React.ReactNode>
-    >;
+    icons?: Partial<Record<keyof typeof ToastVariants, IconComponent>>;
   };
 }
 

package/src/types/element.types.ts

@@ -1,4 +1,5 @@
 import type { HostInstance } from "react-native";
+import type { SvgProps } from "./props.types";
 
 export type ViewRef = HostInstance;
 export type TextInputRef = HostInstance & {
@@ -10,5 +11,13 @@ export type TextInputRef = HostInstance & {
   setSelection: (start: number, end?: number) => void;
 };
 
-export type TextChildren = string | number | boolean | null | undefined | string[];
+export type TextChildren =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | string[];
 export type ElementChildren = React.ReactElement | React.ReactElement[];
+
+export type IconComponent = (props: SvgProps) => React.ReactElement;

package/src/utils/element-utils.ts

@@ -0,0 +1,12 @@
+import React from "react";
+
+export const getElementProp = <T extends React.ElementType>(
+  element: React.ReactNode,
+  propName: string,
+): React.ComponentProps<T>[string] | undefined => {
+  if (!React.isValidElement(element)) return undefined;
+  if (!element.props) return undefined;
+  if (typeof element.props !== "object") return undefined;
+  if (!(propName in element.props)) return undefined;
+  return (element.props as any)[propName];
+};