@wireservers-ui/react-natives 1.0.0 → 1.0.1-rc1

package/src/actionsheet/actionsheet.tsx

@@ -1,45 +1,45 @@
-import React from 'react';
-import { Modal as RNModal, View } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { ActionSheetProps, ActionSheetContextValue } from './types';
-
-export const [ActionSheetProvider, useActionSheetContext] =
-  createComponentContext<ActionSheetContextValue>('ActionSheet');
-
-export const ActionSheet: React.FC<ActionSheetProps> = ({
-  isOpen,
-  onClose,
-  isModal = true,
-  children,
-}) => {
-  if (isModal) {
-    return (
-      <ActionSheetProvider value={{ isOpen, onClose }}>
-        <RNModal
-          visible={isOpen}
-          transparent
-          animationType="slide"
-          onRequestClose={onClose}
-          statusBarTranslucent
-        >
-          <View style={{ flex: 1, justifyContent: 'flex-end' }} pointerEvents="box-none">{children}</View>
-        </RNModal>
-      </ActionSheetProvider>
-    );
-  }
-
-  if (!isOpen) return null;
-
-  return (
-    <ActionSheetProvider value={{ isOpen, onClose }}>
-      <View
-        style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 50, justifyContent: 'flex-end' }}
-        pointerEvents="box-none"
-      >
-        {children}
-      </View>
-    </ActionSheetProvider>
-  );
-};
-
-ActionSheet.displayName = 'ActionSheet';
+import React from 'react';
+import { Modal as RNModal, View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { ActionSheetProps, ActionSheetContextValue } from './types';
+
+export const [ActionSheetProvider, useActionSheetContext] =
+  createComponentContext<ActionSheetContextValue>('ActionSheet');
+
+export const ActionSheet: React.FC<ActionSheetProps> = ({
+  isOpen,
+  onClose,
+  isModal = true,
+  children,
+}) => {
+  if (isModal) {
+    return (
+      <ActionSheetProvider value={{ isOpen, onClose }}>
+        <RNModal
+          visible={isOpen}
+          transparent
+          animationType="slide"
+          onRequestClose={onClose}
+          statusBarTranslucent
+        >
+          <View style={{ flex: 1, justifyContent: 'flex-end' }} pointerEvents="box-none">{children}</View>
+        </RNModal>
+      </ActionSheetProvider>
+    );
+  }
+
+  if (!isOpen) return null;
+
+  return (
+    <ActionSheetProvider value={{ isOpen, onClose }}>
+      <View
+        style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 50, justifyContent: 'flex-end' }}
+        pointerEvents="box-none"
+      >
+        {children}
+      </View>
+    </ActionSheetProvider>
+  );
+};
+
+ActionSheet.displayName = 'ActionSheet';

package/src/actionsheet/index.ts

@@ -1,20 +1,20 @@
-export { ActionSheet } from './actionsheet';
-export { ActionSheetBackdrop } from './actionsheet-backdrop';
-export { ActionSheetContent } from './actionsheet-content';
-export { ActionSheetDragIndicator } from './actionsheet-drag-indicator';
-export { ActionSheetDragIndicatorWrapper } from './actionsheet-drag-indicator-wrapper';
-export { ActionSheetItem } from './actionsheet-item';
-export { ActionSheetItemText } from './actionsheet-item-text';
-export { ActionSheetScrollView } from './actionsheet-scroll-view';
-
-export type {
-  ActionSheetProps,
-  ActionSheetBackdropProps,
-  ActionSheetContentProps,
-  ActionSheetDragIndicatorProps,
-  ActionSheetDragIndicatorWrapperProps,
-  ActionSheetItemProps,
-  ActionSheetItemTextProps,
-  ActionSheetScrollViewProps,
-  ActionSheetContextValue,
-} from './types';
+export { ActionSheet } from './actionsheet';
+export { ActionSheetBackdrop } from './actionsheet-backdrop';
+export { ActionSheetContent } from './actionsheet-content';
+export { ActionSheetDragIndicator } from './actionsheet-drag-indicator';
+export { ActionSheetDragIndicatorWrapper } from './actionsheet-drag-indicator-wrapper';
+export { ActionSheetItem } from './actionsheet-item';
+export { ActionSheetItemText } from './actionsheet-item-text';
+export { ActionSheetScrollView } from './actionsheet-scroll-view';
+
+export type {
+  ActionSheetProps,
+  ActionSheetBackdropProps,
+  ActionSheetContentProps,
+  ActionSheetDragIndicatorProps,
+  ActionSheetDragIndicatorWrapperProps,
+  ActionSheetItemProps,
+  ActionSheetItemTextProps,
+  ActionSheetScrollViewProps,
+  ActionSheetContextValue,
+} from './types';

package/src/actionsheet/styles.ts

@@ -1,25 +1,25 @@
-import { tv } from 'tailwind-variants';
-
-export const actionsheetBackdropStyle = tv({
-  base: 'absolute inset-0 bg-black/50',
-});
-
-export const actionsheetContentStyle = tv({
-  base: 'bg-background-0 rounded-t-2xl pb-8 max-h-[70%]',
-});
-
-export const actionsheetDragIndicatorWrapperStyle = tv({
-  base: 'items-center py-2',
-});
-
-export const actionsheetDragIndicatorStyle = tv({
-  base: 'w-10 h-1 bg-outline-300 rounded-full',
-});
-
-export const actionsheetItemStyle = tv({
-  base: 'flex-row items-center px-4 py-3 active:bg-background-100',
-});
-
-export const actionsheetItemTextStyle = tv({
-  base: 'text-typography-900 text-base flex-1',
-});
+import { tv } from 'tailwind-variants';
+
+export const actionsheetBackdropStyle = tv({
+  base: 'absolute inset-0 bg-black/50',
+});
+
+export const actionsheetContentStyle = tv({
+  base: 'bg-background-0 rounded-t-2xl pb-8 max-h-[70%]',
+});
+
+export const actionsheetDragIndicatorWrapperStyle = tv({
+  base: 'items-center py-2',
+});
+
+export const actionsheetDragIndicatorStyle = tv({
+  base: 'w-10 h-1 bg-outline-300 rounded-full',
+});
+
+export const actionsheetItemStyle = tv({
+  base: 'flex-row items-center px-4 py-3 active:bg-background-100',
+});
+
+export const actionsheetItemTextStyle = tv({
+  base: 'text-typography-900 text-base flex-1',
+});

package/src/actionsheet/types.ts

@@ -1,49 +1,49 @@
-import type { View, Pressable, Text as RNText, ScrollView } from 'react-native';
-
-export interface ActionSheetContextValue {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export interface ActionSheetProps {
-  isOpen: boolean;
-  onClose: () => void;
-  /** When false the action sheet renders inline (no RNModal) so background content stays interactive. */
-  isModal?: boolean;
-  children: React.ReactNode;
-}
-
-export interface ActionSheetBackdropProps
-  extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-}
-
-export interface ActionSheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface ActionSheetDragIndicatorWrapperProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface ActionSheetDragIndicatorProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface ActionSheetItemProps
-  extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-}
-
-export interface ActionSheetItemTextProps
-  extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
-
-export interface ActionSheetScrollViewProps
-  extends React.ComponentPropsWithoutRef<typeof ScrollView> {
-  className?: string;
-}
+import type { View, Pressable, Text as RNText, ScrollView } from 'react-native';
+
+export interface ActionSheetContextValue {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export interface ActionSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** When false the action sheet renders inline (no RNModal) so background content stays interactive. */
+  isModal?: boolean;
+  children: React.ReactNode;
+}
+
+export interface ActionSheetBackdropProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}
+
+export interface ActionSheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface ActionSheetDragIndicatorWrapperProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface ActionSheetDragIndicatorProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface ActionSheetItemProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}
+
+export interface ActionSheetItemTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface ActionSheetScrollViewProps
+  extends React.ComponentPropsWithoutRef<typeof ScrollView> {
+  className?: string;
+}

package/src/alert/alert-body.tsx

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

package/src/alert/alert-close-button.tsx

@@ -1,23 +1,23 @@
-import React from 'react';
-import { Pressable, Text } from 'react-native';
-import type { AlertCloseButtonProps } from './types';
-import { alertCloseButtonStyle } from './styles';
-
-export const AlertCloseButton = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  AlertCloseButtonProps
->(({ className, children, ...props }, ref) => {
-  return (
-    <Pressable
-      ref={ref}
-      accessibilityRole="button"
-      accessibilityLabel="Close alert"
-      className={alertCloseButtonStyle({ class: className })}
-      {...props}
-    >
-      {children ?? <Text className="text-current text-sm">✕</Text>}
-    </Pressable>
-  );
-});
-
-AlertCloseButton.displayName = 'AlertCloseButton';
+import React from 'react';
+import { Pressable, Text } from 'react-native';
+import type { AlertCloseButtonProps } from './types';
+import { alertCloseButtonStyle } from './styles';
+
+export const AlertCloseButton = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  AlertCloseButtonProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <Pressable
+      ref={ref}
+      accessibilityRole="button"
+      accessibilityLabel="Close alert"
+      className={alertCloseButtonStyle({ class: className })}
+      {...props}
+    >
+      {children ?? <Text className="text-current text-sm">✕</Text>}
+    </Pressable>
+  );
+});
+
+AlertCloseButton.displayName = 'AlertCloseButton';

package/src/alert/alert-icon.tsx

@@ -1,40 +1,40 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { useAlertContext } from './alert';
-import type { AlertIconProps } from './types';
-import { alertIconStyle } from './styles';
-
-const defaultIcons: Record<string, string> = {
-  info: 'ℹ',
-  success: '✓',
-  warning: '⚠',
-  error: '✕',
-};
-
-export const AlertIcon = React.forwardRef<any, AlertIconProps>(
-  ({ as: AsComp, className, ...props }, ref) => {
-    const { status, variant } = useAlertContext();
-
-    if (AsComp) {
-      return (
-        <AsComp
-          ref={ref}
-          className={alertIconStyle({ status, variant, class: className })}
-          {...props}
-        />
-      );
-    }
-
-    return (
-      <Text
-        ref={ref}
-        className={alertIconStyle({ status, variant, class: className })}
-        {...props}
-      >
-        {defaultIcons[status]}
-      </Text>
-    );
-  },
-);
-
-AlertIcon.displayName = 'AlertIcon';
+import React from 'react';
+import { Text } from 'react-native';
+import { useAlertContext } from './alert';
+import type { AlertIconProps } from './types';
+import { alertIconStyle } from './styles';
+
+const defaultIcons: Record<string, string> = {
+  info: 'ℹ',
+  success: '✓',
+  warning: '⚠',
+  error: '✕',
+};
+
+export const AlertIcon = React.forwardRef<any, AlertIconProps>(
+  ({ as: AsComp, className, ...props }, ref) => {
+    const { status, variant } = useAlertContext();
+
+    if (AsComp) {
+      return (
+        <AsComp
+          ref={ref}
+          className={alertIconStyle({ status, variant, class: className })}
+          {...props}
+        />
+      );
+    }
+
+    return (
+      <Text
+        ref={ref}
+        className={alertIconStyle({ status, variant, class: className })}
+        {...props}
+      >
+        {defaultIcons[status]}
+      </Text>
+    );
+  },
+);
+
+AlertIcon.displayName = 'AlertIcon';

package/src/alert/alert-text.tsx

@@ -1,22 +1,22 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { useAlertContext } from './alert';
-import type { AlertTextProps } from './types';
-import { alertTextStyle } from './styles';
-
-export const AlertText = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  AlertTextProps
->(({ className, ...props }, ref) => {
-  const { status, variant } = useAlertContext();
-
-  return (
-    <Text
-      ref={ref}
-      className={alertTextStyle({ status, variant, class: className })}
-      {...props}
-    />
-  );
-});
-
-AlertText.displayName = 'AlertText';
+import React from 'react';
+import { Text } from 'react-native';
+import { useAlertContext } from './alert';
+import type { AlertTextProps } from './types';
+import { alertTextStyle } from './styles';
+
+export const AlertText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  AlertTextProps
+>(({ className, ...props }, ref) => {
+  const { status, variant } = useAlertContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={alertTextStyle({ status, variant, class: className })}
+      {...props}
+    />
+  );
+});
+
+AlertText.displayName = 'AlertText';

package/src/alert/alert.tsx

@@ -1,33 +1,33 @@
-import React from 'react';
-import { View } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { AlertProps, AlertContextValue } from './types';
-import { alertStyle } from './styles';
-
-export const [AlertProvider, useAlertContext] =
-  createComponentContext<AlertContextValue>('Alert');
-
-export const Alert = React.forwardRef<
-  React.ElementRef<typeof View>,
-  AlertProps
->(
-  (
-    { className, status = 'info', variant = 'subtle', children, ...props },
-    ref,
-  ) => {
-    return (
-      <AlertProvider value={{ status, variant }}>
-        <View
-          ref={ref}
-          role="alert"
-          className={alertStyle({ status, variant, class: className })}
-          {...props}
-        >
-          {children}
-        </View>
-      </AlertProvider>
-    );
-  },
-);
-
-Alert.displayName = 'Alert';
+import React from 'react';
+import { View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { AlertProps, AlertContextValue } from './types';
+import { alertStyle } from './styles';
+
+export const [AlertProvider, useAlertContext] =
+  createComponentContext<AlertContextValue>('Alert');
+
+export const Alert = React.forwardRef<
+  React.ElementRef<typeof View>,
+  AlertProps
+>(
+  (
+    { className, status = 'info', variant = 'subtle', children, ...props },
+    ref,
+  ) => {
+    return (
+      <AlertProvider value={{ status, variant }}>
+        <View
+          ref={ref}
+          role="alert"
+          className={alertStyle({ status, variant, class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </AlertProvider>
+    );
+  },
+);
+
+Alert.displayName = 'Alert';

package/src/alert/index.ts

@@ -1,15 +1,15 @@
-export { Alert } from './alert';
-export { AlertIcon } from './alert-icon';
-export { AlertBody } from './alert-body';
-export { AlertText } from './alert-text';
-export { AlertCloseButton } from './alert-close-button';
-
-export type {
-  AlertProps,
-  AlertIconProps,
-  AlertBodyProps,
-  AlertTextProps,
-  AlertCloseButtonProps,
-  AlertStatus,
-  AlertVariant,
-} from './types';
+export { Alert } from './alert';
+export { AlertIcon } from './alert-icon';
+export { AlertBody } from './alert-body';
+export { AlertText } from './alert-text';
+export { AlertCloseButton } from './alert-close-button';
+
+export type {
+  AlertProps,
+  AlertIconProps,
+  AlertBodyProps,
+  AlertTextProps,
+  AlertCloseButtonProps,
+  AlertStatus,
+  AlertVariant,
+} from './types';