@wireservers-ui/react-natives 0.1.0

package/src/pagination/pagination.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { View, Pressable, Text } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { PaginationProps, PaginationItemProps, PaginationPreviousProps, PaginationNextProps, PaginationEllipsisProps, PaginationContextValue } from './types';
+import { paginationStyle, paginationItemStyle, paginationItemTextStyle, paginationEllipsisStyle } from './styles';
+
+export const [PaginationProvider, usePaginationContext] = createComponentContext<PaginationContextValue>('Pagination');
+
+export const Pagination = React.forwardRef<React.ElementRef<typeof View>, PaginationProps>(
+  ({ className, size = 'md', children, ...props }, ref) => {
+    return (
+      <PaginationProvider value={{ size }}>
+        <View ref={ref} className={paginationStyle({ class: className })} accessibilityRole="menu" {...props}>{children}</View>
+      </PaginationProvider>
+    );
+  },
+);
+Pagination.displayName = 'Pagination';
+
+export const PaginationItem = React.forwardRef<React.ElementRef<typeof Pressable>, PaginationItemProps>(
+  ({ className, isActive = false, isDisabled, children, ...props }, ref) => {
+    const { size } = usePaginationContext();
+    return (
+      <Pressable ref={ref} disabled={isDisabled} className={paginationItemStyle({ size, isActive, isDisabled, class: className })} accessibilityRole="button" {...props}>
+        {typeof children === 'string' || typeof children === 'number' ? (
+          <Text className={paginationItemTextStyle({ size, isActive })}>{children}</Text>
+        ) : children}
+      </Pressable>
+    );
+  },
+);
+PaginationItem.displayName = 'PaginationItem';
+
+export const PaginationPrevious = React.forwardRef<React.ElementRef<typeof Pressable>, PaginationPreviousProps>(
+  ({ children = '‹', ...props }, ref) => {
+    return <PaginationItem ref={ref} {...props}>{children}</PaginationItem>;
+  },
+);
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+export const PaginationNext = React.forwardRef<React.ElementRef<typeof Pressable>, PaginationNextProps>(
+  ({ children = '›', ...props }, ref) => {
+    return <PaginationItem ref={ref} {...props}>{children}</PaginationItem>;
+  },
+);
+PaginationNext.displayName = 'PaginationNext';
+
+export const PaginationEllipsis = React.forwardRef<React.ElementRef<typeof View>, PaginationEllipsisProps>(
+  ({ className, ...props }, ref) => {
+    const { size } = usePaginationContext();
+    return (
+      <View ref={ref} className={paginationEllipsisStyle({ size, class: className })} {...props}>
+        <Text className={paginationItemTextStyle({ size, isActive: false })}>…</Text>
+      </View>
+    );
+  },
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';

package/src/pagination/styles.ts

@@ -0,0 +1,27 @@
+import { tv } from 'tailwind-variants';
+
+export const paginationStyle = tv({ base: 'flex-row items-center gap-1', variants: {} });
+export const paginationItemStyle = tv({
+  base: 'items-center justify-center rounded-lg',
+  variants: {
+    size: { sm: 'h-8 w-8', md: 'h-10 w-10', lg: 'h-12 w-12' },
+    isActive: { true: 'bg-primary-500', false: 'bg-transparent' },
+    isDisabled: { true: 'opacity-50' },
+  },
+  defaultVariants: { size: 'md', isActive: false },
+});
+export const paginationItemTextStyle = tv({
+  base: 'font-medium',
+  variants: {
+    size: { sm: 'text-xs', md: 'text-sm', lg: 'text-base' },
+    isActive: { true: 'text-typography-0', false: 'text-typography-700' },
+  },
+  defaultVariants: { size: 'md', isActive: false },
+});
+export const paginationEllipsisStyle = tv({
+  base: 'items-center justify-center',
+  variants: {
+    size: { sm: 'h-8 w-8', md: 'h-10 w-10', lg: 'h-12 w-12' },
+  },
+  defaultVariants: { size: 'md' },
+});

package/src/pagination/types.ts

@@ -0,0 +1,19 @@
+import type { View, Pressable, Text as RNText } from 'react-native';
+
+export type PaginationSize = 'sm' | 'md' | 'lg';
+
+export interface PaginationContextValue { size: PaginationSize; }
+
+export interface PaginationProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  size?: PaginationSize;
+}
+export interface PaginationItemProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  isActive?: boolean;
+  isDisabled?: boolean;
+  children: React.ReactNode;
+}
+export interface PaginationPreviousProps extends Omit<PaginationItemProps, 'isActive'> {}
+export interface PaginationNextProps extends Omit<PaginationItemProps, 'isActive'> {}
+export interface PaginationEllipsisProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }

package/src/password-input/index.ts

@@ -0,0 +1,14 @@
+export {
+  PasswordInput,
+  PasswordInputProvider,
+  usePasswordInputContext,
+  PasswordInputField,
+  PasswordInputToggle,
+} from './password-input';
+export type {
+  PasswordInputProps,
+  PasswordInputFieldProps,
+  PasswordInputToggleProps,
+  PasswordInputSize,
+  PasswordInputContextValue,
+} from './types';

package/src/password-input/password-input.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { View, TextInput, Pressable, Text } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type {
+  PasswordInputProps,
+  PasswordInputFieldProps,
+  PasswordInputToggleProps,
+  PasswordInputContextValue,
+} from './types';
+import {
+  passwordInputStyle,
+  passwordInputFieldStyle,
+  passwordInputToggleStyle,
+  passwordInputToggleTextStyle,
+} from './styles';
+
+export const [PasswordInputProvider, usePasswordInputContext] =
+  createComponentContext<PasswordInputContextValue>('PasswordInput');
+
+export const PasswordInput = React.forwardRef<
+  React.ElementRef<typeof View>,
+  PasswordInputProps
+>(({ className, size = 'md', isDisabled = false, children, ...props }, ref) => {
+  const [isVisible, setIsVisible] = useState(false);
+  return (
+    <PasswordInputProvider
+      value={{ isVisible, onToggle: () => setIsVisible(!isVisible), size }}
+    >
+      <View
+        ref={ref}
+        className={passwordInputStyle({ size, isDisabled, class: className })}
+        {...props}
+      >
+        {children}
+      </View>
+    </PasswordInputProvider>
+  );
+});
+PasswordInput.displayName = 'PasswordInput';
+
+export const PasswordInputField = React.forwardRef<
+  React.ElementRef<typeof TextInput>,
+  PasswordInputFieldProps
+>(({ className, ...props }, ref) => {
+  const { isVisible, size } = usePasswordInputContext();
+  return (
+    <TextInput
+      ref={ref}
+      secureTextEntry={!isVisible}
+      className={passwordInputFieldStyle({ size, class: className })}
+      {...props}
+    />
+  );
+});
+PasswordInputField.displayName = 'PasswordInputField';
+
+export const PasswordInputToggle = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  PasswordInputToggleProps
+>(({ className, children, ...props }, ref) => {
+  const { isVisible, onToggle } = usePasswordInputContext();
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onToggle}
+      className={passwordInputToggleStyle({ class: className })}
+      accessibilityRole="button"
+      accessibilityLabel={isVisible ? 'Hide password' : 'Show password'}
+      {...props}
+    >
+      {children ?? (
+        <Text className={passwordInputToggleTextStyle({})}>
+          {isVisible ? 'Hide' : 'Show'}
+        </Text>
+      )}
+    </Pressable>
+  );
+});
+PasswordInputToggle.displayName = 'PasswordInputToggle';

package/src/password-input/styles.ts

@@ -0,0 +1,25 @@
+import { tv } from 'tailwind-variants';
+
+export const passwordInputStyle = tv({
+  base: 'flex-row items-center border border-outline-300 rounded-lg overflow-hidden bg-background-0',
+  variants: {
+    size: { sm: 'h-8', md: 'h-10', lg: 'h-12' },
+    isDisabled: { true: 'opacity-50' },
+  },
+  defaultVariants: { size: 'md' },
+});
+export const passwordInputFieldStyle = tv({
+  base: 'flex-1 text-typography-900 px-3',
+  variants: {
+    size: { sm: 'text-sm', md: 'text-base', lg: 'text-lg' },
+  },
+  defaultVariants: { size: 'md' },
+});
+export const passwordInputToggleStyle = tv({
+  base: 'items-center justify-center px-3',
+  variants: {},
+});
+export const passwordInputToggleTextStyle = tv({
+  base: 'text-xs font-medium text-typography-500',
+  variants: {},
+});

package/src/password-input/types.ts

@@ -0,0 +1,24 @@
+import type { View, TextInput, Pressable } from 'react-native';
+
+export type PasswordInputSize = 'sm' | 'md' | 'lg';
+
+export interface PasswordInputContextValue {
+  isVisible: boolean;
+  onToggle: () => void;
+  size: PasswordInputSize;
+}
+
+export interface PasswordInputProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  size?: PasswordInputSize;
+  isDisabled?: boolean;
+}
+export interface PasswordInputFieldProps
+  extends React.ComponentPropsWithoutRef<typeof TextInput> {
+  className?: string;
+}
+export interface PasswordInputToggleProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}

package/src/pin-input/index.ts

@@ -0,0 +1,12 @@
+export {
+  PinInput,
+  PinInputProvider,
+  usePinInputContext,
+  PinInputField,
+} from './pin-input';
+export type {
+  PinInputProps,
+  PinInputFieldProps,
+  PinInputSize,
+  PinInputContextValue,
+} from './types';

package/src/pin-input/pin-input.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { View, TextInput } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type {
+  PinInputProps,
+  PinInputFieldProps,
+  PinInputContextValue,
+} from './types';
+import { pinInputStyle, pinInputFieldStyle } from './styles';
+
+export const [PinInputProvider, usePinInputContext] =
+  createComponentContext<PinInputContextValue>('PinInput');
+
+export const PinInput = React.forwardRef<
+  React.ElementRef<typeof View>,
+  PinInputProps
+>(
+  (
+    {
+      className,
+      length = 4,
+      value = '',
+      onChange,
+      size = 'md',
+      isDisabled = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [internalValues, setInternalValues] = useState<string[]>(() => {
+      const arr = new Array(length).fill('');
+      value.split('').forEach((c, i) => {
+        if (i < length) arr[i] = c;
+      });
+      return arr;
+    });
+    const values = value
+      ? value
+          .split('')
+          .concat(new Array(Math.max(0, length - value.length)).fill(''))
+          .slice(0, length)
+      : internalValues;
+    const onChangeAtIndex = (index: number, char: string) => {
+      const newValues = [...values];
+      newValues[index] = char.slice(-1);
+      setInternalValues(newValues);
+      onChange?.(newValues.join(''));
+    };
+    return (
+      <PinInputProvider
+        value={{ values, onChangeAtIndex, size, isDisabled, length }}
+      >
+        <View
+          ref={ref}
+          className={pinInputStyle({ class: className })}
+          {...props}
+        >
+          {children ??
+            Array.from({ length }, (_, i) => (
+              <PinInputField key={i} index={i} />
+            ))}
+        </View>
+      </PinInputProvider>
+    );
+  },
+);
+PinInput.displayName = 'PinInput';
+
+export const PinInputField = React.forwardRef<
+  React.ElementRef<typeof TextInput>,
+  PinInputFieldProps
+>(({ className, index, ...props }, ref) => {
+  const { values, onChangeAtIndex, size, isDisabled } =
+    usePinInputContext();
+  const isFilled = !!values[index];
+  return (
+    <TextInput
+      ref={ref}
+      value={values[index] || ''}
+      onChangeText={(text) => onChangeAtIndex(index, text)}
+      maxLength={1}
+      keyboardType="number-pad"
+      editable={!isDisabled}
+      selectTextOnFocus
+      className={pinInputFieldStyle({
+        size,
+        isFilled,
+        isDisabled,
+        class: className,
+      })}
+      {...props}
+    />
+  );
+});
+PinInputField.displayName = 'PinInputField';

package/src/pin-input/styles.ts

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+export const pinInputStyle = tv({ base: 'flex-row gap-2', variants: {} });
+export const pinInputFieldStyle = tv({
+  base: 'border border-outline-300 rounded-lg text-center text-typography-900 font-semibold bg-background-0',
+  variants: {
+    size: {
+      sm: 'h-8 w-8 text-sm',
+      md: 'h-10 w-10 text-base',
+      lg: 'h-12 w-12 text-lg',
+    },
+    isFilled: { true: 'border-primary-500' },
+    isDisabled: { true: 'opacity-50' },
+  },
+  defaultVariants: { size: 'md' },
+});

package/src/pin-input/types.ts

@@ -0,0 +1,26 @@
+import type { View, TextInput } from 'react-native';
+
+export type PinInputSize = 'sm' | 'md' | 'lg';
+
+export interface PinInputContextValue {
+  values: string[];
+  onChangeAtIndex: (index: number, char: string) => void;
+  size: PinInputSize;
+  isDisabled: boolean;
+  length: number;
+}
+
+export interface PinInputProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  length?: number;
+  value?: string;
+  onChange?: (value: string) => void;
+  size?: PinInputSize;
+  isDisabled?: boolean;
+}
+export interface PinInputFieldProps
+  extends React.ComponentPropsWithoutRef<typeof TextInput> {
+  className?: string;
+  index: number;
+}

package/src/popover/index.ts

@@ -0,0 +1,2 @@
+export { Popover, PopoverProvider, usePopoverContext, PopoverTrigger, PopoverContent, PopoverArrow, PopoverHeader, PopoverBody, PopoverFooter, PopoverCloseButton } from './popover';
+export type { PopoverProps, PopoverTriggerProps, PopoverContentProps, PopoverArrowProps, PopoverHeaderProps, PopoverBodyProps, PopoverFooterProps, PopoverCloseButtonProps, PopoverPlacement, PopoverContextValue } from './types';

package/src/popover/popover.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { View, Pressable, Modal, Platform } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { PopoverProps, PopoverTriggerProps, PopoverContentProps, PopoverArrowProps, PopoverHeaderProps, PopoverBodyProps, PopoverFooterProps, PopoverCloseButtonProps, PopoverContextValue } from './types';
+import { popoverContentStyle, popoverArrowStyle, popoverHeaderStyle, popoverBodyStyle, popoverFooterStyle, popoverCloseButtonStyle } from './styles';
+
+export const [PopoverProvider, usePopoverContext] =
+  createComponentContext<PopoverContextValue>('Popover');
+
+export const Popover: React.FC<PopoverProps> = ({ isOpen: controlledOpen, onOpenChange, defaultOpen = false, placement = 'bottom', children }) => {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  const onToggle = () => {
+    const next = !isOpen;
+    setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const onClose = () => {
+    setInternalOpen(false);
+    onOpenChange?.(false);
+  };
+
+  return (
+    <PopoverProvider value={{ isOpen, onToggle, onClose, placement }}>
+      {children}
+    </PopoverProvider>
+  );
+};
+Popover.displayName = 'Popover';
+
+export const PopoverTrigger: React.FC<PopoverTriggerProps> = ({ children }) => {
+  const { onToggle } = usePopoverContext();
+
+  // Inject onPress directly into the child element via cloneElement.
+  // This avoids wrapper nesting issues (Pressable inside Pressable, div onClick
+  // not bubbling through RN Web's Responder system, etc.).
+  if (React.isValidElement(children)) {
+    const child = children as React.ReactElement<any>;
+    const existingOnPress = child.props.onPress;
+    return React.cloneElement(child, {
+      onPress: existingOnPress
+        ? (...args: any[]) => { existingOnPress(...args); onToggle(); }
+        : onToggle,
+    });
+  }
+
+  return (
+    <Pressable onPress={onToggle}>
+      {children}
+    </Pressable>
+  );
+};
+PopoverTrigger.displayName = 'PopoverTrigger';
+
+export const PopoverContent = React.forwardRef<React.ElementRef<typeof View>, PopoverContentProps>(({ className, children, ...props }, ref) => {
+  const { isOpen, onClose } = usePopoverContext();
+  if (!isOpen) return null;
+  return (
+    <Modal visible={isOpen} transparent animationType="fade" onRequestClose={onClose}>
+      <Pressable style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} onPress={onClose}>
+        <Pressable onPress={(e) => e.stopPropagation()}>
+          <View ref={ref} className={popoverContentStyle({ class: className })} {...props}>
+            {children}
+          </View>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+});
+PopoverContent.displayName = 'PopoverContent';
+
+export const PopoverArrow = React.forwardRef<React.ElementRef<typeof View>, PopoverArrowProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={popoverArrowStyle({ class: className })} {...props} />;
+});
+PopoverArrow.displayName = 'PopoverArrow';
+
+export const PopoverHeader = React.forwardRef<React.ElementRef<typeof View>, PopoverHeaderProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={popoverHeaderStyle({ class: className })} {...props} />;
+});
+PopoverHeader.displayName = 'PopoverHeader';
+
+export const PopoverBody = React.forwardRef<React.ElementRef<typeof View>, PopoverBodyProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={popoverBodyStyle({ class: className })} {...props} />;
+});
+PopoverBody.displayName = 'PopoverBody';
+
+export const PopoverFooter = React.forwardRef<React.ElementRef<typeof View>, PopoverFooterProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={popoverFooterStyle({ class: className })} {...props} />;
+});
+PopoverFooter.displayName = 'PopoverFooter';
+
+export const PopoverCloseButton = React.forwardRef<React.ElementRef<typeof Pressable>, PopoverCloseButtonProps>(({ className, ...props }, ref) => {
+  const { onClose } = usePopoverContext();
+  return <Pressable ref={ref} onPress={onClose} className={popoverCloseButtonStyle({ class: className })} accessibilityRole="button" accessibilityLabel="Close" {...props} />;
+});
+PopoverCloseButton.displayName = 'PopoverCloseButton';

package/src/popover/styles.ts

@@ -0,0 +1,31 @@
+import { tv } from 'tailwind-variants';
+
+export const popoverContentStyle = tv({
+  base: 'bg-background-0 rounded-lg p-4 shadow-hard-2 border border-outline-100',
+  variants: {},
+});
+
+export const popoverArrowStyle = tv({
+  base: 'w-3 h-3 bg-background-0 border border-outline-100 rotate-45',
+  variants: {},
+});
+
+export const popoverHeaderStyle = tv({
+  base: 'flex-row items-center justify-between mb-2',
+  variants: {},
+});
+
+export const popoverBodyStyle = tv({
+  base: 'mb-2',
+  variants: {},
+});
+
+export const popoverFooterStyle = tv({
+  base: 'flex-row justify-end gap-2 mt-2',
+  variants: {},
+});
+
+export const popoverCloseButtonStyle = tv({
+  base: 'p-1 rounded',
+  variants: {},
+});

package/src/popover/types.ts

@@ -0,0 +1,46 @@
+import type { View, Pressable } from 'react-native';
+
+export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export interface PopoverContextValue {
+  isOpen: boolean;
+  onToggle: () => void;
+  onClose: () => void;
+  placement: PopoverPlacement;
+}
+
+export interface PopoverProps {
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+  placement?: PopoverPlacement;
+  children: React.ReactNode;
+}
+
+export interface PopoverTriggerProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}
+
+export interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface PopoverArrowProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface PopoverHeaderProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface PopoverBodyProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface PopoverFooterProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface PopoverCloseButtonProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}

package/src/portal/index.ts

@@ -0,0 +1,2 @@
+export { Portal } from './portal';
+export type { PortalProps } from './types';

package/src/portal/portal.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { PortalProps } from './types';
+
+export function Portal({ children }: PortalProps) {
+  return <>{children}</>;
+}
+
+Portal.displayName = 'Portal';

package/src/portal/styles.ts

@@ -0,0 +1,2 @@
+// Portal has no visual styles
+export {};

package/src/portal/types.ts

@@ -0,0 +1,3 @@
+export interface PortalProps {
+  children: React.ReactNode;
+}

package/src/pressable/index.ts

@@ -0,0 +1,2 @@
+export { Pressable } from './pressable';
+export type { PressableProps } from './types';

package/src/pressable/pressable.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Pressable as RNPressable } from 'react-native';
+import type { PressableProps } from './types';
+import { pressableStyle } from './styles';
+
+export const Pressable = React.forwardRef<
+  React.ElementRef<typeof RNPressable>,
+  PressableProps
+>(({ className, disabled, ...props }, ref) => {
+  return (
+    <RNPressable
+      ref={ref}
+      disabled={disabled}
+      className={pressableStyle({ isDisabled: !!disabled, class: className })}
+      {...props}
+    />
+  );
+});
+
+Pressable.displayName = 'Pressable';

package/src/pressable/styles.ts

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+
+export const pressableStyle = tv({
+  base: 'self-start',
+  variants: {
+    isDisabled: {
+      true: 'opacity-50',
+    },
+  },
+});

package/src/pressable/types.ts

@@ -0,0 +1,6 @@
+import type { Pressable as RNPressable } from 'react-native';
+
+export interface PressableProps
+  extends React.ComponentPropsWithoutRef<typeof RNPressable> {
+  className?: string;
+}

package/src/progress/index.ts

@@ -0,0 +1,9 @@
+export { Progress } from './progress';
+export { ProgressFilledTrack } from './progress-filled-track';
+
+export type {
+  ProgressProps,
+  ProgressFilledTrackProps,
+  ProgressSize,
+  ProgressContextValue,
+} from './types';