@wireservers-ui/react-natives 0.1.0

package/src/alert-dialog/types.ts

@@ -0,0 +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;
+}

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

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

package/src/aspect-ratio/index.ts

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

package/src/aspect-ratio/styles.ts

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

package/src/aspect-ratio/types.ts

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

package/src/avatar/avatar-badge.tsx

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

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

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

package/src/avatar/avatar-group.tsx

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

package/src/avatar/avatar-image.tsx

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

package/src/avatar/avatar.tsx

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

package/src/avatar/index.ts

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

package/src/avatar/styles.ts

@@ -0,0 +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',
+  },
+});

package/src/avatar/types.ts

@@ -0,0 +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;
+}

package/src/badge/badge-icon.tsx

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

package/src/badge/badge-text.tsx

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

package/src/badge/badge.tsx

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

package/src/badge/index.ts

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

package/src/badge/styles.ts

@@ -0,0 +1,175 @@
+import { tv } from 'tailwind-variants';
+
+export const badgeStyle = tv({
+  base: 'flex-row items-center self-start rounded-full',
+  variants: {
+    action: {
+      primary: '',
+      secondary: '',
+      error: '',
+      success: '',
+      warning: '',
+      info: '',
+      muted: '',
+    },
+    variant: {
+      solid: '',
+      outline: 'bg-transparent border',
+      subtle: '',
+    },
+    size: {
+      sm: 'px-2 py-0.5',
+      md: 'px-2.5 py-0.5',
+      lg: 'px-3 py-1',
+    },
+  },
+  compoundVariants: [
+    // solid backgrounds
+    { action: 'primary', variant: 'solid', class: 'bg-primary-500' },
+    { action: 'secondary', variant: 'solid', class: 'bg-secondary-500' },
+    { action: 'error', variant: 'solid', class: 'bg-error-500' },
+    { action: 'success', variant: 'solid', class: 'bg-success-500' },
+    { action: 'warning', variant: 'solid', class: 'bg-warning-500' },
+    { action: 'info', variant: 'solid', class: 'bg-info-500' },
+    { action: 'muted', variant: 'solid', class: 'bg-background-300' },
+
+    // outline borders
+    { action: 'primary', variant: 'outline', class: 'border-primary-500' },
+    { action: 'secondary', variant: 'outline', class: 'border-secondary-500' },
+    { action: 'error', variant: 'outline', class: 'border-error-500' },
+    { action: 'success', variant: 'outline', class: 'border-success-500' },
+    { action: 'warning', variant: 'outline', class: 'border-warning-500' },
+    { action: 'info', variant: 'outline', class: 'border-info-500' },
+    { action: 'muted', variant: 'outline', class: 'border-outline-300' },
+
+    // subtle backgrounds
+    { action: 'primary', variant: 'subtle', class: 'bg-primary-100' },
+    { action: 'secondary', variant: 'subtle', class: 'bg-secondary-100' },
+    { action: 'error', variant: 'subtle', class: 'bg-error-100' },
+    { action: 'success', variant: 'subtle', class: 'bg-success-100' },
+    { action: 'warning', variant: 'subtle', class: 'bg-warning-100' },
+    { action: 'info', variant: 'subtle', class: 'bg-info-100' },
+    { action: 'muted', variant: 'subtle', class: 'bg-background-100' },
+  ],
+  defaultVariants: {
+    action: 'info',
+    variant: 'subtle',
+    size: 'md',
+  },
+});
+
+export const badgeTextStyle = tv({
+  base: 'font-medium',
+  variants: {
+    action: {
+      primary: '',
+      secondary: '',
+      error: '',
+      success: '',
+      warning: '',
+      info: '',
+      muted: '',
+    },
+    variant: {
+      solid: '',
+      outline: '',
+      subtle: '',
+    },
+    size: {
+      sm: 'text-2xs',
+      md: 'text-xs',
+      lg: 'text-sm',
+    },
+  },
+  compoundVariants: [
+    // solid text colors (white on colored bg)
+    { action: 'primary', variant: 'solid', class: 'text-typography-0' },
+    { action: 'secondary', variant: 'solid', class: 'text-typography-0' },
+    { action: 'error', variant: 'solid', class: 'text-typography-0' },
+    { action: 'success', variant: 'solid', class: 'text-typography-0' },
+    { action: 'warning', variant: 'solid', class: 'text-typography-0' },
+    { action: 'info', variant: 'solid', class: 'text-typography-0' },
+    { action: 'muted', variant: 'solid', class: 'text-typography-900' },
+
+    // outline text colors
+    { action: 'primary', variant: 'outline', class: 'text-primary-600' },
+    { action: 'secondary', variant: 'outline', class: 'text-secondary-600' },
+    { action: 'error', variant: 'outline', class: 'text-error-600' },
+    { action: 'success', variant: 'outline', class: 'text-success-600' },
+    { action: 'warning', variant: 'outline', class: 'text-warning-600' },
+    { action: 'info', variant: 'outline', class: 'text-info-600' },
+    { action: 'muted', variant: 'outline', class: 'text-typography-700' },
+
+    // subtle text colors
+    { action: 'primary', variant: 'subtle', class: 'text-primary-800' },
+    { action: 'secondary', variant: 'subtle', class: 'text-secondary-800' },
+    { action: 'error', variant: 'subtle', class: 'text-error-800' },
+    { action: 'success', variant: 'subtle', class: 'text-success-800' },
+    { action: 'warning', variant: 'subtle', class: 'text-warning-800' },
+    { action: 'info', variant: 'subtle', class: 'text-info-800' },
+    { action: 'muted', variant: 'subtle', class: 'text-typography-700' },
+  ],
+  defaultVariants: {
+    action: 'info',
+    variant: 'subtle',
+    size: 'md',
+  },
+});
+
+export const badgeIconStyle = tv({
+  base: 'mr-1',
+  variants: {
+    action: {
+      primary: '',
+      secondary: '',
+      error: '',
+      success: '',
+      warning: '',
+      info: '',
+      muted: '',
+    },
+    variant: {
+      solid: '',
+      outline: '',
+      subtle: '',
+    },
+    size: {
+      sm: 'h-3 w-3',
+      md: 'h-3.5 w-3.5',
+      lg: 'h-4 w-4',
+    },
+  },
+  compoundVariants: [
+    // solid icon colors (white on colored bg)
+    { action: 'primary', variant: 'solid', class: 'text-typography-0' },
+    { action: 'secondary', variant: 'solid', class: 'text-typography-0' },
+    { action: 'error', variant: 'solid', class: 'text-typography-0' },
+    { action: 'success', variant: 'solid', class: 'text-typography-0' },
+    { action: 'warning', variant: 'solid', class: 'text-typography-0' },
+    { action: 'info', variant: 'solid', class: 'text-typography-0' },
+    { action: 'muted', variant: 'solid', class: 'text-typography-900' },
+
+    // outline icon colors
+    { action: 'primary', variant: 'outline', class: 'text-primary-600' },
+    { action: 'secondary', variant: 'outline', class: 'text-secondary-600' },
+    { action: 'error', variant: 'outline', class: 'text-error-600' },
+    { action: 'success', variant: 'outline', class: 'text-success-600' },
+    { action: 'warning', variant: 'outline', class: 'text-warning-600' },
+    { action: 'info', variant: 'outline', class: 'text-info-600' },
+    { action: 'muted', variant: 'outline', class: 'text-typography-700' },
+
+    // subtle icon colors
+    { action: 'primary', variant: 'subtle', class: 'text-primary-800' },
+    { action: 'secondary', variant: 'subtle', class: 'text-secondary-800' },
+    { action: 'error', variant: 'subtle', class: 'text-error-800' },
+    { action: 'success', variant: 'subtle', class: 'text-success-800' },
+    { action: 'warning', variant: 'subtle', class: 'text-warning-800' },
+    { action: 'info', variant: 'subtle', class: 'text-info-800' },
+    { action: 'muted', variant: 'subtle', class: 'text-typography-700' },
+  ],
+  defaultVariants: {
+    action: 'info',
+    variant: 'subtle',
+    size: 'md',
+  },
+});