@wireservers-ui/react-natives 0.1.0

package/src/form-control/types.ts

@@ -0,0 +1,45 @@
+import type { View, Text as RNText } from 'react-native';
+import type { Size } from '../utils/types';
+
+export interface FormControlContextValue {
+  isDisabled: boolean;
+  isInvalid: boolean;
+  isRequired: boolean;
+  isReadOnly: boolean;
+  size: Size;
+}
+
+export interface FormControlProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isRequired?: boolean;
+  isReadOnly?: boolean;
+  size?: Size;
+}
+
+export interface FormControlLabelProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface FormControlLabelTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface FormControlHelperTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface FormControlErrorMessageProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface FormControlErrorIconProps {
+  as?: React.ElementType;
+  className?: string;
+}

package/src/heading/heading.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Text } from 'react-native';
+import type { HeadingProps } from './types';
+import { headingStyle } from './styles';
+
+export const Heading = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  HeadingProps
+>(({ className, size, isTruncated, numberOfLines, ...props }, ref) => {
+  return (
+    <Text
+      ref={ref}
+      role="heading"
+      numberOfLines={isTruncated ? 1 : numberOfLines}
+      className={headingStyle({ size, isTruncated, class: className })}
+      {...props}
+    />
+  );
+});
+
+Heading.displayName = 'Heading';

package/src/heading/index.ts

@@ -0,0 +1,2 @@
+export { Heading } from './heading';
+export type { HeadingProps, HeadingSize } from './types';

package/src/heading/styles.ts

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+
+export const headingStyle = tv({
+  base: 'text-typography-900 font-bold',
+  variants: {
+    size: {
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+    },
+    isTruncated: {
+      true: 'truncate',
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+});

package/src/heading/types.ts

@@ -0,0 +1,19 @@
+import type { Text as RNText } from 'react-native';
+
+export type HeadingSize =
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl'
+  | '5xl';
+
+export interface HeadingProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+  size?: HeadingSize;
+  isTruncated?: boolean;
+}

package/src/icon/icon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { IconProps } from './types';
+import { iconStyle } from './styles';
+
+export const Icon = React.forwardRef<any, IconProps>(
+  ({ as: AsComp, className, size, color, ...props }, ref) => {
+    const sizeClass = typeof size === 'number' ? undefined : size;
+
+    return (
+      <AsComp
+        ref={ref}
+        className={iconStyle({ size: sizeClass, class: className })}
+        size={typeof size === 'number' ? size : undefined}
+        color={color}
+        {...props}
+      />
+    );
+  },
+);
+
+Icon.displayName = 'Icon';

package/src/icon/index.ts

@@ -0,0 +1,2 @@
+export { Icon } from './icon';
+export type { IconProps, IconSize } from './types';

package/src/icon/styles.ts

@@ -0,0 +1,18 @@
+import { tv } from 'tailwind-variants';
+
+export const iconStyle = tv({
+  base: 'fill-none text-typography-900',
+  variants: {
+    size: {
+      'xs': 'h-4 w-4',
+      'sm': 'h-5 w-5',
+      'md': 'h-6 w-6',
+      'lg': 'h-8 w-8',
+      'xl': 'h-10 w-10',
+      '2xl': 'h-12 w-12',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/icon/types.ts

@@ -0,0 +1,8 @@
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export interface IconProps {
+  as: React.ElementType;
+  className?: string;
+  size?: IconSize | number;
+  color?: string;
+}

package/src/icon-button/icon-button.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import type { IconButtonProps } from './types';
+import { iconButtonStyle, iconButtonIconStyle } from './styles';
+
+export const IconButton = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  IconButtonProps
+>(({ as: IconComp, className, action = 'primary', variant = 'solid', size = 'md', isDisabled, ...props }, ref) => {
+  return (
+    <Pressable
+      ref={ref}
+      disabled={isDisabled}
+      className={iconButtonStyle({ action, variant, size, isDisabled, class: className })}
+      accessibilityRole="button"
+      {...props}
+    >
+      <IconComp className={iconButtonIconStyle({ action, variant, size })} />
+    </Pressable>
+  );
+});
+
+IconButton.displayName = 'IconButton';

package/src/icon-button/index.ts

@@ -0,0 +1,2 @@
+export { IconButton } from './icon-button';
+export type { IconButtonProps, IconButtonAction, IconButtonVariant, IconButtonSize } from './types';

package/src/icon-button/styles.ts

@@ -0,0 +1,78 @@
+import { tv } from 'tailwind-variants';
+
+export const iconButtonStyle = tv({
+  base: 'items-center justify-center rounded-lg',
+  variants: {
+    action: {
+      primary: '', secondary: '', positive: '', negative: '', default: '',
+    },
+    variant: {
+      solid: '', outline: 'bg-transparent border', ghost: 'bg-transparent',
+    },
+    size: {
+      xs: 'h-7 w-7',
+      sm: 'h-8 w-8',
+      md: 'h-10 w-10',
+      lg: 'h-12 w-12',
+      xl: 'h-14 w-14',
+    },
+    isDisabled: {
+      true: 'opacity-50',
+    },
+  },
+  compoundVariants: [
+    { action: 'primary', variant: 'solid', class: 'bg-primary-500' },
+    { action: 'primary', variant: 'outline', class: 'border-primary-300' },
+    { action: 'secondary', variant: 'solid', class: 'bg-secondary-500' },
+    { action: 'secondary', variant: 'outline', class: 'border-secondary-300' },
+    { action: 'positive', variant: 'solid', class: 'bg-success-500' },
+    { action: 'positive', variant: 'outline', class: 'border-success-300' },
+    { action: 'negative', variant: 'solid', class: 'bg-error-500' },
+    { action: 'negative', variant: 'outline', class: 'border-error-300' },
+    { action: 'default', variant: 'solid', class: 'bg-background-200' },
+    { action: 'default', variant: 'outline', class: 'border-outline-300' },
+  ],
+  defaultVariants: {
+    action: 'primary',
+    variant: 'solid',
+    size: 'md',
+  },
+});
+
+export const iconButtonIconStyle = tv({
+  base: '',
+  variants: {
+    action: {
+      primary: '', secondary: '', positive: '', negative: '', default: '',
+    },
+    variant: {
+      solid: 'text-typography-0',
+      outline: '',
+      ghost: '',
+    },
+    size: {
+      xs: 'h-3.5 w-3.5',
+      sm: 'h-4 w-4',
+      md: 'h-5 w-5',
+      lg: 'h-6 w-6',
+      xl: 'h-7 w-7',
+    },
+  },
+  compoundVariants: [
+    { action: 'primary', variant: 'outline', class: 'text-primary-500' },
+    { action: 'primary', variant: 'ghost', class: 'text-primary-500' },
+    { action: 'secondary', variant: 'outline', class: 'text-secondary-500' },
+    { action: 'secondary', variant: 'ghost', class: 'text-secondary-500' },
+    { action: 'positive', variant: 'outline', class: 'text-success-500' },
+    { action: 'positive', variant: 'ghost', class: 'text-success-500' },
+    { action: 'negative', variant: 'outline', class: 'text-error-500' },
+    { action: 'negative', variant: 'ghost', class: 'text-error-500' },
+    { action: 'default', variant: 'outline', class: 'text-typography-700' },
+    { action: 'default', variant: 'ghost', class: 'text-typography-700' },
+  ],
+  defaultVariants: {
+    action: 'primary',
+    variant: 'solid',
+    size: 'md',
+  },
+});

package/src/icon-button/types.ts

@@ -0,0 +1,15 @@
+import type { Pressable } from 'react-native';
+
+export type IconButtonAction = 'primary' | 'secondary' | 'positive' | 'negative' | 'default';
+export type IconButtonVariant = 'solid' | 'outline' | 'ghost';
+export type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface IconButtonProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  as: React.ElementType;
+  className?: string;
+  action?: IconButtonAction;
+  variant?: IconButtonVariant;
+  size?: IconButtonSize;
+  isDisabled?: boolean;
+}

package/src/image/image.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Image as RNImage } from 'react-native';
+import type { ImageProps } from './types';
+import { imageStyle } from './styles';
+
+export const Image = React.forwardRef<
+  React.ElementRef<typeof RNImage>,
+  ImageProps
+>(({ className, size, borderRadius, alt, ...props }, ref) => {
+  return (
+    <RNImage
+      ref={ref}
+      accessibilityLabel={alt}
+      className={imageStyle({ size, borderRadius, class: className })}
+      {...props}
+    />
+  );
+});
+
+Image.displayName = 'Image';

package/src/image/index.ts

@@ -0,0 +1,2 @@
+export { Image } from './image';
+export type { ImageProps, ImageSize, ImageBorderRadius } from './types';

package/src/image/styles.ts

@@ -0,0 +1,28 @@
+import { tv } from 'tailwind-variants';
+
+export const imageStyle = tv({
+  base: 'overflow-hidden',
+  variants: {
+    size: {
+      'xs': 'h-6 w-6',
+      'sm': 'h-8 w-8',
+      'md': 'h-12 w-12',
+      'lg': 'h-16 w-16',
+      'xl': 'h-24 w-24',
+      '2xl': 'h-32 w-32',
+      'full': 'w-full',
+    },
+    borderRadius: {
+      none: 'rounded-none',
+      sm: 'rounded-sm',
+      md: 'rounded-md',
+      lg: 'rounded-lg',
+      xl: 'rounded-xl',
+      full: 'rounded-full',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    borderRadius: 'none',
+  },
+});

package/src/image/types.ts

@@ -0,0 +1,11 @@
+import type { ImageProps as RNImageProps } from 'react-native';
+
+export type ImageSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+export type ImageBorderRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+export interface ImageProps extends Omit<RNImageProps, 'style' | 'borderRadius'> {
+  className?: string;
+  size?: ImageSize;
+  borderRadius?: ImageBorderRadius;
+  alt: string;
+}