@wireservers-ui/react-natives 2.0.1 → 2.0.2-rc.0

package/src/color-picker/use-pointer-drag.ts

@@ -1,80 +1,80 @@
-import { useCallback, useRef } from 'react';
-import { Platform } from 'react-native';
-
-const isWeb = Platform.OS === 'web';
-
-/**
- * Hook that returns pointer event handler props to spread on a View.
- * Uses React synthetic pointer events (supported by RN Web) instead of
- * native DOM listeners, avoiding ref-timing and Responder-system issues.
- *
- * Uses setPointerCapture via e.currentTarget so drags that leave the
- * element still fire. Manages cursor: restCursor -> grab (near handle) -> grabbing (dragging).
- */
-export function usePointerDrag(
-  onDrag: (relX: number, relY: number) => void,
-  isNearHandle: (relX: number, relY: number) => boolean,
-  restCursor: string = 'default',
-) {
-  const dragCb = useRef(onDrag);
-  dragCb.current = onDrag;
-  const hitTestCb = useRef(isNearHandle);
-  hitTestCb.current = isNearHandle;
-  const dragging = useRef(false);
-
-  const onPointerDown = useCallback((e: any) => {
-    e.preventDefault();
-    const el = e.currentTarget;
-    if (el?.setPointerCapture) {
-      el.setPointerCapture(e.pointerId);
-    }
-    if (el?.style) el.style.cursor = 'grabbing';
-    dragging.current = true;
-    const rect = el?.getBoundingClientRect?.();
-    if (rect) {
-      dragCb.current(e.clientX - rect.left, e.clientY - rect.top);
-    }
-  }, []);
-
-  const onPointerMove = useCallback((e: any) => {
-    const el = e.currentTarget;
-    const rect = el?.getBoundingClientRect?.();
-    if (!rect) return;
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
-    if (dragging.current) {
-      dragCb.current(x, y);
-    } else if (el?.style) {
-      el.style.cursor = hitTestCb.current(x, y) ? 'grab' : restCursor;
-    }
-  }, [restCursor]);
-
-  const onPointerUp = useCallback((e: any) => {
-    dragging.current = false;
-    const el = e.currentTarget;
-    if (el?.releasePointerCapture) {
-      try { el.releasePointerCapture(e.pointerId); } catch (_) { /* already released */ }
-    }
-    const rect = el?.getBoundingClientRect?.();
-    if (rect && el?.style) {
-      const x = e.clientX - rect.left;
-      const y = e.clientY - rect.top;
-      el.style.cursor = hitTestCb.current(x, y) ? 'grab' : restCursor;
-    }
-  }, [restCursor]);
-
-  const onContextMenu = useCallback((e: any) => {
-    e.preventDefault();
-  }, []);
-
-  if (!isWeb) return { handlers: {} };
-
-  return {
-    handlers: {
-      onPointerDown,
-      onPointerMove,
-      onPointerUp,
-      onContextMenu,
-    },
-  };
-}
+import { useCallback, useRef } from 'react';
+import { Platform } from 'react-native';
+
+const isWeb = Platform.OS === 'web';
+
+/**
+ * Hook that returns pointer event handler props to spread on a View.
+ * Uses React synthetic pointer events (supported by RN Web) instead of
+ * native DOM listeners, avoiding ref-timing and Responder-system issues.
+ *
+ * Uses setPointerCapture via e.currentTarget so drags that leave the
+ * element still fire. Manages cursor: restCursor -> grab (near handle) -> grabbing (dragging).
+ */
+export function usePointerDrag(
+  onDrag: (relX: number, relY: number) => void,
+  isNearHandle: (relX: number, relY: number) => boolean,
+  restCursor: string = 'default',
+) {
+  const dragCb = useRef(onDrag);
+  dragCb.current = onDrag;
+  const hitTestCb = useRef(isNearHandle);
+  hitTestCb.current = isNearHandle;
+  const dragging = useRef(false);
+
+  const onPointerDown = useCallback((e: any) => {
+    e.preventDefault();
+    const el = e.currentTarget;
+    if (el?.setPointerCapture) {
+      el.setPointerCapture(e.pointerId);
+    }
+    if (el?.style) el.style.cursor = 'grabbing';
+    dragging.current = true;
+    const rect = el?.getBoundingClientRect?.();
+    if (rect) {
+      dragCb.current(e.clientX - rect.left, e.clientY - rect.top);
+    }
+  }, []);
+
+  const onPointerMove = useCallback((e: any) => {
+    const el = e.currentTarget;
+    const rect = el?.getBoundingClientRect?.();
+    if (!rect) return;
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    if (dragging.current) {
+      dragCb.current(x, y);
+    } else if (el?.style) {
+      el.style.cursor = hitTestCb.current(x, y) ? 'grab' : restCursor;
+    }
+  }, [restCursor]);
+
+  const onPointerUp = useCallback((e: any) => {
+    dragging.current = false;
+    const el = e.currentTarget;
+    if (el?.releasePointerCapture) {
+      try { el.releasePointerCapture(e.pointerId); } catch (_) { /* already released */ }
+    }
+    const rect = el?.getBoundingClientRect?.();
+    if (rect && el?.style) {
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      el.style.cursor = hitTestCb.current(x, y) ? 'grab' : restCursor;
+    }
+  }, [restCursor]);
+
+  const onContextMenu = useCallback((e: any) => {
+    e.preventDefault();
+  }, []);
+
+  if (!isWeb) return { handlers: {} };
+
+  return {
+    handlers: {
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onContextMenu,
+    },
+  };
+}

package/src/container/container.tsx

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

package/src/container/index.ts

@@ -1,2 +1,2 @@
-export { Container } from './container';
-export type { ContainerProps, ContainerSize } from './types';
+export { Container } from './container';
+export type { ContainerProps, ContainerSize } from './types';

package/src/container/styles.ts

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

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

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

@@ -1,15 +1,15 @@
-export {
-  DatePicker,
-  DatePickerProvider,
-  useDatePickerContext,
-  DatePickerTrigger,
-  DatePickerInput,
-  DatePickerContent,
-} from './date-picker';
-export type {
-  DatePickerProps,
-  DatePickerTriggerProps,
-  DatePickerInputProps,
-  DatePickerContentProps,
-  DatePickerContextValue,
-} from './types';
+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

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