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

package/src/snackbar/snackbar.tsx

@@ -1,39 +1,39 @@
-import React from 'react';
-import { View, Text, Pressable } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { SnackbarProps, SnackbarTextProps, SnackbarActionButtonProps, SnackbarContextValue } from './types';
-import { snackbarStyle, snackbarTextStyle, snackbarActionButtonStyle, snackbarActionButtonTextStyle } from './styles';
-
-export const [SnackbarProvider, useSnackbarContext] =
-  createComponentContext<SnackbarContextValue>('Snackbar');
-
-export const Snackbar = React.forwardRef<React.ElementRef<typeof View>, SnackbarProps>(
-  ({ className, action = 'info', children, ...props }, ref) => {
-    return (
-      <SnackbarProvider value={{ action }}>
-        <View ref={ref} className={snackbarStyle({ action, class: className })} {...props}>
-          {children}
-        </View>
-      </SnackbarProvider>
-    );
-  },
-);
-Snackbar.displayName = 'Snackbar';
-
-export const SnackbarText = React.forwardRef<React.ElementRef<typeof Text>, SnackbarTextProps>(
-  ({ className, ...props }, ref) => {
-    return <Text ref={ref} className={snackbarTextStyle({ class: className })} {...props} />;
-  },
-);
-SnackbarText.displayName = 'SnackbarText';
-
-export const SnackbarActionButton = React.forwardRef<React.ElementRef<typeof Pressable>, SnackbarActionButtonProps>(
-  ({ className, label, ...props }, ref) => {
-    return (
-      <Pressable ref={ref} className={snackbarActionButtonStyle({ class: className })} accessibilityRole="button" {...props}>
-        <Text className={snackbarActionButtonTextStyle({})}>{label}</Text>
-      </Pressable>
-    );
-  },
-);
-SnackbarActionButton.displayName = 'SnackbarActionButton';
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { SnackbarProps, SnackbarTextProps, SnackbarActionButtonProps, SnackbarContextValue } from './types';
+import { snackbarStyle, snackbarTextStyle, snackbarActionButtonStyle, snackbarActionButtonTextStyle } from './styles';
+
+export const [SnackbarProvider, useSnackbarContext] =
+  createComponentContext<SnackbarContextValue>('Snackbar');
+
+export const Snackbar = React.forwardRef<React.ElementRef<typeof View>, SnackbarProps>(
+  ({ className, action = 'info', children, ...props }, ref) => {
+    return (
+      <SnackbarProvider value={{ action }}>
+        <View ref={ref} className={snackbarStyle({ action, class: className })} {...props}>
+          {children}
+        </View>
+      </SnackbarProvider>
+    );
+  },
+);
+Snackbar.displayName = 'Snackbar';
+
+export const SnackbarText = React.forwardRef<React.ElementRef<typeof Text>, SnackbarTextProps>(
+  ({ className, ...props }, ref) => {
+    return <Text ref={ref} className={snackbarTextStyle({ class: className })} {...props} />;
+  },
+);
+SnackbarText.displayName = 'SnackbarText';
+
+export const SnackbarActionButton = React.forwardRef<React.ElementRef<typeof Pressable>, SnackbarActionButtonProps>(
+  ({ className, label, ...props }, ref) => {
+    return (
+      <Pressable ref={ref} className={snackbarActionButtonStyle({ class: className })} accessibilityRole="button" {...props}>
+        <Text className={snackbarActionButtonTextStyle({})}>{label}</Text>
+      </Pressable>
+    );
+  },
+);
+SnackbarActionButton.displayName = 'SnackbarActionButton';

package/src/snackbar/styles.ts

@@ -1,29 +1,29 @@
-import { tv } from 'tailwind-variants';
-
-export const snackbarStyle = tv({
-  base: 'flex-row items-center justify-between rounded-lg px-4 py-3 shadow-hard-5',
-  variants: {
-    action: {
-      info: 'bg-background-800',
-      success: 'bg-success-700',
-      warning: 'bg-warning-700',
-      error: 'bg-error-700',
-    },
-  },
-  defaultVariants: { action: 'info' },
-});
-
-export const snackbarTextStyle = tv({
-  base: 'text-sm text-typography-0 flex-1 mr-3',
-  variants: {},
-});
-
-export const snackbarActionButtonStyle = tv({
-  base: 'px-2 py-1 rounded',
-  variants: {},
-});
-
-export const snackbarActionButtonTextStyle = tv({
-  base: 'text-sm font-semibold text-primary-200',
-  variants: {},
-});
+import { tv } from 'tailwind-variants';
+
+export const snackbarStyle = tv({
+  base: 'flex-row items-center justify-between rounded-lg px-4 py-3 shadow-hard-5',
+  variants: {
+    action: {
+      info: 'bg-background-800',
+      success: 'bg-success-700',
+      warning: 'bg-warning-700',
+      error: 'bg-error-700',
+    },
+  },
+  defaultVariants: { action: 'info' },
+});
+
+export const snackbarTextStyle = tv({
+  base: 'text-sm text-typography-0 flex-1 mr-3',
+  variants: {},
+});
+
+export const snackbarActionButtonStyle = tv({
+  base: 'px-2 py-1 rounded',
+  variants: {},
+});
+
+export const snackbarActionButtonTextStyle = tv({
+  base: 'text-sm font-semibold text-primary-200',
+  variants: {},
+});

package/src/snackbar/types.ts

@@ -1,21 +1,21 @@
-import type { View, Text as RNText, Pressable } from 'react-native';
-
-export type SnackbarAction = 'info' | 'success' | 'warning' | 'error';
-
-export interface SnackbarContextValue {
-  action: SnackbarAction;
-}
-
-export interface SnackbarProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  action?: SnackbarAction;
-}
-
-export interface SnackbarTextProps extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
-
-export interface SnackbarActionButtonProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-  label: string;
-}
+import type { View, Text as RNText, Pressable } from 'react-native';
+
+export type SnackbarAction = 'info' | 'success' | 'warning' | 'error';
+
+export interface SnackbarContextValue {
+  action: SnackbarAction;
+}
+
+export interface SnackbarProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  action?: SnackbarAction;
+}
+
+export interface SnackbarTextProps extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface SnackbarActionButtonProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  label: string;
+}

package/src/spinner/index.ts

@@ -1,2 +1,2 @@
-export { Spinner } from './spinner';
-export type { SpinnerProps, SpinnerSize } from './types';
+export { Spinner } from './spinner';
+export type { SpinnerProps, SpinnerSize } from './types';

package/src/spinner/spinner.tsx

@@ -1,29 +1,29 @@
-import React from 'react';
-import { ActivityIndicator, View } from 'react-native';
-import type { SpinnerProps } from './types';
-import { spinnerStyle } from './styles';
-
-const sizeMap = {
-  sm: 'small' as const,
-  md: 'small' as const,
-  lg: 'large' as const,
-};
-
-export const Spinner = React.forwardRef<
-  React.ElementRef<typeof View>,
-  SpinnerProps
->(({ className, size = 'md', color, ...props }, ref) => {
-  return (
-    <View
-      ref={ref}
-      className={spinnerStyle({ size, class: className })}
-      aria-label="loading"
-      role="progressbar"
-      {...props}
-    >
-      <ActivityIndicator size={sizeMap[size]} color={color} />
-    </View>
-  );
-});
-
-Spinner.displayName = 'Spinner';
+import React from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import type { SpinnerProps } from './types';
+import { spinnerStyle } from './styles';
+
+const sizeMap = {
+  sm: 'small' as const,
+  md: 'small' as const,
+  lg: 'large' as const,
+};
+
+export const Spinner = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SpinnerProps
+>(({ className, size = 'md', color, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={spinnerStyle({ size, class: className })}
+      aria-label="loading"
+      role="progressbar"
+      {...props}
+    >
+      <ActivityIndicator size={sizeMap[size]} color={color} />
+    </View>
+  );
+});
+
+Spinner.displayName = 'Spinner';

package/src/spinner/styles.ts

@@ -1,15 +1,15 @@
-import { tv } from 'tailwind-variants';
-
-export const spinnerStyle = tv({
-  base: 'items-center justify-center',
-  variants: {
-    size: {
-      sm: 'h-4 w-4',
-      md: 'h-8 w-8',
-      lg: 'h-12 w-12',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
+import { tv } from 'tailwind-variants';
+
+export const spinnerStyle = tv({
+  base: 'items-center justify-center',
+  variants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-8 w-8',
+      lg: 'h-12 w-12',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/spinner/types.ts

@@ -1,10 +1,10 @@
-import type { View } from 'react-native';
-
-export type SpinnerSize = 'sm' | 'md' | 'lg';
-
-export interface SpinnerProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  size?: SpinnerSize;
-  color?: string;
-}
+import type { View } from 'react-native';
+
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+
+export interface SpinnerProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  size?: SpinnerSize;
+  color?: string;
+}

package/src/stack/index.ts

@@ -1,2 +1,2 @@
-export { Stack, VStack, HStack } from './stack';
-export type { StackProps, VStackProps, HStackProps, StackDirection, StackSpace } from './types';
+export { Stack, VStack, HStack } from './stack';
+export type { StackProps, VStackProps, HStackProps, StackDirection, StackSpace } from './types';

package/src/stack/stack.tsx

@@ -1,49 +1,49 @@
-import React from 'react';
-import { View } from 'react-native';
-import type { StackProps, VStackProps, HStackProps } from './types';
-import { stackStyle } from './styles';
-
-export const Stack = React.forwardRef<
-  React.ElementRef<typeof View>,
-  StackProps
->(({ className, direction, space, ...props }, ref) => {
-  return (
-    <View
-      ref={ref}
-      className={stackStyle({ direction, space, class: className })}
-      {...props}
-    />
-  );
-});
-
-Stack.displayName = 'Stack';
-
-export const VStack = React.forwardRef<
-  React.ElementRef<typeof View>,
-  VStackProps
->(({ className, space, ...props }, ref) => {
-  return (
-    <View
-      ref={ref}
-      className={stackStyle({ direction: 'column', space, class: className })}
-      {...props}
-    />
-  );
-});
-
-VStack.displayName = 'VStack';
-
-export const HStack = React.forwardRef<
-  React.ElementRef<typeof View>,
-  HStackProps
->(({ className, space, ...props }, ref) => {
-  return (
-    <View
-      ref={ref}
-      className={stackStyle({ direction: 'row', space, class: className })}
-      {...props}
-    />
-  );
-});
-
-HStack.displayName = 'HStack';
+import React from 'react';
+import { View } from 'react-native';
+import type { StackProps, VStackProps, HStackProps } from './types';
+import { stackStyle } from './styles';
+
+export const Stack = React.forwardRef<
+  React.ElementRef<typeof View>,
+  StackProps
+>(({ className, direction, space, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={stackStyle({ direction, space, class: className })}
+      {...props}
+    />
+  );
+});
+
+Stack.displayName = 'Stack';
+
+export const VStack = React.forwardRef<
+  React.ElementRef<typeof View>,
+  VStackProps
+>(({ className, space, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={stackStyle({ direction: 'column', space, class: className })}
+      {...props}
+    />
+  );
+});
+
+VStack.displayName = 'VStack';
+
+export const HStack = React.forwardRef<
+  React.ElementRef<typeof View>,
+  HStackProps
+>(({ className, space, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={stackStyle({ direction: 'row', space, class: className })}
+      {...props}
+    />
+  );
+});
+
+HStack.displayName = 'HStack';

package/src/stack/styles.ts

@@ -1,25 +1,25 @@
-import { tv } from 'tailwind-variants';
-
-export const stackStyle = tv({
-  base: 'flex',
-  variants: {
-    direction: {
-      'row': 'flex-row',
-      'column': 'flex-col',
-      'row-reverse': 'flex-row-reverse',
-      'column-reverse': 'flex-col-reverse',
-    },
-    space: {
-      xs: 'gap-1',
-      sm: 'gap-2',
-      md: 'gap-3',
-      lg: 'gap-4',
-      xl: 'gap-6',
-      '2xl': 'gap-8',
-    },
-  },
-  defaultVariants: {
-    direction: 'column',
-    space: 'md',
-  },
-});
+import { tv } from 'tailwind-variants';
+
+export const stackStyle = tv({
+  base: 'flex',
+  variants: {
+    direction: {
+      'row': 'flex-row',
+      'column': 'flex-col',
+      'row-reverse': 'flex-row-reverse',
+      'column-reverse': 'flex-col-reverse',
+    },
+    space: {
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: 'gap-3',
+      lg: 'gap-4',
+      xl: 'gap-6',
+      '2xl': 'gap-8',
+    },
+  },
+  defaultVariants: {
+    direction: 'column',
+    space: 'md',
+  },
+});

package/src/stack/types.ts

@@ -1,15 +1,15 @@
-import type { View } from 'react-native';
-
-export type StackDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
-export type StackSpace = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-
-export interface StackProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  direction?: StackDirection;
-  space?: StackSpace;
-  reversed?: boolean;
-}
-
-export interface VStackProps extends Omit<StackProps, 'direction'> {}
-export interface HStackProps extends Omit<StackProps, 'direction'> {}
+import type { View } from 'react-native';
+
+export type StackDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export type StackSpace = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export interface StackProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  direction?: StackDirection;
+  space?: StackSpace;
+  reversed?: boolean;
+}
+
+export interface VStackProps extends Omit<StackProps, 'direction'> {}
+export interface HStackProps extends Omit<StackProps, 'direction'> {}

package/src/stat/index.ts

@@ -1,2 +1,2 @@
-export { Stat, StatLabel, StatNumber, StatHelpText, StatArrow } from './stat';
-export type { StatProps, StatLabelProps, StatNumberProps, StatHelpTextProps, StatArrowProps, StatArrowType } from './types';
+export { Stat, StatLabel, StatNumber, StatHelpText, StatArrow } from './stat';
+export type { StatProps, StatLabelProps, StatNumberProps, StatHelpTextProps, StatArrowProps, StatArrowType } from './types';

package/src/stat/stat.tsx

@@ -1,48 +1,48 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-import type { StatProps, StatLabelProps, StatNumberProps, StatHelpTextProps, StatArrowProps } from './types';
-import { statStyle, statLabelStyle, statNumberStyle, statHelpTextStyle, statArrowStyle } from './styles';
-
-export const Stat = React.forwardRef<
-  React.ElementRef<typeof View>,
-  StatProps
->(({ className, ...props }, ref) => {
-  return <View ref={ref} className={statStyle({ class: className })} {...props} />;
-});
-Stat.displayName = 'Stat';
-
-export const StatLabel = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  StatLabelProps
->(({ className, ...props }, ref) => {
-  return <Text ref={ref} className={statLabelStyle({ class: className })} {...props} />;
-});
-StatLabel.displayName = 'StatLabel';
-
-export const StatNumber = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  StatNumberProps
->(({ className, ...props }, ref) => {
-  return <Text ref={ref} className={statNumberStyle({ class: className })} {...props} />;
-});
-StatNumber.displayName = 'StatNumber';
-
-export const StatHelpText = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  StatHelpTextProps
->(({ className, ...props }, ref) => {
-  return <Text ref={ref} className={statHelpTextStyle({ class: className })} {...props} />;
-});
-StatHelpText.displayName = 'StatHelpText';
-
-export const StatArrow = React.forwardRef<
-  React.ElementRef<typeof View>,
-  StatArrowProps
->(({ className, type = 'increase', ...props }, ref) => {
-  return (
-    <Text ref={ref as any} className={statArrowStyle({ type, class: className })} {...props}>
-      {type === 'increase' ? '\u25B2' : '\u25BC'}
-    </Text>
-  );
-});
-StatArrow.displayName = 'StatArrow';
+import React from 'react';
+import { View, Text } from 'react-native';
+import type { StatProps, StatLabelProps, StatNumberProps, StatHelpTextProps, StatArrowProps } from './types';
+import { statStyle, statLabelStyle, statNumberStyle, statHelpTextStyle, statArrowStyle } from './styles';
+
+export const Stat = React.forwardRef<
+  React.ElementRef<typeof View>,
+  StatProps
+>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={statStyle({ class: className })} {...props} />;
+});
+Stat.displayName = 'Stat';
+
+export const StatLabel = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  StatLabelProps
+>(({ className, ...props }, ref) => {
+  return <Text ref={ref} className={statLabelStyle({ class: className })} {...props} />;
+});
+StatLabel.displayName = 'StatLabel';
+
+export const StatNumber = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  StatNumberProps
+>(({ className, ...props }, ref) => {
+  return <Text ref={ref} className={statNumberStyle({ class: className })} {...props} />;
+});
+StatNumber.displayName = 'StatNumber';
+
+export const StatHelpText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  StatHelpTextProps
+>(({ className, ...props }, ref) => {
+  return <Text ref={ref} className={statHelpTextStyle({ class: className })} {...props} />;
+});
+StatHelpText.displayName = 'StatHelpText';
+
+export const StatArrow = React.forwardRef<
+  React.ElementRef<typeof View>,
+  StatArrowProps
+>(({ className, type = 'increase', ...props }, ref) => {
+  return (
+    <Text ref={ref as any} className={statArrowStyle({ type, class: className })} {...props}>
+      {type === 'increase' ? '\u25B2' : '\u25BC'}
+    </Text>
+  );
+});
+StatArrow.displayName = 'StatArrow';

package/src/stat/styles.ts

@@ -1,34 +1,34 @@
-import { tv } from 'tailwind-variants';
-
-export const statStyle = tv({
-  base: 'gap-0.5',
-  variants: {},
-});
-
-export const statLabelStyle = tv({
-  base: 'text-xs font-medium text-typography-500',
-  variants: {},
-});
-
-export const statNumberStyle = tv({
-  base: 'text-2xl font-bold text-typography-900',
-  variants: {},
-});
-
-export const statHelpTextStyle = tv({
-  base: 'text-xs text-typography-500 flex-row items-center gap-1',
-  variants: {},
-});
-
-export const statArrowStyle = tv({
-  base: 'text-xs',
-  variants: {
-    type: {
-      increase: 'text-success-600',
-      decrease: 'text-error-600',
-    },
-  },
-  defaultVariants: {
-    type: 'increase',
-  },
-});
+import { tv } from 'tailwind-variants';
+
+export const statStyle = tv({
+  base: 'gap-0.5',
+  variants: {},
+});
+
+export const statLabelStyle = tv({
+  base: 'text-xs font-medium text-typography-500',
+  variants: {},
+});
+
+export const statNumberStyle = tv({
+  base: 'text-2xl font-bold text-typography-900',
+  variants: {},
+});
+
+export const statHelpTextStyle = tv({
+  base: 'text-xs text-typography-500 flex-row items-center gap-1',
+  variants: {},
+});
+
+export const statArrowStyle = tv({
+  base: 'text-xs',
+  variants: {
+    type: {
+      increase: 'text-success-600',
+      decrease: 'text-error-600',
+    },
+  },
+  defaultVariants: {
+    type: 'increase',
+  },
+});