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

package/src/pagination/pagination.tsx

@@ -1,58 +1,58 @@
-import React from 'react';
-import { View, Pressable, Text } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { PaginationProps, PaginationItemProps, PaginationPreviousProps, PaginationNextProps, PaginationEllipsisProps, PaginationContextValue } from './types';
-import { paginationStyle, paginationItemStyle, paginationItemTextStyle, paginationEllipsisStyle } from './styles';
-
-export const [PaginationProvider, usePaginationContext] = createComponentContext<PaginationContextValue>('Pagination');
-
-export const Pagination = React.forwardRef<React.ElementRef<typeof View>, PaginationProps>(
-  ({ className, size = 'md', children, ...props }, ref) => {
-    return (
-      <PaginationProvider value={{ size }}>
-        <View ref={ref} className={paginationStyle({ class: className })} accessibilityRole="menu" {...props}>{children}</View>
-      </PaginationProvider>
-    );
-  },
-);
-Pagination.displayName = 'Pagination';
-
-export const PaginationItem = React.forwardRef<React.ElementRef<typeof Pressable>, PaginationItemProps>(
-  ({ className, isActive = false, isDisabled, children, ...props }, ref) => {
-    const { size } = usePaginationContext();
-    return (
-      <Pressable ref={ref} disabled={isDisabled} className={paginationItemStyle({ size, isActive, isDisabled, class: className })} accessibilityRole="button" {...props}>
-        {typeof children === 'string' || typeof children === 'number' ? (
-          <Text className={paginationItemTextStyle({ size, isActive })}>{children}</Text>
-        ) : children}
-      </Pressable>
-    );
-  },
-);
-PaginationItem.displayName = 'PaginationItem';
-
-export const PaginationPrevious = React.forwardRef<React.ElementRef<typeof Pressable>, PaginationPreviousProps>(
-  ({ children = '‹', ...props }, ref) => {
-    return <PaginationItem ref={ref} {...props}>{children}</PaginationItem>;
-  },
-);
-PaginationPrevious.displayName = 'PaginationPrevious';
-
-export const PaginationNext = React.forwardRef<React.ElementRef<typeof Pressable>, PaginationNextProps>(
-  ({ children = '›', ...props }, ref) => {
-    return <PaginationItem ref={ref} {...props}>{children}</PaginationItem>;
-  },
-);
-PaginationNext.displayName = 'PaginationNext';
-
-export const PaginationEllipsis = React.forwardRef<React.ElementRef<typeof View>, PaginationEllipsisProps>(
-  ({ className, ...props }, ref) => {
-    const { size } = usePaginationContext();
-    return (
-      <View ref={ref} className={paginationEllipsisStyle({ size, class: className })} {...props}>
-        <Text className={paginationItemTextStyle({ size, isActive: false })}>…</Text>
-      </View>
-    );
-  },
-);
-PaginationEllipsis.displayName = 'PaginationEllipsis';
+import React from 'react';
+import { View, Pressable, Text } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { PaginationProps, PaginationItemProps, PaginationPreviousProps, PaginationNextProps, PaginationEllipsisProps, PaginationContextValue } from './types';
+import { paginationStyle, paginationItemStyle, paginationItemTextStyle, paginationEllipsisStyle } from './styles';
+
+export const [PaginationProvider, usePaginationContext] = createComponentContext<PaginationContextValue>('Pagination');
+
+export const Pagination = React.forwardRef<React.ElementRef<typeof View>, PaginationProps>(
+  ({ className, size = 'md', children, ...props }, ref) => {
+    return (
+      <PaginationProvider value={{ size }}>
+        <View ref={ref} className={paginationStyle({ class: className })} accessibilityRole="menu" {...props}>{children}</View>
+      </PaginationProvider>
+    );
+  },
+);
+Pagination.displayName = 'Pagination';
+
+export const PaginationItem = React.forwardRef<React.ElementRef<typeof Pressable>, PaginationItemProps>(
+  ({ className, isActive = false, isDisabled, children, ...props }, ref) => {
+    const { size } = usePaginationContext();
+    return (
+      <Pressable ref={ref} disabled={isDisabled} className={paginationItemStyle({ size, isActive, isDisabled, class: className })} accessibilityRole="button" {...props}>
+        {typeof children === 'string' || typeof children === 'number' ? (
+          <Text className={paginationItemTextStyle({ size, isActive })}>{children}</Text>
+        ) : children}
+      </Pressable>
+    );
+  },
+);
+PaginationItem.displayName = 'PaginationItem';
+
+export const PaginationPrevious = React.forwardRef<React.ElementRef<typeof Pressable>, PaginationPreviousProps>(
+  ({ children = '‹', ...props }, ref) => {
+    return <PaginationItem ref={ref} {...props}>{children}</PaginationItem>;
+  },
+);
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+export const PaginationNext = React.forwardRef<React.ElementRef<typeof Pressable>, PaginationNextProps>(
+  ({ children = '›', ...props }, ref) => {
+    return <PaginationItem ref={ref} {...props}>{children}</PaginationItem>;
+  },
+);
+PaginationNext.displayName = 'PaginationNext';
+
+export const PaginationEllipsis = React.forwardRef<React.ElementRef<typeof View>, PaginationEllipsisProps>(
+  ({ className, ...props }, ref) => {
+    const { size } = usePaginationContext();
+    return (
+      <View ref={ref} className={paginationEllipsisStyle({ size, class: className })} {...props}>
+        <Text className={paginationItemTextStyle({ size, isActive: false })}>…</Text>
+      </View>
+    );
+  },
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';

package/src/pagination/styles.ts

@@ -1,27 +1,27 @@
-import { tv } from 'tailwind-variants';
-
-export const paginationStyle = tv({ base: 'flex-row items-center gap-1', variants: {} });
-export const paginationItemStyle = tv({
-  base: 'items-center justify-center rounded-lg',
-  variants: {
-    size: { sm: 'h-8 w-8', md: 'h-10 w-10', lg: 'h-12 w-12' },
-    isActive: { true: 'bg-primary-500', false: 'bg-transparent' },
-    isDisabled: { true: 'opacity-50' },
-  },
-  defaultVariants: { size: 'md', isActive: false },
-});
-export const paginationItemTextStyle = tv({
-  base: 'font-medium',
-  variants: {
-    size: { sm: 'text-xs', md: 'text-sm', lg: 'text-base' },
-    isActive: { true: 'text-typography-0', false: 'text-typography-700' },
-  },
-  defaultVariants: { size: 'md', isActive: false },
-});
-export const paginationEllipsisStyle = tv({
-  base: 'items-center justify-center',
-  variants: {
-    size: { sm: 'h-8 w-8', md: 'h-10 w-10', lg: 'h-12 w-12' },
-  },
-  defaultVariants: { size: 'md' },
-});
+import { tv } from 'tailwind-variants';
+
+export const paginationStyle = tv({ base: 'flex-row items-center gap-1', variants: {} });
+export const paginationItemStyle = tv({
+  base: 'items-center justify-center rounded-lg',
+  variants: {
+    size: { sm: 'h-8 w-8', md: 'h-10 w-10', lg: 'h-12 w-12' },
+    isActive: { true: 'bg-primary-500', false: 'bg-transparent' },
+    isDisabled: { true: 'opacity-50' },
+  },
+  defaultVariants: { size: 'md', isActive: false },
+});
+export const paginationItemTextStyle = tv({
+  base: 'font-medium',
+  variants: {
+    size: { sm: 'text-xs', md: 'text-sm', lg: 'text-base' },
+    isActive: { true: 'text-typography-0', false: 'text-typography-700' },
+  },
+  defaultVariants: { size: 'md', isActive: false },
+});
+export const paginationEllipsisStyle = tv({
+  base: 'items-center justify-center',
+  variants: {
+    size: { sm: 'h-8 w-8', md: 'h-10 w-10', lg: 'h-12 w-12' },
+  },
+  defaultVariants: { size: 'md' },
+});

package/src/pagination/types.ts

@@ -1,19 +1,19 @@
-import type { View, Pressable, Text as RNText } from 'react-native';
-
-export type PaginationSize = 'sm' | 'md' | 'lg';
-
-export interface PaginationContextValue { size: PaginationSize; }
-
-export interface PaginationProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  size?: PaginationSize;
-}
-export interface PaginationItemProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-  isActive?: boolean;
-  isDisabled?: boolean;
-  children: React.ReactNode;
-}
-export interface PaginationPreviousProps extends Omit<PaginationItemProps, 'isActive'> {}
-export interface PaginationNextProps extends Omit<PaginationItemProps, 'isActive'> {}
-export interface PaginationEllipsisProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+import type { View, Pressable, Text as RNText } from 'react-native';
+
+export type PaginationSize = 'sm' | 'md' | 'lg';
+
+export interface PaginationContextValue { size: PaginationSize; }
+
+export interface PaginationProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  size?: PaginationSize;
+}
+export interface PaginationItemProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  isActive?: boolean;
+  isDisabled?: boolean;
+  children: React.ReactNode;
+}
+export interface PaginationPreviousProps extends Omit<PaginationItemProps, 'isActive'> {}
+export interface PaginationNextProps extends Omit<PaginationItemProps, 'isActive'> {}
+export interface PaginationEllipsisProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }

package/src/password-input/index.ts

@@ -1,14 +1,14 @@
-export {
-  PasswordInput,
-  PasswordInputProvider,
-  usePasswordInputContext,
-  PasswordInputField,
-  PasswordInputToggle,
-} from './password-input';
-export type {
-  PasswordInputProps,
-  PasswordInputFieldProps,
-  PasswordInputToggleProps,
-  PasswordInputSize,
-  PasswordInputContextValue,
-} from './types';
+export {
+  PasswordInput,
+  PasswordInputProvider,
+  usePasswordInputContext,
+  PasswordInputField,
+  PasswordInputToggle,
+} from './password-input';
+export type {
+  PasswordInputProps,
+  PasswordInputFieldProps,
+  PasswordInputToggleProps,
+  PasswordInputSize,
+  PasswordInputContextValue,
+} from './types';

package/src/password-input/password-input.tsx

@@ -1,79 +1,79 @@
-import React, { useState } from 'react';
-import { View, TextInput, Pressable, Text } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type {
-  PasswordInputProps,
-  PasswordInputFieldProps,
-  PasswordInputToggleProps,
-  PasswordInputContextValue,
-} from './types';
-import {
-  passwordInputStyle,
-  passwordInputFieldStyle,
-  passwordInputToggleStyle,
-  passwordInputToggleTextStyle,
-} from './styles';
-
-export const [PasswordInputProvider, usePasswordInputContext] =
-  createComponentContext<PasswordInputContextValue>('PasswordInput');
-
-export const PasswordInput = React.forwardRef<
-  React.ElementRef<typeof View>,
-  PasswordInputProps
->(({ className, size = 'md', isDisabled = false, children, ...props }, ref) => {
-  const [isVisible, setIsVisible] = useState(false);
-  return (
-    <PasswordInputProvider
-      value={{ isVisible, onToggle: () => setIsVisible(!isVisible), size }}
-    >
-      <View
-        ref={ref}
-        className={passwordInputStyle({ size, isDisabled, class: className })}
-        {...props}
-      >
-        {children}
-      </View>
-    </PasswordInputProvider>
-  );
-});
-PasswordInput.displayName = 'PasswordInput';
-
-export const PasswordInputField = React.forwardRef<
-  React.ElementRef<typeof TextInput>,
-  PasswordInputFieldProps
->(({ className, ...props }, ref) => {
-  const { isVisible, size } = usePasswordInputContext();
-  return (
-    <TextInput
-      ref={ref}
-      secureTextEntry={!isVisible}
-      className={passwordInputFieldStyle({ size, class: className })}
-      {...props}
-    />
-  );
-});
-PasswordInputField.displayName = 'PasswordInputField';
-
-export const PasswordInputToggle = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  PasswordInputToggleProps
->(({ className, children, ...props }, ref) => {
-  const { isVisible, onToggle } = usePasswordInputContext();
-  return (
-    <Pressable
-      ref={ref}
-      onPress={onToggle}
-      className={passwordInputToggleStyle({ class: className })}
-      accessibilityRole="button"
-      accessibilityLabel={isVisible ? 'Hide password' : 'Show password'}
-      {...props}
-    >
-      {children ?? (
-        <Text className={passwordInputToggleTextStyle({})}>
-          {isVisible ? 'Hide' : 'Show'}
-        </Text>
-      )}
-    </Pressable>
-  );
-});
-PasswordInputToggle.displayName = 'PasswordInputToggle';
+import React, { useState } from 'react';
+import { View, TextInput, Pressable, Text } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type {
+  PasswordInputProps,
+  PasswordInputFieldProps,
+  PasswordInputToggleProps,
+  PasswordInputContextValue,
+} from './types';
+import {
+  passwordInputStyle,
+  passwordInputFieldStyle,
+  passwordInputToggleStyle,
+  passwordInputToggleTextStyle,
+} from './styles';
+
+export const [PasswordInputProvider, usePasswordInputContext] =
+  createComponentContext<PasswordInputContextValue>('PasswordInput');
+
+export const PasswordInput = React.forwardRef<
+  React.ElementRef<typeof View>,
+  PasswordInputProps
+>(({ className, size = 'md', isDisabled = false, children, ...props }, ref) => {
+  const [isVisible, setIsVisible] = useState(false);
+  return (
+    <PasswordInputProvider
+      value={{ isVisible, onToggle: () => setIsVisible(!isVisible), size }}
+    >
+      <View
+        ref={ref}
+        className={passwordInputStyle({ size, isDisabled, class: className })}
+        {...props}
+      >
+        {children}
+      </View>
+    </PasswordInputProvider>
+  );
+});
+PasswordInput.displayName = 'PasswordInput';
+
+export const PasswordInputField = React.forwardRef<
+  React.ElementRef<typeof TextInput>,
+  PasswordInputFieldProps
+>(({ className, ...props }, ref) => {
+  const { isVisible, size } = usePasswordInputContext();
+  return (
+    <TextInput
+      ref={ref}
+      secureTextEntry={!isVisible}
+      className={passwordInputFieldStyle({ size, class: className })}
+      {...props}
+    />
+  );
+});
+PasswordInputField.displayName = 'PasswordInputField';
+
+export const PasswordInputToggle = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  PasswordInputToggleProps
+>(({ className, children, ...props }, ref) => {
+  const { isVisible, onToggle } = usePasswordInputContext();
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onToggle}
+      className={passwordInputToggleStyle({ class: className })}
+      accessibilityRole="button"
+      accessibilityLabel={isVisible ? 'Hide password' : 'Show password'}
+      {...props}
+    >
+      {children ?? (
+        <Text className={passwordInputToggleTextStyle({})}>
+          {isVisible ? 'Hide' : 'Show'}
+        </Text>
+      )}
+    </Pressable>
+  );
+});
+PasswordInputToggle.displayName = 'PasswordInputToggle';

package/src/password-input/styles.ts

@@ -1,25 +1,25 @@
-import { tv } from 'tailwind-variants';
-
-export const passwordInputStyle = tv({
-  base: 'flex-row items-center border border-outline-300 rounded-lg overflow-hidden bg-background-0',
-  variants: {
-    size: { sm: 'h-8', md: 'h-10', lg: 'h-12' },
-    isDisabled: { true: 'opacity-50' },
-  },
-  defaultVariants: { size: 'md' },
-});
-export const passwordInputFieldStyle = tv({
-  base: 'flex-1 text-typography-900 px-3',
-  variants: {
-    size: { sm: 'text-sm', md: 'text-base', lg: 'text-lg' },
-  },
-  defaultVariants: { size: 'md' },
-});
-export const passwordInputToggleStyle = tv({
-  base: 'items-center justify-center px-3',
-  variants: {},
-});
-export const passwordInputToggleTextStyle = tv({
-  base: 'text-xs font-medium text-typography-500',
-  variants: {},
-});
+import { tv } from 'tailwind-variants';
+
+export const passwordInputStyle = tv({
+  base: 'flex-row items-center border border-outline-300 rounded-lg overflow-hidden bg-background-0',
+  variants: {
+    size: { sm: 'h-8', md: 'h-10', lg: 'h-12' },
+    isDisabled: { true: 'opacity-50' },
+  },
+  defaultVariants: { size: 'md' },
+});
+export const passwordInputFieldStyle = tv({
+  base: 'flex-1 text-typography-900 px-3',
+  variants: {
+    size: { sm: 'text-sm', md: 'text-base', lg: 'text-lg' },
+  },
+  defaultVariants: { size: 'md' },
+});
+export const passwordInputToggleStyle = tv({
+  base: 'items-center justify-center px-3',
+  variants: {},
+});
+export const passwordInputToggleTextStyle = tv({
+  base: 'text-xs font-medium text-typography-500',
+  variants: {},
+});

package/src/password-input/types.ts

@@ -1,24 +1,24 @@
-import type { View, TextInput, Pressable } from 'react-native';
-
-export type PasswordInputSize = 'sm' | 'md' | 'lg';
-
-export interface PasswordInputContextValue {
-  isVisible: boolean;
-  onToggle: () => void;
-  size: PasswordInputSize;
-}
-
-export interface PasswordInputProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  size?: PasswordInputSize;
-  isDisabled?: boolean;
-}
-export interface PasswordInputFieldProps
-  extends React.ComponentPropsWithoutRef<typeof TextInput> {
-  className?: string;
-}
-export interface PasswordInputToggleProps
-  extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-}
+import type { View, TextInput, Pressable } from 'react-native';
+
+export type PasswordInputSize = 'sm' | 'md' | 'lg';
+
+export interface PasswordInputContextValue {
+  isVisible: boolean;
+  onToggle: () => void;
+  size: PasswordInputSize;
+}
+
+export interface PasswordInputProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  size?: PasswordInputSize;
+  isDisabled?: boolean;
+}
+export interface PasswordInputFieldProps
+  extends React.ComponentPropsWithoutRef<typeof TextInput> {
+  className?: string;
+}
+export interface PasswordInputToggleProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}

package/src/pin-input/index.ts

@@ -1,12 +1,12 @@
-export {
-  PinInput,
-  PinInputProvider,
-  usePinInputContext,
-  PinInputField,
-} from './pin-input';
-export type {
-  PinInputProps,
-  PinInputFieldProps,
-  PinInputSize,
-  PinInputContextValue,
-} from './types';
+export {
+  PinInput,
+  PinInputProvider,
+  usePinInputContext,
+  PinInputField,
+} from './pin-input';
+export type {
+  PinInputProps,
+  PinInputFieldProps,
+  PinInputSize,
+  PinInputContextValue,
+} from './types';