@wireservers-ui/react-natives 0.1.0

package/src/tabs/tabs.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { TabsProps, TabsContextValue } from './types';
+import { tabsStyle } from './styles';
+
+export const [TabsProvider, useTabsContext] =
+  createComponentContext<TabsContextValue>('Tabs');
+
+export const Tabs = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TabsProps
+>(
+  (
+    {
+      className,
+      defaultIndex = 0,
+      index: controlledIndex,
+      onChange: onChangeProp,
+      variant = 'underlined',
+      size = 'md',
+      orientation = 'horizontal',
+      isFitted = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [uncontrolledIndex, setUncontrolledIndex] =
+      React.useState(defaultIndex);
+
+    const isControlled = controlledIndex !== undefined;
+    const selectedIndex = isControlled ? controlledIndex : uncontrolledIndex;
+
+    const onChange = React.useCallback(
+      (newIndex: number) => {
+        if (!isControlled) {
+          setUncontrolledIndex(newIndex);
+        }
+        onChangeProp?.(newIndex);
+      },
+      [isControlled, onChangeProp],
+    );
+
+    const contextValue = React.useMemo<TabsContextValue>(
+      () => ({
+        selectedIndex,
+        onChange,
+        variant,
+        size,
+        orientation,
+        isFitted,
+      }),
+      [selectedIndex, onChange, variant, size, orientation, isFitted],
+    );
+
+    return (
+      <TabsProvider value={contextValue}>
+        <View
+          ref={ref}
+          className={tabsStyle({ class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </TabsProvider>
+    );
+  },
+);
+
+Tabs.displayName = 'Tabs';

package/src/tabs/types.ts

@@ -0,0 +1,53 @@
+import type { View, Pressable, Text as RNText } from 'react-native';
+
+export type TabsVariant = 'underlined' | 'outline' | 'rounded';
+export type TabsSize = 'sm' | 'md' | 'lg';
+
+export interface TabsContextValue {
+  selectedIndex: number;
+  onChange: (index: number) => void;
+  variant: TabsVariant;
+  size: TabsSize;
+  orientation: 'horizontal' | 'vertical';
+  isFitted: boolean;
+}
+
+export interface TabsProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  defaultIndex?: number;
+  index?: number;
+  onChange?: (index: number) => void;
+  variant?: TabsVariant;
+  size?: TabsSize;
+  orientation?: 'horizontal' | 'vertical';
+  isFitted?: boolean;
+}
+
+export interface TabListProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface TabProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  /** @internal Injected by TabList */
+  _index?: number;
+}
+
+export interface TabTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface TabPanelsProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface TabPanelProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  index: number;
+}

package/src/tag/index.ts

@@ -0,0 +1,14 @@
+export { Tag, TagProvider, useTagContext } from './tag';
+export { TagText } from './tag-text';
+export { TagIcon } from './tag-icon';
+export { TagCloseButton } from './tag-close-button';
+export type {
+  TagProps,
+  TagTextProps,
+  TagIconProps,
+  TagCloseButtonProps,
+  TagAction,
+  TagVariant,
+  TagSize,
+  TagContextValue,
+} from './types';

package/src/tag/styles.ts

@@ -0,0 +1,115 @@
+import { tv } from 'tailwind-variants';
+
+export const tagStyle = tv({
+  base: 'flex-row items-center rounded-full',
+  variants: {
+    action: {
+      primary: '', secondary: '', error: '', success: '', warning: '', info: '', muted: '',
+    },
+    variant: {
+      solid: '', outline: 'bg-transparent border', subtle: '',
+    },
+    size: {
+      sm: 'px-2 py-0.5 gap-1',
+      md: 'px-2.5 py-1 gap-1.5',
+      lg: 'px-3 py-1.5 gap-2',
+    },
+    isDisabled: {
+      true: 'opacity-50',
+    },
+  },
+  compoundVariants: [
+    { action: 'primary', variant: 'solid', class: 'bg-primary-500' },
+    { action: 'primary', variant: 'outline', class: 'border-primary-300 bg-transparent' },
+    { action: 'primary', variant: 'subtle', class: 'bg-primary-50' },
+    { action: 'secondary', variant: 'solid', class: 'bg-secondary-500' },
+    { action: 'secondary', variant: 'outline', class: 'border-secondary-300 bg-transparent' },
+    { action: 'secondary', variant: 'subtle', class: 'bg-secondary-50' },
+    { action: 'error', variant: 'solid', class: 'bg-error-500' },
+    { action: 'error', variant: 'outline', class: 'border-error-300 bg-transparent' },
+    { action: 'error', variant: 'subtle', class: 'bg-error-50' },
+    { action: 'success', variant: 'solid', class: 'bg-success-500' },
+    { action: 'success', variant: 'outline', class: 'border-success-300 bg-transparent' },
+    { action: 'success', variant: 'subtle', class: 'bg-success-50' },
+    { action: 'warning', variant: 'solid', class: 'bg-warning-500' },
+    { action: 'warning', variant: 'outline', class: 'border-warning-300 bg-transparent' },
+    { action: 'warning', variant: 'subtle', class: 'bg-warning-50' },
+    { action: 'info', variant: 'solid', class: 'bg-info-500' },
+    { action: 'info', variant: 'outline', class: 'border-info-300 bg-transparent' },
+    { action: 'info', variant: 'subtle', class: 'bg-info-50' },
+    { action: 'muted', variant: 'solid', class: 'bg-background-300' },
+    { action: 'muted', variant: 'outline', class: 'border-outline-300 bg-transparent' },
+    { action: 'muted', variant: 'subtle', class: 'bg-background-50' },
+  ],
+  defaultVariants: {
+    action: 'info',
+    variant: 'subtle',
+    size: 'md',
+  },
+});
+
+export const tagTextStyle = tv({
+  base: 'font-medium',
+  variants: {
+    action: {
+      primary: '', secondary: '', error: '', success: '', warning: '', info: '', muted: '',
+    },
+    variant: {
+      solid: 'text-typography-0', outline: '', subtle: '',
+    },
+    size: {
+      sm: 'text-2xs',
+      md: 'text-xs',
+      lg: 'text-sm',
+    },
+  },
+  compoundVariants: [
+    { action: 'primary', variant: 'outline', class: 'text-primary-600' },
+    { action: 'primary', variant: 'subtle', class: 'text-primary-700' },
+    { action: 'secondary', variant: 'outline', class: 'text-secondary-600' },
+    { action: 'secondary', variant: 'subtle', class: 'text-secondary-700' },
+    { action: 'error', variant: 'outline', class: 'text-error-600' },
+    { action: 'error', variant: 'subtle', class: 'text-error-700' },
+    { action: 'success', variant: 'outline', class: 'text-success-600' },
+    { action: 'success', variant: 'subtle', class: 'text-success-700' },
+    { action: 'warning', variant: 'outline', class: 'text-warning-600' },
+    { action: 'warning', variant: 'subtle', class: 'text-warning-700' },
+    { action: 'info', variant: 'outline', class: 'text-info-600' },
+    { action: 'info', variant: 'subtle', class: 'text-info-700' },
+    { action: 'muted', variant: 'outline', class: 'text-typography-600' },
+    { action: 'muted', variant: 'subtle', class: 'text-typography-700' },
+  ],
+  defaultVariants: {
+    action: 'info',
+    variant: 'subtle',
+    size: 'md',
+  },
+});
+
+export const tagIconStyle = tv({
+  base: '',
+  variants: {
+    size: {
+      sm: 'h-3 w-3',
+      md: 'h-3.5 w-3.5',
+      lg: 'h-4 w-4',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const tagCloseButtonStyle = tv({
+  base: 'rounded-full items-center justify-center',
+  variants: {
+    size: {
+      sm: 'h-3.5 w-3.5',
+      md: 'h-4 w-4',
+      lg: 'h-5 w-5',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/tag/tag-close-button.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Pressable, Text } from 'react-native';
+import { useTagContext } from './tag';
+import type { TagCloseButtonProps } from './types';
+import { tagCloseButtonStyle } from './styles';
+
+export const TagCloseButton = React.forwardRef<any, TagCloseButtonProps>(
+  ({ className, onPress, ...props }, ref) => {
+    const { size } = useTagContext();
+
+    return (
+      <Pressable
+        ref={ref}
+        onPress={onPress}
+        className={tagCloseButtonStyle({ size, class: className })}
+        accessibilityRole="button"
+        accessibilityLabel="Remove"
+        {...props}
+      >
+        <Text style={{ fontSize: 10, lineHeight: 12 }}>&#x2715;</Text>
+      </Pressable>
+    );
+  },
+);
+
+TagCloseButton.displayName = 'TagCloseButton';

package/src/tag/tag-icon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTagContext } from './tag';
+import type { TagIconProps } from './types';
+import { tagIconStyle } from './styles';
+
+export const TagIcon = React.forwardRef<any, TagIconProps>(
+  ({ as: AsComp, className, ...props }, ref) => {
+    const { size } = useTagContext();
+
+    return (
+      <AsComp
+        ref={ref}
+        className={tagIconStyle({ size, class: className })}
+        {...props}
+      />
+    );
+  },
+);
+
+TagIcon.displayName = 'TagIcon';

package/src/tag/tag-text.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { useTagContext } from './tag';
+import type { TagTextProps } from './types';
+import { tagTextStyle } from './styles';
+
+export const TagText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  TagTextProps
+>(({ className, ...props }, ref) => {
+  const { action, variant, size } = useTagContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={tagTextStyle({ action, variant, size, class: className })}
+      {...props}
+    />
+  );
+});
+
+TagText.displayName = 'TagText';

package/src/tag/tag.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { TagProps, TagContextValue } from './types';
+import { tagStyle } from './styles';
+
+export const [TagProvider, useTagContext] =
+  createComponentContext<TagContextValue>('Tag');
+
+export const Tag = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TagProps
+>(
+  (
+    {
+      action = 'info',
+      variant = 'subtle',
+      size = 'md',
+      isDisabled,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <TagProvider value={{ action, variant, size }}>
+        <View
+          ref={ref}
+          className={tagStyle({ action, variant, size, isDisabled, class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </TagProvider>
+    );
+  },
+);
+
+Tag.displayName = 'Tag';

package/src/tag/types.ts

@@ -0,0 +1,33 @@
+import type { View, Text as RNText } from 'react-native';
+
+export type TagAction = 'primary' | 'secondary' | 'error' | 'success' | 'warning' | 'info' | 'muted';
+export type TagVariant = 'solid' | 'outline' | 'subtle';
+export type TagSize = 'sm' | 'md' | 'lg';
+
+export interface TagContextValue {
+  action: TagAction;
+  variant: TagVariant;
+  size: TagSize;
+}
+
+export interface TagProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  action?: TagAction;
+  variant?: TagVariant;
+  size?: TagSize;
+  isDisabled?: boolean;
+}
+
+export interface TagTextProps extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface TagIconProps {
+  as: React.ElementType;
+  className?: string;
+}
+
+export interface TagCloseButtonProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  onPress?: () => void;
+}

package/src/tags-input/index.ts

@@ -0,0 +1,18 @@
+export {
+  TagsInput,
+  TagsInputProvider,
+  useTagsInputContext,
+  TagsInputField,
+  TagsInputTag,
+  TagsInputTagText,
+  TagsInputTagCloseButton,
+} from './tags-input';
+export type {
+  TagsInputProps,
+  TagsInputFieldProps,
+  TagsInputTagProps,
+  TagsInputTagTextProps,
+  TagsInputTagCloseButtonProps,
+  TagsInputSize,
+  TagsInputContextValue,
+} from './types';

package/src/tags-input/styles.ts

@@ -0,0 +1,29 @@
+import { tv } from 'tailwind-variants';
+
+export const tagsInputStyle = tv({
+  base: 'flex-row flex-wrap items-center border border-outline-300 rounded-lg bg-background-0 p-1.5 gap-1.5',
+  variants: {
+    size: { sm: 'min-h-[32px]', md: 'min-h-[40px]', lg: 'min-h-[48px]' },
+    isDisabled: { true: 'opacity-50' },
+  },
+  defaultVariants: { size: 'md' },
+});
+export const tagsInputFieldStyle = tv({
+  base: 'flex-1 min-w-[80px] text-typography-900 px-1',
+  variants: {
+    size: { sm: 'text-sm', md: 'text-base', lg: 'text-lg' },
+  },
+  defaultVariants: { size: 'md' },
+});
+export const tagsInputTagStyle = tv({
+  base: 'flex-row items-center bg-primary-50 rounded-md px-2 py-0.5 gap-1',
+  variants: {},
+});
+export const tagsInputTagTextStyle = tv({
+  base: 'text-xs font-medium text-primary-700',
+  variants: {},
+});
+export const tagsInputTagCloseButtonStyle = tv({
+  base: 'rounded-full',
+  variants: {},
+});

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

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

package/src/tags-input/types.ts

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

package/src/text/index.ts

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