@wireservers-ui/react-natives 0.1.0

package/src/input/index.ts

@@ -0,0 +1,13 @@
+export { Input, InputContext, useInputContext } from './input';
+export { InputField } from './input-field';
+export { InputSlot } from './input-slot';
+export { InputIcon } from './input-icon';
+export type {
+  InputProps,
+  InputFieldProps,
+  InputSlotProps,
+  InputIconProps,
+  InputVariant,
+  InputSize,
+  InputContextValue,
+} from './types';

package/src/input/input-field.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { TextInput } from 'react-native';
+import { useInputContext } from './input';
+import type { InputFieldProps } from './types';
+import { inputFieldStyle } from './styles';
+
+export const InputField = React.forwardRef<
+  React.ElementRef<typeof TextInput>,
+  InputFieldProps
+>(({ className, onFocus, onBlur, style, ...props }, ref) => {
+  const { size, isDisabled, handleFocus, handleBlur } = useInputContext();
+
+  return (
+    <TextInput
+      ref={ref}
+      editable={!isDisabled}
+      readOnly={isDisabled}
+      onFocus={(e) => {
+        handleFocus();
+        onFocus?.(e);
+      }}
+      onBlur={(e) => {
+        handleBlur();
+        onBlur?.(e);
+      }}
+      className={inputFieldStyle({ size, class: className })}
+      placeholderTextColor="rgb(var(--color-typography-400))"
+      {...props}
+      style={[{ backgroundColor: 'transparent' }, style]}
+      pointerEvents={isDisabled ? 'none' : undefined}
+    />
+  );
+});
+
+InputField.displayName = 'InputField';

package/src/input/input-icon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useInputContext } from './input';
+import type { InputIconProps } from './types';
+import { inputIconStyle } from './styles';
+
+export const InputIcon = React.forwardRef<any, InputIconProps>(
+  ({ as: AsComp, className, ...props }, ref) => {
+    const { size, isFocused, isInvalid } = useInputContext();
+
+    return (
+      <AsComp
+        ref={ref}
+        className={inputIconStyle({
+          size,
+          isFocused,
+          isInvalid,
+          class: className,
+        })}
+        {...props}
+      />
+    );
+  },
+);
+
+InputIcon.displayName = 'InputIcon';

package/src/input/input-slot.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useInputContext } from './input';
+import type { InputSlotProps } from './types';
+import { inputSlotStyle } from './styles';
+
+export const InputSlot = React.forwardRef<
+  React.ElementRef<typeof View>,
+  InputSlotProps
+>(({ className, children, ...props }, ref) => {
+  const { size } = useInputContext();
+
+  return (
+    <View
+      ref={ref}
+      className={inputSlotStyle({ size, class: className })}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+});
+
+InputSlot.displayName = 'InputSlot';

package/src/input/input.tsx

@@ -0,0 +1,73 @@
+import React, { useState, createContext, useContext } from 'react';
+import { View } from 'react-native';
+import { useFormControlContext } from '../form-control/form-control';
+import type { InputProps, InputContextValue, InputSize } from './types';
+import { inputStyle } from './styles';
+
+export const InputContext = createContext<InputContextValue | null>(null);
+
+export function useInputContext(): InputContextValue {
+  const ctx = useContext(InputContext);
+  if (!ctx) {
+    throw new Error(
+      'Input compound components must be used within <Input>',
+    );
+  }
+  return ctx;
+}
+
+export const Input = React.forwardRef<
+  React.ElementRef<typeof View>,
+  InputProps
+>(
+  (
+    {
+      className,
+      variant = 'outline',
+      size = 'md',
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const formControl = useFormControlContext();
+
+    const isDisabled = isDisabledProp ?? formControl?.isDisabled ?? false;
+    const isInvalid = isInvalidProp ?? formControl?.isInvalid ?? false;
+    const resolvedSize = size ?? (formControl?.size as InputSize) ?? 'md';
+
+    return (
+      <InputContext.Provider
+        value={{
+          variant,
+          size: resolvedSize,
+          isDisabled,
+          isInvalid,
+          isFocused,
+          handleFocus: () => setIsFocused(true),
+          handleBlur: () => setIsFocused(false),
+        }}
+      >
+        <View
+          ref={ref}
+          className={inputStyle({
+            variant,
+            size: resolvedSize,
+            isFocused,
+            isInvalid,
+            isDisabled,
+            class: className,
+          })}
+          {...props}
+        >
+          {children}
+        </View>
+      </InputContext.Provider>
+    );
+  },
+);
+
+Input.displayName = 'Input';

package/src/input/styles.ts

@@ -0,0 +1,90 @@
+import { tv } from 'tailwind-variants';
+
+export const inputStyle = tv({
+  base: 'flex-row items-center',
+  variants: {
+    variant: {
+      outline: 'border border-outline-300 rounded-md bg-transparent',
+      filled: 'border border-transparent rounded-md bg-background-50',
+      underlined: 'border-b border-outline-300 bg-transparent rounded-none',
+      rounded: 'border border-outline-300 rounded-full bg-transparent',
+    },
+    size: {
+      sm: 'h-9',
+      md: 'h-10',
+      lg: 'h-11',
+      xl: 'h-12',
+    },
+    isFocused: {
+      true: 'border-primary-500',
+    },
+    isInvalid: {
+      true: 'border-error-500',
+    },
+    isDisabled: {
+      true: 'opacity-40',
+    },
+  },
+  compoundVariants: [
+    {
+      isFocused: true,
+      isInvalid: true,
+      class: 'border-error-500',
+    },
+  ],
+  defaultVariants: {
+    variant: 'outline',
+    size: 'md',
+  },
+});
+
+export const inputFieldStyle = tv({
+  base: 'flex-1 text-typography-900 bg-transparent px-3 web:outline-none',
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const inputSlotStyle = tv({
+  base: 'items-center justify-center',
+  variants: {
+    size: {
+      sm: 'px-2',
+      md: 'px-3',
+      lg: 'px-3',
+      xl: 'px-3.5',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const inputIconStyle = tv({
+  base: 'text-typography-400',
+  variants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-[18px] w-[18px]',
+      lg: 'h-5 w-5',
+      xl: 'h-5 w-5',
+    },
+    isFocused: {
+      true: 'text-typography-700',
+    },
+    isInvalid: {
+      true: 'text-error-500',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/input/types.ts

@@ -0,0 +1,39 @@
+import type { View, TextInput, Text as RNText } from 'react-native';
+
+export type InputVariant = 'outline' | 'filled' | 'underlined' | 'rounded';
+export type InputSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface InputContextValue {
+  variant: InputVariant;
+  size: InputSize;
+  isDisabled: boolean;
+  isInvalid: boolean;
+  isFocused: boolean;
+  handleFocus: () => void;
+  handleBlur: () => void;
+}
+
+export interface InputProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  variant?: InputVariant;
+  size?: InputSize;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+}
+
+export interface InputFieldProps
+  extends React.ComponentPropsWithoutRef<typeof TextInput> {
+  className?: string;
+}
+
+export interface InputSlotProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface InputIconProps {
+  as: React.ElementType;
+  className?: string;
+}

package/src/kbd/index.ts

@@ -0,0 +1,2 @@
+export { Kbd } from './kbd';
+export type { KbdProps } from './types';

package/src/kbd/kbd.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import type { KbdProps } from './types';
+import { kbdStyle, kbdTextStyle } from './styles';
+
+export const Kbd = React.forwardRef<
+  React.ElementRef<typeof View>,
+  KbdProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <View ref={ref} className={kbdStyle({ class: className })} {...props}>
+      {typeof children === 'string' ? (
+        <Text className={kbdTextStyle({})}>{children}</Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+});
+
+Kbd.displayName = 'Kbd';

package/src/kbd/styles.ts

@@ -0,0 +1,11 @@
+import { tv } from 'tailwind-variants';
+
+export const kbdStyle = tv({
+  base: 'bg-background-100 border border-outline-200 rounded px-1.5 py-0.5 flex-row items-center',
+  variants: {},
+});
+
+export const kbdTextStyle = tv({
+  base: 'text-xs font-mono text-typography-700',
+  variants: {},
+});

package/src/kbd/types.ts

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

package/src/link/index.ts

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

package/src/link/link-text.tsx

@@ -0,0 +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';

package/src/link/link.tsx

@@ -0,0 +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';

package/src/link/styles.ts

@@ -0,0 +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',
+  },
+});

package/src/link/types.ts

@@ -0,0 +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;
+}

package/src/list/index.ts

@@ -0,0 +1,2 @@
+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

@@ -0,0 +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';

package/src/list/styles.ts

@@ -0,0 +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: {} });

package/src/list/types.ts

@@ -0,0 +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; }

package/src/menu/index.ts

@@ -0,0 +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';

package/src/menu/menu.tsx

@@ -0,0 +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';

package/src/menu/styles.ts

@@ -0,0 +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: {} });