@wireservers-ui/react-natives 2.0.1 → 2.0.2

package/src/radio/radio-label.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { useRadioContext } from './radio';
-import type { RadioLabelProps } from './types';
-import { radioLabelStyle } from './styles';
-
-export const RadioLabel = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  RadioLabelProps
->(({ className, children, ...props }, ref) => {
-  const { isDisabled, size } = useRadioContext();
-
-  return (
-    <Text
-      ref={ref}
-      className={radioLabelStyle({ size, isDisabled, class: className })}
-      {...props}
-    >
-      {children}
-    </Text>
-  );
-});
-
-RadioLabel.displayName = 'RadioLabel';
+import React from 'react';
+import { Text } from 'react-native';
+import { useRadioContext } from './radio';
+import type { RadioLabelProps } from './types';
+import { radioLabelStyle } from './styles';
+
+export const RadioLabel = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  RadioLabelProps
+>(({ className, children, ...props }, ref) => {
+  const { isDisabled, size } = useRadioContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={radioLabelStyle({ size, isDisabled, class: className })}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+});
+
+RadioLabel.displayName = 'RadioLabel';

package/src/radio/radio.tsx

@@ -1,68 +1,68 @@
-import React from 'react';
-import { Pressable } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import { useFormControlContext } from '../form-control/form-control';
-import { useRadioGroupContext } from './radio-group';
-import type { RadioProps, RadioContextValue } from './types';
-import { radioStyle } from './styles';
-
-export const [RadioProvider, useRadioContext] =
-  createComponentContext<RadioContextValue>('Radio');
-
-export const Radio = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  RadioProps
->(
-  (
-    {
-      className,
-      value,
-      isDisabled: isDisabledProp,
-      isInvalid: isInvalidProp,
-      size: sizeProp,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const groupContext = useRadioGroupContext();
-    const formControl = useFormControlContext();
-
-    const size = sizeProp ?? groupContext?.size ?? formControl?.size ?? 'md';
-    const isDisabled =
-      isDisabledProp ??
-      groupContext?.isDisabled ??
-      formControl?.isDisabled ??
-      false;
-    const isInvalid =
-      isInvalidProp ??
-      groupContext?.isInvalid ??
-      formControl?.isInvalid ??
-      false;
-
-    const isSelected = groupContext?.value === value;
-
-    const handlePress = () => {
-      if (isDisabled) return;
-      groupContext?.onChange(value);
-    };
-
-    return (
-      <RadioProvider value={{ isSelected, isDisabled, isInvalid, size }}>
-        <Pressable
-          ref={ref}
-          role="radio"
-          aria-checked={isSelected}
-          disabled={isDisabled}
-          onPress={handlePress}
-          className={radioStyle({ class: className })}
-          {...props}
-        >
-          {children}
-        </Pressable>
-      </RadioProvider>
-    );
-  },
-);
-
-Radio.displayName = 'Radio';
+import React from 'react';
+import { Pressable } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import { useFormControlContext } from '../form-control/form-control';
+import { useRadioGroupContext } from './radio-group';
+import type { RadioProps, RadioContextValue } from './types';
+import { radioStyle } from './styles';
+
+export const [RadioProvider, useRadioContext] =
+  createComponentContext<RadioContextValue>('Radio');
+
+export const Radio = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  RadioProps
+>(
+  (
+    {
+      className,
+      value,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      size: sizeProp,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const groupContext = useRadioGroupContext();
+    const formControl = useFormControlContext();
+
+    const size = sizeProp ?? groupContext?.size ?? formControl?.size ?? 'md';
+    const isDisabled =
+      isDisabledProp ??
+      groupContext?.isDisabled ??
+      formControl?.isDisabled ??
+      false;
+    const isInvalid =
+      isInvalidProp ??
+      groupContext?.isInvalid ??
+      formControl?.isInvalid ??
+      false;
+
+    const isSelected = groupContext?.value === value;
+
+    const handlePress = () => {
+      if (isDisabled) return;
+      groupContext?.onChange(value);
+    };
+
+    return (
+      <RadioProvider value={{ isSelected, isDisabled, isInvalid, size }}>
+        <Pressable
+          ref={ref}
+          role="radio"
+          aria-checked={isSelected}
+          disabled={isDisabled}
+          onPress={handlePress}
+          className={radioStyle({ class: className })}
+          {...props}
+        >
+          {children}
+        </Pressable>
+      </RadioProvider>
+    );
+  },
+);
+
+Radio.displayName = 'Radio';

package/src/radio/styles.ts

@@ -1,69 +1,69 @@
-import { tv } from 'tailwind-variants';
-
-export const radioGroupStyle = tv({
-  base: 'gap-2',
-});
-
-export const radioStyle = tv({
-  base: 'flex-row items-center gap-2',
-});
-
-export const radioIndicatorStyle = tv({
-  base: 'border-2 border-outline-400 rounded-full items-center justify-center',
-  variants: {
-    size: {
-      xs: 'h-4 w-4',
-      sm: 'h-4 w-4',
-      md: 'h-5 w-5',
-      lg: 'h-6 w-6',
-      xl: 'h-6 w-6',
-    },
-    isSelected: {
-      true: 'border-primary-500',
-    },
-    isInvalid: {
-      true: 'border-error-500',
-    },
-    isDisabled: {
-      true: 'opacity-40',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export const radioIconStyle = tv({
-  base: 'rounded-full bg-primary-500',
-  variants: {
-    size: {
-      xs: 'h-1.5 w-1.5',
-      sm: 'h-1.5 w-1.5',
-      md: 'h-2 w-2',
-      lg: 'h-2.5 w-2.5',
-      xl: 'h-2.5 w-2.5',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export const radioLabelStyle = tv({
-  base: 'text-typography-900',
-  variants: {
-    size: {
-      xs: 'text-xs',
-      sm: 'text-sm',
-      md: 'text-base',
-      lg: 'text-lg',
-      xl: 'text-xl',
-    },
-    isDisabled: {
-      true: 'opacity-40',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
+import { tv } from 'tailwind-variants';
+
+export const radioGroupStyle = tv({
+  base: 'gap-2',
+});
+
+export const radioStyle = tv({
+  base: 'flex-row items-center gap-2',
+});
+
+export const radioIndicatorStyle = tv({
+  base: 'border-2 border-outline-400 rounded-full items-center justify-center',
+  variants: {
+    size: {
+      xs: 'h-4 w-4',
+      sm: 'h-4 w-4',
+      md: 'h-5 w-5',
+      lg: 'h-6 w-6',
+      xl: 'h-6 w-6',
+    },
+    isSelected: {
+      true: 'border-primary-500',
+    },
+    isInvalid: {
+      true: 'border-error-500',
+    },
+    isDisabled: {
+      true: 'opacity-40',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const radioIconStyle = tv({
+  base: 'rounded-full bg-primary-500',
+  variants: {
+    size: {
+      xs: 'h-1.5 w-1.5',
+      sm: 'h-1.5 w-1.5',
+      md: 'h-2 w-2',
+      lg: 'h-2.5 w-2.5',
+      xl: 'h-2.5 w-2.5',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const radioLabelStyle = tv({
+  base: 'text-typography-900',
+  variants: {
+    size: {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+    },
+    isDisabled: {
+      true: 'opacity-40',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/radio/types.ts

@@ -1,51 +1,51 @@
-import type { View, Text as RNText, Pressable } from 'react-native';
-import type { Size } from '../utils/types';
-
-export interface RadioGroupContextValue {
-  value: string | null;
-  onChange: (value: string) => void;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  size?: Size;
-}
-
-export interface RadioContextValue {
-  isSelected: boolean;
-  isDisabled: boolean;
-  isInvalid: boolean;
-  size: Size;
-}
-
-export interface RadioGroupProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  size?: Size;
-}
-
-export interface RadioProps
-  extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-  value: string;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  size?: Size;
-}
-
-export interface RadioIndicatorProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface RadioIconProps {
-  className?: string;
-}
-
-export interface RadioLabelProps
-  extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
+import type { View, Text as RNText, Pressable } from 'react-native';
+import type { Size } from '../utils/types';
+
+export interface RadioGroupContextValue {
+  value: string | null;
+  onChange: (value: string) => void;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  size?: Size;
+}
+
+export interface RadioContextValue {
+  isSelected: boolean;
+  isDisabled: boolean;
+  isInvalid: boolean;
+  size: Size;
+}
+
+export interface RadioGroupProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  size?: Size;
+}
+
+export interface RadioProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  value: string;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  size?: Size;
+}
+
+export interface RadioIndicatorProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface RadioIconProps {
+  className?: string;
+}
+
+export interface RadioLabelProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}

package/src/rating/index.ts

@@ -1,7 +1,7 @@
-export { Rating, RatingProvider, useRatingContext, RatingIcon } from './rating';
-export type {
-  RatingProps,
-  RatingIconProps,
-  RatingSize,
-  RatingContextValue,
-} from './types';
+export { Rating, RatingProvider, useRatingContext, RatingIcon } from './rating';
+export type {
+  RatingProps,
+  RatingIconProps,
+  RatingSize,
+  RatingContextValue,
+} from './types';

package/src/rating/rating.tsx

@@ -1,93 +1,93 @@
-import React, { useState } from 'react';
-import { View, Pressable, Text } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { RatingProps, RatingIconProps, RatingContextValue } from './types';
-import { ratingStyle, ratingIconStyle } from './styles';
-
-export const [RatingProvider, useRatingContext] =
-  createComponentContext<RatingContextValue>('Rating');
-
-const sizeToFontSize = { sm: 16, md: 20, lg: 24, xl: 32 };
-
-export const Rating = React.forwardRef<
-  React.ElementRef<typeof View>,
-  RatingProps
->(
-  (
-    {
-      className,
-      value: controlledValue,
-      defaultValue = 0,
-      max = 5,
-      size = 'md',
-      isReadOnly = false,
-      onChange,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const [internalValue, setInternalValue] = useState(defaultValue);
-    const value =
-      controlledValue !== undefined ? controlledValue : internalValue;
-    const onRate = (v: number) => {
-      if (!isReadOnly) {
-        setInternalValue(v);
-        onChange?.(v);
-      }
-    };
-    return (
-      <RatingProvider value={{ value, max, size, isReadOnly, onRate }}>
-        <View
-          ref={ref}
-          className={ratingStyle({ class: className })}
-          accessibilityRole="adjustable"
-          accessibilityValue={{ min: 0, max, now: value }}
-          {...props}
-        >
-          {children ??
-            Array.from({ length: max }, (_, i) => (
-              <RatingIcon key={i} index={i} />
-            ))}
-        </View>
-      </RatingProvider>
-    );
-  },
-);
-Rating.displayName = 'Rating';
-
-export const RatingIcon = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  RatingIconProps
->(
-  (
-    { className, index, filledIcon: FilledIcon, emptyIcon: EmptyIcon, ...props },
-    ref,
-  ) => {
-    const { value, size, isReadOnly, onRate } = useRatingContext();
-    const isFilled = index < value;
-    const fontSize = sizeToFontSize[size];
-    return (
-      <Pressable
-        ref={ref}
-        onPress={() => onRate(index + 1)}
-        disabled={isReadOnly}
-        className={className}
-        {...props}
-      >
-        {FilledIcon && isFilled ? (
-          <FilledIcon className={ratingIconStyle({ size })} />
-        ) : EmptyIcon && !isFilled ? (
-          <EmptyIcon className={ratingIconStyle({ size })} />
-        ) : (
-          <Text
-            style={{ fontSize, color: isFilled ? '#F59E0B' : '#D1D5DB' }}
-          >
-            {'\u2605'}
-          </Text>
-        )}
-      </Pressable>
-    );
-  },
-);
-RatingIcon.displayName = 'RatingIcon';
+import React, { useState } from 'react';
+import { View, Pressable, Text } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { RatingProps, RatingIconProps, RatingContextValue } from './types';
+import { ratingStyle, ratingIconStyle } from './styles';
+
+export const [RatingProvider, useRatingContext] =
+  createComponentContext<RatingContextValue>('Rating');
+
+const sizeToFontSize = { sm: 16, md: 20, lg: 24, xl: 32 };
+
+export const Rating = React.forwardRef<
+  React.ElementRef<typeof View>,
+  RatingProps
+>(
+  (
+    {
+      className,
+      value: controlledValue,
+      defaultValue = 0,
+      max = 5,
+      size = 'md',
+      isReadOnly = false,
+      onChange,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const value =
+      controlledValue !== undefined ? controlledValue : internalValue;
+    const onRate = (v: number) => {
+      if (!isReadOnly) {
+        setInternalValue(v);
+        onChange?.(v);
+      }
+    };
+    return (
+      <RatingProvider value={{ value, max, size, isReadOnly, onRate }}>
+        <View
+          ref={ref}
+          className={ratingStyle({ class: className })}
+          accessibilityRole="adjustable"
+          accessibilityValue={{ min: 0, max, now: value }}
+          {...props}
+        >
+          {children ??
+            Array.from({ length: max }, (_, i) => (
+              <RatingIcon key={i} index={i} />
+            ))}
+        </View>
+      </RatingProvider>
+    );
+  },
+);
+Rating.displayName = 'Rating';
+
+export const RatingIcon = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  RatingIconProps
+>(
+  (
+    { className, index, filledIcon: FilledIcon, emptyIcon: EmptyIcon, ...props },
+    ref,
+  ) => {
+    const { value, size, isReadOnly, onRate } = useRatingContext();
+    const isFilled = index < value;
+    const fontSize = sizeToFontSize[size];
+    return (
+      <Pressable
+        ref={ref}
+        onPress={() => onRate(index + 1)}
+        disabled={isReadOnly}
+        className={className}
+        {...props}
+      >
+        {FilledIcon && isFilled ? (
+          <FilledIcon className={ratingIconStyle({ size })} />
+        ) : EmptyIcon && !isFilled ? (
+          <EmptyIcon className={ratingIconStyle({ size })} />
+        ) : (
+          <Text
+            style={{ fontSize, color: isFilled ? '#F59E0B' : '#D1D5DB' }}
+          >
+            {'\u2605'}
+          </Text>
+        )}
+      </Pressable>
+    );
+  },
+);
+RatingIcon.displayName = 'RatingIcon';

package/src/rating/styles.ts

@@ -1,13 +1,13 @@
-import { tv } from 'tailwind-variants';
-
-export const ratingStyle = tv({
-  base: 'flex-row items-center gap-0.5',
-  variants: {},
-});
-export const ratingIconStyle = tv({
-  base: '',
-  variants: {
-    size: { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6', xl: 'h-8 w-8' },
-  },
-  defaultVariants: { size: 'md' },
-});
+import { tv } from 'tailwind-variants';
+
+export const ratingStyle = tv({
+  base: 'flex-row items-center gap-0.5',
+  variants: {},
+});
+export const ratingIconStyle = tv({
+  base: '',
+  variants: {
+    size: { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6', xl: 'h-8 w-8' },
+  },
+  defaultVariants: { size: 'md' },
+});