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

package/src/alert-dialog/alert-dialog.tsx

@@ -1,54 +1,54 @@
-import React from 'react';
-import { View, Pressable, Modal } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { AlertDialogProps, AlertDialogBackdropProps, AlertDialogContentProps, AlertDialogHeaderProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogCloseButtonProps, AlertDialogContextValue } from './types';
-import { alertDialogContentStyle, alertDialogBackdropStyle, alertDialogHeaderStyle, alertDialogBodyStyle, alertDialogFooterStyle, alertDialogCloseButtonStyle } from './styles';
-
-export const [AlertDialogProvider, useAlertDialogContext] =
-  createComponentContext<AlertDialogContextValue>('AlertDialog');
-
-export const AlertDialog: React.FC<AlertDialogProps> = ({ isOpen, onClose, size = 'md', children }) => {
-  return (
-    <AlertDialogProvider value={{ isOpen, onClose, size }}>
-      <Modal visible={isOpen} transparent animationType="fade" onRequestClose={onClose}>
-        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-          {children}
-        </View>
-      </Modal>
-    </AlertDialogProvider>
-  );
-};
-AlertDialog.displayName = 'AlertDialog';
-
-export const AlertDialogBackdrop = React.forwardRef<React.ElementRef<typeof Pressable>, AlertDialogBackdropProps>(({ className, ...props }, ref) => {
-  const { onClose } = useAlertDialogContext();
-  return <Pressable ref={ref} onPress={onClose} className={alertDialogBackdropStyle({ class: className })} {...props} />;
-});
-AlertDialogBackdrop.displayName = 'AlertDialogBackdrop';
-
-export const AlertDialogContent = React.forwardRef<React.ElementRef<typeof View>, AlertDialogContentProps>(({ className, ...props }, ref) => {
-  const { size } = useAlertDialogContext();
-  return <View ref={ref} className={alertDialogContentStyle({ size, class: className })} {...props} />;
-});
-AlertDialogContent.displayName = 'AlertDialogContent';
-
-export const AlertDialogHeader = React.forwardRef<React.ElementRef<typeof View>, AlertDialogHeaderProps>(({ className, ...props }, ref) => {
-  return <View ref={ref} className={alertDialogHeaderStyle({ class: className })} {...props} />;
-});
-AlertDialogHeader.displayName = 'AlertDialogHeader';
-
-export const AlertDialogBody = React.forwardRef<React.ElementRef<typeof View>, AlertDialogBodyProps>(({ className, ...props }, ref) => {
-  return <View ref={ref} className={alertDialogBodyStyle({ class: className })} {...props} />;
-});
-AlertDialogBody.displayName = 'AlertDialogBody';
-
-export const AlertDialogFooter = React.forwardRef<React.ElementRef<typeof View>, AlertDialogFooterProps>(({ className, ...props }, ref) => {
-  return <View ref={ref} className={alertDialogFooterStyle({ class: className })} {...props} />;
-});
-AlertDialogFooter.displayName = 'AlertDialogFooter';
-
-export const AlertDialogCloseButton = React.forwardRef<React.ElementRef<typeof Pressable>, AlertDialogCloseButtonProps>(({ className, ...props }, ref) => {
-  const { onClose } = useAlertDialogContext();
-  return <Pressable ref={ref} onPress={onClose} className={alertDialogCloseButtonStyle({ class: className })} accessibilityRole="button" accessibilityLabel="Close" {...props} />;
-});
-AlertDialogCloseButton.displayName = 'AlertDialogCloseButton';
+import React from 'react';
+import { View, Pressable, Modal } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { AlertDialogProps, AlertDialogBackdropProps, AlertDialogContentProps, AlertDialogHeaderProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogCloseButtonProps, AlertDialogContextValue } from './types';
+import { alertDialogContentStyle, alertDialogBackdropStyle, alertDialogHeaderStyle, alertDialogBodyStyle, alertDialogFooterStyle, alertDialogCloseButtonStyle } from './styles';
+
+export const [AlertDialogProvider, useAlertDialogContext] =
+  createComponentContext<AlertDialogContextValue>('AlertDialog');
+
+export const AlertDialog: React.FC<AlertDialogProps> = ({ isOpen, onClose, size = 'md', children }) => {
+  return (
+    <AlertDialogProvider value={{ isOpen, onClose, size }}>
+      <Modal visible={isOpen} transparent animationType="fade" onRequestClose={onClose}>
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+          {children}
+        </View>
+      </Modal>
+    </AlertDialogProvider>
+  );
+};
+AlertDialog.displayName = 'AlertDialog';
+
+export const AlertDialogBackdrop = React.forwardRef<React.ElementRef<typeof Pressable>, AlertDialogBackdropProps>(({ className, ...props }, ref) => {
+  const { onClose } = useAlertDialogContext();
+  return <Pressable ref={ref} onPress={onClose} className={alertDialogBackdropStyle({ class: className })} {...props} />;
+});
+AlertDialogBackdrop.displayName = 'AlertDialogBackdrop';
+
+export const AlertDialogContent = React.forwardRef<React.ElementRef<typeof View>, AlertDialogContentProps>(({ className, ...props }, ref) => {
+  const { size } = useAlertDialogContext();
+  return <View ref={ref} className={alertDialogContentStyle({ size, class: className })} {...props} />;
+});
+AlertDialogContent.displayName = 'AlertDialogContent';
+
+export const AlertDialogHeader = React.forwardRef<React.ElementRef<typeof View>, AlertDialogHeaderProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={alertDialogHeaderStyle({ class: className })} {...props} />;
+});
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+export const AlertDialogBody = React.forwardRef<React.ElementRef<typeof View>, AlertDialogBodyProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={alertDialogBodyStyle({ class: className })} {...props} />;
+});
+AlertDialogBody.displayName = 'AlertDialogBody';
+
+export const AlertDialogFooter = React.forwardRef<React.ElementRef<typeof View>, AlertDialogFooterProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={alertDialogFooterStyle({ class: className })} {...props} />;
+});
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+export const AlertDialogCloseButton = React.forwardRef<React.ElementRef<typeof Pressable>, AlertDialogCloseButtonProps>(({ className, ...props }, ref) => {
+  const { onClose } = useAlertDialogContext();
+  return <Pressable ref={ref} onPress={onClose} className={alertDialogCloseButtonStyle({ class: className })} accessibilityRole="button" accessibilityLabel="Close" {...props} />;
+});
+AlertDialogCloseButton.displayName = 'AlertDialogCloseButton';

package/src/alert-dialog/index.ts

@@ -1,2 +1,2 @@
-export { AlertDialog, AlertDialogProvider, useAlertDialogContext, AlertDialogBackdrop, AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, AlertDialogCloseButton } from './alert-dialog';
-export type { AlertDialogProps, AlertDialogBackdropProps, AlertDialogContentProps, AlertDialogHeaderProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogCloseButtonProps, AlertDialogSize, AlertDialogContextValue } from './types';
+export { AlertDialog, AlertDialogProvider, useAlertDialogContext, AlertDialogBackdrop, AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, AlertDialogCloseButton } from './alert-dialog';
+export type { AlertDialogProps, AlertDialogBackdropProps, AlertDialogContentProps, AlertDialogHeaderProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogCloseButtonProps, AlertDialogSize, AlertDialogContextValue } from './types';

package/src/alert-dialog/styles.ts

@@ -1,40 +1,40 @@
-import { tv } from 'tailwind-variants';
-
-export const alertDialogContentStyle = tv({
-  base: 'bg-background-0 rounded-xl p-6 shadow-hard-2 w-full',
-  variants: {
-    size: {
-      xs: 'max-w-[280px]',
-      sm: 'max-w-[320px]',
-      md: 'max-w-[400px]',
-      lg: 'max-w-[520px]',
-      full: 'max-w-full mx-4',
-    },
-  },
-  defaultVariants: { size: 'md' },
-});
-
-export const alertDialogBackdropStyle = tv({
-  base: 'absolute inset-0 bg-black/50',
-  variants: {},
-});
-
-export const alertDialogHeaderStyle = tv({
-  base: 'flex-row items-center justify-between mb-2',
-  variants: {},
-});
-
-export const alertDialogBodyStyle = tv({
-  base: 'mb-4',
-  variants: {},
-});
-
-export const alertDialogFooterStyle = tv({
-  base: 'flex-row justify-end gap-3',
-  variants: {},
-});
-
-export const alertDialogCloseButtonStyle = tv({
-  base: 'p-1 rounded',
-  variants: {},
-});
+import { tv } from 'tailwind-variants';
+
+export const alertDialogContentStyle = tv({
+  base: 'bg-background-0 rounded-xl p-6 shadow-hard-2 w-full',
+  variants: {
+    size: {
+      xs: 'max-w-[280px]',
+      sm: 'max-w-[320px]',
+      md: 'max-w-[400px]',
+      lg: 'max-w-[520px]',
+      full: 'max-w-full mx-4',
+    },
+  },
+  defaultVariants: { size: 'md' },
+});
+
+export const alertDialogBackdropStyle = tv({
+  base: 'absolute inset-0 bg-black/50',
+  variants: {},
+});
+
+export const alertDialogHeaderStyle = tv({
+  base: 'flex-row items-center justify-between mb-2',
+  variants: {},
+});
+
+export const alertDialogBodyStyle = tv({
+  base: 'mb-4',
+  variants: {},
+});
+
+export const alertDialogFooterStyle = tv({
+  base: 'flex-row justify-end gap-3',
+  variants: {},
+});
+
+export const alertDialogCloseButtonStyle = tv({
+  base: 'p-1 rounded',
+  variants: {},
+});

package/src/alert-dialog/types.ts

@@ -1,40 +1,40 @@
-import type { View, Pressable } from 'react-native';
-
-export type AlertDialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'full';
-
-export interface AlertDialogContextValue {
-  isOpen: boolean;
-  onClose: () => void;
-  size: AlertDialogSize;
-}
-
-export interface AlertDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  size?: AlertDialogSize;
-  children: React.ReactNode;
-}
-
-export interface AlertDialogBackdropProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-}
-
-export interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface AlertDialogHeaderProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface AlertDialogBodyProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface AlertDialogFooterProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface AlertDialogCloseButtonProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-}
+import type { View, Pressable } from 'react-native';
+
+export type AlertDialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'full';
+
+export interface AlertDialogContextValue {
+  isOpen: boolean;
+  onClose: () => void;
+  size: AlertDialogSize;
+}
+
+export interface AlertDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  size?: AlertDialogSize;
+  children: React.ReactNode;
+}
+
+export interface AlertDialogBackdropProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}
+
+export interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface AlertDialogHeaderProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface AlertDialogBodyProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface AlertDialogFooterProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface AlertDialogCloseButtonProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}

package/src/aspect-ratio/aspect-ratio.tsx

@@ -1,20 +1,20 @@
-import React from 'react';
-import { View } from 'react-native';
-import type { AspectRatioProps } from './types';
-import { aspectRatioStyle } from './styles';
-
-export const AspectRatio = React.forwardRef<
-  React.ElementRef<typeof View>,
-  AspectRatioProps
->(({ className, ratio = 1, style, ...props }, ref) => {
-  return (
-    <View
-      ref={ref}
-      className={aspectRatioStyle({ class: className })}
-      style={[{ aspectRatio: ratio }, style]}
-      {...props}
-    />
-  );
-});
-
-AspectRatio.displayName = 'AspectRatio';
+import React from 'react';
+import { View } from 'react-native';
+import type { AspectRatioProps } from './types';
+import { aspectRatioStyle } from './styles';
+
+export const AspectRatio = React.forwardRef<
+  React.ElementRef<typeof View>,
+  AspectRatioProps
+>(({ className, ratio = 1, style, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={aspectRatioStyle({ class: className })}
+      style={[{ aspectRatio: ratio }, style]}
+      {...props}
+    />
+  );
+});
+
+AspectRatio.displayName = 'AspectRatio';

package/src/aspect-ratio/index.ts

@@ -1,2 +1,2 @@
-export { AspectRatio } from './aspect-ratio';
-export type { AspectRatioProps } from './types';
+export { AspectRatio } from './aspect-ratio';
+export type { AspectRatioProps } from './types';

package/src/aspect-ratio/styles.ts

@@ -1,6 +1,6 @@
-import { tv } from 'tailwind-variants';
-
-export const aspectRatioStyle = tv({
-  base: 'relative overflow-hidden',
-  variants: {},
-});
+import { tv } from 'tailwind-variants';
+
+export const aspectRatioStyle = tv({
+  base: 'relative overflow-hidden',
+  variants: {},
+});

package/src/aspect-ratio/types.ts

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

package/src/avatar/avatar-badge.tsx

@@ -1,22 +1,22 @@
-import React from 'react';
-import { View } from 'react-native';
-import { useAvatarContext } from './avatar';
-import type { AvatarBadgeProps } from './types';
-import { avatarBadgeStyle } from './styles';
-
-export const AvatarBadge = React.forwardRef<
-  React.ElementRef<typeof View>,
-  AvatarBadgeProps
->(({ className, ...props }, ref) => {
-  const { size } = useAvatarContext();
-
-  return (
-    <View
-      ref={ref}
-      className={avatarBadgeStyle({ size, class: className })}
-      {...props}
-    />
-  );
-});
-
-AvatarBadge.displayName = 'AvatarBadge';
+import React from 'react';
+import { View } from 'react-native';
+import { useAvatarContext } from './avatar';
+import type { AvatarBadgeProps } from './types';
+import { avatarBadgeStyle } from './styles';
+
+export const AvatarBadge = React.forwardRef<
+  React.ElementRef<typeof View>,
+  AvatarBadgeProps
+>(({ className, ...props }, ref) => {
+  const { size } = useAvatarContext();
+
+  return (
+    <View
+      ref={ref}
+      className={avatarBadgeStyle({ size, class: className })}
+      {...props}
+    />
+  );
+});
+
+AvatarBadge.displayName = 'AvatarBadge';

package/src/avatar/avatar-fallback-text.tsx

@@ -1,33 +1,33 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { useAvatarContext } from './avatar';
-import type { AvatarFallbackTextProps } from './types';
-import { avatarFallbackTextStyle } from './styles';
-
-export const AvatarFallbackText = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  AvatarFallbackTextProps
->(({ className, children, ...props }, ref) => {
-  const { size } = useAvatarContext();
-
-  const initials =
-    typeof children === 'string'
-      ? children
-          .split(' ')
-          .map((w) => w[0])
-          .join('')
-          .slice(0, 2)
-      : children;
-
-  return (
-    <Text
-      ref={ref}
-      className={avatarFallbackTextStyle({ size, class: className })}
-      {...props}
-    >
-      {initials}
-    </Text>
-  );
-});
-
-AvatarFallbackText.displayName = 'AvatarFallbackText';
+import React from 'react';
+import { Text } from 'react-native';
+import { useAvatarContext } from './avatar';
+import type { AvatarFallbackTextProps } from './types';
+import { avatarFallbackTextStyle } from './styles';
+
+export const AvatarFallbackText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  AvatarFallbackTextProps
+>(({ className, children, ...props }, ref) => {
+  const { size } = useAvatarContext();
+
+  const initials =
+    typeof children === 'string'
+      ? children
+          .split(' ')
+          .map((w) => w[0])
+          .join('')
+          .slice(0, 2)
+      : children;
+
+  return (
+    <Text
+      ref={ref}
+      className={avatarFallbackTextStyle({ size, class: className })}
+      {...props}
+    >
+      {initials}
+    </Text>
+  );
+});
+
+AvatarFallbackText.displayName = 'AvatarFallbackText';

package/src/avatar/avatar-group.tsx

@@ -1,53 +1,53 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-import type { AvatarGroupProps, AvatarSize } from './types';
-import {
-  avatarGroupStyle,
-  avatarGroupOverflowStyle,
-  avatarGroupOverflowTextStyle,
-} from './styles';
-
-export const AvatarGroup = React.forwardRef<
-  React.ElementRef<typeof View>,
-  AvatarGroupProps
->(({ className, max, children, ...props }, ref) => {
-  const childArray = React.Children.toArray(children);
-  const totalCount = childArray.length;
-  const shouldTruncate = max != null && totalCount > max;
-  const visibleChildren = shouldTruncate
-    ? childArray.slice(0, max)
-    : childArray;
-  const overflowCount = shouldTruncate ? totalCount - max : 0;
-
-  // Try to read size from first Avatar child
-  const firstChild = childArray[0];
-  const size: AvatarSize =
-    React.isValidElement<{ size?: AvatarSize }>(firstChild) && firstChild.props.size
-      ? firstChild.props.size
-      : 'md';
-
-  return (
-    <View
-      ref={ref}
-      className={avatarGroupStyle({ class: className })}
-      {...props}
-    >
-      {visibleChildren.map((child, index) => (
-        <View key={index} className={index > 0 ? '-ml-2' : ''}>
-          {child}
-        </View>
-      ))}
-      {shouldTruncate && (
-        <View className="-ml-2">
-          <View className={avatarGroupOverflowStyle({ size })}>
-            <Text className={avatarGroupOverflowTextStyle({ size })}>
-              +{overflowCount}
-            </Text>
-          </View>
-        </View>
-      )}
-    </View>
-  );
-});
-
-AvatarGroup.displayName = 'AvatarGroup';
+import React from 'react';
+import { View, Text } from 'react-native';
+import type { AvatarGroupProps, AvatarSize } from './types';
+import {
+  avatarGroupStyle,
+  avatarGroupOverflowStyle,
+  avatarGroupOverflowTextStyle,
+} from './styles';
+
+export const AvatarGroup = React.forwardRef<
+  React.ElementRef<typeof View>,
+  AvatarGroupProps
+>(({ className, max, children, ...props }, ref) => {
+  const childArray = React.Children.toArray(children);
+  const totalCount = childArray.length;
+  const shouldTruncate = max != null && totalCount > max;
+  const visibleChildren = shouldTruncate
+    ? childArray.slice(0, max)
+    : childArray;
+  const overflowCount = shouldTruncate ? totalCount - max : 0;
+
+  // Try to read size from first Avatar child
+  const firstChild = childArray[0];
+  const size: AvatarSize =
+    React.isValidElement<{ size?: AvatarSize }>(firstChild) && firstChild.props.size
+      ? firstChild.props.size
+      : 'md';
+
+  return (
+    <View
+      ref={ref}
+      className={avatarGroupStyle({ class: className })}
+      {...props}
+    >
+      {visibleChildren.map((child, index) => (
+        <View key={index} className={index > 0 ? '-ml-2' : ''}>
+          {child}
+        </View>
+      ))}
+      {shouldTruncate && (
+        <View className="-ml-2">
+          <View className={avatarGroupOverflowStyle({ size })}>
+            <Text className={avatarGroupOverflowTextStyle({ size })}>
+              +{overflowCount}
+            </Text>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+});
+
+AvatarGroup.displayName = 'AvatarGroup';

package/src/avatar/avatar-image.tsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import { Image } from 'react-native';
-import type { AvatarImageProps } from './types';
-import { avatarImageStyle } from './styles';
-
-export const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof Image>,
-  AvatarImageProps
->(({ className, source, alt, ...props }, ref) => {
-  return (
-    <Image
-      ref={ref}
-      source={source as any}
-      accessibilityLabel={alt}
-      className={avatarImageStyle({ class: className })}
-      {...props}
-    />
-  );
-});
-
-AvatarImage.displayName = 'AvatarImage';
+import React from 'react';
+import { Image } from 'react-native';
+import type { AvatarImageProps } from './types';
+import { avatarImageStyle } from './styles';
+
+export const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof Image>,
+  AvatarImageProps
+>(({ className, source, alt, ...props }, ref) => {
+  return (
+    <Image
+      ref={ref}
+      source={source as any}
+      accessibilityLabel={alt}
+      className={avatarImageStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+AvatarImage.displayName = 'AvatarImage';