@wireservers-ui/react-natives 0.1.0

package/src/search-input/search-input.tsx

@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+import { View, TextInput, Pressable, Text } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type {
+  SearchInputProps,
+  SearchInputFieldProps,
+  SearchInputIconProps,
+  SearchInputClearButtonProps,
+  SearchInputContextValue,
+} from './types';
+import {
+  searchInputStyle,
+  searchInputFieldStyle,
+  searchInputIconStyle,
+  searchInputClearButtonStyle,
+} from './styles';
+
+export const [SearchInputProvider, useSearchInputContext] =
+  createComponentContext<SearchInputContextValue>('SearchInput');
+
+export const SearchInput = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SearchInputProps
+>(
+  (
+    {
+      className,
+      size = 'md',
+      value: controlledValue,
+      onChangeText,
+      isDisabled = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [internalValue, setInternalValue] = useState('');
+    const value =
+      controlledValue !== undefined ? controlledValue : internalValue;
+    const handleChange = (text: string) => {
+      setInternalValue(text);
+      onChangeText?.(text);
+    };
+    const onClear = () => handleChange('');
+    return (
+      <SearchInputProvider value={{ size, value, onChange: handleChange, onClear }}>
+        <View
+          ref={ref}
+          className={searchInputStyle({ size, isDisabled, class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </SearchInputProvider>
+    );
+  },
+);
+SearchInput.displayName = 'SearchInput';
+
+export const SearchInputField = React.forwardRef<
+  React.ElementRef<typeof TextInput>,
+  SearchInputFieldProps
+>(({ className, ...props }, ref) => {
+  const { size, value, onChange } = useSearchInputContext();
+  return (
+    <TextInput
+      ref={ref}
+      placeholder="Search..."
+      value={value}
+      onChangeText={onChange}
+      className={searchInputFieldStyle({ size, class: className })}
+      {...props}
+    />
+  );
+});
+SearchInputField.displayName = 'SearchInputField';
+
+export const SearchInputIcon = React.forwardRef<any, SearchInputIconProps>(
+  ({ as: AsComp, className, ...props }, ref) => {
+    const { size } = useSearchInputContext();
+    if (AsComp)
+      return (
+        <AsComp
+          ref={ref}
+          className={searchInputIconStyle({ size, class: className })}
+          {...props}
+        />
+      );
+    return (
+      <Text className={searchInputIconStyle({ size, class: className })}>
+        {'\uD83D\uDD0D'}
+      </Text>
+    );
+  },
+);
+SearchInputIcon.displayName = 'SearchInputIcon';
+
+export const SearchInputClearButton = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  SearchInputClearButtonProps
+>(({ className, children, ...props }, ref) => {
+  const { value, onClear } = useSearchInputContext();
+  if (!value) return null;
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onClear}
+      className={searchInputClearButtonStyle({ class: className })}
+      accessibilityRole="button"
+      accessibilityLabel="Clear search"
+      {...props}
+    >
+      {children ?? (
+        <Text style={{ fontSize: 12, color: '#9CA3AF' }}>{'\u2715'}</Text>
+      )}
+    </Pressable>
+  );
+});
+SearchInputClearButton.displayName = 'SearchInputClearButton';

package/src/search-input/styles.ts

@@ -0,0 +1,28 @@
+import { tv } from 'tailwind-variants';
+
+export const searchInputStyle = tv({
+  base: 'flex-row items-center border border-outline-300 rounded-lg bg-background-0 px-3',
+  variants: {
+    size: { sm: 'h-8 gap-1.5', md: 'h-10 gap-2', lg: 'h-12 gap-2.5' },
+    isDisabled: { true: 'opacity-50' },
+  },
+  defaultVariants: { size: 'md' },
+});
+export const searchInputFieldStyle = tv({
+  base: 'flex-1 text-typography-900',
+  variants: {
+    size: { sm: 'text-sm', md: 'text-base', lg: 'text-lg' },
+  },
+  defaultVariants: { size: 'md' },
+});
+export const searchInputIconStyle = tv({
+  base: 'text-typography-400',
+  variants: {
+    size: { sm: 'h-3.5 w-3.5', md: 'h-4 w-4', lg: 'h-5 w-5' },
+  },
+  defaultVariants: { size: 'md' },
+});
+export const searchInputClearButtonStyle = tv({
+  base: 'p-0.5 rounded-full',
+  variants: {},
+});

package/src/search-input/types.ts

@@ -0,0 +1,31 @@
+import type { View, TextInput, Pressable } from 'react-native';
+
+export type SearchInputSize = 'sm' | 'md' | 'lg';
+
+export interface SearchInputContextValue {
+  size: SearchInputSize;
+  value: string;
+  onChange: (text: string) => void;
+  onClear: () => void;
+}
+
+export interface SearchInputProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  size?: SearchInputSize;
+  value?: string;
+  onChangeText?: (text: string) => void;
+  isDisabled?: boolean;
+}
+export interface SearchInputFieldProps
+  extends React.ComponentPropsWithoutRef<typeof TextInput> {
+  className?: string;
+}
+export interface SearchInputIconProps {
+  as?: React.ElementType;
+  className?: string;
+}
+export interface SearchInputClearButtonProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}

package/src/segmented-control/index.ts

@@ -0,0 +1,2 @@
+export { SegmentedControl, SegmentedControlProvider, useSegmentedControlContext, SegmentedControlItem } from './segmented-control';
+export type { SegmentedControlProps, SegmentedControlItemProps, SegmentedControlSize, SegmentedControlContextValue } from './types';

package/src/segmented-control/segmented-control.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { View, Pressable, Text } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { SegmentedControlProps, SegmentedControlItemProps, SegmentedControlContextValue } from './types';
+import { segmentedControlStyle, segmentedControlItemStyle, segmentedControlItemTextStyle } from './styles';
+
+export const [SegmentedControlProvider, useSegmentedControlContext] =
+  createComponentContext<SegmentedControlContextValue>('SegmentedControl');
+
+export const SegmentedControl = React.forwardRef<React.ElementRef<typeof View>, SegmentedControlProps>(
+  ({ className, value, onValueChange, size = 'md', children, ...props }, ref) => {
+    return (
+      <SegmentedControlProvider value={{ value, onValueChange, size }}>
+        <View ref={ref} className={segmentedControlStyle({ class: className })} {...props}>{children}</View>
+      </SegmentedControlProvider>
+    );
+  },
+);
+SegmentedControl.displayName = 'SegmentedControl';
+
+export const SegmentedControlItem = React.forwardRef<React.ElementRef<typeof Pressable>, SegmentedControlItemProps>(
+  ({ className, value, children, ...props }, ref) => {
+    const { value: selectedValue, onValueChange, size } = useSegmentedControlContext();
+    const isSelected = value === selectedValue;
+    return (
+      <Pressable ref={ref} onPress={() => onValueChange(value)} className={segmentedControlItemStyle({ size, isSelected, class: className })} accessibilityRole="button" accessibilityState={{ selected: isSelected }} {...props}>
+        {typeof children === 'string' ? (
+          <Text className={segmentedControlItemTextStyle({ size, isSelected })}>{children}</Text>
+        ) : children}
+      </Pressable>
+    );
+  },
+);
+SegmentedControlItem.displayName = 'SegmentedControlItem';

package/src/segmented-control/styles.ts

@@ -0,0 +1,22 @@
+import { tv } from 'tailwind-variants';
+
+export const segmentedControlStyle = tv({
+  base: 'flex-row bg-background-100 rounded-lg p-1',
+  variants: {},
+});
+export const segmentedControlItemStyle = tv({
+  base: 'flex-1 items-center justify-center rounded-md',
+  variants: {
+    size: { sm: 'py-1 px-2', md: 'py-1.5 px-3', lg: 'py-2 px-4' },
+    isSelected: { true: 'bg-background-0 shadow-soft-1', false: '' },
+  },
+  defaultVariants: { size: 'md', isSelected: false },
+});
+export const segmentedControlItemTextStyle = tv({
+  base: 'font-medium',
+  variants: {
+    size: { sm: 'text-xs', md: 'text-sm', lg: 'text-base' },
+    isSelected: { true: 'text-typography-900', false: 'text-typography-500' },
+  },
+  defaultVariants: { size: 'md', isSelected: false },
+});

package/src/segmented-control/types.ts

@@ -0,0 +1,22 @@
+import type { View, Pressable } from 'react-native';
+
+export type SegmentedControlSize = 'sm' | 'md' | 'lg';
+
+export interface SegmentedControlContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+  size: SegmentedControlSize;
+}
+
+export interface SegmentedControlProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  value: string;
+  onValueChange: (value: string) => void;
+  size?: SegmentedControlSize;
+}
+
+export interface SegmentedControlItemProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  value: string;
+  children: React.ReactNode;
+}

package/src/select/index.ts

@@ -0,0 +1,28 @@
+export { Select, SelectContext, useSelectContext } from './select';
+export { SelectTrigger } from './select-trigger';
+export { SelectInput } from './select-input';
+export { SelectIcon } from './select-icon';
+export { SelectPortal } from './select-portal';
+export { SelectBackdrop } from './select-backdrop';
+export { SelectContent } from './select-content';
+export { SelectItem, SelectItemContext, useSelectItemContext } from './select-item';
+export { SelectItemText } from './select-item-text';
+export { SelectDragIndicator } from './select-drag-indicator';
+export { SelectScrollView } from './select-scroll-view';
+export type {
+  SelectProps,
+  SelectTriggerProps,
+  SelectInputProps,
+  SelectIconProps,
+  SelectPortalProps,
+  SelectBackdropProps,
+  SelectContentProps,
+  SelectItemProps,
+  SelectItemTextProps,
+  SelectDragIndicatorProps,
+  SelectScrollViewProps,
+  SelectSize,
+  SelectVariant,
+  SelectContextValue,
+  TriggerLayout,
+} from './types';

package/src/select/select-backdrop.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import { useSelectContext } from './select';
+import type { SelectBackdropProps } from './types';
+import { selectBackdropStyle } from './styles';
+
+export const SelectBackdrop = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  SelectBackdropProps
+>(({ className, ...props }, ref) => {
+  const { onClose } = useSelectContext();
+
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onClose}
+      className={selectBackdropStyle({ class: className })}
+      accessibilityRole="button"
+      accessibilityLabel="Close select"
+      {...props}
+    />
+  );
+});
+
+SelectBackdrop.displayName = 'SelectBackdrop';

package/src/select/select-content.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View, ScrollView, useWindowDimensions } from 'react-native';
+import { useSelectContext } from './select';
+import type { SelectContentProps } from './types';
+import { selectContentStyle } from './styles';
+
+export const SelectContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SelectContentProps
+>(({ className, children, ...props }, ref) => {
+  const { triggerLayout } = useSelectContext();
+  const { height: windowHeight } = useWindowDimensions();
+
+  if (!triggerLayout) {
+    return null;
+  }
+
+  const triggerBottom = triggerLayout.pageY + triggerLayout.height;
+  const spaceBelow = windowHeight - triggerBottom - 16;
+  const maxDropdownHeight = Math.min(300, Math.max(spaceBelow, 120));
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        top: triggerBottom + 4,
+        left: triggerLayout.pageX,
+        width: triggerLayout.width,
+        maxHeight: maxDropdownHeight,
+      }}
+    >
+      <ScrollView
+        bounces={false}
+        showsVerticalScrollIndicator
+        style={{ maxHeight: maxDropdownHeight }}
+      >
+        <View
+          ref={ref}
+          className={selectContentStyle({ class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </ScrollView>
+    </View>
+  );
+});
+
+SelectContent.displayName = 'SelectContent';

package/src/select/select-drag-indicator.tsx

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

package/src/select/select-icon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { useSelectContext } from './select';
+import type { SelectIconProps } from './types';
+import { selectIconStyle } from './styles';
+
+export const SelectIcon = React.forwardRef<any, SelectIconProps>(
+  ({ as: AsComp, className, ...props }, ref) => {
+    const { size } = useSelectContext();
+
+    const style = selectIconStyle({ size, class: className });
+
+    if (AsComp) {
+      return <AsComp ref={ref} className={style} {...props} />;
+    }
+
+    return (
+      <Text ref={ref} className={style} {...props}>
+        {'\u25BC'}
+      </Text>
+    );
+  },
+);
+
+SelectIcon.displayName = 'SelectIcon';

package/src/select/select-input.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { useSelectContext } from './select';
+import type { SelectInputProps } from './types';
+import { selectInputStyle } from './styles';
+
+export const SelectInput = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  SelectInputProps
+>(({ className, placeholder, ...props }, ref) => {
+  const { selectedLabel, size } = useSelectContext();
+
+  const hasValue = !!selectedLabel;
+  const displayText = hasValue ? selectedLabel : (placeholder ?? 'Select...');
+
+  return (
+    <Text
+      ref={ref}
+      numberOfLines={1}
+      className={selectInputStyle({
+        size,
+        hasValue,
+        class: className,
+      })}
+      {...props}
+    >
+      {displayText}
+    </Text>
+  );
+});
+
+SelectInput.displayName = 'SelectInput';

package/src/select/select-item-text.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { useSelectContext } from './select';
+import { useSelectItemContext } from './select-item';
+import type { SelectItemTextProps } from './types';
+import { selectItemTextStyle } from './styles';
+
+export const SelectItemText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  SelectItemTextProps
+>(({ className, children, ...props }, ref) => {
+  const { size } = useSelectContext();
+  const { label, isSelected } = useSelectItemContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={selectItemTextStyle({
+        size,
+        isSelected,
+        class: className,
+      })}
+      {...props}
+    >
+      {children ?? label}
+    </Text>
+  );
+});
+
+SelectItemText.displayName = 'SelectItemText';

package/src/select/select-item.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Pressable, Text } from 'react-native';
+import { useSelectContext } from './select';
+import type { SelectItemProps } from './types';
+import { selectItemStyle, selectItemTextStyle } from './styles';
+
+export const SelectItemContext = React.createContext<{
+  label: string;
+  value: string;
+  isSelected: boolean;
+  isDisabled: boolean;
+} | null>(null);
+
+export function useSelectItemContext() {
+  const ctx = React.useContext(SelectItemContext);
+  if (!ctx) {
+    throw new Error(
+      'SelectItem compound components must be used within <SelectItem>',
+    );
+  }
+  return ctx;
+}
+
+export const SelectItem = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  SelectItemProps
+>(({ className, label, value, isDisabled = false, children, ...props }, ref) => {
+  const { selectedValue, onValueChange, onClose, size } = useSelectContext();
+
+  const isSelected = selectedValue === value;
+
+  const handlePress = () => {
+    if (!isDisabled) {
+      onValueChange(value, label);
+      onClose();
+    }
+  };
+
+  return (
+    <SelectItemContext.Provider value={{ label, value, isSelected, isDisabled }}>
+      <Pressable
+        ref={ref}
+        disabled={isDisabled}
+        onPress={handlePress}
+        className={selectItemStyle({
+          isSelected,
+          isDisabled,
+          class: className,
+        })}
+        accessibilityRole="button"
+        accessibilityState={{
+          selected: isSelected,
+          disabled: isDisabled,
+        }}
+        {...props}
+      >
+        {children ?? (
+          <Text
+            className={selectItemTextStyle({
+              size,
+              isSelected,
+            })}
+          >
+            {label}
+          </Text>
+        )}
+      </Pressable>
+    </SelectItemContext.Provider>
+  );
+});
+
+SelectItem.displayName = 'SelectItem';

package/src/select/select-portal.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Modal } from 'react-native';
+import { useSelectContext } from './select';
+import type { SelectPortalProps } from './types';
+
+export const SelectPortal: React.FC<SelectPortalProps> = ({ children }) => {
+  const { isOpen, onClose } = useSelectContext();
+
+  return (
+    <Modal
+      visible={isOpen}
+      transparent
+      animationType="none"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      {children}
+    </Modal>
+  );
+};
+
+SelectPortal.displayName = 'SelectPortal';

package/src/select/select-scroll-view.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import type { SelectScrollViewProps } from './types';
+
+export const SelectScrollView = React.forwardRef<
+  React.ElementRef<typeof ScrollView>,
+  SelectScrollViewProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <ScrollView
+      ref={ref}
+      bounces={false}
+      showsVerticalScrollIndicator
+      className={className}
+      {...props}
+    >
+      {children}
+    </ScrollView>
+  );
+});
+
+SelectScrollView.displayName = 'SelectScrollView';

package/src/select/select-trigger.tsx

@@ -0,0 +1,64 @@
+import React, { useCallback, useRef } from 'react';
+import { Pressable, type View } from 'react-native';
+import { useSelectContext } from './select';
+import type { SelectTriggerProps } from './types';
+import { selectTriggerStyle } from './styles';
+
+export const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  SelectTriggerProps
+>(({ className, children, ...props }, forwardedRef) => {
+  const { variant, size, isDisabled, isInvalid, isOpen, onOpen, setTriggerLayout } =
+    useSelectContext();
+
+  const internalRef = useRef<View>(null);
+
+  const setRef = useCallback(
+    (node: View | null) => {
+      internalRef.current = node;
+      if (typeof forwardedRef === 'function') forwardedRef(node as any);
+      else if (forwardedRef)
+        (forwardedRef as React.MutableRefObject<any>).current = node;
+    },
+    [forwardedRef],
+  );
+
+  const handlePress = useCallback(() => {
+    if (internalRef.current) {
+      (internalRef.current as any).measureInWindow(
+        (x: number, y: number, width: number, height: number) => {
+          setTriggerLayout({ pageX: x, pageY: y, width, height });
+          onOpen();
+        },
+      );
+    } else {
+      onOpen();
+    }
+  }, [onOpen, setTriggerLayout]);
+
+  return (
+    <Pressable
+      ref={setRef}
+      disabled={isDisabled}
+      onPress={handlePress}
+      className={selectTriggerStyle({
+        variant,
+        size,
+        isFocused: isOpen,
+        isInvalid,
+        isDisabled,
+        class: className,
+      })}
+      accessibilityRole="button"
+      accessibilityState={{
+        disabled: isDisabled,
+        expanded: isOpen,
+      }}
+      {...props}
+    >
+      {children}
+    </Pressable>
+  );
+});
+
+SelectTrigger.displayName = 'SelectTrigger';