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

package/src/drawer/drawer-header.tsx

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

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

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

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

package/src/drawer/types.ts

@@ -1,62 +1,62 @@
-import type { View, Pressable } from 'react-native';
-
-export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
-
-export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
-
-export type DrawerAnimationType = 'slide' | 'fade' | 'none';
-
-/** Direction the drawer panel slides in from. When set, overrides animationType with a custom directional animation. */
-export type DrawerSlideFrom = 'top' | 'left' | 'bottom' | 'right';
-
-export interface DrawerContextValue {
-  isOpen: boolean;
-  onClose: () => void;
-  placement: DrawerPlacement;
-  size: DrawerSize;
-  animationType: DrawerAnimationType;
-  slideFrom?: DrawerSlideFrom;
-}
-
-export interface DrawerProps {
-  isOpen: boolean;
-  onClose: () => void;
-  placement?: DrawerPlacement;
-  size?: DrawerSize;
-  animationType?: DrawerAnimationType;
-  /** Slide the drawer panel in from this direction (custom animation; overrides animationType). */
-  slideFrom?: DrawerSlideFrom;
-  /** When false the drawer renders inline (no RNModal) so background content stays interactive. */
-  isModal?: boolean;
-  children: React.ReactNode;
-}
-
-export interface DrawerBackdropProps
-  extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-}
-
-export interface DrawerContentProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface DrawerHeaderProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface DrawerBodyProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface DrawerFooterProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface DrawerCloseButtonProps
-  extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-}
+import type { View, Pressable } from 'react-native';
+
+export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
+
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
+
+export type DrawerAnimationType = 'slide' | 'fade' | 'none';
+
+/** Direction the drawer panel slides in from. When set, overrides animationType with a custom directional animation. */
+export type DrawerSlideFrom = 'top' | 'left' | 'bottom' | 'right';
+
+export interface DrawerContextValue {
+  isOpen: boolean;
+  onClose: () => void;
+  placement: DrawerPlacement;
+  size: DrawerSize;
+  animationType: DrawerAnimationType;
+  slideFrom?: DrawerSlideFrom;
+}
+
+export interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  placement?: DrawerPlacement;
+  size?: DrawerSize;
+  animationType?: DrawerAnimationType;
+  /** Slide the drawer panel in from this direction (custom animation; overrides animationType). */
+  slideFrom?: DrawerSlideFrom;
+  /** When false the drawer renders inline (no RNModal) so background content stays interactive. */
+  isModal?: boolean;
+  children: React.ReactNode;
+}
+
+export interface DrawerBackdropProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}
+
+export interface DrawerContentProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface DrawerHeaderProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface DrawerBodyProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface DrawerFooterProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface DrawerCloseButtonProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}

package/src/empty/empty.tsx

@@ -1,53 +1,53 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-import type { EmptyProps, EmptyIconProps, EmptyTitleProps, EmptyDescriptionProps, EmptyActionProps } from './types';
-import { emptyStyle, emptyIconStyle, emptyTitleStyle, emptyDescriptionStyle, emptyActionStyle } from './styles';
-
-export const Empty = React.forwardRef<
-  React.ElementRef<typeof View>,
-  EmptyProps
->(({ className, ...props }, ref) => {
-  return (
-    <View ref={ref} className={emptyStyle({ class: className })} {...props} />
-  );
-});
-Empty.displayName = 'Empty';
-
-export const EmptyIcon = React.forwardRef<any, EmptyIconProps>(
-  ({ as: AsComp, className, ...props }, ref) => {
-    return (
-      <AsComp ref={ref} className={emptyIconStyle({ class: className })} {...props} />
-    );
-  },
-);
-EmptyIcon.displayName = 'EmptyIcon';
-
-export const EmptyTitle = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  EmptyTitleProps
->(({ className, ...props }, ref) => {
-  return (
-    <Text ref={ref} className={emptyTitleStyle({ class: className })} {...props} />
-  );
-});
-EmptyTitle.displayName = 'EmptyTitle';
-
-export const EmptyDescription = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  EmptyDescriptionProps
->(({ className, ...props }, ref) => {
-  return (
-    <Text ref={ref} className={emptyDescriptionStyle({ class: className })} {...props} />
-  );
-});
-EmptyDescription.displayName = 'EmptyDescription';
-
-export const EmptyAction = React.forwardRef<
-  React.ElementRef<typeof View>,
-  EmptyActionProps
->(({ className, ...props }, ref) => {
-  return (
-    <View ref={ref} className={emptyActionStyle({ class: className })} {...props} />
-  );
-});
-EmptyAction.displayName = 'EmptyAction';
+import React from 'react';
+import { View, Text } from 'react-native';
+import type { EmptyProps, EmptyIconProps, EmptyTitleProps, EmptyDescriptionProps, EmptyActionProps } from './types';
+import { emptyStyle, emptyIconStyle, emptyTitleStyle, emptyDescriptionStyle, emptyActionStyle } from './styles';
+
+export const Empty = React.forwardRef<
+  React.ElementRef<typeof View>,
+  EmptyProps
+>(({ className, ...props }, ref) => {
+  return (
+    <View ref={ref} className={emptyStyle({ class: className })} {...props} />
+  );
+});
+Empty.displayName = 'Empty';
+
+export const EmptyIcon = React.forwardRef<any, EmptyIconProps>(
+  ({ as: AsComp, className, ...props }, ref) => {
+    return (
+      <AsComp ref={ref} className={emptyIconStyle({ class: className })} {...props} />
+    );
+  },
+);
+EmptyIcon.displayName = 'EmptyIcon';
+
+export const EmptyTitle = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  EmptyTitleProps
+>(({ className, ...props }, ref) => {
+  return (
+    <Text ref={ref} className={emptyTitleStyle({ class: className })} {...props} />
+  );
+});
+EmptyTitle.displayName = 'EmptyTitle';
+
+export const EmptyDescription = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  EmptyDescriptionProps
+>(({ className, ...props }, ref) => {
+  return (
+    <Text ref={ref} className={emptyDescriptionStyle({ class: className })} {...props} />
+  );
+});
+EmptyDescription.displayName = 'EmptyDescription';
+
+export const EmptyAction = React.forwardRef<
+  React.ElementRef<typeof View>,
+  EmptyActionProps
+>(({ className, ...props }, ref) => {
+  return (
+    <View ref={ref} className={emptyActionStyle({ class: className })} {...props} />
+  );
+});
+EmptyAction.displayName = 'EmptyAction';

package/src/empty/index.ts

@@ -1,2 +1,2 @@
-export { Empty, EmptyIcon, EmptyTitle, EmptyDescription, EmptyAction } from './empty';
-export type { EmptyProps, EmptyIconProps, EmptyTitleProps, EmptyDescriptionProps, EmptyActionProps } from './types';
+export { Empty, EmptyIcon, EmptyTitle, EmptyDescription, EmptyAction } from './empty';
+export type { EmptyProps, EmptyIconProps, EmptyTitleProps, EmptyDescriptionProps, EmptyActionProps } from './types';

package/src/empty/styles.ts

@@ -1,26 +1,26 @@
-import { tv } from 'tailwind-variants';
-
-export const emptyStyle = tv({
-  base: 'items-center justify-center py-12 px-6',
-  variants: {},
-});
-
-export const emptyIconStyle = tv({
-  base: 'h-12 w-12 text-typography-300 mb-4',
-  variants: {},
-});
-
-export const emptyTitleStyle = tv({
-  base: 'text-lg font-semibold text-typography-900 mb-1 text-center',
-  variants: {},
-});
-
-export const emptyDescriptionStyle = tv({
-  base: 'text-sm text-typography-500 text-center mb-4',
-  variants: {},
-});
-
-export const emptyActionStyle = tv({
-  base: 'mt-2',
-  variants: {},
-});
+import { tv } from 'tailwind-variants';
+
+export const emptyStyle = tv({
+  base: 'items-center justify-center py-12 px-6',
+  variants: {},
+});
+
+export const emptyIconStyle = tv({
+  base: 'h-12 w-12 text-typography-300 mb-4',
+  variants: {},
+});
+
+export const emptyTitleStyle = tv({
+  base: 'text-lg font-semibold text-typography-900 mb-1 text-center',
+  variants: {},
+});
+
+export const emptyDescriptionStyle = tv({
+  base: 'text-sm text-typography-500 text-center mb-4',
+  variants: {},
+});
+
+export const emptyActionStyle = tv({
+  base: 'mt-2',
+  variants: {},
+});

package/src/empty/types.ts

@@ -1,22 +1,22 @@
-import type { View, Text as RNText } from 'react-native';
-
-export interface EmptyProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface EmptyIconProps {
-  as: React.ElementType;
-  className?: string;
-}
-
-export interface EmptyTitleProps extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
-
-export interface EmptyDescriptionProps extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
-
-export interface EmptyActionProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
+import type { View, Text as RNText } from 'react-native';
+
+export interface EmptyProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface EmptyIconProps {
+  as: React.ElementType;
+  className?: string;
+}
+
+export interface EmptyTitleProps extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface EmptyDescriptionProps extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface EmptyActionProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}

package/src/fab/fab-icon.tsx

@@ -1,20 +1,20 @@
-import React from 'react';
-import { useFabContext } from './fab';
-import type { FabIconProps } from './types';
-import { fabIconStyle } from './styles';
-
-export const FabIcon = React.forwardRef<any, FabIconProps>(
-  ({ as: AsComp, className, ...props }, ref) => {
-    const { size } = useFabContext();
-
-    return (
-      <AsComp
-        ref={ref}
-        className={fabIconStyle({ size, class: className })}
-        {...props}
-      />
-    );
-  },
-);
-
-FabIcon.displayName = 'FabIcon';
+import React from 'react';
+import { useFabContext } from './fab';
+import type { FabIconProps } from './types';
+import { fabIconStyle } from './styles';
+
+export const FabIcon = React.forwardRef<any, FabIconProps>(
+  ({ as: AsComp, className, ...props }, ref) => {
+    const { size } = useFabContext();
+
+    return (
+      <AsComp
+        ref={ref}
+        className={fabIconStyle({ size, class: className })}
+        {...props}
+      />
+    );
+  },
+);
+
+FabIcon.displayName = 'FabIcon';