@wireservers-ui/react-natives 0.1.0

package/src/container/styles.ts

@@ -0,0 +1,21 @@
+import { tv } from 'tailwind-variants';
+
+export const containerStyle = tv({
+  base: 'w-full px-4',
+  variants: {
+    size: {
+      sm: 'max-w-screen-sm',
+      md: 'max-w-screen-md',
+      lg: 'max-w-screen-lg',
+      xl: 'max-w-screen-xl',
+      full: 'max-w-full',
+    },
+    centered: {
+      true: 'mx-auto',
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+    centered: true,
+  },
+});

package/src/container/types.ts

@@ -0,0 +1,10 @@
+import type { View } from 'react-native';
+
+export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+export interface ContainerProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  size?: ContainerSize;
+  centered?: boolean;
+}

package/src/date-picker/date-picker.tsx

@@ -0,0 +1,136 @@
+import React, { useState, useRef } from 'react';
+import { View, Pressable, Text, Modal, useWindowDimensions } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type {
+  DatePickerProps,
+  DatePickerTriggerProps,
+  DatePickerContentProps,
+  DatePickerInputProps,
+  DatePickerContextValue,
+} from './types';
+import {
+  datePickerInputStyle,
+  datePickerInputTextStyle,
+  datePickerInputPlaceholderStyle,
+  datePickerContentStyle,
+} from './styles';
+
+export const [DatePickerProvider, useDatePickerContext] =
+  createComponentContext<DatePickerContextValue>('DatePicker');
+
+export const DatePicker: React.FC<DatePickerProps> = ({
+  isOpen: controlledOpen,
+  onOpenChange,
+  value = null,
+  onChange,
+  children,
+}) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [triggerRect, setTriggerRect] = useState({ pageX: 0, pageY: 0, width: 0, height: 0 });
+  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  const onToggle = () => {
+    const next = !isOpen;
+    setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  const onClose = () => {
+    setInternalOpen(false);
+    onOpenChange?.(false);
+  };
+  const onDateSelect = (date: Date) => {
+    onChange?.(date);
+    onClose();
+  };
+
+  return (
+    <DatePickerProvider
+      value={{ isOpen, onToggle, onClose, selectedDate: value, onDateSelect, triggerRect, setTriggerRect }}
+    >
+      <View>{children}</View>
+    </DatePickerProvider>
+  );
+};
+DatePicker.displayName = 'DatePicker';
+
+export const DatePickerTrigger = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  DatePickerTriggerProps
+>(({ className, children, ...props }, ref) => {
+  const { onToggle } = useDatePickerContext();
+  return (
+    <Pressable ref={ref} onPress={onToggle} className={className} {...props}>
+      {children}
+    </Pressable>
+  );
+});
+DatePickerTrigger.displayName = 'DatePickerTrigger';
+
+export const DatePickerInput = React.forwardRef<
+  React.ElementRef<typeof View>,
+  DatePickerInputProps
+>(({ className, placeholder = 'Select a date', format, ...props }, ref) => {
+  const { selectedDate, onToggle, setTriggerRect } = useDatePickerContext();
+  const innerRef = useRef<View>(null);
+  const formatted = selectedDate ? selectedDate.toLocaleDateString() : null;
+
+  const measure = () => {
+    innerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+      setTriggerRect({ pageX, pageY, width, height });
+    });
+  };
+
+  return (
+    <Pressable onPress={() => { measure(); onToggle(); }}>
+      <View
+        ref={innerRef}
+        onLayout={measure}
+        className={datePickerInputStyle({ class: className })}
+        {...props}
+      >
+        {formatted ? (
+          <Text className={datePickerInputTextStyle()}>{formatted}</Text>
+        ) : (
+          <Text className={datePickerInputPlaceholderStyle()}>{placeholder}</Text>
+        )}
+        <Text style={{ fontSize: 16, color: '#9CA3AF' }}>📅</Text>
+      </View>
+    </Pressable>
+  );
+});
+DatePickerInput.displayName = 'DatePickerInput';
+
+export const DatePickerContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  DatePickerContentProps
+>(({ className, children, ...props }, ref) => {
+  const { isOpen, onClose, triggerRect } = useDatePickerContext();
+  const { width: screenWidth } = useWindowDimensions();
+
+  if (!isOpen) return null;
+
+  // Right-align calendar to the right edge of the input (where the 📅 icon sits)
+  const rightOffset = screenWidth - (triggerRect.pageX + triggerRect.width);
+
+  return (
+    <Modal visible transparent animationType="none" onRequestClose={onClose}>
+      <Pressable style={{ flex: 1 }} onPress={onClose}>
+        <Pressable onPress={(e) => e.stopPropagation()}>
+          <View
+            ref={ref}
+            style={{
+              position: 'absolute',
+              top: triggerRect.pageY + triggerRect.height + 4,
+              right: rightOffset,
+            }}
+            className={datePickerContentStyle({ class: className })}
+            {...props}
+          >
+            {children}
+          </View>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+});
+DatePickerContent.displayName = 'DatePickerContent';

package/src/date-picker/index.ts

@@ -0,0 +1,15 @@
+export {
+  DatePicker,
+  DatePickerProvider,
+  useDatePickerContext,
+  DatePickerTrigger,
+  DatePickerInput,
+  DatePickerContent,
+} from './date-picker';
+export type {
+  DatePickerProps,
+  DatePickerTriggerProps,
+  DatePickerInputProps,
+  DatePickerContentProps,
+  DatePickerContextValue,
+} from './types';

package/src/date-picker/styles.ts

@@ -0,0 +1,18 @@
+import { tv } from 'tailwind-variants';
+
+export const datePickerInputStyle = tv({
+  base: 'flex-row items-center border border-outline-300 rounded-lg bg-background-0 h-10 px-3',
+  variants: {},
+});
+export const datePickerInputTextStyle = tv({
+  base: 'text-sm text-typography-900 flex-1',
+  variants: {},
+});
+export const datePickerInputPlaceholderStyle = tv({
+  base: 'text-sm text-typography-400 flex-1',
+  variants: {},
+});
+export const datePickerContentStyle = tv({
+  base: 'bg-background-0 rounded-xl p-4 shadow-hard-2 border border-outline-100',
+  variants: {},
+});

package/src/date-picker/types.ts

@@ -0,0 +1,33 @@
+import type { View, Pressable, Text as RNText } from 'react-native';
+
+export interface DatePickerContextValue {
+  isOpen: boolean;
+  onToggle: () => void;
+  onClose: () => void;
+  selectedDate: Date | null;
+  onDateSelect: (date: Date) => void;
+  triggerRect: { pageX: number; pageY: number; width: number; height: number };
+  setTriggerRect: (rect: { pageX: number; pageY: number; width: number; height: number }) => void;
+}
+
+export interface DatePickerProps {
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  value?: Date | null;
+  onChange?: (date: Date) => void;
+  children: React.ReactNode;
+}
+export interface DatePickerTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}
+export interface DatePickerContentProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+export interface DatePickerInputProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  placeholder?: string;
+  format?: string;
+}

package/src/divider/divider.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { DividerProps } from './types';
+import { dividerStyle } from './styles';
+
+export const Divider = React.forwardRef<
+  React.ElementRef<typeof View>,
+  DividerProps
+>(({ className, orientation, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      role="separator"
+      aria-orientation={orientation}
+      className={dividerStyle({ orientation, class: className })}
+      {...props}
+    />
+  );
+});
+
+Divider.displayName = 'Divider';

package/src/divider/index.ts

@@ -0,0 +1,2 @@
+export { Divider } from './divider';
+export type { DividerProps } from './types';

package/src/divider/styles.ts

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+
+export const dividerStyle = tv({
+  base: 'bg-outline-200',
+  variants: {
+    orientation: {
+      horizontal: 'h-px w-full',
+      vertical: 'w-px h-full',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+});

package/src/divider/types.ts

@@ -0,0 +1,7 @@
+import type { View } from 'react-native';
+
+export interface DividerProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  orientation?: 'horizontal' | 'vertical';
+}

package/src/drawer/drawer-backdrop.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import { useDrawerContext } from './drawer';
+import type { DrawerBackdropProps } from './types';
+import { drawerBackdropStyle } from './styles';
+
+export const DrawerBackdrop = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  DrawerBackdropProps
+>(({ className, ...props }, ref) => {
+  const { onClose } = useDrawerContext();
+
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onClose}
+      className={drawerBackdropStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+DrawerBackdrop.displayName = 'DrawerBackdrop';

package/src/drawer/drawer-body.tsx

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

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

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

package/src/drawer/drawer-content.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { View, Animated, type ViewStyle } from 'react-native';
+import { useDrawerContext } from './drawer';
+import type { DrawerContentProps } from './types';
+import { drawerContentStyle } from './styles';
+import type { DrawerPlacement, DrawerSize, DrawerSlideFrom } from './types';
+
+const SIZE_MAP: Record<DrawerPlacement, Record<DrawerSize, ViewStyle>> = {
+  left: {
+    sm: { width: 240 },
+    md: { width: 320 },
+    lg: { width: 400 },
+    full: { width: '100%' },
+  },
+  right: {
+    sm: { width: 240 },
+    md: { width: 320 },
+    lg: { width: 400 },
+    full: { width: '100%' },
+  },
+  top: {
+    sm: { height: 200 },
+    md: { height: 300 },
+    lg: { height: 400 },
+    full: { height: '100%' },
+  },
+  bottom: {
+    sm: { height: 200 },
+    md: { height: 300 },
+    lg: { height: 400 },
+    full: { height: '100%' },
+  },
+};
+
+// Inline position styles that mirror the Tailwind placement classes.
+const PLACEMENT_POSITION: Record<DrawerPlacement, ViewStyle> = {
+  left:   { position: 'absolute', left: 0, top: 0, bottom: 0 },
+  right:  { position: 'absolute', right: 0, top: 0, bottom: 0 },
+  top:    { position: 'absolute', left: 0, right: 0, top: 0 },
+  bottom: { position: 'absolute', left: 0, right: 0, bottom: 0 },
+};
+
+const SLIDE_OFFSET = 700;
+
+function getSlideTransform(anim: Animated.Value, dir: DrawerSlideFrom): object[] {
+  switch (dir) {
+    case 'top':
+      return [{ translateY: anim.interpolate({ inputRange: [0, 1], outputRange: [0, -SLIDE_OFFSET] }) }];
+    case 'bottom':
+      return [{ translateY: anim.interpolate({ inputRange: [0, 1], outputRange: [0, SLIDE_OFFSET] }) }];
+    case 'left':
+      return [{ translateX: anim.interpolate({ inputRange: [0, 1], outputRange: [0, -SLIDE_OFFSET] }) }];
+    case 'right':
+      return [{ translateX: anim.interpolate({ inputRange: [0, 1], outputRange: [0, SLIDE_OFFSET] }) }];
+  }
+}
+
+export const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  DrawerContentProps
+>(({ className, style, ...props }, ref) => {
+  const { placement, size, slideFrom, animationType, isOpen } = useDrawerContext();
+  const sizeStyle = SIZE_MAP[placement][size];
+
+  // slideFrom only applies when animationType is 'slide'; ignored for fade/none.
+  const effectiveSlideFrom: DrawerSlideFrom | undefined =
+    animationType === 'slide' ? (slideFrom ?? (placement as DrawerSlideFrom)) : undefined;
+
+  const slideAnim = React.useRef(new Animated.Value(1)).current;
+  const fadeAnim = React.useRef(new Animated.Value(0)).current;
+
+  React.useEffect(() => {
+    if (effectiveSlideFrom) {
+      slideAnim.setValue(1);
+      Animated.timing(slideAnim, {
+        toValue: isOpen ? 0 : 1,
+        duration: 280,
+        useNativeDriver: true,
+      }).start();
+    } else if (animationType === 'fade') {
+      fadeAnim.setValue(isOpen ? 0 : 1);
+      Animated.timing(fadeAnim, {
+        toValue: isOpen ? 1 : 0,
+        duration: 280,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [isOpen, effectiveSlideFrom, animationType]);
+
+  // Slide animation: outer Animated.View handles positioning + transform;
+  // inner View handles NativeWind className (className doesn't work on Animated.View).
+  if (effectiveSlideFrom) {
+    return (
+      <Animated.View
+        style={[
+          PLACEMENT_POSITION[placement],
+          sizeStyle,
+          { transform: getSlideTransform(slideAnim, effectiveSlideFrom) },
+        ]}
+      >
+        <View
+          ref={ref}
+          className={drawerContentStyle({ placement, class: className })}
+          style={[{ flex: 1, position: 'relative' }, style]}
+          {...props}
+        />
+      </Animated.View>
+    );
+  }
+
+  // Fade animation
+  if (animationType === 'fade') {
+    return (
+      <Animated.View
+        style={[
+          PLACEMENT_POSITION[placement],
+          sizeStyle,
+          { opacity: fadeAnim },
+        ]}
+      >
+        <View
+          ref={ref}
+          className={drawerContentStyle({ placement, class: className })}
+          style={[{ flex: 1, position: 'relative' }, style]}
+          {...props}
+        />
+      </Animated.View>
+    );
+  }
+
+  // No animation ('none')
+  return (
+    <View
+      ref={ref}
+      className={drawerContentStyle({ placement, class: className })}
+      style={[PLACEMENT_POSITION[placement], sizeStyle, style]}
+      {...props}
+    />
+  );
+});
+
+DrawerContent.displayName = 'DrawerContent';

package/src/drawer/drawer-footer.tsx

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

package/src/drawer/drawer-header.tsx

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

package/src/drawer/drawer.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Modal as RNModal, View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { DrawerProps, DrawerContextValue } from './types';
+
+export const [DrawerProvider, useDrawerContext] =
+  createComponentContext<DrawerContextValue>('Drawer');
+
+export const Drawer: React.FC<DrawerProps> = ({
+  isOpen,
+  onClose,
+  placement = 'left',
+  size = 'md',
+  animationType = 'slide',
+  slideFrom,
+  isModal = true,
+  children,
+}) => {
+  const ctx: DrawerContextValue = { isOpen, onClose, placement, size, animationType, slideFrom };
+
+  // When a directional slide is requested, suppress RNModal's built-in animation.
+  const rnAnimationType = slideFrom ? 'none' : animationType;
+
+  if (isModal) {
+    return (
+      <DrawerProvider value={ctx}>
+        <RNModal
+          visible={isOpen}
+          transparent
+          animationType={rnAnimationType}
+          onRequestClose={onClose}
+          statusBarTranslucent
+        >
+          <View style={{ flex: 1 }} pointerEvents="box-none">{children}</View>
+        </RNModal>
+      </DrawerProvider>
+    );
+  }
+
+  if (!isOpen) return null;
+
+  return (
+    <DrawerProvider value={ctx}>
+      <View
+        style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 50 }}
+        pointerEvents="box-none"
+      >
+        {children}
+      </View>
+    </DrawerProvider>
+  );
+};
+
+Drawer.displayName = 'Drawer';

package/src/drawer/index.ts

@@ -0,0 +1,22 @@
+export { Drawer } from './drawer';
+export { DrawerBackdrop } from './drawer-backdrop';
+export { DrawerContent } from './drawer-content';
+export { DrawerHeader } from './drawer-header';
+export { DrawerBody } from './drawer-body';
+export { DrawerFooter } from './drawer-footer';
+export { DrawerCloseButton } from './drawer-close-button';
+
+export type {
+  DrawerProps,
+  DrawerBackdropProps,
+  DrawerContentProps,
+  DrawerHeaderProps,
+  DrawerBodyProps,
+  DrawerFooterProps,
+  DrawerCloseButtonProps,
+  DrawerPlacement,
+  DrawerSize,
+  DrawerAnimationType,
+  DrawerSlideFrom,
+  DrawerContextValue,
+} from './types';

package/src/drawer/styles.ts

@@ -0,0 +1,36 @@
+import { tv } from 'tailwind-variants';
+
+export const drawerBackdropStyle = tv({
+  base: 'absolute inset-0 bg-black/50',
+});
+
+export const drawerContentStyle = tv({
+  base: 'bg-background-0 absolute',
+  variants: {
+    placement: {
+      left: 'left-0 top-0 bottom-0',
+      right: 'right-0 top-0 bottom-0',
+      top: 'left-0 right-0 top-0',
+      bottom: 'left-0 right-0 bottom-0',
+    },
+  },
+  defaultVariants: {
+    placement: 'left',
+  },
+});
+
+export const drawerHeaderStyle = tv({
+  base: 'flex-row items-center justify-between px-5 pt-5 pb-2',
+});
+
+export const drawerBodyStyle = tv({
+  base: 'px-5 py-3 flex-1',
+});
+
+export const drawerFooterStyle = tv({
+  base: 'flex-row items-center justify-end gap-3 px-5 pb-5 pt-2',
+});
+
+export const drawerCloseButtonStyle = tv({
+  base: 'p-1 rounded-md active:bg-background-200',
+});