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

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

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

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

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

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

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

@@ -1,31 +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: {},
-});
+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

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

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

package/src/portal/portal.tsx

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