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

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';

package/src/avatar/avatar.tsx

@@ -1,27 +1,27 @@
-import React from 'react';
-import { View } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { AvatarProps, AvatarContextValue } from './types';
-import { avatarStyle } from './styles';
-
-export const [AvatarProvider, useAvatarContext] =
-  createComponentContext<AvatarContextValue>('Avatar');
-
-export const Avatar = React.forwardRef<
-  React.ElementRef<typeof View>,
-  AvatarProps
->(({ className, size = 'md', children, ...props }, ref) => {
-  return (
-    <AvatarProvider value={{ size }}>
-      <View
-        ref={ref}
-        className={avatarStyle({ size, class: className })}
-        {...props}
-      >
-        {children}
-      </View>
-    </AvatarProvider>
-  );
-});
-
-Avatar.displayName = 'Avatar';
+import React from 'react';
+import { View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { AvatarProps, AvatarContextValue } from './types';
+import { avatarStyle } from './styles';
+
+export const [AvatarProvider, useAvatarContext] =
+  createComponentContext<AvatarContextValue>('Avatar');
+
+export const Avatar = React.forwardRef<
+  React.ElementRef<typeof View>,
+  AvatarProps
+>(({ className, size = 'md', children, ...props }, ref) => {
+  return (
+    <AvatarProvider value={{ size }}>
+      <View
+        ref={ref}
+        className={avatarStyle({ size, class: className })}
+        {...props}
+      >
+        {children}
+      </View>
+    </AvatarProvider>
+  );
+});
+
+Avatar.displayName = 'Avatar';

package/src/avatar/index.ts

@@ -1,14 +1,14 @@
-export { Avatar } from './avatar';
-export { AvatarImage } from './avatar-image';
-export { AvatarFallbackText } from './avatar-fallback-text';
-export { AvatarBadge } from './avatar-badge';
-export { AvatarGroup } from './avatar-group';
-
-export type {
-  AvatarProps,
-  AvatarImageProps,
-  AvatarFallbackTextProps,
-  AvatarBadgeProps,
-  AvatarGroupProps,
-  AvatarSize,
-} from './types';
+export { Avatar } from './avatar';
+export { AvatarImage } from './avatar-image';
+export { AvatarFallbackText } from './avatar-fallback-text';
+export { AvatarBadge } from './avatar-badge';
+export { AvatarGroup } from './avatar-group';
+
+export type {
+  AvatarProps,
+  AvatarImageProps,
+  AvatarFallbackTextProps,
+  AvatarBadgeProps,
+  AvatarGroupProps,
+  AvatarSize,
+} from './types';

package/src/avatar/styles.ts

@@ -1,94 +1,94 @@
-import { tv } from 'tailwind-variants';
-
-export const avatarStyle = tv({
-  base: 'rounded-full items-center justify-center bg-primary-500 overflow-hidden relative',
-  variants: {
-    size: {
-      'xs': 'h-6 w-6',
-      'sm': 'h-8 w-8',
-      'md': 'h-10 w-10',
-      'lg': 'h-12 w-12',
-      'xl': 'h-14 w-14',
-      '2xl': 'h-16 w-16',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export const avatarImageStyle = tv({
-  base: 'h-full w-full rounded-full absolute',
-});
-
-export const avatarFallbackTextStyle = tv({
-  base: 'text-typography-0 font-semibold uppercase',
-  variants: {
-    size: {
-      'xs': 'text-2xs',
-      'sm': 'text-xs',
-      'md': 'text-sm',
-      'lg': 'text-base',
-      'xl': 'text-lg',
-      '2xl': 'text-xl',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export const avatarBadgeStyle = tv({
-  base: 'absolute rounded-full bg-success-500 border-2 border-background-0',
-  variants: {
-    size: {
-      'xs': 'h-2 w-2 bottom-0 right-0',
-      'sm': 'h-2.5 w-2.5 bottom-0 right-0',
-      'md': 'h-3 w-3 bottom-0 right-0',
-      'lg': 'h-3.5 w-3.5 bottom-0 right-0',
-      'xl': 'h-4 w-4 bottom-0 right-0',
-      '2xl': 'h-4 w-4 bottom-0.5 right-0.5',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export const avatarGroupStyle = tv({
-  base: 'flex-row items-center',
-});
-
-export const avatarGroupOverflowStyle = tv({
-  base: 'rounded-full items-center justify-center bg-background-300',
-  variants: {
-    size: {
-      'xs': 'h-6 w-6',
-      'sm': 'h-8 w-8',
-      'md': 'h-10 w-10',
-      'lg': 'h-12 w-12',
-      'xl': 'h-14 w-14',
-      '2xl': 'h-16 w-16',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export const avatarGroupOverflowTextStyle = tv({
-  base: 'text-typography-700 font-semibold',
-  variants: {
-    size: {
-      'xs': 'text-2xs',
-      'sm': 'text-xs',
-      'md': 'text-xs',
-      'lg': 'text-sm',
-      'xl': 'text-base',
-      '2xl': 'text-lg',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
+import { tv } from 'tailwind-variants';
+
+export const avatarStyle = tv({
+  base: 'rounded-full items-center justify-center bg-primary-500 overflow-hidden relative',
+  variants: {
+    size: {
+      'xs': 'h-6 w-6',
+      'sm': 'h-8 w-8',
+      'md': 'h-10 w-10',
+      'lg': 'h-12 w-12',
+      'xl': 'h-14 w-14',
+      '2xl': 'h-16 w-16',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const avatarImageStyle = tv({
+  base: 'h-full w-full rounded-full absolute',
+});
+
+export const avatarFallbackTextStyle = tv({
+  base: 'text-typography-0 font-semibold uppercase',
+  variants: {
+    size: {
+      'xs': 'text-2xs',
+      'sm': 'text-xs',
+      'md': 'text-sm',
+      'lg': 'text-base',
+      'xl': 'text-lg',
+      '2xl': 'text-xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const avatarBadgeStyle = tv({
+  base: 'absolute rounded-full bg-success-500 border-2 border-background-0',
+  variants: {
+    size: {
+      'xs': 'h-2 w-2 bottom-0 right-0',
+      'sm': 'h-2.5 w-2.5 bottom-0 right-0',
+      'md': 'h-3 w-3 bottom-0 right-0',
+      'lg': 'h-3.5 w-3.5 bottom-0 right-0',
+      'xl': 'h-4 w-4 bottom-0 right-0',
+      '2xl': 'h-4 w-4 bottom-0.5 right-0.5',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const avatarGroupStyle = tv({
+  base: 'flex-row items-center',
+});
+
+export const avatarGroupOverflowStyle = tv({
+  base: 'rounded-full items-center justify-center bg-background-300',
+  variants: {
+    size: {
+      'xs': 'h-6 w-6',
+      'sm': 'h-8 w-8',
+      'md': 'h-10 w-10',
+      'lg': 'h-12 w-12',
+      'xl': 'h-14 w-14',
+      '2xl': 'h-16 w-16',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const avatarGroupOverflowTextStyle = tv({
+  base: 'text-typography-700 font-semibold',
+  variants: {
+    size: {
+      'xs': 'text-2xs',
+      'sm': 'text-xs',
+      'md': 'text-xs',
+      'lg': 'text-sm',
+      'xl': 'text-base',
+      '2xl': 'text-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/avatar/types.ts

@@ -1,35 +1,35 @@
-import type { View, Text as RNText, ImageSourcePropType } from 'react-native';
-
-export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-
-export interface AvatarContextValue {
-  size: AvatarSize;
-}
-
-export interface AvatarProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  size?: AvatarSize;
-}
-
-export interface AvatarImageProps {
-  className?: string;
-  source: ImageSourcePropType | { uri: string };
-  alt?: string;
-}
-
-export interface AvatarFallbackTextProps
-  extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
-
-export interface AvatarBadgeProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface AvatarGroupProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  max?: number;
-}
+import type { View, Text as RNText, ImageSourcePropType } from 'react-native';
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export interface AvatarContextValue {
+  size: AvatarSize;
+}
+
+export interface AvatarProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  size?: AvatarSize;
+}
+
+export interface AvatarImageProps {
+  className?: string;
+  source: ImageSourcePropType | { uri: string };
+  alt?: string;
+}
+
+export interface AvatarFallbackTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface AvatarBadgeProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface AvatarGroupProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  max?: number;
+}

package/src/badge/badge-icon.tsx

@@ -1,20 +1,20 @@
-import React from 'react';
-import { useBadgeContext } from './badge';
-import type { BadgeIconProps } from './types';
-import { badgeIconStyle } from './styles';
-
-export const BadgeIcon = React.forwardRef<any, BadgeIconProps>(
-  ({ as: IconComponent, className, ...props }, ref) => {
-    const { action, variant, size } = useBadgeContext();
-
-    return (
-      <IconComponent
-        ref={ref}
-        className={badgeIconStyle({ action, variant, size, class: className })}
-        {...props}
-      />
-    );
-  },
-);
-
-BadgeIcon.displayName = 'BadgeIcon';
+import React from 'react';
+import { useBadgeContext } from './badge';
+import type { BadgeIconProps } from './types';
+import { badgeIconStyle } from './styles';
+
+export const BadgeIcon = React.forwardRef<any, BadgeIconProps>(
+  ({ as: IconComponent, className, ...props }, ref) => {
+    const { action, variant, size } = useBadgeContext();
+
+    return (
+      <IconComponent
+        ref={ref}
+        className={badgeIconStyle({ action, variant, size, class: className })}
+        {...props}
+      />
+    );
+  },
+);
+
+BadgeIcon.displayName = 'BadgeIcon';