@wireservers-ui/react-natives 0.1.0

package/src/menu/types.ts

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

package/src/modal/index.ts

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

package/src/modal/modal-backdrop.tsx

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

package/src/modal/modal-body.tsx

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

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

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

package/src/modal/modal-content.tsx

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

package/src/modal/modal-footer.tsx

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

package/src/modal/modal-header.tsx

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

package/src/modal/modal.tsx

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

package/src/modal/styles.ts

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

package/src/modal/types.ts

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

package/src/nativewind-env.d.ts

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

package/src/number-input/index.ts

@@ -0,0 +1,18 @@
+export {
+  NumberInput,
+  NumberInputProvider,
+  useNumberInputContext,
+  NumberInputField,
+  NumberInputStepper,
+  NumberInputIncrementButton,
+  NumberInputDecrementButton,
+} from './number-input';
+export type {
+  NumberInputProps,
+  NumberInputFieldProps,
+  NumberInputStepperProps,
+  NumberInputIncrementProps,
+  NumberInputDecrementProps,
+  NumberInputSize,
+  NumberInputContextValue,
+} from './types';

package/src/number-input/number-input.tsx

@@ -0,0 +1,161 @@
+import React, { useState } from 'react';
+import { View, TextInput, Pressable, Text } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type {
+  NumberInputProps,
+  NumberInputFieldProps,
+  NumberInputStepperProps,
+  NumberInputIncrementProps,
+  NumberInputDecrementProps,
+  NumberInputContextValue,
+} from './types';
+import {
+  numberInputStyle,
+  numberInputFieldStyle,
+  numberInputStepperStyle,
+  numberInputButtonStyle,
+  numberInputButtonTextStyle,
+} from './styles';
+
+export const [NumberInputProvider, useNumberInputContext] =
+  createComponentContext<NumberInputContextValue>('NumberInput');
+
+export const NumberInput = React.forwardRef<
+  React.ElementRef<typeof View>,
+  NumberInputProps
+>(
+  (
+    {
+      className,
+      value: controlledValue,
+      defaultValue = 0,
+      onChange,
+      min,
+      max,
+      step = 1,
+      size = 'md',
+      isDisabled = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const value =
+      controlledValue !== undefined ? controlledValue : internalValue;
+    const clamp = (v: number) => {
+      let r = v;
+      if (min !== undefined) r = Math.max(min, r);
+      if (max !== undefined) r = Math.min(max, r);
+      return r;
+    };
+    const update = (v: number) => {
+      const clamped = clamp(v);
+      setInternalValue(clamped);
+      onChange?.(clamped);
+    };
+    return (
+      <NumberInputProvider
+        value={{
+          value,
+          onIncrement: () => update(value + step),
+          onDecrement: () => update(value - step),
+          onChangeValue: update,
+          size,
+          min,
+          max,
+          step,
+          isDisabled,
+        }}
+      >
+        <View
+          ref={ref}
+          className={numberInputStyle({ size, isDisabled, class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </NumberInputProvider>
+    );
+  },
+);
+NumberInput.displayName = 'NumberInput';
+
+export const NumberInputField = React.forwardRef<
+  React.ElementRef<typeof TextInput>,
+  NumberInputFieldProps
+>(({ className, ...props }, ref) => {
+  const { value, onChangeValue, size, isDisabled } =
+    useNumberInputContext();
+  return (
+    <TextInput
+      ref={ref}
+      value={String(value)}
+      onChangeText={(t) => {
+        const n = parseFloat(t);
+        if (!isNaN(n)) onChangeValue(n);
+      }}
+      keyboardType="numeric"
+      editable={!isDisabled}
+      className={numberInputFieldStyle({ size, class: className })}
+      {...props}
+    />
+  );
+});
+NumberInputField.displayName = 'NumberInputField';
+
+export const NumberInputStepper = React.forwardRef<
+  React.ElementRef<typeof View>,
+  NumberInputStepperProps
+>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={numberInputStepperStyle({ class: className })} {...props} />;
+});
+NumberInputStepper.displayName = 'NumberInputStepper';
+
+export const NumberInputIncrementButton = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  NumberInputIncrementProps
+>(({ className, children, ...props }, ref) => {
+  const { onIncrement, size, isDisabled } = useNumberInputContext();
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onIncrement}
+      disabled={isDisabled}
+      className={numberInputButtonStyle({ size, class: className })}
+      accessibilityRole="button"
+      accessibilityLabel="Increment"
+      {...props}
+    >
+      {children ?? (
+        <Text className={numberInputButtonTextStyle({ size })}>+</Text>
+      )}
+    </Pressable>
+  );
+});
+NumberInputIncrementButton.displayName = 'NumberInputIncrementButton';
+
+export const NumberInputDecrementButton = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  NumberInputDecrementProps
+>(({ className, children, ...props }, ref) => {
+  const { onDecrement, size, isDisabled } = useNumberInputContext();
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onDecrement}
+      disabled={isDisabled}
+      className={numberInputButtonStyle({ size, class: className })}
+      accessibilityRole="button"
+      accessibilityLabel="Decrement"
+      {...props}
+    >
+      {children ?? (
+        <Text className={numberInputButtonTextStyle({ size })}>
+          {'\u2212'}
+        </Text>
+      )}
+    </Pressable>
+  );
+});
+NumberInputDecrementButton.displayName = 'NumberInputDecrementButton';

package/src/number-input/styles.ts

@@ -0,0 +1,35 @@
+import { tv } from 'tailwind-variants';
+
+export const numberInputStyle = tv({
+  base: 'flex-row items-center border border-outline-300 rounded-lg overflow-hidden',
+  variants: {
+    size: { sm: 'h-8', md: 'h-10', lg: 'h-12' },
+    isDisabled: { true: 'opacity-50' },
+  },
+  defaultVariants: { size: 'md' },
+});
+export const numberInputFieldStyle = tv({
+  base: 'flex-1 text-center text-typography-900',
+  variants: {
+    size: { sm: 'text-sm px-2', md: 'text-base px-3', lg: 'text-lg px-4' },
+  },
+  defaultVariants: { size: 'md' },
+});
+export const numberInputStepperStyle = tv({
+  base: 'self-stretch justify-center',
+  variants: {},
+});
+export const numberInputButtonStyle = tv({
+  base: 'items-center justify-center bg-background-50 border-l border-outline-200',
+  variants: {
+    size: { sm: 'w-8 flex-1', md: 'w-10 flex-1', lg: 'w-12 flex-1' },
+  },
+  defaultVariants: { size: 'md' },
+});
+export const numberInputButtonTextStyle = tv({
+  base: 'font-semibold text-typography-600',
+  variants: {
+    size: { sm: 'text-sm', md: 'text-base', lg: 'text-lg' },
+  },
+  defaultVariants: { size: 'md' },
+});

package/src/number-input/types.ts

@@ -0,0 +1,44 @@
+import type { View, TextInput, Pressable } from 'react-native';
+
+export type NumberInputSize = 'sm' | 'md' | 'lg';
+
+export interface NumberInputContextValue {
+  value: number;
+  onIncrement: () => void;
+  onDecrement: () => void;
+  onChangeValue: (val: number) => void;
+  size: NumberInputSize;
+  min?: number;
+  max?: number;
+  step: number;
+  isDisabled: boolean;
+}
+
+export interface NumberInputProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  size?: NumberInputSize;
+  isDisabled?: boolean;
+}
+export interface NumberInputFieldProps
+  extends React.ComponentPropsWithoutRef<typeof TextInput> {
+  className?: string;
+}
+export interface NumberInputStepperProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+export interface NumberInputIncrementProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}
+export interface NumberInputDecrementProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}

package/src/overlay/index.ts

@@ -0,0 +1,2 @@
+export { Overlay } from './overlay';
+export type { OverlayProps } from './types';

package/src/overlay/overlay.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { OverlayProps } from './types';
+import { overlayStyle } from './styles';
+
+export const Overlay = React.forwardRef<
+  React.ElementRef<typeof View>,
+  OverlayProps
+>(({ className, isVisible = true, ...props }, ref) => {
+  if (!isVisible) return null;
+
+  return (
+    <View
+      ref={ref}
+      className={overlayStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+Overlay.displayName = 'Overlay';

package/src/overlay/styles.ts

@@ -0,0 +1,6 @@
+import { tv } from 'tailwind-variants';
+
+export const overlayStyle = tv({
+  base: 'absolute inset-0 bg-black/50',
+  variants: {},
+});

package/src/overlay/types.ts

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

package/src/pagination/index.ts

@@ -0,0 +1,2 @@
+export { Pagination, PaginationProvider, usePaginationContext, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis } from './pagination';
+export type { PaginationProps, PaginationItemProps, PaginationPreviousProps, PaginationNextProps, PaginationEllipsisProps, PaginationSize, PaginationContextValue } from './types';