@wireservers-ui/react-natives 2.0.0 → 2.0.2-rc.0

package/src/kbd/types.ts

@@ -1,7 +1,7 @@
-import type { View } from 'react-native';
-
-export interface KbdProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  children: React.ReactNode;
-}
+import type { View } from 'react-native';
+
+export interface KbdProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  children: React.ReactNode;
+}

package/src/link/index.ts

@@ -1,4 +1,4 @@
-export { Link } from './link';
-export { LinkText } from './link-text';
-
-export type { LinkProps, LinkTextProps } from './types';
+export { Link } from './link';
+export { LinkText } from './link-text';
+
+export type { LinkProps, LinkTextProps } from './types';

package/src/link/link-text.tsx

@@ -1,19 +1,19 @@
-import React from 'react';
-import { Text } from 'react-native';
-import type { LinkTextProps } from './types';
-import { linkTextStyle } from './styles';
-
-export const LinkText = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  LinkTextProps
->(({ className, ...props }, ref) => {
-  return (
-    <Text
-      ref={ref}
-      className={linkTextStyle({ class: className })}
-      {...props}
-    />
-  );
-});
-
-LinkText.displayName = 'LinkText';
+import React from 'react';
+import { Text } from 'react-native';
+import type { LinkTextProps } from './types';
+import { linkTextStyle } from './styles';
+
+export const LinkText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  LinkTextProps
+>(({ className, ...props }, ref) => {
+  return (
+    <Text
+      ref={ref}
+      className={linkTextStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+LinkText.displayName = 'LinkText';

package/src/link/link.tsx

@@ -1,31 +1,31 @@
-import React, { useCallback } from 'react';
-import { Linking, Pressable } from 'react-native';
-import type { LinkProps } from './types';
-import { linkStyle } from './styles';
-
-export const Link = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  LinkProps
->(({ className, href, isExternal, onPress, ...props }, ref) => {
-  const handlePress = useCallback(
-    (e: any) => {
-      onPress?.(e);
-      if (href && isExternal) {
-        Linking.openURL(href);
-      }
-    },
-    [href, isExternal, onPress],
-  );
-
-  return (
-    <Pressable
-      ref={ref}
-      role="link"
-      onPress={handlePress}
-      className={linkStyle({ class: className })}
-      {...props}
-    />
-  );
-});
-
-Link.displayName = 'Link';
+import React, { useCallback } from 'react';
+import { Linking, Pressable } from 'react-native';
+import type { LinkProps } from './types';
+import { linkStyle } from './styles';
+
+export const Link = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  LinkProps
+>(({ className, href, isExternal, onPress, ...props }, ref) => {
+  const handlePress = useCallback(
+    (e: any) => {
+      onPress?.(e);
+      if (href && isExternal) {
+        Linking.openURL(href);
+      }
+    },
+    [href, isExternal, onPress],
+  );
+
+  return (
+    <Pressable
+      ref={ref}
+      role="link"
+      onPress={handlePress}
+      className={linkStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+Link.displayName = 'Link';

package/src/link/styles.ts

@@ -1,19 +1,19 @@
-import { tv } from 'tailwind-variants';
-
-export const linkStyle = tv({
-  base: 'web:cursor-pointer',
-});
-
-export const linkTextStyle = tv({
-  base: 'text-primary-600 underline data-[hover=true]:text-primary-700 data-[active=true]:text-primary-800',
-  variants: {
-    size: {
-      sm: 'text-sm',
-      md: 'text-base',
-      lg: 'text-lg',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
+import { tv } from 'tailwind-variants';
+
+export const linkStyle = tv({
+  base: 'web:cursor-pointer',
+});
+
+export const linkTextStyle = tv({
+  base: 'text-primary-600 underline data-[hover=true]:text-primary-700 data-[active=true]:text-primary-800',
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/link/types.ts

@@ -1,13 +1,13 @@
-import type { Pressable, Text as RNText } from 'react-native';
-
-export interface LinkProps
-  extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-  href?: string;
-  isExternal?: boolean;
-}
-
-export interface LinkTextProps
-  extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
+import type { Pressable, Text as RNText } from 'react-native';
+
+export interface LinkProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  href?: string;
+  isExternal?: boolean;
+}
+
+export interface LinkTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}

package/src/list/index.ts

@@ -1,2 +1,2 @@
-export { List, ListProvider, useListContext, ListItem, ListItemText, ListItemDescription, ListItemIcon } from './list';
-export type { ListProps, ListItemProps, ListItemTextProps, ListItemDescriptionProps, ListItemIconProps, ListVariant, ListContextValue } from './types';
+export { List, ListProvider, useListContext, ListItem, ListItemText, ListItemDescription, ListItemIcon } from './list';
+export type { ListProps, ListItemProps, ListItemTextProps, ListItemDescriptionProps, ListItemIconProps, ListVariant, ListContextValue } from './types';

package/src/list/list.tsx

@@ -1,55 +1,55 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { ListProps, ListItemProps, ListItemTextProps, ListItemDescriptionProps, ListItemIconProps, ListContextValue } from './types';
-import { listStyle, listItemStyle, listItemBulletStyle, listItemTextStyle, listItemDescriptionStyle, listItemIconStyle } from './styles';
-
-export const [ListProvider, useListContext] = createComponentContext<ListContextValue>('List');
-
-export const List = React.forwardRef<React.ElementRef<typeof View>, ListProps>(
-  ({ className, variant = 'unordered', children, ...props }, ref) => {
-    let itemIndex = 0;
-    const indexedChildren = React.Children.map(children, (child) => {
-      if (React.isValidElement(child) && (child.type as any).displayName === 'ListItem') {
-        return React.cloneElement(child as React.ReactElement<any>, { index: itemIndex++ });
-      }
-      return child;
-    });
-    return (
-      <ListProvider value={{ variant }}>
-        <View ref={ref} className={listStyle({ class: className })} accessibilityRole="list" {...props}>{indexedChildren}</View>
-      </ListProvider>
-    );
-  },
-);
-List.displayName = 'List';
-
-export const ListItem = React.forwardRef<React.ElementRef<typeof View>, ListItemProps>(
-  ({ className, index, children, ...props }, ref) => {
-    const { variant } = useListContext();
-    return (
-      <View ref={ref} className={listItemStyle({ class: className })} accessibilityRole="text" {...props}>
-        <Text className={listItemBulletStyle({})}>
-          {variant === 'ordered' && index !== undefined ? `${index + 1}.` : '\u2022'}
-        </Text>
-        <View style={{ flex: 1 }}>{children}</View>
-      </View>
-    );
-  },
-);
-ListItem.displayName = 'ListItem';
-
-export const ListItemText = React.forwardRef<React.ElementRef<typeof Text>, ListItemTextProps>(({ className, ...props }, ref) => {
-  return <Text ref={ref} className={listItemTextStyle({ class: className })} {...props} />;
-});
-ListItemText.displayName = 'ListItemText';
-
-export const ListItemDescription = React.forwardRef<React.ElementRef<typeof Text>, ListItemDescriptionProps>(({ className, ...props }, ref) => {
-  return <Text ref={ref} className={listItemDescriptionStyle({ class: className })} {...props} />;
-});
-ListItemDescription.displayName = 'ListItemDescription';
-
-export const ListItemIcon = React.forwardRef<any, ListItemIconProps>(({ as: AsComp, className, ...props }, ref) => {
-  return <AsComp ref={ref} className={listItemIconStyle({ class: className })} {...props} />;
-});
-ListItemIcon.displayName = 'ListItemIcon';
+import React from 'react';
+import { View, Text } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { ListProps, ListItemProps, ListItemTextProps, ListItemDescriptionProps, ListItemIconProps, ListContextValue } from './types';
+import { listStyle, listItemStyle, listItemBulletStyle, listItemTextStyle, listItemDescriptionStyle, listItemIconStyle } from './styles';
+
+export const [ListProvider, useListContext] = createComponentContext<ListContextValue>('List');
+
+export const List = React.forwardRef<React.ElementRef<typeof View>, ListProps>(
+  ({ className, variant = 'unordered', children, ...props }, ref) => {
+    let itemIndex = 0;
+    const indexedChildren = React.Children.map(children, (child) => {
+      if (React.isValidElement(child) && (child.type as any).displayName === 'ListItem') {
+        return React.cloneElement(child as React.ReactElement<any>, { index: itemIndex++ });
+      }
+      return child;
+    });
+    return (
+      <ListProvider value={{ variant }}>
+        <View ref={ref} className={listStyle({ class: className })} accessibilityRole="list" {...props}>{indexedChildren}</View>
+      </ListProvider>
+    );
+  },
+);
+List.displayName = 'List';
+
+export const ListItem = React.forwardRef<React.ElementRef<typeof View>, ListItemProps>(
+  ({ className, index, children, ...props }, ref) => {
+    const { variant } = useListContext();
+    return (
+      <View ref={ref} className={listItemStyle({ class: className })} accessibilityRole="text" {...props}>
+        <Text className={listItemBulletStyle({})}>
+          {variant === 'ordered' && index !== undefined ? `${index + 1}.` : '\u2022'}
+        </Text>
+        <View style={{ flex: 1 }}>{children}</View>
+      </View>
+    );
+  },
+);
+ListItem.displayName = 'ListItem';
+
+export const ListItemText = React.forwardRef<React.ElementRef<typeof Text>, ListItemTextProps>(({ className, ...props }, ref) => {
+  return <Text ref={ref} className={listItemTextStyle({ class: className })} {...props} />;
+});
+ListItemText.displayName = 'ListItemText';
+
+export const ListItemDescription = React.forwardRef<React.ElementRef<typeof Text>, ListItemDescriptionProps>(({ className, ...props }, ref) => {
+  return <Text ref={ref} className={listItemDescriptionStyle({ class: className })} {...props} />;
+});
+ListItemDescription.displayName = 'ListItemDescription';
+
+export const ListItemIcon = React.forwardRef<any, ListItemIconProps>(({ as: AsComp, className, ...props }, ref) => {
+  return <AsComp ref={ref} className={listItemIconStyle({ class: className })} {...props} />;
+});
+ListItemIcon.displayName = 'ListItemIcon';

package/src/list/styles.ts

@@ -1,8 +1,8 @@
-import { tv } from 'tailwind-variants';
-
-export const listStyle = tv({ base: 'gap-1', variants: {} });
-export const listItemStyle = tv({ base: 'flex-row items-start gap-2 py-1', variants: {} });
-export const listItemBulletStyle = tv({ base: 'text-typography-400 mt-0.5', variants: {} });
-export const listItemTextStyle = tv({ base: 'text-sm text-typography-700 flex-1', variants: {} });
-export const listItemDescriptionStyle = tv({ base: 'text-xs text-typography-400', variants: {} });
-export const listItemIconStyle = tv({ base: 'h-4 w-4 text-typography-400 mt-0.5', variants: {} });
+import { tv } from 'tailwind-variants';
+
+export const listStyle = tv({ base: 'gap-1', variants: {} });
+export const listItemStyle = tv({ base: 'flex-row items-start gap-2 py-1', variants: {} });
+export const listItemBulletStyle = tv({ base: 'text-typography-400 mt-0.5', variants: {} });
+export const listItemTextStyle = tv({ base: 'text-sm text-typography-700 flex-1', variants: {} });
+export const listItemDescriptionStyle = tv({ base: 'text-xs text-typography-400', variants: {} });
+export const listItemIconStyle = tv({ base: 'h-4 w-4 text-typography-400 mt-0.5', variants: {} });

package/src/list/types.ts

@@ -1,17 +1,17 @@
-import type { View, Text as RNText } from 'react-native';
-
-export type ListVariant = 'unordered' | 'ordered';
-
-export interface ListContextValue { variant: ListVariant; }
-
-export interface ListProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  variant?: ListVariant;
-}
-export interface ListItemProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  index?: number;
-}
-export interface ListItemTextProps extends React.ComponentPropsWithoutRef<typeof RNText> { className?: string; }
-export interface ListItemDescriptionProps extends React.ComponentPropsWithoutRef<typeof RNText> { className?: string; }
-export interface ListItemIconProps { as: React.ElementType; className?: string; }
+import type { View, Text as RNText } from 'react-native';
+
+export type ListVariant = 'unordered' | 'ordered';
+
+export interface ListContextValue { variant: ListVariant; }
+
+export interface ListProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  variant?: ListVariant;
+}
+export interface ListItemProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  index?: number;
+}
+export interface ListItemTextProps extends React.ComponentPropsWithoutRef<typeof RNText> { className?: string; }
+export interface ListItemDescriptionProps extends React.ComponentPropsWithoutRef<typeof RNText> { className?: string; }
+export interface ListItemIconProps { as: React.ElementType; className?: string; }

package/src/menu/index.ts

@@ -1,2 +1,2 @@
-export { Menu, MenuProvider, useMenuContext, MenuTrigger, MenuContent, MenuItem, MenuItemText, MenuItemIcon, MenuSeparator, MenuGroup, MenuGroupTitle } from './menu';
-export type { MenuProps, MenuTriggerProps, MenuContentProps, MenuItemProps, MenuItemTextProps, MenuItemIconProps, MenuSeparatorProps, MenuGroupProps, MenuGroupTitleProps, MenuContextValue } from './types';
+export { Menu, MenuProvider, useMenuContext, MenuTrigger, MenuContent, MenuItem, MenuItemText, MenuItemIcon, MenuSeparator, MenuGroup, MenuGroupTitle } from './menu';
+export type { MenuProps, MenuTriggerProps, MenuContentProps, MenuItemProps, MenuItemTextProps, MenuItemIconProps, MenuSeparatorProps, MenuGroupProps, MenuGroupTitleProps, MenuContextValue } from './types';

package/src/menu/menu.tsx

@@ -1,99 +1,99 @@
-import React, { useState, useRef } from 'react';
-import { View, Pressable, Text, Modal } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { MenuProps, MenuTriggerProps, MenuContentProps, MenuItemProps, MenuItemTextProps, MenuItemIconProps, MenuSeparatorProps, MenuGroupProps, MenuGroupTitleProps, MenuContextValue, MenuTriggerRect } from './types';
-import { menuContentStyle, menuItemStyle, menuItemTextStyle, menuItemIconStyle, menuSeparatorStyle, menuGroupStyle, menuGroupTitleStyle } from './styles';
-
-export const [MenuProvider, useMenuContext] = createComponentContext<MenuContextValue>('Menu');
-
-export const Menu: React.FC<MenuProps> = ({ isOpen: controlledOpen, onOpenChange, defaultOpen = false, children }) => {
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
-  const [triggerRect, setTriggerRect] = useState<MenuTriggerRect>({ pageX: 0, pageY: 0, width: 0, height: 0 });
-  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
-  const onToggle = () => { const next = !isOpen; setInternalOpen(next); onOpenChange?.(next); };
-  const onClose = () => { setInternalOpen(false); onOpenChange?.(false); };
-  return (
-    <MenuProvider value={{ isOpen, onToggle, onClose, triggerRect, setTriggerRect }}>
-      {children}
-    </MenuProvider>
-  );
-};
-Menu.displayName = 'Menu';
-
-export const MenuTrigger = React.forwardRef<React.ElementRef<typeof Pressable>, MenuTriggerProps>(({ children }) => {
-  const { onToggle, setTriggerRect } = useMenuContext();
-  const triggerRef = useRef<View>(null);
-
-  const handlePress = () => {
-    triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
-      setTriggerRect({ pageX, pageY, width, height });
-      onToggle();
-    });
-  };
-
-  const child = React.Children.only(children) as React.ReactElement<any>;
-  return (
-    <View ref={triggerRef}>
-      {React.cloneElement(child, { onPress: handlePress })}
-    </View>
-  );
-});
-MenuTrigger.displayName = 'MenuTrigger';
-
-export const MenuContent = React.forwardRef<React.ElementRef<typeof View>, MenuContentProps>(({ className, children, style, ...props }, ref) => {
-  const { isOpen, onClose, triggerRect } = useMenuContext();
-  if (!isOpen) return null;
-
-  return (
-    <Modal visible transparent animationType="none" onRequestClose={onClose}>
-      <Pressable style={{ flex: 1 }} onPress={onClose}>
-        <Pressable onPress={(e) => e.stopPropagation()}>
-          <View
-            ref={ref}
-            className={menuContentStyle({ class: className })}
-            style={[{ position: 'absolute', top: triggerRect.pageY + triggerRect.height + 4, left: triggerRect.pageX }, style]}
-            {...props}
-          >
-            {children}
-          </View>
-        </Pressable>
-      </Pressable>
-    </Modal>
-  );
-});
-MenuContent.displayName = 'MenuContent';
-
-export const MenuItem = React.forwardRef<React.ElementRef<typeof Pressable>, MenuItemProps>(({ className, isDisabled, children, ...props }, ref) => {
-  const { onClose } = useMenuContext();
-  return (
-    <Pressable ref={ref} disabled={isDisabled} onPress={() => { props.onPress?.(undefined as any); onClose(); }} className={menuItemStyle({ isDisabled, class: className })} {...props}>
-      {children}
-    </Pressable>
-  );
-});
-MenuItem.displayName = 'MenuItem';
-
-export const MenuItemText = React.forwardRef<React.ElementRef<typeof Text>, MenuItemTextProps>(({ className, ...props }, ref) => {
-  return <Text ref={ref} className={menuItemTextStyle({ class: className })} {...props} />;
-});
-MenuItemText.displayName = 'MenuItemText';
-
-export const MenuItemIcon = React.forwardRef<any, MenuItemIconProps>(({ as: AsComp, className, ...props }, ref) => {
-  return <AsComp ref={ref} className={menuItemIconStyle({ class: className })} {...props} />;
-});
-MenuItemIcon.displayName = 'MenuItemIcon';
-
-export const MenuSeparator = React.forwardRef<React.ElementRef<typeof View>, MenuSeparatorProps>(({ className, ...props }, ref) => {
-  return <View ref={ref} className={menuSeparatorStyle({ class: className })} {...props} />;
-});
-MenuSeparator.displayName = 'MenuSeparator';
-
-export const MenuGroup = React.forwardRef<React.ElementRef<typeof View>, MenuGroupProps>(({ className, ...props }, ref) => {
-  return <View ref={ref} className={menuGroupStyle({ class: className })} {...props} />;
-});
-MenuGroup.displayName = 'MenuGroup';
-
-export const MenuGroupTitle = React.forwardRef<React.ElementRef<typeof Text>, MenuGroupTitleProps>(({ className, ...props }, ref) => {
-  return <Text ref={ref} className={menuGroupTitleStyle({ class: className })} {...props} />;
-});
-MenuGroupTitle.displayName = 'MenuGroupTitle';
+import React, { useState, useRef } from 'react';
+import { View, Pressable, Text, Modal } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { MenuProps, MenuTriggerProps, MenuContentProps, MenuItemProps, MenuItemTextProps, MenuItemIconProps, MenuSeparatorProps, MenuGroupProps, MenuGroupTitleProps, MenuContextValue, MenuTriggerRect } from './types';
+import { menuContentStyle, menuItemStyle, menuItemTextStyle, menuItemIconStyle, menuSeparatorStyle, menuGroupStyle, menuGroupTitleStyle } from './styles';
+
+export const [MenuProvider, useMenuContext] = createComponentContext<MenuContextValue>('Menu');
+
+export const Menu: React.FC<MenuProps> = ({ isOpen: controlledOpen, onOpenChange, defaultOpen = false, children }) => {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const [triggerRect, setTriggerRect] = useState<MenuTriggerRect>({ pageX: 0, pageY: 0, width: 0, height: 0 });
+  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+  const onToggle = () => { const next = !isOpen; setInternalOpen(next); onOpenChange?.(next); };
+  const onClose = () => { setInternalOpen(false); onOpenChange?.(false); };
+  return (
+    <MenuProvider value={{ isOpen, onToggle, onClose, triggerRect, setTriggerRect }}>
+      {children}
+    </MenuProvider>
+  );
+};
+Menu.displayName = 'Menu';
+
+export const MenuTrigger = React.forwardRef<React.ElementRef<typeof Pressable>, MenuTriggerProps>(({ children }) => {
+  const { onToggle, setTriggerRect } = useMenuContext();
+  const triggerRef = useRef<View>(null);
+
+  const handlePress = () => {
+    triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+      setTriggerRect({ pageX, pageY, width, height });
+      onToggle();
+    });
+  };
+
+  const child = React.Children.only(children) as React.ReactElement<any>;
+  return (
+    <View ref={triggerRef}>
+      {React.cloneElement(child, { onPress: handlePress })}
+    </View>
+  );
+});
+MenuTrigger.displayName = 'MenuTrigger';
+
+export const MenuContent = React.forwardRef<React.ElementRef<typeof View>, MenuContentProps>(({ className, children, style, ...props }, ref) => {
+  const { isOpen, onClose, triggerRect } = useMenuContext();
+  if (!isOpen) return null;
+
+  return (
+    <Modal visible transparent animationType="none" onRequestClose={onClose}>
+      <Pressable style={{ flex: 1 }} onPress={onClose}>
+        <Pressable onPress={(e) => e.stopPropagation()}>
+          <View
+            ref={ref}
+            className={menuContentStyle({ class: className })}
+            style={[{ position: 'absolute', top: triggerRect.pageY + triggerRect.height + 4, left: triggerRect.pageX }, style]}
+            {...props}
+          >
+            {children}
+          </View>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+});
+MenuContent.displayName = 'MenuContent';
+
+export const MenuItem = React.forwardRef<React.ElementRef<typeof Pressable>, MenuItemProps>(({ className, isDisabled, children, ...props }, ref) => {
+  const { onClose } = useMenuContext();
+  return (
+    <Pressable ref={ref} disabled={isDisabled} onPress={() => { props.onPress?.(undefined as any); onClose(); }} className={menuItemStyle({ isDisabled, class: className })} {...props}>
+      {children}
+    </Pressable>
+  );
+});
+MenuItem.displayName = 'MenuItem';
+
+export const MenuItemText = React.forwardRef<React.ElementRef<typeof Text>, MenuItemTextProps>(({ className, ...props }, ref) => {
+  return <Text ref={ref} className={menuItemTextStyle({ class: className })} {...props} />;
+});
+MenuItemText.displayName = 'MenuItemText';
+
+export const MenuItemIcon = React.forwardRef<any, MenuItemIconProps>(({ as: AsComp, className, ...props }, ref) => {
+  return <AsComp ref={ref} className={menuItemIconStyle({ class: className })} {...props} />;
+});
+MenuItemIcon.displayName = 'MenuItemIcon';
+
+export const MenuSeparator = React.forwardRef<React.ElementRef<typeof View>, MenuSeparatorProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={menuSeparatorStyle({ class: className })} {...props} />;
+});
+MenuSeparator.displayName = 'MenuSeparator';
+
+export const MenuGroup = React.forwardRef<React.ElementRef<typeof View>, MenuGroupProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={menuGroupStyle({ class: className })} {...props} />;
+});
+MenuGroup.displayName = 'MenuGroup';
+
+export const MenuGroupTitle = React.forwardRef<React.ElementRef<typeof Text>, MenuGroupTitleProps>(({ className, ...props }, ref) => {
+  return <Text ref={ref} className={menuGroupTitleStyle({ class: className })} {...props} />;
+});
+MenuGroupTitle.displayName = 'MenuGroupTitle';

package/src/menu/styles.ts

@@ -1,14 +1,14 @@
-import { tv } from 'tailwind-variants';
-
-export const menuContentStyle = tv({ base: 'bg-background-0 rounded-lg py-1 shadow-hard-2 border border-outline-100 min-w-[180px]', variants: {} });
-export const menuItemStyle = tv({
-  base: 'flex-row items-center px-3 py-2.5 gap-2',
-  variants: {
-    isDisabled: { true: 'opacity-50' },
-  },
-});
-export const menuItemTextStyle = tv({ base: 'text-sm text-typography-700 flex-1', variants: {} });
-export const menuItemIconStyle = tv({ base: 'h-4 w-4 text-typography-500', variants: {} });
-export const menuSeparatorStyle = tv({ base: 'h-px bg-outline-100 my-1', variants: {} });
-export const menuGroupStyle = tv({ base: '', variants: {} });
-export const menuGroupTitleStyle = tv({ base: 'px-3 py-1.5 text-xs font-semibold text-typography-400 uppercase', variants: {} });
+import { tv } from 'tailwind-variants';
+
+export const menuContentStyle = tv({ base: 'bg-background-0 rounded-lg py-1 shadow-hard-2 border border-outline-100 min-w-[180px]', variants: {} });
+export const menuItemStyle = tv({
+  base: 'flex-row items-center px-3 py-2.5 gap-2',
+  variants: {
+    isDisabled: { true: 'opacity-50' },
+  },
+});
+export const menuItemTextStyle = tv({ base: 'text-sm text-typography-700 flex-1', variants: {} });
+export const menuItemIconStyle = tv({ base: 'h-4 w-4 text-typography-500', variants: {} });
+export const menuSeparatorStyle = tv({ base: 'h-px bg-outline-100 my-1', variants: {} });
+export const menuGroupStyle = tv({ base: '', variants: {} });
+export const menuGroupTitleStyle = tv({ base: 'px-3 py-1.5 text-xs font-semibold text-typography-400 uppercase', variants: {} });