@wireservers-ui/react-natives 0.1.0

package/src/progress/progress-filled-track.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useProgressContext } from './progress';
+import type { ProgressFilledTrackProps } from './types';
+import { progressFilledTrackStyle } from './styles';
+
+export const ProgressFilledTrack = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ProgressFilledTrackProps
+>(({ className, ...props }, ref) => {
+  const { colorScheme, percentage } = useProgressContext();
+
+  return (
+    <View
+      ref={ref}
+      className={progressFilledTrackStyle({
+        colorScheme,
+        class: className,
+      })}
+      style={{ width: `${percentage}%` }}
+      {...props}
+    />
+  );
+});
+
+ProgressFilledTrack.displayName = 'ProgressFilledTrack';

package/src/progress/progress.tsx

@@ -0,0 +1,52 @@
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { ProgressProps, ProgressContextValue } from './types';
+import { progressStyle } from './styles';
+
+export const [ProgressProvider, useProgressContext] =
+  createComponentContext<ProgressContextValue>('Progress');
+
+export const Progress = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ProgressProps
+>(
+  (
+    {
+      className,
+      value = 0,
+      min = 0,
+      max = 100,
+      size = 'md',
+      colorScheme = 'primary',
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const percentage = useMemo(() => {
+      const clamped = Math.min(Math.max(value, min), max);
+      return ((clamped - min) / (max - min)) * 100;
+    }, [value, min, max]);
+
+    return (
+      <ProgressProvider
+        value={{ value, min, max, size, colorScheme, percentage }}
+      >
+        <View
+          ref={ref}
+          role="progressbar"
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={value}
+          className={progressStyle({ size, class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </ProgressProvider>
+    );
+  },
+);
+
+Progress.displayName = 'Progress';

package/src/progress/styles.ts

@@ -0,0 +1,34 @@
+import { tv } from 'tailwind-variants';
+
+export const progressStyle = tv({
+  base: 'w-full bg-background-200 rounded-full overflow-hidden',
+  variants: {
+    size: {
+      xs: 'h-1',
+      sm: 'h-1.5',
+      md: 'h-2',
+      lg: 'h-3',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const progressFilledTrackStyle = tv({
+  base: 'h-full rounded-full',
+  variants: {
+    colorScheme: {
+      primary: 'bg-primary-500',
+      secondary: 'bg-secondary-500',
+      tertiary: 'bg-tertiary-500',
+      error: 'bg-error-500',
+      success: 'bg-success-500',
+      warning: 'bg-warning-500',
+      info: 'bg-info-500',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'primary',
+  },
+});

package/src/progress/types.ts

@@ -0,0 +1,28 @@
+import type { View } from 'react-native';
+import type { SemanticColor } from '../utils/types';
+
+export type ProgressSize = 'xs' | 'sm' | 'md' | 'lg';
+
+export interface ProgressContextValue {
+  value: number;
+  min: number;
+  max: number;
+  size: ProgressSize;
+  colorScheme: SemanticColor;
+  percentage: number;
+}
+
+export interface ProgressProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  value?: number;
+  min?: number;
+  max?: number;
+  size?: ProgressSize;
+  colorScheme?: SemanticColor;
+}
+
+export interface ProgressFilledTrackProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}

package/src/radio/index.ts

@@ -0,0 +1,14 @@
+export { RadioGroup } from './radio-group';
+export { Radio } from './radio';
+export { RadioIndicator } from './radio-indicator';
+export { RadioIcon } from './radio-icon';
+export { RadioLabel } from './radio-label';
+export type {
+  RadioGroupProps,
+  RadioGroupContextValue,
+  RadioProps,
+  RadioContextValue,
+  RadioIndicatorProps,
+  RadioIconProps,
+  RadioLabelProps,
+} from './types';

package/src/radio/radio-group.tsx

@@ -0,0 +1,61 @@
+import React, { createContext, useContext, useState } from 'react';
+import { View } from 'react-native';
+import type { RadioGroupProps, RadioGroupContextValue } from './types';
+import { radioGroupStyle } from './styles';
+
+export const RadioGroupContext =
+  createContext<RadioGroupContextValue | null>(null);
+
+export function useRadioGroupContext(): RadioGroupContextValue | null {
+  return useContext(RadioGroupContext);
+}
+
+export const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof View>,
+  RadioGroupProps
+>(
+  (
+    {
+      className,
+      value: valueProp,
+      defaultValue = undefined,
+      onChange,
+      isDisabled,
+      isInvalid,
+      size = 'md',
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [internalValue, setInternalValue] = useState<string | null>(
+      defaultValue ?? null,
+    );
+    const isControlled = valueProp !== undefined;
+    const value = isControlled ? valueProp : internalValue;
+
+    const handleChange = (radioValue: string) => {
+      if (!isControlled) {
+        setInternalValue(radioValue);
+      }
+      onChange?.(radioValue);
+    };
+
+    return (
+      <RadioGroupContext.Provider
+        value={{ value, onChange: handleChange, isDisabled, isInvalid, size }}
+      >
+        <View
+          ref={ref}
+          role="radiogroup"
+          className={radioGroupStyle({ class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </RadioGroupContext.Provider>
+    );
+  },
+);
+
+RadioGroup.displayName = 'RadioGroup';

package/src/radio/radio-icon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useRadioContext } from './radio';
+import type { RadioIconProps } from './types';
+import { radioIconStyle } from './styles';
+
+export const RadioIcon = React.forwardRef<
+  React.ElementRef<typeof View>,
+  RadioIconProps
+>(({ className, ...props }, ref) => {
+  const { isSelected, size } = useRadioContext();
+
+  if (!isSelected) return null;
+
+  return (
+    <View
+      ref={ref}
+      className={radioIconStyle({ size, class: className })}
+      {...props}
+    />
+  );
+});
+
+RadioIcon.displayName = 'RadioIcon';

package/src/radio/radio-indicator.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useRadioContext } from './radio';
+import type { RadioIndicatorProps } from './types';
+import { radioIndicatorStyle } from './styles';
+
+export const RadioIndicator = React.forwardRef<
+  React.ElementRef<typeof View>,
+  RadioIndicatorProps
+>(({ className, children, ...props }, ref) => {
+  const { isSelected, isDisabled, isInvalid, size } = useRadioContext();
+
+  return (
+    <View
+      ref={ref}
+      className={radioIndicatorStyle({
+        size,
+        isSelected,
+        isInvalid,
+        isDisabled,
+        class: className,
+      })}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+});
+
+RadioIndicator.displayName = 'RadioIndicator';

package/src/radio/radio-label.tsx

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

package/src/radio/radio.tsx

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

package/src/radio/styles.ts

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

package/src/radio/types.ts

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

package/src/rating/index.ts

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

package/src/rating/rating.tsx

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

package/src/rating/styles.ts

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

package/src/rating/types.ts

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

package/src/search-input/index.ts

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