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

package/src/menu/types.ts

@@ -1,30 +1,30 @@
-import type { View, Pressable } from 'react-native';
-
-export interface MenuTriggerRect { pageX: number; pageY: number; width: number; height: number; }
-
-export interface MenuContextValue {
-  isOpen: boolean;
-  onToggle: () => void;
-  onClose: () => void;
-  triggerRect: MenuTriggerRect;
-  setTriggerRect: (rect: MenuTriggerRect) => void;
-}
-
-export interface MenuProps {
-  isOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  defaultOpen?: boolean;
-  children: React.ReactNode;
-}
-
-export interface MenuTriggerProps extends React.ComponentPropsWithoutRef<typeof Pressable> { className?: string; }
-export interface MenuContentProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
-export interface MenuItemProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-  isDisabled?: boolean;
-}
-export interface MenuItemTextProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
-export interface MenuItemIconProps { as: React.ElementType; className?: string; }
-export interface MenuSeparatorProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
-export interface MenuGroupProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
-export interface MenuGroupTitleProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+import type { View, Pressable } from 'react-native';
+
+export interface MenuTriggerRect { pageX: number; pageY: number; width: number; height: number; }
+
+export interface MenuContextValue {
+  isOpen: boolean;
+  onToggle: () => void;
+  onClose: () => void;
+  triggerRect: MenuTriggerRect;
+  setTriggerRect: (rect: MenuTriggerRect) => void;
+}
+
+export interface MenuProps {
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}
+
+export interface MenuTriggerProps extends React.ComponentPropsWithoutRef<typeof Pressable> { className?: string; }
+export interface MenuContentProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface MenuItemProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  isDisabled?: boolean;
+}
+export interface MenuItemTextProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface MenuItemIconProps { as: React.ElementType; className?: string; }
+export interface MenuSeparatorProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface MenuGroupProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface MenuGroupTitleProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }

package/src/modal/index.ts

@@ -1,18 +1,18 @@
-export { Modal } from './modal';
-export { ModalBackdrop } from './modal-backdrop';
-export { ModalContent } from './modal-content';
-export { ModalHeader } from './modal-header';
-export { ModalBody } from './modal-body';
-export { ModalFooter } from './modal-footer';
-export { ModalCloseButton } from './modal-close-button';
-
-export type {
-  ModalProps,
-  ModalBackdropProps,
-  ModalContentProps,
-  ModalHeaderProps,
-  ModalBodyProps,
-  ModalFooterProps,
-  ModalCloseButtonProps,
-  ModalSize,
-} from './types';
+export { Modal } from './modal';
+export { ModalBackdrop } from './modal-backdrop';
+export { ModalContent } from './modal-content';
+export { ModalHeader } from './modal-header';
+export { ModalBody } from './modal-body';
+export { ModalFooter } from './modal-footer';
+export { ModalCloseButton } from './modal-close-button';
+
+export type {
+  ModalProps,
+  ModalBackdropProps,
+  ModalContentProps,
+  ModalHeaderProps,
+  ModalBodyProps,
+  ModalFooterProps,
+  ModalCloseButtonProps,
+  ModalSize,
+} from './types';

package/src/modal/modal-backdrop.tsx

@@ -1,23 +1,23 @@
-import React from 'react';
-import { Pressable } from 'react-native';
-import { useModalContext } from './modal';
-import type { ModalBackdropProps } from './types';
-import { modalBackdropStyle } from './styles';
-
-export const ModalBackdrop = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  ModalBackdropProps
->(({ className, ...props }, ref) => {
-  const { onClose, closeOnOverlayClick } = useModalContext();
-
-  return (
-    <Pressable
-      ref={ref}
-      onPress={closeOnOverlayClick ? onClose : undefined}
-      className={modalBackdropStyle({ class: className })}
-      {...props}
-    />
-  );
-});
-
-ModalBackdrop.displayName = 'ModalBackdrop';
+import React from 'react';
+import { Pressable } from 'react-native';
+import { useModalContext } from './modal';
+import type { ModalBackdropProps } from './types';
+import { modalBackdropStyle } from './styles';
+
+export const ModalBackdrop = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ModalBackdropProps
+>(({ className, ...props }, ref) => {
+  const { onClose, closeOnOverlayClick } = useModalContext();
+
+  return (
+    <Pressable
+      ref={ref}
+      onPress={closeOnOverlayClick ? onClose : undefined}
+      className={modalBackdropStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+ModalBackdrop.displayName = 'ModalBackdrop';

package/src/modal/modal-body.tsx

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

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

@@ -1,29 +1,29 @@
-import React from 'react';
-import { Pressable, Text } from 'react-native';
-import { useModalContext } from './modal';
-import type { ModalCloseButtonProps } from './types';
-import { modalCloseButtonStyle } from './styles';
-
-export const ModalCloseButton = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  ModalCloseButtonProps
->(({ className, children, ...props }, ref) => {
-  const { onClose } = useModalContext();
-
-  return (
-    <Pressable
-      ref={ref}
-      onPress={onClose}
-      accessibilityRole="button"
-      accessibilityLabel="Close"
-      className={modalCloseButtonStyle({ class: className })}
-      {...props}
-    >
-      {children ?? (
-        <Text className="text-typography-500 text-lg leading-none">✕</Text>
-      )}
-    </Pressable>
-  );
-});
-
-ModalCloseButton.displayName = 'ModalCloseButton';
+import React from 'react';
+import { Pressable, Text } from 'react-native';
+import { useModalContext } from './modal';
+import type { ModalCloseButtonProps } from './types';
+import { modalCloseButtonStyle } from './styles';
+
+export const ModalCloseButton = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ModalCloseButtonProps
+>(({ className, children, ...props }, ref) => {
+  const { onClose } = useModalContext();
+
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onClose}
+      accessibilityRole="button"
+      accessibilityLabel="Close"
+      className={modalCloseButtonStyle({ class: className })}
+      {...props}
+    >
+      {children ?? (
+        <Text className="text-typography-500 text-lg leading-none">✕</Text>
+      )}
+    </Pressable>
+  );
+});
+
+ModalCloseButton.displayName = 'ModalCloseButton';

package/src/modal/modal-content.tsx

@@ -1,22 +1,22 @@
-import React from 'react';
-import { View } from 'react-native';
-import { useModalContext } from './modal';
-import type { ModalContentProps } from './types';
-import { modalContentStyle } from './styles';
-
-export const ModalContent = React.forwardRef<
-  React.ElementRef<typeof View>,
-  ModalContentProps
->(({ className, ...props }, ref) => {
-  const { size } = useModalContext();
-
-  return (
-    <View
-      ref={ref}
-      className={modalContentStyle({ size, class: className })}
-      {...props}
-    />
-  );
-});
-
-ModalContent.displayName = 'ModalContent';
+import React from 'react';
+import { View } from 'react-native';
+import { useModalContext } from './modal';
+import type { ModalContentProps } from './types';
+import { modalContentStyle } from './styles';
+
+export const ModalContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ModalContentProps
+>(({ className, ...props }, ref) => {
+  const { size } = useModalContext();
+
+  return (
+    <View
+      ref={ref}
+      className={modalContentStyle({ size, class: className })}
+      {...props}
+    />
+  );
+});
+
+ModalContent.displayName = 'ModalContent';

package/src/modal/modal-footer.tsx

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

package/src/modal/modal-header.tsx

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

package/src/modal/modal.tsx

@@ -1,50 +1,50 @@
-import React from 'react';
-import {
-  Modal as RNModal,
-  View,
-  KeyboardAvoidingView,
-  Platform,
-} from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { ModalProps, ModalContextValue } from './types';
-
-export const [ModalProvider, useModalContext] =
-  createComponentContext<ModalContextValue>('Modal');
-
-export const Modal: React.FC<ModalProps> = ({
-  isOpen,
-  onClose,
-  size = 'md',
-  closeOnOverlayClick = true,
-  avoidKeyboard = false,
-  children,
-}) => {
-  const content = (
-    <View className="flex-1 items-center justify-center">{children}</View>
-  );
-
-  return (
-    <ModalProvider value={{ isOpen, onClose, size, closeOnOverlayClick }}>
-      <RNModal
-        visible={isOpen}
-        transparent
-        animationType="fade"
-        onRequestClose={onClose}
-        statusBarTranslucent
-      >
-        {avoidKeyboard ? (
-          <KeyboardAvoidingView
-            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-            className="flex-1"
-          >
-            {content}
-          </KeyboardAvoidingView>
-        ) : (
-          content
-        )}
-      </RNModal>
-    </ModalProvider>
-  );
-};
-
-Modal.displayName = 'Modal';
+import React from 'react';
+import {
+  Modal as RNModal,
+  View,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { ModalProps, ModalContextValue } from './types';
+
+export const [ModalProvider, useModalContext] =
+  createComponentContext<ModalContextValue>('Modal');
+
+export const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  size = 'md',
+  closeOnOverlayClick = true,
+  avoidKeyboard = false,
+  children,
+}) => {
+  const content = (
+    <View className="flex-1 items-center justify-center">{children}</View>
+  );
+
+  return (
+    <ModalProvider value={{ isOpen, onClose, size, closeOnOverlayClick }}>
+      <RNModal
+        visible={isOpen}
+        transparent
+        animationType="fade"
+        onRequestClose={onClose}
+        statusBarTranslucent
+      >
+        {avoidKeyboard ? (
+          <KeyboardAvoidingView
+            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+            className="flex-1"
+          >
+            {content}
+          </KeyboardAvoidingView>
+        ) : (
+          content
+        )}
+      </RNModal>
+    </ModalProvider>
+  );
+};
+
+Modal.displayName = 'Modal';

package/src/modal/styles.ts

@@ -1,37 +1,37 @@
-import { tv } from 'tailwind-variants';
-
-export const modalBackdropStyle = tv({
-  base: 'absolute inset-0 bg-black/50',
-});
-
-export const modalContentStyle = tv({
-  base: 'bg-background-0 rounded-xl overflow-hidden shadow-hard-5',
-  variants: {
-    size: {
-      xs: 'w-[60%] max-w-[280px]',
-      sm: 'w-[70%] max-w-[360px]',
-      md: 'w-[80%] max-w-[480px]',
-      lg: 'w-[90%] max-w-[640px]',
-      full: 'w-[95%] max-w-full max-h-[90%]',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export const modalHeaderStyle = tv({
-  base: 'flex-row items-center justify-between px-5 pt-5 pb-2',
-});
-
-export const modalBodyStyle = tv({
-  base: 'px-5 py-3',
-});
-
-export const modalFooterStyle = tv({
-  base: 'flex-row items-center justify-end gap-3 px-5 pb-5 pt-2',
-});
-
-export const modalCloseButtonStyle = tv({
-  base: 'p-1 rounded-md active:bg-background-200',
-});
+import { tv } from 'tailwind-variants';
+
+export const modalBackdropStyle = tv({
+  base: 'absolute inset-0 bg-black/50',
+});
+
+export const modalContentStyle = tv({
+  base: 'bg-background-0 rounded-xl overflow-hidden shadow-hard-5',
+  variants: {
+    size: {
+      xs: 'w-[60%] max-w-[280px]',
+      sm: 'w-[70%] max-w-[360px]',
+      md: 'w-[80%] max-w-[480px]',
+      lg: 'w-[90%] max-w-[640px]',
+      full: 'w-[95%] max-w-full max-h-[90%]',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const modalHeaderStyle = tv({
+  base: 'flex-row items-center justify-between px-5 pt-5 pb-2',
+});
+
+export const modalBodyStyle = tv({
+  base: 'px-5 py-3',
+});
+
+export const modalFooterStyle = tv({
+  base: 'flex-row items-center justify-end gap-3 px-5 pb-5 pt-2',
+});
+
+export const modalCloseButtonStyle = tv({
+  base: 'p-1 rounded-md active:bg-background-200',
+});

package/src/modal/types.ts

@@ -1,49 +1,49 @@
-import type { View, Pressable, Text as RNText } from 'react-native';
-
-export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'full';
-
-export interface ModalContextValue {
-  isOpen: boolean;
-  onClose: () => void;
-  size: ModalSize;
-  closeOnOverlayClick: boolean;
-}
-
-export interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  size?: ModalSize;
-  closeOnOverlayClick?: boolean;
-  avoidKeyboard?: boolean;
-  children: React.ReactNode;
-}
-
-export interface ModalBackdropProps
-  extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-}
-
-export interface ModalContentProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface ModalHeaderProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface ModalBodyProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface ModalFooterProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface ModalCloseButtonProps
-  extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-}
+import type { View, Pressable, Text as RNText } from 'react-native';
+
+export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'full';
+
+export interface ModalContextValue {
+  isOpen: boolean;
+  onClose: () => void;
+  size: ModalSize;
+  closeOnOverlayClick: boolean;
+}
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  size?: ModalSize;
+  closeOnOverlayClick?: boolean;
+  avoidKeyboard?: boolean;
+  children: React.ReactNode;
+}
+
+export interface ModalBackdropProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}
+
+export interface ModalContentProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface ModalHeaderProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface ModalBodyProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface ModalFooterProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface ModalCloseButtonProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}

package/src/nativewind-env.d.ts

@@ -1 +1 @@
-/// <reference types="nativewind/types" />
+/// <reference types="nativewind/types" />