@scripso-homepad/ui 0.3.7 → 0.3.9

package/src/components/Input.tsx

@@ -7,6 +7,7 @@ import {
   type ReactNode,
 } from "react";
 import {
+  Pressable,
   StyleSheet,
   Text,
   TextInput,
@@ -18,6 +19,8 @@ import {
   type TextStyle,
   type ViewStyle,
 } from "react-native";
+import { EyeIcon } from "../icons/EyeIcon";
+import { EyeOffIcon } from "../icons/EyeOffIcon";
 import {
   getInputFieldStyles,
   inputFieldMetrics,
@@ -58,10 +61,16 @@ export interface InputProps extends TextInputProps {
   containerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<TextStyle>;
   className?: string;
+  /** CSS classes for the bordered field container (web). */
+  fieldClassName?: string;
+  /** Styles merged into the bordered field container. */
+  fieldStyle?: StyleProp<ViewStyle>;
   labelClassName?: string;
   inputClassName?: string;
   errorClassName?: string;
   hintClassName?: string;
+  /** When `secureTextEntry` is set, show a toggleable eye icon. Pass `false` to disable. */
+  showPasswordToggle?: boolean;
 }
 
 export function Input({
@@ -73,25 +82,37 @@ export function Input({
   containerStyle,
   style,
   className,
+  fieldClassName,
+  fieldStyle,
   labelClassName,
   inputClassName,
   errorClassName,
   hintClassName,
   editable = true,
+  secureTextEntry,
+  showPasswordToggle,
   onFocus,
   onBlur,
   ...props
 }: InputProps) {
   const wrapperRef = useRef<ComponentRef<typeof View>>(null);
+  const fieldRef = useRef<ComponentRef<typeof View>>(null);
   const inputRef = useRef<ComponentRef<typeof TextInput>>(null);
   const helperRef = useRef<ComponentRef<typeof Text>>(null);
   const [focused, setFocused] = useState(false);
+  const [passwordVisible, setPasswordVisible] = useState(false);
 
   useApplyWebClassName(wrapperRef, className);
+  useApplyWebClassName(fieldRef, fieldClassName);
   useApplyWebClassName(inputRef, inputClassName);
   useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
 
   const isDisabled = editable === false;
+  const passwordToggleEnabled =
+    secureTextEntry === true && showPasswordToggle !== false && rightIcon == null;
+  const effectiveSecureTextEntry = passwordToggleEnabled
+    ? !passwordVisible
+    : secureTextEntry;
   const visualState = resolveInputVisualState({
     focused,
     error: Boolean(error),
@@ -112,6 +133,30 @@ export function Input({
 
   const helperMessage = error ?? hint;
 
+  function togglePasswordVisibility() {
+    if (!isDisabled) {
+      setPasswordVisible((visible) => !visible);
+    }
+  }
+
+  const trailingIcon = passwordToggleEnabled ? (
+    <Pressable
+      onPress={togglePasswordVisibility}
+      disabled={isDisabled}
+      accessibilityRole="button"
+      accessibilityLabel={passwordVisible ? "Hide password" : "Show password"}
+      hitSlop={8}
+      style={styles.iconPressable}
+    >
+      {renderInputIcon(
+        passwordVisible ? <EyeOffIcon /> : <EyeIcon />,
+        iconColor,
+      )}
+    </Pressable>
+  ) : rightIcon ? (
+    renderInputIcon(rightIcon, iconColor)
+  ) : null;
+
   return (
     <View ref={wrapperRef} style={[styles.wrapper, containerStyle]}>
       {label ? (
@@ -120,7 +165,10 @@ export function Input({
         </Label>
       ) : null}
       <View style={fieldStyles.outline}>
-        <View style={[inputFieldMetrics.container, fieldStyles.container]}>
+        <View
+          ref={fieldRef}
+          style={[inputFieldMetrics.container, fieldStyles.container, fieldStyle]}
+        >
           {leftIcon ? (
             <View style={styles.iconSlot}>{renderInputIcon(leftIcon, iconColor)}</View>
           ) : null}
@@ -133,13 +181,14 @@ export function Input({
             ]}
             placeholderTextColor={fieldStyles.placeholder}
             editable={editable}
+            secureTextEntry={effectiveSecureTextEntry}
             onFocus={handleFocus}
             onBlur={handleBlur}
             accessibilityState={{ disabled: isDisabled }}
             {...props}
           />
-          {rightIcon ? (
-            <View style={styles.iconSlot}>{renderInputIcon(rightIcon, iconColor)}</View>
+          {trailingIcon ? (
+            <View style={styles.iconSlot}>{trailingIcon}</View>
           ) : null}
         </View>
       </View>
@@ -164,14 +213,20 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     flexShrink: 0,
   },
+  iconPressable: {
+    width: INPUT_ICON_SIZE,
+    height: INPUT_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+  },
   error: {
     fontSize: 12,
-    lineHeight: 12,
+    lineHeight: 16,
     color: colors.inputError,
   },
   hint: {
     fontSize: 12,
-    lineHeight: 12,
+    lineHeight: 16,
     color: colors.stormGray300,
   },
 });

package/src/components/PhoneInput.tsx

@@ -161,12 +161,12 @@ const styles = StyleSheet.create({
   },
   error: {
     fontSize: 12,
-    lineHeight: 12,
+    lineHeight: 16,
     color: colors.inputError,
   },
   hint: {
     fontSize: 12,
-    lineHeight: 12,
+    lineHeight: 16,
     color: colors.stormGray300,
   },
 });

package/src/icons/EyeIcon.tsx

@@ -1,48 +1,36 @@
-import { StyleSheet, View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { EYE_OPEN_OUTLINE_PATH, EYE_OPEN_PUPIL_PATH } from "./eyeIconPaths";
+
+export { EYE_OPEN_OUTLINE_PATH, EYE_OPEN_PUPIL_PATH } from "./eyeIconPaths";
 
 interface EyeIconProps {
   size?: number;
   color?: string;
+  strokeWidth?: number;
 }
 
-/** Minimal eye icon for input fields (no SVG dependency). */
-export function EyeIcon({ size = 20, color = "#c7cdd1" }: EyeIconProps) {
-  const stroke = Math.max(1.5, size * 0.1);
-  const eyeWidth = size * 0.78;
-  const eyeHeight = size * 0.44;
-
+/** Native — open eye (password hidden). */
+export function EyeIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2,
+}: EyeIconProps) {
   return (
-    <View style={[styles.root, { width: size, height: size }]}>
-      <View
-        style={{
-          position: "absolute",
-          left: (size - eyeWidth) / 2,
-          top: (size - eyeHeight) / 2,
-          width: eyeWidth,
-          height: eyeHeight,
-          borderRadius: eyeHeight / 2,
-          borderWidth: stroke,
-          borderColor: color,
-        }}
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={EYE_OPEN_OUTLINE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
-      <View
-        style={{
-          position: "absolute",
-          left: size / 2 - size * 0.14,
-          top: size / 2 - size * 0.14,
-          width: size * 0.28,
-          height: size * 0.28,
-          borderRadius: size * 0.14,
-          borderWidth: stroke,
-          borderColor: color,
-        }}
+      <Path
+        d={EYE_OPEN_PUPIL_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
-    </View>
+    </Svg>
   );
 }
-
-const styles = StyleSheet.create({
-  root: {
-    position: "relative",
-  },
-});

package/src/icons/EyeIcon.web.tsx

@@ -0,0 +1,42 @@
+import { EYE_OPEN_OUTLINE_PATH, EYE_OPEN_PUPIL_PATH } from "./eyeIconPaths";
+
+interface EyeIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Web — open eye (password hidden). */
+export function EyeIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2,
+}: EyeIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={EYE_OPEN_OUTLINE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d={EYE_OPEN_PUPIL_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { EYE_OPEN_OUTLINE_PATH, EYE_OPEN_PUPIL_PATH } from "./eyeIconPaths";

package/src/icons/EyeOffIcon.tsx

@@ -0,0 +1,29 @@
+import Svg, { Path } from "react-native-svg";
+import { EYE_OFF_PATH } from "./eyeIconPaths";
+
+export { EYE_OFF_PATH } from "./eyeIconPaths";
+
+interface EyeOffIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Native — slashed eye (password visible). */
+export function EyeOffIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2,
+}: EyeOffIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={EYE_OFF_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/EyeOffIcon.web.tsx

@@ -0,0 +1,35 @@
+import { EYE_OFF_PATH } from "./eyeIconPaths";
+
+interface EyeOffIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Web — slashed eye (password visible). */
+export function EyeOffIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2,
+}: EyeOffIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={EYE_OFF_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { EYE_OFF_PATH } from "./eyeIconPaths";

package/src/icons/eyeIconPaths.ts

@@ -0,0 +1,8 @@
+export const EYE_OPEN_OUTLINE_PATH =
+  "M1.71835 10.2898C1.6489 10.1027 1.6489 9.89691 1.71835 9.70981C2.39476 8.06969 3.54294 6.66735 5.01732 5.68056C6.4917 4.69378 8.22588 4.16699 10 4.16699C11.7741 4.16699 13.5083 4.69378 14.9827 5.68056C16.4571 6.66735 17.6053 8.06969 18.2817 9.70981C18.3511 9.89691 18.3511 10.1027 18.2817 10.2898C17.6053 11.9299 16.4571 13.3323 14.9827 14.3191C13.5083 15.3058 11.7741 15.8326 10 15.8326C8.22588 15.8326 6.4917 15.3058 5.01732 14.3191C3.54294 13.3323 2.39476 11.9299 1.71835 10.2898Z";
+
+export const EYE_OPEN_PUPIL_PATH =
+  "M10 12.4998C11.3807 12.4998 12.5 11.3805 12.5 9.99981C12.5 8.6191 11.3807 7.49981 10 7.49981C8.6193 7.49981 7.50001 8.6191 7.50001 9.99981C7.50001 11.3805 8.6193 12.4998 10 12.4998Z";
+
+export const EYE_OFF_PATH =
+  "M10.733 5.076C13.0624 4.7984 15.4186 5.29082 17.4419 6.47805C19.4651 7.66528 21.0442 9.48208 21.938 11.651C22.0213 11.8755 22.0213 12.1225 21.938 12.347C21.5705 13.238 21.0848 14.0755 20.494 14.837M14.084 14.158C13.5182 14.7045 12.7604 15.0069 11.9738 15C11.1872 14.9932 10.4348 14.6777 9.87854 14.1215C9.32232 13.5652 9.00681 12.8128 8.99998 12.0262C8.99314 11.2396 9.29553 10.4818 9.842 9.916M17.479 17.499C16.1525 18.2848 14.6725 18.776 13.1394 18.9394C11.6063 19.1028 10.056 18.9345 8.59363 18.4459C7.13131 17.9573 5.79119 17.1599 4.66421 16.1077C3.53723 15.0556 2.64975 13.7734 2.062 12.348C1.97866 12.1235 1.97866 11.8765 2.062 11.652C2.94863 9.50186 4.50867 7.69725 6.508 6.509M2 2L22 22";

package/src/theme/input.ts

@@ -37,18 +37,33 @@ interface FieldStyleSet {
   icon: string;
 }
 
-export function getInputFieldStyles(state: InputVisualState): FieldStyleSet {
-  const outlineBase: ViewStyle = {
+function createOutlineStyle(ringColor: string): ViewStyle {
+  return {
     borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
-    padding: INPUT_OUTLINE_WIDTH,
+    borderWidth: INPUT_OUTLINE_WIDTH,
+    borderColor: ringColor,
+    padding: 0,
     backgroundColor: colors.transparent,
+    width: "100%",
+    alignSelf: "stretch",
+    ...(Platform.OS !== "web" ? { overflow: "hidden" as const } : null),
+  };
+}
+
+const defaultOutline = createOutlineStyle(colors.transparent);
+
+export function getInputFieldStyles(state: InputVisualState): FieldStyleSet {
+  const containerBase: ViewStyle = {
+    borderRadius: radii.lg,
+    ...(Platform.OS !== "web" ? { overflow: "hidden" as const } : null),
   };
 
   switch (state) {
     case "disabled":
       return {
-        outline: outlineBase,
+        outline: defaultOutline,
         container: {
+          ...containerBase,
           borderWidth: 1,
           borderColor: colors.stormGray50,
           backgroundColor: colors.stormGray50,
@@ -59,11 +74,9 @@ export function getInputFieldStyles(state: InputVisualState): FieldStyleSet {
       };
     case "error":
       return {
-        outline: {
-          ...outlineBase,
-          backgroundColor: colors.inputOutlineError,
-        },
+        outline: createOutlineStyle(colors.inputOutlineError),
         container: {
+          ...containerBase,
           borderWidth: 1,
           borderColor: colors.inputError,
           backgroundColor: colors.white,
@@ -74,11 +87,9 @@ export function getInputFieldStyles(state: InputVisualState): FieldStyleSet {
       };
     case "focused":
       return {
-        outline: {
-          ...outlineBase,
-          backgroundColor: colors.inputOutlineFocus,
-        },
+        outline: createOutlineStyle(colors.inputOutlineFocus),
         container: {
+          ...containerBase,
           borderWidth: 1,
           borderColor: colors.navy,
           backgroundColor: colors.white,
@@ -89,8 +100,9 @@ export function getInputFieldStyles(state: InputVisualState): FieldStyleSet {
       };
     default:
       return {
-        outline: outlineBase,
+        outline: defaultOutline,
         container: {
+          ...containerBase,
           borderWidth: 1,
           borderColor: colors.stormGray50,
           backgroundColor: colors.white,
@@ -122,12 +134,15 @@ export const inputFieldMetrics = StyleSheet.create({
     fontFamily: fonts.sans,
     fontSize: fontSize.md,
     fontWeight: fontWeight.medium,
-    lineHeight: fontSize.md,
+    lineHeight: Platform.OS === "web" ? fontSize.md : 20,
     paddingVertical: 0,
     paddingHorizontal: 0,
     margin: 0,
     borderWidth: 0,
     backgroundColor: colors.transparent,
+    ...(Platform.OS === "android"
+      ? { includeFontPadding: false }
+      : null),
     ...(Platform.OS === "web"
       ? ({
           height: "100%",

package/src/theme/tokens.ts

@@ -236,20 +236,20 @@ export const labelTypography = {
   letterSpacing: 0,
 } as const;
 
-/** Button label typography — matches Figma (SemiBold, 100% line-height). */
+/** Button label typography — SemiBold; line-height slightly above 100% for RN clipping. */
 export const buttonTypography = {
   lg: {
     fontFamily: fonts.sans,
     fontSize: 14,
     fontWeight: fontWeight.semibold,
-    lineHeight: 14,
+    lineHeight: 18,
     letterSpacing: 0,
   },
   sm: {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: fontWeight.semibold,
-    lineHeight: 12,
+    lineHeight: 16,
     letterSpacing: 0,
   },
 } as const;