@wireservers-ui/react-natives 0.1.0

package/src/drawer/types.ts

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

package/src/empty/empty.tsx

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

package/src/empty/index.ts

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

package/src/empty/styles.ts

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

package/src/empty/types.ts

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

package/src/fab/fab-icon.tsx

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

package/src/fab/fab-label.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { useFabContext } from './fab';
+import type { FabLabelProps } from './types';
+import { fabLabelStyle } from './styles';
+
+export const FabLabel = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  FabLabelProps
+>(({ className, ...props }, ref) => {
+  const { size } = useFabContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={fabLabelStyle({ size, class: className })}
+      {...props}
+    />
+  );
+});
+
+FabLabel.displayName = 'FabLabel';

package/src/fab/fab.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { FabProps, FabContextValue } from './types';
+import { fabStyle } from './styles';
+
+export const [FabProvider, useFabContext] =
+  createComponentContext<FabContextValue>('Fab');
+
+export const Fab = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  FabProps
+>(
+  (
+    {
+      className,
+      placement = 'bottom-right',
+      size = 'md',
+      isExtended = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <FabProvider value={{ size }}>
+        <Pressable
+          ref={ref}
+          role="button"
+          className={fabStyle({
+            placement,
+            size,
+            isExtended,
+            class: className,
+          })}
+          {...props}
+        >
+          {children}
+        </Pressable>
+      </FabProvider>
+    );
+  },
+);
+
+Fab.displayName = 'Fab';

package/src/fab/index.ts

@@ -0,0 +1,11 @@
+export { Fab } from './fab';
+export { FabIcon } from './fab-icon';
+export { FabLabel } from './fab-label';
+
+export type {
+  FabProps,
+  FabIconProps,
+  FabLabelProps,
+  FabPlacement,
+  FabSize,
+} from './types';

package/src/fab/styles.ts

@@ -0,0 +1,57 @@
+import { tv } from 'tailwind-variants';
+
+export const fabStyle = tv({
+  base: 'absolute bg-primary-500 flex-row items-center justify-center shadow-hard-3 z-20 active:bg-primary-600',
+  variants: {
+    placement: {
+      'top-left': 'top-4 left-4',
+      'top-right': 'top-4 right-4',
+      'bottom-left': 'bottom-4 left-4',
+      'bottom-right': 'bottom-4 right-4',
+      'top-center': 'top-4 self-center',
+      'bottom-center': 'bottom-4 self-center',
+    },
+    size: {
+      sm: 'h-10 min-w-[40px] rounded-full',
+      md: 'h-13 min-w-[52px] rounded-full',
+      lg: 'h-15 min-w-[60px] rounded-full',
+    },
+    isExtended: {
+      true: 'px-5 gap-2',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    placement: 'bottom-right',
+    size: 'md',
+    isExtended: false,
+  },
+});
+
+export const fabIconStyle = tv({
+  base: 'text-typography-0',
+  variants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-[18px] w-[18px]',
+      lg: 'h-5 w-5',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const fabLabelStyle = tv({
+  base: 'text-typography-0 font-semibold',
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/fab/types.ts

@@ -0,0 +1,33 @@
+import type { Pressable, Text as RNText } from 'react-native';
+
+export type FabPlacement =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'top-center'
+  | 'bottom-center';
+
+export type FabSize = 'sm' | 'md' | 'lg';
+
+export interface FabContextValue {
+  size: FabSize;
+}
+
+export interface FabProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  placement?: FabPlacement;
+  size?: FabSize;
+  isExtended?: boolean;
+}
+
+export interface FabIconProps {
+  as: React.ElementType;
+  className?: string;
+}
+
+export interface FabLabelProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}

package/src/form-control/form-control-error-icon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useFormControlContext } from './form-control';
+import type { FormControlErrorIconProps } from './types';
+import { formControlErrorIconStyle } from './styles';
+
+export const FormControlErrorIcon = React.forwardRef<any, FormControlErrorIconProps>(
+  ({ as: AsComp, className, ...props }, ref) => {
+    const ctx = useFormControlContext();
+
+    if (!AsComp) return null;
+
+    return (
+      <AsComp
+        ref={ref}
+        className={formControlErrorIconStyle({
+          size: ctx?.size,
+          class: className,
+        })}
+        {...props}
+      />
+    );
+  },
+);
+
+FormControlErrorIcon.displayName = 'FormControlErrorIcon';

package/src/form-control/form-control-error-message.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import { useFormControlContext } from './form-control';
+import type { FormControlErrorMessageProps } from './types';
+import {
+  formControlErrorMessageStyle,
+  formControlErrorMessageTextStyle,
+} from './styles';
+
+export const FormControlErrorMessage = React.forwardRef<
+  React.ElementRef<typeof View>,
+  FormControlErrorMessageProps
+>(({ className, children, ...props }, ref) => {
+  const ctx = useFormControlContext();
+
+  if (!ctx?.isInvalid) {
+    return null;
+  }
+
+  return (
+    <View
+      ref={ref}
+      className={formControlErrorMessageStyle({ class: className })}
+      role="alert"
+      {...props}
+    >
+      {typeof children === 'string' ? (
+        <Text
+          className={formControlErrorMessageTextStyle({ size: ctx.size })}
+        >
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+});
+
+FormControlErrorMessage.displayName = 'FormControlErrorMessage';

package/src/form-control/form-control-helper-text.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { useFormControlContext } from './form-control';
+import type { FormControlHelperTextProps } from './types';
+import { formControlHelperTextStyle } from './styles';
+
+export const FormControlHelperText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  FormControlHelperTextProps
+>(({ className, ...props }, ref) => {
+  const ctx = useFormControlContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={formControlHelperTextStyle({
+        size: ctx?.size,
+        class: className,
+      })}
+      {...props}
+    />
+  );
+});
+
+FormControlHelperText.displayName = 'FormControlHelperText';

package/src/form-control/form-control-label-text.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { useFormControlContext } from './form-control';
+import type { FormControlLabelTextProps } from './types';
+import { formControlLabelTextStyle } from './styles';
+
+export const FormControlLabelText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  FormControlLabelTextProps
+>(({ className, ...props }, ref) => {
+  const ctx = useFormControlContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={formControlLabelTextStyle({
+        size: ctx?.size,
+        class: className,
+      })}
+      {...props}
+    />
+  );
+});
+
+FormControlLabelText.displayName = 'FormControlLabelText';

package/src/form-control/form-control-label.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import { useFormControlContext } from './form-control';
+import type { FormControlLabelProps } from './types';
+import {
+  formControlLabelStyle,
+  formControlRequiredIndicatorStyle,
+} from './styles';
+
+export const FormControlLabel = React.forwardRef<
+  React.ElementRef<typeof View>,
+  FormControlLabelProps
+>(({ className, children, ...props }, ref) => {
+  const ctx = useFormControlContext();
+
+  return (
+    <View
+      ref={ref}
+      className={formControlLabelStyle({ class: className })}
+      {...props}
+    >
+      {children}
+      {ctx?.isRequired && (
+        <Text
+          className={formControlRequiredIndicatorStyle({
+            size: ctx.size,
+          })}
+        >
+          *
+        </Text>
+      )}
+    </View>
+  );
+});
+
+FormControlLabel.displayName = 'FormControlLabel';

package/src/form-control/form-control.tsx

@@ -0,0 +1,46 @@
+import React, { createContext, useContext } from 'react';
+import { View } from 'react-native';
+import type { FormControlProps, FormControlContextValue } from './types';
+import { formControlStyle } from './styles';
+
+export const FormControlContext =
+  createContext<FormControlContextValue | null>(null);
+
+export function useFormControlContext(): FormControlContextValue | null {
+  return useContext(FormControlContext);
+}
+
+export const FormControl = React.forwardRef<
+  React.ElementRef<typeof View>,
+  FormControlProps
+>(
+  (
+    {
+      className,
+      isDisabled = false,
+      isInvalid = false,
+      isRequired = false,
+      isReadOnly = false,
+      size = 'md',
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <FormControlContext.Provider
+        value={{ isDisabled, isInvalid, isRequired, isReadOnly, size }}
+      >
+        <View
+          ref={ref}
+          className={formControlStyle({ size, class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </FormControlContext.Provider>
+    );
+  },
+);
+
+FormControl.displayName = 'FormControl';

package/src/form-control/index.ts

@@ -0,0 +1,20 @@
+export {
+  FormControl,
+  FormControlContext,
+  useFormControlContext,
+} from './form-control';
+export { FormControlLabel } from './form-control-label';
+export { FormControlLabelText } from './form-control-label-text';
+export { FormControlHelperText } from './form-control-helper-text';
+export { FormControlErrorMessage } from './form-control-error-message';
+export { FormControlErrorIcon } from './form-control-error-icon';
+
+export type {
+  FormControlProps,
+  FormControlContextValue,
+  FormControlLabelProps,
+  FormControlLabelTextProps,
+  FormControlHelperTextProps,
+  FormControlErrorMessageProps,
+  FormControlErrorIconProps,
+} from './types';

package/src/form-control/styles.ts

@@ -0,0 +1,105 @@
+import { tv } from 'tailwind-variants';
+
+export const formControlStyle = tv({
+  base: 'w-full',
+  variants: {
+    size: {
+      xs: 'gap-0.5',
+      sm: 'gap-1',
+      md: 'gap-1',
+      lg: 'gap-1.5',
+      xl: 'gap-2',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const formControlLabelStyle = tv({
+  base: 'flex-row items-center',
+});
+
+export const formControlLabelTextStyle = tv({
+  base: 'text-typography-700 font-medium',
+  variants: {
+    size: {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-sm',
+      lg: 'text-base',
+      xl: 'text-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const formControlHelperTextStyle = tv({
+  base: 'text-typography-500',
+  variants: {
+    size: {
+      xs: 'text-2xs',
+      sm: 'text-xs',
+      md: 'text-xs',
+      lg: 'text-sm',
+      xl: 'text-base',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const formControlErrorMessageStyle = tv({
+  base: 'flex-row items-center gap-1',
+});
+
+export const formControlErrorMessageTextStyle = tv({
+  base: 'text-error-600',
+  variants: {
+    size: {
+      xs: 'text-2xs',
+      sm: 'text-xs',
+      md: 'text-xs',
+      lg: 'text-sm',
+      xl: 'text-base',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const formControlErrorIconStyle = tv({
+  base: 'text-error-600',
+  variants: {
+    size: {
+      xs: 'h-3 w-3',
+      sm: 'h-3.5 w-3.5',
+      md: 'h-4 w-4',
+      lg: 'h-4 w-4',
+      xl: 'h-5 w-5',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const formControlRequiredIndicatorStyle = tv({
+  base: 'text-error-500 font-medium ml-0.5',
+  variants: {
+    size: {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-sm',
+      lg: 'text-base',
+      xl: 'text-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});