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

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

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

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

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

package/src/form-control/types.ts

@@ -1,45 +1,45 @@
-import type { View, Text as RNText } from 'react-native';
-import type { Size } from '../utils/types';
-
-export interface FormControlContextValue {
-  isDisabled: boolean;
-  isInvalid: boolean;
-  isRequired: boolean;
-  isReadOnly: boolean;
-  size: Size;
-}
-
-export interface FormControlProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  isRequired?: boolean;
-  isReadOnly?: boolean;
-  size?: Size;
-}
-
-export interface FormControlLabelProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface FormControlLabelTextProps
-  extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
-
-export interface FormControlHelperTextProps
-  extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
-
-export interface FormControlErrorMessageProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface FormControlErrorIconProps {
-  as?: React.ElementType;
-  className?: string;
-}
+import type { View, Text as RNText } from 'react-native';
+import type { Size } from '../utils/types';
+
+export interface FormControlContextValue {
+  isDisabled: boolean;
+  isInvalid: boolean;
+  isRequired: boolean;
+  isReadOnly: boolean;
+  size: Size;
+}
+
+export interface FormControlProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isRequired?: boolean;
+  isReadOnly?: boolean;
+  size?: Size;
+}
+
+export interface FormControlLabelProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface FormControlLabelTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface FormControlHelperTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface FormControlErrorMessageProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface FormControlErrorIconProps {
+  as?: React.ElementType;
+  className?: string;
+}

package/src/heading/heading.tsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import { Text } from 'react-native';
-import type { HeadingProps } from './types';
-import { headingStyle } from './styles';
-
-export const Heading = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  HeadingProps
->(({ className, size, isTruncated, numberOfLines, ...props }, ref) => {
-  return (
-    <Text
-      ref={ref}
-      role="heading"
-      numberOfLines={isTruncated ? 1 : numberOfLines}
-      className={headingStyle({ size, isTruncated, class: className })}
-      {...props}
-    />
-  );
-});
-
-Heading.displayName = 'Heading';
+import React from 'react';
+import { Text } from 'react-native';
+import type { HeadingProps } from './types';
+import { headingStyle } from './styles';
+
+export const Heading = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  HeadingProps
+>(({ className, size, isTruncated, numberOfLines, ...props }, ref) => {
+  return (
+    <Text
+      ref={ref}
+      role="heading"
+      numberOfLines={isTruncated ? 1 : numberOfLines}
+      className={headingStyle({ size, isTruncated, class: className })}
+      {...props}
+    />
+  );
+});
+
+Heading.displayName = 'Heading';

package/src/heading/index.ts

@@ -1,2 +1,2 @@
-export { Heading } from './heading';
-export type { HeadingProps, HeadingSize } from './types';
+export { Heading } from './heading';
+export type { HeadingProps, HeadingSize } from './types';

package/src/heading/styles.ts

@@ -1,24 +1,24 @@
-import { tv } from 'tailwind-variants';
-
-export const headingStyle = tv({
-  base: 'text-typography-900 font-bold',
-  variants: {
-    size: {
-      'xs': 'text-xs',
-      'sm': 'text-sm',
-      'md': 'text-base',
-      'lg': 'text-lg',
-      'xl': 'text-xl',
-      '2xl': 'text-2xl',
-      '3xl': 'text-3xl',
-      '4xl': 'text-4xl',
-      '5xl': 'text-5xl',
-    },
-    isTruncated: {
-      true: 'truncate',
-    },
-  },
-  defaultVariants: {
-    size: 'lg',
-  },
-});
+import { tv } from 'tailwind-variants';
+
+export const headingStyle = tv({
+  base: 'text-typography-900 font-bold',
+  variants: {
+    size: {
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+    },
+    isTruncated: {
+      true: 'truncate',
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+});

package/src/heading/types.ts

@@ -1,19 +1,19 @@
-import type { Text as RNText } from 'react-native';
-
-export type HeadingSize =
-  | 'xs'
-  | 'sm'
-  | 'md'
-  | 'lg'
-  | 'xl'
-  | '2xl'
-  | '3xl'
-  | '4xl'
-  | '5xl';
-
-export interface HeadingProps
-  extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-  size?: HeadingSize;
-  isTruncated?: boolean;
-}
+import type { Text as RNText } from 'react-native';
+
+export type HeadingSize =
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl'
+  | '5xl';
+
+export interface HeadingProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+  size?: HeadingSize;
+  isTruncated?: boolean;
+}

package/src/icon/icon.tsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import type { IconProps } from './types';
-import { iconStyle } from './styles';
-
-export const Icon = React.forwardRef<any, IconProps>(
-  ({ as: AsComp, className, size, color, ...props }, ref) => {
-    const sizeClass = typeof size === 'number' ? undefined : size;
-
-    return (
-      <AsComp
-        ref={ref}
-        className={iconStyle({ size: sizeClass, class: className })}
-        size={typeof size === 'number' ? size : undefined}
-        color={color}
-        {...props}
-      />
-    );
-  },
-);
-
-Icon.displayName = 'Icon';
+import React from 'react';
+import type { IconProps } from './types';
+import { iconStyle } from './styles';
+
+export const Icon = React.forwardRef<any, IconProps>(
+  ({ as: AsComp, className, size, color, ...props }, ref) => {
+    const sizeClass = typeof size === 'number' ? undefined : size;
+
+    return (
+      <AsComp
+        ref={ref}
+        className={iconStyle({ size: sizeClass, class: className })}
+        size={typeof size === 'number' ? size : undefined}
+        color={color}
+        {...props}
+      />
+    );
+  },
+);
+
+Icon.displayName = 'Icon';

package/src/icon/index.ts

@@ -1,2 +1,2 @@
-export { Icon } from './icon';
-export type { IconProps, IconSize } from './types';
+export { Icon } from './icon';
+export type { IconProps, IconSize } from './types';

package/src/icon/styles.ts

@@ -1,18 +1,18 @@
-import { tv } from 'tailwind-variants';
-
-export const iconStyle = tv({
-  base: 'fill-none text-typography-900',
-  variants: {
-    size: {
-      'xs': 'h-4 w-4',
-      'sm': 'h-5 w-5',
-      'md': 'h-6 w-6',
-      'lg': 'h-8 w-8',
-      'xl': 'h-10 w-10',
-      '2xl': 'h-12 w-12',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
+import { tv } from 'tailwind-variants';
+
+export const iconStyle = tv({
+  base: 'fill-none text-typography-900',
+  variants: {
+    size: {
+      'xs': 'h-4 w-4',
+      'sm': 'h-5 w-5',
+      'md': 'h-6 w-6',
+      'lg': 'h-8 w-8',
+      'xl': 'h-10 w-10',
+      '2xl': 'h-12 w-12',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/icon/types.ts

@@ -1,8 +1,8 @@
-export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-
-export interface IconProps {
-  as: React.ElementType;
-  className?: string;
-  size?: IconSize | number;
-  color?: string;
-}
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export interface IconProps {
+  as: React.ElementType;
+  className?: string;
+  size?: IconSize | number;
+  color?: string;
+}