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

package/src/date-picker/types.ts

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

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

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

package/src/divider/styles.ts

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

package/src/divider/types.ts

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

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

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

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

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

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