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

package/src/tabs/tab.tsx

@@ -1,56 +1,56 @@
-import React from 'react';
-import { Pressable } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import { useTabsContext } from './tabs';
-import type { TabProps } from './types';
-import { tabStyle } from './styles';
-
-export interface TabContextValue {
-  isActive: boolean;
-}
-
-export const [TabProvider, useTabContext] =
-  createComponentContext<TabContextValue>('Tab');
-
-export const Tab = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  TabProps
->(({ className, _index = 0, children, onPress, ...props }, ref) => {
-  const { selectedIndex, onChange, variant, size, isFitted } =
-    useTabsContext();
-
-  const isActive = _index === selectedIndex;
-
-  const handlePress = React.useCallback(
-    (e: any) => {
-      onChange(_index);
-      onPress?.(e);
-    },
-    [_index, onChange, onPress],
-  );
-
-  return (
-    <TabProvider value={{ isActive }}>
-      <Pressable
-        ref={ref}
-        className={tabStyle({
-          variant,
-          size,
-          active: isActive,
-          isFitted,
-          class: className,
-        })}
-        onPress={handlePress}
-        accessibilityRole="tab"
-        accessibilityState={{ selected: isActive }}
-        {...props}
-      >
-        {typeof children === 'function'
-          ? children({ pressed: false } as any)
-          : children}
-      </Pressable>
-    </TabProvider>
-  );
-});
-
-Tab.displayName = 'Tab';
+import React from 'react';
+import { Pressable } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import { useTabsContext } from './tabs';
+import type { TabProps } from './types';
+import { tabStyle } from './styles';
+
+export interface TabContextValue {
+  isActive: boolean;
+}
+
+export const [TabProvider, useTabContext] =
+  createComponentContext<TabContextValue>('Tab');
+
+export const Tab = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  TabProps
+>(({ className, _index = 0, children, onPress, ...props }, ref) => {
+  const { selectedIndex, onChange, variant, size, isFitted } =
+    useTabsContext();
+
+  const isActive = _index === selectedIndex;
+
+  const handlePress = React.useCallback(
+    (e: any) => {
+      onChange(_index);
+      onPress?.(e);
+    },
+    [_index, onChange, onPress],
+  );
+
+  return (
+    <TabProvider value={{ isActive }}>
+      <Pressable
+        ref={ref}
+        className={tabStyle({
+          variant,
+          size,
+          active: isActive,
+          isFitted,
+          class: className,
+        })}
+        onPress={handlePress}
+        accessibilityRole="tab"
+        accessibilityState={{ selected: isActive }}
+        {...props}
+      >
+        {typeof children === 'function'
+          ? children({ pressed: false } as any)
+          : children}
+      </Pressable>
+    </TabProvider>
+  );
+});
+
+Tab.displayName = 'Tab';

package/src/tabs/tabs.tsx

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

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

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

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