@wireservers-ui/react-natives 0.1.0

package/src/text/styles.ts

@@ -0,0 +1,54 @@
+import { tv } from 'tailwind-variants';
+
+export const textStyle = tv({
+  base: 'text-typography-900 font-normal',
+  variants: {
+    size: {
+      '2xs': 'text-2xs',
+      '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',
+      '6xl': 'text-6xl',
+    },
+    weight: {
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+      bold: 'font-bold',
+      extrabold: 'font-extrabold',
+    },
+    isTruncated: {
+      true: 'truncate',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    italic: {
+      true: 'italic',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    highlight: {
+      true: 'bg-warning-100',
+    },
+    sub: {
+      true: 'text-xs',
+    },
+    sup: {
+      true: 'text-xs',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/text/text.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Text as RNText } from 'react-native';
+import type { TextProps } from './types';
+import { textStyle } from './styles';
+
+export const Text = React.forwardRef<
+  React.ElementRef<typeof RNText>,
+  TextProps
+>(
+  (
+    {
+      className,
+      size,
+      weight,
+      isTruncated,
+      bold,
+      italic,
+      underline,
+      strikeThrough,
+      highlight,
+      sub,
+      sup,
+      numberOfLines,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <RNText
+        ref={ref}
+        numberOfLines={isTruncated ? 1 : numberOfLines}
+        className={textStyle({
+          size,
+          weight,
+          isTruncated,
+          bold,
+          italic,
+          underline,
+          strikeThrough,
+          highlight,
+          sub,
+          sup,
+          class: className,
+        })}
+        {...props}
+      />
+    );
+  },
+);
+
+Text.displayName = 'Text';

package/src/text/types.ts

@@ -0,0 +1,36 @@
+import type { Text as RNText } from 'react-native';
+
+export type TextSize =
+  | '2xs'
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl'
+  | '5xl'
+  | '6xl';
+
+export type TextWeight =
+  | 'normal'
+  | 'medium'
+  | 'semibold'
+  | 'bold'
+  | 'extrabold';
+
+export interface TextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+  size?: TextSize;
+  weight?: TextWeight;
+  isTruncated?: boolean;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strikeThrough?: boolean;
+  highlight?: boolean;
+  sub?: boolean;
+  sup?: boolean;
+}

package/src/textarea/index.ts

@@ -0,0 +1,2 @@
+export { Textarea } from './textarea';
+export type { TextareaProps, TextareaVariant, TextareaSize } from './types';

package/src/textarea/styles.ts

@@ -0,0 +1,37 @@
+import { tv } from 'tailwind-variants';
+
+export const textareaStyle = tv({
+  base: 'text-typography-900 web:outline-none',
+  variants: {
+    variant: {
+      outline: 'border border-outline-300 rounded-md',
+      filled: 'border border-transparent rounded-md bg-background-50',
+      underlined: 'border-b border-outline-300 rounded-none',
+    },
+    size: {
+      sm: 'min-h-[80px] text-sm p-2',
+      md: 'min-h-[100px] text-base p-3',
+      lg: 'min-h-[120px] text-lg p-3',
+    },
+    isFocused: {
+      true: 'border-primary-500',
+    },
+    isInvalid: {
+      true: 'border-error-500',
+    },
+    isDisabled: {
+      true: 'opacity-40',
+    },
+  },
+  compoundVariants: [
+    {
+      isFocused: true,
+      isInvalid: true,
+      class: 'border-error-500',
+    },
+  ],
+  defaultVariants: {
+    variant: 'outline',
+    size: 'md',
+  },
+});

package/src/textarea/textarea.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { TextInput } from 'react-native';
+import { useFormControlContext } from '../form-control/form-control';
+import type { TextareaProps } from './types';
+import { textareaStyle } from './styles';
+
+export const Textarea = React.forwardRef<
+  React.ElementRef<typeof TextInput>,
+  TextareaProps
+>(
+  (
+    {
+      className,
+      variant = 'outline',
+      size = 'md',
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      isReadOnly: isReadOnlyProp,
+      onFocus: onFocusProp,
+      onBlur: onBlurProp,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const formControl = useFormControlContext();
+
+    const isDisabled = isDisabledProp ?? formControl?.isDisabled ?? false;
+    const isInvalid = isInvalidProp ?? formControl?.isInvalid ?? false;
+    const isReadOnly = isReadOnlyProp ?? formControl?.isReadOnly ?? false;
+
+    const handleFocus = (
+      e: Parameters<NonNullable<TextareaProps['onFocus']>>[0],
+    ) => {
+      setIsFocused(true);
+      onFocusProp?.(e);
+    };
+
+    const handleBlur = (
+      e: Parameters<NonNullable<TextareaProps['onBlur']>>[0],
+    ) => {
+      setIsFocused(false);
+      onBlurProp?.(e);
+    };
+
+    return (
+      <TextInput
+        ref={ref}
+        multiline
+        textAlignVertical="top"
+        editable={!isDisabled && !isReadOnly}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        className={textareaStyle({
+          variant,
+          size,
+          isFocused,
+          isInvalid,
+          isDisabled,
+          class: className,
+        })}
+        {...props}
+      />
+    );
+  },
+);
+
+Textarea.displayName = 'Textarea';

package/src/textarea/types.ts

@@ -0,0 +1,14 @@
+import type { TextInput } from 'react-native';
+
+export type TextareaVariant = 'outline' | 'filled' | 'underlined';
+export type TextareaSize = 'sm' | 'md' | 'lg';
+
+export interface TextareaProps
+  extends React.ComponentPropsWithoutRef<typeof TextInput> {
+  className?: string;
+  variant?: TextareaVariant;
+  size?: TextareaSize;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+}

package/src/timeline/index.ts

@@ -0,0 +1,2 @@
+export { Timeline, TimelineItem, TimelineDot, TimelineSeparator, TimelineConnector, TimelineContent } from './timeline';
+export type { TimelineProps, TimelineItemProps, TimelineDotProps, TimelineSeparatorProps, TimelineConnectorProps, TimelineContentProps, TimelineVariant } from './types';

package/src/timeline/styles.ts

@@ -0,0 +1,57 @@
+import { tv } from 'tailwind-variants';
+
+export const timelineStyle = tv({
+  base: 'gap-0',
+  variants: {},
+});
+
+export const timelineItemStyle = tv({
+  base: 'flex-row gap-3 items-stretch',
+  variants: {},
+});
+
+export const timelineSeparatorStyle = tv({
+  base: 'items-center',
+  variants: {},
+});
+
+export const timelineDotStyle = tv({
+  base: 'h-3 w-3 rounded-full',
+  variants: {
+    variant: {
+      solid: '',
+      outline: 'bg-transparent border-2',
+    },
+    color: {
+      primary: '', success: '', error: '', warning: '', info: '', muted: '',
+    },
+  },
+  compoundVariants: [
+    { color: 'primary', variant: 'solid', class: 'bg-primary-500' },
+    { color: 'primary', variant: 'outline', class: 'border-primary-500' },
+    { color: 'success', variant: 'solid', class: 'bg-success-500' },
+    { color: 'success', variant: 'outline', class: 'border-success-500' },
+    { color: 'error', variant: 'solid', class: 'bg-error-500' },
+    { color: 'error', variant: 'outline', class: 'border-error-500' },
+    { color: 'warning', variant: 'solid', class: 'bg-warning-500' },
+    { color: 'warning', variant: 'outline', class: 'border-warning-500' },
+    { color: 'info', variant: 'solid', class: 'bg-info-500' },
+    { color: 'info', variant: 'outline', class: 'border-info-500' },
+    { color: 'muted', variant: 'solid', class: 'bg-background-400' },
+    { color: 'muted', variant: 'outline', class: 'border-background-400' },
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    color: 'primary',
+  },
+});
+
+export const timelineConnectorStyle = tv({
+  base: 'w-0.5 flex-1 bg-outline-200 my-1',
+  variants: {},
+});
+
+export const timelineContentStyle = tv({
+  base: 'flex-1 pb-6',
+  variants: {},
+});

package/src/timeline/timeline.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { TimelineProps, TimelineItemProps, TimelineDotProps, TimelineSeparatorProps, TimelineConnectorProps, TimelineContentProps } from './types';
+import { timelineStyle, timelineItemStyle, timelineDotStyle, timelineSeparatorStyle, timelineConnectorStyle, timelineContentStyle } from './styles';
+
+export const Timeline = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TimelineProps
+>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={timelineStyle({ class: className })} {...props} />;
+});
+Timeline.displayName = 'Timeline';
+
+export const TimelineItem = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TimelineItemProps
+>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={timelineItemStyle({ class: className })} {...props} />;
+});
+TimelineItem.displayName = 'TimelineItem';
+
+export const TimelineDot = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TimelineDotProps
+>(({ className, variant, color, ...props }, ref) => {
+  return <View ref={ref} className={timelineDotStyle({ variant, color, class: className })} {...props} />;
+});
+TimelineDot.displayName = 'TimelineDot';
+
+export const TimelineSeparator = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TimelineSeparatorProps
+>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={timelineSeparatorStyle({ class: className })} {...props} />;
+});
+TimelineSeparator.displayName = 'TimelineSeparator';
+
+export const TimelineConnector = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TimelineConnectorProps
+>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={timelineConnectorStyle({ class: className })} {...props} />;
+});
+TimelineConnector.displayName = 'TimelineConnector';
+
+export const TimelineContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TimelineContentProps
+>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={timelineContentStyle({ class: className })} {...props} />;
+});
+TimelineContent.displayName = 'TimelineContent';

package/src/timeline/types.ts

@@ -0,0 +1,30 @@
+import type { View, Text as RNText } from 'react-native';
+
+export type TimelineVariant = 'solid' | 'outline';
+
+export interface TimelineProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface TimelineItemProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  isLast?: boolean;
+}
+
+export interface TimelineDotProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  variant?: TimelineVariant;
+  color?: 'primary' | 'success' | 'error' | 'warning' | 'info' | 'muted';
+}
+
+export interface TimelineSeparatorProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface TimelineConnectorProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface TimelineContentProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}

package/src/toast/index.ts

@@ -0,0 +1,17 @@
+export { ToastProvider } from './toast-provider';
+export { useToast } from './use-toast';
+export { Toast } from './toast';
+export { ToastTitle } from './toast-title';
+export { ToastDescription } from './toast-description';
+
+export type {
+  ToastProps,
+  ToastTitleProps,
+  ToastDescriptionProps,
+  ToastConfig,
+  ToastContextValue,
+  ToastPlacement,
+  ToastStatus,
+  ToastVariant,
+  UseToastReturn,
+} from './types';

package/src/toast/styles.ts

@@ -0,0 +1,118 @@
+import { tv } from 'tailwind-variants';
+
+export const toastContainerStyle = tv({
+  base: 'absolute w-full pointer-events-box-none p-4',
+  variants: {
+    placement: {
+      top: 'top-0 items-center',
+      'top-right': 'top-0 right-0 items-end',
+      'top-left': 'top-0 left-0 items-start',
+      bottom: 'bottom-0 items-center',
+      'bottom-right': 'bottom-0 right-0 items-end',
+      'bottom-left': 'bottom-0 left-0 items-start',
+    },
+  },
+  defaultVariants: {
+    placement: 'top',
+  },
+});
+
+export const toastStyle = tv({
+  base: 'flex-row items-center rounded-lg px-4 py-3 gap-3 shadow-hard-3 mx-4 mb-2',
+  variants: {
+    status: {
+      info: '',
+      success: '',
+      warning: '',
+      error: '',
+    },
+    variant: {
+      solid: '',
+      subtle: '',
+      outline: 'bg-transparent border',
+    },
+  },
+  compoundVariants: [
+    // solid
+    { status: 'info', variant: 'solid', class: 'bg-info-500' },
+    { status: 'success', variant: 'solid', class: 'bg-success-500' },
+    { status: 'warning', variant: 'solid', class: 'bg-warning-500' },
+    { status: 'error', variant: 'solid', class: 'bg-error-500' },
+    // subtle
+    { status: 'info', variant: 'subtle', class: 'bg-info-50' },
+    { status: 'success', variant: 'subtle', class: 'bg-success-50' },
+    { status: 'warning', variant: 'subtle', class: 'bg-warning-50' },
+    { status: 'error', variant: 'subtle', class: 'bg-error-50' },
+    // outline
+    { status: 'info', variant: 'outline', class: 'border-info-500' },
+    { status: 'success', variant: 'outline', class: 'border-success-500' },
+    { status: 'warning', variant: 'outline', class: 'border-warning-500' },
+    { status: 'error', variant: 'outline', class: 'border-error-500' },
+  ],
+  defaultVariants: {
+    status: 'info',
+    variant: 'subtle',
+  },
+});
+
+export const toastTitleStyle = tv({
+  base: 'font-semibold text-sm',
+  variants: {
+    status: {
+      info: '',
+      success: '',
+      warning: '',
+      error: '',
+    },
+    variant: {
+      solid: 'text-typography-0',
+      subtle: '',
+      outline: '',
+    },
+  },
+  compoundVariants: [
+    { status: 'info', variant: 'subtle', class: 'text-info-900' },
+    { status: 'success', variant: 'subtle', class: 'text-success-900' },
+    { status: 'warning', variant: 'subtle', class: 'text-warning-900' },
+    { status: 'error', variant: 'subtle', class: 'text-error-900' },
+    { status: 'info', variant: 'outline', class: 'text-info-900' },
+    { status: 'success', variant: 'outline', class: 'text-success-900' },
+    { status: 'warning', variant: 'outline', class: 'text-warning-900' },
+    { status: 'error', variant: 'outline', class: 'text-error-900' },
+  ],
+  defaultVariants: {
+    status: 'info',
+    variant: 'subtle',
+  },
+});
+
+export const toastDescriptionStyle = tv({
+  base: 'text-sm',
+  variants: {
+    status: {
+      info: '',
+      success: '',
+      warning: '',
+      error: '',
+    },
+    variant: {
+      solid: 'text-typography-0',
+      subtle: '',
+      outline: '',
+    },
+  },
+  compoundVariants: [
+    { status: 'info', variant: 'subtle', class: 'text-info-800' },
+    { status: 'success', variant: 'subtle', class: 'text-success-800' },
+    { status: 'warning', variant: 'subtle', class: 'text-warning-800' },
+    { status: 'error', variant: 'subtle', class: 'text-error-800' },
+    { status: 'info', variant: 'outline', class: 'text-info-800' },
+    { status: 'success', variant: 'outline', class: 'text-success-800' },
+    { status: 'warning', variant: 'outline', class: 'text-warning-800' },
+    { status: 'error', variant: 'outline', class: 'text-error-800' },
+  ],
+  defaultVariants: {
+    status: 'info',
+    variant: 'subtle',
+  },
+});

package/src/toast/toast-description.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { useToastItemContext } from './toast';
+import type { ToastDescriptionProps } from './types';
+import { toastDescriptionStyle } from './styles';
+
+export const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  ToastDescriptionProps
+>(({ className, ...props }, ref) => {
+  const { status, variant } = useToastItemContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={toastDescriptionStyle({ status, variant, class: className })}
+      {...props}
+    />
+  );
+});
+
+ToastDescription.displayName = 'ToastDescription';