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

package/src/fab/fab-label.tsx

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

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

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

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

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

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

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

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

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

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