@medway-ui/native 1.0.2

package/src/components/Input.tsx

@@ -0,0 +1,439 @@
+import {
+  useState,
+  useCallback,
+  useEffect,
+  cloneElement,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+
+import {
+  View,
+  TextInput,
+  Text,
+  Pressable,
+  type TextInputProps,
+  type ViewProps,
+  type TextProps,
+} from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  interpolate,
+  Easing,
+} from "react-native-reanimated";
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  ChevronDown,
+  Hide,
+  Lock,
+  Mail,
+  Show,
+  TriangleWarning,
+} from "@medway-ui/icons/native";
+import { cn } from "@/lib/utils";
+
+export type InputType = "text" | "email" | "numeric" | "password";
+
+type IconElement = ReactElement<{ size?: number; strokeWidth?: number }>;
+
+export interface InputProps
+  extends Omit<TextInputProps, "size">,
+    Omit<VariantProps<typeof inputVariants>, "focused" | "disabled"> {
+  type?: InputType;
+  invalid?: boolean;
+  iconLeft?: IconElement;
+  iconRight?: IconElement;
+  label?: string;
+}
+
+export interface InputPasswordProps
+  extends Omit<TextInputProps, "size">,
+    Omit<VariantProps<typeof inputVariants>, "focused" | "disabled"> {
+  invalid?: boolean;
+  label?: string;
+}
+
+export interface InputNumericProps
+  extends Omit<TextInputProps, "size" | "onChangeText">,
+    Omit<VariantProps<typeof inputVariants>, "focused" | "disabled"> {
+  invalid?: boolean;
+  iconLeft?: IconElement;
+  onChangeText?: (value: string) => void;
+  min?: number;
+  allowNegative?: boolean;
+  label?: string;
+}
+
+export interface InputLabelProps {
+  children?: ReactNode;
+  floated?: boolean;
+  disabled?: boolean;
+}
+
+export interface InputTextProps extends TextProps {
+  invalid?: boolean;
+}
+
+const INPUT_ICON_SIZE_LG = 24;
+const INPUT_ICON_SIZE_MD = 20;
+const INPUT_ICON_STROKE_WIDTH = 1.6;
+const CHEVRON_SIZE_LG = 10;
+const CHEVRON_SIZE_MD = 8;
+
+const inputVariants = cva(
+  "w-full rounded-md border-2 border-gray-stroke-muted bg-surface-card px-4 text-gray-foreground",
+  {
+    variants: {
+      size: {
+        lg: "h-12 text-md",
+        md: "h-10 text-sm",
+      },
+      invalid: {
+        true: "border-feedback-error-stroke",
+        false: "",
+      },
+      focused: {
+        true: "border-gray-stroke-emphasis",
+        false: "",
+      },
+      disabled: {
+        true: "bg-gray-background-soft-muted text-gray-foreground-muted",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      size: "lg",
+      invalid: false,
+      focused: false,
+      disabled: false,
+    },
+  }
+);
+
+function InputWrapper({ className, ...props }: ViewProps) {
+  return <View className={cn("flex-col gap-2", className)} {...props} />;
+}
+
+function InputField({ className, ...props }: ViewProps) {
+  return <View className={cn("relative", className)} {...props} />;
+}
+
+function FloatingLabel({ children, floated = false, disabled = false }: InputLabelProps) {
+  const progress = useSharedValue(floated ? 1 : 0);
+
+  useEffect(() => {
+    progress.value = withTiming(floated ? 1 : 0, { duration: 200, easing: Easing.out(Easing.ease) });
+  }, [floated]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: interpolate(progress.value, [0, 1], [-6, -22]) }],
+    fontSize: interpolate(progress.value, [0, 1], [15, 12]),
+  }));
+
+  return (
+    <Animated.Text
+      style={[
+        animatedStyle,
+        {
+          position: "absolute",
+          left: 16,
+          top: "50%",
+          zIndex: 10,
+        },
+      ]}
+      className={cn(
+        "font-medium",
+        disabled ? "text-gray-foreground-muted" : "text-gray-foreground"
+      )}
+    >
+      {children}
+    </Animated.Text>
+  );
+}
+
+function InputLabel({ children, floated = false, disabled = false }: InputLabelProps) {
+  return <FloatingLabel floated={floated} disabled={disabled}>{children}</FloatingLabel>;
+}
+
+function InputText({ invalid = false, className, ...props }: InputTextProps) {
+  return (
+    <Text
+      className={cn(
+        "text-xs -mt-1",
+        invalid ? "text-feedback-error-foreground" : "text-gray-foreground",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputAdornment({ className, ...props }: ViewProps) {
+  return <View className={cn("relative flex-row w-full", className)} {...props} />;
+}
+
+function InputStartIcon({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn("absolute left-4 top-1/2 z-10 flex-row items-center -translate-y-1/2", className)}
+      {...props}
+    />
+  );
+}
+
+function InputEndIcon({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn("absolute right-4 top-1/2 z-10 flex-row items-center -translate-y-1/2", className)}
+      {...props}
+    />
+  );
+}
+
+function applyInputIconSize(
+  icon: ReactElement<{ size?: number; strokeWidth?: number }>,
+  size: VariantProps<typeof inputVariants>["size"] = "lg"
+): ReactElement {
+  const iconSize = size === "md" ? INPUT_ICON_SIZE_MD : INPUT_ICON_SIZE_LG;
+  return cloneElement(icon, { size: iconSize, strokeWidth: INPUT_ICON_STROKE_WIDTH });
+}
+
+function InputPassword({ className, size = "lg", invalid = false, label, ...props }: InputPasswordProps) {
+  const [visible, setVisible] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const hasValue = Boolean(props.value || props.defaultValue);
+  const isFloated = focused || hasValue;
+
+  return (
+    <InputAdornment>
+      <InputStartIcon>
+        {applyInputIconSize(<Lock />, size)}
+      </InputStartIcon>
+      <View className="relative flex-1">
+        {label && <InputLabel floated={isFloated} disabled={props.editable === false}>{label}</InputLabel>}
+        <TextInput
+          secureTextEntry={!visible}
+          className={cn(
+            inputVariants({ size, invalid, focused, disabled: props.editable === false }),
+            "pl-12 pr-12",
+            className
+          )}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          accessibilityLabel={label}
+          {...props}
+        />
+      </View>
+      <InputEndIcon>
+        <Pressable
+          onPress={() => setVisible((v) => !v)}
+          disabled={props.editable === false}
+          accessibilityLabel={visible ? "Hide password" : "Show password"}
+        >
+          {applyInputIconSize(visible ? <Hide /> : <Show />, size)}
+        </Pressable>
+      </InputEndIcon>
+    </InputAdornment>
+  );
+}
+
+function InputNumeric({
+  className,
+  size = "lg",
+  invalid = false,
+  iconLeft,
+  min,
+  value,
+  defaultValue,
+  onChangeText,
+  editable = true,
+  allowNegative = false,
+  label,
+  ...props
+}: InputNumericProps) {
+  const [internalValue, setInternalValue] = useState(String(defaultValue ?? ""));
+  const isControlled = value !== undefined;
+  const displayValue = isControlled ? String(value ?? "") : internalValue;
+  const [focused, setFocused] = useState(false);
+  const isFloated = focused || displayValue !== "";
+
+  const numericValue = parseFloat(displayValue.replace(",", ".")) || 0;
+
+  const handleStep = useCallback(
+    (delta: number) => {
+      let next = numericValue + delta;
+      if (min !== undefined && next < min) next = min;
+      const nextStr = String(next);
+      if (!isControlled) setInternalValue(nextStr);
+      onChangeText?.(nextStr);
+    },
+    [numericValue, min, isControlled, onChangeText]
+  );
+
+  const chevronSize = size === "md" ? CHEVRON_SIZE_MD : CHEVRON_SIZE_LG;
+
+  return (
+    <InputAdornment>
+      {iconLeft && (
+        <InputStartIcon>
+          {applyInputIconSize(iconLeft, size)}
+        </InputStartIcon>
+      )}
+      <View className="relative flex-1">
+        {label && <InputLabel floated={isFloated} disabled={!editable}>{label}</InputLabel>}
+        <TextInput
+          keyboardType={allowNegative ? "numbers-and-punctuation" : "numeric"}
+          value={displayValue}
+          onChangeText={(text) => {
+            const cleaned = allowNegative
+              ? text.replace(/[^0-9\-]/g, "").replace(/(?!^)-/g, "")
+              : text.replace(/[^0-9]/g, "");
+            if (!isControlled) setInternalValue(cleaned);
+            onChangeText?.(cleaned);
+          }}
+          editable={editable}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          className={cn(
+            inputVariants({ size, invalid, focused, disabled: !editable }),
+            iconLeft ? "pl-12" : "",
+            "pr-12",
+            className
+          )}
+          accessibilityLabel={label}
+          {...props}
+        />
+      </View>
+      <InputEndIcon>
+        <View className="flex-col">
+          <Pressable
+            disabled={!editable}
+            onPress={() => handleStep(1)}
+            className="items-center justify-center p-1"
+            accessibilityLabel="Increase value"
+          >
+            <ChevronDown
+              style={{ transform: [{ rotate: "180deg" }] }}
+              size={chevronSize}
+              strokeWidth={3}
+            />
+          </Pressable>
+          <Pressable
+            disabled={!editable}
+            onPress={() => handleStep(-1)}
+            className="items-center justify-center p-1"
+            accessibilityLabel="Decrease value"
+          >
+            <ChevronDown size={chevronSize} strokeWidth={3} />
+          </Pressable>
+        </View>
+      </InputEndIcon>
+    </InputAdornment>
+  );
+}
+
+function Input({
+  className,
+  type = "text",
+  size = "lg",
+  invalid = false,
+  iconLeft,
+  iconRight,
+  label,
+  value,
+  defaultValue,
+  editable = true,
+  ...props
+}: InputProps) {
+  const [focused, setFocused] = useState(false);
+  const hasValue = Boolean(value || defaultValue);
+  const isFloated = focused || hasValue;
+
+  if (type === "numeric") {
+    return (
+      <InputNumeric
+        className={className}
+        size={size}
+        invalid={invalid}
+        iconLeft={iconLeft}
+        value={value as string}
+        defaultValue={defaultValue as string}
+        editable={editable}
+        label={label}
+        {...props}
+      />
+    );
+  }
+
+  if (type === "password") {
+    return (
+      <InputPassword
+        className={className}
+        size={size}
+        invalid={invalid}
+        value={value as string}
+        defaultValue={defaultValue as string}
+        editable={editable}
+        label={label}
+        {...props}
+      />
+    );
+  }
+
+  const resolvedIconLeft = iconLeft ?? (type === "email" ? <Mail /> : undefined);
+  const showInvalidRightIcon = invalid && (type === "text" || type === "email");
+  const resolvedIconRight = showInvalidRightIcon
+    ? <TriangleWarning />
+    : iconRight;
+
+  return (
+    <InputAdornment>
+      {resolvedIconLeft && (
+        <InputStartIcon>
+          {applyInputIconSize(resolvedIconLeft, size)}
+        </InputStartIcon>
+      )}
+      <View className="relative flex-1">
+        {label && <InputLabel floated={isFloated} disabled={!editable}>{label}</InputLabel>}
+        <TextInput
+          keyboardType={type === "email" ? "email-address" : "default"}
+          value={value as string}
+          defaultValue={defaultValue as string}
+          editable={editable}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          className={cn(
+            inputVariants({ size, invalid, focused, disabled: !editable }),
+            resolvedIconLeft ? "pl-12" : "",
+            resolvedIconRight ? "pr-12" : "",
+            className
+          )}
+          accessibilityLabel={label}
+          {...props}
+        />
+      </View>
+      {resolvedIconRight && (
+        <InputEndIcon>
+          {applyInputIconSize(resolvedIconRight, size)}
+        </InputEndIcon>
+      )}
+    </InputAdornment>
+  );
+}
+
+export {
+  Input,
+  InputAdornment,
+  applyInputIconSize,
+  InputEndIcon,
+  InputField,
+  InputLabel,
+  InputNumeric,
+  InputPassword,
+  InputStartIcon,
+  InputText,
+  InputWrapper,
+  inputVariants,
+};

package/src/components/Label.tsx

@@ -0,0 +1,95 @@
+import { type ReactNode } from "react";
+import { Pressable, Text, type PressableProps } from "react-native";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+interface LabelProps extends PressableProps, VariantProps<typeof labelVariants> {
+  children?: ReactNode;
+  block?: boolean;
+  disabled?: boolean;
+}
+
+const labelVariants = cva(
+  "flex-row items-center gap-3 shrink-0",
+  {
+    variants: {
+      variant: {
+        regular: "text-gray-foreground",
+      },
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-md",
+      },
+    },
+    defaultVariants: {
+      variant: "regular",
+      size: "md",
+    },
+  }
+);
+
+const labelTextVariants = cva("font-medium leading-none select-none", {
+  variants: {
+    variant: {
+      regular: "text-gray-foreground",
+    },
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-md",
+    },
+    disabled: {
+      true: "text-gray-foreground-muted",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    variant: "regular",
+    size: "md",
+    disabled: false,
+  },
+});
+
+function Label({ className, variant, size, block, disabled = false, children, ...props }: LabelProps) {
+  if (block) {
+    return (
+      <Pressable
+        disabled={disabled}
+        className={cn(
+          "flex-col items-start justify-center gap-4 rounded-lg border border-gray-stroke-muted p-4",
+          disabled ? "opacity-50" : "",
+          className
+        )}
+        {...props}
+      >
+        {typeof children === "string" ? (
+          <Text className={cn(labelTextVariants({ variant, size, disabled }))}>
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+      </Pressable>
+    );
+  }
+
+  return (
+    <Pressable
+      disabled={disabled}
+      className={cn(labelVariants({ variant, size }), className)}
+      {...props}
+    >
+      {typeof children === "string" ? (
+        <Text className={cn(labelTextVariants({ variant, size, disabled }))}>
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
+
+export { Label, labelVariants, labelTextVariants };
+export type { LabelProps };

package/src/components/Loading.tsx

@@ -0,0 +1,54 @@
+import { useEffect } from "react";
+import Svg, { Path } from "react-native-svg";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  cancelAnimation,
+  Easing,
+} from "react-native-reanimated";
+import { cn } from "@/lib/utils";
+
+interface LoadingProps {
+  size?: number;
+  className?: string;
+  color?: string;
+}
+
+function Loading({ size = 24, color = "currentColor", className }: LoadingProps) {
+  const rotation = useSharedValue(0);
+
+  useEffect(() => {
+    rotation.value = withRepeat(
+      withTiming(360, { duration: 1000, easing: Easing.linear }),
+      -1,
+      false
+    );
+    return () => cancelAnimation(rotation);
+  }, [rotation]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }));
+
+  return (
+    <Animated.View style={animatedStyle} className={cn(className)}>
+      <Svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <Path d="M21 12a9 9 0 1 1-6.219-8.56" />
+      </Svg>
+    </Animated.View>
+  );
+}
+
+export { Loading };
+export type { LoadingProps };

package/src/components/Popover.tsx

@@ -0,0 +1,46 @@
+import * as PopoverPrimitive from "@rn-primitives/popover";
+import { cn } from "@/lib/utils";
+
+interface PopoverContentProps extends PopoverPrimitive.ContentProps {
+  sideOffset?: number;
+}
+
+function Popover({ ...props }: PopoverPrimitive.RootProps) {
+  return <PopoverPrimitive.Root {...props} />;
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.TriggerProps) {
+  return <PopoverPrimitive.Trigger {...props} />;
+}
+
+function PopoverClose({ ...props }: PopoverPrimitive.CloseProps) {
+  return <PopoverPrimitive.Close {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  children,
+  ...props
+}: PopoverContentProps) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Overlay className="absolute inset-0" />
+      <PopoverPrimitive.Content
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 rounded-md border border-gray-background-fill bg-surface-card p-4 shadow-md",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  );
+}
+
+export { Popover, PopoverClose, PopoverContent, PopoverTrigger };
+export type { PopoverContentProps };

package/src/components/RadioGroup.tsx

@@ -0,0 +1,62 @@
+import { View } from "react-native";
+import * as RadioGroupPrimitive from "@rn-primitives/radio-group";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+interface RadioGroupItemProps
+  extends RadioGroupPrimitive.ItemProps,
+    VariantProps<typeof radioGroupVariants> {}
+
+const INNER_DOT_SIZES: Record<"sm" | "md" | "lg", number> = {
+  sm: 8,
+  md: 10,
+  lg: 14,
+};
+
+const radioGroupVariants = cva(
+  "items-center justify-center rounded-full border-2 shrink-0 bg-surface-card border-gray-stroke-muted",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6",
+      },
+      variant: {
+        regular: "",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "regular",
+    },
+  }
+);
+
+function RadioGroup({ className, ...props }: RadioGroupPrimitive.RootProps) {
+  return (
+    <RadioGroupPrimitive.Root className={cn("gap-3", className)} {...props} />
+  );
+}
+
+function RadioGroupItem({ className, size = "md", variant, ...props }: RadioGroupItemProps) {
+  const resolvedSize = size ?? "md";
+  const dotSize = INNER_DOT_SIZES[resolvedSize];
+
+  return (
+    <RadioGroupPrimitive.Item
+      className={cn(radioGroupVariants({ size, variant }), className)}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="items-center justify-center">
+        <View
+          style={{ width: dotSize, height: dotSize, borderRadius: dotSize / 2 }}
+          className="bg-primary-background-fill"
+        />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export { RadioGroup, RadioGroupItem, radioGroupVariants };
+export type { RadioGroupItemProps };