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

package/src/select/index.ts

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

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

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

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

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

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

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

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

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

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