@gogitcms/design-system 0.15.0-next.3

package/src/components/Icon.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+import { icons, IconName } from "../icons";
+
+export type IconProps = {
+  name: IconName;
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+};
+
+// Native: react-native-svg. (Web uses Icon.web.tsx via platform resolution.)
+export function Icon({ name, size = 18, color = "#000", strokeWidth = 1.5 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {icons[name].map((d, i) => (
+        <Path
+          key={i}
+          d={d}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      ))}
+    </Svg>
+  );
+}

package/src/components/Icon.web.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { icons, IconName } from "../icons";
+
+export type IconProps = {
+  name: IconName;
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+};
+
+// Web: a raw <svg> renders directly inside the react-native-web DOM tree.
+export function Icon({ name, size = 18, color = "currentColor", strokeWidth = 1.5 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{ display: "block", flexShrink: 0 }}
+      aria-hidden
+    >
+      {icons[name].map((d, i) => (
+        <path key={i} d={d} />
+      ))}
+    </svg>
+  );
+}

package/src/components/Input.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useRef, useState } from "react";
+import { View, TextInput, StyleProp, ViewStyle } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+
+export type InputProps = {
+  value: string;
+  onChangeText: (text: string) => void;
+  label?: string;
+  placeholder?: string;
+  secureTextEntry?: boolean;
+  mono?: boolean;
+  autoCapitalize?: "none" | "sentences" | "words" | "characters";
+  size?: "md" | "lg";
+  autoFocus?: boolean;
+  onSubmitEditing?: () => void;
+  keyboardType?: "default" | "numeric";
+  // editable defaults to true; false renders a muted, read-only field (still
+  // shows the value) — used to reflect a permission the caller lacks.
+  editable?: boolean;
+  // error highlights the field with the danger border color (e.g. a failed save
+  // or validation naming this field).
+  error?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  // Optional focus/blur passthroughs (used by collaborative presence tracking).
+  onFocus?: () => void;
+  onBlur?: () => void;
+  // When this number changes to a truthy value, the field programmatically
+  // focuses itself (used to jump to a peer's field from a presence avatar).
+  focusSignal?: number;
+};
+
+export function Input({
+  value,
+  onChangeText,
+  label,
+  placeholder,
+  secureTextEntry,
+  mono,
+  autoCapitalize = "none",
+  size = "lg",
+  autoFocus,
+  onSubmitEditing,
+  keyboardType,
+  editable = true,
+  error = false,
+  style,
+  testID,
+  onFocus,
+  onBlur,
+  focusSignal,
+}: InputProps) {
+  const t = useTheme();
+  const [focused, setFocused] = useState(false);
+  const ref = useRef<TextInput>(null);
+  useEffect(() => {
+    if (focusSignal) ref.current?.focus();
+  }, [focusSignal]);
+
+  return (
+    <View style={[{ gap: t.space(2) }, style]}>
+      {label ? (
+        <Text variant="label" color="tertiary">
+          {label}
+        </Text>
+      ) : null}
+      <TextInput
+        ref={ref}
+        testID={testID}
+        accessibilityLabel={label}
+        value={value}
+        onChangeText={onChangeText}
+        editable={editable}
+        placeholder={placeholder}
+        placeholderTextColor={t.color.textTertiary}
+        secureTextEntry={secureTextEntry}
+        autoCapitalize={autoCapitalize}
+        autoFocus={autoFocus}
+        onSubmitEditing={onSubmitEditing}
+        keyboardType={keyboardType}
+        onFocus={() => { setFocused(true); onFocus?.(); }}
+        onBlur={() => { setFocused(false); onBlur?.(); }}
+        // @ts-expect-error react-native-web accepts CSS outline; RN's TextStyle
+        // has no outlineStyle, and the mismatch is reported on the whole style
+        // object rather than on the property, so the suppression belongs here.
+        style={{
+          height: t.control[size],
+          paddingHorizontal: t.space(3),
+          borderRadius: t.radius.md,
+          borderWidth: 1,
+          borderColor: error
+            ? t.color.diffDelFg
+            : focused && editable
+            ? t.color.borderStrong
+            : t.color.borderDefault,
+          backgroundColor: editable ? t.color.surfaceRaised : t.color.surfaceSunken,
+          color: editable ? t.color.textPrimary : t.color.textSecondary,
+          fontFamily: mono ? t.font.mono : t.font.sans,
+          fontSize: mono ? t.type.mono.size : t.type.body.size,
+          outlineStyle: "none",
+        }}
+      />
+    </View>
+  );
+}