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

package/src/tags-input/tags-input.tsx

@@ -1,149 +1,149 @@
-import React, { useState, createContext, useContext } from 'react';
-import { View, TextInput, Pressable, Text } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type {
-  TagsInputProps,
-  TagsInputFieldProps,
-  TagsInputTagProps,
-  TagsInputTagTextProps,
-  TagsInputTagCloseButtonProps,
-  TagsInputContextValue,
-} from './types';
-import {
-  tagsInputStyle,
-  tagsInputFieldStyle,
-  tagsInputTagStyle,
-  tagsInputTagTextStyle,
-  tagsInputTagCloseButtonStyle,
-} from './styles';
-import { BRAND_COLOR } from '../utils/brand';
-
-export const [TagsInputProvider, useTagsInputContext] =
-  createComponentContext<TagsInputContextValue>('TagsInput');
-
-const TagValueContext = createContext<string | null>(null);
-
-export const TagsInput = React.forwardRef<
-  React.ElementRef<typeof View>,
-  TagsInputProps
->(
-  (
-    {
-      className,
-      value = [],
-      onValueChange,
-      size = 'md',
-      isDisabled = false,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <TagsInputProvider value={{ size, value, onValueChange, isDisabled }}>
-        <View
-          ref={ref}
-          className={tagsInputStyle({ size, isDisabled, class: className })}
-          {...props}
-        >
-          {children}
-        </View>
-      </TagsInputProvider>
-    );
-  },
-);
-TagsInput.displayName = 'TagsInput';
-
-export const TagsInputField = React.forwardRef<
-  React.ElementRef<typeof TextInput>,
-  TagsInputFieldProps
->(({ className, ...props }, ref) => {
-  const { size, value, onValueChange, isDisabled } = useTagsInputContext();
-  const [inputValue, setInputValue] = useState('');
-
-  const handleSubmit = () => {
-    const trimmed = inputValue.trim();
-    if (trimmed && !value.includes(trimmed)) {
-      onValueChange?.([...value, trimmed]);
-    }
-    setInputValue('');
-  };
-
-  return (
-    <TextInput
-      ref={ref}
-      className={tagsInputFieldStyle({ size, class: className })}
-      value={inputValue}
-      onChangeText={setInputValue}
-      onSubmitEditing={handleSubmit}
-      editable={!isDisabled}
-      readOnly={isDisabled}
-      blurOnSubmit={false}
-      style={{ backgroundColor: 'transparent' }}
-      {...props}
-    />
-  );
-});
-TagsInputField.displayName = 'TagsInputField';
-
-export const TagsInputTag = React.forwardRef<
-  React.ElementRef<typeof View>,
-  TagsInputTagProps
->(({ className, value, onRemove, children, ...props }, ref) => {
-  return (
-    <TagValueContext.Provider value={value}>
-      <View
-        ref={ref}
-        className={tagsInputTagStyle({ class: className })}
-        {...props}
-      >
-        {children ?? <Text className={tagsInputTagTextStyle({})}>{value}</Text>}
-      </View>
-    </TagValueContext.Provider>
-  );
-});
-TagsInputTag.displayName = 'TagsInputTag';
-
-export const TagsInputTagText = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  TagsInputTagTextProps
->(({ className, ...props }, ref) => {
-  return (
-    <Text
-      ref={ref}
-      className={tagsInputTagTextStyle({ class: className })}
-      {...props}
-    />
-  );
-});
-TagsInputTagText.displayName = 'TagsInputTagText';
-
-export const TagsInputTagCloseButton = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  TagsInputTagCloseButtonProps
->(({ className, onPress, ...props }, ref) => {
-  const { value, onValueChange, isDisabled } = useTagsInputContext();
-  const tagValue = useContext(TagValueContext);
-
-  const handlePress = (e: any) => {
-    if (tagValue != null) {
-      onValueChange?.(value.filter((v) => v !== tagValue));
-    }
-    onPress?.(e);
-  };
-
-  return (
-    <Pressable
-      ref={ref}
-      className={tagsInputTagCloseButtonStyle({ class: className })}
-      accessibilityRole="button"
-      accessibilityLabel="Remove tag"
-      onPress={handlePress}
-      disabled={isDisabled}
-      {...props}
-    >
-      <Text style={{ fontSize: 10, color: BRAND_COLOR }}>{'\u2715'}</Text>
-    </Pressable>
-  );
-});
-TagsInputTagCloseButton.displayName = 'TagsInputTagCloseButton';
+import React, { useState, createContext, useContext } from 'react';
+import { View, TextInput, Pressable, Text } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type {
+  TagsInputProps,
+  TagsInputFieldProps,
+  TagsInputTagProps,
+  TagsInputTagTextProps,
+  TagsInputTagCloseButtonProps,
+  TagsInputContextValue,
+} from './types';
+import {
+  tagsInputStyle,
+  tagsInputFieldStyle,
+  tagsInputTagStyle,
+  tagsInputTagTextStyle,
+  tagsInputTagCloseButtonStyle,
+} from './styles';
+import { BRAND_COLOR } from '../utils/brand';
+
+export const [TagsInputProvider, useTagsInputContext] =
+  createComponentContext<TagsInputContextValue>('TagsInput');
+
+const TagValueContext = createContext<string | null>(null);
+
+export const TagsInput = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TagsInputProps
+>(
+  (
+    {
+      className,
+      value = [],
+      onValueChange,
+      size = 'md',
+      isDisabled = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <TagsInputProvider value={{ size, value, onValueChange, isDisabled }}>
+        <View
+          ref={ref}
+          className={tagsInputStyle({ size, isDisabled, class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </TagsInputProvider>
+    );
+  },
+);
+TagsInput.displayName = 'TagsInput';
+
+export const TagsInputField = React.forwardRef<
+  React.ElementRef<typeof TextInput>,
+  TagsInputFieldProps
+>(({ className, ...props }, ref) => {
+  const { size, value, onValueChange, isDisabled } = useTagsInputContext();
+  const [inputValue, setInputValue] = useState('');
+
+  const handleSubmit = () => {
+    const trimmed = inputValue.trim();
+    if (trimmed && !value.includes(trimmed)) {
+      onValueChange?.([...value, trimmed]);
+    }
+    setInputValue('');
+  };
+
+  return (
+    <TextInput
+      ref={ref}
+      className={tagsInputFieldStyle({ size, class: className })}
+      value={inputValue}
+      onChangeText={setInputValue}
+      onSubmitEditing={handleSubmit}
+      editable={!isDisabled}
+      readOnly={isDisabled}
+      blurOnSubmit={false}
+      style={{ backgroundColor: 'transparent' }}
+      {...props}
+    />
+  );
+});
+TagsInputField.displayName = 'TagsInputField';
+
+export const TagsInputTag = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TagsInputTagProps
+>(({ className, value, onRemove, children, ...props }, ref) => {
+  return (
+    <TagValueContext.Provider value={value}>
+      <View
+        ref={ref}
+        className={tagsInputTagStyle({ class: className })}
+        {...props}
+      >
+        {children ?? <Text className={tagsInputTagTextStyle({})}>{value}</Text>}
+      </View>
+    </TagValueContext.Provider>
+  );
+});
+TagsInputTag.displayName = 'TagsInputTag';
+
+export const TagsInputTagText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  TagsInputTagTextProps
+>(({ className, ...props }, ref) => {
+  return (
+    <Text
+      ref={ref}
+      className={tagsInputTagTextStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+TagsInputTagText.displayName = 'TagsInputTagText';
+
+export const TagsInputTagCloseButton = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  TagsInputTagCloseButtonProps
+>(({ className, onPress, ...props }, ref) => {
+  const { value, onValueChange, isDisabled } = useTagsInputContext();
+  const tagValue = useContext(TagValueContext);
+
+  const handlePress = (e: any) => {
+    if (tagValue != null) {
+      onValueChange?.(value.filter((v) => v !== tagValue));
+    }
+    onPress?.(e);
+  };
+
+  return (
+    <Pressable
+      ref={ref}
+      className={tagsInputTagCloseButtonStyle({ class: className })}
+      accessibilityRole="button"
+      accessibilityLabel="Remove tag"
+      onPress={handlePress}
+      disabled={isDisabled}
+      {...props}
+    >
+      <Text style={{ fontSize: 10, color: BRAND_COLOR }}>{'\u2715'}</Text>
+    </Pressable>
+  );
+});
+TagsInputTagCloseButton.displayName = 'TagsInputTagCloseButton';

package/src/tags-input/types.ts

@@ -1,37 +1,37 @@
-import type { View, TextInput, Pressable } from 'react-native';
-
-export type TagsInputSize = 'sm' | 'md' | 'lg';
-
-export interface TagsInputContextValue {
-  size: TagsInputSize;
-  value: string[];
-  onValueChange?: (values: string[]) => void;
-  isDisabled: boolean;
-}
-
-export interface TagsInputProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  value?: string[];
-  onValueChange?: (values: string[]) => void;
-  size?: TagsInputSize;
-  isDisabled?: boolean;
-}
-export interface TagsInputFieldProps
-  extends React.ComponentPropsWithoutRef<typeof TextInput> {
-  className?: string;
-}
-export interface TagsInputTagProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  value: string;
-  onRemove?: (value: string) => void;
-}
-export interface TagsInputTagTextProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-export interface TagsInputTagCloseButtonProps
-  extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-}
+import type { View, TextInput, Pressable } from 'react-native';
+
+export type TagsInputSize = 'sm' | 'md' | 'lg';
+
+export interface TagsInputContextValue {
+  size: TagsInputSize;
+  value: string[];
+  onValueChange?: (values: string[]) => void;
+  isDisabled: boolean;
+}
+
+export interface TagsInputProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  value?: string[];
+  onValueChange?: (values: string[]) => void;
+  size?: TagsInputSize;
+  isDisabled?: boolean;
+}
+export interface TagsInputFieldProps
+  extends React.ComponentPropsWithoutRef<typeof TextInput> {
+  className?: string;
+}
+export interface TagsInputTagProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  value: string;
+  onRemove?: (value: string) => void;
+}
+export interface TagsInputTagTextProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+export interface TagsInputTagCloseButtonProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}

package/src/text/index.ts

@@ -1,2 +1,2 @@
-export { Text } from './text';
-export type { TextProps, TextSize, TextWeight } from './types';
+export { Text } from './text';
+export type { TextProps, TextSize, TextWeight } from './types';

package/src/text/styles.ts

@@ -1,54 +1,54 @@
-import { tv } from 'tailwind-variants';
-
-export const textStyle = tv({
-  base: 'text-typography-900 font-normal',
-  variants: {
-    size: {
-      '2xs': 'text-2xs',
-      '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',
-      '6xl': 'text-6xl',
-    },
-    weight: {
-      normal: 'font-normal',
-      medium: 'font-medium',
-      semibold: 'font-semibold',
-      bold: 'font-bold',
-      extrabold: 'font-extrabold',
-    },
-    isTruncated: {
-      true: 'truncate',
-    },
-    bold: {
-      true: 'font-bold',
-    },
-    italic: {
-      true: 'italic',
-    },
-    underline: {
-      true: 'underline',
-    },
-    strikeThrough: {
-      true: 'line-through',
-    },
-    highlight: {
-      true: 'bg-warning-100',
-    },
-    sub: {
-      true: 'text-xs',
-    },
-    sup: {
-      true: 'text-xs',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
+import { tv } from 'tailwind-variants';
+
+export const textStyle = tv({
+  base: 'text-typography-900 font-normal',
+  variants: {
+    size: {
+      '2xs': 'text-2xs',
+      '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',
+      '6xl': 'text-6xl',
+    },
+    weight: {
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+      bold: 'font-bold',
+      extrabold: 'font-extrabold',
+    },
+    isTruncated: {
+      true: 'truncate',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    italic: {
+      true: 'italic',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    highlight: {
+      true: 'bg-warning-100',
+    },
+    sub: {
+      true: 'text-xs',
+    },
+    sup: {
+      true: 'text-xs',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/text/text.tsx

@@ -1,51 +1,51 @@
-import React from 'react';
-import { Text as RNText } from 'react-native';
-import type { TextProps } from './types';
-import { textStyle } from './styles';
-
-export const Text = React.forwardRef<
-  React.ElementRef<typeof RNText>,
-  TextProps
->(
-  (
-    {
-      className,
-      size,
-      weight,
-      isTruncated,
-      bold,
-      italic,
-      underline,
-      strikeThrough,
-      highlight,
-      sub,
-      sup,
-      numberOfLines,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <RNText
-        ref={ref}
-        numberOfLines={isTruncated ? 1 : numberOfLines}
-        className={textStyle({
-          size,
-          weight,
-          isTruncated,
-          bold,
-          italic,
-          underline,
-          strikeThrough,
-          highlight,
-          sub,
-          sup,
-          class: className,
-        })}
-        {...props}
-      />
-    );
-  },
-);
-
-Text.displayName = 'Text';
+import React from 'react';
+import { Text as RNText } from 'react-native';
+import type { TextProps } from './types';
+import { textStyle } from './styles';
+
+export const Text = React.forwardRef<
+  React.ElementRef<typeof RNText>,
+  TextProps
+>(
+  (
+    {
+      className,
+      size,
+      weight,
+      isTruncated,
+      bold,
+      italic,
+      underline,
+      strikeThrough,
+      highlight,
+      sub,
+      sup,
+      numberOfLines,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <RNText
+        ref={ref}
+        numberOfLines={isTruncated ? 1 : numberOfLines}
+        className={textStyle({
+          size,
+          weight,
+          isTruncated,
+          bold,
+          italic,
+          underline,
+          strikeThrough,
+          highlight,
+          sub,
+          sup,
+          class: className,
+        })}
+        {...props}
+      />
+    );
+  },
+);
+
+Text.displayName = 'Text';

package/src/text/types.ts

@@ -1,36 +1,36 @@
-import type { Text as RNText } from 'react-native';
-
-export type TextSize =
-  | '2xs'
-  | 'xs'
-  | 'sm'
-  | 'md'
-  | 'lg'
-  | 'xl'
-  | '2xl'
-  | '3xl'
-  | '4xl'
-  | '5xl'
-  | '6xl';
-
-export type TextWeight =
-  | 'normal'
-  | 'medium'
-  | 'semibold'
-  | 'bold'
-  | 'extrabold';
-
-export interface TextProps
-  extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-  size?: TextSize;
-  weight?: TextWeight;
-  isTruncated?: boolean;
-  bold?: boolean;
-  italic?: boolean;
-  underline?: boolean;
-  strikeThrough?: boolean;
-  highlight?: boolean;
-  sub?: boolean;
-  sup?: boolean;
-}
+import type { Text as RNText } from 'react-native';
+
+export type TextSize =
+  | '2xs'
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl'
+  | '5xl'
+  | '6xl';
+
+export type TextWeight =
+  | 'normal'
+  | 'medium'
+  | 'semibold'
+  | 'bold'
+  | 'extrabold';
+
+export interface TextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+  size?: TextSize;
+  weight?: TextWeight;
+  isTruncated?: boolean;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strikeThrough?: boolean;
+  highlight?: boolean;
+  sub?: boolean;
+  sup?: boolean;
+}

package/src/textarea/index.ts

@@ -1,2 +1,2 @@
-export { Textarea } from './textarea';
-export type { TextareaProps, TextareaVariant, TextareaSize } from './types';
+export { Textarea } from './textarea';
+export type { TextareaProps, TextareaVariant, TextareaSize } from './types';