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

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

package/src/badge/badge-text.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { useBadgeContext } from './badge';
-import type { BadgeTextProps } from './types';
-import { badgeTextStyle } from './styles';
-
-export const BadgeText = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  BadgeTextProps
->(({ className, children, ...props }, ref) => {
-  const { action, variant, size } = useBadgeContext();
-
-  return (
-    <Text
-      ref={ref}
-      className={badgeTextStyle({ action, variant, size, class: className })}
-      {...props}
-    >
-      {children}
-    </Text>
-  );
-});
-
-BadgeText.displayName = 'BadgeText';
+import React from 'react';
+import { Text } from 'react-native';
+import { useBadgeContext } from './badge';
+import type { BadgeTextProps } from './types';
+import { badgeTextStyle } from './styles';
+
+export const BadgeText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  BadgeTextProps
+>(({ className, children, ...props }, ref) => {
+  const { action, variant, size } = useBadgeContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={badgeTextStyle({ action, variant, size, class: className })}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+});
+
+BadgeText.displayName = 'BadgeText';

package/src/badge/badge.tsx

@@ -1,39 +1,39 @@
-import React from 'react';
-import { View } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { BadgeProps, BadgeContextValue } from './types';
-import { badgeStyle } from './styles';
-
-export const [BadgeProvider, useBadgeContext] =
-  createComponentContext<BadgeContextValue>('Badge');
-
-export const Badge = React.forwardRef<
-  React.ElementRef<typeof View>,
-  BadgeProps
->(
-  (
-    {
-      action = 'info',
-      variant = 'subtle',
-      size = 'md',
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <BadgeProvider value={{ action, variant, size }}>
-        <View
-          ref={ref}
-          className={badgeStyle({ action, variant, size, class: className })}
-          {...props}
-        >
-          {children}
-        </View>
-      </BadgeProvider>
-    );
-  },
-);
-
-Badge.displayName = 'Badge';
+import React from 'react';
+import { View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { BadgeProps, BadgeContextValue } from './types';
+import { badgeStyle } from './styles';
+
+export const [BadgeProvider, useBadgeContext] =
+  createComponentContext<BadgeContextValue>('Badge');
+
+export const Badge = React.forwardRef<
+  React.ElementRef<typeof View>,
+  BadgeProps
+>(
+  (
+    {
+      action = 'info',
+      variant = 'subtle',
+      size = 'md',
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <BadgeProvider value={{ action, variant, size }}>
+        <View
+          ref={ref}
+          className={badgeStyle({ action, variant, size, class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </BadgeProvider>
+    );
+  },
+);
+
+Badge.displayName = 'Badge';

package/src/badge/index.ts

@@ -1,11 +1,11 @@
-export { Badge } from './badge';
-export { BadgeText } from './badge-text';
-export { BadgeIcon } from './badge-icon';
-export type {
-  BadgeProps,
-  BadgeTextProps,
-  BadgeIconProps,
-  BadgeAction,
-  BadgeVariant,
-  BadgeSize,
-} from './types';
+export { Badge } from './badge';
+export { BadgeText } from './badge-text';
+export { BadgeIcon } from './badge-icon';
+export type {
+  BadgeProps,
+  BadgeTextProps,
+  BadgeIconProps,
+  BadgeAction,
+  BadgeVariant,
+  BadgeSize,
+} from './types';