@wireservers-ui/react-natives 0.1.0

package/src/checkbox/checkbox.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import { Pressable } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import { useFormControlContext } from '../form-control/form-control';
+import { useCheckboxGroupContext } from './checkbox-group';
+import type { CheckboxProps, CheckboxContextValue } from './types';
+import { checkboxStyle } from './styles';
+
+export const [CheckboxProvider, useCheckboxContext] =
+  createComponentContext<CheckboxContextValue>('Checkbox');
+
+export const Checkbox = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  CheckboxProps
+>(
+  (
+    {
+      className,
+      value,
+      isChecked: isCheckedProp,
+      defaultIsChecked = false,
+      onChange,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      size: sizeProp,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [internalChecked, setInternalChecked] = useState(defaultIsChecked);
+    const groupContext = useCheckboxGroupContext();
+    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;
+
+    // Determine checked state
+    let isChecked: boolean;
+    if (groupContext) {
+      isChecked = groupContext.values.includes(value);
+    } else if (isCheckedProp !== undefined) {
+      isChecked = isCheckedProp;
+    } else {
+      isChecked = internalChecked;
+    }
+
+    const handlePress = () => {
+      if (isDisabled) return;
+
+      if (groupContext) {
+        groupContext.onChange(value);
+      } else if (isCheckedProp === undefined) {
+        setInternalChecked(!isChecked);
+      }
+      onChange?.(!isChecked);
+    };
+
+    return (
+      <CheckboxProvider value={{ isChecked, isDisabled, isInvalid, size }}>
+        <Pressable
+          ref={ref}
+          role="checkbox"
+          aria-checked={isChecked}
+          disabled={isDisabled}
+          onPress={handlePress}
+          className={checkboxStyle({ class: className })}
+          {...props}
+        >
+          {children}
+        </Pressable>
+      </CheckboxProvider>
+    );
+  },
+);
+
+Checkbox.displayName = 'Checkbox';

package/src/checkbox/index.ts

@@ -0,0 +1,14 @@
+export { CheckboxGroup } from './checkbox-group';
+export { Checkbox } from './checkbox';
+export { CheckboxIndicator } from './checkbox-indicator';
+export { CheckboxIcon } from './checkbox-icon';
+export { CheckboxLabel } from './checkbox-label';
+export type {
+  CheckboxGroupProps,
+  CheckboxGroupContextValue,
+  CheckboxProps,
+  CheckboxContextValue,
+  CheckboxIndicatorProps,
+  CheckboxIconProps,
+  CheckboxLabelProps,
+} from './types';

package/src/checkbox/styles.ts

@@ -0,0 +1,69 @@
+import { tv } from 'tailwind-variants';
+
+export const checkboxGroupStyle = tv({
+  base: 'gap-2',
+});
+
+export const checkboxStyle = tv({
+  base: 'flex-row items-center gap-2',
+});
+
+export const checkboxIndicatorStyle = tv({
+  base: 'border-2 border-outline-400 rounded 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',
+    },
+    isChecked: {
+      true: 'bg-primary-500 border-primary-500',
+    },
+    isInvalid: {
+      true: 'border-error-500',
+    },
+    isDisabled: {
+      true: 'opacity-40',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const checkboxIconStyle = tv({
+  base: 'text-typography-0',
+  variants: {
+    size: {
+      xs: 'h-3 w-3',
+      sm: 'h-3 w-3',
+      md: 'h-3.5 w-3.5',
+      lg: 'h-4 w-4',
+      xl: 'h-4 w-4',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const checkboxLabelStyle = 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/checkbox/types.ts

@@ -0,0 +1,55 @@
+import type { View, Text as RNText, Pressable } from 'react-native';
+import type { Size } from '../utils/types';
+
+export interface CheckboxGroupContextValue {
+  values: string[];
+  onChange: (value: string) => void;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  size?: Size;
+}
+
+export interface CheckboxContextValue {
+  isChecked: boolean;
+  isDisabled: boolean;
+  isInvalid: boolean;
+  size: Size;
+}
+
+export interface CheckboxGroupProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (values: string[]) => void;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  size?: Size;
+}
+
+export interface CheckboxProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  value: string;
+  isChecked?: boolean;
+  defaultIsChecked?: boolean;
+  onChange?: (isChecked: boolean) => void;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  size?: Size;
+}
+
+export interface CheckboxIndicatorProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface CheckboxIconProps {
+  as?: React.ElementType;
+  className?: string;
+}
+
+export interface CheckboxLabelProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}

package/src/circular-progress/circular-progress.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { CircularProgressProps, CircularProgressLabelProps, CircularProgressContextValue } from './types';
+import { circularProgressStyle, circularProgressLabelStyle } from './styles';
+import { BRAND_COLOR } from '../utils/brand';
+
+export const [CircularProgressProvider, useCircularProgressContext] =
+  createComponentContext<CircularProgressContextValue>('CircularProgress');
+
+const sizeMap = { sm: 32, md: 48, lg: 64, xl: 96 };
+const strokeMap = { sm: 3, md: 4, lg: 5, xl: 6 };
+
+export const CircularProgress = React.forwardRef<
+  React.ElementRef<typeof View>,
+  CircularProgressProps
+>(({ className, value = 0, size = 'md', children, ...props }, ref) => {
+  const clampedValue = Math.min(100, Math.max(0, value));
+  const dim = sizeMap[size];
+  const stroke = strokeMap[size];
+
+
+  return (
+    <CircularProgressProvider value={{ value: clampedValue, size }}>
+      <View
+        ref={ref}
+        className={circularProgressStyle({ size, class: className })}
+        accessibilityRole="progressbar"
+        accessibilityValue={{ min: 0, max: 100, now: clampedValue }}
+        {...props}
+      >
+        <View style={{ width: dim, height: dim, transform: [{ rotate: '-90deg' }] }}>
+          <View
+            style={{
+              width: dim,
+              height: dim,
+              borderRadius: dim / 2,
+              borderWidth: stroke,
+              borderColor: '#E5E7EB',
+            }}
+          />
+          <View
+            style={{
+              position: 'absolute',
+              width: dim,
+              height: dim,
+              borderRadius: dim / 2,
+              borderWidth: stroke,
+              borderColor: 'transparent',
+              borderTopColor: BRAND_COLOR,
+              borderRightColor: clampedValue > 25 ? BRAND_COLOR : 'transparent',
+              borderBottomColor: clampedValue > 50 ? BRAND_COLOR : 'transparent',
+              borderLeftColor: clampedValue > 75 ? BRAND_COLOR : 'transparent',
+            }}
+          />
+        </View>
+        {children}
+      </View>
+    </CircularProgressProvider>
+  );
+});
+
+CircularProgress.displayName = 'CircularProgress';
+
+export const CircularProgressLabel = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  CircularProgressLabelProps
+>(({ className, children, ...props }, ref) => {
+  const { value, size } = useCircularProgressContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={circularProgressLabelStyle({ size, class: className })}
+      {...props}
+    >
+      {children ?? `${value}%`}
+    </Text>
+  );
+});
+
+CircularProgressLabel.displayName = 'CircularProgressLabel';

package/src/circular-progress/index.ts

@@ -0,0 +1,2 @@
+export { CircularProgress, CircularProgressProvider, useCircularProgressContext, CircularProgressLabel } from './circular-progress';
+export type { CircularProgressProps, CircularProgressLabelProps, CircularProgressSize, CircularProgressContextValue } from './types';

package/src/circular-progress/styles.ts

@@ -0,0 +1,31 @@
+import { tv } from 'tailwind-variants';
+
+export const circularProgressStyle = tv({
+  base: 'items-center justify-center',
+  variants: {
+    size: {
+      sm: 'h-8 w-8',
+      md: 'h-12 w-12',
+      lg: 'h-16 w-16',
+      xl: 'h-24 w-24',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const circularProgressLabelStyle = tv({
+  base: 'absolute font-semibold text-typography-700',
+  variants: {
+    size: {
+      sm: 'text-2xs',
+      md: 'text-xs',
+      lg: 'text-sm',
+      xl: 'text-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/circular-progress/types.ts

@@ -0,0 +1,18 @@
+import type { View, Text as RNText } from 'react-native';
+
+export type CircularProgressSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface CircularProgressContextValue {
+  value: number;
+  size: CircularProgressSize;
+}
+
+export interface CircularProgressProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  value?: number;
+  size?: CircularProgressSize;
+}
+
+export interface CircularProgressLabelProps extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}

package/src/code/code.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import type { CodeProps, CodeBlockProps } from './types';
+import { codeStyle, codeBlockStyle, codeBlockTextStyle } from './styles';
+
+export const Code = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  CodeProps
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <Text
+      ref={ref}
+      className={codeStyle({ variant, class: className })}
+      {...props}
+    />
+  );
+});
+
+Code.displayName = 'Code';
+
+export const CodeBlock = React.forwardRef<
+  React.ElementRef<typeof View>,
+  CodeBlockProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <View ref={ref} className={codeBlockStyle({ class: className })} {...props}>
+      {typeof children === 'string' ? (
+        <Text className={codeBlockTextStyle({})}>{children}</Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+});
+
+CodeBlock.displayName = 'CodeBlock';

package/src/code/index.ts

@@ -0,0 +1,2 @@
+export { Code, CodeBlock } from './code';
+export type { CodeProps, CodeBlockProps, CodeVariant } from './types';

package/src/code/styles.ts

@@ -0,0 +1,25 @@
+import { tv } from 'tailwind-variants';
+
+export const codeStyle = tv({
+  base: 'font-mono text-sm rounded px-1 py-0.5',
+  variants: {
+    variant: {
+      subtle: 'bg-background-100 text-typography-800',
+      outline: 'border border-outline-200 text-typography-800',
+      solid: 'bg-typography-900 text-typography-0',
+    },
+  },
+  defaultVariants: {
+    variant: 'subtle',
+  },
+});
+
+export const codeBlockStyle = tv({
+  base: 'bg-background-950 rounded-lg p-4 overflow-hidden',
+  variants: {},
+});
+
+export const codeBlockTextStyle = tv({
+  base: 'font-mono text-sm text-typography-50',
+  variants: {},
+});

package/src/code/types.ts

@@ -0,0 +1,13 @@
+import type { View, Text as RNText } from 'react-native';
+
+export type CodeVariant = 'subtle' | 'outline' | 'solid';
+
+export interface CodeProps extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+  variant?: CodeVariant;
+}
+
+export interface CodeBlockProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  children: React.ReactNode;
+}

package/src/collapsible/collapsible.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { View, Pressable } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps, CollapsibleContextValue } from './types';
+import { collapsibleStyle, collapsibleTriggerStyle, collapsibleContentStyle } from './styles';
+
+export const [CollapsibleProvider, useCollapsibleContext] =
+  createComponentContext<CollapsibleContextValue>('Collapsible');
+
+export const Collapsible = React.forwardRef<
+  React.ElementRef<typeof View>,
+  CollapsibleProps
+>(({ className, isOpen: controlledOpen, onOpenChange, defaultOpen = false, children, ...props }, ref) => {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  const onToggle = () => {
+    const next = !isOpen;
+    setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  return (
+    <CollapsibleProvider value={{ isOpen, onToggle }}>
+      <View ref={ref} className={collapsibleStyle({ class: className })} {...props}>
+        {children}
+      </View>
+    </CollapsibleProvider>
+  );
+});
+Collapsible.displayName = 'Collapsible';
+
+export const CollapsibleTrigger = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  CollapsibleTriggerProps
+>(({ className, children, ...props }, ref) => {
+  const { onToggle } = useCollapsibleContext();
+  return (
+    <Pressable ref={ref} onPress={onToggle} className={collapsibleTriggerStyle({ class: className })} accessibilityRole="button" {...props}>
+      {children}
+    </Pressable>
+  );
+});
+CollapsibleTrigger.displayName = 'CollapsibleTrigger';
+
+export const CollapsibleContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  CollapsibleContentProps
+>(({ className, children, ...props }, ref) => {
+  const { isOpen } = useCollapsibleContext();
+  if (!isOpen) return null;
+  return (
+    <View ref={ref} className={collapsibleContentStyle({ class: className })} {...props}>
+      {children}
+    </View>
+  );
+});
+CollapsibleContent.displayName = 'CollapsibleContent';

package/src/collapsible/index.ts

@@ -0,0 +1,2 @@
+export { Collapsible, CollapsibleProvider, useCollapsibleContext, CollapsibleTrigger, CollapsibleContent } from './collapsible';
+export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps, CollapsibleContextValue } from './types';

package/src/collapsible/styles.ts

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const collapsibleStyle = tv({ base: 'w-full', variants: {} });
+export const collapsibleTriggerStyle = tv({ base: 'w-full', variants: {} });
+export const collapsibleContentStyle = tv({ base: 'overflow-hidden', variants: {} });

package/src/collapsible/types.ts

@@ -0,0 +1,21 @@
+import type { View, Pressable } from 'react-native';
+
+export interface CollapsibleContextValue {
+  isOpen: boolean;
+  onToggle: () => void;
+}
+
+export interface CollapsibleProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+}
+
+export interface CollapsibleTriggerProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}
+
+export interface CollapsibleContentProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}

package/src/color-picker/color-picker-box.tsx

@@ -0,0 +1,115 @@
+import React, { useCallback, useRef } from 'react';
+import { View, Platform } from 'react-native';
+import { useColorPickerContext } from './color-picker';
+import type { ColorPickerBoxProps } from './types';
+import { colorPickerBoxStyle } from './styles';
+import { hexToHsv, hsvToHex, hueToHex, clamp } from './color-utils';
+import { usePointerDrag } from './use-pointer-drag';
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+const rnSvg = require('react-native-svg');
+const Svg: React.ComponentType<any> = rnSvg.default || rnSvg.Svg;
+const Rect: React.ComponentType<any> = rnSvg.Rect;
+const Defs: React.ComponentType<any> = rnSvg.Defs;
+const SvgLinearGradient: React.ComponentType<any> = rnSvg.LinearGradient;
+const Stop: React.ComponentType<any> = rnSvg.Stop;
+const SvgCircle: React.ComponentType<any> = rnSvg.Circle;
+/* eslint-enable @typescript-eslint/no-var-requires */
+
+const DEFAULT_SIZE = 200;
+const SELECTOR_RADIUS = 7;
+const HIT_SLOP = 14;
+const isWeb = Platform.OS === 'web';
+
+export const ColorPickerBox = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ColorPickerBoxProps
+>(({ className, size = DEFAULT_SIZE, ...props }, ref) => {
+  const { color, onColorChange } = useColorPickerContext();
+
+  const { h, s, v } = hexToHsv(color);
+  const hueColor = hueToHex(h);
+
+  const hRef = useRef(h);
+  const sRef = useRef(s);
+  const vRef = useRef(v);
+  hRef.current = h;
+  sRef.current = s;
+  vRef.current = v;
+
+  const onColorChangeRef = useRef(onColorChange);
+  onColorChangeRef.current = onColorChange;
+
+  const sizeRef = useRef(size);
+  sizeRef.current = size;
+
+  const svSelectorX = (s / 100) * size;
+  const svSelectorY = (1 - v / 100) * size;
+
+  const svSelRef = useRef({ x: svSelectorX, y: svSelectorY });
+  svSelRef.current = { x: svSelectorX, y: svSelectorY };
+
+  const drag = usePointerDrag(
+    useCallback((relX: number, relY: number) => {
+      const sz = sizeRef.current;
+      const newS = clamp(relX / sz, 0, 1) * 100;
+      const newV = (1 - clamp(relY / sz, 0, 1)) * 100;
+      onColorChangeRef.current(hsvToHex(hRef.current, Math.round(newS), Math.round(newV)));
+    }, []),
+    useCallback((relX: number, relY: number) => {
+      const { x, y } = svSelRef.current;
+      const dx = relX - x;
+      const dy = relY - y;
+      return Math.sqrt(dx * dx + dy * dy) <= HIT_SLOP;
+    }, []),
+    'crosshair',
+  );
+
+  const webStyle = isWeb
+    ? { touchAction: 'none' as any, userSelect: 'none' as any }
+    : {};
+
+  return (
+    <View
+      ref={ref}
+      className={colorPickerBoxStyle({ class: className })}
+      style={{ width: size, height: size, borderRadius: 4, overflow: 'hidden', ...webStyle }}
+      {...drag.handlers}
+      {...props}
+    >
+      <Svg width={size} height={size} style={{ pointerEvents: 'none' as any }}>
+        <Defs>
+          <SvgLinearGradient id="cpb-satGrad" x1="0" y1="0" x2="1" y2="0">
+            <Stop offset="0" stopColor="#FFFFFF" stopOpacity={1} />
+            <Stop offset="1" stopColor="#FFFFFF" stopOpacity={0} />
+          </SvgLinearGradient>
+          <SvgLinearGradient id="cpb-valGrad" x1="0" y1="0" x2="0" y2="1">
+            <Stop offset="0" stopColor="#000000" stopOpacity={0} />
+            <Stop offset="1" stopColor="#000000" stopOpacity={1} />
+          </SvgLinearGradient>
+        </Defs>
+        <Rect x={0} y={0} width={size} height={size} fill={hueColor} />
+        <Rect x={0} y={0} width={size} height={size} fill="url(#cpb-satGrad)" />
+        <Rect x={0} y={0} width={size} height={size} fill="url(#cpb-valGrad)" />
+        <SvgCircle
+          cx={svSelectorX}
+          cy={svSelectorY}
+          r={SELECTOR_RADIUS}
+          fill="none"
+          stroke="#FFFFFF"
+          strokeWidth={2.5}
+        />
+        <SvgCircle
+          cx={svSelectorX}
+          cy={svSelectorY}
+          r={SELECTOR_RADIUS + 1.5}
+          fill="none"
+          stroke="rgba(0,0,0,0.3)"
+          strokeWidth={1}
+        />
+      </Svg>
+    </View>
+  );
+});
+
+ColorPickerBox.displayName = 'ColorPickerBox';