@wireservers-ui/react-natives 0.1.0

package/src/select/select.tsx

@@ -0,0 +1,101 @@
+import React, { useState, useCallback, createContext, useContext } from 'react';
+import { View } from 'react-native';
+import { useFormControlContext } from '../form-control/form-control';
+import type { SelectProps, SelectContextValue, SelectSize, TriggerLayout } from './types';
+
+export const SelectContext = createContext<SelectContextValue | null>(null);
+
+export function useSelectContext(): SelectContextValue {
+  const ctx = useContext(SelectContext);
+  if (!ctx) {
+    throw new Error(
+      'Select compound components must be used within <Select>',
+    );
+  }
+  return ctx;
+}
+
+export const Select = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SelectProps
+>(
+  (
+    {
+      className,
+      selectedValue: controlledValue,
+      defaultValue,
+      onValueChange: onValueChangeProp,
+      size = 'md',
+      variant = 'outline',
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      placeholder = 'Select...',
+      children,
+    },
+    ref,
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState<string | null>(
+      defaultValue ?? null,
+    );
+    const [internalLabel, setInternalLabel] = useState('');
+    const [triggerLayout, setTriggerLayout] = useState<TriggerLayout | null>(null);
+
+    const formControl = useFormControlContext();
+
+    const isDisabled = isDisabledProp ?? formControl?.isDisabled ?? false;
+    const isInvalid = isInvalidProp ?? formControl?.isInvalid ?? false;
+    const resolvedSize = size ?? (formControl?.size as SelectSize) ?? 'md';
+
+    const isControlled = controlledValue !== undefined;
+    const selectedValue = isControlled ? controlledValue : internalValue;
+
+    const selectedLabel = selectedValue ? internalLabel || selectedValue : '';
+
+    const onOpen = useCallback(() => {
+      if (!isDisabled) {
+        setIsOpen(true);
+      }
+    }, [isDisabled]);
+
+    const onClose = useCallback(() => {
+      setIsOpen(false);
+    }, []);
+
+    const onValueChange = useCallback(
+      (value: string, label: string) => {
+        if (!isControlled) {
+          setInternalValue(value);
+        }
+        setInternalLabel(label);
+        onValueChangeProp?.(value);
+      },
+      [isControlled, onValueChangeProp],
+    );
+
+    return (
+      <SelectContext.Provider
+        value={{
+          isOpen,
+          selectedValue: selectedValue ?? null,
+          selectedLabel,
+          size: resolvedSize,
+          variant,
+          isDisabled,
+          isInvalid,
+          triggerLayout,
+          onOpen,
+          onClose,
+          onValueChange,
+          setTriggerLayout,
+        }}
+      >
+        <View ref={ref} className={className}>
+          {children}
+        </View>
+      </SelectContext.Provider>
+    );
+  },
+);
+
+Select.displayName = 'Select';

package/src/select/styles.ts

@@ -0,0 +1,114 @@
+import { tv } from 'tailwind-variants';
+
+export const selectTriggerStyle = tv({
+  base: 'flex-row items-center',
+  variants: {
+    variant: {
+      outline: 'border border-outline-300 rounded-md bg-transparent',
+      filled: 'border border-transparent rounded-md bg-background-50',
+      underlined: 'border-b border-outline-300 bg-transparent rounded-none',
+      rounded: 'border border-outline-300 rounded-full bg-transparent',
+    },
+    size: {
+      sm: 'h-9 px-3',
+      md: 'h-10 px-3',
+      lg: 'h-11 px-3',
+      xl: 'h-12 px-3.5',
+    },
+    isFocused: {
+      true: 'border-primary-500',
+    },
+    isInvalid: {
+      true: 'border-error-500',
+    },
+    isDisabled: {
+      true: 'opacity-40',
+    },
+  },
+  compoundVariants: [
+    {
+      isFocused: true,
+      isInvalid: true,
+      class: 'border-error-500',
+    },
+  ],
+  defaultVariants: {
+    variant: 'outline',
+    size: 'md',
+  },
+});
+
+export const selectInputStyle = tv({
+  base: 'flex-1 text-typography-900',
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+    },
+    hasValue: {
+      false: 'text-typography-400',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const selectIconStyle = tv({
+  base: 'text-typography-400 ml-2',
+  variants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-[18px] w-[18px]',
+      lg: 'h-5 w-5',
+      xl: 'h-5 w-5',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const selectBackdropStyle = tv({
+  base: 'absolute inset-0',
+});
+
+export const selectContentStyle = tv({
+  base: 'bg-background-0 rounded-lg py-1 border border-outline-200 shadow-hard-5',
+});
+
+export const selectDragIndicatorStyle = tv({
+  base: 'w-10 h-1 bg-outline-300 rounded-full self-center mt-2 mb-3',
+});
+
+export const selectItemStyle = tv({
+  base: 'flex-row items-center px-4 py-2.5 active:bg-background-100',
+  variants: {
+    isSelected: {
+      true: 'bg-background-50',
+    },
+    isDisabled: {
+      true: 'opacity-40',
+    },
+  },
+});
+
+export const selectItemTextStyle = tv({
+  base: 'text-typography-900 flex-1',
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+    },
+    isSelected: {
+      true: 'font-semibold text-primary-600',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/select/types.ts

@@ -0,0 +1,92 @@
+import type { View, Text as RNText, Pressable, ScrollView } from 'react-native';
+
+export type SelectSize = 'sm' | 'md' | 'lg' | 'xl';
+export type SelectVariant = 'outline' | 'filled' | 'underlined' | 'rounded';
+
+export interface TriggerLayout {
+  pageX: number;
+  pageY: number;
+  width: number;
+  height: number;
+}
+
+export interface SelectContextValue {
+  isOpen: boolean;
+  selectedValue: string | null;
+  selectedLabel: string;
+  size: SelectSize;
+  variant: SelectVariant;
+  isDisabled: boolean;
+  isInvalid: boolean;
+  triggerLayout: TriggerLayout | null;
+  onOpen: () => void;
+  onClose: () => void;
+  onValueChange: (value: string, label: string) => void;
+  setTriggerLayout: (layout: TriggerLayout) => void;
+}
+
+export interface SelectProps {
+  className?: string;
+  selectedValue?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  size?: SelectSize;
+  variant?: SelectVariant;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  placeholder?: string;
+  children: React.ReactNode;
+}
+
+export interface SelectTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}
+
+export interface SelectInputProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+  placeholder?: string;
+}
+
+export interface SelectIconProps {
+  as?: React.ElementType;
+  className?: string;
+}
+
+export interface SelectPortalProps {
+  children: React.ReactNode;
+}
+
+export interface SelectBackdropProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}
+
+export interface SelectContentProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface SelectItemProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  label: string;
+  value: string;
+  isDisabled?: boolean;
+}
+
+export interface SelectItemTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface SelectDragIndicatorProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface SelectScrollViewProps
+  extends React.ComponentPropsWithoutRef<typeof ScrollView> {
+  className?: string;
+}

package/src/skeleton/index.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from './skeleton';
+export type { SkeletonProps, SkeletonVariant } from './types';

package/src/skeleton/skeleton.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { SkeletonProps } from './types';
+import { skeletonStyle, SKELETON_VARIANT_STYLE } from './styles';
+
+export const Skeleton = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SkeletonProps
+>(({ className, variant, width, height, isLoaded, children, style, ...props }, ref) => {
+  if (isLoaded) {
+    return <>{children}</>;
+  }
+
+  return (
+    <View
+      ref={ref}
+      className={skeletonStyle({ class: className })}
+      style={[
+        SKELETON_VARIANT_STYLE[variant ?? 'rounded'],
+        width !== undefined ? { width } : undefined,
+        height !== undefined ? { height } : undefined,
+        style,
+      ]}
+      {...props}
+    />
+  );
+});
+
+Skeleton.displayName = 'Skeleton';

package/src/skeleton/styles.ts

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+
+export const skeletonStyle = tv({
+  base: 'bg-background-200 animate-pulse',
+  variants: {},
+  defaultVariants: {},
+});
+
+export const SKELETON_VARIANT_STYLE: Record<string, { borderRadius: number }> = {
+  text: { borderRadius: 4 },
+  circular: { borderRadius: 9999 },
+  rectangular: { borderRadius: 0 },
+  rounded: { borderRadius: 8 },
+};

package/src/skeleton/types.ts

@@ -0,0 +1,12 @@
+import type { DimensionValue, View } from 'react-native';
+
+export type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
+
+export interface SkeletonProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  variant?: SkeletonVariant;
+  width?: DimensionValue;
+  height?: DimensionValue;
+  isLoaded?: boolean;
+}

package/src/slider/index.ts

@@ -0,0 +1,12 @@
+export { Slider, SliderProvider, useSliderContext } from './slider';
+export { SliderTrack } from './slider-track';
+export { SliderFilledTrack } from './slider-filled-track';
+export { SliderThumb } from './slider-thumb';
+export type {
+  SliderProps,
+  SliderTrackProps,
+  SliderFilledTrackProps,
+  SliderThumbProps,
+  SliderSize,
+  SliderContextValue,
+} from './types';

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useSliderContext } from './slider';
+import type { SliderFilledTrackProps } from './types';
+import { sliderFilledTrackStyle } from './styles';
+
+export const SliderFilledTrack = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SliderFilledTrackProps
+>(({ className, style, ...props }, ref) => {
+  const { orientation, percentage } = useSliderContext();
+
+  const dynamicStyle =
+    orientation === 'horizontal'
+      ? { width: `${percentage}%` as const }
+      : { height: `${percentage}%` as const };
+
+  return (
+    <View
+      ref={ref}
+      className={sliderFilledTrackStyle({
+        orientation,
+        class: className,
+      })}
+      style={[dynamicStyle, style]}
+      {...props}
+    />
+  );
+});
+
+SliderFilledTrack.displayName = 'SliderFilledTrack';

package/src/slider/slider-thumb.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { View, Platform } from 'react-native';
+import { useSliderContext } from './slider';
+import type { SliderThumbProps } from './types';
+import { sliderThumbStyle } from './styles';
+
+const isWeb = Platform.OS === 'web';
+
+const THUMB_SIZE: Record<string, number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+};
+
+export const SliderThumb = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SliderThumbProps
+>(({ className, style, ...props }, ref) => {
+  const { size, percentage, orientation, trackLayout } = useSliderContext();
+
+  const thumbSize = THUMB_SIZE[size] ?? 20;
+
+  const trackDimension =
+    orientation === 'horizontal' ? trackLayout.width : trackLayout.height;
+  const offset = (percentage / 100) * trackDimension - thumbSize / 2;
+
+  const positionStyle =
+    orientation === 'horizontal'
+      ? {
+          left: offset,
+          top: '50%' as const,
+          transform: [{ translateY: -thumbSize / 2 }],
+        }
+      : {
+          bottom: offset,
+          left: '50%' as const,
+          transform: [{ translateX: -thumbSize / 2 }],
+        };
+
+  return (
+    <View
+      ref={ref}
+      className={sliderThumbStyle({ size, class: className })}
+      style={[positionStyle, isWeb ? { pointerEvents: 'none' } as any : undefined, style]}
+      accessible
+      accessibilityRole="adjustable"
+      {...props}
+    />
+  );
+});
+
+SliderThumb.displayName = 'SliderThumb';

package/src/slider/slider-track.tsx

@@ -0,0 +1,154 @@
+import React, { useCallback, useRef } from 'react';
+import { View, Platform, type LayoutChangeEvent, type GestureResponderEvent } from 'react-native';
+import { useSliderContext } from './slider';
+import type { SliderTrackProps } from './types';
+import { sliderTrackStyle } from './styles';
+
+const isWeb = Platform.OS === 'web';
+
+export const SliderTrack = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SliderTrackProps
+>(({ className, children, ...props }, ref) => {
+  const {
+    size,
+    orientation,
+    isDisabled,
+    min,
+    max,
+    step,
+    trackLayout,
+    setTrackLayout,
+    onValueChange,
+    onSlidingComplete,
+    value,
+  } = useSliderContext();
+
+  const trackRef = useRef<View>(null);
+  const trackPageOffset = useRef({ x: 0, y: 0 });
+
+  const handleLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      const { width, height } = e.nativeEvent.layout;
+      setTrackLayout({ width, height });
+    },
+    [setTrackLayout],
+  );
+
+  const valueFromPosition = useCallback(
+    (positionX: number, positionY: number) => {
+      const dimension =
+        orientation === 'horizontal' ? trackLayout.width : trackLayout.height;
+
+      if (dimension === 0) return value;
+
+      const relativePos =
+        orientation === 'horizontal'
+          ? positionX - trackPageOffset.current.x
+          : trackLayout.height - (positionY - trackPageOffset.current.y);
+
+      const ratio = Math.min(Math.max(relativePos / dimension, 0), 1);
+      const rawValue = min + ratio * (max - min);
+
+      // Snap to step
+      const stepped = Math.round((rawValue - min) / step) * step + min;
+      return Math.min(Math.max(stepped, min), max);
+    },
+    [orientation, trackLayout, min, max, step, value],
+  );
+
+  const handleStartShouldSetResponder = useCallback(() => {
+    return !isDisabled;
+  }, [isDisabled]);
+
+  const handleMoveShouldSetResponder = useCallback(() => {
+    return !isDisabled;
+  }, [isDisabled]);
+
+  const handleResponderGrant = useCallback(
+    (e: GestureResponderEvent) => {
+      // Measure the track's position on screen for accurate calculations
+      if (trackRef.current) {
+        trackRef.current.measureInWindow((x, y) => {
+          trackPageOffset.current = { x: x ?? 0, y: y ?? 0 };
+        });
+      }
+
+      // For the initial grant, use locationX/locationY which are relative
+      // to the track view itself (no need for page offset calculation)
+      const { locationX, locationY } = e.nativeEvent;
+      const dimension =
+        orientation === 'horizontal' ? trackLayout.width : trackLayout.height;
+
+      if (dimension === 0) return;
+
+      const relativePos =
+        orientation === 'horizontal'
+          ? locationX
+          : trackLayout.height - locationY;
+
+      const ratio = Math.min(Math.max(relativePos / dimension, 0), 1);
+      const rawValue = min + ratio * (max - min);
+      const stepped = Math.round((rawValue - min) / step) * step + min;
+      const clamped = Math.min(Math.max(stepped, min), max);
+
+      onValueChange(clamped);
+    },
+    [orientation, trackLayout, min, max, step, onValueChange],
+  );
+
+  const handleResponderMove = useCallback(
+    (e: GestureResponderEvent) => {
+      const { pageX, pageY } = e.nativeEvent;
+      const newValue = valueFromPosition(pageX, pageY);
+      onValueChange(newValue);
+    },
+    [valueFromPosition, onValueChange],
+  );
+
+  const handleResponderRelease = useCallback(
+    (e: GestureResponderEvent) => {
+      const { pageX, pageY } = e.nativeEvent;
+      const newValue = valueFromPosition(pageX, pageY);
+      onSlidingComplete?.(newValue);
+    },
+    [valueFromPosition, onSlidingComplete],
+  );
+
+  // On web, the parent Slider handles pointer events; on native, use responder system
+  const responderProps = isWeb
+    ? {}
+    : {
+        onStartShouldSetResponder: handleStartShouldSetResponder,
+        onMoveShouldSetResponder: handleMoveShouldSetResponder,
+        onResponderGrant: handleResponderGrant,
+        onResponderMove: handleResponderMove,
+        onResponderRelease: handleResponderRelease,
+      };
+
+  return (
+    <View
+      ref={(node) => {
+        // Handle both the internal ref and the forwarded ref
+        (trackRef as React.MutableRefObject<View | null>).current = node;
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          (ref as React.MutableRefObject<View | null>).current = node;
+        }
+      }}
+      onLayout={handleLayout}
+      {...responderProps}
+      className={sliderTrackStyle({
+        orientation,
+        size,
+        class: className,
+      })}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+});
+
+SliderTrack.displayName = 'SliderTrack';