@wireservers-ui/react-natives 0.1.0

package/src/slider/slider.tsx

@@ -0,0 +1,193 @@
+import React, { useState, useCallback, useMemo, useRef } from 'react';
+import { View, Platform } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import { useFormControlContext } from '../form-control/form-control';
+import type { SliderProps, SliderContextValue, SliderSize } from './types';
+import { sliderStyle } from './styles';
+
+const isWeb = Platform.OS === 'web';
+
+export const [SliderProvider, useSliderContext] =
+  createComponentContext<SliderContextValue>('Slider');
+
+export const Slider = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SliderProps
+>(
+  (
+    {
+      className,
+      value: controlledValue,
+      defaultValue = 0,
+      min = 0,
+      max = 100,
+      step = 1,
+      orientation = 'horizontal',
+      size = 'md',
+      isDisabled: isDisabledProp,
+      onValueChange,
+      onSlidingComplete,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const formControl = useFormControlContext();
+    const isDisabled = isDisabledProp ?? formControl?.isDisabled ?? false;
+    const resolvedSize = size ?? (formControl?.size as SliderSize) ?? 'md';
+
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [trackLayout, setTrackLayout] = useState({ width: 0, height: 0 });
+
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+
+    // Clamp value to min/max
+    const clampedValue = Math.min(Math.max(value, min), max);
+    const percentage =
+      max === min ? 0 : ((clampedValue - min) / (max - min)) * 100;
+
+    const handleValueChange = useCallback(
+      (newValue: number) => {
+        // Snap to step
+        const stepped = Math.round((newValue - min) / step) * step + min;
+        const clamped = Math.min(Math.max(stepped, min), max);
+
+        if (!isControlled) {
+          setInternalValue(clamped);
+        }
+        onValueChange?.(clamped);
+      },
+      [min, max, step, isControlled, onValueChange],
+    );
+
+    // --- Web pointer event handlers (bypass RN Responder system) ---
+    const lastValueRef = useRef(clampedValue);
+    lastValueRef.current = clampedValue;
+
+    const calcValue = useCallback(
+      (el: any, clientX: number, clientY: number) => {
+        const rect = el?.getBoundingClientRect?.();
+        if (!rect) return clampedValue;
+        const dimension =
+          orientation === 'horizontal' ? rect.width : rect.height;
+        if (dimension === 0) return clampedValue;
+        const relativePos =
+          orientation === 'horizontal'
+            ? clientX - rect.left
+            : rect.height - (clientY - rect.top);
+        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;
+        return Math.min(Math.max(stepped, min), max);
+      },
+      [orientation, min, max, step, clampedValue],
+    );
+
+    const onPointerDown = useCallback(
+      (e: any) => {
+        if (isDisabled) return;
+        e.preventDefault();
+        const el = e.currentTarget;
+        el?.setPointerCapture?.(e.pointerId);
+        if (el?.style) el.style.cursor = 'grabbing';
+        const val = calcValue(el, e.clientX, e.clientY);
+        lastValueRef.current = val;
+        handleValueChange(val);
+      },
+      [isDisabled, calcValue, handleValueChange],
+    );
+
+    const onPointerMove = useCallback(
+      (e: any) => {
+        const el = e.currentTarget;
+        if (!el?.hasPointerCapture?.(e.pointerId)) return;
+        const val = calcValue(el, e.clientX, e.clientY);
+        lastValueRef.current = val;
+        handleValueChange(val);
+      },
+      [calcValue, handleValueChange],
+    );
+
+    const onPointerUp = useCallback(
+      (e: any) => {
+        const el = e.currentTarget;
+        if (el?.releasePointerCapture) {
+          try {
+            el.releasePointerCapture(e.pointerId);
+          } catch (_) {
+            /* already released */
+          }
+        }
+        if (el?.style) el.style.cursor = 'pointer';
+        onSlidingComplete?.(lastValueRef.current);
+      },
+      [onSlidingComplete],
+    );
+
+    const webHandlers = isWeb
+      ? { onPointerDown, onPointerMove, onPointerUp }
+      : {};
+    const webStyle = isWeb
+      ? ({ touchAction: 'none', userSelect: 'none', cursor: 'pointer' } as any)
+      : undefined;
+
+    const contextValue = useMemo<SliderContextValue>(
+      () => ({
+        value: clampedValue,
+        min,
+        max,
+        step,
+        size: resolvedSize,
+        isDisabled,
+        orientation,
+        percentage,
+        onValueChange: handleValueChange,
+        onSlidingComplete,
+        trackLayout,
+        setTrackLayout,
+      }),
+      [
+        clampedValue,
+        min,
+        max,
+        step,
+        resolvedSize,
+        isDisabled,
+        orientation,
+        percentage,
+        handleValueChange,
+        onSlidingComplete,
+        trackLayout,
+      ],
+    );
+
+    return (
+      <SliderProvider value={contextValue}>
+        <View
+          ref={ref}
+          className={sliderStyle({
+            orientation,
+            isDisabled,
+            class: className,
+          })}
+          style={webStyle}
+          {...webHandlers}
+          accessible
+          accessibilityRole="adjustable"
+          accessibilityValue={{
+            min,
+            max,
+            now: clampedValue,
+          }}
+          {...props}
+        >
+          {children}
+        </View>
+      </SliderProvider>
+    );
+  },
+);
+
+Slider.displayName = 'Slider';

package/src/slider/styles.ts

@@ -0,0 +1,71 @@
+import { tv } from 'tailwind-variants';
+
+export const sliderStyle = tv({
+  base: 'justify-center',
+  variants: {
+    orientation: {
+      horizontal: 'w-full',
+      vertical: 'h-full',
+    },
+    isDisabled: {
+      true: 'opacity-40',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+});
+
+export const sliderTrackStyle = tv({
+  base: 'bg-background-200 rounded-full overflow-hidden',
+  variants: {
+    orientation: {
+      horizontal: 'w-full',
+      vertical: 'h-full',
+    },
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+    },
+  },
+  compoundVariants: [
+    { orientation: 'horizontal', size: 'sm', class: 'h-1' },
+    { orientation: 'horizontal', size: 'md', class: 'h-1.5' },
+    { orientation: 'horizontal', size: 'lg', class: 'h-2' },
+    { orientation: 'vertical', size: 'sm', class: 'w-1' },
+    { orientation: 'vertical', size: 'md', class: 'w-1.5' },
+    { orientation: 'vertical', size: 'lg', class: 'w-2' },
+  ],
+  defaultVariants: {
+    orientation: 'horizontal',
+    size: 'md',
+  },
+});
+
+export const sliderFilledTrackStyle = tv({
+  base: 'bg-primary-500 rounded-full',
+  variants: {
+    orientation: {
+      horizontal: 'h-full',
+      vertical: 'w-full',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+});
+
+export const sliderThumbStyle = tv({
+  base: 'bg-primary-500 rounded-full absolute shadow-hard-1 items-center justify-center',
+  variants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-5 w-5',
+      lg: 'h-6 w-6',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/slider/types.ts

@@ -0,0 +1,47 @@
+import type { View } from 'react-native';
+
+export type SliderSize = 'sm' | 'md' | 'lg';
+
+export interface SliderContextValue {
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  size: SliderSize;
+  isDisabled: boolean;
+  orientation: 'horizontal' | 'vertical';
+  percentage: number;
+  onValueChange: (value: number) => void;
+  onSlidingComplete?: (value: number) => void;
+  trackLayout: { width: number; height: number };
+  setTrackLayout: (layout: { width: number; height: number }) => void;
+}
+
+export interface SliderProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  value?: number;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  orientation?: 'horizontal' | 'vertical';
+  size?: SliderSize;
+  isDisabled?: boolean;
+  onValueChange?: (value: number) => void;
+  onSlidingComplete?: (value: number) => void;
+}
+
+export interface SliderTrackProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface SliderFilledTrackProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface SliderThumbProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}

package/src/snackbar/index.ts

@@ -0,0 +1,2 @@
+export { Snackbar, SnackbarProvider, useSnackbarContext, SnackbarText, SnackbarActionButton } from './snackbar';
+export type { SnackbarProps, SnackbarTextProps, SnackbarActionButtonProps, SnackbarAction, SnackbarContextValue } from './types';

package/src/snackbar/snackbar.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { SnackbarProps, SnackbarTextProps, SnackbarActionButtonProps, SnackbarContextValue } from './types';
+import { snackbarStyle, snackbarTextStyle, snackbarActionButtonStyle, snackbarActionButtonTextStyle } from './styles';
+
+export const [SnackbarProvider, useSnackbarContext] =
+  createComponentContext<SnackbarContextValue>('Snackbar');
+
+export const Snackbar = React.forwardRef<React.ElementRef<typeof View>, SnackbarProps>(
+  ({ className, action = 'info', children, ...props }, ref) => {
+    return (
+      <SnackbarProvider value={{ action }}>
+        <View ref={ref} className={snackbarStyle({ action, class: className })} {...props}>
+          {children}
+        </View>
+      </SnackbarProvider>
+    );
+  },
+);
+Snackbar.displayName = 'Snackbar';
+
+export const SnackbarText = React.forwardRef<React.ElementRef<typeof Text>, SnackbarTextProps>(
+  ({ className, ...props }, ref) => {
+    return <Text ref={ref} className={snackbarTextStyle({ class: className })} {...props} />;
+  },
+);
+SnackbarText.displayName = 'SnackbarText';
+
+export const SnackbarActionButton = React.forwardRef<React.ElementRef<typeof Pressable>, SnackbarActionButtonProps>(
+  ({ className, label, ...props }, ref) => {
+    return (
+      <Pressable ref={ref} className={snackbarActionButtonStyle({ class: className })} accessibilityRole="button" {...props}>
+        <Text className={snackbarActionButtonTextStyle({})}>{label}</Text>
+      </Pressable>
+    );
+  },
+);
+SnackbarActionButton.displayName = 'SnackbarActionButton';

package/src/snackbar/styles.ts

@@ -0,0 +1,29 @@
+import { tv } from 'tailwind-variants';
+
+export const snackbarStyle = tv({
+  base: 'flex-row items-center justify-between rounded-lg px-4 py-3 shadow-hard-5',
+  variants: {
+    action: {
+      info: 'bg-background-800',
+      success: 'bg-success-700',
+      warning: 'bg-warning-700',
+      error: 'bg-error-700',
+    },
+  },
+  defaultVariants: { action: 'info' },
+});
+
+export const snackbarTextStyle = tv({
+  base: 'text-sm text-typography-0 flex-1 mr-3',
+  variants: {},
+});
+
+export const snackbarActionButtonStyle = tv({
+  base: 'px-2 py-1 rounded',
+  variants: {},
+});
+
+export const snackbarActionButtonTextStyle = tv({
+  base: 'text-sm font-semibold text-primary-200',
+  variants: {},
+});

package/src/snackbar/types.ts

@@ -0,0 +1,21 @@
+import type { View, Text as RNText, Pressable } from 'react-native';
+
+export type SnackbarAction = 'info' | 'success' | 'warning' | 'error';
+
+export interface SnackbarContextValue {
+  action: SnackbarAction;
+}
+
+export interface SnackbarProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  action?: SnackbarAction;
+}
+
+export interface SnackbarTextProps extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface SnackbarActionButtonProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  label: string;
+}

package/src/spinner/index.ts

@@ -0,0 +1,2 @@
+export { Spinner } from './spinner';
+export type { SpinnerProps, SpinnerSize } from './types';

package/src/spinner/spinner.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import type { SpinnerProps } from './types';
+import { spinnerStyle } from './styles';
+
+const sizeMap = {
+  sm: 'small' as const,
+  md: 'small' as const,
+  lg: 'large' as const,
+};
+
+export const Spinner = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SpinnerProps
+>(({ className, size = 'md', color, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={spinnerStyle({ size, class: className })}
+      aria-label="loading"
+      role="progressbar"
+      {...props}
+    >
+      <ActivityIndicator size={sizeMap[size]} color={color} />
+    </View>
+  );
+});
+
+Spinner.displayName = 'Spinner';

package/src/spinner/styles.ts

@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+
+export const spinnerStyle = tv({
+  base: 'items-center justify-center',
+  variants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-8 w-8',
+      lg: 'h-12 w-12',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/spinner/types.ts

@@ -0,0 +1,10 @@
+import type { View } from 'react-native';
+
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+
+export interface SpinnerProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  size?: SpinnerSize;
+  color?: string;
+}

package/src/stack/index.ts

@@ -0,0 +1,2 @@
+export { Stack, VStack, HStack } from './stack';
+export type { StackProps, VStackProps, HStackProps, StackDirection, StackSpace } from './types';

package/src/stack/stack.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { StackProps, VStackProps, HStackProps } from './types';
+import { stackStyle } from './styles';
+
+export const Stack = React.forwardRef<
+  React.ElementRef<typeof View>,
+  StackProps
+>(({ className, direction, space, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={stackStyle({ direction, space, class: className })}
+      {...props}
+    />
+  );
+});
+
+Stack.displayName = 'Stack';
+
+export const VStack = React.forwardRef<
+  React.ElementRef<typeof View>,
+  VStackProps
+>(({ className, space, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={stackStyle({ direction: 'column', space, class: className })}
+      {...props}
+    />
+  );
+});
+
+VStack.displayName = 'VStack';
+
+export const HStack = React.forwardRef<
+  React.ElementRef<typeof View>,
+  HStackProps
+>(({ className, space, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={stackStyle({ direction: 'row', space, class: className })}
+      {...props}
+    />
+  );
+});
+
+HStack.displayName = 'HStack';

package/src/stack/styles.ts

@@ -0,0 +1,25 @@
+import { tv } from 'tailwind-variants';
+
+export const stackStyle = tv({
+  base: 'flex',
+  variants: {
+    direction: {
+      'row': 'flex-row',
+      'column': 'flex-col',
+      'row-reverse': 'flex-row-reverse',
+      'column-reverse': 'flex-col-reverse',
+    },
+    space: {
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: 'gap-3',
+      lg: 'gap-4',
+      xl: 'gap-6',
+      '2xl': 'gap-8',
+    },
+  },
+  defaultVariants: {
+    direction: 'column',
+    space: 'md',
+  },
+});

package/src/stack/types.ts

@@ -0,0 +1,15 @@
+import type { View } from 'react-native';
+
+export type StackDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export type StackSpace = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export interface StackProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  direction?: StackDirection;
+  space?: StackSpace;
+  reversed?: boolean;
+}
+
+export interface VStackProps extends Omit<StackProps, 'direction'> {}
+export interface HStackProps extends Omit<StackProps, 'direction'> {}

package/src/stat/index.ts

@@ -0,0 +1,2 @@
+export { Stat, StatLabel, StatNumber, StatHelpText, StatArrow } from './stat';
+export type { StatProps, StatLabelProps, StatNumberProps, StatHelpTextProps, StatArrowProps, StatArrowType } from './types';

package/src/stat/stat.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import type { StatProps, StatLabelProps, StatNumberProps, StatHelpTextProps, StatArrowProps } from './types';
+import { statStyle, statLabelStyle, statNumberStyle, statHelpTextStyle, statArrowStyle } from './styles';
+
+export const Stat = React.forwardRef<
+  React.ElementRef<typeof View>,
+  StatProps
+>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={statStyle({ class: className })} {...props} />;
+});
+Stat.displayName = 'Stat';
+
+export const StatLabel = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  StatLabelProps
+>(({ className, ...props }, ref) => {
+  return <Text ref={ref} className={statLabelStyle({ class: className })} {...props} />;
+});
+StatLabel.displayName = 'StatLabel';
+
+export const StatNumber = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  StatNumberProps
+>(({ className, ...props }, ref) => {
+  return <Text ref={ref} className={statNumberStyle({ class: className })} {...props} />;
+});
+StatNumber.displayName = 'StatNumber';
+
+export const StatHelpText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  StatHelpTextProps
+>(({ className, ...props }, ref) => {
+  return <Text ref={ref} className={statHelpTextStyle({ class: className })} {...props} />;
+});
+StatHelpText.displayName = 'StatHelpText';
+
+export const StatArrow = React.forwardRef<
+  React.ElementRef<typeof View>,
+  StatArrowProps
+>(({ className, type = 'increase', ...props }, ref) => {
+  return (
+    <Text ref={ref as any} className={statArrowStyle({ type, class: className })} {...props}>
+      {type === 'increase' ? '\u25B2' : '\u25BC'}
+    </Text>
+  );
+});
+StatArrow.displayName = 'StatArrow';

package/src/stat/styles.ts

@@ -0,0 +1,34 @@
+import { tv } from 'tailwind-variants';
+
+export const statStyle = tv({
+  base: 'gap-0.5',
+  variants: {},
+});
+
+export const statLabelStyle = tv({
+  base: 'text-xs font-medium text-typography-500',
+  variants: {},
+});
+
+export const statNumberStyle = tv({
+  base: 'text-2xl font-bold text-typography-900',
+  variants: {},
+});
+
+export const statHelpTextStyle = tv({
+  base: 'text-xs text-typography-500 flex-row items-center gap-1',
+  variants: {},
+});
+
+export const statArrowStyle = tv({
+  base: 'text-xs',
+  variants: {
+    type: {
+      increase: 'text-success-600',
+      decrease: 'text-error-600',
+    },
+  },
+  defaultVariants: {
+    type: 'increase',
+  },
+});

package/src/stat/types.ts

@@ -0,0 +1,24 @@
+import type { View, Text as RNText } from 'react-native';
+
+export interface StatProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface StatLabelProps extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface StatNumberProps extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface StatHelpTextProps extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export type StatArrowType = 'increase' | 'decrease';
+
+export interface StatArrowProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  type?: StatArrowType;
+}

package/src/stepper/index.ts

@@ -0,0 +1,2 @@
+export { Stepper, StepperProvider, useStepperContext, Step, StepProvider, useStepContext, StepIndicator, StepSeparator, StepTitle, StepDescription } from './stepper';
+export type { StepperProps, StepProps, StepIndicatorProps, StepSeparatorProps, StepTitleProps, StepDescriptionProps, StepperOrientation, StepperContextValue, StepContextValue } from './types';