@wireservers-ui/react-natives 0.1.0

package/src/actionsheet/actionsheet-drag-indicator-wrapper.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { ActionSheetDragIndicatorWrapperProps } from './types';
+import { actionsheetDragIndicatorWrapperStyle } from './styles';
+
+export const ActionSheetDragIndicatorWrapper = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ActionSheetDragIndicatorWrapperProps
+>(({ className, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={actionsheetDragIndicatorWrapperStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+ActionSheetDragIndicatorWrapper.displayName = 'ActionSheetDragIndicatorWrapper';

package/src/actionsheet/actionsheet-drag-indicator.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { ActionSheetDragIndicatorProps } from './types';
+import { actionsheetDragIndicatorStyle } from './styles';
+
+export const ActionSheetDragIndicator = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ActionSheetDragIndicatorProps
+>(({ className, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={actionsheetDragIndicatorStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+ActionSheetDragIndicator.displayName = 'ActionSheetDragIndicator';

package/src/actionsheet/actionsheet-item-text.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Text } from 'react-native';
+import type { ActionSheetItemTextProps } from './types';
+import { actionsheetItemTextStyle } from './styles';
+
+export const ActionSheetItemText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  ActionSheetItemTextProps
+>(({ className, ...props }, ref) => {
+  return (
+    <Text
+      ref={ref}
+      className={actionsheetItemTextStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+ActionSheetItemText.displayName = 'ActionSheetItemText';

package/src/actionsheet/actionsheet-item.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import type { ActionSheetItemProps } from './types';
+import { actionsheetItemStyle } from './styles';
+
+export const ActionSheetItem = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ActionSheetItemProps
+>(({ className, ...props }, ref) => {
+  return (
+    <Pressable
+      ref={ref}
+      role="menuitem"
+      className={actionsheetItemStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+ActionSheetItem.displayName = 'ActionSheetItem';

package/src/actionsheet/actionsheet-scroll-view.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import type { ActionSheetScrollViewProps } from './types';
+
+export const ActionSheetScrollView = React.forwardRef<
+  React.ElementRef<typeof ScrollView>,
+  ActionSheetScrollViewProps
+>(({ className, ...props }, ref) => {
+  return <ScrollView ref={ref} className={className} {...props} />;
+});
+
+ActionSheetScrollView.displayName = 'ActionSheetScrollView';

package/src/actionsheet/actionsheet.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Modal as RNModal, View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { ActionSheetProps, ActionSheetContextValue } from './types';
+
+export const [ActionSheetProvider, useActionSheetContext] =
+  createComponentContext<ActionSheetContextValue>('ActionSheet');
+
+export const ActionSheet: React.FC<ActionSheetProps> = ({
+  isOpen,
+  onClose,
+  isModal = true,
+  children,
+}) => {
+  if (isModal) {
+    return (
+      <ActionSheetProvider value={{ isOpen, onClose }}>
+        <RNModal
+          visible={isOpen}
+          transparent
+          animationType="slide"
+          onRequestClose={onClose}
+          statusBarTranslucent
+        >
+          <View style={{ flex: 1, justifyContent: 'flex-end' }} pointerEvents="box-none">{children}</View>
+        </RNModal>
+      </ActionSheetProvider>
+    );
+  }
+
+  if (!isOpen) return null;
+
+  return (
+    <ActionSheetProvider value={{ isOpen, onClose }}>
+      <View
+        style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 50, justifyContent: 'flex-end' }}
+        pointerEvents="box-none"
+      >
+        {children}
+      </View>
+    </ActionSheetProvider>
+  );
+};
+
+ActionSheet.displayName = 'ActionSheet';

package/src/actionsheet/index.ts

@@ -0,0 +1,20 @@
+export { ActionSheet } from './actionsheet';
+export { ActionSheetBackdrop } from './actionsheet-backdrop';
+export { ActionSheetContent } from './actionsheet-content';
+export { ActionSheetDragIndicator } from './actionsheet-drag-indicator';
+export { ActionSheetDragIndicatorWrapper } from './actionsheet-drag-indicator-wrapper';
+export { ActionSheetItem } from './actionsheet-item';
+export { ActionSheetItemText } from './actionsheet-item-text';
+export { ActionSheetScrollView } from './actionsheet-scroll-view';
+
+export type {
+  ActionSheetProps,
+  ActionSheetBackdropProps,
+  ActionSheetContentProps,
+  ActionSheetDragIndicatorProps,
+  ActionSheetDragIndicatorWrapperProps,
+  ActionSheetItemProps,
+  ActionSheetItemTextProps,
+  ActionSheetScrollViewProps,
+  ActionSheetContextValue,
+} from './types';

package/src/actionsheet/styles.ts

@@ -0,0 +1,25 @@
+import { tv } from 'tailwind-variants';
+
+export const actionsheetBackdropStyle = tv({
+  base: 'absolute inset-0 bg-black/50',
+});
+
+export const actionsheetContentStyle = tv({
+  base: 'bg-background-0 rounded-t-2xl pb-8 max-h-[70%]',
+});
+
+export const actionsheetDragIndicatorWrapperStyle = tv({
+  base: 'items-center py-2',
+});
+
+export const actionsheetDragIndicatorStyle = tv({
+  base: 'w-10 h-1 bg-outline-300 rounded-full',
+});
+
+export const actionsheetItemStyle = tv({
+  base: 'flex-row items-center px-4 py-3 active:bg-background-100',
+});
+
+export const actionsheetItemTextStyle = tv({
+  base: 'text-typography-900 text-base flex-1',
+});

package/src/actionsheet/types.ts

@@ -0,0 +1,49 @@
+import type { View, Pressable, Text as RNText, ScrollView } from 'react-native';
+
+export interface ActionSheetContextValue {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export interface ActionSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** When false the action sheet renders inline (no RNModal) so background content stays interactive. */
+  isModal?: boolean;
+  children: React.ReactNode;
+}
+
+export interface ActionSheetBackdropProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}
+
+export interface ActionSheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface ActionSheetDragIndicatorWrapperProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface ActionSheetDragIndicatorProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface ActionSheetItemProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}
+
+export interface ActionSheetItemTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface ActionSheetScrollViewProps
+  extends React.ComponentPropsWithoutRef<typeof ScrollView> {
+  className?: string;
+}

package/src/alert/alert-body.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { AlertBodyProps } from './types';
+import { alertBodyStyle } from './styles';
+
+export const AlertBody = React.forwardRef<
+  React.ElementRef<typeof View>,
+  AlertBodyProps
+>(({ className, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={alertBodyStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+AlertBody.displayName = 'AlertBody';

package/src/alert/alert-close-button.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Pressable, Text } from 'react-native';
+import type { AlertCloseButtonProps } from './types';
+import { alertCloseButtonStyle } from './styles';
+
+export const AlertCloseButton = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  AlertCloseButtonProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <Pressable
+      ref={ref}
+      accessibilityRole="button"
+      accessibilityLabel="Close alert"
+      className={alertCloseButtonStyle({ class: className })}
+      {...props}
+    >
+      {children ?? <Text className="text-current text-sm">✕</Text>}
+    </Pressable>
+  );
+});
+
+AlertCloseButton.displayName = 'AlertCloseButton';

package/src/alert/alert-icon.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { useAlertContext } from './alert';
+import type { AlertIconProps } from './types';
+import { alertIconStyle } from './styles';
+
+const defaultIcons: Record<string, string> = {
+  info: 'ℹ',
+  success: '✓',
+  warning: '⚠',
+  error: '✕',
+};
+
+export const AlertIcon = React.forwardRef<any, AlertIconProps>(
+  ({ as: AsComp, className, ...props }, ref) => {
+    const { status, variant } = useAlertContext();
+
+    if (AsComp) {
+      return (
+        <AsComp
+          ref={ref}
+          className={alertIconStyle({ status, variant, class: className })}
+          {...props}
+        />
+      );
+    }
+
+    return (
+      <Text
+        ref={ref}
+        className={alertIconStyle({ status, variant, class: className })}
+        {...props}
+      >
+        {defaultIcons[status]}
+      </Text>
+    );
+  },
+);
+
+AlertIcon.displayName = 'AlertIcon';

package/src/alert/alert-text.tsx

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

package/src/alert/alert.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { AlertProps, AlertContextValue } from './types';
+import { alertStyle } from './styles';
+
+export const [AlertProvider, useAlertContext] =
+  createComponentContext<AlertContextValue>('Alert');
+
+export const Alert = React.forwardRef<
+  React.ElementRef<typeof View>,
+  AlertProps
+>(
+  (
+    { className, status = 'info', variant = 'subtle', children, ...props },
+    ref,
+  ) => {
+    return (
+      <AlertProvider value={{ status, variant }}>
+        <View
+          ref={ref}
+          role="alert"
+          className={alertStyle({ status, variant, class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </AlertProvider>
+    );
+  },
+);
+
+Alert.displayName = 'Alert';

package/src/alert/index.ts

@@ -0,0 +1,15 @@
+export { Alert } from './alert';
+export { AlertIcon } from './alert-icon';
+export { AlertBody } from './alert-body';
+export { AlertText } from './alert-text';
+export { AlertCloseButton } from './alert-close-button';
+
+export type {
+  AlertProps,
+  AlertIconProps,
+  AlertBodyProps,
+  AlertTextProps,
+  AlertCloseButtonProps,
+  AlertStatus,
+  AlertVariant,
+} from './types';

package/src/alert/styles.ts

@@ -0,0 +1,112 @@
+import { tv } from 'tailwind-variants';
+
+export const alertStyle = tv({
+  base: 'flex-row items-start rounded-lg px-4 py-3 gap-3',
+  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 alertIconStyle = tv({
+  base: 'h-5 w-5 mt-0.5',
+  variants: {
+    status: {
+      info: '',
+      success: '',
+      warning: '',
+      error: '',
+    },
+    variant: {
+      solid: 'text-typography-0',
+      subtle: '',
+      outline: '',
+    },
+  },
+  compoundVariants: [
+    { status: 'info', variant: 'subtle', class: 'text-info-600' },
+    { status: 'success', variant: 'subtle', class: 'text-success-600' },
+    { status: 'warning', variant: 'subtle', class: 'text-warning-600' },
+    { status: 'error', variant: 'subtle', class: 'text-error-600' },
+    { status: 'info', variant: 'outline', class: 'text-info-600' },
+    { status: 'success', variant: 'outline', class: 'text-success-600' },
+    { status: 'warning', variant: 'outline', class: 'text-warning-600' },
+    { status: 'error', variant: 'outline', class: 'text-error-600' },
+  ],
+  defaultVariants: {
+    status: 'info',
+    variant: 'subtle',
+  },
+});
+
+export const alertBodyStyle = tv({
+  base: 'flex-1 gap-1',
+});
+
+export const alertTextStyle = tv({
+  base: 'text-sm',
+  variants: {
+    status: {
+      info: '',
+      success: '',
+      warning: '',
+      error: '',
+    },
+    variant: {
+      solid: 'text-typography-0',
+      subtle: '',
+      outline: '',
+    },
+    isBold: {
+      true: 'font-semibold',
+    },
+  },
+  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 alertCloseButtonStyle = tv({
+  base: 'p-1 rounded active:opacity-70',
+});

package/src/alert/types.ts

@@ -0,0 +1,36 @@
+import type { View, Text as RNText, Pressable } from 'react-native';
+
+export type AlertStatus = 'info' | 'success' | 'warning' | 'error';
+export type AlertVariant = 'solid' | 'subtle' | 'outline';
+
+export interface AlertContextValue {
+  status: AlertStatus;
+  variant: AlertVariant;
+}
+
+export interface AlertProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  status?: AlertStatus;
+  variant?: AlertVariant;
+}
+
+export interface AlertIconProps {
+  as?: React.ElementType;
+  className?: string;
+}
+
+export interface AlertBodyProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface AlertTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface AlertCloseButtonProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}

package/src/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { View, Pressable, Modal } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { AlertDialogProps, AlertDialogBackdropProps, AlertDialogContentProps, AlertDialogHeaderProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogCloseButtonProps, AlertDialogContextValue } from './types';
+import { alertDialogContentStyle, alertDialogBackdropStyle, alertDialogHeaderStyle, alertDialogBodyStyle, alertDialogFooterStyle, alertDialogCloseButtonStyle } from './styles';
+
+export const [AlertDialogProvider, useAlertDialogContext] =
+  createComponentContext<AlertDialogContextValue>('AlertDialog');
+
+export const AlertDialog: React.FC<AlertDialogProps> = ({ isOpen, onClose, size = 'md', children }) => {
+  return (
+    <AlertDialogProvider value={{ isOpen, onClose, size }}>
+      <Modal visible={isOpen} transparent animationType="fade" onRequestClose={onClose}>
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+          {children}
+        </View>
+      </Modal>
+    </AlertDialogProvider>
+  );
+};
+AlertDialog.displayName = 'AlertDialog';
+
+export const AlertDialogBackdrop = React.forwardRef<React.ElementRef<typeof Pressable>, AlertDialogBackdropProps>(({ className, ...props }, ref) => {
+  const { onClose } = useAlertDialogContext();
+  return <Pressable ref={ref} onPress={onClose} className={alertDialogBackdropStyle({ class: className })} {...props} />;
+});
+AlertDialogBackdrop.displayName = 'AlertDialogBackdrop';
+
+export const AlertDialogContent = React.forwardRef<React.ElementRef<typeof View>, AlertDialogContentProps>(({ className, ...props }, ref) => {
+  const { size } = useAlertDialogContext();
+  return <View ref={ref} className={alertDialogContentStyle({ size, class: className })} {...props} />;
+});
+AlertDialogContent.displayName = 'AlertDialogContent';
+
+export const AlertDialogHeader = React.forwardRef<React.ElementRef<typeof View>, AlertDialogHeaderProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={alertDialogHeaderStyle({ class: className })} {...props} />;
+});
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+export const AlertDialogBody = React.forwardRef<React.ElementRef<typeof View>, AlertDialogBodyProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={alertDialogBodyStyle({ class: className })} {...props} />;
+});
+AlertDialogBody.displayName = 'AlertDialogBody';
+
+export const AlertDialogFooter = React.forwardRef<React.ElementRef<typeof View>, AlertDialogFooterProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={alertDialogFooterStyle({ class: className })} {...props} />;
+});
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+export const AlertDialogCloseButton = React.forwardRef<React.ElementRef<typeof Pressable>, AlertDialogCloseButtonProps>(({ className, ...props }, ref) => {
+  const { onClose } = useAlertDialogContext();
+  return <Pressable ref={ref} onPress={onClose} className={alertDialogCloseButtonStyle({ class: className })} accessibilityRole="button" accessibilityLabel="Close" {...props} />;
+});
+AlertDialogCloseButton.displayName = 'AlertDialogCloseButton';

package/src/alert-dialog/index.ts

@@ -0,0 +1,2 @@
+export { AlertDialog, AlertDialogProvider, useAlertDialogContext, AlertDialogBackdrop, AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, AlertDialogCloseButton } from './alert-dialog';
+export type { AlertDialogProps, AlertDialogBackdropProps, AlertDialogContentProps, AlertDialogHeaderProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogCloseButtonProps, AlertDialogSize, AlertDialogContextValue } from './types';

package/src/alert-dialog/styles.ts

@@ -0,0 +1,40 @@
+import { tv } from 'tailwind-variants';
+
+export const alertDialogContentStyle = tv({
+  base: 'bg-background-0 rounded-xl p-6 shadow-hard-2 w-full',
+  variants: {
+    size: {
+      xs: 'max-w-[280px]',
+      sm: 'max-w-[320px]',
+      md: 'max-w-[400px]',
+      lg: 'max-w-[520px]',
+      full: 'max-w-full mx-4',
+    },
+  },
+  defaultVariants: { size: 'md' },
+});
+
+export const alertDialogBackdropStyle = tv({
+  base: 'absolute inset-0 bg-black/50',
+  variants: {},
+});
+
+export const alertDialogHeaderStyle = tv({
+  base: 'flex-row items-center justify-between mb-2',
+  variants: {},
+});
+
+export const alertDialogBodyStyle = tv({
+  base: 'mb-4',
+  variants: {},
+});
+
+export const alertDialogFooterStyle = tv({
+  base: 'flex-row justify-end gap-3',
+  variants: {},
+});
+
+export const alertDialogCloseButtonStyle = tv({
+  base: 'p-1 rounded',
+  variants: {},
+});