@korsolutions/ui 0.0.86 → 0.0.88

package/src/components/alert-dialog/variants/default.tsx

@@ -40,6 +40,7 @@ export const useAlertDialogVariantDefault = (size: Size): AlertDialogStyles => {
         },
         title: {
           fontSize: fontSize * 1.25,
+          lineHeight: Math.round(fontSize * 1.25 * 1.25),
           fontWeight: "600",
           color: colors.foreground,
           fontFamily,
@@ -49,7 +50,7 @@ export const useAlertDialogVariantDefault = (size: Size): AlertDialogStyles => {
           fontSize,
           color: colors.mutedForeground,
           fontFamily,
-          lineHeight: fontSize * 1.5,
+          lineHeight: Math.round(fontSize * 1.25),
         },
         footer: {
           flexDirection: "row",
@@ -70,6 +71,7 @@ export const useAlertDialogVariantDefault = (size: Size): AlertDialogStyles => {
         cancelText: {
           color: colors.foreground,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           fontWeight: "500",
           fontFamily,
         },
@@ -84,6 +86,7 @@ export const useAlertDialogVariantDefault = (size: Size): AlertDialogStyles => {
         actionText: {
           color: colors.primaryForeground,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           fontWeight: "500",
           fontFamily,
         },

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

@@ -21,6 +21,7 @@ export function useAvatarVariantDefault(): AvatarStyles {
       fallback: {
         fontFamily,
         fontSize,
+        lineHeight: Math.round(fontSize * 1.25),
         color: colors.foreground,
         textAlign: "center",
         verticalAlign: "middle",

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

@@ -17,6 +17,7 @@ export const useBadgeVariantDefault = (): BadgeStyles => {
       text: {
         color: colors.primaryForeground,
         fontSize: fontSize * 0.75,
+        lineHeight: Math.round(fontSize * 0.75 * 1.25),
         fontWeight: "600",
         fontFamily,
       },

package/src/components/badge/variants/secondary.tsx

@@ -17,6 +17,7 @@ export const useBadgeVariantSecondary = (): BadgeStyles => {
       text: {
         color: colors.secondaryForeground,
         fontSize: fontSize * 0.75,
+        lineHeight: Math.round(fontSize * 0.75 * 1.25),
         fontWeight: "600",
         fontFamily,
       },

package/src/components/button/button.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import {
-  ActivityIndicator,
   Pressable,
   type PressableProps,
   type StyleProp,
@@ -11,6 +10,7 @@ import { useOrganizedChildren } from "../../hooks/use-organized-children";
 import { useComponentConfig } from "../../themes/provider";
 import { mergeStyles } from "../../utils/calculate-styles";
 import type { Size } from "../../utils/size-scale";
+import { Spinner } from "../spinner";
 import type { ButtonState } from "./types";
 import { ButtonVariants } from "./variants";
 
@@ -69,7 +69,7 @@ export function Button(props: ButtonProps) {
       style={[variantStyles.root?.default, variantStyles.root?.[state], props.style]}
     >
       {organizedChildren}
-      {props.isLoading && <ActivityIndicator {...spinnerProps} />}
+      {props.isLoading && <Spinner {...spinnerProps} />}
     </Pressable>
   );
 }

package/src/components/button/types.ts

@@ -1,5 +1,6 @@
-import type { ActivityIndicatorProps, TextStyle, ViewStyle } from "react-native";
+import type { TextStyle, ViewStyle } from "react-native";
 import type { IconProps } from "../icon";
+import type { SpinnerProps } from "../spinner";
 
 export type ButtonState = "default" | "disabled" | "loading" | "hovered";
 
@@ -7,5 +8,5 @@ export interface ButtonStyles {
   root?: Partial<Record<ButtonState, ViewStyle>>;
   text?: Partial<Record<ButtonState, TextStyle>>;
   icon?: Partial<Record<ButtonState, IconProps>>;
-  spinner?: Partial<Record<ButtonState, ActivityIndicatorProps>>;
+  spinner?: Partial<Record<ButtonState, SpinnerProps>>;
 }

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

@@ -39,6 +39,7 @@ export const useButtonVariantDefault = (size: Size): ButtonStyles => {
         default: {
           color: colors.primaryForeground,
           fontSize: sizeStyles.fontSize,
+          lineHeight: sizeStyles.lineHeight,
           fontFamily,
         },
       },

package/src/components/button/variants/ghost.tsx

@@ -37,6 +37,7 @@ export const useButtonVariantGhost = (size: Size): ButtonStyles => {
         default: {
           color: colors.foreground,
           fontSize: sizeStyles.fontSize,
+          lineHeight: sizeStyles.lineHeight,
           fontFamily,
         },
         disabled: {

package/src/components/button/variants/secondary.tsx

@@ -39,6 +39,7 @@ export const useButtonVariantSecondary = (size: Size): ButtonStyles => {
         default: {
           color: colors.secondaryForeground,
           fontSize: sizeStyles.fontSize,
+          lineHeight: sizeStyles.lineHeight,
           fontFamily,
         },
         disabled: {

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

@@ -22,6 +22,7 @@ export const useCalendarVariantDefault = (): CalendarStyles => {
       },
       headerTitle: {
         fontSize: fontSize * 1.125,
+        lineHeight: Math.round(fontSize * 1.125 * 1.25),
         fontWeight: "600",
         fontFamily,
         color: colors.foreground,
@@ -72,6 +73,7 @@ export const useCalendarVariantDefault = (): CalendarStyles => {
       },
       weekLabel: {
         fontSize: fontSize * 0.875,
+        lineHeight: Math.round(fontSize * 0.875 * 1.25),
         fontWeight: "500",
         fontFamily,
         color: colors.mutedForeground,
@@ -113,6 +115,7 @@ export const useCalendarVariantDefault = (): CalendarStyles => {
       dayText: {
         default: {
           fontSize,
+          lineHeight: Math.round(fontSize * 1.25),
           fontFamily,
           color: colors.foreground,
           fontWeight: "400",

package/src/components/calendar/timeline/variants/default.tsx

@@ -29,6 +29,7 @@ export const useTimelineVariantDefault = (): TimelineStyles => {
       },
       timeText: {
         fontSize: fontSize * 0.75,
+        lineHeight: Math.round(fontSize * 0.75 * 1.25),
         fontWeight: "500",
         fontFamily,
         color: colors.mutedForeground,

package/src/components/calendar/week-calendar/variants/default.tsx

@@ -21,6 +21,7 @@ export const useWeekCalendarVariantDefault = (): WeekCalendarStyles => {
       },
       headerTitle: {
         fontSize: fontSize * 1.125,
+        lineHeight: Math.round(fontSize * 1.125 * 1.25),
         fontWeight: "600",
         fontFamily,
         color: colors.foreground,
@@ -71,6 +72,7 @@ export const useWeekCalendarVariantDefault = (): WeekCalendarStyles => {
       },
       weekLabel: {
         fontSize: fontSize * 0.875,
+        lineHeight: Math.round(fontSize * 0.875 * 1.25),
         fontWeight: "500",
         fontFamily,
         color: colors.mutedForeground,
@@ -111,6 +113,7 @@ export const useWeekCalendarVariantDefault = (): WeekCalendarStyles => {
       dayText: {
         default: {
           fontSize,
+          lineHeight: Math.round(fontSize * 1.25),
           fontFamily,
           color: colors.foreground,
           fontWeight: "400",

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

@@ -22,6 +22,7 @@ export function useCardVariantDefault(): CardStyles {
         default: {
           fontFamily,
           fontSize: fontSize * 1.25,
+          lineHeight: Math.round(fontSize * 1.25 * 1.25),
           fontWeight: "600",
           color: colors.foreground,
         },

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

@@ -48,6 +48,7 @@ export const useCheckboxVariantDefault = (): CheckboxStyles => {
         default: {
           color: colors.foreground,
           fontSize,
+          lineHeight: Math.round(fontSize * 1.25),
           fontFamily,
           fontWeight: "500",
         },
@@ -59,6 +60,7 @@ export const useCheckboxVariantDefault = (): CheckboxStyles => {
         default: {
           color: colors.mutedForeground,
           fontSize: fontSize * 0.875,
+          lineHeight: Math.round(fontSize * 0.875 * 1.25),
           fontFamily,
           marginTop: 2,
         },

package/src/components/checkbox/variants/outlined.tsx

@@ -63,6 +63,7 @@ export const useCheckboxVariantOutlined = (): CheckboxStyles => {
         default: {
           color: colors.foreground,
           fontSize,
+          lineHeight: Math.round(fontSize * 1.25),
           fontFamily,
           fontWeight: "500",
         },
@@ -74,6 +75,7 @@ export const useCheckboxVariantOutlined = (): CheckboxStyles => {
         default: {
           color: colors.mutedForeground,
           fontSize: fontSize * 0.875,
+          lineHeight: Math.round(fontSize * 0.875 * 1.25),
           fontFamily,
           marginTop: 2,
         },

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

@@ -27,6 +27,7 @@ export function useComboboxVariantDefault(size: Size): ComboboxStyles {
             minHeight: s.height,
             fontFamily,
             fontSize: s.fontSize,
+            lineHeight: s.lineHeight,
             color: colors.foreground,
             outlineWidth: 0,
             pointerEvents: "auto",
@@ -76,6 +77,7 @@ export function useComboboxVariantDefault(size: Size): ComboboxStyles {
           paddingHorizontal: s.paddingHorizontal,
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           color: colors.foreground,
           borderRadius: radius / 2,
         },
@@ -95,6 +97,7 @@ export function useComboboxVariantDefault(size: Size): ComboboxStyles {
           paddingHorizontal: s.paddingHorizontal,
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           color: colors.mutedForeground,
           textAlign: "center",
         },

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

@@ -20,6 +20,7 @@ export function useEmptyVariantDefault(): EmptyStyles {
       title: {
         fontFamily: fontFamily,
         fontSize: fontSize,
+        lineHeight: Math.round(fontSize * 1.25),
         color: colors.foreground,
         textAlign: "center",
         fontWeight: "600",
@@ -27,6 +28,7 @@ export function useEmptyVariantDefault(): EmptyStyles {
       description: {
         fontFamily: fontFamily,
         fontSize: fontSize * 0.875,
+        lineHeight: Math.round(fontSize * 0.875 * 1.25),
         color: colors.mutedForeground,
         textAlign: "center",
       },

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

@@ -11,17 +11,20 @@ export const useFieldVariantDefault = (): FieldStyles => {
       label: {
         fontFamily,
         fontSize: fontSize * 0.875,
+        lineHeight: Math.round(fontSize * 0.875 * 1.25),
         fontWeight: "600",
         color: colors.foreground,
       },
       description: {
         fontFamily,
         fontSize: fontSize * 0.875,
+        lineHeight: Math.round(fontSize * 0.875 * 1.25),
         color: colors.mutedForeground,
       },
       error: {
         fontFamily,
         fontSize: fontSize * 0.875,
+        lineHeight: Math.round(fontSize * 0.875 * 1.25),
         color: colors.danger,
       },
     }),

package/src/components/index.ts

@@ -23,6 +23,7 @@ export * from "./radio-group";
 export * from "./scroll-bar";
 export * from "./select";
 export * from "./separator";
+export * from "./sidebar";
 export * from "./spinner";
 export * from "./table";
 export * from "./tabs";

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

@@ -19,6 +19,7 @@ export function useInputVariantDefault(size: Size): InputStyles {
           paddingHorizontal: s.paddingHorizontal,
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           height: s.height,
           color: colors.foreground,
           outlineWidth: 0,

package/src/components/input/variants/secondary.tsx

@@ -19,6 +19,7 @@ export function useInputVariantSecondary(size: Size): InputStyles {
           paddingHorizontal: s.paddingHorizontal,
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           height: s.height,
           color: colors.foreground,
           outlineWidth: 0,

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

@@ -6,6 +6,7 @@ export function useLinkVariantDefault(): TextStyle {
     ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => ({
       color: colors.primary,
       fontSize,
+      lineHeight: Math.round(fontSize * 1.25),
       fontFamily,
       textDecorationLine: "underline",
       letterSpacing,

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

@@ -32,6 +32,7 @@ export const useMenuVariantDefault = (): MenuStyles => {
       itemText: {
         fontFamily: fontFamily,
         fontSize: fontSize,
+        lineHeight: Math.round(fontSize * 1.25),
         color: colors.foreground,
       },
       itemIcon: {
@@ -43,6 +44,7 @@ export const useMenuVariantDefault = (): MenuStyles => {
         paddingHorizontal: 16,
         fontFamily: fontFamily,
         fontSize: fontSize * 0.75,
+        lineHeight: Math.round(fontSize * 0.75 * 1.25),
         fontWeight: "600",
         color: colors.mutedForeground,
       },
@@ -89,6 +91,7 @@ export const useMenuVariantDefault = (): MenuStyles => {
       },
       shortcut: {
         fontSize: fontSize * 0.75,
+        lineHeight: Math.round(fontSize * 0.75 * 1.25),
         fontFamily: fontFamily,
         color: colors.mutedForeground,
       },

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

@@ -41,6 +41,7 @@ export function usePhoneInputVariantDefault(size: Size): PhoneInputStyles {
         default: {
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           color: colors.foreground,
         },
         disabled: {
@@ -61,6 +62,7 @@ export function usePhoneInputVariantDefault(size: Size): PhoneInputStyles {
           paddingHorizontal: s.paddingHorizontal,
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           color: colors.foreground,
           height: "100%",
           outlineWidth: 0,
@@ -105,6 +107,7 @@ export function usePhoneInputVariantDefault(size: Size): PhoneInputStyles {
         default: {
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           color: colors.foreground,
         },
       },
@@ -117,6 +120,7 @@ export function usePhoneInputVariantDefault(size: Size): PhoneInputStyles {
           paddingHorizontal: s.paddingHorizontal * 0.75,
           fontFamily,
           fontSize: s.fontSize * 0.875,
+          lineHeight: Math.round(s.fontSize * 0.875 * 1.25),
           color: colors.foreground,
           marginBottom: 4,
           outlineWidth: 0,

package/src/components/portal/portal.web.tsx

@@ -6,6 +6,20 @@ export function PortalHost() {
   return <></>;
 }
 
+/**
+ * Prevent scroll-lock libraries (e.g. react-remove-scroll used by Radix/Vaul
+ * modals) from blocking scroll events inside the portal. These libraries
+ * register document-level wheel/touchmove listeners that call
+ * preventDefault() on events originating outside their managed "shards".
+ * Stopping propagation at the portal container keeps those handlers from
+ * firing while still allowing native scroll within the portal content.
+ */
+function preventScrollLock(container: HTMLElement) {
+  const stop = (e: Event) => e.stopPropagation();
+  container.addEventListener("wheel", stop);
+  container.addEventListener("touchmove", stop);
+}
+
 export function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }: PortalProps) {
   const [container] = useState(() => {
     let container = document.getElementById(hostName);
@@ -15,6 +29,7 @@ export function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }: Porta
       container.id = hostName;
       container.style.pointerEvents = "auto";
       document.body.appendChild(container);
+      preventScrollLock(container);
     }
     return container;
   });

package/src/components/radio-group/variants/default.tsx

@@ -55,6 +55,7 @@ export const useRadioGroupVariantDefault = (): RadioGroupStyles => {
         default: {
           color: colors.foreground,
           fontSize,
+          lineHeight: Math.round(fontSize * 1.25),
           fontFamily,
           fontWeight: "500",
         },
@@ -66,6 +67,7 @@ export const useRadioGroupVariantDefault = (): RadioGroupStyles => {
         default: {
           color: colors.mutedForeground,
           fontSize: fontSize * 0.875,
+          lineHeight: Math.round(fontSize * 0.875 * 1.25),
           fontFamily,
           marginTop: 2,
         },

package/src/components/radio-group/variants/outlined.tsx

@@ -67,6 +67,7 @@ export const useRadioGroupVariantOutlined = (): RadioGroupStyles => {
         default: {
           color: colors.foreground,
           fontSize,
+          lineHeight: Math.round(fontSize * 1.25),
           fontFamily,
           fontWeight: "500",
         },
@@ -78,6 +79,7 @@ export const useRadioGroupVariantOutlined = (): RadioGroupStyles => {
         default: {
           color: colors.mutedForeground,
           fontSize: fontSize * 0.875,
+          lineHeight: Math.round(fontSize * 0.875 * 1.25),
           fontFamily,
           marginTop: 2,
         },

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

@@ -29,6 +29,7 @@ export function useSelectVariantDefault(size: Size): SelectStyles {
         default: {
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           color: colors.foreground,
         },
         disabled: {
@@ -39,6 +40,7 @@ export function useSelectVariantDefault(size: Size): SelectStyles {
         default: {
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           color: colors.mutedForeground,
         },
         disabled: {
@@ -69,6 +71,7 @@ export function useSelectVariantDefault(size: Size): SelectStyles {
           paddingHorizontal: s.paddingHorizontal,
           fontFamily,
           fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
           color: colors.foreground,
           borderRadius: radius / 2,
         },

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { ScrollView, type StyleProp, type ViewStyle } from "react-native";
+import { useSidebar } from "../context";
+
+export interface SidebarContentProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SidebarContent(props: SidebarContentProps) {
+  const { children, style } = props;
+  const sidebar = useSidebar();
+
+  return (
+    <ScrollView style={[sidebar.styles?.content, style]} showsVerticalScrollIndicator={false}>
+      {children}
+    </ScrollView>
+  );
+}

package/src/components/sidebar/components/sidebar-footer.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useSidebar } from "../context";
+
+export interface SidebarFooterProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SidebarFooter(props: SidebarFooterProps) {
+  const { children, style } = props;
+  const sidebar = useSidebar();
+
+  return <View style={[sidebar.styles?.footer, style]}>{children}</View>;
+}

package/src/components/sidebar/components/sidebar-group-label.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { type StyleProp, Text, type TextStyle } from "react-native";
+import { useSidebar } from "../context";
+
+export interface SidebarGroupLabelProps {
+  children?: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function SidebarGroupLabel(props: SidebarGroupLabelProps) {
+  const { children, style } = props;
+  const sidebar = useSidebar();
+
+  return <Text style={[sidebar.styles?.groupLabel, style]}>{children}</Text>;
+}

package/src/components/sidebar/components/sidebar-group.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useSidebar } from "../context";
+
+export interface SidebarGroupProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SidebarGroup(props: SidebarGroupProps) {
+  const { children, style } = props;
+  const sidebar = useSidebar();
+
+  return <View style={[sidebar.styles?.group, style]}>{children}</View>;
+}

package/src/components/sidebar/components/sidebar-header.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useSidebar } from "../context";
+
+export interface SidebarHeaderProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SidebarHeader(props: SidebarHeaderProps) {
+  const { children, style } = props;
+  const sidebar = useSidebar();
+
+  return <View style={[sidebar.styles?.header, style]}>{children}</View>;
+}

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

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import {
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  StyleSheet,
+  type ViewStyle,
+} from "react-native";
+import { useOrganizedChildren } from "../../../hooks/use-organized-children";
+import { useSidebar } from "../context";
+import type { SidebarMenuButtonState } from "../types";
+
+export interface SidebarMenuItemProps extends Omit<PressableProps, "style"> {
+  children?: React.ReactNode;
+
+  /** Mark as active item */
+  isActive?: boolean;
+
+  /** Size variant */
+  size?: "default" | "lg";
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SidebarMenuItem(props: SidebarMenuItemProps) {
+  const { children, isActive, size = "default", style, onPress, ...rest } = props;
+  const sidebar = useSidebar();
+  const [isHovered, setIsHovered] = useState(false);
+  const styles = sidebar.styles;
+
+  const state: SidebarMenuButtonState = isActive ? "active" : isHovered ? "hovered" : "default";
+
+  const textStyle = StyleSheet.flatten([
+    styles?.menuItemText?.default,
+    styles?.menuItemText?.[state],
+  ]);
+
+  const iconProps = StyleSheet.flatten([
+    styles?.menuItemIcon?.default,
+    styles?.menuItemIcon?.[state],
+  ]);
+
+  const organizedChildren = useOrganizedChildren(children, textStyle, iconProps);
+
+  return (
+    <Pressable
+      {...rest}
+      onPress={onPress}
+      onHoverIn={() => setIsHovered(true)}
+      onHoverOut={() => setIsHovered(false)}
+      style={[
+        styles?.menuItem?.default,
+        state !== "default" && styles?.menuItem?.[state],
+        size === "lg" && { minHeight: 48, paddingVertical: 8 },
+        style,
+      ]}
+    >
+      {organizedChildren}
+    </Pressable>
+  );
+}

package/src/components/sidebar/components/sidebar-menu-sub.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useSidebar } from "../context";
+
+export interface SidebarMenuSubProps {
+  children?: React.ReactNode;
+
+  /** Whether the submenu is open (controlled) */
+  open?: boolean;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SidebarMenuSub(props: SidebarMenuSubProps) {
+  const { children, open = true, style } = props;
+  const sidebar = useSidebar();
+
+  if (!open) {
+    return null;
+  }
+
+  return <View style={[sidebar.styles?.menuSub, style]}>{children}</View>;
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useSidebar } from "../context";
+
+export interface SidebarMenuProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SidebarMenu(props: SidebarMenuProps) {
+  const { children, style } = props;
+  const sidebar = useSidebar();
+
+  return <View style={[sidebar.styles?.menu, style]}>{children}</View>;
+}