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

package/src/rating/types.ts

@@ -1,29 +1,29 @@
-import type { View, Pressable } from 'react-native';
-
-export type RatingSize = 'sm' | 'md' | 'lg' | 'xl';
-
-export interface RatingContextValue {
-  value: number;
-  max: number;
-  size: RatingSize;
-  isReadOnly: boolean;
-  onRate: (value: number) => void;
-}
-
-export interface RatingProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  value?: number;
-  defaultValue?: number;
-  max?: number;
-  size?: RatingSize;
-  isReadOnly?: boolean;
-  onChange?: (value: number) => void;
-}
-export interface RatingIconProps
-  extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-  index: number;
-  filledIcon?: React.ElementType;
-  emptyIcon?: React.ElementType;
-}
+import type { View, Pressable } from 'react-native';
+
+export type RatingSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface RatingContextValue {
+  value: number;
+  max: number;
+  size: RatingSize;
+  isReadOnly: boolean;
+  onRate: (value: number) => void;
+}
+
+export interface RatingProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  value?: number;
+  defaultValue?: number;
+  max?: number;
+  size?: RatingSize;
+  isReadOnly?: boolean;
+  onChange?: (value: number) => void;
+}
+export interface RatingIconProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  index: number;
+  filledIcon?: React.ElementType;
+  emptyIcon?: React.ElementType;
+}

package/src/search-input/index.ts

@@ -1,16 +1,16 @@
-export {
-  SearchInput,
-  SearchInputProvider,
-  useSearchInputContext,
-  SearchInputField,
-  SearchInputIcon,
-  SearchInputClearButton,
-} from './search-input';
-export type {
-  SearchInputProps,
-  SearchInputFieldProps,
-  SearchInputIconProps,
-  SearchInputClearButtonProps,
-  SearchInputSize,
-  SearchInputContextValue,
-} from './types';
+export {
+  SearchInput,
+  SearchInputProvider,
+  useSearchInputContext,
+  SearchInputField,
+  SearchInputIcon,
+  SearchInputClearButton,
+} from './search-input';
+export type {
+  SearchInputProps,
+  SearchInputFieldProps,
+  SearchInputIconProps,
+  SearchInputClearButtonProps,
+  SearchInputSize,
+  SearchInputContextValue,
+} from './types';

package/src/search-input/search-input.tsx

@@ -1,119 +1,119 @@
-import React, { useState } from 'react';
-import { View, TextInput, Pressable, Text } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type {
-  SearchInputProps,
-  SearchInputFieldProps,
-  SearchInputIconProps,
-  SearchInputClearButtonProps,
-  SearchInputContextValue,
-} from './types';
-import {
-  searchInputStyle,
-  searchInputFieldStyle,
-  searchInputIconStyle,
-  searchInputClearButtonStyle,
-} from './styles';
-
-export const [SearchInputProvider, useSearchInputContext] =
-  createComponentContext<SearchInputContextValue>('SearchInput');
-
-export const SearchInput = React.forwardRef<
-  React.ElementRef<typeof View>,
-  SearchInputProps
->(
-  (
-    {
-      className,
-      size = 'md',
-      value: controlledValue,
-      onChangeText,
-      isDisabled = false,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const [internalValue, setInternalValue] = useState('');
-    const value =
-      controlledValue !== undefined ? controlledValue : internalValue;
-    const handleChange = (text: string) => {
-      setInternalValue(text);
-      onChangeText?.(text);
-    };
-    const onClear = () => handleChange('');
-    return (
-      <SearchInputProvider value={{ size, value, onChange: handleChange, onClear }}>
-        <View
-          ref={ref}
-          className={searchInputStyle({ size, isDisabled, class: className })}
-          {...props}
-        >
-          {children}
-        </View>
-      </SearchInputProvider>
-    );
-  },
-);
-SearchInput.displayName = 'SearchInput';
-
-export const SearchInputField = React.forwardRef<
-  React.ElementRef<typeof TextInput>,
-  SearchInputFieldProps
->(({ className, ...props }, ref) => {
-  const { size, value, onChange } = useSearchInputContext();
-  return (
-    <TextInput
-      ref={ref}
-      placeholder="Search..."
-      value={value}
-      onChangeText={onChange}
-      className={searchInputFieldStyle({ size, class: className })}
-      {...props}
-    />
-  );
-});
-SearchInputField.displayName = 'SearchInputField';
-
-export const SearchInputIcon = React.forwardRef<any, SearchInputIconProps>(
-  ({ as: AsComp, className, ...props }, ref) => {
-    const { size } = useSearchInputContext();
-    if (AsComp)
-      return (
-        <AsComp
-          ref={ref}
-          className={searchInputIconStyle({ size, class: className })}
-          {...props}
-        />
-      );
-    return (
-      <Text className={searchInputIconStyle({ size, class: className })}>
-        {'\uD83D\uDD0D'}
-      </Text>
-    );
-  },
-);
-SearchInputIcon.displayName = 'SearchInputIcon';
-
-export const SearchInputClearButton = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  SearchInputClearButtonProps
->(({ className, children, ...props }, ref) => {
-  const { value, onClear } = useSearchInputContext();
-  if (!value) return null;
-  return (
-    <Pressable
-      ref={ref}
-      onPress={onClear}
-      className={searchInputClearButtonStyle({ class: className })}
-      accessibilityRole="button"
-      accessibilityLabel="Clear search"
-      {...props}
-    >
-      {children ?? (
-        <Text style={{ fontSize: 12, color: '#9CA3AF' }}>{'\u2715'}</Text>
-      )}
-    </Pressable>
-  );
-});
-SearchInputClearButton.displayName = 'SearchInputClearButton';
+import React, { useState } from 'react';
+import { View, TextInput, Pressable, Text } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type {
+  SearchInputProps,
+  SearchInputFieldProps,
+  SearchInputIconProps,
+  SearchInputClearButtonProps,
+  SearchInputContextValue,
+} from './types';
+import {
+  searchInputStyle,
+  searchInputFieldStyle,
+  searchInputIconStyle,
+  searchInputClearButtonStyle,
+} from './styles';
+
+export const [SearchInputProvider, useSearchInputContext] =
+  createComponentContext<SearchInputContextValue>('SearchInput');
+
+export const SearchInput = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SearchInputProps
+>(
+  (
+    {
+      className,
+      size = 'md',
+      value: controlledValue,
+      onChangeText,
+      isDisabled = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [internalValue, setInternalValue] = useState('');
+    const value =
+      controlledValue !== undefined ? controlledValue : internalValue;
+    const handleChange = (text: string) => {
+      setInternalValue(text);
+      onChangeText?.(text);
+    };
+    const onClear = () => handleChange('');
+    return (
+      <SearchInputProvider value={{ size, value, onChange: handleChange, onClear }}>
+        <View
+          ref={ref}
+          className={searchInputStyle({ size, isDisabled, class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </SearchInputProvider>
+    );
+  },
+);
+SearchInput.displayName = 'SearchInput';
+
+export const SearchInputField = React.forwardRef<
+  React.ElementRef<typeof TextInput>,
+  SearchInputFieldProps
+>(({ className, ...props }, ref) => {
+  const { size, value, onChange } = useSearchInputContext();
+  return (
+    <TextInput
+      ref={ref}
+      placeholder="Search..."
+      value={value}
+      onChangeText={onChange}
+      className={searchInputFieldStyle({ size, class: className })}
+      {...props}
+    />
+  );
+});
+SearchInputField.displayName = 'SearchInputField';
+
+export const SearchInputIcon = React.forwardRef<any, SearchInputIconProps>(
+  ({ as: AsComp, className, ...props }, ref) => {
+    const { size } = useSearchInputContext();
+    if (AsComp)
+      return (
+        <AsComp
+          ref={ref}
+          className={searchInputIconStyle({ size, class: className })}
+          {...props}
+        />
+      );
+    return (
+      <Text className={searchInputIconStyle({ size, class: className })}>
+        {'\uD83D\uDD0D'}
+      </Text>
+    );
+  },
+);
+SearchInputIcon.displayName = 'SearchInputIcon';
+
+export const SearchInputClearButton = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  SearchInputClearButtonProps
+>(({ className, children, ...props }, ref) => {
+  const { value, onClear } = useSearchInputContext();
+  if (!value) return null;
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onClear}
+      className={searchInputClearButtonStyle({ class: className })}
+      accessibilityRole="button"
+      accessibilityLabel="Clear search"
+      {...props}
+    >
+      {children ?? (
+        <Text style={{ fontSize: 12, color: '#9CA3AF' }}>{'\u2715'}</Text>
+      )}
+    </Pressable>
+  );
+});
+SearchInputClearButton.displayName = 'SearchInputClearButton';

package/src/search-input/styles.ts

@@ -1,28 +1,28 @@
-import { tv } from 'tailwind-variants';
-
-export const searchInputStyle = tv({
-  base: 'flex-row items-center border border-outline-300 rounded-lg bg-background-0 px-3',
-  variants: {
-    size: { sm: 'h-8 gap-1.5', md: 'h-10 gap-2', lg: 'h-12 gap-2.5' },
-    isDisabled: { true: 'opacity-50' },
-  },
-  defaultVariants: { size: 'md' },
-});
-export const searchInputFieldStyle = tv({
-  base: 'flex-1 text-typography-900',
-  variants: {
-    size: { sm: 'text-sm', md: 'text-base', lg: 'text-lg' },
-  },
-  defaultVariants: { size: 'md' },
-});
-export const searchInputIconStyle = tv({
-  base: 'text-typography-400',
-  variants: {
-    size: { sm: 'h-3.5 w-3.5', md: 'h-4 w-4', lg: 'h-5 w-5' },
-  },
-  defaultVariants: { size: 'md' },
-});
-export const searchInputClearButtonStyle = tv({
-  base: 'p-0.5 rounded-full',
-  variants: {},
-});
+import { tv } from 'tailwind-variants';
+
+export const searchInputStyle = tv({
+  base: 'flex-row items-center border border-outline-300 rounded-lg bg-background-0 px-3',
+  variants: {
+    size: { sm: 'h-8 gap-1.5', md: 'h-10 gap-2', lg: 'h-12 gap-2.5' },
+    isDisabled: { true: 'opacity-50' },
+  },
+  defaultVariants: { size: 'md' },
+});
+export const searchInputFieldStyle = tv({
+  base: 'flex-1 text-typography-900',
+  variants: {
+    size: { sm: 'text-sm', md: 'text-base', lg: 'text-lg' },
+  },
+  defaultVariants: { size: 'md' },
+});
+export const searchInputIconStyle = tv({
+  base: 'text-typography-400',
+  variants: {
+    size: { sm: 'h-3.5 w-3.5', md: 'h-4 w-4', lg: 'h-5 w-5' },
+  },
+  defaultVariants: { size: 'md' },
+});
+export const searchInputClearButtonStyle = tv({
+  base: 'p-0.5 rounded-full',
+  variants: {},
+});

package/src/search-input/types.ts

@@ -1,31 +1,31 @@
-import type { View, TextInput, Pressable } from 'react-native';
-
-export type SearchInputSize = 'sm' | 'md' | 'lg';
-
-export interface SearchInputContextValue {
-  size: SearchInputSize;
-  value: string;
-  onChange: (text: string) => void;
-  onClear: () => void;
-}
-
-export interface SearchInputProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  size?: SearchInputSize;
-  value?: string;
-  onChangeText?: (text: string) => void;
-  isDisabled?: boolean;
-}
-export interface SearchInputFieldProps
-  extends React.ComponentPropsWithoutRef<typeof TextInput> {
-  className?: string;
-}
-export interface SearchInputIconProps {
-  as?: React.ElementType;
-  className?: string;
-}
-export interface SearchInputClearButtonProps
-  extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-}
+import type { View, TextInput, Pressable } from 'react-native';
+
+export type SearchInputSize = 'sm' | 'md' | 'lg';
+
+export interface SearchInputContextValue {
+  size: SearchInputSize;
+  value: string;
+  onChange: (text: string) => void;
+  onClear: () => void;
+}
+
+export interface SearchInputProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  size?: SearchInputSize;
+  value?: string;
+  onChangeText?: (text: string) => void;
+  isDisabled?: boolean;
+}
+export interface SearchInputFieldProps
+  extends React.ComponentPropsWithoutRef<typeof TextInput> {
+  className?: string;
+}
+export interface SearchInputIconProps {
+  as?: React.ElementType;
+  className?: string;
+}
+export interface SearchInputClearButtonProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}

package/src/segmented-control/index.ts

@@ -1,2 +1,2 @@
-export { SegmentedControl, SegmentedControlProvider, useSegmentedControlContext, SegmentedControlItem } from './segmented-control';
-export type { SegmentedControlProps, SegmentedControlItemProps, SegmentedControlSize, SegmentedControlContextValue } from './types';
+export { SegmentedControl, SegmentedControlProvider, useSegmentedControlContext, SegmentedControlItem } from './segmented-control';
+export type { SegmentedControlProps, SegmentedControlItemProps, SegmentedControlSize, SegmentedControlContextValue } from './types';

package/src/segmented-control/segmented-control.tsx

@@ -1,34 +1,34 @@
-import React from 'react';
-import { View, Pressable, Text } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { SegmentedControlProps, SegmentedControlItemProps, SegmentedControlContextValue } from './types';
-import { segmentedControlStyle, segmentedControlItemStyle, segmentedControlItemTextStyle } from './styles';
-
-export const [SegmentedControlProvider, useSegmentedControlContext] =
-  createComponentContext<SegmentedControlContextValue>('SegmentedControl');
-
-export const SegmentedControl = React.forwardRef<React.ElementRef<typeof View>, SegmentedControlProps>(
-  ({ className, value, onValueChange, size = 'md', children, ...props }, ref) => {
-    return (
-      <SegmentedControlProvider value={{ value, onValueChange, size }}>
-        <View ref={ref} className={segmentedControlStyle({ class: className })} {...props}>{children}</View>
-      </SegmentedControlProvider>
-    );
-  },
-);
-SegmentedControl.displayName = 'SegmentedControl';
-
-export const SegmentedControlItem = React.forwardRef<React.ElementRef<typeof Pressable>, SegmentedControlItemProps>(
-  ({ className, value, children, ...props }, ref) => {
-    const { value: selectedValue, onValueChange, size } = useSegmentedControlContext();
-    const isSelected = value === selectedValue;
-    return (
-      <Pressable ref={ref} onPress={() => onValueChange(value)} className={segmentedControlItemStyle({ size, isSelected, class: className })} accessibilityRole="button" accessibilityState={{ selected: isSelected }} {...props}>
-        {typeof children === 'string' ? (
-          <Text className={segmentedControlItemTextStyle({ size, isSelected })}>{children}</Text>
-        ) : children}
-      </Pressable>
-    );
-  },
-);
-SegmentedControlItem.displayName = 'SegmentedControlItem';
+import React from 'react';
+import { View, Pressable, Text } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { SegmentedControlProps, SegmentedControlItemProps, SegmentedControlContextValue } from './types';
+import { segmentedControlStyle, segmentedControlItemStyle, segmentedControlItemTextStyle } from './styles';
+
+export const [SegmentedControlProvider, useSegmentedControlContext] =
+  createComponentContext<SegmentedControlContextValue>('SegmentedControl');
+
+export const SegmentedControl = React.forwardRef<React.ElementRef<typeof View>, SegmentedControlProps>(
+  ({ className, value, onValueChange, size = 'md', children, ...props }, ref) => {
+    return (
+      <SegmentedControlProvider value={{ value, onValueChange, size }}>
+        <View ref={ref} className={segmentedControlStyle({ class: className })} {...props}>{children}</View>
+      </SegmentedControlProvider>
+    );
+  },
+);
+SegmentedControl.displayName = 'SegmentedControl';
+
+export const SegmentedControlItem = React.forwardRef<React.ElementRef<typeof Pressable>, SegmentedControlItemProps>(
+  ({ className, value, children, ...props }, ref) => {
+    const { value: selectedValue, onValueChange, size } = useSegmentedControlContext();
+    const isSelected = value === selectedValue;
+    return (
+      <Pressable ref={ref} onPress={() => onValueChange(value)} className={segmentedControlItemStyle({ size, isSelected, class: className })} accessibilityRole="button" accessibilityState={{ selected: isSelected }} {...props}>
+        {typeof children === 'string' ? (
+          <Text className={segmentedControlItemTextStyle({ size, isSelected })}>{children}</Text>
+        ) : children}
+      </Pressable>
+    );
+  },
+);
+SegmentedControlItem.displayName = 'SegmentedControlItem';

package/src/segmented-control/styles.ts

@@ -1,22 +1,22 @@
-import { tv } from 'tailwind-variants';
-
-export const segmentedControlStyle = tv({
-  base: 'flex-row bg-background-100 rounded-lg p-1',
-  variants: {},
-});
-export const segmentedControlItemStyle = tv({
-  base: 'flex-1 items-center justify-center rounded-md',
-  variants: {
-    size: { sm: 'py-1 px-2', md: 'py-1.5 px-3', lg: 'py-2 px-4' },
-    isSelected: { true: 'bg-background-0 shadow-soft-1', false: '' },
-  },
-  defaultVariants: { size: 'md', isSelected: false },
-});
-export const segmentedControlItemTextStyle = tv({
-  base: 'font-medium',
-  variants: {
-    size: { sm: 'text-xs', md: 'text-sm', lg: 'text-base' },
-    isSelected: { true: 'text-typography-900', false: 'text-typography-500' },
-  },
-  defaultVariants: { size: 'md', isSelected: false },
-});
+import { tv } from 'tailwind-variants';
+
+export const segmentedControlStyle = tv({
+  base: 'flex-row bg-background-100 rounded-lg p-1',
+  variants: {},
+});
+export const segmentedControlItemStyle = tv({
+  base: 'flex-1 items-center justify-center rounded-md',
+  variants: {
+    size: { sm: 'py-1 px-2', md: 'py-1.5 px-3', lg: 'py-2 px-4' },
+    isSelected: { true: 'bg-background-0 shadow-soft-1', false: '' },
+  },
+  defaultVariants: { size: 'md', isSelected: false },
+});
+export const segmentedControlItemTextStyle = tv({
+  base: 'font-medium',
+  variants: {
+    size: { sm: 'text-xs', md: 'text-sm', lg: 'text-base' },
+    isSelected: { true: 'text-typography-900', false: 'text-typography-500' },
+  },
+  defaultVariants: { size: 'md', isSelected: false },
+});

package/src/segmented-control/types.ts

@@ -1,22 +1,22 @@
-import type { View, Pressable } from 'react-native';
-
-export type SegmentedControlSize = 'sm' | 'md' | 'lg';
-
-export interface SegmentedControlContextValue {
-  value: string;
-  onValueChange: (value: string) => void;
-  size: SegmentedControlSize;
-}
-
-export interface SegmentedControlProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  value: string;
-  onValueChange: (value: string) => void;
-  size?: SegmentedControlSize;
-}
-
-export interface SegmentedControlItemProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-  value: string;
-  children: React.ReactNode;
-}
+import type { View, Pressable } from 'react-native';
+
+export type SegmentedControlSize = 'sm' | 'md' | 'lg';
+
+export interface SegmentedControlContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+  size: SegmentedControlSize;
+}
+
+export interface SegmentedControlProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  value: string;
+  onValueChange: (value: string) => void;
+  size?: SegmentedControlSize;
+}
+
+export interface SegmentedControlItemProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  value: string;
+  children: React.ReactNode;
+}