@wireservers-ui/react-natives 2.0.1 → 2.0.2

package/src/tooltip/tooltip-content.tsx

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

package/src/tooltip/tooltip-text.tsx

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

package/src/tooltip/tooltip.tsx

@@ -1,116 +1,116 @@
-import React from 'react';
-import { View, type LayoutRectangle } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { TooltipProps, TooltipContextValue, TooltipPlacement } from './types';
-
-export const [TooltipProvider, useTooltipContext] =
-  createComponentContext<TooltipContextValue>('Tooltip');
-
-const TOOLTIP_OFFSET = 8;
-
-function getTooltipPosition(
-  triggerLayout: LayoutRectangle,
-  placement: TooltipPlacement,
-) {
-  switch (placement) {
-    case 'top':
-      return {
-        bottom: triggerLayout.height + TOOLTIP_OFFSET,
-        left: 0,
-      };
-    case 'bottom':
-      return {
-        top: triggerLayout.height + TOOLTIP_OFFSET,
-        left: 0,
-      };
-    case 'left':
-      return {
-        right: triggerLayout.width + TOOLTIP_OFFSET,
-        top: 0,
-      };
-    case 'right':
-      return {
-        left: triggerLayout.width + TOOLTIP_OFFSET,
-        top: 0,
-      };
-  }
-}
-
-export const Tooltip: React.FC<TooltipProps> = ({
-  placement = 'bottom',
-  isOpen: isOpenProp,
-  defaultIsOpen = false,
-  onOpen,
-  onClose,
-  trigger,
-  children,
-}) => {
-  const [isOpenState, setIsOpenState] = React.useState(defaultIsOpen);
-  const triggerRef = React.useRef<View>(null);
-  const [triggerLayout, setTriggerLayout] =
-    React.useState<LayoutRectangle | null>(null);
-
-  const isControlled = isOpenProp !== undefined;
-  const isOpen = isControlled ? isOpenProp : isOpenState;
-
-  const handleOpen = React.useCallback(() => {
-    if (!isControlled) {
-      setIsOpenState(true);
-    }
-    onOpen?.();
-  }, [isControlled, onOpen]);
-
-  const handleClose = React.useCallback(() => {
-    if (!isControlled) {
-      setIsOpenState(false);
-    }
-    onClose?.();
-  }, [isControlled, onClose]);
-
-  const handleToggle = React.useCallback(() => {
-    if (isOpen) {
-      handleClose();
-    } else {
-      handleOpen();
-    }
-  }, [isOpen, handleOpen, handleClose]);
-
-  const handleTriggerLayout = React.useCallback(() => {
-    if (triggerRef.current) {
-      triggerRef.current.measure((_x, _y, width, height) => {
-        setTriggerLayout({ x: 0, y: 0, width, height });
-      });
-    }
-  }, []);
-
-  React.useEffect(() => {
-    if (isOpen) {
-      handleTriggerLayout();
-    }
-  }, [isOpen, handleTriggerLayout]);
-
-  const positionStyle = triggerLayout
-    ? getTooltipPosition(triggerLayout, placement)
-    : {};
-
-  return (
-    <TooltipProvider value={{ placement, isOpen, onClose: handleClose }}>
-      <View style={{ position: 'relative', zIndex: isOpen ? 9999 : 0 }}>
-        {trigger({
-          ref: triggerRef,
-          onPress: handleToggle,
-          onLongPress: handleOpen,
-          onMouseEnter: handleOpen,
-          onMouseLeave: handleClose,
-        })}
-        {isOpen && (
-          <View style={{ position: 'absolute', zIndex: 9999, ...positionStyle }} pointerEvents="box-none">
-            {children}
-          </View>
-        )}
-      </View>
-    </TooltipProvider>
-  );
-};
-
-Tooltip.displayName = 'Tooltip';
+import React from 'react';
+import { View, type LayoutRectangle } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { TooltipProps, TooltipContextValue, TooltipPlacement } from './types';
+
+export const [TooltipProvider, useTooltipContext] =
+  createComponentContext<TooltipContextValue>('Tooltip');
+
+const TOOLTIP_OFFSET = 8;
+
+function getTooltipPosition(
+  triggerLayout: LayoutRectangle,
+  placement: TooltipPlacement,
+) {
+  switch (placement) {
+    case 'top':
+      return {
+        bottom: triggerLayout.height + TOOLTIP_OFFSET,
+        left: 0,
+      };
+    case 'bottom':
+      return {
+        top: triggerLayout.height + TOOLTIP_OFFSET,
+        left: 0,
+      };
+    case 'left':
+      return {
+        right: triggerLayout.width + TOOLTIP_OFFSET,
+        top: 0,
+      };
+    case 'right':
+      return {
+        left: triggerLayout.width + TOOLTIP_OFFSET,
+        top: 0,
+      };
+  }
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  placement = 'bottom',
+  isOpen: isOpenProp,
+  defaultIsOpen = false,
+  onOpen,
+  onClose,
+  trigger,
+  children,
+}) => {
+  const [isOpenState, setIsOpenState] = React.useState(defaultIsOpen);
+  const triggerRef = React.useRef<View>(null);
+  const [triggerLayout, setTriggerLayout] =
+    React.useState<LayoutRectangle | null>(null);
+
+  const isControlled = isOpenProp !== undefined;
+  const isOpen = isControlled ? isOpenProp : isOpenState;
+
+  const handleOpen = React.useCallback(() => {
+    if (!isControlled) {
+      setIsOpenState(true);
+    }
+    onOpen?.();
+  }, [isControlled, onOpen]);
+
+  const handleClose = React.useCallback(() => {
+    if (!isControlled) {
+      setIsOpenState(false);
+    }
+    onClose?.();
+  }, [isControlled, onClose]);
+
+  const handleToggle = React.useCallback(() => {
+    if (isOpen) {
+      handleClose();
+    } else {
+      handleOpen();
+    }
+  }, [isOpen, handleOpen, handleClose]);
+
+  const handleTriggerLayout = React.useCallback(() => {
+    if (triggerRef.current) {
+      triggerRef.current.measure((_x, _y, width, height) => {
+        setTriggerLayout({ x: 0, y: 0, width, height });
+      });
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (isOpen) {
+      handleTriggerLayout();
+    }
+  }, [isOpen, handleTriggerLayout]);
+
+  const positionStyle = triggerLayout
+    ? getTooltipPosition(triggerLayout, placement)
+    : {};
+
+  return (
+    <TooltipProvider value={{ placement, isOpen, onClose: handleClose }}>
+      <View style={{ position: 'relative', zIndex: isOpen ? 9999 : 0 }}>
+        {trigger({
+          ref: triggerRef,
+          onPress: handleToggle,
+          onLongPress: handleOpen,
+          onMouseEnter: handleOpen,
+          onMouseLeave: handleClose,
+        })}
+        {isOpen && (
+          <View style={{ position: 'absolute', zIndex: 9999, ...positionStyle }} pointerEvents="box-none">
+            {children}
+          </View>
+        )}
+      </View>
+    </TooltipProvider>
+  );
+};
+
+Tooltip.displayName = 'Tooltip';

package/src/tooltip/types.ts

@@ -1,35 +1,35 @@
-import type { View, Text as RNText } from 'react-native';
-
-export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
-
-export interface TooltipProps {
-  placement?: TooltipPlacement;
-  isOpen?: boolean;
-  defaultIsOpen?: boolean;
-  onOpen?: () => void;
-  onClose?: () => void;
-  trigger: (props: {
-    ref: React.Ref<any>;
-    onPress: () => void;
-    onLongPress: () => void;
-    onMouseEnter?: () => void;
-    onMouseLeave?: () => void;
-  }) => React.ReactNode;
-  children: React.ReactNode;
-}
-
-export interface TooltipContextValue {
-  placement: TooltipPlacement;
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export interface TooltipContentProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface TooltipTextProps
-  extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
+import type { View, Text as RNText } from 'react-native';
+
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export interface TooltipProps {
+  placement?: TooltipPlacement;
+  isOpen?: boolean;
+  defaultIsOpen?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+  trigger: (props: {
+    ref: React.Ref<any>;
+    onPress: () => void;
+    onLongPress: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+  }) => React.ReactNode;
+  children: React.ReactNode;
+}
+
+export interface TooltipContextValue {
+  placement: TooltipPlacement;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export interface TooltipContentProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface TooltipTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}

package/src/utils/brand.ts

@@ -1,5 +1,5 @@
-/** Single source of truth for the brand color. */
-export const BRAND_COLOR = '#61DBFB';
-export const BRAND_COLOR_LIGHT = '#E8F9FE';
-export const BRAND_COLOR_DARK = '#2BA8CC';
-export const BRAND_GRADIENT = ['#0E7490', '#2BA8CC', '#61DBFB'] as const;
+/** Single source of truth for the brand color. */
+export const BRAND_COLOR = '#61DBFB';
+export const BRAND_COLOR_LIGHT = '#E8F9FE';
+export const BRAND_COLOR_DARK = '#2BA8CC';
+export const BRAND_GRADIENT = ['#0E7490', '#2BA8CC', '#61DBFB'] as const;

package/src/utils/create-context.ts

@@ -1,17 +1,17 @@
-import React from 'react';
-
-export function createComponentContext<T>(componentName: string) {
-  const Context = React.createContext<T | null>(null);
-
-  function useComponentContext(): T {
-    const ctx = React.useContext(Context);
-    if (!ctx) {
-      throw new Error(
-        `${componentName} compound components must be used within <${componentName}>`,
-      );
-    }
-    return ctx;
-  }
-
-  return [Context.Provider, useComponentContext, Context] as const;
-}
+import React from 'react';
+
+export function createComponentContext<T>(componentName: string) {
+  const Context = React.createContext<T | null>(null);
+
+  function useComponentContext(): T {
+    const ctx = React.useContext(Context);
+    if (!ctx) {
+      throw new Error(
+        `${componentName} compound components must be used within <${componentName}>`,
+      );
+    }
+    return ctx;
+  }
+
+  return [Context.Provider, useComponentContext, Context] as const;
+}

package/src/utils/index.ts

@@ -1,8 +1,8 @@
-export { createComponentContext } from './create-context';
-export { BRAND_COLOR, BRAND_COLOR_LIGHT, BRAND_COLOR_DARK, BRAND_GRADIENT } from './brand';
-export type {
-  SemanticColor,
-  Size,
-  ExtendedSize,
-  InteractiveState,
-} from './types';
+export { createComponentContext } from './create-context';
+export { BRAND_COLOR, BRAND_COLOR_LIGHT, BRAND_COLOR_DARK, BRAND_GRADIENT } from './brand';
+export type {
+  SemanticColor,
+  Size,
+  ExtendedSize,
+  InteractiveState,
+} from './types';

package/src/utils/types.ts

@@ -1,20 +1,20 @@
-export type SemanticColor =
-  | 'primary'
-  | 'secondary'
-  | 'tertiary'
-  | 'error'
-  | 'success'
-  | 'warning'
-  | 'info';
-
-export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export type ExtendedSize = '2xs' | Size | '2xl';
-
-export interface InteractiveState {
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  isRequired?: boolean;
-  isReadOnly?: boolean;
-  isFocused?: boolean;
-}
+export type SemanticColor =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'error'
+  | 'success'
+  | 'warning'
+  | 'info';
+
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type ExtendedSize = '2xs' | Size | '2xl';
+
+export interface InteractiveState {
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isRequired?: boolean;
+  isReadOnly?: boolean;
+  isFocused?: boolean;
+}

package/src/visually-hidden/index.ts

@@ -1,2 +1,2 @@
-export { VisuallyHidden } from './visually-hidden';
-export type { VisuallyHiddenProps } from './types';
+export { VisuallyHidden } from './visually-hidden';
+export type { VisuallyHiddenProps } from './types';

package/src/visually-hidden/styles.ts

@@ -1,6 +1,6 @@
-import { tv } from 'tailwind-variants';
-
-export const visuallyHiddenStyle = tv({
-  base: 'absolute w-px h-px overflow-hidden',
-  variants: {},
-});
+import { tv } from 'tailwind-variants';
+
+export const visuallyHiddenStyle = tv({
+  base: 'absolute w-px h-px overflow-hidden',
+  variants: {},
+});

package/src/visually-hidden/types.ts

@@ -1,6 +1,6 @@
-import type { View } from 'react-native';
-
-export interface VisuallyHiddenProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  children: React.ReactNode;
-}
+import type { View } from 'react-native';
+
+export interface VisuallyHiddenProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  children: React.ReactNode;
+}

package/src/visually-hidden/visually-hidden.tsx

@@ -1,22 +1,22 @@
-import React from 'react';
-import { View } from 'react-native';
-import type { VisuallyHiddenProps } from './types';
-import { visuallyHiddenStyle } from './styles';
-
-export const VisuallyHidden = React.forwardRef<
-  React.ElementRef<typeof View>,
-  VisuallyHiddenProps
->(({ className, ...props }, ref) => {
-  return (
-    <View
-      ref={ref}
-      accessibilityElementsHidden={false}
-      importantForAccessibility="yes"
-      className={visuallyHiddenStyle({ class: className })}
-      style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', opacity: 0 }}
-      {...props}
-    />
-  );
-});
-
-VisuallyHidden.displayName = 'VisuallyHidden';
+import React from 'react';
+import { View } from 'react-native';
+import type { VisuallyHiddenProps } from './types';
+import { visuallyHiddenStyle } from './styles';
+
+export const VisuallyHidden = React.forwardRef<
+  React.ElementRef<typeof View>,
+  VisuallyHiddenProps
+>(({ className, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      accessibilityElementsHidden={false}
+      importantForAccessibility="yes"
+      className={visuallyHiddenStyle({ class: className })}
+      style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', opacity: 0 }}
+      {...props}
+    />
+  );
+});
+
+VisuallyHidden.displayName = 'VisuallyHidden';